@chromvoid/uikit 0.1.0

package/dist/components/cv-radio.js

@@ -0,0 +1,123 @@
+import { LitElement, css, html } from 'lit';
+export class CVRadio extends LitElement {
+    static elementName = 'cv-radio';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            checked: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            size: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.checked = false;
+        this.active = false;
+        this.size = 'medium';
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        outline: none;
+        --cv-radio-indicator-size: 20px;
+        --cv-radio-dot-size: 8px;
+        --cv-radio-gap: var(--cv-space-2, 8px);
+      }
+
+      :host([size='small']) {
+        --cv-radio-indicator-size: 16px;
+        --cv-radio-dot-size: 6px;
+      }
+
+      :host([size='large']) {
+        --cv-radio-indicator-size: 24px;
+        --cv-radio-dot-size: 10px;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .radio {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--cv-radio-gap);
+        min-block-size: 32px;
+        padding: 0 var(--cv-space-1, 4px);
+        border-radius: var(--cv-radius-sm, 6px);
+        color: var(--cv-color-text, #e8ecf6);
+        transition: background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      .indicator {
+        inline-size: var(--cv-radio-indicator-size);
+        block-size: var(--cv-radio-indicator-size);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+        transition:
+          border-color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      .dot {
+        inline-size: var(--cv-radio-dot-size);
+        block-size: var(--cv-radio-dot-size);
+        border-radius: 50%;
+        background: var(--cv-color-primary, #65d7ff);
+        transform: scale(0);
+        transition: transform var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([active]) .radio {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 12%, transparent);
+      }
+
+      :host([checked]) .indicator {
+        border-color: var(--cv-color-primary, #65d7ff);
+        background: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 20%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      :host([checked]) .dot {
+        transform: scale(1);
+      }
+
+      :host([disabled]) {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+
+      :host(:focus-visible) .radio {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div class="radio" part="base">
+        <span class="indicator" part="indicator">
+          <span class="dot" part="dot"></span>
+        </span>
+        <span part="label"><slot></slot></span>
+        <span part="description"><slot name="description"></slot></span>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class CVSelectGroup extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,44 @@
+import { LitElement, css, html } from 'lit';
+export class CVSelectGroup extends LitElement {
+    static elementName = 'cv-select-group';
+    static get properties() {
+        return {
+            label: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.label = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: grid;
+        gap: var(--cv-space-1, 4px);
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .label {
+        padding: 0 var(--cv-space-2, 8px);
+        font-size: 0.75rem;
+        letter-spacing: 0.02em;
+        color: var(--cv-color-text-muted, #9aa6bf);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        const content = this.label || this.getAttribute('label') || '';
+        return html `
+      <div class="label" part="label">${content}</div>
+      <slot></slot>
+    `;
+    }
+}

package/dist/components/cv-select-option.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export declare class CVSelectOption extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+    active: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-select-option.js

@@ -0,0 +1,66 @@
+import { LitElement, css, html } from 'lit';
+import { componentResetStyles } from '../styles/component-styles.js';
+export class CVSelectOption extends LitElement {
+    static elementName = 'cv-select-option';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.selected = false;
+        this.active = false;
+    }
+    static styles = [
+        componentResetStyles,
+        css `
+      :host {
+        display: inline-block;
+        outline: none;
+      }
+
+      .option {
+        padding: var(--cv-space-2, 8px) var(--cv-space-3, 12px);
+        border-radius: var(--cv-radius-sm, 6px);
+        color: var(--cv-color-text, #e8ecf6);
+        background: transparent;
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([active]) .option {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+      }
+
+      :host([selected]) .option {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+      }
+
+      :host([disabled]) .option {
+        opacity: 0.5;
+      }
+
+      :host(:focus-visible) .option {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div class="option cv-u-row" part="base"><slot></slot></div>
+    `;
+    }
+}

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

@@ -0,0 +1,128 @@
+import { type ListboxSelectionMode } from '@chromvoid/headless-ui/listbox';
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+import type { FormAssociatedValidity } from '../form-associated/withFormAssociated.js';
+export interface CVSelectEventDetail {
+    value: string | null;
+    values: string[];
+    activeId: string | null;
+    open: boolean;
+}
+export type CVSelectInputEvent = CustomEvent<CVSelectEventDetail>;
+export type CVSelectChangeEvent = CustomEvent<CVSelectEventDetail>;
+export interface CVSelectEventMap {
+    'cv-input': CVSelectInputEvent;
+    'cv-change': CVSelectChangeEvent;
+}
+export declare class CVSelect extends FormAssociatedReatomElement {
+    static elementName: string;
+    static hostDisplay: "inline-block";
+    static get properties(): {
+        name: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        selectedValues: {
+            attribute: boolean;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        selectionMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        closeOnSelect: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    value: string;
+    selectedValues: string[];
+    open: boolean;
+    selectionMode: ListboxSelectionMode;
+    ariaLabel: string;
+    closeOnSelect: boolean;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    clearable: boolean;
+    size: 'small' | 'medium' | 'large';
+    private readonly idBase;
+    private optionRecords;
+    private groupRecords;
+    private optionListeners;
+    private model;
+    private defaultSelectedValues;
+    private didCaptureDefaultSelection;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getOptionElementsWithinGroup;
+    private ensureOptionValue;
+    private parseStructure;
+    private resolveInitialSelectedFromOptions;
+    private rebuildModelFromSlot;
+    private setSelectedIdsInModel;
+    private detachOptionListeners;
+    private attachOptionListeners;
+    private syncOptionElements;
+    private captureState;
+    private dispatchInput;
+    private dispatchChange;
+    private focusTrigger;
+    private applyInteractionResult;
+    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 syncStateFromModel;
+    private restoreSelectedIds;
+    private syncOutsidePointerListener;
+    private handleDocumentPointerDown;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleListboxKeyDown;
+    private handleOptionClick;
+    private handleClearClick;
+    private handleSlotChange;
+    private getValueText;
+    protected render(): import("lit").TemplateResult<1>;
+}