@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,45 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVProgress 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.js

@@ -0,0 +1,148 @@
+import { createProgress } from '@chromvoid/headless-ui/progress';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvProgressNonce = 0;
+export class CVProgress extends ReatomLitElement {
+    static elementName = 'cv-progress';
+    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-${++cvProgressNonce}`;
+    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: block;
+      }
+
+      [part='base'] {
+        position: relative;
+        inline-size: 100%;
+        block-size: var(--cv-progress-height, 10px);
+        border-radius: 999px;
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-progress-track-color, var(--cv-color-surface, #141923));
+        overflow: hidden;
+      }
+
+      [part='indicator'] {
+        block-size: 100%;
+        inline-size: var(--cv-progress-width, 0%);
+        border-radius: inherit;
+        background: linear-gradient(
+          90deg,
+          var(--cv-progress-indicator-color, var(--cv-color-primary, #65d7ff)) 0%,
+          color-mix(in oklab, var(--cv-progress-indicator-color, var(--cv-color-primary, #65d7ff)) 70%, white)
+            100%
+        );
+        transition: inline-size var(--cv-duration-normal, 220ms) var(--cv-easing-standard, ease);
+        position: relative;
+      }
+
+      [part='label'] {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--cv-progress-label-color, var(--cv-color-text, #e8ecf6));
+      }
+
+      :host([indeterminate]) [part='indicator'] {
+        inline-size: 35%;
+        animation: cv-progress-indeterminate 1.15s linear infinite;
+      }
+
+      :host([data-complete]) [part='indicator'] {
+        background: linear-gradient(
+          90deg,
+          var(--cv-color-success, #6ef7c8) 0%,
+          color-mix(in oklab, var(--cv-color-success, #6ef7c8) 70%, white) 100%
+        );
+      }
+
+      @keyframes cv-progress-indeterminate {
+        0% {
+          transform: translateX(-120%);
+        }
+        100% {
+          transform: translateX(320%);
+        }
+      }
+    `,
+    ];
+    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();
+        this.toggleAttribute('data-complete', isComplete);
+        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"
+      >
+        <div
+          part="indicator"
+          style=${this.indeterminate ? nothing : `--cv-progress-width:${percentage}%;`}
+        ><span part="label"><slot></slot></span></div>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,79 @@
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+import type { FormAssociatedValidity } from '../form-associated/withFormAssociated.js';
+type CVRadioGroupOrientation = 'horizontal' | 'vertical';
+export interface CVRadioGroupEventDetail {
+    value: string | null;
+    activeId: string | null;
+}
+export declare class CVRadioGroup extends FormAssociatedReatomElement {
+    static elementName: string;
+    static get properties(): {
+        name: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    name: string;
+    value: string;
+    orientation: CVRadioGroupOrientation;
+    disabled: boolean;
+    required: boolean;
+    ariaLabel: string;
+    private readonly idBase;
+    private radioRecords;
+    private radioListeners;
+    private model?;
+    private defaultValue;
+    private didCaptureDefaultValue;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getRadioElements;
+    private ensureRadioValue;
+    private resolveConfiguredValue;
+    private rebuildModelFromSlot;
+    private detachRadioListeners;
+    private attachRadioListeners;
+    private syncRadioElements;
+    private focusActiveRadio;
+    private dispatchInput;
+    private dispatchChange;
+    private applyInteractionResult;
+    private handleRadioClick;
+    private handleGroupKeyDown;
+    private handleSlotChange;
+    protected onFormDisabledChanged(_disabled: boolean): void;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null): void;
+    protected isFormAssociatedDisabled(): boolean;
+    protected getFormAssociatedValue(): string | File | FormData | null;
+    protected getFormAssociatedValidity(): FormAssociatedValidity;
+    private isEffectivelyDisabled;
+    private restoreValue;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,398 @@
+import { createRadioGroup } from '@chromvoid/headless-ui/radio-group';
+import { css, html, nothing } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+import { CVRadio } from './cv-radio.js';
+const radioGroupNavigationKeys = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+    ' ',
+    'Spacebar',
+]);
+let cvRadioGroupNonce = 0;
+export class CVRadioGroup extends FormAssociatedReatomElement {
+    static elementName = 'cv-radio-group';
+    static get properties() {
+        return {
+            name: { type: String },
+            value: { type: String, reflect: true },
+            orientation: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-radio-group-${++cvRadioGroupNonce}`;
+    radioRecords = [];
+    radioListeners = new WeakMap();
+    model;
+    defaultValue = '';
+    didCaptureDefaultValue = false;
+    constructor() {
+        super();
+        this.name = '';
+        this.value = '';
+        this.orientation = 'horizontal';
+        this.disabled = false;
+        this.required = false;
+        this.ariaLabel = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        --cv-radio-group-gap: var(--cv-space-2, 8px);
+      }
+
+      [part='base'] {
+        display: inline-flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cv-radio-group-gap);
+        padding: var(--cv-space-1, 4px);
+        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'] {
+        display: inline-grid;
+        justify-items: start;
+      }
+
+      [part='base']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.7;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.model) {
+            this.rebuildModelFromSlot(false, false);
+        }
+        if (!this.didCaptureDefaultValue) {
+            this.defaultValue = this.model?.state.value() ?? '';
+            this.didCaptureDefaultValue = true;
+        }
+        this.syncFormAssociatedState();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachRadioListeners();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('orientation') || changedProperties.has('ariaLabel')) {
+            this.rebuildModelFromSlot(true, false);
+            this.syncFormAssociatedState();
+            return;
+        }
+        if (changedProperties.has('disabled')) {
+            this.model?.actions.setDisabled(this.isEffectivelyDisabled());
+        }
+        if (changedProperties.has('value') && this.model) {
+            const next = this.value.trim();
+            if (next.length === 0) {
+                this.restoreValue(null);
+                this.syncFormAssociatedState();
+                return;
+            }
+            const enabledIds = new Set(this.radioRecords.filter((record) => !record.disabled).map((record) => record.id));
+            if (!enabledIds.has(next)) {
+                this.syncFormAssociatedState();
+                return;
+            }
+            if (this.model.state.value() !== next) {
+                const previousValue = this.model.state.value();
+                const previousActive = this.model.state.activeId();
+                this.model.actions.select(next);
+                this.applyInteractionResult(previousValue, previousActive);
+            }
+        }
+        if (changedProperties.has('value') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('name')) {
+            this.syncFormAssociatedState();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!changedProperties.has('value')) {
+            this.syncRadioElements();
+        }
+        if (changedProperties.has('value') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('name') ||
+            changedProperties.has('orientation') ||
+            changedProperties.has('ariaLabel')) {
+            this.syncFormAssociatedState();
+        }
+    }
+    getRadioElements() {
+        return Array.from(this.children).filter((element) => element.tagName.toLowerCase() === CVRadio.elementName);
+    }
+    ensureRadioValue(radio, index) {
+        const normalized = radio.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `radio-${index + 1}`;
+        radio.value = fallback;
+        return fallback;
+    }
+    resolveConfiguredValue(radios) {
+        const propertyValue = this.value.trim();
+        if (propertyValue.length > 0) {
+            return propertyValue;
+        }
+        for (const [index, radio] of radios.entries()) {
+            if (radio.checked && !radio.disabled) {
+                return this.ensureRadioValue(radio, index);
+            }
+        }
+        return null;
+    }
+    rebuildModelFromSlot(preserveSelection, requestRender = true) {
+        const radios = this.getRadioElements();
+        const configuredValue = this.resolveConfiguredValue(radios);
+        const previousValue = preserveSelection ? (this.model?.state.value() ?? configuredValue) : configuredValue;
+        const previousActive = preserveSelection ? (this.model?.state.activeId() ?? previousValue) : previousValue;
+        this.detachRadioListeners();
+        this.radioRecords = radios.map((element, index) => {
+            const id = this.ensureRadioValue(element, index);
+            const label = element.textContent?.trim() || id;
+            const hasDescription = element.querySelector('[slot="description"]') !== null;
+            return {
+                id,
+                label,
+                disabled: element.disabled,
+                hasDescription,
+                element,
+            };
+        });
+        const enabledIds = new Set(this.radioRecords.filter((record) => !record.disabled).map((record) => record.id));
+        const initialValue = previousValue && enabledIds.has(previousValue) ? previousValue : null;
+        const initialActiveId = previousActive && enabledIds.has(previousActive)
+            ? previousActive
+            : (initialValue ?? this.radioRecords.find((record) => !record.disabled)?.id ?? null);
+        this.model = createRadioGroup({
+            idBase: this.idBase,
+            items: this.radioRecords.map((record) => ({
+                id: record.id,
+                disabled: record.disabled,
+                describedBy: record.hasDescription ? `${this.idBase}-radio-${record.id}-desc` : undefined,
+            })),
+            orientation: this.orientation,
+            isDisabled: this.isEffectivelyDisabled(),
+            ariaLabel: this.ariaLabel || undefined,
+            initialValue,
+            initialActiveId,
+        });
+        this.attachRadioListeners();
+        this.syncRadioElements();
+        this.value = this.model.state.value() ?? '';
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    detachRadioListeners() {
+        for (const record of this.radioRecords) {
+            const listeners = this.radioListeners.get(record.element);
+            if (!listeners)
+                continue;
+            record.element.removeEventListener('click', listeners.click);
+            record.element.removeEventListener('keydown', listeners.keydown);
+            this.radioListeners.delete(record.element);
+        }
+    }
+    attachRadioListeners() {
+        if (!this.model)
+            return;
+        for (const record of this.radioRecords) {
+            const click = () => {
+                this.handleRadioClick(record.id);
+            };
+            const keydown = (event) => {
+                event.stopPropagation();
+                this.handleGroupKeyDown(event);
+            };
+            record.element.addEventListener('click', click);
+            record.element.addEventListener('keydown', keydown);
+            this.radioListeners.set(record.element, { click, keydown });
+        }
+    }
+    syncRadioElements() {
+        if (!this.model)
+            return;
+        for (const record of this.radioRecords) {
+            const props = this.model.contracts.getRadioProps(record.id);
+            record.element.id = props.id;
+            record.element.setAttribute('role', props.role);
+            record.element.setAttribute('tabindex', props.tabindex);
+            record.element.setAttribute('aria-checked', props['aria-checked']);
+            if (props['aria-disabled']) {
+                record.element.setAttribute('aria-disabled', props['aria-disabled']);
+            }
+            else {
+                record.element.removeAttribute('aria-disabled');
+            }
+            if (props['aria-describedby']) {
+                record.element.setAttribute('aria-describedby', props['aria-describedby']);
+            }
+            else {
+                record.element.removeAttribute('aria-describedby');
+            }
+            if (props['data-active'] === 'true') {
+                record.element.setAttribute('data-active', 'true');
+                record.element.active = true;
+            }
+            else {
+                record.element.removeAttribute('data-active');
+                record.element.active = false;
+            }
+            record.element.checked = props['aria-checked'] === 'true';
+            record.element.disabled = props['aria-disabled'] === 'true';
+        }
+    }
+    focusActiveRadio() {
+        if (!this.model)
+            return;
+        const activeId = this.model.state.activeId();
+        if (!activeId)
+            return;
+        const activeRecord = this.radioRecords.find((record) => record.id === activeId);
+        activeRecord?.element.focus();
+    }
+    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(previousValue, previousActive) {
+        if (!this.model)
+            return;
+        this.syncRadioElements();
+        const nextValue = this.model.state.value();
+        const nextActive = this.model.state.activeId();
+        const valueChanged = previousValue !== nextValue;
+        const activeChanged = previousActive !== nextActive;
+        this.value = nextValue ?? '';
+        this.syncFormAssociatedState();
+        if (!valueChanged && !activeChanged)
+            return;
+        const detail = {
+            value: nextValue,
+            activeId: nextActive,
+        };
+        this.dispatchInput(detail);
+        if (valueChanged) {
+            this.dispatchChange(detail);
+        }
+        if (activeChanged) {
+            this.focusActiveRadio();
+        }
+    }
+    handleRadioClick(id) {
+        if (!this.model)
+            return;
+        const previousValue = this.model.state.value();
+        const previousActive = this.model.state.activeId();
+        this.model.contracts.getRadioProps(id).onClick();
+        this.applyInteractionResult(previousValue, previousActive);
+    }
+    handleGroupKeyDown(event) {
+        if (!this.model)
+            return;
+        if (radioGroupNavigationKeys.has(event.key)) {
+            event.preventDefault();
+        }
+        const previousValue = this.model.state.value();
+        const previousActive = this.model.state.activeId();
+        this.model.contracts.getRootProps().onKeyDown(event);
+        this.applyInteractionResult(previousValue, previousActive);
+    }
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    onFormDisabledChanged(_disabled) {
+        this.model?.actions.setDisabled(this.isEffectivelyDisabled());
+    }
+    onFormReset() {
+        this.restoreValue(this.defaultValue || null);
+    }
+    onFormStateRestore(state) {
+        this.restoreValue(typeof state === 'string' ? state : null);
+    }
+    isFormAssociatedDisabled() {
+        return this.isEffectivelyDisabled();
+    }
+    getFormAssociatedValue() {
+        return this.model?.state.value() ?? null;
+    }
+    getFormAssociatedValidity() {
+        if (this.required && !this.model?.state.value()) {
+            return {
+                flags: { valueMissing: true },
+                message: 'Please select an option.',
+            };
+        }
+        return { flags: {} };
+    }
+    isEffectivelyDisabled() {
+        return this.disabled || this.formDisabled;
+    }
+    restoreValue(nextValue) {
+        for (const record of this.radioRecords) {
+            record.element.checked = nextValue !== null && record.id === nextValue;
+        }
+        this.value = nextValue ?? '';
+        this.rebuildModelFromSlot(false, false);
+        this.syncRadioElements();
+        this.syncFormAssociatedState();
+    }
+    render() {
+        const rootProps = this.model?.contracts.getRootProps() ?? {
+            role: 'radiogroup',
+            'aria-label': this.ariaLabel || undefined,
+            'aria-labelledby': undefined,
+            'aria-disabled': this.isEffectivelyDisabled() ? 'true' : undefined,
+            'aria-orientation': this.orientation,
+        };
+        return html `
+      <div
+        role=${rootProps.role}
+        aria-label=${rootProps['aria-label'] ?? nothing}
+        aria-labelledby=${rootProps['aria-labelledby'] ?? nothing}
+        aria-disabled=${rootProps['aria-disabled'] ?? nothing}
+        aria-orientation=${rootProps['aria-orientation']}
+        part="base"
+        @keydown=${this.handleGroupKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+export type CVRadioSize = 'small' | 'medium' | 'large';
+export declare class CVRadio extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    active: boolean;
+    size: CVRadioSize;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}