/// 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

; 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/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/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/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 var require: { replace?: (p: string) => string; href?: 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 { } }