@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
70 lines • 2.35 kB
TypeScript
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
import { type ReactiveController, type ReactiveControllerHost } from 'lit';
/**
* Configuration options for {@link MeasuredContentWidthController}.
*
* @deprecated Use {@link MeasuredDimensionOptions} and {@link OpacityTransitionOptions}
* directly instead.
*/
export interface MeasuredContentTransitionOptions {
/**
* Returns the target element whose natural size is observed and animated.
* May return `null` before the element has been rendered.
*/
target: () => HTMLElement | null;
/**
* The CSS dimension to animate.
* @default 'width'
*/
dimension?: 'width' | 'height';
/**
* Animation duration in milliseconds.
* @default 300
*/
duration?: number;
/**
* CSS easing function for the animation.
* @default 'cubic-bezier(0.2, 0, 0.2, 1)'
*/
easing?: string;
/**
* Whether to include an opacity fade during the transition.
* When `true`, opacity goes from 0 → 1 over the animation duration.
* @default true
*/
opacity?: boolean;
}
/**
* A `ReactiveController` that animates a single CSS dimension (width or
* height) and optionally opacity of a target element whenever its natural
* measured size changes.
*
* @deprecated This controller combines two concerns that should be kept separate.
* Use {@link MeasuredDimensionController} for dimension animation
* and {@link OpacityTransitionController} for opacity fading.
* Instantiate both controllers independently in your component.
*
* @example
* ```ts
* private readonly sizeController = new MeasuredDimensionController(this, {
* target: () => this.labelElement,
* dimension: 'width',
* duration: 250,
* })
* private readonly opacityController = new OpacityTransitionController(this, {
* target: () => this.labelElement,
* duration: 250,
* })
* ```
*/
export declare class MeasuredContentWidthController implements ReactiveController {
constructor(host: ReactiveControllerHost & Element, options: MeasuredContentTransitionOptions);
hostConnected(): void;
hostDisconnected(): void;
hostUpdated(): void;
}
//# sourceMappingURL=measured-content-width-controller.d.ts.map