@chromvoid/uikit 0.1.0

package/dist/components/cv-spinbutton.js

@@ -0,0 +1,486 @@
+import { createSpinbutton } from '@chromvoid/headless-ui/spinbutton';
+import { css, html, nothing } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+const spinbuttonKeysToPrevent = new Set(['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End']);
+const EPSILON = 1e-9;
+let cvSpinbuttonNonce = 0;
+export class CVSpinbutton extends FormAssociatedReatomElement {
+    static elementName = 'cv-spinbutton';
+    static get properties() {
+        return {
+            name: { type: String, reflect: true },
+            value: { type: Number, reflect: true },
+            min: { type: Number, reflect: true },
+            max: { type: Number, reflect: true },
+            step: { type: Number, reflect: true },
+            largeStep: { type: Number, attribute: 'large-step', reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            readOnly: { type: Boolean, attribute: 'read-only', reflect: true },
+            required: { type: Boolean, reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+            ariaDescribedBy: { type: String, attribute: 'aria-describedby' },
+        };
+    }
+    idBase = `cv-spinbutton-${++cvSpinbuttonNonce}`;
+    model;
+    customValidityMessage = '';
+    draftValue = null;
+    initialValueSnapshot = 0;
+    hasInitialValueSnapshot = false;
+    constructor() {
+        super();
+        this.name = '';
+        this.value = 0;
+        this.min = null;
+        this.max = null;
+        this.step = 1;
+        this.largeStep = 10;
+        this.disabled = false;
+        this.readOnly = false;
+        this.required = false;
+        this.ariaLabel = '';
+        this.ariaLabelledBy = '';
+        this.ariaDescribedBy = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+      }
+
+      [part='base'] {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: var(--cv-space-1, 4px);
+        align-items: center;
+        min-inline-size: 130px;
+        padding: var(--cv-space-1, 4px);
+        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='input'] {
+        inline-size: 100%;
+        min-inline-size: 0;
+        border: 0;
+        outline: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        line-height: 1.2;
+        font-variant-numeric: tabular-nums;
+        padding: 0;
+      }
+
+      [part='input']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='actions'] {
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        gap: 1px;
+      }
+
+      [part='increment'],
+      [part='decrement'] {
+        min-inline-size: 26px;
+        min-block-size: 16px;
+        border-radius: 4px;
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface-elevated, #1d2432);
+        color: var(--cv-color-text, #e8ecf6);
+        padding: 0;
+        line-height: 1;
+      }
+
+      :host([disabled]) [part='base'],
+      :host([read-only]) [part='base'] {
+        opacity: 0.6;
+      }
+
+      :host([disabled]) [part='increment'],
+      :host([disabled]) [part='decrement'],
+      :host([read-only]) [part='increment'],
+      :host([read-only]) [part='decrement'] {
+        cursor: not-allowed;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasInitialValueSnapshot) {
+            this.initialValueSnapshot = this.value;
+            this.hasInitialValueSnapshot = true;
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('step') ||
+            changedProperties.has('largeStep') ||
+            changedProperties.has('ariaLabel') ||
+            changedProperties.has('ariaLabelledBy') ||
+            changedProperties.has('ariaDescribedBy')) {
+            this.model = this.createModel();
+            this.draftValue = null;
+            this.syncValueFromModel();
+            return;
+        }
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.isEffectivelyDisabled());
+        }
+        if (changedProperties.has('readOnly')) {
+            this.model.actions.setReadOnly(this.readOnly);
+        }
+        if (changedProperties.has('value') && this.model.state.value() !== this.value) {
+            const previousValue = this.model.state.value();
+            this.model.actions.setValue(this.value);
+            this.syncFromModelAndMaybeEmit(previousValue, false);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('readOnly') ||
+            changedProperties.has('required') ||
+            changedProperties.has('name') ||
+            changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('step') ||
+            changedProperties.has('largeStep')) {
+            this.syncFormAssociatedState();
+        }
+    }
+    onFormDisabledChanged(_disabled) {
+        this.model.actions.setDisabled(this.isEffectivelyDisabled());
+    }
+    onFormReset() {
+        this.customValidityMessage = '';
+        this.draftValue = null;
+        this.setValue(this.initialValueSnapshot);
+    }
+    onFormStateRestore(state) {
+        if (typeof state !== 'string')
+            return;
+        const parsed = Number(state);
+        if (!Number.isFinite(parsed))
+            return;
+        this.setValue(parsed);
+    }
+    get type() {
+        return 'cv-spinbutton';
+    }
+    setCustomValidity(message) {
+        this.customValidityMessage = message;
+        this.syncFormAssociatedState();
+    }
+    stepUp(times = 1) {
+        this.applyProgrammaticMutation(() => {
+            for (let i = 0; i < this.normalizeTimes(times); i++) {
+                this.model.actions.increment();
+            }
+        });
+    }
+    stepDown(times = 1) {
+        this.applyProgrammaticMutation(() => {
+            for (let i = 0; i < this.normalizeTimes(times); i++) {
+                this.model.actions.decrement();
+            }
+        });
+    }
+    pageUp(times = 1) {
+        this.applyProgrammaticMutation(() => {
+            for (let i = 0; i < this.normalizeTimes(times); i++) {
+                this.model.actions.incrementLarge();
+            }
+        });
+    }
+    pageDown(times = 1) {
+        this.applyProgrammaticMutation(() => {
+            for (let i = 0; i < this.normalizeTimes(times); i++) {
+                this.model.actions.decrementLarge();
+            }
+        });
+    }
+    setValue(value) {
+        this.applyProgrammaticMutation(() => {
+            this.model.actions.setValue(value);
+        });
+    }
+    getValue() {
+        return this.model.state.value();
+    }
+    setRange(min, max) {
+        this.min = min;
+        this.max = max;
+    }
+    focus(options) {
+        if (this.inputElement) {
+            this.inputElement.focus(options);
+            return;
+        }
+        super.focus(options);
+    }
+    select() {
+        this.inputElement?.select();
+    }
+    get inputElement() {
+        return this.shadowRoot?.querySelector('[part="input"]');
+    }
+    isEffectivelyDisabled() {
+        return this.disabled || this.formDisabled;
+    }
+    isFormAssociatedDisabled() {
+        return this.isEffectivelyDisabled();
+    }
+    getFormAssociatedValue() {
+        return String(this.model.state.value());
+    }
+    getFormAssociatedValidity() {
+        const validity = this.getValidityState();
+        if (!this.hasValidityErrors(validity.flags)) {
+            return { flags: {} };
+        }
+        return {
+            flags: validity.flags,
+            message: validity.message,
+            anchor: this.inputElement ?? undefined,
+        };
+    }
+    toFiniteOrUndefined(value) {
+        return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+    }
+    createModel() {
+        return createSpinbutton({
+            idBase: this.idBase,
+            value: this.value,
+            min: this.toFiniteOrUndefined(this.min),
+            max: this.toFiniteOrUndefined(this.max),
+            step: this.step,
+            largeStep: this.largeStep,
+            isDisabled: this.isEffectivelyDisabled(),
+            isReadOnly: this.readOnly,
+            ariaLabel: this.ariaLabel || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+            ariaDescribedBy: this.ariaDescribedBy || 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,
+        }));
+    }
+    syncValueFromModel() {
+        const nextValue = this.model.state.value();
+        if (this.value !== nextValue) {
+            this.value = nextValue;
+        }
+    }
+    syncFromModelAndMaybeEmit(previousValue, emitEvents) {
+        const nextValue = this.model.state.value();
+        this.value = nextValue;
+        this.syncFormAssociatedState();
+        if (!emitEvents || nextValue === previousValue)
+            return;
+        const detail = { value: nextValue };
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    applyProgrammaticMutation(mutate) {
+        const previousValue = this.model.state.value();
+        mutate();
+        this.draftValue = null;
+        this.syncFromModelAndMaybeEmit(previousValue, false);
+    }
+    normalizeTimes(value) {
+        if (!Number.isFinite(value))
+            return 1;
+        const normalized = Math.floor(Math.abs(value));
+        return Math.max(normalized, 1);
+    }
+    commitDraftFromInput(emitEvents) {
+        const source = this.draftValue ?? this.inputElement?.value ?? String(this.model.state.value());
+        const trimmed = source.trim();
+        if (trimmed === '') {
+            this.draftValue = null;
+            this.syncValueFromModel();
+            this.syncFormAssociatedState();
+            return;
+        }
+        const parsed = Number(trimmed);
+        if (!Number.isFinite(parsed)) {
+            this.draftValue = null;
+            this.syncValueFromModel();
+            this.syncFormAssociatedState();
+            return;
+        }
+        const previousValue = this.model.state.value();
+        this.model.actions.setValue(parsed);
+        this.draftValue = null;
+        this.syncFromModelAndMaybeEmit(previousValue, emitEvents);
+    }
+    hasValidityErrors(flags) {
+        return (flags.customError === true ||
+            flags.valueMissing === true ||
+            flags.rangeUnderflow === true ||
+            flags.rangeOverflow === true ||
+            flags.stepMismatch === true);
+    }
+    getValidityState() {
+        const value = this.model.state.value();
+        const min = this.toFiniteOrUndefined(this.min);
+        const max = this.toFiniteOrUndefined(this.max);
+        const step = Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
+        const anchor = min ?? 0;
+        const flags = {};
+        if (this.customValidityMessage) {
+            flags.customError = true;
+        }
+        if (this.required && !Number.isFinite(value)) {
+            flags.valueMissing = true;
+        }
+        if (min != null && value < min - EPSILON) {
+            flags.rangeUnderflow = true;
+        }
+        if (max != null && value > max + EPSILON) {
+            flags.rangeOverflow = true;
+        }
+        const offset = (value - anchor) / step;
+        if (Math.abs(offset - Math.round(offset)) > EPSILON) {
+            flags.stepMismatch = true;
+        }
+        let message = '';
+        if (flags.customError) {
+            message = this.customValidityMessage;
+        }
+        else if (flags.valueMissing) {
+            message = 'Please fill out this field.';
+        }
+        else if (flags.rangeUnderflow) {
+            message = `Value must be greater than or equal to ${min}.`;
+        }
+        else if (flags.rangeOverflow) {
+            message = `Value must be less than or equal to ${max}.`;
+        }
+        else if (flags.stepMismatch) {
+            message = `Value must align with step ${step}.`;
+        }
+        return { flags, message };
+    }
+    handleInput(event) {
+        if (this.readOnly || this.isEffectivelyDisabled())
+            return;
+        const target = event.currentTarget;
+        this.draftValue = target?.value ?? '';
+        this.syncFormAssociatedState();
+    }
+    handleInputBlur() {
+        this.commitDraftFromInput(true);
+    }
+    handleSpinbuttonKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitDraftFromInput(true);
+            return;
+        }
+        if (!spinbuttonKeysToPrevent.has(event.key))
+            return;
+        event.preventDefault();
+        const previousValue = this.model.state.value();
+        this.model.contracts.getSpinbuttonProps().onKeyDown(event);
+        this.draftValue = null;
+        this.syncFromModelAndMaybeEmit(previousValue, true);
+    }
+    handleIncrementClick() {
+        const previousValue = this.model.state.value();
+        this.model.contracts.getIncrementButtonProps().onClick();
+        this.draftValue = null;
+        this.syncFromModelAndMaybeEmit(previousValue, true);
+    }
+    handleDecrementClick() {
+        const previousValue = this.model.state.value();
+        this.model.contracts.getDecrementButtonProps().onClick();
+        this.draftValue = null;
+        this.syncFromModelAndMaybeEmit(previousValue, true);
+    }
+    render() {
+        const spinbuttonProps = this.model.contracts.getSpinbuttonProps();
+        const incrementProps = this.model.contracts.getIncrementButtonProps();
+        const decrementProps = this.model.contracts.getDecrementButtonProps();
+        const displayValue = this.draftValue ?? String(this.model.state.value());
+        return html `
+      <div part="base">
+        <input
+          id=${spinbuttonProps.id}
+          role=${spinbuttonProps.role}
+          tabindex=${spinbuttonProps.tabindex}
+          aria-valuenow=${spinbuttonProps['aria-valuenow']}
+          aria-valuemin=${spinbuttonProps['aria-valuemin'] ?? nothing}
+          aria-valuemax=${spinbuttonProps['aria-valuemax'] ?? nothing}
+          aria-valuetext=${spinbuttonProps['aria-valuetext'] ?? nothing}
+          aria-disabled=${spinbuttonProps['aria-disabled'] ?? nothing}
+          aria-readonly=${spinbuttonProps['aria-readonly'] ?? nothing}
+          aria-label=${spinbuttonProps['aria-label'] ?? nothing}
+          aria-labelledby=${spinbuttonProps['aria-labelledby'] ?? nothing}
+          aria-describedby=${spinbuttonProps['aria-describedby'] ?? nothing}
+          ?disabled=${this.isEffectivelyDisabled()}
+          ?readonly=${this.readOnly}
+          inputmode="decimal"
+          part="input"
+          .value=${displayValue}
+          @input=${this.handleInput}
+          @blur=${this.handleInputBlur}
+          @keydown=${this.handleSpinbuttonKeyDown}
+        />
+        <div part="actions">
+          <button
+            id=${incrementProps.id}
+            tabindex=${incrementProps.tabindex}
+            aria-label=${incrementProps['aria-label']}
+            aria-disabled=${incrementProps['aria-disabled'] ?? nothing}
+            ?disabled=${incrementProps['aria-disabled'] === 'true'}
+            part="increment"
+            type="button"
+            @click=${this.handleIncrementClick}
+          >
+            +
+          </button>
+          <button
+            id=${decrementProps.id}
+            tabindex=${decrementProps.tabindex}
+            aria-label=${decrementProps['aria-label']}
+            aria-disabled=${decrementProps['aria-disabled'] ?? nothing}
+            ?disabled=${decrementProps['aria-disabled'] === 'true'}
+            part="decrement"
+            type="button"
+            @click=${this.handleDecrementClick}
+          >
+            -
+          </button>
+        </div>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVSpinner extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    protected render(): import("lit").TemplateResult<2>;
+}

package/dist/components/cv-spinner.js

@@ -0,0 +1,95 @@
+import { createSpinner } from '@chromvoid/headless-ui/spinner';
+import { css, svg } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+const RADIUS = 45;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+export class CVSpinner extends ReatomLitElement {
+    static elementName = 'cv-spinner';
+    static get properties() {
+        return {
+            label: { type: String, reflect: true },
+        };
+    }
+    model;
+    constructor() {
+        super();
+        this.label = 'Loading';
+        this.model = createSpinner({ label: this.label });
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        inline-size: 1em;
+        block-size: 1em;
+        line-height: 0;
+      }
+
+      [part='base'] {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+
+      [part='track'] {
+        fill: none;
+        stroke: var(--cv-spinner-track-color, var(--cv-color-border, #2a3245));
+        stroke-width: var(--cv-spinner-track-width, 4px);
+      }
+
+      [part='indicator'] {
+        fill: none;
+        stroke: var(--cv-spinner-indicator-color, var(--cv-color-primary, #65d7ff));
+        stroke-width: var(--cv-spinner-track-width, 4px);
+        stroke-linecap: round;
+        stroke-dasharray: ${CIRCUMFERENCE};
+        stroke-dashoffset: ${CIRCUMFERENCE * 0.75};
+        transform-origin: 50% 50%;
+        animation: cv-spinner-rotate var(--cv-spinner-speed, 600ms) linear infinite;
+      }
+
+      @keyframes cv-spinner-rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('label')) {
+            this.model.actions.setLabel(this.label);
+        }
+    }
+    render() {
+        const props = this.model.contracts.getSpinnerProps();
+        return svg `
+      <svg
+        part="base"
+        viewBox="0 0 100 100"
+        role=${props.role}
+        aria-label=${props['aria-label']}
+      >
+        <circle
+          part="track"
+          cx="50"
+          cy="50"
+          r="${RADIUS}"
+        ></circle>
+        <circle
+          part="indicator"
+          cx="50"
+          cy="50"
+          r="${RADIUS}"
+        ></circle>
+      </svg>
+    `;
+    }
+}

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

@@ -0,0 +1,81 @@
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+import type { FormAssociatedValidity } from '../form-associated/withFormAssociated.js';
+type CVSwitchSize = 'small' | 'medium' | 'large';
+export interface CVSwitchCheckedDetail {
+    checked: boolean;
+}
+export type CVSwitchInputEvent = CustomEvent<CVSwitchCheckedDetail>;
+export type CVSwitchChangeEvent = CustomEvent<CVSwitchCheckedDetail>;
+export interface CVSwitchEventMap {
+    'cv-input': CVSwitchInputEvent;
+    'cv-change': CVSwitchChangeEvent;
+}
+export declare class CVSwitch extends FormAssociatedReatomElement {
+    static elementName: string;
+    static get properties(): {
+        name: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        helpText: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    required: boolean;
+    size: CVSwitchSize;
+    helpText: string;
+    private readonly idBase;
+    private readonly helpTextId;
+    private modelOptions;
+    private model;
+    private _hasSlottedHelpText;
+    private defaultChecked;
+    private didCaptureDefaultChecked;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private get hasHelpText();
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private handleHelpTextSlotChange;
+    private dispatchSwitchEvent;
+    private dispatchInput;
+    private dispatchChange;
+    private syncFromModelAndEmit;
+    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 handleClick;
+    private handleKeyDown;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};