import { CustomElement } from '../../Abstracts/CustomElement'; import type { ILightChainElementProps } from './ILightChainElementProps'; declare const LightChainElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * LightChain - A decorative animated string of lights effect for festive and ambient visual enhancement. * * @description * The LightChain component creates an animated sequence of colorful light bulbs that simulate a string * of holiday or decorative lights. It generates a configurable number of individual light elements with * alternating colors and twinkling animation effects. The component supports three operational states: * 'on' for continuous illumination, 'off' for static display, and 'auto' for automated animation cycles. * Each light bulb is rendered with distinct styling based on its position in the sequence, creating * a realistic and visually appealing lighting pattern. The component can be disabled to pause animations, * making it ideal for seasonal decorations, festive page headers, celebration announcements, or any * interface requiring whimsical animated accent elements. Based on CSS animations inspired by classic * holiday light displays. * * @name LightChain * @element mosaik-light-chain * @category Misc * * @slot - Default slot (currently unused, lights are generated programmatically) * * @csspart root - The root container element wrapping the entire light chain * @csspart blub - Individual light bulb element in the chain (repeated based on count) * * @cssprop {String} --light-chain-display - The display mode for the light chain container * @cssprop {String} --light-chain-position - The positioning context for the light chain * @cssprop {String} --light-chain-width - The total width of the light chain * @cssprop {String} --light-chain-height - The total height of the light chain * @cssprop {String} --light-chain-padding - The inner spacing within the container * @cssprop {String} --light-chain-overflow - The overflow behavior for the container * @cssprop {String} --light-chain-list-style - The list style type for the bulb list * @cssprop {String} --light-chain-list-padding - The padding for the bulb list * @cssprop {String} --light-chain-list-margin - The margin for the bulb list * @cssprop {String} --light-chain-bulb-display - The display mode for individual bulbs * @cssprop {String} --light-chain-bulb-position - The positioning for individual bulbs * @cssprop {String} --light-chain-bulb-width - The width of each light bulb * @cssprop {String} --light-chain-bulb-height - The height of each light bulb * @cssprop {String} --light-chain-bulb-border-radius - The corner rounding for bulbs * @cssprop {String} --light-chain-bulb-margin - The spacing between bulbs * @cssprop {String} --light-chain-bulb-first-background - The background color for first bulb pattern * @cssprop {String} --light-chain-bulb-first-box-shadow - The glow effect for first bulb pattern * @cssprop {String} --light-chain-bulb-first-animation-name - The animation keyframes for first bulb * @cssprop {String} --light-chain-bulb-first-animation-duration - The animation duration for first bulb * @cssprop {String} --light-chain-bulb-first-animation-timing-function - The easing for first bulb animation * @cssprop {String} --light-chain-bulb-first-animation-iteration-count - The animation repeat count for first bulb * @cssprop {String} --light-chain-bulb-second-background - The background color for second bulb pattern * @cssprop {String} --light-chain-bulb-second-box-shadow - The glow effect for second bulb pattern * @cssprop {String} --light-chain-bulb-second-animation-name - The animation keyframes for second bulb * @cssprop {String} --light-chain-bulb-second-animation-duration - The animation duration for second bulb * @cssprop {String} --light-chain-bulb-second-animation-timing-function - The easing for second bulb animation * @cssprop {String} --light-chain-bulb-second-animation-iteration-count - The animation repeat count for second bulb * @cssprop {String} --light-chain-bulb-third-background - The background color for third bulb pattern * @cssprop {String} --light-chain-bulb-third-box-shadow - The glow effect for third bulb pattern * @cssprop {String} --light-chain-bulb-third-animation-name - The animation keyframes for third bulb * @cssprop {String} --light-chain-bulb-third-animation-duration - The animation duration for third bulb * @cssprop {String} --light-chain-bulb-third-animation-timing-function - The easing for third bulb animation * @cssprop {String} --light-chain-bulb-third-animation-iteration-count - The animation repeat count for third bulb * * @example * Basic light chain with default count (56 lights): * ```html * * ``` * * @example * Light chain with custom count: * ```html * * ``` * * @example * Light chain in different states: * ```html * * * * ``` * * @public */ export declare class LightChainElement extends LightChainElement_base implements ILightChainElementProps { private _count; private _state; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `count` property. * The number of light bulbs to render in the chain. * The default value is 56. * * @public * @attr */ get count(): number; set count(value: number); /** * Gets or sets the `state` property. * Controls the operational state of the light chain: 'on' for continuous illumination, * 'off' for static display, or 'auto' for automated animation cycles. * The default value is 'off'. * * @public * @attr */ get state(): 'on' | 'off' | 'auto'; set state(value: 'on' | 'off' | 'auto'); } /** * @public */ export declare namespace LightChainElement { type Props = ILightChainElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-light-chain': LightChainElement; } } export {}; //# sourceMappingURL=LightChainElement.d.ts.map