@chromvoid/uikit 0.1.0

package/dist/components/cv-checkbox.js

@@ -0,0 +1,274 @@
+import { createCheckbox } from '@chromvoid/headless-ui/checkbox';
+import { css, html, nothing } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+let cvCheckboxNonce = 0;
+export class CVCheckbox extends FormAssociatedReatomElement {
+    static elementName = 'cv-checkbox';
+    static forwardedHostAttributes = [
+        'tabindex',
+        'aria-label',
+        'aria-labelledby',
+        'aria-describedby',
+    ];
+    static get properties() {
+        return {
+            name: { type: String },
+            value: { type: String },
+            checked: { type: Boolean, reflect: true },
+            indeterminate: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            readOnly: { type: Boolean, attribute: 'read-only', reflect: true },
+            required: { type: Boolean, reflect: true },
+        };
+    }
+    static get observedAttributes() {
+        return [...new Set([...super.observedAttributes, ...this.forwardedHostAttributes])];
+    }
+    idBase = `cv-checkbox-${++cvCheckboxNonce}`;
+    model;
+    defaultChecked = false;
+    defaultIndeterminate = false;
+    didCaptureDefaultState = false;
+    constructor() {
+        super();
+        this.name = '';
+        this.value = 'on';
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+        this.readOnly = false;
+        this.required = false;
+        this.model = this.createModel();
+    }
+    get mixed() {
+        return this.indeterminate;
+    }
+    set mixed(value) {
+        this.indeterminate = value;
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+      }
+
+      [part='base'] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--cv-space-2, 8px);
+        cursor: pointer;
+        user-select: none;
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      [part='indicator'] {
+        inline-size: 18px;
+        block-size: 18px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--cv-radius-sm, 6px);
+        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);
+      }
+
+      [part='checkmark'] {
+        inline-size: 10px;
+        block-size: 10px;
+        border-radius: 2px;
+        background: transparent;
+        transition: background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([checked]) [part='indicator'] {
+        border-color: var(--cv-color-primary, #65d7ff);
+        background: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 24%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      :host([checked]) [part='checkmark'] {
+        background: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([indeterminate]) [part='checkmark'] {
+        inline-size: 10px;
+        block-size: 2px;
+        border-radius: 999px;
+        background: var(--cv-color-primary, #65d7ff);
+      }
+
+      [part='base']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 2px;
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.didCaptureDefaultState) {
+            this.defaultChecked = this.checked;
+            this.defaultIndeterminate = this.indeterminate;
+            this.didCaptureDefaultState = true;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue === newValue)
+            return;
+        if (!CVCheckbox.forwardedHostAttributes.includes(name))
+            return;
+        this.requestUpdate();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.isEffectivelyDisabled());
+        }
+        if (changedProperties.has('readOnly')) {
+            this.model.actions.setReadOnly(this.readOnly);
+        }
+        if (changedProperties.has('checked') || changedProperties.has('indeterminate')) {
+            const nextValue = this.indeterminate ? 'mixed' : this.checked;
+            if (this.model.state.checked() !== nextValue) {
+                this.model.actions.setChecked(nextValue);
+            }
+        }
+        if (changedProperties.has('checked') ||
+            changedProperties.has('indeterminate') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('name') ||
+            changedProperties.has('value')) {
+            this.syncFormAssociatedState();
+        }
+    }
+    createModel() {
+        return createCheckbox({
+            idBase: this.idBase,
+            allowMixed: true,
+            checked: this.indeterminate ? 'mixed' : this.checked,
+            isDisabled: this.isEffectivelyDisabled(),
+            isReadOnly: this.readOnly,
+        });
+    }
+    onFormDisabledChanged(_disabled) {
+        this.model.actions.setDisabled(this.isEffectivelyDisabled());
+    }
+    onFormReset() {
+        const nextValue = this.defaultIndeterminate ? 'mixed' : this.defaultChecked;
+        this.checked = this.defaultChecked;
+        this.indeterminate = this.defaultIndeterminate;
+        this.model.actions.setChecked(nextValue);
+    }
+    onFormStateRestore(state) {
+        const isChecked = typeof state === 'string';
+        this.checked = isChecked;
+        this.indeterminate = false;
+        this.model.actions.setChecked(isChecked);
+    }
+    isFormAssociatedDisabled() {
+        return this.isEffectivelyDisabled();
+    }
+    getFormAssociatedValue() {
+        if (!this.checked || this.indeterminate) {
+            return null;
+        }
+        return this.value || 'on';
+    }
+    getFormAssociatedValidity() {
+        if (this.required && (!this.checked || this.indeterminate)) {
+            return {
+                flags: { valueMissing: true },
+                message: 'Please check this box.',
+            };
+        }
+        return { flags: {} };
+    }
+    isEffectivelyDisabled() {
+        return this.disabled || this.formDisabled;
+    }
+    dispatchCheckboxEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchInput(detail) {
+        this.dispatchCheckboxEvent('cv-input', detail);
+    }
+    dispatchChange(detail) {
+        this.dispatchCheckboxEvent('cv-change', detail);
+    }
+    syncFromModelAndEmit(previousValue) {
+        const nextValue = this.model.state.checked();
+        this.checked = nextValue === true;
+        this.indeterminate = nextValue === 'mixed';
+        this.syncFormAssociatedState();
+        if (previousValue === nextValue)
+            return;
+        const detail = {
+            value: nextValue,
+            checked: nextValue === true,
+            indeterminate: nextValue === 'mixed',
+        };
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    handleClick() {
+        const previousValue = this.model.state.checked();
+        this.model.contracts.getCheckboxProps().onClick();
+        this.syncFromModelAndEmit(previousValue);
+    }
+    handleKeyDown(event) {
+        const previousValue = this.model.state.checked();
+        this.model.contracts.getCheckboxProps().onKeyDown(event);
+        this.syncFromModelAndEmit(previousValue);
+    }
+    render() {
+        const props = this.model.contracts.getCheckboxProps();
+        const hostTabIndex = this.getAttribute('tabindex');
+        const hostAriaLabel = this.getAttribute('aria-label');
+        const hostAriaLabelledBy = this.getAttribute('aria-labelledby');
+        const hostAriaDescribedBy = this.getAttribute('aria-describedby');
+        const tabIndex = this.isEffectivelyDisabled() ? '-1' : (hostTabIndex ?? props.tabindex);
+        return html `
+      <div
+        id=${props.id}
+        role=${props.role}
+        tabindex=${tabIndex}
+        aria-checked=${props['aria-checked']}
+        aria-label=${hostAriaLabel ?? nothing}
+        aria-disabled=${props['aria-disabled'] ?? nothing}
+        aria-readonly=${props['aria-readonly'] ?? nothing}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-labelledby=${hostAriaLabelledBy ?? props['aria-labelledby'] ?? nothing}
+        aria-describedby=${hostAriaDescribedBy ?? props['aria-describedby'] ?? nothing}
+        part="base"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span part="indicator">
+          <span part="checkmark"></span>
+        </span>
+        <slot></slot>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class CVComboboxGroup 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-combobox-group.js

@@ -0,0 +1,34 @@
+import { LitElement, css, html } from 'lit';
+export class CVComboboxGroup extends LitElement {
+    static elementName = 'cv-combobox-group';
+    static get properties() {
+        return {
+            label: { type: String, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.label = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export declare class CVComboboxOption 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").CSSResultOrNative[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,66 @@
+import { LitElement, css, html } from 'lit';
+import { componentResetStyles, getComponentHostDisplayStyles } from '../styles/component-styles.js';
+export class CVComboboxOption extends LitElement {
+    static elementName = 'cv-combobox-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,
+        getComponentHostDisplayStyles('block'),
+        css `
+      :host {
+        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-combobox.d.ts

@@ -0,0 +1,135 @@
+import { type ComboboxMatchMode, type ComboboxType } from '@chromvoid/headless-ui/combobox';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVComboboxEventDetail {
+    value: string | null;
+    inputValue: string;
+    activeId: string | null;
+    open: boolean;
+    selectedIds: string[];
+}
+export type CVComboboxInputEvent = CustomEvent<CVComboboxEventDetail>;
+export type CVComboboxChangeEvent = CustomEvent<CVComboboxEventDetail>;
+export type CVComboboxClearEvent = CustomEvent<Record<string, never>>;
+export interface CVComboboxEventMap {
+    'cv-input': CVComboboxInputEvent;
+    'cv-change': CVComboboxChangeEvent;
+    'cv-clear': CVComboboxClearEvent;
+}
+export declare class CVCombobox extends ReatomLitElement {
+    static elementName: string;
+    static hostDisplay: "inline-block";
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        inputValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        maxTagsVisible: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        openOnFocus: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        openOnClick: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        closeOnSelect: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        matchMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    inputValue: string;
+    open: boolean;
+    type: ComboboxType;
+    multiple: boolean;
+    clearable: boolean;
+    maxTagsVisible: number;
+    openOnFocus: boolean;
+    openOnClick: boolean;
+    closeOnSelect: boolean;
+    matchMode: ComboboxMatchMode;
+    placeholder: string;
+    ariaLabel: string;
+    private readonly idBase;
+    private optionRecords;
+    private groupRecords;
+    private optionListeners;
+    private model?;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getOptionElements;
+    private getGroupElements;
+    private ensureOptionValue;
+    private resolveInitialSelected;
+    private rebuildModelFromSlot;
+    private syncHostState;
+    private detachOptionListeners;
+    private attachOptionListeners;
+    private syncOptionElements;
+    private captureState;
+    private makeEventDetail;
+    private dispatchInput;
+    private dispatchChange;
+    private applyInteractionResult;
+    private syncOutsidePointerListener;
+    private handleDocumentPointerDown;
+    private handleInputChange;
+    private handleInputFocus;
+    private handleInputClick;
+    private handleKeyDown;
+    private handleOptionMouseEnter;
+    private handleOptionClick;
+    private handleClearClick;
+    private handleTagRemove;
+    private handleSlotChange;
+    private getSelectedOptionLabel;
+    private getSelectedRecords;
+    private renderTags;
+    private renderClearButton;
+    private renderListboxContent;
+    protected render(): import("lit").TemplateResult<1>;
+}