@chromvoid/uikit 0.1.0

package/dist/components/cv-badge.js

@@ -0,0 +1,280 @@
+import { createBadge } from '@chromvoid/headless-ui/badge';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export class CVBadge extends ReatomLitElement {
+    static elementName = 'cv-badge';
+    static get properties() {
+        return {
+            variant: { type: String, reflect: true },
+            size: { type: String, reflect: true },
+            dot: { type: Boolean, reflect: true },
+            pulse: { type: Boolean, reflect: true },
+            pill: { type: Boolean, reflect: true },
+            dynamic: { type: Boolean, reflect: true },
+            decorative: { type: Boolean, reflect: true },
+            _ariaLabel: { type: String, attribute: 'aria-label', reflect: false },
+        };
+    }
+    model;
+    constructor() {
+        super();
+        this.variant = 'neutral';
+        this.size = 'medium';
+        this.dot = false;
+        this.pulse = false;
+        this.pill = false;
+        this.dynamic = false;
+        this.decorative = false;
+        this._ariaLabel = null;
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-block;
+        --cv-badge-height: 24px;
+        --cv-badge-padding-inline: var(--cv-space-2, 8px);
+        --cv-badge-border-radius: var(--cv-radius-sm, 6px);
+        --cv-badge-gap: var(--cv-space-1, 4px);
+        --cv-badge-font-size: 12px;
+        --cv-badge-dot-size: 8px;
+      }
+
+      [part='base'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cv-badge-gap);
+        padding-inline: var(--cv-badge-padding-inline);
+        height: var(--cv-badge-height);
+        font-size: var(--cv-badge-font-size);
+        border-radius: var(--cv-badge-border-radius);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+        color: var(--cv-color-text, #e8ecf6);
+        user-select: none;
+        white-space: nowrap;
+        line-height: 1;
+        box-sizing: border-box;
+        transition:
+          background var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          border-color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      [part='label'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cv-badge-gap);
+      }
+
+      [part='prefix'],
+      [part='suffix'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* --- variant: neutral (default) --- */
+      :host([variant='neutral']) [part='base'] {
+        border-color: var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+      }
+
+      /* --- variant: primary --- */
+      :host([variant='primary']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 52%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-primary, #65d7ff) 22%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      /* --- variant: success --- */
+      :host([variant='success']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-success, #5beba0) 52%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-success, #5beba0) 22%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      /* --- variant: warning --- */
+      :host([variant='warning']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-warning, #ffc857) 52%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-warning, #ffc857) 22%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      /* --- variant: danger --- */
+      :host([variant='danger']) [part='base'] {
+        border-color: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7d86) 52%,
+          var(--cv-color-border, #2a3245)
+        );
+        background: color-mix(
+          in oklab,
+          var(--cv-color-danger, #ff7d86) 22%,
+          var(--cv-color-surface, #141923)
+        );
+      }
+
+      /* --- pill modifier --- */
+      :host([pill]) {
+        --cv-badge-border-radius: 999px;
+      }
+
+      /* --- dot mode --- */
+      :host([dot]) [part='base'] {
+        padding: 0;
+        width: var(--cv-badge-dot-size);
+        height: var(--cv-badge-dot-size);
+        min-width: var(--cv-badge-dot-size);
+        min-height: var(--cv-badge-dot-size);
+        border-radius: 999px;
+      }
+
+      :host([dot]) [part='label'],
+      :host([dot]) [part='prefix'],
+      :host([dot]) [part='suffix'] {
+        display: none;
+      }
+
+      /* --- dot variant colors --- */
+      :host([dot][variant='neutral']) [part='base'] {
+        background: var(--cv-color-border, #2a3245);
+        border-color: var(--cv-color-border, #2a3245);
+      }
+
+      :host([dot][variant='primary']) [part='base'] {
+        background: var(--cv-color-primary, #65d7ff);
+        border-color: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([dot][variant='success']) [part='base'] {
+        background: var(--cv-color-success, #5beba0);
+        border-color: var(--cv-color-success, #5beba0);
+      }
+
+      :host([dot][variant='warning']) [part='base'] {
+        background: var(--cv-color-warning, #ffc857);
+        border-color: var(--cv-color-warning, #ffc857);
+      }
+
+      :host([dot][variant='danger']) [part='base'] {
+        background: var(--cv-color-danger, #ff7d86);
+        border-color: var(--cv-color-danger, #ff7d86);
+      }
+
+      /* --- pulse animation --- */
+      :host([pulse]) [part='base'] {
+        animation: cv-badge-pulse 1.5s ease-in-out infinite;
+      }
+
+      @keyframes cv-badge-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.7;
+          transform: scale(1.05);
+        }
+      }
+
+      /* --- sizes --- */
+      :host([size='small']) {
+        --cv-badge-height: 20px;
+        --cv-badge-padding-inline: var(--cv-space-1, 4px);
+        --cv-badge-font-size: 11px;
+        --cv-badge-dot-size: 6px;
+      }
+
+      :host([size='large']) {
+        --cv-badge-height: 28px;
+        --cv-badge-padding-inline: var(--cv-space-3, 12px);
+        --cv-badge-font-size: 14px;
+        --cv-badge-dot-size: 10px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('variant')) {
+            this.model.actions.setVariant(this.variant);
+        }
+        if (changedProperties.has('size')) {
+            this.model.actions.setSize(this.size);
+        }
+        if (changedProperties.has('dot')) {
+            this.model.actions.setDot(this.dot);
+        }
+        if (changedProperties.has('pulse')) {
+            this.model.actions.setPulse(this.pulse);
+        }
+        if (changedProperties.has('pill')) {
+            this.model.actions.setPill(this.pill);
+        }
+        if (changedProperties.has('dynamic')) {
+            this.model.actions.setDynamic(this.dynamic);
+        }
+        if (changedProperties.has('decorative')) {
+            this.model.actions.setDecorative(this.decorative);
+        }
+    }
+    createModel() {
+        return createBadge({
+            variant: this.variant,
+            size: this.size,
+            dot: this.dot,
+            pulse: this.pulse,
+            pill: this.pill,
+            isDynamic: this.dynamic,
+            isDecorative: this.decorative,
+        });
+    }
+    render() {
+        const props = this.model.contracts.getBadgeProps();
+        const isDot = this.dot;
+        const ariaLabel = this._ariaLabel ?? props['aria-label'];
+        return html `
+      <div
+        part="base"
+        role=${props.role ?? nothing}
+        aria-live=${props['aria-live'] ?? nothing}
+        aria-atomic=${props['aria-atomic'] ?? nothing}
+        aria-hidden=${props['aria-hidden'] ?? nothing}
+        aria-label=${ariaLabel ?? nothing}
+      >
+        <span part="prefix" ?hidden=${isDot}><slot name="prefix"></slot></span>
+        <span part="label" ?hidden=${isDot}><slot></slot></span>
+        <span part="suffix" ?hidden=${isDot}><slot name="suffix"></slot></span>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-breadcrumb-item.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export declare class CVBreadcrumbItem extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        href: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        current: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        showSeparator: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        linkId: {
+            attribute: boolean;
+        };
+    };
+    value: string;
+    href: string;
+    current: boolean;
+    showSeparator: boolean;
+    linkId: string;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-breadcrumb-item.js

@@ -0,0 +1,64 @@
+import { LitElement, css, html, nothing } from 'lit';
+export class CVBreadcrumbItem extends LitElement {
+    static elementName = 'cv-breadcrumb-item';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            href: { type: String, reflect: true },
+            current: { type: Boolean, reflect: true },
+            showSeparator: { type: Boolean, attribute: 'show-separator', reflect: true },
+            linkId: { attribute: false },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.href = '';
+        this.current = false;
+        this.showSeparator = true;
+        this.linkId = '';
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--cv-space-2, 8px);
+      }
+
+      [part='link'] {
+        color: var(--cv-color-text, #e8ecf6);
+        text-decoration: none;
+      }
+
+      :host([current]) [part='link'] {
+        font-weight: 600;
+      }
+
+      [part='separator'] {
+        color: color-mix(in oklab, var(--cv-color-text, #e8ecf6) 60%, transparent);
+      }
+
+      [part='separator'][hidden] {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <span part="prefix"><slot name="prefix"></slot></span>
+      <a id=${this.linkId || nothing} role="link" href=${this.href} aria-current=${this.current ? 'page' : nothing} part="link">
+        <slot></slot>
+      </a>
+      <span part="suffix"><slot name="suffix"></slot></span>
+      <span aria-hidden="true" ?hidden=${!this.showSeparator} part="separator">
+        <slot name="separator">/</slot>
+      </span>
+    `;
+    }
+}

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

@@ -0,0 +1,39 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVBreadcrumb extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    private readonly idBase;
+    private itemRecords;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    get items(): string[];
+    private getItemElements;
+    private ensureItemValue;
+    private ensureItemHref;
+    private rebuildModelFromSlot;
+    private syncItemElements;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-breadcrumb.js

@@ -0,0 +1,160 @@
+import { createBreadcrumb } from '@chromvoid/headless-ui/breadcrumb';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVBreadcrumbItem } from './cv-breadcrumb-item.js';
+let cvBreadcrumbNonce = 0;
+export class CVBreadcrumb extends ReatomLitElement {
+    static elementName = 'cv-breadcrumb';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+        };
+    }
+    idBase = `cv-breadcrumb-${++cvBreadcrumbNonce}`;
+    itemRecords = [];
+    model;
+    constructor() {
+        super();
+        this.value = '';
+        this.ariaLabel = '';
+        this.ariaLabelledBy = '';
+        this.model = createBreadcrumb({
+            idBase: this.idBase,
+            items: [],
+        });
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: block;
+      }
+
+      [part='list'] {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--cv-space-2, 8px);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.rebuildModelFromSlot(false, false, this.value.trim() || null);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
+            this.rebuildModelFromSlot(true, false);
+            return;
+        }
+        if (changedProperties.has('value')) {
+            const normalized = this.value.trim();
+            if (this.value !== normalized) {
+                this.value = normalized;
+            }
+            this.rebuildModelFromSlot(true, false, normalized || null);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!changedProperties.has('value')) {
+            this.syncItemElements();
+        }
+    }
+    get items() {
+        return this.itemRecords.map((item) => item.id);
+    }
+    getItemElements() {
+        return Array.from(this.children).filter((element) => element.tagName.toLowerCase() === CVBreadcrumbItem.elementName);
+    }
+    ensureItemValue(item, index) {
+        const normalized = item.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `item-${index + 1}`;
+        item.value = fallback;
+        return fallback;
+    }
+    ensureItemHref(item) {
+        const normalized = item.href?.trim();
+        if (normalized)
+            return normalized;
+        item.href = '#';
+        return '#';
+    }
+    rebuildModelFromSlot(preserveCurrent, requestRender = true, forcedCurrentId = null) {
+        const itemElements = this.getItemElements();
+        const previousCurrentId = preserveCurrent ? this.model.state.currentId() : null;
+        this.itemRecords = itemElements.map((element, index) => ({
+            id: this.ensureItemValue(element, index),
+            label: element.textContent?.trim() || element.value || `item-${index + 1}`,
+            href: this.ensureItemHref(element),
+            current: element.current,
+            element,
+        }));
+        const preferredCurrentId = forcedCurrentId ?? previousCurrentId;
+        this.model = createBreadcrumb({
+            idBase: this.idBase,
+            ariaLabel: this.ariaLabel || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+            items: this.itemRecords.map((record) => ({
+                id: record.id,
+                label: record.label,
+                href: record.href,
+                isCurrent: preferredCurrentId ? record.id === preferredCurrentId : record.current,
+            })),
+        });
+        this.syncItemElements();
+        this.value = this.model.state.currentId() ?? '';
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    syncItemElements() {
+        for (const [index, record] of this.itemRecords.entries()) {
+            const itemProps = this.model.contracts.getItemProps(record.id);
+            const linkProps = this.model.contracts.getLinkProps(record.id);
+            const separatorProps = this.model.contracts.getSeparatorProps(record.id);
+            record.element.id = itemProps.id;
+            record.element.linkId = linkProps.id;
+            record.element.href = linkProps.href;
+            record.element.current = linkProps['aria-current'] === 'page';
+            record.element.showSeparator =
+                index < this.itemRecords.length - 1 && separatorProps['aria-hidden'] === 'true';
+            record.element.setAttribute('data-current', itemProps['data-current']);
+        }
+    }
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    render() {
+        const rootProps = this.model.contracts.getRootProps();
+        const listProps = this.model.contracts.getListProps();
+        return html `
+      <nav
+        role=${rootProps.role}
+        aria-label=${rootProps['aria-label'] ?? nothing}
+        aria-labelledby=${rootProps['aria-labelledby'] ?? nothing}
+        part="base"
+      >
+        <ol role=${listProps.role ?? nothing} part="list">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </ol>
+      </nav>
+    `;
+    }
+}

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

@@ -0,0 +1,83 @@
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+type CVButtonVariant = 'default' | 'primary' | 'danger' | 'ghost';
+type CVButtonSize = 'small' | 'medium' | 'large';
+type CVButtonType = 'button' | 'submit' | 'reset';
+export interface CVButtonInputDetail {
+    pressed: boolean;
+    toggle: boolean;
+}
+export interface CVButtonChangeDetail {
+    pressed: boolean;
+}
+export declare class CVButton extends FormAssociatedReatomElement {
+    static elementName: string;
+    static get properties(): {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        toggle: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pressed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        outline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pill: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    disabled: boolean;
+    toggle: boolean;
+    pressed: boolean;
+    loading: boolean;
+    variant: CVButtonVariant;
+    outline: boolean;
+    pill: boolean;
+    size: CVButtonSize;
+    type: CVButtonType;
+    private model;
+    private suppressKeyboardClick;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    private dispatchInput;
+    private dispatchChange;
+    private handlePress;
+    private getButtonType;
+    protected isFormAssociatedDisabled(): boolean;
+    protected getFormAssociatedValue(): string | File | FormData | null;
+    private triggerFormAction;
+    private handleClick;
+    private handleKeyDown;
+    private handleKeyUp;
+    private handleContentSlotChange;
+    private hasSlotContent;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};