@chromvoid/uikit 0.1.0

package/dist/components/cv-disclosure.js

@@ -0,0 +1,241 @@
+import { createDisclosure } from '@chromvoid/headless-ui/disclosure';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvDisclosureNonce = 0;
+export class CVDisclosure extends ReatomLitElement {
+    static elementName = 'cv-disclosure';
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            name: { type: String, reflect: true },
+        };
+    }
+    idBase = `cv-disclosure-${++cvDisclosureNonce}`;
+    model;
+    /**
+     * When true, events are suppressed. Used to distinguish programmatic
+     * state changes (property sets, show/hide) from user interaction.
+     */
+    suppressEvents = false;
+    constructor() {
+        super();
+        this.open = false;
+        this.disabled = false;
+        this.name = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        --cv-disclosure-duration: var(--cv-duration-fast, 120ms);
+        --cv-disclosure-easing: var(--cv-easing-standard, ease);
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-space-2, 8px);
+      }
+
+      [part='trigger'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        min-block-size: 36px;
+        padding: 0 var(--cv-space-3, 12px);
+        border-radius: var(--cv-radius-sm, 6px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+        color: var(--cv-color-text, #e8ecf6);
+        cursor: pointer;
+      }
+
+      [part='trigger']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='trigger-icon'] {
+        inline-size: 16px;
+        block-size: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--cv-color-text-muted, #9aa6bf);
+        transition: transform var(--cv-disclosure-duration) var(--cv-disclosure-easing);
+      }
+
+      :host([open]) [part='trigger-icon'] {
+        transform: rotate(90deg);
+      }
+
+      [part='panel'] {
+        padding: var(--cv-space-3, 12px);
+        border-radius: var(--cv-radius-sm, 6px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface-elevated, #1d2432);
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      [part='panel'][hidden] {
+        display: none;
+      }
+
+      :host([disabled]) [part='trigger'] {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.model.actions.destroy();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.disabled);
+        }
+        if (changedProperties.has('name')) {
+            this.model.actions.setName(this.name || null);
+        }
+        if (changedProperties.has('open') && this.model.state.isOpen() !== this.open) {
+            this.suppressEvents = true;
+            // Temporarily clear disabled so the headless action is not rejected.
+            // Programmatic property changes must always be honored.
+            const wasDisabled = this.model.state.isDisabled();
+            if (wasDisabled)
+                this.model.actions.setDisabled(false);
+            if (this.open) {
+                this.model.actions.open();
+            }
+            else {
+                this.model.actions.close();
+            }
+            if (wasDisabled)
+                this.model.actions.setDisabled(true);
+            // Sync back from headless
+            this.open = this.model.state.isOpen();
+            this.suppressEvents = false;
+        }
+    }
+    createModel() {
+        return createDisclosure({
+            idBase: this.idBase,
+            isOpen: this.open,
+            isDisabled: this.disabled,
+            name: this.name || undefined,
+        });
+    }
+    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,
+        }));
+    }
+    /**
+     * Sync host `open` property from headless state after a user interaction.
+     * Fires input/change events only when suppressEvents is false and state actually changed.
+     */
+    syncFromModel(previousOpen) {
+        const nextOpen = this.model.state.isOpen();
+        this.open = nextOpen;
+        if (this.suppressEvents)
+            return;
+        if (previousOpen === nextOpen)
+            return;
+        const detail = { open: nextOpen };
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    /**
+     * Sync all grouped disclosures that may have been closed by headless group logic.
+     * Scans sibling cv-disclosure elements sharing the same name and updates their open property.
+     */
+    syncGroupedSiblings() {
+        if (!this.name)
+            return;
+        const siblings = document.querySelectorAll(`cv-disclosure[name="${this.name}"]`);
+        for (const sibling of siblings) {
+            if (sibling === this)
+                continue;
+            const headlessOpen = sibling.model.state.isOpen();
+            if (sibling.open !== headlessOpen) {
+                sibling.open = headlessOpen;
+            }
+        }
+    }
+    // --- Imperative API ---
+    /** Opens the panel programmatically without firing events. */
+    show() {
+        this.suppressEvents = true;
+        this.model.actions.open();
+        this.open = this.model.state.isOpen();
+        this.suppressEvents = false;
+    }
+    /** Closes the panel programmatically without firing events. */
+    hide() {
+        this.suppressEvents = true;
+        this.model.actions.close();
+        this.open = this.model.state.isOpen();
+        this.suppressEvents = false;
+    }
+    // --- Event handlers (user interaction) ---
+    handleTriggerClick() {
+        const previousOpen = this.model.state.isOpen();
+        this.model.contracts.getTriggerProps().onClick();
+        this.syncFromModel(previousOpen);
+        this.syncGroupedSiblings();
+    }
+    handleTriggerKeyDown(event) {
+        const previousOpen = this.model.state.isOpen();
+        this.model.contracts.getTriggerProps().onKeyDown(event);
+        this.syncFromModel(previousOpen);
+        this.syncGroupedSiblings();
+    }
+    render() {
+        const triggerProps = this.model.contracts.getTriggerProps();
+        const panelProps = this.model.contracts.getPanelProps();
+        return html `
+      <div part="base">
+        <div
+          id=${triggerProps.id}
+          role=${triggerProps.role}
+          tabindex=${triggerProps.tabindex}
+          aria-expanded=${triggerProps['aria-expanded']}
+          aria-controls=${triggerProps['aria-controls']}
+          aria-disabled=${triggerProps['aria-disabled'] ?? nothing}
+          part="trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+        >
+          <slot name="trigger"></slot>
+          <span part="trigger-icon" aria-hidden="true">&#x25B6;</span>
+        </div>
+
+        <div
+          id=${panelProps.id}
+          aria-labelledby=${panelProps['aria-labelledby']}
+          ?hidden=${panelProps.hidden}
+          part="panel"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,102 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVDrawerEventDetail {
+    open: boolean;
+}
+export declare class CVDrawer extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        modal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        closeOnEscape: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsidePointer: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsideFocus: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        initialFocusId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        noHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    modal: boolean;
+    placement: 'start' | 'end' | 'top' | 'bottom';
+    type: 'dialog' | 'alertdialog';
+    closeOnEscape: boolean;
+    closeOnOutsidePointer: boolean;
+    closeOnOutsideFocus: boolean;
+    initialFocusId: string;
+    noHeader: boolean;
+    private readonly idBase;
+    private model;
+    private lockScrollApplied;
+    private previousBodyOverflow;
+    private suppressLifecycleFromUpdate;
+    private lifecycleToken;
+    private overlayVisible;
+    private renderState;
+    private openAnimationFrame;
+    private closeAnimationTimeout;
+    private shouldAnimatePresence;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private clearAnimationQueue;
+    private startOpenAnimation;
+    private startCloseAnimation;
+    private syncRenderedState;
+    private getTransitionDuration;
+    private readTransitionDuration;
+    private parseTimeValues;
+    private createModel;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private dispatchLifecycleEvent;
+    private dispatchLifecycleTransition;
+    private applyInteractionResult;
+    private syncOutsideFocusListener;
+    private syncScrollLock;
+    private releaseScrollLock;
+    private focusInitialTarget;
+    private handleDocumentFocusIn;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleOverlayPointerDown;
+    private handlePanelKeyDown;
+    private handleHeaderCloseClick;
+    protected render(): import("lit").TemplateResult<1>;
+}