@chromvoid/uikit 0.1.0

package/dist/components/cv-alert-dialog.js

@@ -0,0 +1,393 @@
+import { createAlertDialog } from '@chromvoid/headless-ui/alert-dialog';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvAlertDialogNonce = 0;
+export class CVAlertDialog extends ReatomLitElement {
+    static elementName = 'cv-alert-dialog';
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            closeOnEscape: { type: Boolean, attribute: 'close-on-escape', reflect: true },
+            closeOnOutsidePointer: { type: Boolean, attribute: 'close-on-outside-pointer', reflect: true },
+            closeOnOutsideFocus: { type: Boolean, attribute: 'close-on-outside-focus', reflect: true },
+            closeOnAction: { type: Boolean, attribute: 'close-on-action', reflect: true },
+            initialFocusId: { type: String, attribute: 'initial-focus-id' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+            ariaDescribedBy: { type: String, attribute: 'aria-describedby' },
+        };
+    }
+    idBase = `cv-alert-dialog-${++cvAlertDialogNonce}`;
+    model;
+    lockScrollApplied = false;
+    previousBodyOverflow = '';
+    constructor() {
+        super();
+        this.open = false;
+        this.closeOnEscape = true;
+        this.closeOnOutsidePointer = true;
+        this.closeOnOutsideFocus = true;
+        this.closeOnAction = true;
+        this.initialFocusId = '';
+        this.ariaLabelledBy = '';
+        this.ariaDescribedBy = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+      }
+
+      [part='trigger'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        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);
+      }
+
+      [part='trigger']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='overlay'] {
+        position: fixed;
+        inset: 0;
+        z-index: 45;
+        display: grid;
+        place-items: center;
+        background: color-mix(in oklab, black 62%, transparent);
+        padding: var(--cv-space-4, 16px);
+      }
+
+      [part='overlay'][hidden] {
+        display: none;
+      }
+
+      [part='content'] {
+        inline-size: min(540px, calc(100vw - 32px));
+        display: grid;
+        gap: var(--cv-space-3, 12px);
+        padding: var(--cv-space-4, 16px);
+        border-radius: var(--cv-radius-lg, 14px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface-elevated, #1d2432);
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      [part='content']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='header'] {
+        display: grid;
+        gap: var(--cv-space-1, 4px);
+      }
+
+      [part='title'] {
+        margin: 0;
+        font-size: 1.05rem;
+      }
+
+      [part='description'] {
+        margin: 0;
+        color: var(--cv-color-text-muted, #9aa6bf);
+      }
+
+      [part='footer'] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--cv-space-2, 8px);
+        justify-content: flex-end;
+      }
+
+      [part='cancel'],
+      [part='action'] {
+        min-block-size: 34px;
+        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);
+      }
+
+      [part='action'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7a8a) 52%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7a8a) 22%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncOutsideFocusListener();
+        this.syncScrollLock();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.syncOutsideFocusListener(true);
+        this.releaseScrollLock();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('closeOnEscape') ||
+            changedProperties.has('closeOnOutsidePointer') ||
+            changedProperties.has('closeOnOutsideFocus') ||
+            changedProperties.has('closeOnAction') ||
+            changedProperties.has('initialFocusId') ||
+            changedProperties.has('ariaLabelledBy') ||
+            changedProperties.has('ariaDescribedBy')) {
+            const initialOpen = changedProperties.has('open') ? this.open : this.model.state.isOpen();
+            this.model = this.createModel(initialOpen);
+            return;
+        }
+        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.syncOutsideFocusListener();
+        this.syncScrollLock();
+        if (changedProperties.has('open') && this.open) {
+            this.focusInitialTarget();
+        }
+    }
+    createModel(initialOpen = this.open) {
+        return createAlertDialog({
+            idBase: this.idBase,
+            initialOpen,
+            closeOnEscape: this.closeOnEscape,
+            closeOnOutsidePointer: this.closeOnOutsidePointer,
+            closeOnOutsideFocus: this.closeOnOutsideFocus,
+            closeOnAction: this.closeOnAction,
+            initialFocusId: this.initialFocusId || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+            ariaDescribedBy: this.ariaDescribedBy || undefined,
+        });
+    }
+    captureState() {
+        return {
+            open: this.model.state.isOpen(),
+            restoreTargetId: this.model.state.restoreTargetId(),
+        };
+    }
+    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(previous) {
+        const nextOpen = this.model.state.isOpen();
+        this.open = nextOpen;
+        if (previous.open !== nextOpen) {
+            const detail = { open: nextOpen };
+            this.dispatchInput(detail);
+            this.dispatchChange(detail);
+        }
+        const restoreTargetId = this.model.state.restoreTargetId();
+        if (restoreTargetId && previous.restoreTargetId !== restoreTargetId) {
+            const trigger = this.shadowRoot?.querySelector(`[id="${restoreTargetId}"]`);
+            trigger?.focus();
+        }
+    }
+    syncOutsideFocusListener(forceOff = false) {
+        const shouldListen = !forceOff && this.open;
+        if (shouldListen) {
+            document.addEventListener('focusin', this.handleDocumentFocusIn);
+        }
+        else {
+            document.removeEventListener('focusin', this.handleDocumentFocusIn);
+        }
+    }
+    syncScrollLock() {
+        if (!this.open) {
+            this.releaseScrollLock();
+            return;
+        }
+        if (this.lockScrollApplied)
+            return;
+        this.previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.lockScrollApplied = true;
+    }
+    releaseScrollLock() {
+        if (!this.lockScrollApplied)
+            return;
+        document.body.style.overflow = this.previousBodyOverflow;
+        this.lockScrollApplied = false;
+    }
+    focusInitialTarget() {
+        const contentProps = this.model.contracts.getDialogProps();
+        const requestedId = contentProps['data-initial-focus'];
+        if (requestedId) {
+            const explicit = this.querySelector(`#${requestedId}`) ??
+                this.shadowRoot?.querySelector(`#${requestedId}`);
+            if (explicit) {
+                explicit.focus();
+                return;
+            }
+        }
+        const content = this.shadowRoot?.querySelector('[part="content"]');
+        content?.focus();
+    }
+    handleDocumentFocusIn = (event) => {
+        if (!this.open)
+            return;
+        if (event.composedPath().includes(this))
+            return;
+        const previous = this.captureState();
+        this.model.contracts.getOverlayProps().onFocusOutside();
+        this.applyInteractionResult(previous);
+    };
+    handleTriggerClick() {
+        const previous = this.captureState();
+        if (this.open) {
+            this.model.actions.close();
+        }
+        else {
+            this.model.actions.open();
+        }
+        this.applyInteractionResult(previous);
+    }
+    handleTriggerKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.handleTriggerClick();
+        }
+    }
+    handleOverlayPointerDown(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        const previous = this.captureState();
+        this.model.contracts.getOverlayProps().onPointerDownOutside();
+        this.applyInteractionResult(previous);
+    }
+    handleContentKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+        }
+        const previous = this.captureState();
+        this.model.contracts.getDialogProps().onKeyDown({ key: event.key });
+        this.applyInteractionResult(previous);
+    }
+    handleCancelClick() {
+        const previous = this.captureState();
+        this.model.contracts.getCancelButtonProps().onClick();
+        this.applyInteractionResult(previous);
+        this.dispatchEvent(new CustomEvent('cv-cancel', { bubbles: true, composed: true }));
+    }
+    handleActionClick() {
+        const previous = this.captureState();
+        this.model.contracts.getActionButtonProps().onClick();
+        this.applyInteractionResult(previous);
+        this.dispatchEvent(new CustomEvent('cv-action', { bubbles: true, composed: true }));
+    }
+    render() {
+        const dialogProps = this.model.contracts.getDialogProps();
+        const overlayProps = this.model.contracts.getOverlayProps();
+        const titleProps = this.model.contracts.getTitleProps();
+        const descriptionProps = this.model.contracts.getDescriptionProps();
+        const cancelProps = this.model.contracts.getCancelButtonProps();
+        const actionProps = this.model.contracts.getActionButtonProps();
+        return html `
+      <button
+        part="trigger"
+        type="button"
+        aria-haspopup="dialog"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+      >
+        <slot name="trigger">Open alert dialog</slot>
+      </button>
+
+      <div
+        id=${overlayProps.id}
+        ?hidden=${overlayProps.hidden}
+        data-open=${overlayProps['data-open']}
+        part="overlay"
+        @mousedown=${this.handleOverlayPointerDown}
+      >
+        <section
+          id=${dialogProps.id}
+          role=${dialogProps.role}
+          tabindex=${dialogProps.tabindex}
+          aria-modal=${dialogProps['aria-modal']}
+          aria-labelledby=${dialogProps['aria-labelledby']}
+          aria-describedby=${dialogProps['aria-describedby']}
+          data-initial-focus=${dialogProps['data-initial-focus'] ?? nothing}
+          part="content"
+          @keydown=${this.handleContentKeyDown}
+        >
+          <header part="header">
+            <h2 id=${titleProps.id} part="title">
+              <slot name="title">Confirm action</slot>
+            </h2>
+            <p id=${descriptionProps.id} part="description">
+              <slot name="description">This action cannot be undone.</slot>
+            </p>
+          </header>
+
+          <footer part="footer">
+            <button
+              id=${cancelProps.id}
+              role=${cancelProps.role}
+              tabindex=${cancelProps.tabindex}
+              type="button"
+              part="cancel"
+              @click=${this.handleCancelClick}
+            >
+              <slot name="cancel">Cancel</slot>
+            </button>
+
+            <button
+              id=${actionProps.id}
+              role=${actionProps.role}
+              tabindex=${actionProps.tabindex}
+              type="button"
+              part="action"
+              @click=${this.handleActionClick}
+            >
+              <slot name="action">Confirm</slot>
+            </button>
+          </footer>
+        </section>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,48 @@
+import { type AlertAriaLive } from '@chromvoid/headless-ui/alert';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVAlertEventDetail {
+    visible: boolean;
+    message: string;
+}
+export declare class CVAlert extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        durationMs: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLive: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        atomic: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    durationMs: number;
+    ariaLive: AlertAriaLive;
+    atomic: boolean;
+    private readonly idBase;
+    private model;
+    private currentVisible;
+    private currentMessage;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    show(message: string): void;
+    hide(): void;
+    private createModel;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private syncFromModel;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-alert.js

@@ -0,0 +1,156 @@
+import { createAlert } from '@chromvoid/headless-ui/alert';
+import { css, html } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvAlertNonce = 0;
+export class CVAlert extends ReatomLitElement {
+    static elementName = 'cv-alert';
+    static get properties() {
+        return {
+            durationMs: { type: Number, attribute: 'duration-ms', reflect: true },
+            ariaLive: { type: String, attribute: 'aria-live', reflect: true },
+            atomic: { type: Boolean, attribute: 'aria-atomic', reflect: true },
+        };
+    }
+    idBase = `cv-alert-${++cvAlertNonce}`;
+    model;
+    currentVisible = false;
+    currentMessage = '';
+    constructor() {
+        super();
+        this.durationMs = 0;
+        this.ariaLive = 'assertive';
+        this.atomic = true;
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-alert-gap, var(--cv-space-2, 8px));
+        padding: var(--cv-alert-padding-block, var(--cv-space-2, 8px))
+          var(--cv-alert-padding-inline, var(--cv-space-3, 12px));
+        border-radius: var(--cv-alert-radius, var(--cv-radius-sm, 6px));
+        border: 1px solid var(--cv-alert-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-alert-background, var(--cv-color-surface-elevated, #1d2432));
+        color: var(--cv-alert-color, var(--cv-color-text, #e8ecf6));
+        transition:
+          opacity var(--cv-alert-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-alert-transition-easing, var(--cv-easing-standard, ease)),
+          transform var(--cv-alert-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-alert-transition-easing, var(--cv-easing-standard, ease));
+      }
+
+      :host(:not([visible])) [part='base'] {
+        opacity: 0;
+        transform: translateY(var(--cv-alert-hidden-translate-y, -2px));
+        pointer-events: none;
+      }
+
+      [part='message']:empty {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncFromModel(false);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('durationMs') ||
+            changedProperties.has('ariaLive') ||
+            changedProperties.has('atomic')) {
+            const state = this.captureState();
+            this.model = this.createModel(state.message, state.visible);
+            this.syncFromModel(false);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('durationMs') ||
+            changedProperties.has('ariaLive') ||
+            changedProperties.has('atomic')) {
+            return;
+        }
+        this.syncFromModel(true);
+    }
+    show(message) {
+        this.model.actions.show(message);
+        this.syncFromModel(true);
+    }
+    hide() {
+        this.model.actions.hide();
+        this.syncFromModel(true);
+    }
+    createModel(initialMessage = '', initialVisible = false) {
+        return createAlert({
+            idBase: this.idBase,
+            ariaLive: this.ariaLive,
+            ariaAtomic: this.atomic,
+            durationMs: this.durationMs > 0 ? this.durationMs : undefined,
+            initialMessage,
+            initialVisible,
+        });
+    }
+    captureState() {
+        return {
+            visible: this.model.state.isVisible(),
+            message: this.model.state.message(),
+        };
+    }
+    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,
+        }));
+    }
+    syncFromModel(emitEvents) {
+        const next = this.captureState();
+        const visibleChanged = this.currentVisible !== next.visible;
+        const messageChanged = this.currentMessage !== next.message;
+        this.currentVisible = next.visible;
+        this.currentMessage = next.message;
+        this.toggleAttribute('visible', next.visible);
+        if (!emitEvents || (!visibleChanged && !messageChanged))
+            return;
+        this.dispatchInput(next);
+        if (visibleChanged) {
+            this.dispatchChange(next);
+        }
+    }
+    render() {
+        const alertProps = this.model.contracts.getAlertProps();
+        const isVisible = this.model.state.isVisible();
+        const message = this.model.state.message();
+        return html `
+      <div
+        id=${alertProps.id}
+        role=${alertProps.role}
+        aria-live=${alertProps['aria-live']}
+        aria-atomic=${alertProps['aria-atomic']}
+        data-visible=${isVisible ? 'true' : 'false'}
+        part="base"
+      >
+        <div part="message">${message}</div>
+        <slot></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,56 @@
+import { type BadgeVariant, type BadgeSize } from '@chromvoid/headless-ui/badge';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVBadge extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        dot: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pulse: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pill: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dynamic: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        decorative: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    variant: BadgeVariant;
+    size: BadgeSize;
+    dot: boolean;
+    pulse: boolean;
+    pill: boolean;
+    dynamic: boolean;
+    decorative: boolean;
+    _ariaLabel: string | null;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    protected render(): import("lit").TemplateResult<1>;
+}