@chromvoid/uikit 0.1.0

package/dist/components/cv-callout.js

@@ -0,0 +1,221 @@
+import { createCallout } from '@chromvoid/headless-ui/callout';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvCalloutNonce = 0;
+export class CVCallout extends ReatomLitElement {
+    static elementName = 'cv-callout';
+    static get properties() {
+        return {
+            variant: { type: String, reflect: true },
+            closable: { type: Boolean, reflect: true },
+            open: { type: Boolean, reflect: true },
+        };
+    }
+    idBase = `cv-callout-${++cvCalloutNonce}`;
+    model;
+    constructor() {
+        super();
+        this.variant = 'info';
+        this.closable = false;
+        this.open = true;
+        this.model = createCallout({
+            idBase: this.idBase,
+            variant: this.variant,
+            closable: this.closable,
+            open: this.open,
+        });
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      :host(:not([open])) {
+        display: none;
+      }
+
+      [part='base'] {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--cv-callout-gap, var(--cv-space-2, 8px));
+        padding: var(--cv-callout-padding-block, var(--cv-space-3, 12px))
+          var(--cv-callout-padding-inline, var(--cv-space-3, 12px));
+        border-radius: var(--cv-callout-border-radius, var(--cv-radius-sm, 6px));
+        border: 1px solid var(--cv-callout-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-callout-background, var(--cv-color-surface-elevated, #1d2432));
+        color: var(--cv-callout-color, var(--cv-color-text, #e8ecf6));
+        font-size: var(--cv-callout-font-size, var(--cv-font-size-base, 14px));
+        transition:
+          opacity var(--cv-callout-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-callout-transition-easing, var(--cv-easing-standard, ease)),
+          transform var(--cv-callout-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-callout-transition-easing, var(--cv-easing-standard, ease));
+      }
+
+      [part='icon'] {
+        display: inline-flex;
+        align-items: center;
+        color: var(--cv-callout-icon-color, currentColor);
+      }
+
+      [part='message'] {
+        flex: 1;
+      }
+
+      [part='close-button'] {
+        appearance: none;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+        color: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* --- variant: info (default) --- */
+      :host([variant='info']) [part='base'] {
+        border-color: color-mix(in oklab, var(--cv-color-info, #65d7ff) 52%, var(--cv-color-border, #2a3245));
+        background: color-mix(
+          in oklab,
+          var(--cv-color-info, #65d7ff) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='info']) [part='icon'] {
+        color: var(--cv-color-info, #65d7ff);
+      }
+
+      /* --- 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) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='success']) [part='icon'] {
+        color: var(--cv-color-success, #5beba0);
+      }
+
+      /* --- 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) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='warning']) [part='icon'] {
+        color: var(--cv-color-warning, #ffc857);
+      }
+
+      /* --- 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) 12%,
+          var(--cv-color-surface-elevated, #1d2432)
+        );
+      }
+
+      :host([variant='danger']) [part='icon'] {
+        color: var(--cv-color-danger, #ff7d86);
+      }
+
+      /* --- variant: neutral --- */
+      :host([variant='neutral']) [part='base'] {
+        border-color: var(--cv-callout-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-callout-background, var(--cv-color-surface-elevated, #1d2432));
+      }
+    `,
+    ];
+    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('closable')) {
+            this.model.actions.setClosable(this.closable);
+        }
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this.model.actions.show();
+            }
+            else {
+                // Only close via headless if closable, otherwise directly set state
+                if (this.model.state.closable()) {
+                    this.model.actions.close();
+                }
+            }
+        }
+    }
+    handleClose() {
+        this.model.actions.close();
+        const isOpen = this.model.state.open();
+        if (!isOpen && this.open) {
+            this.open = false;
+            this.dispatchEvent(new CustomEvent('cv-close', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    render() {
+        const calloutProps = this.model.contracts.getCalloutProps();
+        const closable = this.model.state.closable();
+        return html `
+      <div
+        id=${calloutProps.id}
+        role=${calloutProps.role}
+        data-variant=${calloutProps['data-variant']}
+        part="base"
+      >
+        <span part="icon"><slot name="icon"></slot></span>
+        <span part="message"><slot></slot></span>
+        ${closable ? this.renderCloseButton() : nothing}
+      </div>
+    `;
+    }
+    renderCloseButton() {
+        const closeProps = this.model.contracts.getCloseButtonProps();
+        return html `
+      <button
+        id=${closeProps.id}
+        part="close-button"
+        role=${closeProps.role}
+        tabindex=${closeProps.tabindex}
+        aria-label=${closeProps['aria-label']}
+        @click=${() => this.handleClose()}
+      >
+        &#x2715;
+      </button>
+    `;
+    }
+}

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

@@ -0,0 +1,48 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+type CVCardVariant = 'elevated' | 'outlined' | 'filled';
+export interface CVCardEventDetail {
+    expanded: boolean;
+}
+export declare class CVCard extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        expandable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        expanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: CVCardVariant;
+    expandable: boolean;
+    expanded: boolean;
+    disabled: boolean;
+    private readonly idBase;
+    private model;
+    /**
+     * When true, events are suppressed. Used to distinguish programmatic
+     * state changes from user interaction.
+     */
+    private suppressEvents;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    private handleExpandedChange;
+    private handleHeaderClick;
+    private handleHeaderKeyDown;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/components/cv-card.js

@@ -0,0 +1,269 @@
+import { createCard } from '@chromvoid/headless-ui/card';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvCardNonce = 0;
+export class CVCard extends ReatomLitElement {
+    static elementName = 'cv-card';
+    static get properties() {
+        return {
+            variant: { type: String, reflect: true },
+            expandable: { type: Boolean, reflect: true },
+            expanded: { type: Boolean, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+    idBase = `cv-card-${++cvCardNonce}`;
+    model;
+    /**
+     * When true, events are suppressed. Used to distinguish programmatic
+     * state changes from user interaction.
+     */
+    suppressEvents = false;
+    constructor() {
+        super();
+        this.variant = 'elevated';
+        this.expandable = false;
+        this.expanded = false;
+        this.disabled = false;
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        --cv-card-padding: var(--cv-space-4, 16px);
+        --cv-card-border-radius: var(--cv-radius-md, 8px);
+        --cv-card-border-color: var(--cv-color-border, #2a3245);
+        --cv-card-background: var(--cv-color-surface, #141923);
+        --cv-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+        --cv-card-gap: var(--cv-space-0, 0px);
+        --cv-card-indicator-size: var(--cv-space-4, 16px);
+        --cv-card-indicator-transition: var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      [part='base'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cv-card-gap);
+        border-radius: var(--cv-card-border-radius);
+        background: var(--cv-card-background);
+        color: var(--cv-color-text, #e8ecf6);
+        overflow: hidden;
+      }
+
+      [part='image'] {
+        display: block;
+      }
+
+      [part='image'] ::slotted(*) {
+        display: block;
+        width: 100%;
+      }
+
+      [part='header'] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--cv-card-padding);
+      }
+
+      [part='body'] {
+        padding: 0 var(--cv-card-padding) var(--cv-card-padding);
+      }
+
+      [part='body'][hidden] {
+        display: none;
+      }
+
+      [part='footer'] {
+        padding: 0 var(--cv-card-padding) var(--cv-card-padding);
+      }
+
+      [part='indicator'] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: var(--cv-card-indicator-size);
+        block-size: var(--cv-card-indicator-size);
+        transition: transform var(--cv-card-indicator-transition);
+      }
+
+      :host([expanded]) [part='indicator'] {
+        transform: rotate(90deg);
+      }
+
+      /* --- variant: elevated (default) --- */
+      :host([variant='elevated']) [part='base'] {
+        box-shadow: var(--cv-card-shadow);
+      }
+
+      /* --- variant: outlined --- */
+      :host([variant='outlined']) [part='base'] {
+        border: 1px solid var(--cv-card-border-color);
+        box-shadow: none;
+      }
+
+      /* --- variant: filled --- */
+      :host([variant='filled']) [part='base'] {
+        box-shadow: none;
+      }
+
+      /* --- expandable header as trigger --- */
+      :host([expandable]) [part='header'] {
+        cursor: pointer;
+        user-select: none;
+      }
+
+      :host([expandable]) [part='header']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: -2px;
+      }
+
+      /* --- disabled --- */
+      :host([disabled]) {
+        opacity: 0.55;
+      }
+
+      :host([disabled]) [part='header'] {
+        cursor: not-allowed;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('expandable')) {
+            // Recreate model when expandable changes to reset headless state
+            this.model = this.createModel();
+            return;
+        }
+        if (changedProperties.has('disabled')) {
+            this.model.actions.setDisabled(this.disabled);
+        }
+        if (changedProperties.has('expanded') && this.model.state.isExpanded() !== this.expanded) {
+            this.suppressEvents = true;
+            // Temporarily clear disabled so headless action is not rejected.
+            // Programmatic property changes must always be honored.
+            const wasDisabled = this.model.state.isDisabled();
+            if (wasDisabled)
+                this.model.actions.setDisabled(false);
+            // Temporarily ensure expandable so the action is not rejected
+            const wasExpandable = this.model.state.isExpandable();
+            if (!wasExpandable) {
+                // If not expandable, just set the atom directly - no action needed
+                this.suppressEvents = false;
+                return;
+            }
+            if (this.expanded) {
+                this.model.actions.expand();
+            }
+            else {
+                this.model.actions.collapse();
+            }
+            if (wasDisabled)
+                this.model.actions.setDisabled(true);
+            this.expanded = this.model.state.isExpanded();
+            this.suppressEvents = false;
+        }
+    }
+    createModel() {
+        return createCard({
+            idBase: this.idBase,
+            isExpandable: this.expandable,
+            isExpanded: this.expanded,
+            isDisabled: this.disabled,
+            onExpandedChange: this.handleExpandedChange.bind(this),
+        });
+    }
+    handleExpandedChange(isExpanded) {
+        this.expanded = isExpanded;
+        if (this.suppressEvents)
+            return;
+        const detail = { expanded: isExpanded };
+        this.dispatchEvent(new CustomEvent('cv-input', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('cv-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // --- Event handlers (user interaction) ---
+    handleHeaderClick() {
+        const triggerProps = this.model.contracts.getTriggerProps();
+        if ('onClick' in triggerProps && typeof triggerProps.onClick === 'function') {
+            triggerProps.onClick();
+        }
+    }
+    handleHeaderKeyDown(event) {
+        const triggerProps = this.model.contracts.getTriggerProps();
+        if ('onKeyDown' in triggerProps && typeof triggerProps.onKeyDown === 'function') {
+            triggerProps.onKeyDown(event);
+        }
+    }
+    render() {
+        const cardProps = this.model.contracts.getCardProps();
+        const triggerProps = this.model.contracts.getTriggerProps();
+        const contentProps = this.model.contracts.getContentProps();
+        const isExpandable = this.model.state.isExpandable();
+        // Spread trigger props onto header only when expandable
+        const headerId = isExpandable ? triggerProps.id : undefined;
+        const headerRole = isExpandable ? triggerProps.role : undefined;
+        const headerTabindex = isExpandable ? triggerProps.tabindex : undefined;
+        const headerAriaExpanded = isExpandable ? triggerProps['aria-expanded'] : undefined;
+        const headerAriaControls = isExpandable ? triggerProps['aria-controls'] : undefined;
+        const headerAriaDisabled = isExpandable ? triggerProps['aria-disabled'] : undefined;
+        // Spread content props onto body only when expandable
+        const bodyId = isExpandable ? contentProps.id : undefined;
+        const bodyRole = isExpandable ? contentProps.role : undefined;
+        const bodyAriaLabelledby = isExpandable ? contentProps['aria-labelledby'] : undefined;
+        const bodyHidden = isExpandable ? contentProps.hidden : false;
+        return html `
+      <div part="base">
+        <div part="image">
+          <slot name="image"></slot>
+        </div>
+
+        <div
+          id=${headerId ?? nothing}
+          role=${headerRole ?? nothing}
+          tabindex=${headerTabindex ?? nothing}
+          aria-expanded=${headerAriaExpanded ?? nothing}
+          aria-controls=${headerAriaControls ?? nothing}
+          aria-disabled=${headerAriaDisabled ?? nothing}
+          part="header"
+          @click=${this.handleHeaderClick}
+          @keydown=${this.handleHeaderKeyDown}
+        >
+          <slot name="header"></slot>
+          ${isExpandable
+            ? html `
+                  <span part="indicator" aria-hidden="true">&#x25B6;</span>
+                `
+            : nothing}
+        </div>
+
+        <div
+          id=${bodyId ?? nothing}
+          role=${bodyRole ?? nothing}
+          aria-labelledby=${bodyAriaLabelledby ?? nothing}
+          ?hidden=${bodyHidden}
+          part="body"
+        >
+          <slot></slot>
+        </div>
+
+        <div part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-carousel-slide.d.ts

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

package/dist/components/cv-carousel-slide.js

@@ -0,0 +1,51 @@
+import { LitElement, css, html } from 'lit';
+export class CVCarouselSlide extends LitElement {
+    static elementName = 'cv-carousel-slide';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            label: { type: String, reflect: true },
+            active: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.label = '';
+        this.active = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='base'] {
+        display: block;
+        min-block-size: 120px;
+        padding: var(--cv-space-4, 16px);
+        border-radius: var(--cv-radius-md, 10px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+      }
+
+      :host([active]) [part='base'] {
+        border-color: var(--cv-color-primary, #65d7ff);
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `
+      <div part="base"><slot></slot></div>
+    `;
+    }
+}