@chromvoid/uikit 0.1.0

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

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

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

@@ -0,0 +1,48 @@
+import { LitElement, css, html } from 'lit';
+export class CVMenuGroup extends LitElement {
+    static elementName = 'cv-menu-group';
+    static get properties() {
+        return {
+            type: { type: String, reflect: true },
+            label: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.type = '';
+        this.label = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: grid;
+        gap: var(--cv-menu-group-gap, var(--cv-space-1, 4px));
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='label'] {
+        padding: 0 var(--cv-menu-group-label-padding-inline, var(--cv-space-3, 12px));
+        font-size: var(--cv-menu-group-label-font-size, 0.75em);
+        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" role="presentation">
+        <slot name="label">${this.label}</slot>
+      </div>
+      <div part="base" role="group" aria-label=${this.label || ''}>
+        <slot></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+export declare class CVMenuItem extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        hasSubmenu: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    active: boolean;
+    selected: boolean;
+    type: 'normal' | 'checkbox' | 'radio';
+    checked: boolean;
+    label: string;
+    hasSubmenu: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private handleSubmenuSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-menu-item.js

@@ -0,0 +1,105 @@
+import { LitElement, css, html, nothing } from 'lit';
+import { componentResetStyles } from '../styles/component-styles.js';
+export class CVMenuItem extends LitElement {
+    static elementName = 'cv-menu-item';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            type: { type: String, reflect: true },
+            checked: { type: Boolean, reflect: true },
+            label: { type: String, reflect: true },
+            hasSubmenu: { type: Boolean, reflect: true, attribute: 'has-submenu' },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+        this.type = 'normal';
+        this.checked = false;
+        this.label = '';
+        this.hasSubmenu = false;
+    }
+    static styles = [
+        componentResetStyles,
+        css `
+      :host {
+        display: inline-block;
+        outline: none;
+      }
+
+      .item {
+        gap: var(--cv-menu-item-gap, var(--cv-space-2, 8px));
+        padding: var(--cv-menu-item-padding-block, var(--cv-space-2, 8px))
+          var(--cv-menu-item-padding-inline, var(--cv-space-3, 12px));
+        border-radius: var(--cv-menu-item-border-radius, var(--cv-radius-sm, 6px));
+        color: var(--cv-color-text, #e8ecf6);
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([active]) .item {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+      }
+
+      :host([selected]) .item {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+      }
+
+      :host([disabled]) .item {
+        opacity: 0.5;
+      }
+
+      :host(:focus-visible) .item {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='label'] {
+        min-inline-size: 0;
+      }
+
+      [part='checkmark'] {
+        inline-size: 1em;
+        block-size: 1em;
+      }
+
+      [part='submenu-icon'] {
+        margin-inline-start: auto;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleSubmenuSlotChange(event) {
+        const slot = event.target;
+        const assigned = slot.assignedElements();
+        this.hasSubmenu = assigned.length > 0;
+    }
+    render() {
+        const isCheckable = this.type === 'checkbox' || this.type === 'radio';
+        return html `
+      <div class="item cv-u-row" part="base">
+        ${isCheckable ? html `<span part="checkmark" class="cv-u-icon-slot">${this.checked ? '\u2713' : ''}</span>` : nothing}
+        <span part="prefix" class="cv-u-icon-slot"><slot name="prefix"></slot></span>
+        <span part="label" class="cv-u-fill"><slot></slot></span>
+        <span part="suffix" class="cv-u-icon-slot"><slot name="suffix"></slot></span>
+        ${this.hasSubmenu
+            ? html `
+                <span part="submenu-icon" class="cv-u-icon-slot">\u25B6</span>
+              `
+            : nothing}
+      </div>
+      <slot name="submenu" @slotchange=${this.handleSubmenuSlotChange}></slot>
+    `;
+    }
+}

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

@@ -0,0 +1,62 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVMenuEventDetail {
+    value: string | null;
+    activeId: string | null;
+    open: boolean;
+}
+export declare class CVMenu extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        closeOnSelect: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    open: boolean;
+    closeOnSelect: boolean;
+    ariaLabel: string;
+    private readonly idBase;
+    private itemRecords;
+    private itemListeners;
+    private model?;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getItemElements;
+    private ensureItemValue;
+    private rebuildModelFromSlot;
+    private detachItemListeners;
+    private attachItemListeners;
+    private syncItemElements;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private focusActiveItem;
+    private applyInteractionResult;
+    private handleItemFocus;
+    private handleItemClick;
+    private handleMenuKeyDown;
+    private syncOutsidePointerListener;
+    private handleDocumentPointerDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-menu.js

@@ -0,0 +1,414 @@
+import { createMenu } from '@chromvoid/headless-ui/menu';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVMenuItem } from './cv-menu-item.js';
+const menuKeysToPrevent = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'Enter',
+    ' ',
+    'Spacebar',
+    'Escape',
+    'Tab',
+]);
+let cvMenuNonce = 0;
+export class CVMenu extends ReatomLitElement {
+    static elementName = 'cv-menu';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            open: { type: Boolean, reflect: true },
+            closeOnSelect: { type: Boolean, attribute: 'close-on-select', reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-menu-${++cvMenuNonce}`;
+    itemRecords = [];
+    itemListeners = new WeakMap();
+    model;
+    constructor() {
+        super();
+        this.value = '';
+        this.open = false;
+        this.closeOnSelect = true;
+        this.ariaLabel = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-menu-gap, var(--cv-space-1, 4px));
+        padding: var(--cv-menu-padding, var(--cv-space-1, 4px));
+        border-radius: var(--cv-menu-border-radius, var(--cv-radius-md, 10px));
+        border: 1px solid var(--cv-menu-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-menu-background, var(--cv-color-surface-elevated, #1d2432));
+        box-shadow: var(--cv-menu-shadow, var(--cv-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.24)));
+        max-height: var(--cv-menu-max-height, none);
+        min-inline-size: var(--cv-menu-min-inline-size, 180px);
+        overflow-y: auto;
+      }
+
+      [part='base'][hidden] {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.model) {
+            this.rebuildModelFromSlot(false, false);
+        }
+        this.syncOutsidePointerListener();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachItemListeners();
+        this.syncOutsidePointerListener(true);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('closeOnSelect') || changedProperties.has('ariaLabel')) {
+            this.rebuildModelFromSlot(true, false);
+            return;
+        }
+        if (!this.model)
+            return;
+        if (changedProperties.has('value')) {
+            const normalized = this.value.trim();
+            if (this.value !== normalized) {
+                this.value = normalized;
+            }
+            if (normalized.length > 0 && this.model.state.selectedId() !== normalized) {
+                const previous = this.captureState();
+                const wasOpen = this.model.state.isOpen();
+                this.model.actions.select(normalized);
+                if (wasOpen && !this.model.state.isOpen()) {
+                    this.model.actions.open();
+                }
+                this.applyInteractionResult(previous);
+            }
+        }
+        if (changedProperties.has('open') && this.model.state.isOpen() !== this.open) {
+            const previous = this.captureState();
+            if (this.open) {
+                this.model.actions.open();
+            }
+            else {
+                this.model.actions.close();
+            }
+            this.applyInteractionResult(previous);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.syncOutsidePointerListener();
+        if (!changedProperties.has('value') && !changedProperties.has('open')) {
+            this.syncItemElements();
+        }
+    }
+    getItemElements() {
+        const items = [];
+        for (const child of Array.from(this.children)) {
+            if (child.tagName.toLowerCase() === CVMenuItem.elementName) {
+                items.push(child);
+            }
+            else if (child.tagName.toLowerCase() === 'cv-menu-group') {
+                for (const groupChild of Array.from(child.children)) {
+                    if (groupChild.tagName.toLowerCase() === CVMenuItem.elementName) {
+                        items.push(groupChild);
+                    }
+                }
+            }
+        }
+        return items;
+    }
+    ensureItemValue(item, index) {
+        const normalized = item.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `item-${index + 1}`;
+        item.value = fallback;
+        return fallback;
+    }
+    rebuildModelFromSlot(preserveState, requestRender = true) {
+        const itemElements = this.getItemElements();
+        const previous = preserveState
+            ? this.captureState()
+            : { activeId: null, open: this.open, value: this.value || null };
+        this.detachItemListeners();
+        this.itemRecords = itemElements.map((element, index) => {
+            const id = this.ensureItemValue(element, index);
+            const label = element.label?.trim() || element.textContent?.trim() || id;
+            const itemType = element.type || 'normal';
+            const hasSubmenu = element.hasSubmenu || element.querySelector('[slot="submenu"]') != null;
+            // Inherit type from parent cv-menu-group if not explicitly set
+            let groupType = 'normal';
+            let groupId;
+            const parent = element.parentElement;
+            if (parent && parent.tagName.toLowerCase() === 'cv-menu-group') {
+                const parentType = parent.getAttribute('type');
+                if (parentType === 'checkbox' || parentType === 'radio') {
+                    groupType = parentType;
+                    groupId = parent.getAttribute('label') || undefined;
+                }
+            }
+            const effectiveType = itemType !== 'normal' ? itemType : groupType;
+            return {
+                id,
+                label,
+                disabled: element.disabled,
+                type: effectiveType,
+                checked: element.checked,
+                hasSubmenu,
+                group: groupId,
+                element,
+            };
+        });
+        const enabledIds = new Set(this.itemRecords.filter((record) => !record.disabled).map((record) => record.id));
+        const initialActiveId = previous.activeId && enabledIds.has(previous.activeId) ? previous.activeId : null;
+        this.model = createMenu({
+            idBase: this.idBase,
+            items: this.itemRecords.map((record) => ({
+                id: record.id,
+                label: record.label,
+                disabled: record.disabled,
+                type: record.type,
+                checked: record.checked,
+                hasSubmenu: record.hasSubmenu,
+                group: record.group,
+            })),
+            initialOpen: previous.open,
+            initialActiveId,
+            closeOnSelect: this.closeOnSelect,
+            ariaLabel: this.ariaLabel || undefined,
+        });
+        if (previous.value && enabledIds.has(previous.value)) {
+            const wasOpen = this.model.state.isOpen();
+            this.model.actions.select(previous.value);
+            if (wasOpen && !this.model.state.isOpen()) {
+                this.model.actions.open();
+            }
+        }
+        if (initialActiveId) {
+            this.model.actions.setActive(initialActiveId);
+        }
+        this.attachItemListeners();
+        this.syncItemElements();
+        this.value = this.model.state.selectedId() ?? '';
+        this.open = this.model.state.isOpen();
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    detachItemListeners() {
+        for (const record of this.itemRecords) {
+            const listeners = this.itemListeners.get(record.element);
+            if (!listeners)
+                continue;
+            record.element.removeEventListener('click', listeners.click);
+            record.element.removeEventListener('focus', listeners.focus);
+            this.itemListeners.delete(record.element);
+        }
+    }
+    attachItemListeners() {
+        if (!this.model)
+            return;
+        for (const record of this.itemRecords) {
+            const click = (event) => {
+                event.preventDefault();
+                this.handleItemClick(record.id);
+            };
+            const focus = () => {
+                this.handleItemFocus(record.id);
+            };
+            record.element.addEventListener('click', click);
+            record.element.addEventListener('focus', focus);
+            this.itemListeners.set(record.element, { click, focus });
+        }
+    }
+    syncItemElements() {
+        if (!this.model)
+            return;
+        const selected = this.model.state.selectedId();
+        for (const record of this.itemRecords) {
+            const props = this.model.contracts.getItemProps(record.id);
+            record.element.id = props.id;
+            record.element.setAttribute('role', props.role);
+            record.element.setAttribute('tabindex', props.tabindex);
+            if (props['aria-disabled']) {
+                record.element.setAttribute('aria-disabled', props['aria-disabled']);
+            }
+            else {
+                record.element.removeAttribute('aria-disabled');
+            }
+            record.element.setAttribute('data-active', props['data-active']);
+            record.element.active = props['data-active'] === 'true';
+            record.element.selected = selected === record.id;
+            record.element.disabled = props['aria-disabled'] === 'true';
+            record.element.hidden = !this.open;
+            // Sync aria-checked for checkable items
+            if (props['aria-checked'] != null) {
+                record.element.setAttribute('aria-checked', props['aria-checked']);
+                record.element.checked = props['aria-checked'] === 'true';
+            }
+            else {
+                record.element.removeAttribute('aria-checked');
+            }
+            // Sync aria-haspopup and aria-expanded for submenu items
+            if (props['aria-haspopup']) {
+                record.element.setAttribute('aria-haspopup', props['aria-haspopup']);
+            }
+            else {
+                record.element.removeAttribute('aria-haspopup');
+            }
+            if (props['aria-expanded'] != null) {
+                record.element.setAttribute('aria-expanded', props['aria-expanded']);
+            }
+            else {
+                record.element.removeAttribute('aria-expanded');
+            }
+        }
+    }
+    captureState() {
+        return {
+            value: this.model?.state.selectedId() ?? (this.value.trim() || null),
+            activeId: this.model?.state.activeId() ?? null,
+            open: this.model?.state.isOpen() ?? this.open,
+        };
+    }
+    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,
+        }));
+    }
+    focusActiveItem() {
+        if (!this.model || !this.open)
+            return;
+        const activeId = this.model.state.activeId();
+        if (!activeId)
+            return;
+        const activeRecord = this.itemRecords.find((record) => record.id === activeId);
+        activeRecord?.element.focus();
+    }
+    applyInteractionResult(previous) {
+        if (!this.model)
+            return;
+        const next = this.captureState();
+        this.value = next.value ?? '';
+        this.open = next.open;
+        this.syncItemElements();
+        const valueChanged = previous.value !== next.value;
+        const activeChanged = previous.activeId !== next.activeId;
+        const openChanged = previous.open !== next.open;
+        if (valueChanged || activeChanged || openChanged) {
+            const detail = {
+                value: next.value,
+                activeId: next.activeId,
+                open: next.open,
+            };
+            this.dispatchInput(detail);
+            if (valueChanged) {
+                this.dispatchChange(detail);
+            }
+        }
+        if (activeChanged) {
+            this.focusActiveItem();
+        }
+    }
+    handleItemFocus(id) {
+        if (!this.model)
+            return;
+        const previous = this.captureState();
+        this.model.actions.setActive(id);
+        this.applyInteractionResult(previous);
+    }
+    handleItemClick(id) {
+        if (!this.model)
+            return;
+        const record = this.itemRecords.find((item) => item.id === id);
+        if (!record || record.disabled)
+            return;
+        const previous = this.captureState();
+        this.model.actions.select(id);
+        this.applyInteractionResult(previous);
+    }
+    handleMenuKeyDown(event) {
+        if (!this.model)
+            return;
+        if (menuKeysToPrevent.has(event.key)) {
+            event.preventDefault();
+        }
+        const previous = this.captureState();
+        this.model.actions.handleMenuKeyDown({
+            key: event.key,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+        this.applyInteractionResult(previous);
+    }
+    syncOutsidePointerListener(forceOff = false) {
+        const shouldListen = !forceOff && this.open;
+        if (shouldListen) {
+            document.addEventListener('pointerdown', this.handleDocumentPointerDown);
+        }
+        else {
+            document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
+        }
+    }
+    handleDocumentPointerDown = (event) => {
+        if (!this.model || !this.model.state.isOpen())
+            return;
+        const path = event.composedPath();
+        if (path.includes(this))
+            return;
+        const previous = this.captureState();
+        this.model.actions.close();
+        this.applyInteractionResult(previous);
+    };
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    render() {
+        const menuProps = this.model?.contracts.getMenuProps() ?? {
+            id: `${this.idBase}-menu`,
+            role: 'menu',
+            tabindex: '-1',
+            'aria-label': this.ariaLabel || undefined,
+        };
+        return html `
+      <div
+        id=${menuProps.id}
+        role=${menuProps.role}
+        tabindex=${menuProps.tabindex}
+        aria-label=${menuProps['aria-label'] ?? nothing}
+        ?hidden=${!this.open}
+        part="base"
+        @keydown=${this.handleMenuKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}