@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,87 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+type CVPopoverPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
+type CVPopoverAnchor = 'trigger' | 'host';
+export declare class CVPopover extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        closeOnEscape: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsidePointer: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnOutsideFocus: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        anchor: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        offset: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        arrow: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    open: boolean;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    closeOnEscape: boolean;
+    closeOnOutsidePointer: boolean;
+    closeOnOutsideFocus: boolean;
+    placement: CVPopoverPlacement;
+    anchor: CVPopoverAnchor;
+    offset: number;
+    arrow: boolean;
+    private readonly idBase;
+    private model;
+    private previousOpen;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private createModel;
+    private buildEventDetail;
+    /**
+     * Dispatches beforetoggle and toggle events and syncs open state from headless.
+     * If beforetoggle is canceled on open, reverts headless state.
+     */
+    private emitToggleEvents;
+    private syncOutsideListeners;
+    private handleDocumentPointerDown;
+    private handleDocumentFocusIn;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleContentKeyDown;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/cv-popover.js

@@ -0,0 +1,373 @@
+import { createPopover } from '@chromvoid/headless-ui/popover';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+const popoverTriggerKeys = new Set(['Enter', ' ', 'Spacebar', 'ArrowDown']);
+const supportsNativePopover = typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype.showPopover === 'function';
+let cvPopoverNonce = 0;
+export class CVPopover extends ReatomLitElement {
+    static elementName = 'cv-popover';
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+            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 },
+            placement: { type: String, reflect: true },
+            anchor: { type: String, reflect: true },
+            offset: { type: Number, reflect: true },
+            arrow: { type: Boolean, reflect: true },
+        };
+    }
+    idBase = `cv-popover-${++cvPopoverNonce}`;
+    model;
+    previousOpen = false;
+    constructor() {
+        super();
+        this.open = false;
+        this.ariaLabel = '';
+        this.ariaLabelledBy = '';
+        this.closeOnEscape = true;
+        this.closeOnOutsidePointer = true;
+        this.closeOnOutsideFocus = true;
+        this.placement = 'bottom-start';
+        this.anchor = 'trigger';
+        this.offset = 4;
+        this.arrow = false;
+        this.model = this.createModel();
+        this.previousOpen = this.model.state.isOpen();
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+      }
+
+      [part='base'] {
+        position: relative;
+        display: inline-grid;
+        gap: var(--cv-space-1, 4px);
+      }
+
+      [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='content'] {
+        position: absolute;
+        inset-inline-start: 0;
+        inset-block-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        z-index: var(--cv-popover-z-index, 20);
+        min-inline-size: var(--cv-popover-min-inline-size, max(220px, 100%));
+        max-inline-size: var(--cv-popover-max-inline-size, min(560px, calc(100vw - 32px)));
+        display: grid;
+        gap: var(--cv-space-2, 8px);
+        padding: var(--cv-popover-padding, var(--cv-space-3, 12px));
+        border-radius: var(--cv-popover-border-radius, var(--cv-radius-md, 10px));
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface-elevated, #1d2432);
+        box-shadow: var(--cv-shadow-1, 0 2px 8px rgba(0, 0, 0, 0.24));
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      [part='content'][hidden] {
+        display: none;
+      }
+
+      [part='content']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='content'][data-placement='bottom'] {
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+      }
+
+      [part='content'][data-placement='bottom-end'] {
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+      }
+
+      [part='content'][data-placement='top-start'] {
+        inset-block-start: auto;
+        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+      }
+
+      [part='content'][data-placement='top'] {
+        inset-inline-start: 50%;
+        inset-block-start: auto;
+        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        transform: translateX(-50%);
+      }
+
+      [part='content'][data-placement='top-end'] {
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+        inset-block-start: auto;
+        inset-block-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+      }
+
+      [part='content'][data-placement='right-start'] {
+        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: 0;
+      }
+
+      [part='content'][data-placement='right'] {
+        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+      }
+
+      [part='content'][data-placement='right-end'] {
+        inset-inline-start: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: auto;
+        inset-block-end: 0;
+      }
+
+      [part='content'][data-placement='left-start'] {
+        inset-inline-start: auto;
+        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: 0;
+      }
+
+      [part='content'][data-placement='left'] {
+        inset-inline-start: auto;
+        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+      }
+
+      [part='content'][data-placement='left-end'] {
+        inset-inline-start: auto;
+        inset-inline-end: calc(100% + var(--cv-popover-offset, var(--cv-space-1, 4px)));
+        inset-block-start: auto;
+        inset-block-end: 0;
+      }
+
+      [part='content'][data-anchor='host'] {
+        min-inline-size: min(560px, calc(100vw - 32px));
+      }
+
+      [part='arrow'] {
+        position: absolute;
+        display: block;
+        inline-size: var(--cv-popover-arrow-size, 8px);
+        block-size: var(--cv-popover-arrow-size, 8px);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncOutsideListeners();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.syncOutsideListeners(true);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('ariaLabel') ||
+            changedProperties.has('ariaLabelledBy') ||
+            changedProperties.has('closeOnEscape') ||
+            changedProperties.has('closeOnOutsidePointer') ||
+            changedProperties.has('closeOnOutsideFocus')) {
+            const wasOpen = this.model.state.isOpen();
+            this.model = this.createModel(wasOpen);
+            this.previousOpen = wasOpen;
+        }
+        if (changedProperties.has('open') && this.model.state.isOpen() !== this.open) {
+            if (this.open) {
+                this.model.actions.open('programmatic');
+            }
+            else {
+                this.model.actions.close('programmatic');
+            }
+            this.open = this.model.state.isOpen();
+            this.previousOpen = this.open;
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.syncOutsideListeners();
+    }
+    createModel(initialOpen = this.open) {
+        return createPopover({
+            idBase: this.idBase,
+            initialOpen,
+            ariaLabel: this.ariaLabel || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+            closeOnEscape: this.closeOnEscape,
+            closeOnOutsidePointer: this.closeOnOutsidePointer,
+            closeOnOutsideFocus: this.closeOnOutsideFocus,
+            useNativePopover: supportsNativePopover,
+        });
+    }
+    buildEventDetail() {
+        return {
+            open: this.model.state.isOpen(),
+            openedBy: this.model.state.openedBy(),
+            dismissIntent: this.model.state.lastDismissIntent(),
+        };
+    }
+    /**
+     * Dispatches beforetoggle and toggle events and syncs open state from headless.
+     * If beforetoggle is canceled on open, reverts headless state.
+     */
+    emitToggleEvents() {
+        const isOpen = this.model.state.isOpen();
+        // Only emit if state actually changed
+        if (isOpen === this.previousOpen)
+            return;
+        const detail = this.buildEventDetail();
+        // Dispatch beforetoggle (cancelable only on open)
+        const cancelable = detail.open;
+        const beforeToggleEvent = new CustomEvent('beforetoggle', {
+            detail,
+            bubbles: true,
+            composed: true,
+            cancelable,
+        });
+        this.dispatchEvent(beforeToggleEvent);
+        // If opening was prevented, revert headless state
+        if (cancelable && beforeToggleEvent.defaultPrevented) {
+            this.model.actions.close('programmatic');
+            this.open = false;
+            this.previousOpen = false;
+            return;
+        }
+        // Sync host attribute
+        this.open = isOpen;
+        this.previousOpen = isOpen;
+        // Dispatch toggle (not cancelable)
+        this.dispatchEvent(new CustomEvent('toggle', {
+            detail,
+            bubbles: false,
+            composed: true,
+            cancelable: false,
+        }));
+        // Restore focus if needed
+        if (!isOpen) {
+            const restoreId = this.model.state.restoreTargetId();
+            if (restoreId) {
+                const trigger = this.shadowRoot?.querySelector(`[id="${restoreId}"]`);
+                trigger?.focus();
+            }
+        }
+    }
+    syncOutsideListeners(forceOff = false) {
+        const shouldListen = !forceOff && this.model.state.isOpen();
+        if (shouldListen) {
+            document.addEventListener('pointerdown', this.handleDocumentPointerDown);
+            document.addEventListener('focusin', this.handleDocumentFocusIn);
+        }
+        else {
+            document.removeEventListener('pointerdown', this.handleDocumentPointerDown);
+            document.removeEventListener('focusin', this.handleDocumentFocusIn);
+        }
+    }
+    handleDocumentPointerDown = (event) => {
+        if (!this.model || !this.model.state.isOpen())
+            return;
+        const path = event.composedPath();
+        if (path.includes(this))
+            return;
+        this.model.contracts.getContentProps().onPointerDownOutside();
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+    };
+    handleDocumentFocusIn = (event) => {
+        if (!this.model || !this.model.state.isOpen())
+            return;
+        const path = event.composedPath();
+        if (path.includes(this))
+            return;
+        this.model.contracts.getContentProps().onFocusOutside();
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+    };
+    handleTriggerClick() {
+        this.model.contracts.getTriggerProps().onClick();
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+    }
+    handleTriggerKeyDown(event) {
+        if (popoverTriggerKeys.has(event.key)) {
+            event.preventDefault();
+        }
+        this.model.contracts.getTriggerProps().onKeyDown({ key: event.key });
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+    }
+    handleContentKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+        }
+        this.model.contracts.getContentProps().onKeyDown({ key: event.key });
+        this.emitToggleEvents();
+        this.syncOutsideListeners();
+    }
+    render() {
+        const triggerProps = this.model.contracts.getTriggerProps();
+        const contentProps = this.model.contracts.getContentProps();
+        return html `
+      <div part="base">
+        <button
+          id=${triggerProps.id}
+          role=${triggerProps.role}
+          tabindex=${triggerProps.tabindex}
+          aria-haspopup=${triggerProps['aria-haspopup']}
+          aria-expanded=${triggerProps['aria-expanded']}
+          aria-controls=${triggerProps['aria-controls']}
+          part="trigger"
+          type="button"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+        >
+          <slot name="trigger">Open popover</slot>
+        </button>
+
+        <div
+          id=${contentProps.id}
+          role=${contentProps.role}
+          tabindex=${contentProps.tabindex}
+          aria-modal=${contentProps['aria-modal']}
+          aria-label=${contentProps['aria-label'] ?? nothing}
+          aria-labelledby=${contentProps['aria-labelledby'] ?? nothing}
+          ?hidden=${contentProps.hidden}
+          data-placement=${this.placement}
+          data-anchor=${this.anchor}
+          style=${`--cv-popover-offset:${this.offset}px;`}
+          part="content"
+          @keydown=${this.handleContentKeyDown}
+        >
+          <slot></slot>
+          ${this.arrow
+            ? html `
+                  <span part="arrow"><slot name="arrow"></slot></span>
+                `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-progress-ring.d.ts

@@ -0,0 +1,45 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVProgressRing extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        indeterminate: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valueText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: number;
+    min: number;
+    max: number;
+    indeterminate: boolean;
+    valueText: string;
+    ariaLabel: string;
+    private readonly idBase;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-progress-ring.js

@@ -0,0 +1,169 @@
+import { createProgress } from '@chromvoid/headless-ui/progress';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvProgressRingNonce = 0;
+const RADIUS = 45;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+export class CVProgressRing extends ReatomLitElement {
+    static elementName = 'cv-progress-ring';
+    static get properties() {
+        return {
+            value: { type: Number, reflect: true },
+            min: { type: Number, reflect: true },
+            max: { type: Number, reflect: true },
+            indeterminate: { type: Boolean, reflect: true },
+            valueText: { type: String, attribute: 'value-text' },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-progress-ring-${++cvProgressRingNonce}`;
+    model;
+    constructor() {
+        super();
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.indeterminate = false;
+        this.valueText = '';
+        this.ariaLabel = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        inline-size: var(--cv-progress-ring-size, 80px);
+        block-size: var(--cv-progress-ring-size, 80px);
+      }
+
+      [part='base'] {
+        position: relative;
+        inline-size: 100%;
+        block-size: 100%;
+      }
+
+      [part='svg'] {
+        inline-size: 100%;
+        block-size: 100%;
+        transform: rotate(-90deg);
+      }
+
+      [part='track'] {
+        fill: none;
+        stroke: var(--cv-progress-ring-track-color, var(--cv-color-surface, #141923));
+        stroke-width: var(--cv-progress-ring-track-width, 4px);
+      }
+
+      [part='indicator'] {
+        fill: none;
+        stroke: var(--cv-progress-ring-indicator-color, var(--cv-color-primary, #65d7ff));
+        stroke-width: var(--cv-progress-ring-indicator-width, 4px);
+        stroke-linecap: round;
+        transition: stroke-dashoffset var(--cv-duration-normal, 220ms) var(--cv-easing-standard, ease);
+      }
+
+      [part='label'] {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--cv-progress-ring-label-color, var(--cv-color-text, #e8ecf6));
+      }
+
+      :host([indeterminate]) [part='svg'] {
+        animation: cv-progress-ring-spin 1.15s linear infinite;
+      }
+
+      :host([indeterminate]) [part='indicator'] {
+        transition: none;
+      }
+
+      :host([data-complete]) [part='indicator'] {
+        stroke: var(--cv-color-success, #6ef7c8);
+      }
+
+      @keyframes cv-progress-ring-spin {
+        0% {
+          transform: rotate(-90deg);
+        }
+        100% {
+          transform: rotate(270deg);
+        }
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('valueText') ||
+            changedProperties.has('ariaLabel')) {
+            this.model = this.createModel();
+            return;
+        }
+        if (changedProperties.has('value') && this.model.state.value() !== this.value) {
+            this.model.actions.setValue(this.value);
+        }
+        if (changedProperties.has('indeterminate')) {
+            this.model.actions.setIndeterminate(this.indeterminate);
+        }
+    }
+    createModel() {
+        return createProgress({
+            idBase: this.idBase,
+            value: this.value,
+            min: this.min,
+            max: this.max,
+            isIndeterminate: this.indeterminate,
+            valueText: this.valueText || undefined,
+            ariaLabel: this.ariaLabel || undefined,
+        });
+    }
+    render() {
+        const props = this.model.contracts.getProgressProps();
+        const percentage = Math.max(0, Math.min(100, this.model.state.percentage()));
+        const isComplete = this.model.state.isComplete();
+        const isIndeterminate = this.model.state.isIndeterminate();
+        this.toggleAttribute('data-complete', isComplete);
+        const dashoffset = isIndeterminate ? CIRCUMFERENCE * 0.75 : CIRCUMFERENCE * (1 - percentage / 100);
+        return html `
+      <div
+        id=${props.id}
+        role=${props.role}
+        aria-valuenow=${props['aria-valuenow'] ?? nothing}
+        aria-valuemin=${props['aria-valuemin'] ?? nothing}
+        aria-valuemax=${props['aria-valuemax'] ?? nothing}
+        aria-valuetext=${props['aria-valuetext'] ?? nothing}
+        aria-label=${props['aria-label'] ?? nothing}
+        aria-labelledby=${props['aria-labelledby'] ?? nothing}
+        aria-describedby=${props['aria-describedby'] ?? nothing}
+        part="base"
+      >
+        <svg part="svg" viewBox="0 0 100 100">
+          <circle
+            part="track"
+            cx="50"
+            cy="50"
+            r="${RADIUS}"
+          ></circle>
+          <circle
+            part="indicator"
+            cx="50"
+            cy="50"
+            r="${RADIUS}"
+            stroke-dasharray="${CIRCUMFERENCE}"
+            style="stroke-dashoffset: ${dashoffset};"
+          ></circle>
+        </svg>
+        <span part="label"><slot></slot></span>
+      </div>
+    `;
+    }
+}