@chromvoid/uikit 0.1.0

package/dist/components/cv-switch.js

@@ -0,0 +1,285 @@
+import { createSwitch } from '@chromvoid/headless-ui/switch';
+import { css, html, nothing } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+let cvSwitchNonce = 0;
+export class CVSwitch extends FormAssociatedReatomElement {
+    static elementName = 'cv-switch';
+    static get properties() {
+        return {
+            name: { type: String },
+            value: { type: String },
+            checked: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true },
+            size: { type: String, reflect: true },
+            helpText: { type: String, attribute: 'help-text', reflect: true },
+        };
+    }
+    idBase = `cv-switch-${++cvSwitchNonce}`;
+    helpTextId = `${this.idBase}-help-text`;
+    modelOptions;
+    model;
+    _hasSlottedHelpText = false;
+    defaultChecked = false;
+    didCaptureDefaultChecked = false;
+    constructor() {
+        super();
+        this.name = '';
+        this.value = 'on';
+        this.checked = false;
+        this.disabled = false;
+        this.required = false;
+        this.size = 'medium';
+        this.helpText = '';
+        this.modelOptions = {
+            idBase: this.idBase,
+            isOn: this.checked,
+            isDisabled: this.isEffectivelyDisabled(),
+        };
+        this.model = createSwitch(this.modelOptions);
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        --cv-switch-width: 44px;
+        --cv-switch-height: 24px;
+        --cv-switch-thumb-size: 18px;
+        --cv-switch-gap: var(--cv-space-2, 8px);
+      }
+
+      [part='base'] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--cv-switch-gap);
+        cursor: pointer;
+        flex-wrap: wrap;
+      }
+
+      [part='control'] {
+        display: inline-flex;
+        align-items: center;
+        inline-size: var(--cv-switch-width);
+        block-size: var(--cv-switch-height);
+        padding: 2px;
+        border-radius: 999px;
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface-elevated, #1d2432);
+        flex-shrink: 0;
+        position: relative;
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          border-color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      [part='thumb'] {
+        inline-size: var(--cv-switch-thumb-size);
+        block-size: var(--cv-switch-thumb-size);
+        border-radius: 50%;
+        background: var(--cv-color-text-muted, #9aa6bf);
+        transform: translateX(0);
+        transition:
+          transform var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      [part='toggled'],
+      [part='untoggled'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([checked]) [part='control'] {
+        border-color: var(--cv-color-primary, #65d7ff);
+        background: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 25%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([checked]) [part='thumb'] {
+        transform: translateX(calc(var(--cv-switch-width) - var(--cv-switch-thumb-size) - 6px));
+        background: var(--cv-color-primary, #65d7ff);
+      }
+
+      [part='control']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 2px;
+      }
+
+      :host([disabled]) [part='base'] {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+
+      :host([size='small']) {
+        --cv-switch-width: 36px;
+        --cv-switch-height: 20px;
+        --cv-switch-thumb-size: 14px;
+      }
+
+      :host([size='large']) {
+        --cv-switch-width: 52px;
+        --cv-switch-height: 28px;
+        --cv-switch-thumb-size: 22px;
+      }
+
+      [part='help-text'] {
+        display: block;
+        inline-size: 100%;
+        color: var(--cv-switch-help-text-color, var(--cv-color-text-muted, #9aa6bf));
+        font-size: var(--cv-switch-help-text-font-size, 0.85em);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    get hasHelpText() {
+        return this.helpText !== '' || this._hasSlottedHelpText;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.didCaptureDefaultChecked) {
+            this.defaultChecked = this.checked;
+            this.didCaptureDefaultChecked = true;
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('helpText')) {
+            this.modelOptions.ariaDescribedBy = this.hasHelpText ? this.helpTextId : undefined;
+        }
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.isEffectivelyDisabled());
+        }
+        if (changedProperties.has('checked') && this.model.state.isOn() !== this.checked) {
+            this.model.actions.setOn(this.checked);
+        }
+        if (changedProperties.has('checked') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('name') ||
+            changedProperties.has('value')) {
+            this.syncFormAssociatedState();
+        }
+    }
+    handleHelpTextSlotChange(event) {
+        const slot = event.target;
+        const assignedNodes = slot.assignedNodes({ flatten: true });
+        const hadSlottedHelpText = this._hasSlottedHelpText;
+        this._hasSlottedHelpText = assignedNodes.length > 0;
+        if (hadSlottedHelpText !== this._hasSlottedHelpText) {
+            this.modelOptions.ariaDescribedBy = this.hasHelpText ? this.helpTextId : undefined;
+            this.requestUpdate();
+        }
+    }
+    dispatchSwitchEvent(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchInput(detail) {
+        this.dispatchSwitchEvent('cv-input', detail);
+    }
+    dispatchChange(detail) {
+        this.dispatchSwitchEvent('cv-change', detail);
+    }
+    syncFromModelAndEmit(previousValue) {
+        const nextValue = this.model.state.isOn();
+        this.checked = nextValue;
+        this.syncFormAssociatedState();
+        if (previousValue === nextValue)
+            return;
+        const detail = { checked: nextValue };
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    onFormDisabledChanged(_disabled) {
+        this.model.actions.setDisabled(this.isEffectivelyDisabled());
+    }
+    onFormReset() {
+        this.checked = this.defaultChecked;
+        this.model.actions.setOn(this.defaultChecked);
+    }
+    onFormStateRestore(state) {
+        const isChecked = typeof state === 'string';
+        this.checked = isChecked;
+        this.model.actions.setOn(isChecked);
+    }
+    isFormAssociatedDisabled() {
+        return this.isEffectivelyDisabled();
+    }
+    getFormAssociatedValue() {
+        return this.checked ? this.value || 'on' : null;
+    }
+    getFormAssociatedValidity() {
+        if (this.required && !this.checked) {
+            return {
+                flags: { valueMissing: true },
+                message: 'Please turn this switch on.',
+            };
+        }
+        return { flags: {} };
+    }
+    isEffectivelyDisabled() {
+        return this.disabled || this.formDisabled;
+    }
+    handleClick() {
+        const previousValue = this.model.state.isOn();
+        this.model.contracts.getSwitchProps().onClick();
+        this.syncFromModelAndEmit(previousValue);
+    }
+    handleKeyDown(event) {
+        const previousValue = this.model.state.isOn();
+        this.model.contracts.getSwitchProps().onKeyDown(event);
+        this.syncFromModelAndEmit(previousValue);
+    }
+    render() {
+        const props = this.model.contracts.getSwitchProps();
+        const isChecked = this.model.state.isOn();
+        const hostAriaLabel = this.getAttribute('aria-label')?.trim() || undefined;
+        const hostAriaLabelledBy = this.getAttribute('aria-labelledby')?.trim() || undefined;
+        const fallbackLabelId = hostAriaLabel || hostAriaLabelledBy ? undefined : `${this.idBase}-label`;
+        const ariaLabelledBy = hostAriaLabel
+            ? undefined
+            : hostAriaLabelledBy || props['aria-labelledby'] || fallbackLabelId;
+        return html `
+      <div part="base" @click=${this.handleClick}>
+        <div
+          id=${props.id}
+          role=${props.role}
+          tabindex=${props.tabindex}
+          aria-checked=${props['aria-checked']}
+          aria-disabled=${props['aria-disabled']}
+          aria-required=${this.required ? 'true' : nothing}
+          aria-label=${hostAriaLabel ?? nothing}
+          aria-labelledby=${ariaLabelledBy ?? nothing}
+          aria-describedby=${props['aria-describedby'] ?? nothing}
+          part="control"
+          @keydown=${this.handleKeyDown}
+        >
+          <span part="toggled" ?hidden=${!isChecked}><slot name="toggled"></slot></span>
+          <span part="untoggled" ?hidden=${isChecked}><slot name="untoggled"></slot></span>
+          <span part="thumb"></span>
+        </div>
+        <span part="label" id=${fallbackLabelId ?? nothing}><slot></slot></span>
+        ${this.hasHelpText
+            ? html `<span part="help-text" id=${this.helpTextId}>
+              <slot name="help-text" @slotchange=${this.handleHelpTextSlotChange}>${this.helpText}</slot>
+            </span>`
+            : html `<slot
+              name="help-text"
+              @slotchange=${this.handleHelpTextSlotChange}
+              style="display:none"
+            ></slot>`}
+      </div>
+    `;
+    }
+}

package/dist/components/cv-tab-panel.d.ts

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

package/dist/components/cv-tab-panel.js

@@ -0,0 +1,37 @@
+import { LitElement, css, html } from 'lit';
+export class CVTabPanel extends LitElement {
+    static elementName = 'cv-tab-panel';
+    static get properties() {
+        return {
+            tab: { type: String, reflect: true },
+            selected: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.tab = '';
+        this.selected = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div part="base"><slot></slot></div>
+    `;
+    }
+}

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

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

package/dist/components/cv-tab.js

@@ -0,0 +1,132 @@
+import { LitElement, css, html } from 'lit';
+export class CVTab extends LitElement {
+    static elementName = 'cv-tab';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            closable: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+        this.closable = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        outline: none;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      .tab {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-block-size: 34px;
+        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);
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          border-color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([active]) .tab {
+        border-color: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([selected]) .tab {
+        background: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 28%,
+          var(--cv-color-surface, #141923)
+        );
+        border-color: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([disabled]) .tab {
+        opacity: 0.5;
+      }
+
+      :host(:focus-visible) .tab {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      .close-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: 20px;
+        block-size: 20px;
+        margin-inline-start: var(--cv-space-1, 4px);
+        border: 0;
+        border-radius: var(--cv-radius-sm, 6px);
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .close-button:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      .close-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleCloseClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('cv-close', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="tab" part="base">
+        <slot></slot>
+        ${this.closable
+            ? html `
+              <button
+                class="close-button"
+                part="close-button"
+                type="button"
+                aria-label="Close tab"
+                ?disabled=${this.disabled}
+                @click=${this.handleCloseClick}
+              >
+                &times;
+              </button>
+            `
+            : null}
+      </div>
+    `;
+    }
+}

package/dist/components/cv-table-cell.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class CVTableCell extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        column: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        rowHeader: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        colspan: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        rowspan: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+    };
+    column: string;
+    rowHeader: boolean;
+    colspan: number;
+    rowspan: number;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-table-cell.js

@@ -0,0 +1,49 @@
+import { LitElement, css, html } from 'lit';
+export class CVTableCell extends LitElement {
+    static elementName = 'cv-table-cell';
+    static get properties() {
+        return {
+            column: { type: String, reflect: true },
+            rowHeader: { type: Boolean, attribute: 'row-header', reflect: true },
+            colspan: { type: Number, reflect: true },
+            rowspan: { type: Number, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.column = '';
+        this.rowHeader = false;
+        this.colspan = 0;
+        this.rowspan = 0;
+    }
+    static styles = [
+        css `
+      :host {
+        display: table-cell;
+        padding: var(--cv-table-cell-padding-block, var(--cv-space-2, 8px))
+          var(--cv-table-cell-padding-inline, var(--cv-space-3, 12px));
+        border-bottom: 1px solid color-mix(in oklab, var(--cv-color-border, #2a3245) 70%, transparent);
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      :host([row-header]) {
+        font-weight: 600;
+      }
+
+      :host([data-active='true']) {
+        outline: 2px solid var(--cv-table-focus-outline-color, var(--cv-color-primary, #65d7ff));
+        outline-offset: -2px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}

package/dist/components/cv-table-column.d.ts

@@ -0,0 +1,37 @@
+import type { TableSortDirection } from '@chromvoid/headless-ui/table';
+import { LitElement } from 'lit';
+export declare class CVTableColumn extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        index: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        sortable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        sortDirection: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    label: string;
+    index: number;
+    sortable: boolean;
+    sortDirection: TableSortDirection;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-table-column.js

@@ -0,0 +1,63 @@
+import { LitElement, css, html, nothing } from 'lit';
+export class CVTableColumn extends LitElement {
+    static elementName = 'cv-table-column';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            label: { type: String, reflect: true },
+            index: { type: Number, reflect: true },
+            sortable: { type: Boolean, reflect: true },
+            sortDirection: { type: String, attribute: 'sort-direction', reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.label = '';
+        this.index = 0;
+        this.sortable = false;
+        this.sortDirection = 'none';
+    }
+    static styles = [
+        css `
+      :host {
+        display: table-cell;
+        padding: var(--cv-space-2, 8px) var(--cv-space-3, 12px);
+        border-bottom: 1px solid var(--cv-color-border, #2a3245);
+        font-weight: 600;
+        color: var(--cv-color-text, #e8ecf6);
+        background: color-mix(in oklab, var(--cv-color-surface, #141923) 82%, transparent);
+        outline: none;
+      }
+
+      :host([sortable]) {
+        cursor: pointer;
+      }
+
+      :host(:focus-visible) {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: -2px;
+      }
+
+      :host([sort-direction='ascending']),
+      :host([sort-direction='descending']) {
+        color: var(--cv-color-primary, #65d7ff);
+      }
+
+      [part='base'] {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--cv-space-1, 4px);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        const indicator = this.sortDirection === 'ascending' ? '▲' : this.sortDirection === 'descending' ? '▼' : nothing;
+        return html `<span part="base"><slot>${this.label}</slot>${indicator}</span>`;
+    }
+}