@chromvoid/uikit 0.1.0

package/dist/components/cv-toolbar.js

@@ -0,0 +1,295 @@
+import {} from '@chromvoid/headless-ui/interactions/composite-navigation';
+import { createToolbar } from '@chromvoid/headless-ui/toolbar';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVToolbarItem } from './cv-toolbar-item.js';
+import { CVToolbarSeparator } from './cv-toolbar-separator.js';
+const toolbarKeysToPrevent = new Set(['ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End']);
+let cvToolbarNonce = 0;
+export class CVToolbar extends ReatomLitElement {
+    static elementName = 'cv-toolbar';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            orientation: { type: String, reflect: true },
+            wrap: { type: Boolean, reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-toolbar-${++cvToolbarNonce}`;
+    itemRecords = [];
+    separatorRecords = [];
+    itemListeners = new WeakMap();
+    hasFocus = false;
+    model;
+    constructor() {
+        super();
+        this.value = '';
+        this.orientation = 'horizontal';
+        this.wrap = true;
+        this.ariaLabel = '';
+        this.model = createToolbar({
+            idBase: this.idBase,
+            items: [],
+            orientation: this.orientation,
+            wrap: this.wrap,
+            ariaLabel: undefined,
+            initialActiveId: null,
+        });
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cv-toolbar-gap, var(--cv-space-1, 4px));
+        padding: var(--cv-toolbar-padding, var(--cv-space-1, 4px));
+        border-radius: var(--cv-toolbar-border-radius, var(--cv-radius-md, 10px));
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+      }
+
+      :host([orientation='vertical']) [part='base'] {
+        flex-direction: column;
+        align-items: stretch;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+        CVToolbarSeparator.define();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.rebuildModelFromSlot(false, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachItemListeners();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('orientation') ||
+            changedProperties.has('wrap') ||
+            changedProperties.has('ariaLabel')) {
+            this.rebuildModelFromSlot(true, false);
+            return;
+        }
+        if (changedProperties.has('value')) {
+            const next = this.value.trim();
+            if (next && this.model.state.activeId() !== next) {
+                const previous = this.model.state.activeId();
+                this.model.actions.setActive(next);
+                this.applyInteractionResult(previous);
+            }
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!changedProperties.has('value')) {
+            this.syncItemElements();
+            this.syncSeparatorElements();
+        }
+    }
+    getItemElements() {
+        return Array.from(this.children).filter((element) => element.tagName.toLowerCase() === CVToolbarItem.elementName);
+    }
+    getSeparatorElements() {
+        return Array.from(this.children).filter((element) => element.tagName.toLowerCase() === CVToolbarSeparator.elementName);
+    }
+    ensureItemValue(item, index) {
+        const normalized = item.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `item-${index + 1}`;
+        item.value = fallback;
+        return fallback;
+    }
+    ensureSeparatorValue(sep, index) {
+        const normalized = sep.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `sep-${index + 1}`;
+        sep.value = fallback;
+        return fallback;
+    }
+    rebuildModelFromSlot(preserveState, requestRender = true) {
+        const itemElements = this.getItemElements();
+        const separatorElements = this.getSeparatorElements();
+        const previousActiveId = preserveState ? this.model.state.activeId() : this.value.trim() || null;
+        this.detachItemListeners();
+        this.itemRecords = itemElements.map((element, index) => ({
+            id: this.ensureItemValue(element, index),
+            disabled: element.disabled,
+            element,
+        }));
+        this.separatorRecords = separatorElements.map((element, index) => ({
+            id: this.ensureSeparatorValue(element, index),
+            element,
+        }));
+        // Build ordered items list (items + separators) preserving DOM order
+        const allHeadlessItems = [];
+        for (const child of Array.from(this.children)) {
+            const tag = child.tagName.toLowerCase();
+            if (tag === CVToolbarItem.elementName) {
+                const record = this.itemRecords.find((r) => r.element === child);
+                if (record)
+                    allHeadlessItems.push({ id: record.id, disabled: record.disabled });
+            }
+            else if (tag === CVToolbarSeparator.elementName) {
+                const record = this.separatorRecords.find((r) => r.element === child);
+                if (record)
+                    allHeadlessItems.push({ id: record.id, separator: true });
+            }
+        }
+        this.model = createToolbar({
+            idBase: this.idBase,
+            items: allHeadlessItems,
+            orientation: this.orientation,
+            wrap: this.wrap,
+            ariaLabel: this.ariaLabel || undefined,
+            initialActiveId: previousActiveId,
+        });
+        this.attachItemListeners();
+        this.syncItemElements();
+        this.syncSeparatorElements();
+        this.value = this.model.state.activeId() ?? '';
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    detachItemListeners() {
+        for (const record of this.itemRecords) {
+            const listeners = this.itemListeners.get(record.element);
+            if (!listeners)
+                continue;
+            record.element.removeEventListener('focus', listeners.focus);
+            record.element.removeEventListener('click', listeners.click);
+            this.itemListeners.delete(record.element);
+        }
+    }
+    attachItemListeners() {
+        for (const record of this.itemRecords) {
+            const focus = () => {
+                this.handleItemFocus(record.id);
+            };
+            const click = () => {
+                this.handleItemFocus(record.id);
+            };
+            record.element.addEventListener('focus', focus);
+            record.element.addEventListener('click', click);
+            this.itemListeners.set(record.element, { focus, click });
+        }
+    }
+    syncItemElements() {
+        for (const record of this.itemRecords) {
+            const props = this.model.contracts.getItemProps(record.id);
+            record.element.id = props.id;
+            record.element.tabIndex = Number(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.disabled = props['aria-disabled'] === 'true';
+        }
+    }
+    syncSeparatorElements() {
+        for (const record of this.separatorRecords) {
+            const props = this.model.contracts.getSeparatorProps(record.id);
+            record.element.id = props.id;
+            record.element.separatorRole = props.role;
+            record.element.separatorOrientation = props['aria-orientation'];
+        }
+    }
+    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() {
+        const activeId = this.model.state.activeId();
+        if (!activeId)
+            return;
+        const activeRecord = this.itemRecords.find((record) => record.id === activeId);
+        activeRecord?.element.focus();
+    }
+    applyInteractionResult(previousActiveId) {
+        this.syncItemElements();
+        const nextActiveId = this.model.state.activeId();
+        this.value = nextActiveId ?? '';
+        if (nextActiveId === previousActiveId)
+            return;
+        const detail = { activeId: nextActiveId };
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+        this.focusActiveItem();
+    }
+    handleItemFocus(id) {
+        const previous = this.model.state.activeId();
+        this.model.actions.setActive(id);
+        this.applyInteractionResult(previous);
+    }
+    handleToolbarKeyDown(event) {
+        if (toolbarKeysToPrevent.has(event.key)) {
+            event.preventDefault();
+        }
+        const previous = this.model.state.activeId();
+        this.model.actions.handleKeyDown({ key: event.key });
+        this.applyInteractionResult(previous);
+    }
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    handleFocusIn() {
+        if (!this.hasFocus) {
+            this.hasFocus = true;
+            this.model.actions.handleToolbarFocus();
+            this.syncItemElements();
+            this.value = this.model.state.activeId() ?? '';
+        }
+    }
+    handleFocusOut(event) {
+        const related = event.relatedTarget;
+        if (!related || !this.contains(related)) {
+            this.hasFocus = false;
+            this.model.actions.handleToolbarBlur();
+        }
+    }
+    render() {
+        const rootProps = this.model.contracts.getRootProps();
+        return html `
+      <div
+        id=${rootProps.id}
+        role=${rootProps.role}
+        aria-orientation=${rootProps['aria-orientation']}
+        aria-label=${rootProps['aria-label'] ?? nothing}
+        part="base"
+        @keydown=${this.handleToolbarKeyDown}
+        @focusin=${this.handleFocusIn}
+        @focusout=${this.handleFocusOut}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,83 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVTooltipEventDetail {
+    open: boolean;
+}
+export declare class CVTooltip extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        showDelay: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        hideDelay: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        trigger: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        arrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    disabled: boolean;
+    showDelay: number;
+    hideDelay: number;
+    trigger: string;
+    arrow: boolean;
+    private readonly idBase;
+    private model;
+    private triggerTargets;
+    private lastEmittedOpen;
+    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 getContentElement;
+    private getTriggerElement;
+    private clearInlineLayout;
+    private syncNativePopover;
+    private applyFallbackLayout;
+    private syncTooltipLayout;
+    private cancelLayoutFrame;
+    private scheduleLayout;
+    private toggleLayoutListeners;
+    private handleViewportChange;
+    private createModel;
+    private dispatchInput;
+    private dispatchChange;
+    private emitOpenChange;
+    private applyInteractionResult;
+    private syncTriggerAria;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleClick;
+    private handleKeyDown;
+    private handleTriggerSlotChange;
+    /** Programmatically opens the tooltip (intended for manual trigger mode). */
+    show(): void;
+    /** Programmatically closes the tooltip (intended for manual trigger mode). */
+    hide(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}