/// declare module "@cxl/ui/rx.js" { type ObservableError = unknown; type NextFunction = (val: T) => void; type ErrorFunction = (err: ObservableError) => void; type CompleteFunction = () => void; type UnsubscribeFunction = () => void; type SubscribeFunction = (subscription: Subscriber) => UnsubscribeFunction | void | Promise; type Merge = T extends Observable ? U : never; type ObservableT = T extends Observable ? U : never; type PickObservable = { [P in keyof T]: T[P] extends Observable ? ObservableT : never; }; export type Operator = (observable: Observable) => Observable; export interface Observer { next?: NextFunction; error?: ErrorFunction; complete?: CompleteFunction; } export interface Subscribable { subscribe(observer: Observer): Subscription; } export const observableSymbol = "@@observable"; export interface InteropObservable { [observableSymbol]: () => Subscribable; } type NextObserver = NextFunction | Observer | undefined; export interface Subscription { unsubscribe(): void; } export class Subscriber { private observer; private onUnsubscribe; private teardown?; closed: boolean; constructor(observer: Observer, subscribe?: SubscribeFunction, fwd?: (subscriber: Subscription) => void); setTeardown(teardown: () => void): void; next(val: T): void; error(e: ObservableError): void; complete(): void; unsubscribe(): void; } /** * Used to stitch together functional operators into a chain. */ export function pipe(a: Operator, b: Operator): Operator; export function pipe(a: Operator, b: Operator, c: Operator): Operator; export function pipe(a: Operator, b: Operator, c: Operator, d: Operator): Operator; export function pipe(a: Operator, b: Operator, c: Operator, d: Operator, e: Operator): Operator; /** * A representation of any set of values over any amount of time. */ export class Observable { protected __subscribe: SubscribeFunction; [observableSymbol](): this; constructor(__subscribe: SubscribeFunction); then(resolve: (val: P extends 'emit1' ? T : T | undefined) => R, reject?: (e: E) => R): Promise; pipe(a: Operator): Observable; pipe(a: Operator, b: Operator): Observable; pipe(a: Operator, b: Operator, c: Operator): Observable; pipe(a: Operator, b: Operator, c: Operator, d: Operator): Observable; pipe(a: Operator, b: Operator, c: Operator, d: Operator, e: Operator): Observable; /** * Invokes an execution of an Observable and registers Observer handlers for notifications it will emit. */ subscribe(next?: NextObserver, fwd?: (subs: Subscription) => void): Subscription; } /** * A Subject is an Observable that allows values to be * multicasted to many Observers. */ export class Subject extends Observable { protected observers: Set>; protected onSubscribe(subscriber: Subscriber): UnsubscribeFunction; protected isStopped: boolean; constructor(); next(a: T): void; error(e: ErrorT): void; complete(): void; } /** * A subject that guarantees all subscribers receive the same values in the order they were emitted. */ export class OrderedSubject extends Subject { private queue; private emitting; next(a: T): void; } /** * A variant of Subject that requires an initial value and emits its current value whenever it is subscribed to. * @see be */ export class BehaviorSubject extends Subject { private currentValue; constructor(currentValue: T); get value(): T; protected onSubscribe(subscription: Subscriber): UnsubscribeFunction; next(val: T): void; } /** * A variant of Subject that "replays" or emits old values to new subscribers. * It buffers a set number of values and will emit those values immediately to any * new subscribers in addition to emitting new values to existing subscribers. */ export class ReplaySubject extends Subject { readonly bufferSize: number; private buffer; private hasError; private lastError?; constructor(bufferSize?: number); protected onSubscribe(subscriber: Subscriber): () => boolean; error(val: ErrorT): void; next(val: T): void; } const Undefined: {}; /** * A Reference is a behavior subject that does not require an initial value. */ export class Reference extends Subject { protected $value: T | typeof Undefined; get hasValue(): boolean; get value(): T; protected onSubscribe(subscription: Subscriber): UnsubscribeFunction; next(val: T): void; } type ConcatResult[]> = R extends (infer U)[] ? Observable> : never; /** * Creates an output Observable which sequentially emits all values from given Observable and then moves on to the next. */ export function concat[]>(...observables: R): ConcatResult; /** * Creates an Observable that, on subscribe, calls an Observable factory to make an Observable for each new Observer. */ export function defer(fn: () => Subscribable): Observable; export function isInterop(obs: object): obs is InteropObservable; export function fromArray(input: Array): Observable; export function fromPromise(input: Promise): Observable; export function fromAsync(input: () => Promise): Observable; /** * Creates an Observable from an Array, an array-like object, a Promise, an iterable object, or an Observable-like object. */ export function from(input: Array | Promise | Observable | InteropObservable): Observable; /** * Converts the arguments to an observable sequence. */ export function of(...values: T[]): Observable; /** * Generates a promise from an observable, the promise will resolve when the observable completes. */ export function toPromise(observable: Observable): Promise
Switch is on
*/ export class ToggleSwitch extends ToggleBase { } } /// declare module "@cxl/ui/icon.js" { import { Component } from "@cxl/ui/component.js"; export const MenuIcon: (prop?: import("@cxl/ui/theme.js").SvgIconAttributes | undefined) => SVGSVGElement; export const MoreVertIcon: (prop?: import("@cxl/ui/theme.js").SvgIconAttributes | undefined) => SVGSVGElement; export const CloseIcon: (prop?: import("@cxl/ui/theme.js").SvgIconAttributes | undefined) => SVGSVGElement; export function iconSprite(href: string): SVGSVGElement; /** * The Icon component provides a reusable and declarative way to display icons within your application. * * Simplifies icon usage by handling icon retrieval, sizing, and basic styling. * Offers a central location to manage icon definitions and their rendering logic. * * @demo * */ export class Icon extends Component { /** * A string representing the name or identifier of the icon to be displayed. * This name is used to retrieve the icon definition from an external source. */ name: string; /** * A number specifying the desired width of the icon in pixels. */ width?: number; /** * A number specifying the desired height of the icon in pixels. */ height?: number; /** * A string to be used as the alt attribute of the rendered icon element, * providing alternative text for accessibility purposes. */ alt?: string; } } /// declare module "@cxl/ui/icon-button.js" { import { ButtonBase } from "@cxl/ui/button.js"; /** * The IconButton component provides a button styled for displaying an icon. * * @example * * */ export class IconButton extends ButtonBase { /** * A string representing the name of the icon to be displayed within the button. */ icon: string; /** * A number specifying the desired width of the button in pixels. */ width?: number; /** * A number specifying the desired height of the button in pixels. */ height?: number; } } /// declare module "@cxl/ui/layout.js" { import { Component } from "@cxl/ui/component.js"; import { Spacing, SurfaceColorValue } from "@cxl/ui/theme.js"; export type Elevation = 0 | 1 | 2 | 3 | 4 | 5; /** * The BlockBase class provides a base for building reusable UI blocks. * It offers styles for common properties like background color, padding, sizing, and elevation. */ export abstract class BlockBase extends Component { /** A boolean attribute indicating whether the block should grow to fill available space. */ grow: boolean; /** A boolean attribute indicating whether the block should fill its container entirely using absolute positioning. */ fill: boolean; /** * Responsive sizing based on screen sizes (extra small) * Value represent the number of grid columns to span. */ xs?: number; /** * Responsive sizing based on screen sizes (small) * Value represent the number of grid columns to span. */ sm?: number; /** * Responsive sizing based on screen sizes (medium) * Value represent the number of grid columns to span. */ md?: number; /** * Responsive sizing based on screen sizes (large) * Value represent the number of grid columns to span. */ lg?: number; /** * Responsive sizing based on screen sizes (extra large) * Value represent the number of grid columns to span. */ xl?: number; /** * An attribute for applying uniform padding around the block content. */ pad?: Spacing; /** * An attribute for applying vertical padding only (top and bottom). */ vpad?: Spacing; /** * A color attribute allowing control over the block's background and text color. */ color?: SurfaceColorValue; /** * A boolean attribute for horizontally centering the block content. */ center: boolean; /** * A number attribute specifying the block's elevation shadow effect (0-5). */ elevation: Elevation; } /** * The R component allows you to hide and show content based on the browser available screen space. * You can use it to create responsive layouts that can show or hide different content depending on the screen size. * You can define conditions for different screen size ranges using predefined breakpoints like _xs_ (extra small), _sm_ (small), _md_ (medium), _lg_ (large), and _xl_ (extra large). This allows you to fine-tune content visibility at specific screen widths. * * @beta * @demo * xs0 sm Hidden in extra small screens, visible in small to extra large screens. xs sm0 Visible only in extra small screens. */ export class R extends Component { /** * Attribute for defining visibility conditions at extra small screen sizes. * The value can be either a boolean (true/false) or a number indicating the minimum number * of columns to be visible (0 for hidden). */ xs: 0 | boolean; /** * Attribute for defining visibility conditions at small screen sizes. * The value can be either a boolean (true/false) or a number indicating the minimum number * of columns to be visible (0 for hidden). */ sm: 0 | boolean; /** * Attribute for defining visibility conditions at medium screen sizes. * The value can be either a boolean (true/false) or a number indicating the minimum number * of columns to be visible (0 for hidden). */ md: 0 | boolean; /** * Attribute for defining visibility conditions at large screen sizes. * The value can be either a boolean (true/false) or a number indicating the minimum number * of columns to be visible (0 for hidden). */ lg: 0 | boolean; /** * Attribute for defining visibility conditions at extra large screen sizes. * The value can be either a boolean (true/false) or a number indicating the minimum number * of columns to be visible (0 for hidden). */ xl: 0 | boolean; } /** * The `` component is a basic container component that provides content alignment and responsiveness. You can use it to wrap any content or other components inside it, and control how they are displayed on the screen. * * The `` component offers attributes like _pad_, _vpad_, and _grow_ to control the positioning and spacing of its child elements within the container. You can further enhance the appearance of the `` element using attributes like _color_ and _elevation_ to add visual cues and hierarchy to your layout. * */ export class C extends BlockBase { } /** * The Flex component builds upon the BlockBase class and provides additional styles and * attributes for creating flexible layouts using CSS flexbox. * It allows for dynamic content arrangement and responsiveness. * * @demo * * Item 1 * Item 2 * Item 3 * */ export class Flex extends BlockBase { /** * A boolean attribute indicating a vertical flex layout. * * @demo * * Item 1 * Item 2 * Item 3 * */ vflex: boolean; /** * A spacing attribute to control the gap between flex items using columnGap and rowGap properties. */ gap?: Spacing; /** * Centers content vertically or horizontally within the flex container. */ middle: boolean; } export type LayoutType = 'block' | 'grid' | 'two-column' | 'two-column-left' | 'two-column-right'; /** * The Layout component provides a flexible way to structure your UI layouts. * It offers predefined options and responsive styles for various layout configurations. * * @beta * @demo * *
Left Column Content
*
Right Column Content
*
*/ export class Layout extends Component { /** * A string attribute defining the layout type. Options include: * - `block`: Creates a simple block-level container. * - `grid`: Creates a basic grid layout with 12 columns. * - `two-column`: Creates a two-column layout with equal width columns (responsive adjustments apply). * - `two-column-left`: Creates a two-column layout with a wider left column (responsive adjustments apply). * - `two-column-right`: Creates a two-column layout with a wider right column (responsive adjustments apply). */ type?: LayoutType; /** A boolean attribute for horizontally centering the layout content. */ center: boolean; /** A boolean attribute for removing width restrictions and allowing the layout to fill its container. */ full: boolean; } /** * The Card component represents a content block focused on a single subject. * It provides a standard visual container for displaying information, actions, * and potentially an image related to that subject. * * @example * * * * * Card Title * Secondary Text * * * * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * * * */ export class Card extends C { /** * Attribute that controls the card's elevation shadow effect */ elevation: Elevation; } /** * The Grid component is a responsive layout grid that adapts to screen sizes and orientation, ensuring consistency across layouts. You can use it to create grid-based layouts that can arrange the content in rows and columns, with different sizes and alignments. By default the Grid component uses a 12-column grid. * * @example * * 1 * 2 * 3 * 4 * 5 * */ export class Grid extends Component { /** * A number attribute specifying the number of rows in the grid. */ rows?: number; /** * A number or string attribute defining the number of columns (e.g., 12) * or using the special value "auto-fill" to distribute available space evenly. * Defaults to 12 columns. */ columns: number | 'auto-fill'; /** * A string attribute for defining a custom column template using CSS grid syntax * (e.g., "repeat(4, 1fr)" for four equal-width columns). */ coltemplate?: string; } /** * The Section component builds upon the Layout component and provides a styled section * element for structuring your UI content. * It offers a standard visual container with padding and background color options. * * @beta * @demo * * Section Title *

Content with a primary background color.

*
*/ export class Section extends Layout { /** A boolean attribute for a more compact section with reduced padding. */ dense: boolean; /** * A color attribute allowing you to customize the section's background color based on the theme. */ color?: SurfaceColorValue; center: boolean; type: LayoutType | undefined; } export class Body extends Component { center: boolean; } export class Page extends Layout { type: LayoutType | undefined; } } /// declare module "@cxl/ui/popup.js" { import { Component, Span } from "@cxl/ui/component.js"; import { Observable } from "@cxl/ui/rx.js"; import { AnimationKey } from "@cxl/ui/theme.js"; import { ToggleTarget } from "@cxl/ui/toggle.js"; import { IconButton } from "@cxl/ui/icon-button.js"; import type { Elevation } from "@cxl/ui/layout.js"; module "@cxl/ui/dom.js" { interface CustomEventMap { 'popup.visible': boolean; } } export type PopupPosition = 'right top' | 'right bottom' | 'left top' | 'left bottom' | 'center top' | 'center bottom' | 'fill bottom' | 'auto' | 'none'; interface PositionOptions { element: HTMLElement; relativeTo: Element; position: PopupPosition | ((el: HTMLElement) => void); container?: HTMLElement; offsetX?: number; } interface OpenPopupOptions { element: ToggleTarget; close(): void; } export class Surrogate extends Component { target?: Element; } /** * Closes a popup on click. * * @beta * @example * * * Close * * */ export class PopupClose extends Component { } export function popupToggleBehavior($: T): Observable; /** * This component, cxl-popup-toggle, manages the visibility of a popup container based on user interaction. * * @demo * * Open * * * Popup * */ export class PopupToggle extends Component { /** A boolean style attribute indicating the popup's current visibility state (opened or closed). */ opened: boolean; /** An attribute referencing the ID of the popup element it controls or a ToggleTarget object. */ target?: string | ToggleTarget; /** An element to position the popup relative to. */ relative?: Element; position?: PopupPosition | ((el: HTMLElement) => void); } /** * The PopupIconToggle component inherits from IconButton and adds popup toggle functionality specifically * using an icon button. It builds upon the PopupToggle component with additional features. * * @example * * * Home * Support * */ export class PopupIconToggle extends IconButton { /** * Defines the icon to display on the button */ icon: string; /** A boolean style attribute indicating the popup's current visibility state (opened or closed). */ opened: boolean; /** An attribute referencing the ID of the popup element it controls or a ToggleTarget object. */ target?: string | ToggleTarget; /** An element to position the popup relative to. */ relative?: Element; position?: PopupPosition | ((el: HTMLElement) => void); } /** * The PopupBase component serves as the foundation for creating popup elements. * It manages the visibility state of the popup and provides animations for opening and closing. */ export class PopupBase extends Component { /** Controls the visibility of the popup (opened or closed). */ visible: boolean; /** Defines the animation to play when opening the popup */ animationin?: AnimationKey; /** Defines the animation to play when closing the popup */ animationout?: AnimationKey; /** A flag indicating whether to focus on the first focusable element within the popup when it opens. */ handleFocus: boolean; } /** * The Window component builds upon the cxl-popup-base functionality to create a modal window element. * It represents a popup with a higher visual importance, often used for dialogs or critical information. */ export class Window extends PopupBase { /** Controls the level of shadow applied to the window, creating a depth effect (0-5). */ elevation: number; } export function popupBehavior($: PopupBase): Observable; /** * The Popup component is a popup element that incorporates the functionalities of Window and PopupBase. * It provides a modal window with a defined look and feel, commonly used for displaying informative content or user interactions. * * @beta * @demo * * Open * * Popup */ export class Popup extends Window { /** Defaults to 'fadeIn' animation when opening the popup. */ animationin?: AnimationKey; /** Defaults to 'fadeOut' animation when closing the popup. */ animationout?: AnimationKey; /** Defaults to an elevation of 1 (can be overridden). */ elevation: Elevation; /** Sets focus on the first focusable element within the popup when it opens (default behavior). */ handleFocus: boolean; } export function positionElement({ element, relativeTo, position, container, offsetX, }: PositionOptions): void; class PopupManager { currentPopupContainer?: HTMLElement; currentPopup?: OpenPopupOptions; currentModal?: { element: HTMLDialogElement & { popupContainer?: Span; }; close: () => void; }; currentTooltip?: HTMLElement; popupContainer?: Span; toggle(options: OpenPopupOptions): void; popupOpened(options: OpenPopupOptions): void; openModal(options: { element: HTMLDialogElement; close: () => void; }): void; closeModal(): void; modalClosed(): void; tooltipOpened(element: HTMLElement): void; close(): void; } export const popupManager: PopupManager; } /// declare module "@cxl/ui/appbar-menu.js" { import { Component } from "@cxl/ui/component.js"; import type { ToggleTarget } from "@cxl/ui/toggle.js"; /** * The AppbarMenu component is used to create a menu that can be triggered from an app bar. * It provides a way to display additional options or functionalities within the app bar itself. * * The component adjusts its layout based on screen size. * - On smaller screens, the tabs are hidden and the menu trigger becomes visible. * - On larger screens, the tabs and the CTA button become visible. * * @beta * * @example * * Title * * Home * Support * FAQs * * * Buy License * * * * Home * Support * FAQs * * * * * Buy License * * */ export class AppbarMenu extends Component { /** The target attribute allows you to associate the AppbarMenu with a separate menu component. */ target?: string | ToggleTarget; right: boolean; } } /// declare module "@cxl/ui/appbar.js" { import { Component } from "@cxl/ui/component.js"; import { SurfaceColorValue } from "@cxl/ui/theme.js"; /** * Appbar is a core component that sits at the top of your application's layout. * It displays essential information, navigation, and actions relevant to the current screen. * * Prominently displays your application's logo or title for branding and context. * Integrates navigation elements like Navbar or components for user navigation. * Supports contextual menus via `cxl-appbar-contextual` components. * * Related Components: * * - cxl-appbar-title: Sets the title text within the Appbar. * - cxl-navbar: A navigation bar component suitable for placement within the Appbar. * - cxl-appbar-contextual: Defines a contextual menu associated with the Appbar. * * @see AppbarTitle * @see Navbar * @see AppbarContextual * * @demo * * * Appbar Title * * * @demo Appbar with Tabs * * * Appbar with Tabs * * Tab 1 * Tab 2 * Tab 3 * * * * @see AppbarTitle */ export class Appbar extends Component { /** * Extends the appbar height. * @demo * * * Appbar Title * * */ extended: boolean; /** * Centers Appbar in large screens */ center: boolean; /** * Sets or gets the active contextual menu. * @see AppbarContextual * @demo * * Appbar Title * Contextual Appbar * */ contextual?: string; /** * Enables sticky mode. */ sticky: boolean; /** * Removes elevation */ flat: boolean; /** Sets the component color */ color?: SurfaceColorValue; } /** * A top app bar can transform into a contextual action bar to provide contextual actions to selected items. Upon closing, the contextual action bar transforms back into a top app bar. * @see Appbar * @demo * * Appbar Title * Contextual Appbar * */ export class AppbarContextual extends Component { /** * The name of the contextual menu. Used by the contextual property of the Appbar component. */ name?: string; /** * Determines the visibility of the component when attached to an Appbar. */ visible: boolean; } /** * @see Appbar */ export class AppbarTitle extends Component { } } /// declare module "@cxl/ui/field.js" { import { Component } from "@cxl/ui/component.js"; import { InputBase } from "@cxl/ui/input-base.js"; import { Observable } from "@cxl/ui/rx.js"; import { IconButton } from "@cxl/ui/icon-button.js"; export const FieldBase: (($: T) => Node)[]; export function fieldInput(host: T): Observable; export class FocusLine extends Component { focused: boolean; invalid: boolean; } /** * The Field component serves as a container for form input elements. * It allows you to customize the appearance (outlined, floating label, leading icon) * and layout of the field. * * @example * * Form Field * * Field Help Text * */ export class Field extends Component { /** * Sets the field to have an outlined visual style. Defaults to false. * * @example * * Form Field * * Field Help Text * */ outline: boolean; /** Sets the field to have a floating label that animates when the field is focused or has a value. */ floating: boolean; /** Sets the field to have an icon displayed before the input. */ leading: boolean; /** * Sets the field to have a denser vertical spacing. * * @example * * Form Field * * Field Help Text * */ dense: boolean; /** * A reference to the underlying input component being used within the field. * This allows for direct interaction with the input element. */ readonly input?: InputBase; } /** * Displays helper text or error messages below input fields. * Place within a Field component. * Use the invalid property to denote invalid field states. * * @example * * Field Label * * Field Error Text * * */ export class FieldHelp extends Component { /** Sets the component to an invalid style, typically indicating an error. */ invalid: boolean; } /** * Displays the character count used within an input field relative to a defined maximum character limit. * This allows users to track their progress and stay within the allowed character limit. * * The FieldCounter component is designed to be used within a Field component, typically placed after the input field. * * @example * * Input Label * * * */ export class FieldCounter extends Component { /** The maximum number of characters allowed in the associated input field. */ max: number; /** A reference to the underlying input component being used. */ input?: InputBase; } /** * The FieldClear component provides a visual element to clear the value within an associated input field. * It appears as a close icon on the right side of the field. * * The FieldClear component is designed to be used within a Field component, typically placed after the input field. * * @beta * @demo * * Search * * * */ export class FieldClear extends IconButton { /** The name of the icon to be displayed */ icon: string; /** The width of the button in pixels */ width: number; } /** * The Label component provides a visually distinct element to describe the expected input from the user. * * The Label component should be placed within a Field component, typically before the input field. */ export class Label extends Component { /** * A reference to the underlying input component this label is associated with. * This allows for automatic linking and accessibility improvements. */ input?: InputBase; } } /// declare module "@cxl/ui/model.js" { import { ComponentAttributeName } from "@cxl/ui/component.js"; import { Observable } from "@cxl/ui/rx.js"; import { ElementWithValue } from "@cxl/ui/core.js"; type CommonKeys = keyof { [K in keyof T]: K extends ComponentAttributeName ? T[K] : never; }; type CommonProperties = { [K in CommonKeys]: K extends ComponentAttributeName ? T[K] extends T2[K] ? T[K] : never : never; }; interface NextObservable extends Observable { next(val: T): void; } export function sync(getA: Observable, setA: (val: T) => void, getB: Observable, setB: (val: T) => void, value?: T): Observable; export function syncAttribute(A: T, B: T2, attr: keyof CommonProperties): Observable; export function syncElement(el: ElementWithValue, read: Observable, write: (val: T) => void): Observable; export function model(el: ElementWithValue, ref: NextObservable): Observable; } /// declare module "@cxl/ui/appbar-search.js" { import { CustomInputBase } from "@cxl/ui/input-base.js"; import { Appbar } from "@cxl/ui/appbar.js"; import { IconButton } from "@cxl/ui/icon-button.js"; import { Input } from "@cxl/ui/input.js"; /** * Search input component specifically designed for use within an Appbar. * Manages both a visible input field on desktop and a clickable search icon on mobile. * * @demo * * Appbar Title * * * @beta * @see Appbar */ export class AppbarSearch extends CustomInputBase { /** * Controls visibility of the search input. */ opened: boolean; /** Specifies a more compact layout. */ dense: boolean; desktopInput?: Input; mobileInput?: Input; protected mobileIcon?: IconButton; protected appbar?: Appbar; /** Holds the current search query. */ value: string; /** Expands the search input for user interaction. */ open(): void; /** Focuses the appropriate input element. */ focus(): void; } } /// declare module "@cxl/ui/application.js" { import { Component } from "@cxl/ui/component.js"; export function applyMeta(owner?: Document): void; /** * The cxl-meta component simplifies the management of essential meta tags and baseline * styles required for most web applications. */ export class Meta extends Component { connectedCallback(): void; } /** * The Application component serves as the foundation for your web application's layout. It provides a base structure with essential styles and designated areas for your application's content and navigation drawers. * * @see Meta * * @example * * * Navbar * Appbar * * Body * */ export class Application extends Component { } } /// declare module "@cxl/ui/svg.js" { import { Component } from "@cxl/ui/component.js"; export interface SvgNode { style?: string; className?: string; } export const Svg: (p: Partial<{ viewBox: string; width: number; height: number; alt: string; children: Node | Node[]; src: string; preserveAspectRatio: string; } & SvgNode>) => SVGSVGElement; export const Path: (p: Partial<{ fill: string; d: string; } & SvgNode>) => SVGPathElement; export const Circle: (p: Partial<{ cx: string; cy: string; r: string; } & SvgNode>) => SVGCircleElement; export class SvgImage extends Component { src?: string; } } /// declare module "@cxl/ui/selectable.js" { import { Observable } from "@cxl/ui/rx.js"; import { Component } from "@cxl/ui/component.js"; module "@cxl/ui/dom.js" { interface CustomEventMap { 'selectable.action': SelectableTarget; } } module "@cxl/ui/registable.js" { interface RegistableMap { selectable: SelectableTarget; } } export interface SelectableTarget extends Component { value: unknown; selected: boolean; view?: typeof Component; } export interface SelectableBase extends Element { options: Set; optionView?: typeof Component; } interface SelectableHost extends SelectableBase { selected?: T; } /** * Handles element selection events. Emits everytime a new item is selected. */ export function selectableHost(host: SelectableHost, input: Observable<(HTMLElement & { value: unknown; }) | undefined>, op?: { force: boolean; }): Observable; export function selectable(host: T): Observable; } /// declare module "@cxl/ui/option.js" { import { Component } from "@cxl/ui/component.js"; /** * The Option component represents a single option within a dropdown menu or similar selectable list. * It provides features for managing the option's state (selected, focused, hidden) and rendering its content. */ export class Option extends Component { /** An attribute specifying the unique value associated with the option. */ value: unknown; /** An attribute referencing another component class that defines how the option should be rendered visually. */ view?: typeof Component; /** A boolean style attribute indicating whether the option is currently selected. */ selected: boolean; /** A boolean style attribute indicating whether the option should be hidden. */ hidden: boolean; /** A boolean style attribute indicating whether the option is currently focused. */ focused: boolean; /** A property holding a reference to the underlying HTML element used to render the option (populated by the component). */ readonly rendered?: HTMLElement; } } /// declare module "@cxl/ui/select.js" { import { Component } from "@cxl/ui/component.js"; import { CustomInputBase, InputBase } from "@cxl/ui/input-base.js"; import { PopupBase, PopupPosition } from "@cxl/ui/popup.js"; import type { Option } from "@cxl/ui/option.js"; export class SelectOption extends Component { } /** * The SelectMenuBase class serves as a foundation for building select menu components. * It provides the core functionalities for managing a dropdown menu associated with a user input element. */ export abstract class SelectMenuBase extends PopupBase { readonly selected?: unknown; readonly options: Set

; export class EmptyError extends Error { message: string; } export function firstValueFrom(observable: Observable): Promise; export function operatorNext(fn: (subs: Subscriber) => NextFunction, unsubscribe?: () => void): (source: Observable) => Observable; export function operator(fn: (subs: Subscriber, source: Observable) => Observer & { next: NextFunction; unsubscribe?: UnsubscribeFunction; }): Operator; /** * Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable. */ export function map(mapFn: (val: T) => T2): (source: Observable) => Observable; /** * Applies an accumulator function over the source Observable, and returns the accumulated result when the source completes, given an optional seed value. */ export function debounceFunction any>(fn: F, delay?: number): ((...args: Parameters) => void) & { cancel(): void; }; export function interval(period: number): Observable; export function timer(delay: number): Observable; /** * Emits a value from the source Observable only after a particular time span has passed without another source emission. */ export function debounceTime(time?: number, useTimer?: typeof timer): Operator; /** * Projects each source value to an Observable which is merged in the output Observable, * emitting values only from the most recently projected Observable. */ export function switchMap(project: (val: T) => Observable): (source: Observable) => Observable; /** * Projects each source value to an Observable which is merged in the output Observable. */ export function mergeMap(project: (val: T) => Observable): (source: Observable) => Observable; /** * Projects each source value to an Observable which is merged in the output Observable * only if the previous projected Observable has completed. */ /** * Filter items emitted by the source Observable. * * @see distinctUntilChanged */ export function filter(fn: (val: T) => boolean): Operator; /** * Emits only the first count values emitted by the source Observable. */ export function take(howMany: number): (source: Observable) => Observable; /** * Emits values while fn result is truthy. */ export function takeWhile(fn: (val: T) => boolean): (source: Observable) => Observable; /** * Emits only the first value emitted by the source Observable. * Delivers an EmptyError to the Observer's error callback if the Observable completes before any next notification was sent */ export function first(): Operator; /** * Perform a side effect for every emission on the source Observable, * but return an Observable that is identical to the source. */ export function tap(fn: (val: T) => void): Operator; /** * Catches errors on the observable. * * @param selector A function that takes as arguments the error `err`, and `source`, which * is the source observable. The observable * returned will be used to continue the observable chain. * */ export function catchError(selector: (err: unknown, source: Observable) => Observable | void): Operator; /** * Returns an Observable that emits all items emitted by the source Observable * that are distinct by comparison from the previous item. */ export function distinctUntilChanged(): Operator; export function select(key: K): (source: Observable) => Observable; export function share(): Operator; /** * Returns an observable that shares a single subscription to the underlying sequence containing only the last notification. */ export function publishLast(): Operator; type MergeResult[]> = R extends (infer U)[] ? Observable> : never; /** * Creates an output Observable which concurrently emits all values from every given input Observable. */ export function merge[]>(...observables: R): MergeResult; /** * Combines multiple Observables to create an Observable whose values are calculated from the values, in order, of each of its input Observables. */ export function zip[]>(...observables: T): Observable>; /** * Combines multiple Observables to create an Observable whose values are calculated from the * latest values of each of its input Observables. */ export function combineLatest[]>(...observables: T): Observable>; /** * Returns an Observable that mirrors the source Observable, but will call a * specified function when the source terminates on complete or error. */ export function finalize(unsubscribe: () => void): Operator; export function ignoreElements(): Operator; /** * Creates an Observable that emits no items to the Observer and immediately emits an error notification. */ export function throwError(error: unknown): Observable; /** * An observable that completes on subscription. */ export const EMPTY: Observable; /** * Creates a new Behavior Subject. */ export function be(initialValue: T): BehaviorSubject; /** * Creates a new Observable */ export function observable(subscribe: SubscribeFunction): Observable; /** * Creates a new Subject */ export function subject(): Subject; /** * Creates a new Reference object. A reference is a Behavior Subject that does not require an initial value. */ export function ref(): Reference; export const operators: { readonly catchError: typeof catchError; readonly debounceTime: typeof debounceTime; readonly distinctUntilChanged: typeof distinctUntilChanged; readonly filter: typeof filter; readonly finalize: typeof finalize; readonly first: typeof first; readonly ignoreElements: typeof ignoreElements; readonly map: typeof map; readonly mergeMap: typeof mergeMap; readonly publishLast: typeof publishLast; readonly select: typeof select; readonly share: typeof share; readonly switchMap: typeof switchMap; readonly take: typeof take; readonly takeWhile: typeof takeWhile; readonly tap: typeof tap; }; export interface Observable { catchError(selector: (err: unknown, source: Observable) => Observable | void): Observable; debounceTime(time?: number, timer?: (delay: number) => Observable): Observable; distinctUntilChanged(): Observable; filter(fn: (val: T) => boolean): Observable; finalize(fn: () => void): Observable; first(): Observable; map(mapFn: (val: T) => T2): Observable; mergeMap(project: (val: T) => Observable): Observable; publishLast(): Observable; select(key: K): Observable; share(): Observable; switchMap(project: (val: T) => Observable): Observable; take(howMany: number): Observable; takeWhile(fn: (val: T) => boolean): Observable; tap(tapFn: (val: T) => void): Observable; ignoreElements(): Observable; } } /// declare module "@cxl/ui/tsx.js" { import { Observable } from "@cxl/ui/rx.js"; global { namespace dom { namespace JSX { type ElementClass = Bindable; interface ElementAttributesProperty { jsxAttributes: unknown; } interface ElementChildrenAttribute { children: {}; } type Element = Node; type IntrinsicElements = { [P in keyof HTMLElementTagNameMap]: NativeType; }; interface IntrinsicClassAttributes { $?: Binding | Observable; } } } } export type Binding = (el: T) => Observable; export type Child = string | Node | number | ((host: Bindable) => Node) | undefined | Observable; export type Children = Child | Child[]; export type NativeChild = string | number | Node | undefined; export type NativeChildren = NativeChild | NativeChild[]; export type NativeType = { [K in keyof Omit]?: T[K]; } & { children?: NativeChildren; }; export type Disallowed = Observable | Function; export type AttributeType = { [K in keyof Omit]?: T[K] extends Disallowed ? never : T[K] | Observable; } & { children?: Children; }; export interface Bindable extends Node { bind(binding: Observable): void; } export function expression(host: Bindable, binding: Observable): Text; export function renderChildren(host: Bindable | Node, children: Children, appendTo?: Node): void; interface ComponentConstructor { create(): T; } export function dom(elementType: ComponentConstructor, attributes?: AttributeType, ...children: Child[]): T; export function dom(elementType: (attributes?: T2) => Bindable, attributes?: T2, ...children: Child[]): T; export function dom(elementType: K, attributes?: NativeType, ...children: Child[]): HTMLElementTagNameMap[K]; export default dom; } /// declare module "@cxl/ui/dom.js" { import { Observable, Subject, Subscriber, Subscription } from "@cxl/ui/rx.js"; global { interface Node { $$attributeObserver?: AttributeObserver; $$childrenObserver?: ChildrenObserver; } } export type ElementContent = string | Node | undefined; export type TemplateContent = string | Element | HTMLTemplateElement | NodeList; export function empty(el: Element | DocumentFragment): void; export function setContent(el: Element, content: ElementContent): void; export function on(element: Window, event: K, options?: AddEventListenerOptions): Observable; export function on(element: EventTarget, event: K, options?: AddEventListenerOptions): Observable; export function on(element: T, event: K, options?: AddEventListenerOptions): Observable>>; export function onKeypress(el: Element | Window, key?: string, options?: AddEventListenerOptions): Observable; export function onAction(el: Element): Observable; export function onReady(): Observable; export function onLoad(): Observable; export function onFontsReady(): Observable; export function getShadow(el: Element): ShadowRoot; export function setAttribute(el: Element, attr: string, val: unknown): unknown; export function trigger(el: EventTarget, event: K, options?: CustomEventInit): void; export function trigger(el: T, event: K, options: CustomEventInit>): void; export type AttributeMutationEvent = { type: 'attribute'; target: T; value: unknown; }; export type MutationEvent = { type: 'added' | 'removed'; target: T; value: Node; } | { type: 'characterData'; target: T; } | AttributeMutationEvent; export class AttributeObserver extends Subject> { element: Node; observer?: MutationObserver; bindings?: Subscription[]; $onMutation(events: MutationRecord[]): void; $initializeNative(element: Node): void; constructor(element: Node); protected onSubscribe(subscription: Subscriber>): () => void; disconnect(): void; trigger(attributeName: string): void; } export function observeChildren(el: Element): Observable; export function onChildrenMutation(el: Element): ChildrenObserver; export function onAttributeChange(el: Element): AttributeObserver; export class ChildrenObserver extends Subject { private element; private observer?; constructor(element: Element); $handleEvent(ev: MutationRecord): void; protected onSubscribe(subscription: Subscriber>): () => void; } export function onHashChange(): Observable; export function onHistoryChange(): Observable; export function onLocation(): Observable; export const animationFrame: Observable; export function findNextNode(el: T, fn: (el: T) => boolean, direction?: 'nextSibling' | 'previousSibling'): T | undefined; export function findNextNodeBySelector(host: Element, el: Element, selector: string, direction?: number): Element | null; export function onResize(el: Element): Observable; export function insert(el: Element, content: ElementContent): void; export function fileReaderString(file: Blob): Observable; export function onMutation(target: Node, options?: MutationObserverInit): Observable, "none">; export function onIntersection(target: Element): Observable; export interface ElementWithValue extends HTMLElement { value: T; } export function onValue, R = T['value']>(el: T): Observable; export function onVisible(target: Element): Observable; export function isHidden(target: HTMLElement): boolean; export function isFocusable(el: HTMLElement): boolean; export function findFocusable(host: Element | ShadowRoot): HTMLElement | undefined; export function findLastFocusable(host: Element | ShadowRoot): HTMLElement | undefined; export function findFocusableAll(host: Element): HTMLElement[]; export function setClassName(el: HTMLElement): import("@cxl/ui/rx.js").Operator; export function debounceImmediate(fn: (...a: A) => R): (this: unknown, ...args: A) => void; export function debounceRaf(fn: (...a: A) => R): (this: unknown, ...args: A) => void; /** * debounce using requestAnimationFrame */ export function raf(fn?: (val: T) => void): import("@cxl/ui/rx.js").Operator; export const hovered: ($: Element) => Observable; export const focused: ($: Element) => Observable; export function nodeSort(a: Node, b: Node): 1 | -1; export function sortNodes(nodes: T[]): T[]; export type EventDetail = T[Extract] extends ((e: CustomEvent) => void) | undefined ? D : never; } /// declare module "@cxl/ui/component.js" { import { AttributeType, Children } from "@cxl/ui/tsx.js"; import { Observable, Operator, OrderedSubject } from "@cxl/ui/rx.js"; type RenderFunction = (node: T) => void; type Augmentation = (host: T) => Node | Comment | Observable | void; type ComponentConstructor = { tagName: string; observedAttributes: string[]; create(): Component; }; export type ComponentAttributeName = keyof T; export interface AttributeEvent { target: T; attribute: ComponentAttributeName; } export class Bindings { private subscriptions?; bindings?: Observable[]; bind(binding: Observable): void; connect(): void; disconnect(): void; } export abstract class Component extends HTMLElement { static tagName: string; static observedAttributes: string[]; static create(): Component; private $$bindings?; private $$prebind?; protected jsxAttributes: AttributeType; readonly render?: (node: HTMLElement) => void; readonly attributes$: OrderedSubject; Shadow: (p: { children: Children; }) => Component; Slot: (p: { selector: string; name?: string; className?: string; }) => HTMLSlotElement; bind(obs: Observable): void; protected connectedCallback(): void; protected disconnectedCallback(): void; protected attributeChangedCallback(name: keyof this, oldValue: string | null, value: string | null): void; } export function pushRender(proto: T, renderFn: RenderFunction): void; export function appendShadow(host: T, child: Node | Observable): void; export function augment(constructor: typeof Component, decorators: Augmentation[]): void; export function registerComponent(tagName: string, ctor: ComponentConstructor): void; export function Augment(): (ctor: ComponentConstructor) => void; export function Augment(...augs: [string | Augmentation | void, ...Augmentation[]]): (ctor: ComponentConstructor) => void; export function connect(bindFn: (node: T) => void): (host: T) => void; export function onUpdate(host: T): Observable; /** * Fires when connected and on attribute change */ export function update(fn: (node: T) => void): (host: T) => void; export function attributeChanged>(element: T, attribute: K): Observable; export function get>(element: T, attribute: K): Observable; interface AttributeOptions { persist?: boolean; persistOperator?: Operator, AttributeEvent>; observe?: boolean; render?: RenderFunction; parse?(val: unknown, component: T): unknown; } export function Attribute(options?: AttributeOptions): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function StyleAttribute(): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function EventAttribute(): (target: T, attribute: keyof T, descriptor?: PropertyDescriptor) => any; export function Property(): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function getRegisteredComponents(): { [x: string]: typeof Component; }; export class Span extends Component { } export function Slot(): HTMLSlotElement; } /// declare module "@cxl/ui/css.js" { export type StyleDefinition = { [K in keyof StrictStyleDefinition]?: StrictStyleDefinition[K] | Variable[K]>; }; export type BaseColor = RGBA; export type CSSStyle = { [P in keyof CSSStyleDeclaration]?: string | number; }; export type Color = keyof T['colors'] | BaseColor | 'currentColor' | 'inherit' | 'transparent'; export type Percentage = '50%' | '100%' | CustomPercentage; export type Calc = `calc(${string})`; export type Length = number | Percentage | Calc | 'auto'; export type ColorVariables = { [K in keyof T]: string; }; export type VariableList = T['variables'] & ColorVariables; export type FlexAlign = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline'; export type StyleKey = keyof StrictStyleDefinition; export interface Variables { } export interface Colors { } export interface FontDefinition { family: string; url: string; weight?: string; } export interface Typography { default: CSSStyle; } export interface StrictStyleDefinition { alignItems: FlexAlign; alignSelf: FlexAlign; animation: keyof T['animation']; animationDuration: string; backgroundImage: string; backgroundClip: 'content-box' | 'border-box'; backgroundColor: Color; backgroundSize: 'cover' | 'contain'; backgroundPosition: 'center'; backgroundRepeat: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'; borderBottom: Length; borderLeft: Length; borderRight: Length; borderTop: Length; borderColor: Color; borderWidth: number; borderRadius: Length; borderStyle: 'solid' | 'dashed' | 'dotted' | 'double' | 'none'; boxShadow: BoxShadow | 'none'; boxSizing: 'border-box'; clipPath: string; fill: Color; stroke: Color; elevation: 0 | 1 | 2 | 3 | 4 | 5; fontSize: number | 'inherit'; fontStyle: 'italic'; touchAction: 'none' | 'pan-y' | 'pan-x'; translateX: Length; translateY: Length; rowGap: Length; columnGap: Length; gridAutoColumns: string; gridColumnEnd: string; gridAutoFlow: 'column' | 'row'; gridTemplateColumns: string; gridTemplateRows: string; gridRow: string; prepend: string; rotate: number; scaleX: number; scaleY: number; font: keyof T['typography']; color: Color; paddingLeft: Length; paddingRight: Length; paddingTop: Length; paddingBottom: Length; marginLeft: number | 'auto'; marginRight: number | 'auto'; marginTop: number | 'auto'; marginBottom: number | 'auto'; opacity: number; outline: number | string; outlineOffset: number; order: number; overflowY: 'hidden' | 'visible' | 'auto'; overflowX: 'hidden' | 'visible' | 'auto'; visibility: 'hidden' | 'visible'; transformOrigin: string; overflowScrolling: string; lineHeight: number | 'unset'; listStyleImage: string; listStylePosition: 'inside' | 'outside'; listStyleType: 'none' | 'inherit' | 'initial' | 'unset'; width: Length | 'max-content' | 'min-content'; tableLayout: 'fixed' | 'auto'; top: Length; left: Length; right: Length; bottom: Length; filter: string; flexGrow: number; flexShrink: number; flexBasis: Length; flexDirection: string; flexWrap: 'wrap'; justifyContent: string; pointerEvents: string; cursor: string; display: 'block' | 'inline' | 'table' | 'flex' | 'inline-grid' | 'grid' | 'table-row' | 'table-caption' | 'table-row-group' | 'table-cell' | 'contents' | 'none' | 'initial' | 'inline-flex' | 'inline-block' | 'inherit'; position: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed'; userSelect: string; textAlign: string; textDecoration: string; textOverflow: 'ellipsis'; textTransform: 'uppercase' | 'capitalize' | 'none'; transition: string; height: Length; minHeight: Length | 'none'; minWidth: Length | 'none'; maxHeight: Length | 'none'; maxWidth: Length | 'none'; mixBlendMode: 'difference'; variables: Partial>; verticalAlign: 'top' | 'middle' | 'bottom' | 'super' | 'sub' | 'text-top' | 'text-bottom' | 'baseline'; willChange: 'transform'; whiteSpace: 'nowrap' | 'pre-wrap' | 'pre'; wordBreak: 'break-all'; zIndex: number; } export interface BoxShadow { offsetX: number; offsetY: number; blurRadius: number; spread: number; color: Color; } export type StylesOnly = { [key: string]: StyleDefinition; }; export type Styles = StylesOnly | { '@small'?: StylesOnly; '@medium'?: StylesOnly; '@large'?: StylesOnly; '@xlarge'?: StylesOnly; '@xxlarge'?: StylesOnly; }; export type BreakpointKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'; export type CSSUnit = 'px' | 'em' | 'rem'; export interface Breakpoints { xsmall: number; small: number; large: number; medium: number; xlarge: number; xxlarge: number; } export interface AnimationDefinition { kf: Keyframe[]; options?: KeyframeAnimationOptions; } export interface Animation { none: undefined; } export interface Theme { animation: Animation; colors: Colors; typography: { default: CSSStyle; }; variables: Variables; breakpoints: Breakpoints; imports?: readonly string[]; unit: CSSUnit; } export interface RGBA { readonly a: number; readonly r: number; readonly g: number; readonly b: number; toString(): string; } export type CustomPercentage = { __pct: true; toString(): string; }; export function boxShadow(offsetX: number, offsetY: number, blurRadius: number, spread: number, color: Color): { offsetX: number; offsetY: number; blurRadius: number; spread: number; color: Color; }; export function pct(n: number): CustomPercentage; export const defaultTheme: Theme; export function padding(paddingTop: number | 'auto', paddingRight?: number | "auto", paddingBottom?: number | "auto", paddingLeft?: number | "auto"): { paddingTop: number | "auto"; paddingRight: number | "auto"; paddingBottom: number | "auto"; paddingLeft: number | "auto"; }; export function margin(marginTop: number | 'auto', marginRight?: number | "auto", marginBottom?: number | "auto", marginLeft?: number | "auto"): { marginTop: number | "auto"; marginRight: number | "auto"; marginBottom: number | "auto"; marginLeft: number | "auto"; }; export function border(borderTop: number | 'auto', borderRight?: number | "auto", borderBottom?: number | "auto", borderLeft?: number | "auto"): { borderTop: number | "auto"; borderRight: number | "auto"; borderBottom: number | "auto"; borderLeft: number | "auto"; }; export function rgba(r: number, g: number, b: number, a?: number): RGBA; export function mask({ r, g, b, a }: RGBA): string; export function renderVariables(variables: Variables): string; export type PartialTheme = { variables?: Partial; typography?: Record; colors?: Colors; imports?: readonly string[]; globalCss?: string; override?: Record; }; export function renderGlobal(theme: PartialTheme): string; export class Variable { readonly name: string; constructor(name: string); readonly __brand?: T; toString(): string; } export const White: RGBA; export const White8: string; export const White12: string; export const White87: string; export function buildTheme(theme: T): { inline: (def: StyleDefinition) => string; render: (styles: Styles, baseSelector?: string) => string; applyTheme: (container?: HTMLHeadElement) => void; rootStyles: HTMLStyleElement; variable: { (name: K): Variable; (name: K): Variable; }; style(styles: Styles, selector?: string): () => HTMLStyleElement; baseColor(name: keyof T["colors"]): string; }; } /// declare module "@cxl/ui/template.js" { import { Observable } from "@cxl/ui/rx.js"; export interface InsertEvent { type: 'insert'; item: T; key: K; } export interface RemoveEvent { type: 'remove'; key: K; } export interface EmptyEvent { type: 'empty'; } export type ListEvent = InsertEvent | RemoveEvent | EmptyEvent; import type { Bindable } from "@cxl/ui/tsx.js"; export function sortBy(key: K): (a: T, b: T) => 1 | 0 | -1; export function getSearchRegex(term: string, flags?: string): RegExp; export function portal(id: string): (el: HTMLElement) => Observable; export function teleport(el: Node, portalName: string): Observable; export class Marker { children: Node[]; node: Comment; insert(content: Node, nextNode?: Node): void; remove(node: Node): void; empty(): void; } export function list(source: Observable>, renderFn: (item: T) => Node): (host: Bindable) => Comment; export function render(source: Observable, renderFn: (item: T) => Node, loading?: () => Node, error?: (e: unknown) => Node): (host: Bindable) => Comment; export function each(source: Observable>, renderFn: (item: T, index: number, source: Iterable) => Node | undefined, empty?: () => Node): (host: Bindable) => Comment; export function $onAction(cb: (ev: KeyboardEvent | MouseEvent) => void): (el: T) => Observable; export function escapeHtml(str: string): string; } /// declare module "@cxl/ui/storage.js" { export const storage: { /** * Retrieves a value from the localStorage given a key. * If the key does not exist, it returns an empty string. * Catches and logs any potential errors during the retrieval process, * which could occur if there are issues accessing localStorage. */ get(key: string): string; /** Sets a value in the localStorage for a given key. If setting the item fails, typically due to storage being full or access restrictions, it catches and logs the error to the console. */ set(key: string, name: string): void; }; } /// declare module "@cxl/ui/theme.js" { import { Styles as CssStyles, StyleDefinition, PartialTheme, Color, RGBA } from "@cxl/ui/css.js"; import type { Component } from "@cxl/ui/component.js"; type ArrayElement = ArrayType extends readonly (infer ElementType)[] ? ElementType : never; export interface SvgIconAttributes { className?: string; width?: number; height?: number; alt?: string; } export type StyleDef = StyleDefinition; export type UiTheme = typeof theme; export type Styles = CssStyles; export type ThemeColor = keyof UiTheme['colors']; export type SurfaceColorValue = ArrayElement | 'inherit' | 'transparent'; export type AnimationKey = keyof UiTheme['animation']; export type BaseColors = typeof baseColors; export interface IconDef { id: string; icon(prop?: SvgIconAttributes): SVGSVGElement; } export const baseColors: { primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; export const onThemeChange: import("@cxl/ui/rx.js").Reference<(PartialTheme & { css: string; name: string; }) | undefined>; export const theme: { animation: { none: undefined; flash: { kf: { opacity: number[]; }; options: { iterations: number; easing: string; }; }; spin: { kf: { rotate: string[]; }; options: { iterations: number; duration: number; easing: string; }; }; pulse: { kf: { rotate: string[]; }; options: { iterations: number; easing: string; duration: number; }; }; expand: { kf: { scale: number[]; }; options: { iterations: number; easing: string; }; }; zoomIn: { kf: { scale: number[]; }; }; zoomOut: { kf: { scale: number[]; }; }; fadeIn: { kf: { opacity: number; }[]; options: { easing: string; fill: string; }; }; fadeOut: { kf: ({ opacity: number; visibility?: undefined; } | { opacity: number; visibility: string; })[]; options: { easing: string; fill: string; }; }; shakeX: { kf: { translate: (string | number)[]; }; }; shakeY: { kf: { translate: (string | number)[]; }; }; slideOutLeft: { kf: { translate: (string | number)[]; }; }; slideInLeft: { kf: { translate: (string | number)[]; }; }; slideOutRight: { kf: { translate: (string | number)[]; }; }; slideInRight: { kf: { translate: (string | number)[]; }; }; slideInUp: { kf: { translate: (string | number)[]; }; }; slideInDown: { kf: { translate: (string | number)[]; }; }; slideOutUp: { kf: { translate: (string | number)[]; }; }; slideOutDown: { kf: { translate: (string | number)[]; }; }; wait: { kf: { transform: string; }[]; options: { duration: number; iterations: number; easing: string; }; }; focus: { kf: ({ offset: number; filter: string; } | { filter: string; offset?: undefined; })[]; options: { duration: number; }; }; spinnerstroke: { options: { duration: number; iterations: number; easing: string; }; kf: { offset: number; strokeDashoffset: string; transform: string; }[]; }; }; variables: { speed: string; font: string; fontMonospace: string; maskOpacity8: number; maskOpacity10: number; maskOpacity12: number; scrollbarWidth: string; scrollbarHeight: string; scrollbarForeground: string; }; typography: { default: { fontWeight: number; fontFamily: string; fontSize: string; letterSpacing: string; }; caption: { fontSize: string; letterSpacing: string; }; h1: { fontWeight: number; fontSize: string; letterSpacing: string; }; h2: { fontWeight: number; fontSize: string; letterSpacing: string; }; h3: { fontSize: string; }; h4: { fontSize: string; letterSpacing: string; }; h5: { fontSize: string; }; h6: { fontSize: string; fontWeight: number; letterSpacing: string; }; body2: { fontSize: string; letterSpacing: string; }; subtitle: { letterSpacing: string; }; subtitle2: { fontSize: string; fontWeight: number; letterSpacing: string; }; button: { fontSize: string; fontWeight: number; letterSpacing: string; textTransform: string; }; code: { fontFamily: string; fontSize: string; }; }; colors: { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; imports: string[] | undefined; globalCss: string; global: { readonly '@a': { readonly color: "primary"; }; readonly 'cxl-selection,::selection': { readonly backgroundColor: "secondary"; readonly color: "onSecondary"; }; readonly '*': { readonly boxSizing: "border-box"; readonly transition: "opacity var(--cxl-speed), transform var(--cxl-speed), box-shadow var(--cxl-speed), filter var(--cxl-speed), rotate var(--cxl-speed)"; }; }; breakpoints: import("@cxl/ui/css.js").Breakpoints; unit: import("@cxl/ui/css.js").CSSUnit; }; export const FontValues: string[]; export const applyTheme: (container?: HTMLHeadElement) => void, baseColor: (name: "error" | "background" | "shadow" | "errorOnPrimary" | "onError" | "warning" | "onWarning" | "success" | "onSuccess" | "darkGray" | "onDarkGray" | "fieldMask" | "primaryLight" | "onPrimaryLight" | "secondaryLight" | "onSecondaryLight" | "headerText" | "onSurface8" | "onSurface12" | "divider" | "primary" | "secondary" | "onSecondary" | "surface" | "onPrimary" | "onSurface" | "onBackground") => string, render: (styles: CssStyles<{ animation: { none: undefined; flash: { kf: { opacity: number[]; }; options: { iterations: number; easing: string; }; }; spin: { kf: { rotate: string[]; }; options: { iterations: number; duration: number; easing: string; }; }; pulse: { kf: { rotate: string[]; }; options: { iterations: number; easing: string; duration: number; }; }; expand: { kf: { scale: number[]; }; options: { iterations: number; easing: string; }; }; zoomIn: { kf: { scale: number[]; }; }; zoomOut: { kf: { scale: number[]; }; }; fadeIn: { kf: { opacity: number; }[]; options: { easing: string; fill: string; }; }; fadeOut: { kf: ({ opacity: number; visibility?: undefined; } | { opacity: number; visibility: string; })[]; options: { easing: string; fill: string; }; }; shakeX: { kf: { translate: (string | number)[]; }; }; shakeY: { kf: { translate: (string | number)[]; }; }; slideOutLeft: { kf: { translate: (string | number)[]; }; }; slideInLeft: { kf: { translate: (string | number)[]; }; }; slideOutRight: { kf: { translate: (string | number)[]; }; }; slideInRight: { kf: { translate: (string | number)[]; }; }; slideInUp: { kf: { translate: (string | number)[]; }; }; slideInDown: { kf: { translate: (string | number)[]; }; }; slideOutUp: { kf: { translate: (string | number)[]; }; }; slideOutDown: { kf: { translate: (string | number)[]; }; }; wait: { kf: { transform: string; }[]; options: { duration: number; iterations: number; easing: string; }; }; focus: { kf: ({ offset: number; filter: string; } | { filter: string; offset?: undefined; })[]; options: { duration: number; }; }; spinnerstroke: { options: { duration: number; iterations: number; easing: string; }; kf: { offset: number; strokeDashoffset: string; transform: string; }[]; }; }; variables: { speed: string; font: string; fontMonospace: string; maskOpacity8: number; maskOpacity10: number; maskOpacity12: number; scrollbarWidth: string; scrollbarHeight: string; scrollbarForeground: string; }; typography: { default: { fontWeight: number; fontFamily: string; fontSize: string; letterSpacing: string; }; caption: { fontSize: string; letterSpacing: string; }; h1: { fontWeight: number; fontSize: string; letterSpacing: string; }; h2: { fontWeight: number; fontSize: string; letterSpacing: string; }; h3: { fontSize: string; }; h4: { fontSize: string; letterSpacing: string; }; h5: { fontSize: string; }; h6: { fontSize: string; fontWeight: number; letterSpacing: string; }; body2: { fontSize: string; letterSpacing: string; }; subtitle: { letterSpacing: string; }; subtitle2: { fontSize: string; fontWeight: number; letterSpacing: string; }; button: { fontSize: string; fontWeight: number; letterSpacing: string; textTransform: string; }; code: { fontFamily: string; fontSize: string; }; }; colors: { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; imports: string[] | undefined; globalCss: string; global: { readonly '@a': { readonly color: "primary"; }; readonly 'cxl-selection,::selection': { readonly backgroundColor: "secondary"; readonly color: "onSecondary"; }; readonly '*': { readonly boxSizing: "border-box"; readonly transition: "opacity var(--cxl-speed), transform var(--cxl-speed), box-shadow var(--cxl-speed), filter var(--cxl-speed), rotate var(--cxl-speed)"; }; }; breakpoints: import("@cxl/ui/css.js").Breakpoints; unit: import("@cxl/ui/css.js").CSSUnit; }>, baseSelector?: string) => string, style: (styles: CssStyles<{ animation: { none: undefined; flash: { kf: { opacity: number[]; }; options: { iterations: number; easing: string; }; }; spin: { kf: { rotate: string[]; }; options: { iterations: number; duration: number; easing: string; }; }; pulse: { kf: { rotate: string[]; }; options: { iterations: number; easing: string; duration: number; }; }; expand: { kf: { scale: number[]; }; options: { iterations: number; easing: string; }; }; zoomIn: { kf: { scale: number[]; }; }; zoomOut: { kf: { scale: number[]; }; }; fadeIn: { kf: { opacity: number; }[]; options: { easing: string; fill: string; }; }; fadeOut: { kf: ({ opacity: number; visibility?: undefined; } | { opacity: number; visibility: string; })[]; options: { easing: string; fill: string; }; }; shakeX: { kf: { translate: (string | number)[]; }; }; shakeY: { kf: { translate: (string | number)[]; }; }; slideOutLeft: { kf: { translate: (string | number)[]; }; }; slideInLeft: { kf: { translate: (string | number)[]; }; }; slideOutRight: { kf: { translate: (string | number)[]; }; }; slideInRight: { kf: { translate: (string | number)[]; }; }; slideInUp: { kf: { translate: (string | number)[]; }; }; slideInDown: { kf: { translate: (string | number)[]; }; }; slideOutUp: { kf: { translate: (string | number)[]; }; }; slideOutDown: { kf: { translate: (string | number)[]; }; }; wait: { kf: { transform: string; }[]; options: { duration: number; iterations: number; easing: string; }; }; focus: { kf: ({ offset: number; filter: string; } | { filter: string; offset?: undefined; })[]; options: { duration: number; }; }; spinnerstroke: { options: { duration: number; iterations: number; easing: string; }; kf: { offset: number; strokeDashoffset: string; transform: string; }[]; }; }; variables: { speed: string; font: string; fontMonospace: string; maskOpacity8: number; maskOpacity10: number; maskOpacity12: number; scrollbarWidth: string; scrollbarHeight: string; scrollbarForeground: string; }; typography: { default: { fontWeight: number; fontFamily: string; fontSize: string; letterSpacing: string; }; caption: { fontSize: string; letterSpacing: string; }; h1: { fontWeight: number; fontSize: string; letterSpacing: string; }; h2: { fontWeight: number; fontSize: string; letterSpacing: string; }; h3: { fontSize: string; }; h4: { fontSize: string; letterSpacing: string; }; h5: { fontSize: string; }; h6: { fontSize: string; fontWeight: number; letterSpacing: string; }; body2: { fontSize: string; letterSpacing: string; }; subtitle: { letterSpacing: string; }; subtitle2: { fontSize: string; fontWeight: number; letterSpacing: string; }; button: { fontSize: string; fontWeight: number; letterSpacing: string; textTransform: string; }; code: { fontFamily: string; fontSize: string; }; }; colors: { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; imports: string[] | undefined; globalCss: string; global: { readonly '@a': { readonly color: "primary"; }; readonly 'cxl-selection,::selection': { readonly backgroundColor: "secondary"; readonly color: "onSecondary"; }; readonly '*': { readonly boxSizing: "border-box"; readonly transition: "opacity var(--cxl-speed), transform var(--cxl-speed), box-shadow var(--cxl-speed), filter var(--cxl-speed), rotate var(--cxl-speed)"; }; }; breakpoints: import("@cxl/ui/css.js").Breakpoints; unit: import("@cxl/ui/css.js").CSSUnit; }>, selector?: string) => () => HTMLStyleElement, rootStyles: HTMLStyleElement, variable: { (name: K): import("@cxl/ui/css.js").Variable<{ error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }[K]>; (name: K): import("@cxl/ui/css.js").Variable<{ speed: string; font: string; fontMonospace: string; maskOpacity8: number; maskOpacity10: number; maskOpacity12: number; scrollbarWidth: string; scrollbarHeight: string; scrollbarForeground: string; }[K]>; }; const globalCssSymbol: unique symbol; global { interface Node { [globalCssSymbol]?: boolean; } } export type Spacing = ArrayElement; export const SpacingValues: readonly [0, 4, 8, 16, 24, 32, 48, 64]; export const FocusCircleStyle: () => HTMLStyleElement; export function loadTheme(name: string, key: string): void; export function spacingCss(fn: (val: Spacing) => Styles): Styles; export function observeTheme(host: Component): import("@cxl/ui/rx.js").Observable<(PartialTheme & { css: string; name: string; }) | undefined, "none">; export function css(styles: Styles): (host: Component) => HTMLStyleElement; type DerivedColors = ReturnType; function getDerivedColors(b: BaseColors): { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; }; export function buildPalette(colors: BaseColors, derived?: Partial): { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; const surfaceColors: readonly ["background", "primary", "primaryLight", "secondary", "surface", "error", "success", "warning", "darkGray"]; export const SurfaceColorNames: string[]; export function applyColorFromString(color: string): string; export const ColorStyles: Record; export const OutlineColorStyles: (prefix?: string) => Record; export function FlatColorStyles(prefix: string): Record; export type MaskType = keyof typeof mask; const mask: { black8: RGBA; black12: RGBA; }; export function bgMask(backgroundColor: Color, maskType: MaskType): { backgroundColor: Color<{ animation: { none: undefined; flash: { kf: { opacity: number[]; }; options: { iterations: number; easing: string; }; }; spin: { kf: { rotate: string[]; }; options: { iterations: number; duration: number; easing: string; }; }; pulse: { kf: { rotate: string[]; }; options: { iterations: number; easing: string; duration: number; }; }; expand: { kf: { scale: number[]; }; options: { iterations: number; easing: string; }; }; zoomIn: { kf: { scale: number[]; }; }; zoomOut: { kf: { scale: number[]; }; }; fadeIn: { kf: { opacity: number; }[]; options: { easing: string; fill: string; }; }; fadeOut: { kf: ({ opacity: number; visibility?: undefined; } | { opacity: number; visibility: string; })[]; options: { easing: string; fill: string; }; }; shakeX: { kf: { translate: (string | number)[]; }; }; shakeY: { kf: { translate: (string | number)[]; }; }; slideOutLeft: { kf: { translate: (string | number)[]; }; }; slideInLeft: { kf: { translate: (string | number)[]; }; }; slideOutRight: { kf: { translate: (string | number)[]; }; }; slideInRight: { kf: { translate: (string | number)[]; }; }; slideInUp: { kf: { translate: (string | number)[]; }; }; slideInDown: { kf: { translate: (string | number)[]; }; }; slideOutUp: { kf: { translate: (string | number)[]; }; }; slideOutDown: { kf: { translate: (string | number)[]; }; }; wait: { kf: { transform: string; }[]; options: { duration: number; iterations: number; easing: string; }; }; focus: { kf: ({ offset: number; filter: string; } | { filter: string; offset?: undefined; })[]; options: { duration: number; }; }; spinnerstroke: { options: { duration: number; iterations: number; easing: string; }; kf: { offset: number; strokeDashoffset: string; transform: string; }[]; }; }; variables: { speed: string; font: string; fontMonospace: string; maskOpacity8: number; maskOpacity10: number; maskOpacity12: number; scrollbarWidth: string; scrollbarHeight: string; scrollbarForeground: string; }; typography: { default: { fontWeight: number; fontFamily: string; fontSize: string; letterSpacing: string; }; caption: { fontSize: string; letterSpacing: string; }; h1: { fontWeight: number; fontSize: string; letterSpacing: string; }; h2: { fontWeight: number; fontSize: string; letterSpacing: string; }; h3: { fontSize: string; }; h4: { fontSize: string; letterSpacing: string; }; h5: { fontSize: string; }; h6: { fontSize: string; fontWeight: number; letterSpacing: string; }; body2: { fontSize: string; letterSpacing: string; }; subtitle: { letterSpacing: string; }; subtitle2: { fontSize: string; fontWeight: number; letterSpacing: string; }; button: { fontSize: string; fontWeight: number; letterSpacing: string; textTransform: string; }; code: { fontFamily: string; fontSize: string; }; }; colors: { error: RGBA; errorOnPrimary: RGBA; onError: RGBA; warning: RGBA; onWarning: RGBA; success: RGBA; onSuccess: RGBA; darkGray: RGBA; onDarkGray: RGBA; fieldMask: string; primaryLight: RGBA; onPrimaryLight: RGBA; secondaryLight: RGBA; onSecondaryLight: RGBA; headerText: RGBA; onSurface8: RGBA; onSurface12: RGBA; divider: RGBA; shadow: RGBA; primary: RGBA; onPrimary: RGBA; secondary: RGBA; onSecondary: RGBA; surface: RGBA; onSurface: RGBA; background: RGBA; onBackground: RGBA; }; imports: string[] | undefined; globalCss: string; global: { readonly '@a': { readonly color: "primary"; }; readonly 'cxl-selection,::selection': { readonly backgroundColor: "secondary"; readonly color: "onSecondary"; }; readonly '*': { readonly boxSizing: "border-box"; readonly transition: "opacity var(--cxl-speed), transform var(--cxl-speed), box-shadow var(--cxl-speed), filter var(--cxl-speed), rotate var(--cxl-speed)"; }; }; breakpoints: import("@cxl/ui/css.js").Breakpoints; unit: import("@cxl/ui/css.js").CSSUnit; }>; backgroundImage: string; }; export const DisabledStyles: { cursor: string; filter: string; opacity: number; pointerEvents: string; }; export const StateStyles: { $focus: { outline: number; }; $disabled: { cursor: string; filter: string; opacity: number; pointerEvents: string; }; }; export function scrollbarStyles(prefix?: string): { [x: string]: { width: string; height: string; background?: undefined; } | { background: string; width?: undefined; height?: undefined; }; }; export function delayTheme(): void; export function buildIconFactoryCdn(getUrl: (id: string, width?: number) => string): (id: string, width?: number) => Node; /** * By default we use the material icons CDN to retrieve icon svg files. */ export const iconFactoryCdn: (id: string, width?: number) => Node; export function registerDefaultIconFactory(fn: (id: string) => Node): void; export function registerIcon(icon: IconDef): void; export function getColorStyles(color: SurfaceColorValue): { color: string; backgroundColor: string; }; export function getIcon(id: string, prop?: SvgIconAttributes): SVGSVGElement; } /// declare module "@cxl/ui/core.js" { import { AttributeEvent, Component, ComponentAttributeName } from "@cxl/ui/component.js"; import { Observable, Operator } from "@cxl/ui/rx.js"; import { BreakpointKey, StyleDefinition } from "@cxl/ui/css.js"; import { CustomEventMap } from "@cxl/ui/dom.js"; import "@cxl/ui/template.js"; import { SurfaceColorValue, Styles } from "@cxl/ui/theme.js"; module "@cxl/ui/rx.js" { interface Observable { is(equalTo: T): Observable; log(): Observable; raf(fn?: (val: T) => void): Observable; } } export type ArrayElement = ArrayType extends readonly (infer ElementType)[] ? ElementType : never; export type Size = ArrayElement; export interface ElementWithValue extends HTMLElement { value: T; } export const SizeValues: readonly [-2, -1, 0, 1, 2, 3, 4, 5, "small", "big"]; export const FocusMask: { readonly mask: { readonly position: "absolute"; readonly left: 0; readonly right: 0; readonly bottom: 0; readonly top: 0; readonly backgroundColor: "onSurface"; readonly opacity: 0; }; readonly mask$hover: { readonly opacity: import("@cxl/ui/css.js").Variable; }; readonly mask$focusVisible: { readonly opacity: import("@cxl/ui/css.js").Variable; }; }; export const maskStyles: () => HTMLStyleElement; export function is(equalTo: T): (source: Observable) => Observable; export function log(): Operator; export function getAttribute>(el: T, name: K): Observable; export function displayContents(): Node; export function changeEvent(host: Component & { value: unknown; }): Observable; export function mask(): HTMLElement; export function persistWithParameter(prefix: string): Operator, AttributeEvent>; export function getTarget>(host: T, prop: K): Observable, "none">; export function PrefixAttribute(prefix: string): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function NumberAttribute(min?: number, max?: number): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function SizeAttribute(fn: (size: Exclude) => Record): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function ForegroundColorAttribute(defaultColor?: SurfaceColorValue): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function ColorAttribute(defaultColor?: SurfaceColorValue): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function CssAttribute(styles: Styles): (target: T, attribute: ComponentAttributeName, descriptor?: PropertyDescriptor) => any; export function breakpoint(el: HTMLElement): Observable; export function breakpointClass(el: HTMLElement): Observable; type VoidEvent = { [K in keyof CustomEventMap]: CustomEventMap[K] extends void ? K : never; }[keyof CustomEventMap]; export function message(el: EventTarget, event: K): void; export function message(el: EventTarget, event: K, detail: CustomEventMap[K]): void; export function onMessage(el: EventTarget, event: K, stopPropagation?: boolean): Observable; } /// declare module "@cxl/ui/a11y.js" { import { Observable } from "@cxl/ui/rx.js"; import type { Component } from "@cxl/ui/component.js"; type AriaProperties = { atomic: string; autocomplete: string; busy: string; checked: string; controls: string; current: string; describedby: string; details: string; disabled: string; dropeffect: string; errormessage: string; expanded: string; flowto: string; grabbed: string; haspopup: string; hidden: string; invalid: string; keyshortcuts: string; label: string; labelledby: string; level: string; live: string; orientation: string; owns: string; placeholder: string; pressed: string; readonly: string; required: string; selected: string; sort: string; valuemax: string; valuemin: string; valuenow: string; valuetext: string; modal: string; multiline: string; multiselectable: string; relevant: string; roledescription: string; }; type AriaProperty = keyof AriaProperties; export type AriaAttributeName = `aria-${AriaProperty}`; /** * Sets an ARIA property on a component. * @param prop The ARIA property name (e.g., "checked", "modal"). * @param value The value to set for the property. * @returns An Observable that sets the attribute on the component. */ export function aria(prop: AriaProperty, value: string): (ctx: T) => Observable; /** * Sets the value of an ARIA property on an HTML element. * Handles boolean and undefined values for specific properties. * @param host The target element. * @param prop The ARIA property name. * @returns An Observable that sets the attribute on the element. */ export function ariaValue(host: Element, prop: AriaProperty): import("@cxl/ui/rx.js").Operator; /** * Specialized function to set the "aria-checked" state of an element * Handles boolean and undefined values appropriately for mixed states */ export function ariaChecked(host: Element): import("@cxl/ui/rx.js").Operator; /** * Function to set the ARIA role of a component */ export function role(roleName: string): (ctx: T) => Observable; export function ariaDescribed(target: Element, by: Element): Observable; /** * Sets the aria-label on a target element based on changes to a source element's attributes. * Considers inline content ("title" or "aria-label") and referenced elements ("aria-labelledby"). * @param source The source element to monitor for attribute changes. * @param target The target element to set the aria-label on. * @param text An optional Observable that provides additional text for the aria-label. * @returns An Observable that manages the aria-label updates. */ export function ariaLabelOrDefault(source: HTMLElement, target: HTMLElement, text?: Observable): Observable; /** * Apply aria label only if not specified */ export function ariaLabel(text: Observable): (el: HTMLElement) => Observable; export function getAriaId(el: Element): Observable; } /// declare module "@cxl/ui/a.js" { import { Component } from "@cxl/ui/component.js"; /** * This component creates a custom link element with bindable href and target attributes. */ export class A extends Component { /** * The target attribute specifies where to open the linked document. */ target: '_blank' | ''; /** * The href attribute specifies the URL of the linked resource. */ href: string; } } /// declare module "@cxl/ui/alert.js" { import { Component } from "@cxl/ui/component.js"; import { SurfaceColorValue } from "@cxl/ui/theme.js"; /** * The Alert component serves as a visual element for displaying important messages to users. * These messages are typically time-sensitive and require immediate attention. * It can contain text, icons, and buttons for the user to respond. * * @example * Default Alert
* Error Message! */ export class Alert extends Component { /** * When set to true, the alert component becomes more compact, making it suitable for situations where space is limited. */ dense: boolean; /** * Adds an outline style to the alert, emphasizing its boundaries. * @example * Error Message! */ outline: boolean; /** * Determines the background color of the alert. You can choose from predefined colors such as “success,” “warning,” or “error.” * @example * Success! * Warning! */ color?: SurfaceColorValue; } } /// declare var require: { replace?: (p: string) => string; href?: string; }; /// declare module "@cxl/ui/animate-count.js" { /** * Interface for options used with the `count` function. */ export interface CountOptions { start?: number; end: number; time?: number; } /** * Function to create an animation that counts from a start value to an end value over a specified duration. * * @param options - Configuration for the count animation. * @returns Observable that emits the current count value during the animation and the final end value upon completion. */ export function count({ start, end, time }: CountOptions): import("@cxl/ui/rx.js").Observable; } /// declare module "@cxl/ui/animate.js" { import { Component } from "@cxl/ui/component.js"; import { AnimationKey, UiTheme } from "@cxl/ui/theme.js"; import { Observable } from "@cxl/ui/rx.js"; import { AnimationDefinition } from "@cxl/ui/css.js"; /** * Interface for options used with the `animate` function. */ export interface AnimateOptions { target: Element; animation: AnimationKey | AnimationDefinition; options?: KeyframeAnimationOptions; } /** * Interface for animation events emitted by the `animation` function. */ export interface AnimationEvent { type: 'start' | 'end'; /** Animation object associated with the event. */ animation: Animation; } type A = keyof UiTheme['animation']; export type AnimationList = A | `${A} ${A}` | `${A} ${A} ${A}`; /** * Function to create a CSS animation on a target element. * * @param options - Animation options including target element, animation name, and additional options. * @throws Error if the specified animation is not defined in the theme. * @returns Animation object representing the created animation. */ export function animate({ target, animation, options }: AnimateOptions): Animation; /** * Function to create an observable that emits events when an animation starts and ends. * * @param options Options for the animation. Specifies the target element, animation key or definition, optional animation settings, and trigger type. * @returns Observable that emits AnimationEvent objects. */ export function animation(options: AnimateOptions & { trigger?: 'visible' | 'hover'; }): Observable; /** * The Animate component allows you to add CSS animations to your UI elements and control their behavior. * * @beta * * @example * Animate */ export class Animate extends Component { /** * Defines the animation(s) to apply. It can be a single animation name from the theme * or a space-separated list of animations. The special value 'none' prevents any animation. */ name?: AnimationList; /** Sets the delay in milliseconds before the animation starts. */ delay?: number; /** Sets the delay in milliseconds after the animation finishes before it is removed. */ enddelay?: number; /** * Defines the trigger for the animation. * * When set to `visible`, the animation will start when the element becomes visible and pause when it becomes hidden. * * If set to `hover`, the animation will start when the element is hovered over and stop when the hover ends. * * @example * Animate * */ trigger?: 'visible' | 'hover'; /** Sets the animation duration in milliseconds. */ duration?: number; /** Defines the number of times the animation should repeat. Set to 'infinite' for continuous animation. */ iterations?: number | 'infinite'; /** Defines the animation timing function, such as 'ease', 'linear', or a cubic-bezier function. */ easing?: string; } } /// declare module "@cxl/ui/appbar-logo.js" { import { Component } from "@cxl/ui/component.js"; /** * AppbarLogo is a component designed to integrate a logo or image within an Appbar. * It ensures proper accessibility by setting the role="img" attribute and supports providing alternative text using the alt attribute. * @beta */ export class AppbarLogo extends Component { /** * Defines the URL or path to the image that should be displayed. */ src: string; /** * Alternative text for the image, used for accessibility purposes. */ alt?: string; } } /// declare module "@cxl/ui/focusable.js" { import { Component } from "@cxl/ui/component.js"; module "@cxl/ui/dom.js" { interface CustomEventMap { 'focusable.change': void; } } interface DisableElement extends HTMLElement { disabled: boolean; } export interface FocusableComponent extends Component { disabled: boolean; touched: boolean; } export const stateStyles: () => HTMLStyleElement; export function disabledAttribute(host: Component & { disabled: boolean; }): import("@cxl/ui/rx.js").Observable; export function focusableEvents(host: T, element?: HTMLElement): import("@cxl/ui/rx.js").Observable; export function focusableDisabled(host: T, element?: HTMLElement): import("@cxl/ui/rx.js").Observable; export function focusable(host: T, element?: HTMLElement): import("@cxl/ui/rx.js").Observable; export function focusDelegate(host: T, delegate: DisableElement): import("@cxl/ui/rx.js").Observable; /** * Adds focusable functionality to input components. */ export function Focusable(host: FocusableComponent): HTMLStyleElement; } /// declare module "@cxl/ui/ripple.js" { import { Component } from "@cxl/ui/component.js"; export function attachRipple(hostEl: T, ev: MouseEvent | KeyboardEvent): void; /** * Attaches a ripple element (cxl-ripple) to a host element upon a mouse or keyboard event. * Positions the ripple element based on the event coordinates. */ export function ripple(element: HTMLElement & { disabled?: boolean; }): import("@cxl/ui/rx.js").Observable; /** * The Ripple component adds a visual ripple effect to clickable elements, * enhancing user experience by providing clear feedback upon interaction. */ export class Ripple extends Component { /** Controls the horizontal position of the ripple effect's origin */ x: number; /** Controls the vertical position of the ripple effect's origin. */ y: number; /** Determines the size of the ripple wave.*/ radius: number; } /** * A container element for clickable elements with ripple effects. * Handles ripple attachment using the ripple function. Provides basic styling for containing ripple elements. * * @example * Click Me */ export class RippleContainer extends Component { } } /// declare module "@cxl/ui/button.js" { import { Component } from "@cxl/ui/component.js"; import { Size } from "@cxl/ui/core.js"; import { FocusableComponent } from "@cxl/ui/focusable.js"; import { SurfaceColorValue } from "@cxl/ui/theme.js"; export function buttonKeyboardBehavior(host: Component & { disabled: boolean; }): import("@cxl/ui/rx.js").Observable; export function buttonBehavior(host: FocusableComponent): import("@cxl/ui/rx.js").Observable; export function focusableButton(host: FocusableComponent): HTMLStyleElement; export function focusableButtonWithRipple(host: FocusableComponent): Node; export class ButtonHeadless extends Component { /** * When set to true, disables the button interaction and applies a disabled visual style. */ disabled: boolean; /** * Sets the color of the button. This applies to both the button text and the ripple effect. */ color?: SurfaceColorValue; /** * This attribute sets a visual state indicating the button has been interacted with. */ touched: boolean; } /** * The ButtonBase component serves as the foundation for various button types. * It provides a core set of styles, behaviors, and interaction logic, which can be extended * by other button components to offer more specific appearances and functionalities. */ export class ButtonBase extends ButtonHeadless { /** * When set to true, applies a flat button style without elevation or borders. * * @deprecated Use * @demo Small Size 0 Size 1 Size 2 */ flat: boolean; /** * Applies the outline style * @deprecated Use */ outline: boolean; } /** * The Button component builds upon the ButtonBase class to provide a standard button style with customizable size * and optional vertical layout. It offers a versatile button option for various UI elements in your application. * * @example * * Primary * Flat * Outlined * * @demo Colors * Button Primary Secondary Error Success Warning * @demo Flat * Button Primary Secondary Error Success Warning * @demo Outline * Button Primary Secondary Error Success Warning * @demo Disabled * Button Primary Secondary Error * @demo Size * Button Primary Secondary Error Success Warning * @demo With Icon Help Help Help Help */ export class Button extends ButtonBase { /** Controls the size of the button. */ size: Size; /** * @example * * * Contacts * */ vflex: boolean; } export const iconButtonCss: (host: Component) => HTMLStyleElement; /** * This component renders a round-shaped button * @beta * @example * * * * */ export class ButtonRound extends ButtonBase { } } /// declare module "@cxl/ui/navigation-core.js" { import type { Observable } from "@cxl/ui/rx.js"; type SelectableNode = HTMLElement; export interface NavigationOptions { host: HTMLElement; getNext(): Element | null; getPrevious(): Element | null; } export interface NavigationMenuOptions extends NavigationOptions { getFirst(): Element | null; getLast(): Element | null; escape?(): void; } export function navigationMenu(options: NavigationMenuOptions): Observable; /** * Handles list keyboard navigation (up and down only), emits the next selected item. */ export function navigationListUpDown(host: SelectableNode, selector: string, startSelector?: string, input?: EventTarget): Observable; /** * Handles keyboard navigation, emits the next selected item. */ export function navigationList(host: SelectableNode, selector: string, startSelector: string, input?: HTMLElement | Window): Observable; } /// declare module "@cxl/ui/registable.js" { import { Observable } from "@cxl/ui/rx.js"; module "@cxl/ui/dom.js" { interface CustomEventMap { registable: RegistableDetail; } } export interface RegistableMap { } export interface RegistableDetail { id: K; controller?: RegistableMap[K]; unsubscribe?: () => void; target: EventTarget; } export interface RegistableEvent { type: 'connect' | 'disconnect'; target: T; element: EventTarget; elements: Set; } export function registable(id: K, target: RegistableMap[K]): Observable; export function registable(id: K, target: EventTarget, controller: RegistableMap[K]): Observable; export function orderElements(elements?: T[]): (ev: RegistableEvent) => T[]; export function registableHost(id: K, host: EventTarget, elements?: Set): Observable, "none">; } /// declare module "@cxl/ui/tabs.js" { import { Component } from "@cxl/ui/component.js"; module "@cxl/ui/registable.js" { interface RegistableMap { tabs: BaseTab; } } /** * The BaseTab class is an abstract component that serves as the foundation for building tab UIs. */ export abstract class BaseTab extends Component { /** * A boolean attribute indicating whether the tab is currently selected. */ selected: boolean; touched: boolean; /** * A boolean attribute indicating if the tab is disabled. */ disabled: boolean; /** * An optional string attribute allowing you to assign a name to the tab. * This name is used for accessibility and programmatic selection. */ name?: string; } /** * Tabs organize content across different screens, data sets, and other interactions. * @example Tab 1 Tab 2 Tab 3 * @see Tabs */ export class Tab extends BaseTab { } /** * The Tabs component implements a tabbed interface for organizing content across different sections within your application. * * @example Tab 1 Tab 2 Tab 3 * @see Tab */ export class Tabs extends Component { /** * This attribute specifies the currently selected tab within the Tabs component. * It should reference a Tab element from within the tabs container. */ selected?: Tab; /** * This property holds a Set containing all the Tab elements nested within the Tabs component. */ tabs: Set; /** * This style attribute allows you to control whether the tab container fills * the available horizontal space. Set grow to true for tabs to stretch and fill the container's width. */ grow: boolean; } /** * The TabPanel class represents a content panel associated with a specific tab * * @example Tab 1 Tab 2 Tab 3 Tab Panel 1 Tab Panel 2 Tab Panel 3 * @see Tabs */ export class TabPanel extends Component { /** * A read-only boolean attribute reflecting the visibility state of the panel. */ readonly visible = false; /** * An optional attribute that specifies the ID of the associated Tabs component or a reference to the Tabs component itself. * This creates a link between the panel and the tabs it belongs to. */ tabs?: Tabs | string; /** * An optional string attribute for the panel. This name is used to match it with the corresponding * tab based on the name attribute of the BaseTab component. */ name?: string; } } /// declare module "@cxl/ui/datetime.js" { export type DateFormat = Intl.DateTimeFormatOptions | DatePresetFormat; export type DatePresetFormat = 'short' | 'long' | 'medium' | 'full' | 'relative'; export const DAY: number; export const TimeRegex: RegExp; export function parseTime(time: string): Date; export function parseDate(date: string): Date; export function presetDateFormat(date: Date, format: DatePresetFormat, locale?: string): string; export function getMonthStartDate(date: Date): Date; export function getMonthEndDate(date: Date): Date; export function getMonthRange(date: Date): { start: Date; end: Date; }; export function getRangeDates(start: Date, end: Date): Date[]; export function dayDiff(start: Date, end: Date): number; export function dateInRange(date: Date, start: Date, end: Date): boolean; export function DateAttribute(): (target: T, attribute: import("@cxl/ui/component.js").ComponentAttributeName, descriptor?: PropertyDescriptor) => any; } /// declare module "@cxl/ui/input-base.js" { import { Component } from "@cxl/ui/component.js"; import { Observable } from "@cxl/ui/rx.js"; import { RuleKey, Validator, ValidationResult } from "@cxl/ui/validation.js"; export function focusProxy(el: HTMLElement, host: T): Observable; export function invalidIfTouched(host: T): Observable; export function findForm(host: HTMLElement): HTMLFormElement | undefined; /** * The InputBase class serves as an abstract foundation for building custom input components. * It provides core functionalities for managing input state, validation, and user interaction. * * InputBase sets `static formAssociated = true`, indicating that child classes extending it * can participate in forms and handle form-related events. */ export abstract class InputBase extends Component { static formAssociated: boolean; /** * Getter and setter for the input's value. The specific data type and behavior depend on the child component. */ abstract value: unknown; protected initialValue: unknown; protected internals: ElementInternals; /** * A boolean attribute specifying whether the input should receive focus automatically * when the component is rendered (after a slight delay). */ autofocus: boolean; /** * A string or an HTMLElement representing the label for the input. * This can be used to associate the label with the input for accessibility purposes. */ label?: HTMLElement | string; /** * A boolean style attribute reflecting the current validity state of the input. Set to true when validation fails. */ invalid: boolean; /** * A boolean style attribute indicating whether the input is disabled for user interaction. */ disabled: boolean; /** * A boolean style attribute to track whether the user has interacted with the input. */ touched: boolean; /** * A string or an array of rules (either rule keys or validator functions) used for input validation. */ rules?: string | (RuleKey | Validator)[]; protected validMap: Record; /** * An object representing the current validation result of the input. */ validationResult?: ValidationResult; name: string; /** Getter for the input's validity state. */ abstract get validity(): ValidityState | null; /** Getter for the input's validation message */ abstract get validationMessage(): string; /** Resets the input value to its initial value when the form is reset. */ formResetCallback(): void; /** * Sets the overall validation result for the input based on the provided object. * This method updates the validMap and validationResult properties. */ setValidity(result: ValidationResult): ValidationResult | undefined; /** * Sets a custom validation message for the input. This updates the invalid and * validationMessage properties and triggers an 'invalid' event if the message changes. */ setCustomValidity(msg: string): void; protected abstract applyValidity(invalid: boolean, msg?: string): void; } /** * The CustomInputBase class extends the InputBase class, providing a foundation * for building custom input components that don't rely on standard HTML input elements. * * The validity and validationMessage getters delegate to the `internals` object * (provided by the browser's attachInternals API) to retrieve the standard validity * state and message whenever available. * This allows leveraging browser validation features for common input patterns. */ export abstract class CustomInputBase extends InputBase { get validity(): ValidityState | null; get validationMessage(): string; protected formDisabledCallback(disabled: boolean): void; applyValidity(invalid: boolean, msg?: string): void; } /** * The ProxiedInputBase class extends the CustomInputBase class, offering a foundation for * custom input components that utilize Shadow DOM for encapsulation and leverage a proxied * HTML input element for core input functionality. */ export abstract class ProxiedInputBase extends InputBase { /** * An abstract property requiring child classes to define an HTMLInputElement that * serves as the internal input element within the Shadow DOM. */ abstract inputEl: HTMLInputElement; constructor(); applyValidity(invalid: boolean, msg?: string): void; /** * Delegates the focus call to the `inputEl`, ensuring focus is set on the internal input element. */ focus(): void; get validationMessage(): string; get validity(): ValidityState | null; } } /// declare module "@cxl/ui/validation.js" { import { Observable } from "@cxl/ui/rx.js"; import type { InputBase } from "@cxl/ui/input-base.js"; /** * A function that takes a value and returns a boolean or an Observable indicating whether the value is valid. */ export type Rule = (val: unknown) => boolean | Observable; export type RuleWithParameter = (param: string) => Rule; export type Validator = (val: unknown) => Observable | Promise | ValidationResult; export type RuleKey = 'json' | 'zipcode' | 'equalTo' | 'required' | 'notZero' | 'email' | 'pattern' | 'min' | 'greaterThan' | 'max' | 'lessThan'; export interface ValidationResult { valid: boolean; key?: string; message?: string | Observable; } export const ValidationContent: { 'validation.invalid': string; 'validation.json': string; 'validation.zipcode': string; 'validation.equalTo': string; 'validation.required': string; 'validation.notZero': string; 'validation.email': string; 'validation.pattern': string; 'validation.min': string; 'validation.max': string; 'validation.greaterThan': string; 'validation.lessThan': string; }; /** * Checks if a value is empty (null, undefined, empty string, false, or an empty array). */ export function empty(val: unknown): boolean; /** * Creates a rule that checks if a string matches a regular expression. */ export function pattern(regex: RegExp | string): (val: unknown) => ValidationResult; /** * Checks if a value is not empty. */ export function required(val: unknown): ValidationResult; /** * Checks if a value is a valid email address. */ export function email(val: unknown): ValidationResult; /** * Checks if a value is a valid US zip code. */ export function zipcode(val: unknown): ValidationResult; /** * Checks if a value is valid JSON. */ export function validJson(val: unknown): boolean; export function json(val: unknown): ValidationResult; /** * Creates a rule that compares a value to another value or observable. */ export function compare(key: RuleKey, b: InputBase | Observable | unknown, fn: (a: unknown, b: unknown) => boolean, msg?: string): (a: unknown) => Observable; /** * Parses a string or array of rules into a Validator function. */ export function parseRules(ruleList: string | Array): (val: unknown) => Observable[]; /** * Creates a rule that checks if a value is greater than or equal to another value or observable. */ export function min(val: InputBase | Observable | unknown, msg?: string): (a: unknown) => Observable; /** * Creates a rule that checks if a value is greater than another value or observable. */ export function greaterThan(val: InputBase | Observable | unknown, msg?: string): (a: unknown) => Observable; /** * Creates a rule that checks if a value is less than or equal to another value or observable. */ export function max(val: InputBase | Observable | unknown, msg?: string): (a: unknown) => Observable; /** * Creates a rule that checks if a value is less than another value or observable. */ export function lessThan(val: InputBase | Observable | unknown, msg?: string): (a: unknown) => Observable; /** * Creates a rule that checks if a value is equal to another value or observable. */ export function equalTo(val: InputBase | Observable | unknown, msg?: string): (a: unknown) => Observable; /** * Creates a rule that checks if a string's length is less than or equal to a specified length. */ export function maxlength(len: number | string, message?: string): (a: unknown) => { key: string; valid: boolean; message: string | undefined; }; /** * Creates a rule that checks if a string's length is greater than or equal to a specified length. */ export function minlength(len: number | string, message?: string): (a: unknown) => { key: string; valid: boolean; message: string | undefined; }; /** * @param element Element or Selector */ export const equalToElement: (val: unknown, msg?: string) => Validator; export const rules: { required: typeof required; email: typeof email; json: typeof json; zipcode: typeof zipcode; }; export const rulesWithParameters: { pattern: typeof pattern; equalToElement: (val: unknown, msg?: string) => Validator; greaterThanElement: (val: unknown, msg?: string) => Validator; min: typeof min; max: typeof max; equalTo: typeof equalTo; maxlength: typeof maxlength; minlength: typeof minlength; }; } /// declare module "@cxl/ui/input.js" { import { Observable } from "@cxl/ui/rx.js"; import { ProxiedInputBase } from "@cxl/ui/input-base.js"; export interface ValueProxyOptions { host: T; input: HTMLInputElement; toText?(value: T['value'], old: string): string; toValue?(value: string): T['value']; update?: Observable; } export const proxyStyle = "display:block;border:0;padding:0;font:inherit;color:var(--cxl-on-surface);outline:0;width:100%;min-height:20px;line-height:20px;background-color:transparent;text-align:left;white-space:pre-wrap;max-height:100%"; export function $valueProxy({ host, input: el, toText, toValue, update, }: ValueProxyOptions): HTMLInputElement; /** * The TextInputBase class provides functionalities for text input components. * It offers features for handling autofill behavior, managing selection state, * and interacting with the browser's text selection API. * * Extend TextInputBase to create custom text input components that leverage * browser's autofill behavior and provide programmatic control over text selection. * */ export abstract class TextInputBase extends ProxiedInputBase { /** A boolean style attribute indicating whether the input field is currently autofilled by the browser */ autofilled: boolean; /** A string attribute specifying the type of autocomplete behavior for the input field. */ autocomplete?: string; /** * The `commit` event is triggered when the input’s value has changed, but only after the blur * event or if the component is not focused. This event provides a way to handle changes that * occur after the user has finished interacting with the input field. * * @beta */ oncommit?: (ev: CustomEvent) => void; /** Retrieves the current selection object from the window or shadow root */ protected getWindowSelection(): Selection | null; /** Checks if the current selection originates from within the component's input element. */ protected getOwnSelection(): Selection | undefined; /** Gets or sets the starting index of the current selection within the input field. */ get selectionStart(): number | null; set selectionStart(n: number | null); /** Gets or sets the ending index of the current selection within the input field. */ get selectionEnd(): number | null; set selectionEnd(n: number | null); /** Sets the selection range within the input field. */ setSelectionRange(start: number | null, end: number | null): void; } /** * The Input component provides a basic input field for entering and editing text. * It inherits core functionalities from TextInputBase. * * @see FieldInput * @example * * Email Address * * */ export class Input extends TextInputBase { /** A string representing the current value of the input field. */ value: string; inputEl: HTMLInputElement; } } /// declare module "@cxl/ui/input-number.js" { import { TextInputBase } from "@cxl/ui/input.js"; function defaultFormatter(n: number | undefined): string; /** * The InputNumber component provides an input field specifically designed for entering and editing numeric values. * It inherits core functionalities from `TextInputBase` and offers formatting and validation tailored for numbers. * * @example * * Number Input * * */ export class InputNumber extends TextInputBase { /** A number representing the current value of the input field. */ value: number | undefined; /** * Function used to format the displayed value of the input field. * Defaults to `defaultFormatter` which simply converts the number to a string. */ formatter: typeof defaultFormatter; inputEl: HTMLInputElement; } } /// declare module "@cxl/ui/input-timepicker.js" { import { CustomInputBase } from "@cxl/ui/input-base.js"; export const TimepickerContent: { 'timepicker.timeperiod': string; 'timepicker.hourinput': string; 'timepicker.mininput': string; 'timepicker.notset': string; 'timepicker.am': string; 'timepicker.pm': string; }; /** * Input used to select the time period (AM or PM) of a Date. * * @beta * @demo * */ export class TimePeriodToggle extends CustomInputBase { /** A Date object representing the selected time. */ value: Date | undefined; } /** * The InputTimepicker component provides an element for selecting a time with separate * controls for hours, minutes, and time period (AM/PM). * * @beta * @demo * * Select Time * * */ export class InputTimepicker extends CustomInputBase { /** * A Date object representing the selected time. */ value: Date | undefined; /** Sets focus to the first enabled child element (hours input by default). */ focus(): void; } } /// declare module "@cxl/ui/locale.js" { import { DateFormat } from "@cxl/ui/datetime.js"; import type { ValidationContent } from "@cxl/ui/validation.js"; import type { TimepickerContent } from "@cxl/ui/input-timepicker.js"; import type { BreakpointKey } from "@cxl/ui/css.js"; export type LocaleName = 'default' | 'en' | 'es' | 'fr'; /** * The LocaleBase class serves as a foundation for building localized UI components. */ export abstract class LocaleBase { /** * This abstract property defines the content specific to a particular locale. */ abstract readonly content: LocaleContent; /** * This abstract property specifies the name of the locale (e.g., "en", "de"). */ abstract readonly name: LocaleName; abstract currencyCode: string; /** * This property allows overriding the default locale. */ abstract localeName: string; abstract decimalSeparator: string; /** * This method formats a Date object according to the specified locale. It takes two arguments: * @param date The Date object to be formatted. * @param options An object or string defining the desired date format. If options is a string, it's assumed to be a preset format name supported by the implementation (e.g., "short", "long"). If options is an object, it's passed directly to the toLocaleString method of the Date object, using the localeName for locale-specific formatting. * */ formatDate(date: Date, options?: DateFormat): string; } export type ContentKeys = keyof typeof defaultContent | 'calendar.month' | 'calendar.week' | 'calendar.day' | 'calendar.next' | 'calendar.previous' | 'carousel.previous' | 'carousel.next' | 'carousel.pagination' | 'carousel.paginationitem' | 'colorpicker.hue' | 'colorpicker.alpha' | 'colorpicker.hex' | 'colorpicker.red' | 'colorpicker.green' | 'colorpicker.blue' | 'datepicker.open' | 'datepicker.close' | 'datepicker.nextYearPage' | 'datepicker.nextMonth' | 'datepicker.previousYearPage' | 'datepicker.previousMonth' | 'datepicker.openYearPanel' | 'datepicker.closeYearPanel' | 'dataset.selectAll' | 'dataset.deselectAll' | 'datatable.selectRow' | 'datatable.rpp' | 'datatable.columnSort' | 'dialog.close' | 'dialog.cancel' | 'dialog.ok' | 'field.clear' | 'navigation.goPrevious' | 'navigation.goNext' | 'navigation.goFirst' | 'navigation.goLast' | 'password-reveal.on' | 'password-reveal.off' | keyof typeof ValidationContent | keyof typeof TimepickerContent; export type LocaleContent = Record; const defaultContent: { 'core.enable': string; 'core.disable': string; 'core.open': string; 'core.of': string; }; /** * The DefaultLocale class extends the abstract LocaleBase class and provides a concrete implementation * for the default locale (English). */ export class DefaultLocale extends LocaleBase { content: LocaleContent; name: LocaleName; localeName: string; currencyCode: string; decimalSeparator: string; } export class EnglishLocale extends LocaleBase { content: LocaleContent; name: LocaleName; localeName: string; currencyCode: string; decimalSeparator: string; } export function ContentManager(): { /** An observable stream that emits the current locale's content dictionary. */ content: import("@cxl/ui/rx.js").Observable; /** A registry containing instances of all registered locales */ registeredLocales: Partial>; locale: import("@cxl/ui/rx.js").BehaviorSubject; setLocale: (localeId: LocaleName) => Promise; /** Retrieves localized text for a given key from the current locale's content. */ get(key: ContentKeys, fallbackKey?: ContentKeys): import("@cxl/ui/rx.js").Observable; /** Registers a new locale with the manager. */ register(locale: LocaleBase): void; }; export const content: { /** An observable stream that emits the current locale's content dictionary. */ content: import("@cxl/ui/rx.js").Observable; /** A registry containing instances of all registered locales */ registeredLocales: Partial>; locale: import("@cxl/ui/rx.js").BehaviorSubject; setLocale: (localeId: LocaleName) => Promise; /** Retrieves localized text for a given key from the current locale's content. */ get(key: ContentKeys, fallbackKey?: ContentKeys): import("@cxl/ui/rx.js").Observable; /** Registers a new locale with the manager. */ register(locale: LocaleBase): void; }; export function registerText(newContent: Partial): (key: ContentKeys, fallbackKey?: ContentKeys) => import("@cxl/ui/rx.js").Observable; export function formatDate(options?: DateFormat): (v: Date | undefined) => import("@cxl/ui/rx.js").Observable; export function getDayText(day: number, size: BreakpointKey): import("@cxl/ui/rx.js").Observable; } /// declare module "@cxl/ui/toggle.js" { import { Component } from "@cxl/ui/component.js"; import { Observable } from "@cxl/ui/rx.js"; import { AnimationKey } from "@cxl/ui/theme.js"; export interface ToggleTarget extends HTMLElement { visible?: boolean; } export interface ToggleEvent { target: T; opened: boolean; animation?: Animation; } export interface ToggleComponent extends Component { opened: boolean; target?: string | T; } export function toggleBehavior(trigger: Element, getTarget: () => T | undefined, isVisible: () => boolean, opened: Observable): Observable<{ target: T; opened: boolean; }, "none">; /** * This function provides a reusable behavior for toggling the visibility of a target element based on user interaction with another element (the trigger). */ export function toggleComponent(host: ToggleComponent): Observable<{ target: T; opened: boolean; }, "none">; /** * The Toggle component provides a way to control the visibility of another element through user interaction (typically a click) on the toggle element. * * @beta * @demo * Toggle * Popup Content */ export class Toggle extends Component { /** * This attribute controls the initial visibility state of the target element. Set it to true to show the target element initially. */ opened: boolean; /** * This attribute specifies the ID or a reference to the element that should be shown/hidden when the toggle is interacted with. */ target?: string | ToggleTarget; } /** * The ToggleBase class provides a base implementation for components that manage a show/hide * state and potentially animations for transitioning between states. */ abstract class ToggleBase extends Component { /** * This property controls the visibility state of the toggle target element. Setting it to true shows the target, while false hides it. */ opened: boolean; /** * his attribute allows you to specify the name of an animation that should be played when the toggle target element becomes visible. */ animationin?: AnimationKey; /** * Similar to animationin, this attribute specifies the name of an animation to play when the toggle target element becomes hidden. */ animationout?: AnimationKey; } /** * The TogglePanel component provides a mechanism to show or hide a designated content area (target) * in response to user interaction with a trigger element. * * @beta * * @demo * * Toggle * * */ export class TogglePanel extends ToggleBase { } /** * The ToggleSwitch component provides a visual representation of a toggle state (on or off) * and allows users to change it through interaction with a trigger element. * * The component provides two named slots, "off" and "on," to display different content based on the toggle state. * * @demo Toggle Switch