@chromvoid/uikit 0.1.0

package/dist/components/cv-listbox-group.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class CVListboxGroup extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-listbox-group.js

@@ -0,0 +1,42 @@
+import { LitElement, css, html } from 'lit';
+export class CVListboxGroup extends LitElement {
+    static elementName = 'cv-listbox-group';
+    static get properties() {
+        return {
+            label: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.label = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: grid;
+        gap: var(--cv-listbox-group-gap, var(--cv-space-1, 4px));
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='label'] {
+        padding: 0 var(--cv-space-2, 8px);
+        font-size: var(--cv-listbox-group-label-font-size, 0.85em);
+        color: var(--cv-listbox-group-label-color, var(--cv-color-text-muted, #8892a6));
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div part="label">${this.label}</div>
+      <slot></slot>
+    `;
+    }
+}

package/dist/components/cv-listbox.d.ts

@@ -0,0 +1,81 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVListboxEventDetail {
+    selectedValues: string[];
+    activeValue: string | null;
+}
+type CVSelectionMode = 'single' | 'multiple';
+type CVOrientation = 'vertical' | 'horizontal';
+type CVFocusStrategy = 'roving-tabindex' | 'aria-activedescendant';
+export declare class CVListbox extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        selectionMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        focusStrategy: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        selectionFollowsFocus: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        rangeSelection: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        typeahead: {
+            type: BooleanConstructor;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    selectionMode: CVSelectionMode;
+    orientation: CVOrientation;
+    focusStrategy: CVFocusStrategy;
+    selectionFollowsFocus: boolean;
+    rangeSelection: boolean;
+    typeahead: boolean;
+    ariaLabel: string;
+    private readonly idBase;
+    private optionRecords;
+    private optionListeners;
+    private model?;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): string | null;
+    set value(next: string | null);
+    get selectedValues(): string[];
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getAllOptionElements;
+    private scanGroups;
+    private getInitialSelectedFromOptions;
+    private ensureOptionValue;
+    private rebuildModelFromSlot;
+    private detachOptionListeners;
+    private attachOptionListeners;
+    private syncOptionElements;
+    private focusActiveOption;
+    private dispatchInput;
+    private dispatchChange;
+    private applyInteractionResult;
+    private handleOptionPointerSelect;
+    private handleListboxKeyDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/cv-listbox.js

@@ -0,0 +1,388 @@
+import { createListbox } from '@chromvoid/headless-ui/listbox';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVListboxGroup } from './cv-listbox-group.js';
+import { CVOption } from './cv-option.js';
+let cvListboxNonce = 0;
+function arraysEqual(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+function shouldPreventDefaultForKey(event) {
+    if (event.key.toLowerCase() === 'a' && (event.ctrlKey || event.metaKey)) {
+        return true;
+    }
+    return [
+        'ArrowUp',
+        'ArrowDown',
+        'ArrowLeft',
+        'ArrowRight',
+        'Home',
+        'End',
+        'Enter',
+        ' ',
+        'Spacebar',
+        'Escape',
+    ].includes(event.key);
+}
+export class CVListbox extends ReatomLitElement {
+    static elementName = 'cv-listbox';
+    static get properties() {
+        return {
+            selectionMode: { type: String, attribute: 'selection-mode', reflect: true },
+            orientation: { type: String, reflect: true },
+            focusStrategy: { type: String, attribute: 'focus-strategy', reflect: true },
+            selectionFollowsFocus: { type: Boolean, attribute: 'selection-follows-focus' },
+            rangeSelection: { type: Boolean, attribute: 'range-selection' },
+            typeahead: { type: Boolean },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-listbox-${++cvListboxNonce}`;
+    optionRecords = [];
+    optionListeners = new WeakMap();
+    model;
+    constructor() {
+        super();
+        this.selectionMode = 'single';
+        this.orientation = 'vertical';
+        this.focusStrategy = 'aria-activedescendant';
+        this.selectionFollowsFocus = false;
+        this.rangeSelection = false;
+        this.typeahead = true;
+        this.ariaLabel = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-listbox-gap, var(--cv-space-1, 4px));
+        padding: var(--cv-listbox-padding, var(--cv-space-1, 4px));
+        border-radius: var(--cv-listbox-border-radius, var(--cv-radius-md, 10px));
+        border: 1px solid var(--cv-listbox-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-listbox-background, var(--cv-color-surface, #141923));
+      }
+
+      [part='base']:focus-visible {
+        outline: 2px solid var(--cv-listbox-focus-outline-color, var(--cv-color-primary, #65d7ff));
+        outline-offset: 1px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.model) {
+            this.rebuildModelFromSlot(false, false);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachOptionListeners();
+    }
+    get value() {
+        if (!this.model)
+            return null;
+        return this.model.state.selectedIds()[0] ?? null;
+    }
+    set value(next) {
+        if (!this.model)
+            return;
+        if (next == null) {
+            this.model.actions.clearSelected();
+            this.syncOptionElements();
+            return;
+        }
+        this.model.actions.selectOnly(next);
+        this.syncOptionElements();
+    }
+    get selectedValues() {
+        if (!this.model)
+            return [];
+        return [...this.model.state.selectedIds()];
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('selectionMode') ||
+            changedProperties.has('orientation') ||
+            changedProperties.has('focusStrategy') ||
+            changedProperties.has('selectionFollowsFocus') ||
+            changedProperties.has('rangeSelection') ||
+            changedProperties.has('typeahead') ||
+            changedProperties.has('ariaLabel')) {
+            this.rebuildModelFromSlot(true, false);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.syncOptionElements();
+    }
+    getAllOptionElements() {
+        const options = [];
+        for (const child of Array.from(this.children)) {
+            if (child.tagName.toLowerCase() === CVOption.elementName) {
+                options.push(child);
+            }
+            else if (child.tagName.toLowerCase() === CVListboxGroup.elementName) {
+                for (const groupChild of Array.from(child.children)) {
+                    if (groupChild.tagName.toLowerCase() === CVOption.elementName) {
+                        options.push(groupChild);
+                    }
+                }
+            }
+        }
+        return options;
+    }
+    scanGroups() {
+        const groups = [];
+        const optionGroupMap = new Map();
+        let groupIndex = 0;
+        for (const child of Array.from(this.children)) {
+            if (child.tagName.toLowerCase() === CVListboxGroup.elementName) {
+                const groupElement = child;
+                const groupId = `group-${groupIndex++}`;
+                groups.push({ id: groupId, label: groupElement.label || '' });
+                for (const groupChild of Array.from(child.children)) {
+                    if (groupChild.tagName.toLowerCase() === CVOption.elementName) {
+                        optionGroupMap.set(groupChild, groupId);
+                    }
+                }
+            }
+        }
+        return { groups, optionGroupMap };
+    }
+    getInitialSelectedFromOptions(optionElements) {
+        return optionElements
+            .filter((option) => option.selected && !option.disabled)
+            .map((option, index) => this.ensureOptionValue(option, index));
+    }
+    ensureOptionValue(option, index) {
+        const normalized = option.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `option-${index + 1}`;
+        option.value = fallback;
+        return fallback;
+    }
+    rebuildModelFromSlot(preserveSelection, requestRender = true) {
+        const optionElements = this.getAllOptionElements();
+        const { groups, optionGroupMap } = this.scanGroups();
+        const previousSelected = preserveSelection
+            ? (this.model?.state.selectedIds() ?? this.getInitialSelectedFromOptions(optionElements))
+            : this.getInitialSelectedFromOptions(optionElements);
+        const previousActive = preserveSelection ? (this.model?.state.activeId() ?? null) : null;
+        this.detachOptionListeners();
+        this.optionRecords = optionElements.map((element, index) => {
+            const id = this.ensureOptionValue(element, index);
+            const label = element.textContent?.trim() || id;
+            const disabled = element.disabled;
+            const groupId = optionGroupMap.get(element);
+            return {
+                id,
+                label,
+                disabled,
+                groupId,
+                element,
+            };
+        });
+        const selectableIds = new Set(this.optionRecords.filter((record) => !record.disabled).map((record) => record.id));
+        const initialSelectedIds = previousSelected.filter((id) => selectableIds.has(id));
+        const initialActiveId = previousActive && selectableIds.has(previousActive) ? previousActive : null;
+        this.model = createListbox({
+            idBase: this.idBase,
+            options: this.optionRecords.map((record) => ({
+                id: record.id,
+                label: record.label,
+                disabled: record.disabled,
+                groupId: record.groupId,
+            })),
+            groups,
+            selectionMode: this.selectionMode,
+            orientation: this.orientation,
+            focusStrategy: this.focusStrategy,
+            selectionFollowsFocus: this.selectionFollowsFocus,
+            rangeSelection: this.rangeSelection,
+            typeahead: this.typeahead,
+            ariaLabel: this.ariaLabel || undefined,
+            initialSelectedIds,
+            initialActiveId,
+        });
+        this.attachOptionListeners();
+        this.syncOptionElements();
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    detachOptionListeners() {
+        for (const record of this.optionRecords) {
+            const listeners = this.optionListeners.get(record.element);
+            if (!listeners)
+                continue;
+            record.element.removeEventListener('click', listeners.click);
+            record.element.removeEventListener('keydown', listeners.keydown);
+            this.optionListeners.delete(record.element);
+        }
+    }
+    attachOptionListeners() {
+        if (!this.model)
+            return;
+        for (const record of this.optionRecords) {
+            const click = () => {
+                this.handleOptionPointerSelect(record.id);
+            };
+            const keydown = (event) => {
+                event.stopPropagation();
+                this.handleListboxKeyDown(event);
+            };
+            record.element.addEventListener('click', click);
+            record.element.addEventListener('keydown', keydown);
+            this.optionListeners.set(record.element, { click, keydown });
+        }
+    }
+    syncOptionElements() {
+        if (!this.model)
+            return;
+        for (const record of this.optionRecords) {
+            const props = this.model.contracts.getOptionProps(record.id);
+            const ariaSelected = props['aria-selected'] ?? 'false';
+            record.element.id = props.id;
+            record.element.setAttribute('role', props.role);
+            record.element.setAttribute('tabindex', props.tabindex);
+            record.element.setAttribute('aria-selected', ariaSelected);
+            record.element.setAttribute('aria-setsize', props['aria-setsize']);
+            record.element.setAttribute('aria-posinset', props['aria-posinset']);
+            if (props['aria-disabled']) {
+                record.element.setAttribute('aria-disabled', props['aria-disabled']);
+            }
+            else {
+                record.element.removeAttribute('aria-disabled');
+            }
+            if (props['data-active'] === 'true') {
+                record.element.setAttribute('data-active', 'true');
+                record.element.active = true;
+            }
+            else {
+                record.element.removeAttribute('data-active');
+                record.element.active = false;
+            }
+            record.element.selected = ariaSelected === 'true';
+            record.element.disabled = record.disabled;
+        }
+    }
+    focusActiveOption() {
+        if (!this.model || this.focusStrategy !== 'roving-tabindex')
+            return;
+        const activeId = this.model.state.activeId();
+        if (!activeId)
+            return;
+        const activeRecord = this.optionRecords.find((record) => record.id === activeId);
+        activeRecord?.element.focus();
+    }
+    dispatchInput(detail) {
+        this.dispatchEvent(new CustomEvent('cv-input', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchChange(detail) {
+        this.dispatchEvent(new CustomEvent('cv-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    applyInteractionResult(previousSelected, previousActive) {
+        if (!this.model)
+            return;
+        this.syncOptionElements();
+        const nextSelected = this.model.state.selectedIds();
+        const nextActive = this.model.state.activeId();
+        const selectedChanged = !arraysEqual(previousSelected, nextSelected);
+        const activeChanged = previousActive !== nextActive;
+        if (activeChanged || selectedChanged) {
+            this.dispatchInput({
+                selectedValues: [...nextSelected],
+                activeValue: nextActive,
+            });
+        }
+        if (selectedChanged) {
+            this.dispatchChange({
+                selectedValues: [...nextSelected],
+                activeValue: nextActive,
+            });
+        }
+        if (activeChanged) {
+            this.focusActiveOption();
+        }
+    }
+    handleOptionPointerSelect(id) {
+        if (!this.model)
+            return;
+        const previousSelected = this.model.state.selectedIds();
+        const previousActive = this.model.state.activeId();
+        this.model.actions.setActive(id);
+        if (this.selectionMode === 'multiple') {
+            this.model.actions.toggleSelected(id);
+        }
+        else {
+            this.model.actions.selectOnly(id);
+        }
+        this.applyInteractionResult(previousSelected, previousActive);
+    }
+    handleListboxKeyDown(event) {
+        if (!this.model)
+            return;
+        const rootElement = this.shadowRoot?.querySelector('[part="base"]');
+        if (this.focusStrategy === 'roving-tabindex' && event.currentTarget === rootElement) {
+            return;
+        }
+        if (shouldPreventDefaultForKey(event)) {
+            event.preventDefault();
+        }
+        const previousSelected = this.model.state.selectedIds();
+        const previousActive = this.model.state.activeId();
+        this.model.actions.handleKeyDown({
+            key: event.key,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+        this.applyInteractionResult(previousSelected, previousActive);
+    }
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    render() {
+        const rootProps = this.model?.contracts.getRootProps() ?? {
+            role: 'listbox',
+            tabindex: this.focusStrategy === 'aria-activedescendant' ? '0' : '-1',
+            'aria-orientation': this.orientation,
+            'aria-label': this.ariaLabel || undefined,
+            'aria-multiselectable': this.selectionMode === 'multiple' ? 'true' : undefined,
+            'aria-activedescendant': undefined,
+        };
+        return html `
+      <div
+        role=${rootProps.role}
+        tabindex=${rootProps.tabindex}
+        aria-orientation=${rootProps['aria-orientation']}
+        aria-label=${rootProps['aria-label'] ?? nothing}
+        aria-multiselectable=${rootProps['aria-multiselectable'] ?? nothing}
+        aria-activedescendant=${rootProps['aria-activedescendant'] ?? nothing}
+        part="base"
+        @keydown=${this.handleListboxKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-menu-button.d.ts

@@ -0,0 +1,118 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVMenuButtonEventDetail {
+    value: string | null;
+    activeId: string | null;
+    open: boolean;
+}
+export type CVMenuButtonInputEvent = CustomEvent<CVMenuButtonEventDetail>;
+export type CVMenuButtonChangeEvent = CustomEvent<CVMenuButtonEventDetail>;
+export type CVMenuButtonActionEvent = CustomEvent<Record<string, never>>;
+export interface CVMenuButtonEventMap {
+    'cv-input': CVMenuButtonInputEvent;
+    'cv-change': CVMenuButtonChangeEvent;
+    'cv-action': CVMenuButtonActionEvent;
+}
+export declare class CVMenuButton extends ReatomLitElement {
+    static elementName: string;
+    static hostDisplay: "inline-block";
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        split: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        closeOnSelect: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    open: boolean;
+    disabled: boolean;
+    split: boolean;
+    size: 'small' | 'medium' | 'large';
+    variant: 'default' | 'primary' | 'danger' | 'ghost';
+    closeOnSelect: boolean;
+    ariaLabel: string;
+    private readonly idBase;
+    private itemRecords;
+    private itemListeners;
+    private hasPrefixContent;
+    private hasLabelContent;
+    private hasSuffixContent;
+    private model?;
+    private hasLayoutListeners;
+    private layoutFrame;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getMenuElement;
+    private getBaseElement;
+    private clearInlineLayout;
+    private getMenuOffset;
+    private getMenuMinInlineSize;
+    private applyMenuLayout;
+    private syncMenuLayout;
+    private cancelLayoutFrame;
+    private scheduleLayout;
+    private toggleLayoutListeners;
+    private handleViewportChange;
+    private getItemElements;
+    private syncContentParts;
+    private hasNamedSlotContent;
+    private hasDefaultSlotContent;
+    private ensureItemValue;
+    private rebuildModelFromSlot;
+    private prefetchMenuIcons;
+    private detachItemListeners;
+    private attachItemListeners;
+    private syncItemElements;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private dispatchAction;
+    private focusActiveItem;
+    private applyInteractionResult;
+    private syncOutsidePointerListener;
+    private handleDocumentPointerDown;
+    private handleItemClick;
+    private handleTriggerClick;
+    private handleActionClick;
+    private handleDropdownClick;
+    private handleKeyDown;
+    private handleMenuSlotChange;
+    private handleContentSlotChange;
+    private renderDropdownIcon;
+    private renderSplitMode;
+    private renderStandardMode;
+    protected render(): import("lit").TemplateResult<1>;
+}