@luzmo/lucero 0.0.3 → 0.0.6

package/utils/reactive-controllers/dependency-manger.d.ts

@@ -0,0 +1,26 @@
+import type { ReactiveElement } from 'lit';
+export declare const dependencyManagerLoadedSymbol: unique symbol;
+/**
+ * Manage the availability of custom element dependencies of a host element
+ * to gate render and functional behavior before and after their presence
+ */
+export declare class DependencyManagerController {
+    private dependencies;
+    private host;
+    /**
+     * Whether all of the provided dependencies have been registered.
+     * This will be `false` when no dependencies have been listed for management.
+     * Changes to this value will trigger `requestUpdate()` on the host.
+     */
+    get loaded(): boolean;
+    private set loaded(value);
+    private _loaded;
+    constructor(host: ReactiveElement);
+    /**
+     * Submit a custom element tag name to be managed as a dependency.
+     *
+     * @param dependency {string} - the custom element tag to manage
+     * @param alreadyLoaded {boolean} - force the managemented custom element to be listed as loaded
+     */
+    add(dependency: string, alreadyLoaded?: boolean): void;
+}

package/utils/reactive-controllers/element-resolution.d.ts

@@ -0,0 +1,23 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare const elementResolverUpdatedSymbol: unique symbol;
+export declare class ElementResolutionController implements ReactiveController {
+    get element(): HTMLElement | null;
+    set element(element: HTMLElement | null);
+    private _element;
+    private host;
+    private observer;
+    get selector(): string;
+    set selector(selector: string);
+    private _selector;
+    get selectorAsId(): string;
+    get selectorIsId(): boolean;
+    constructor(host: ReactiveElement, { selector }?: {
+        selector: string;
+    });
+    protected mutationCallback: MutationCallback;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private resolveElement;
+    private releaseElement;
+    private elementIsSelected;
+}

package/utils/reactive-controllers/focus-group.d.ts

@@ -0,0 +1,62 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
+export type FocusGroupConfig<T> = {
+    focusInIndex?: (_elements: T[]) => number;
+    direction?: DirectionTypes | (() => DirectionTypes);
+    elementEnterAction?: (el: T) => void;
+    elements: () => T[];
+    isFocusableElement?: (el: T) => boolean;
+    listenerScope?: HTMLElement | (() => HTMLElement);
+};
+export declare class FocusGroupController<T extends HTMLElement> implements ReactiveController {
+    protected cachedElements?: T[];
+    private mutationObserver;
+    get currentIndex(): number;
+    set currentIndex(currentIndex: number);
+    private _currentIndex;
+    private prevIndex;
+    get direction(): DirectionTypes;
+    _direction: () => DirectionTypes;
+    directionLength: number;
+    elementEnterAction: (_el: T) => void;
+    get elements(): T[];
+    private _elements;
+    protected set focused(focused: boolean);
+    protected get focused(): boolean;
+    private _focused;
+    get focusInElement(): T;
+    get focusInIndex(): number;
+    _focusInIndex: (_elements: T[]) => number;
+    host: ReactiveElement;
+    isFocusableElement: (_el: T) => boolean;
+    isEventWithinListenerScope(event: Event): boolean;
+    _listenerScope: () => HTMLElement;
+    offset: number;
+    recentlyConnected: boolean;
+    constructor(host: ReactiveElement, { direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope }?: FocusGroupConfig<T>);
+    handleItemMutation(): void;
+    update({ elements }?: FocusGroupConfig<T>): void;
+    focus(options?: FocusOptions): void;
+    clearElementCache(offset?: number): void;
+    setCurrentIndexCircularly(diff: number): void;
+    hostContainsFocus(): void;
+    hostNoLongerContainsFocus(): void;
+    isRelatedTargetOrContainAnElement(event: FocusEvent): boolean;
+    handleFocusin: (event: FocusEvent) => void;
+    /**
+     * handleClick - Finds the element that was clicked and sets the tabindex to 0
+     * @returns void
+     */
+    handleClick: () => void;
+    handleFocusout: (event: FocusEvent) => void;
+    acceptsEventCode(code: string): boolean;
+    handleKeydown: (event: KeyboardEvent) => void;
+    manage(): void;
+    unmanage(): void;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}
+export {};

package/utils/reactive-controllers/language-resolution.d.ts

@@ -0,0 +1,11 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare const languageResolverUpdatedSymbol: unique symbol;
+export declare class LanguageResolutionController implements ReactiveController {
+    private host;
+    language: string;
+    private unsubscribe?;
+    constructor(host: ReactiveElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private resolveLanguage;
+}

package/utils/reactive-controllers/match-media.d.ts

@@ -0,0 +1,13 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare const DARK_MODE = "(prefers-color-scheme: dark)";
+export declare const IS_MOBILE = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
+export declare class MatchMediaController implements ReactiveController {
+    key: symbol;
+    matches: boolean;
+    protected host: ReactiveElement;
+    protected media: MediaQueryList;
+    constructor(host: ReactiveElement, query: string);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    protected onChange(event: MediaQueryListEvent): void;
+}

package/utils/reactive-controllers/pending-state.d.ts

@@ -0,0 +1,41 @@
+import { ReactiveController, TemplateResult } from 'lit';
+import '../../components/progress-circle/progress-circle';
+import { LuzmoElement } from '../base';
+/**
+ * Represents a host element with pending state.
+ */
+export interface HostWithPendingState extends LuzmoElement {
+    pendingLabel?: string;
+    pending: boolean;
+    disabled: boolean;
+    pendingStateController: PendingStateController<HostWithPendingState>;
+}
+/**
+ * Represents a controller for managing the pending state of a reactive element.
+ *
+ * @template T - The type of the reactive element.
+ */
+export declare class PendingStateController<T extends HostWithPendingState> implements ReactiveController {
+    /**
+     * The host element that this controller is attached to.
+     */
+    host: T;
+    /**
+     * Creates an instance of PendingStateController.
+     * @param host - The host element that this controller is attached to.
+     */
+    constructor(host: T);
+    cachedAriaLabel: string | null;
+    /**
+     * Renders the pending state UI.
+     * @returns A TemplateResult representing the pending state UI.
+     */
+    renderPendingState(): TemplateResult;
+    /**
+     * Updates the ARIA label of the host element based on the pending state.
+     * Manages Cached Aria Label
+     */
+    private updateAriaLabel;
+    hostConnected(): void;
+    hostUpdated(): void;
+}

package/utils/reactive-controllers/roving-tabindex.d.ts

@@ -0,0 +1,19 @@
+import { FocusGroupConfig, FocusGroupController } from './focus-group';
+export type RovingTabindexConfig<T> = FocusGroupConfig<T>;
+interface UpdateTabIndexes {
+    tabIndex: number;
+    removeTabIndex?: boolean;
+}
+export declare class RovingTabindexController<T extends HTMLElement> extends FocusGroupController<T> {
+    protected set focused(focused: boolean);
+    protected get focused(): boolean;
+    private managed;
+    private manageIndexesAnimationFrame;
+    clearElementCache(offset?: number): void;
+    manageTabindexes(): void;
+    updateTabindexes(getTabIndex: (el: HTMLElement) => UpdateTabIndexes): void;
+    manage(): void;
+    unmanage(): void;
+    hostUpdated(): void;
+}
+export {};

package/utils/reparent-child.d.ts

@@ -0,0 +1,4 @@
+export declare const reparentChildren: <T extends Element>(srcElements: T[], destination: Element, { position, prepareCallback }?: {
+    position: InsertPosition;
+    prepareCallback?: (el: T) => ((el: T) => void) | void;
+}) => (() => T[]);

package/utils/sized-mixin.d.ts

@@ -0,0 +1,17 @@
+import { ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export type ElementSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export declare const ElementSizes: Record<string, ElementSize>;
+export type DefaultElementSize = Exclude<ElementSize, 'xxs' | 'xs' | 'xxl'>;
+export interface SizedElementInterface {
+    size: ElementSize;
+}
+export declare function SizedMixin<T extends Constructor<ReactiveElement>>(constructor: T, { validSizes, noDefaultSize, defaultSize }?: {
+    validSizes?: ElementSize[];
+    noDefaultSize?: boolean;
+    defaultSize?: ElementSize;
+}): T & Constructor<SizedElementInterface>;
+export {};

package/utils/streaming-listener.d.ts

@@ -0,0 +1,48 @@
+import { nothing, Part } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+import type { DirectiveResult } from 'lit/directive.js';
+type ListenerConfig = [string | string[], (event?: any) => void];
+type ListenerConfigGroup = {
+    start: ListenerConfig;
+    end: ListenerConfig;
+    streamInside?: ListenerConfig;
+    streamOutside?: ListenerConfig;
+};
+/**
+ * Performantly manage listening to event in a series, like:
+ * - `input[type="range"]`: input, input, etc. => change
+ * - `luzmo-color-area`: pointerdown => pointermove, pointermove, etc. => pointerup
+ * Lazily bind events to the specific part of the series while
+ * throttling streamed events to 1/frame.
+ */
+declare class StreamingListenerDirective extends AsyncDirective {
+    host: EventTarget | Record<string, unknown> | Element;
+    element: Element;
+    start: ListenerConfig;
+    streamInside: ListenerConfig;
+    end: ListenerConfig;
+    streamOutside: ListenerConfig;
+    state: 'off' | 'on';
+    stream?: number;
+    render(_configGroup: ListenerConfigGroup): typeof nothing;
+    update(part: Part, [{ start, end, streamInside, streamOutside }]: Parameters<this['render']>): void;
+    addListeners(state?: 'on' | 'off'): void;
+    callHandler(value: (event: Event) => void | EventListenerObject, event: Event): void;
+    handleStream(value: (event: Event) => void | EventListenerObject, event: Event): void;
+    clearStream(): void;
+    handleStart: (event: Event) => void;
+    handleInside: (event: Event) => void;
+    handleEnd: (event: Event) => void;
+    handleOutside: (event: Event) => void;
+    addListener(type: string | string[], fn: (event: Event) => void): void;
+    removeListener(type: string | string[], fn: (event: Event) => void): void;
+    removeListeners(): void;
+    disconnected(): void;
+    reconnected(): void;
+}
+export declare const streamingListener: (_configGroup: ListenerConfigGroup) => DirectiveResult<typeof StreamingListenerDirective>;
+/**
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
+ */
+export type { StreamingListenerDirective };