@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,62 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export type CVFeedLoadMoreEvent = CustomEvent<Record<string, never>>;
+export type CVFeedLoadNewerEvent = CustomEvent<Record<string, never>>;
+export type CVFeedExitAfterEvent = CustomEvent<Record<string, never>>;
+export type CVFeedExitBeforeEvent = CustomEvent<Record<string, never>>;
+export interface CVFeedEventMap {
+    'cv-load-more': CVFeedLoadMoreEvent;
+    'cv-load-newer': CVFeedLoadNewerEvent;
+    'cv-exit-after': CVFeedExitAfterEvent;
+    'cv-exit-before': CVFeedExitBeforeEvent;
+}
+export declare class CVFeed extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        busy: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        empty: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    label: string;
+    busy: boolean;
+    loading: boolean;
+    empty: boolean;
+    error: boolean;
+    private readonly idBase;
+    private model;
+    private observer;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private createModel;
+    private getArticleElements;
+    private rebuildModel;
+    private syncArticleElements;
+    private syncHostAttributes;
+    private setupObserver;
+    private destroyObserver;
+    private handleKeyDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-feed.js

@@ -0,0 +1,310 @@
+import { createFeed, } from '@chromvoid/headless-ui/feed';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvFeedNonce = 0;
+export class CVFeed extends ReatomLitElement {
+    static elementName = 'cv-feed';
+    static get properties() {
+        return {
+            label: { type: String, reflect: true },
+            busy: { type: Boolean, reflect: true },
+            loading: { type: Boolean, reflect: true },
+            empty: { type: Boolean, reflect: true },
+            error: { type: Boolean, reflect: true },
+        };
+    }
+    idBase = `cv-feed-${++cvFeedNonce}`;
+    model;
+    observer = null;
+    constructor() {
+        super();
+        this.label = '';
+        this.busy = false;
+        this.loading = false;
+        this.empty = true;
+        this.error = false;
+        this.model = this.createModel([]);
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cv-feed-gap, var(--cv-space-3, 12px));
+        padding-block: var(--cv-feed-padding-block, var(--cv-space-3, 12px));
+        padding-inline: var(--cv-feed-padding-inline, 0);
+      }
+
+      [part='sentinel-top'],
+      [part='sentinel-bottom'] {
+        height: var(--cv-feed-sentinel-height, 1px);
+        overflow: hidden;
+      }
+
+      [part='loading-indicator'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: var(--cv-feed-loading-min-height, 48px);
+      }
+
+      :host([busy]) [part='base'] {
+        opacity: 0.8;
+      }
+
+      :host([empty]) [part='base'] {
+        min-height: 0;
+      }
+
+      :host([error]) [part='base'] {
+        min-height: 0;
+      }
+
+      :host([loading]) [part='base'] {
+        /* loading state: host reflects attribute for consumer styling */
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.rebuildModel();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyObserver();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('label')) {
+            this.rebuildModel();
+        }
+        if (changedProperties.has('busy')) {
+            this.model.actions.setBusy(this.busy);
+        }
+        if (changedProperties.has('loading')) {
+            this.model.state.isLoading.set(this.loading);
+        }
+        if (changedProperties.has('error')) {
+            if (this.error) {
+                this.model.actions.setError('error');
+            }
+            else {
+                this.model.actions.clearError();
+            }
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.setupObserver();
+    }
+    createModel(articles) {
+        return createFeed({
+            idBase: this.idBase,
+            articles,
+            ariaLabel: this.label || undefined,
+        });
+    }
+    getArticleElements() {
+        return Array.from(this.querySelectorAll('cv-feed-article'));
+    }
+    rebuildModel() {
+        const articleElements = this.getArticleElements();
+        const previousActiveId = this.model.state.activeArticleId();
+        const wasBusy = this.busy;
+        const wasLoading = this.loading;
+        const hadError = this.error;
+        const articles = articleElements.map((el) => ({
+            id: el.articleId,
+            disabled: el.disabled,
+        }));
+        this.model = createFeed({
+            idBase: this.idBase,
+            articles,
+            ariaLabel: this.label || undefined,
+            initialActiveArticleId: previousActiveId,
+        });
+        // Restore state
+        if (wasBusy)
+            this.model.actions.setBusy(true);
+        if (wasLoading)
+            this.model.state.isLoading.set(true);
+        if (hadError)
+            this.model.actions.setError('error');
+        this.syncArticleElements();
+        this.syncHostAttributes();
+    }
+    syncArticleElements() {
+        const articleElements = this.getArticleElements();
+        for (const el of articleElements) {
+            if (!el.articleId)
+                continue;
+            try {
+                const props = this.model.contracts.getArticleProps(el.articleId);
+                el.id = props.id;
+                el.setAttribute('role', props.role);
+                el.setAttribute('tabindex', props.tabindex);
+                el.setAttribute('aria-posinset', String(props['aria-posinset']));
+                el.setAttribute('aria-setsize', String(props['aria-setsize']));
+                el.setAttribute('data-active', props['data-active']);
+                if (props['aria-disabled']) {
+                    el.setAttribute('aria-disabled', props['aria-disabled']);
+                }
+                else {
+                    el.removeAttribute('aria-disabled');
+                }
+                el.active = props['data-active'] === 'true';
+            }
+            catch {
+                // Article may not be registered yet
+            }
+        }
+    }
+    syncHostAttributes() {
+        this.empty = this.model.state.isEmpty();
+    }
+    setupObserver() {
+        this.destroyObserver();
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        const topSentinel = this.shadowRoot?.querySelector('[part="sentinel-top"]');
+        const bottomSentinel = this.shadowRoot?.querySelector('[part="sentinel-bottom"]');
+        if (!topSentinel && !bottomSentinel)
+            return;
+        this.observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting)
+                    continue;
+                if (entry.target === bottomSentinel && this.model.state.canLoadMore()) {
+                    this.model.actions.loadMore();
+                    this.dispatchEvent(new CustomEvent('cv-load-more', {
+                        detail: {},
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+                if (entry.target === topSentinel && this.model.state.canLoadNewer()) {
+                    this.model.actions.loadNewer();
+                    this.dispatchEvent(new CustomEvent('cv-load-newer', {
+                        detail: {},
+                        bubbles: true,
+                        composed: true,
+                    }));
+                }
+            }
+        }, { threshold: 0 });
+        if (topSentinel)
+            this.observer.observe(topSentinel);
+        if (bottomSentinel)
+            this.observer.observe(bottomSentinel);
+    }
+    destroyObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    handleKeyDown(event) {
+        const result = this.model.actions.handleKeyDown({
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+        });
+        if (result === null)
+            return;
+        event.preventDefault();
+        if (result === 'next' || result === 'prev') {
+            this.syncArticleElements();
+            this.requestUpdate();
+        }
+        else if (result === 'exit-after') {
+            this.dispatchEvent(new CustomEvent('cv-exit-after', {
+                detail: {},
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        else if (result === 'exit-before') {
+            this.dispatchEvent(new CustomEvent('cv-exit-before', {
+                detail: {},
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    handleSlotChange() {
+        const articleElements = this.getArticleElements();
+        const articles = articleElements.map((el) => ({
+            id: el.articleId,
+            disabled: el.disabled,
+        }));
+        // Check if articles changed
+        const currentIds = this.model.state.articleIds();
+        const newIds = articles.map((a) => a.id);
+        const changed = currentIds.length !== newIds.length || currentIds.some((id, i) => id !== newIds[i]);
+        if (changed) {
+            const previousActiveId = this.model.state.activeArticleId();
+            const wasBusy = this.busy;
+            const wasLoading = this.loading;
+            const hadError = this.error;
+            this.model = createFeed({
+                idBase: this.idBase,
+                articles,
+                ariaLabel: this.label || undefined,
+                initialActiveArticleId: previousActiveId,
+            });
+            if (wasBusy)
+                this.model.actions.setBusy(true);
+            if (wasLoading)
+                this.model.state.isLoading.set(true);
+            if (hadError)
+                this.model.actions.setError('error');
+            this.syncArticleElements();
+            this.syncHostAttributes();
+            this.requestUpdate();
+        }
+    }
+    render() {
+        const feedProps = this.model.contracts.getFeedProps();
+        return html `
+      <div
+        id=${feedProps.id}
+        role=${feedProps.role}
+        aria-label=${feedProps['aria-label'] ?? nothing}
+        aria-labelledby=${feedProps['aria-labelledby'] ?? nothing}
+        aria-busy=${feedProps['aria-busy']}
+        part="base"
+        @keydown=${this.handleKeyDown}
+      >
+        <div part="sentinel-top"></div>
+        ${this.loading
+            ? html `
+                <div part="loading-indicator" aria-hidden="true">
+                  <slot name="loading"></slot>
+                </div>
+              `
+            : nothing}
+        ${this.empty
+            ? html `
+                <slot name="empty" part="empty"></slot>
+              `
+            : nothing}
+        ${this.error
+            ? html `
+                <slot name="error" part="error"></slot>
+              `
+            : nothing}
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <div part="sentinel-bottom"></div>
+      </div>
+    `;
+    }
+}

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

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

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

@@ -0,0 +1,57 @@
+import { LitElement, css, html } from 'lit';
+export class CVGridCell extends LitElement {
+    static elementName = 'cv-grid-cell';
+    static get properties() {
+        return {
+            column: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.column = '';
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: table-cell;
+        padding: var(--cv-space-2, 8px) 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);
+        outline: none;
+      }
+
+      :host([active]) {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 14%, transparent);
+      }
+
+      :host([selected]) {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+      }
+
+      :host([disabled]) {
+        opacity: 0.55;
+      }
+
+      :host(:focus-visible) {
+        outline: 2px solid 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-grid-column.d.ts

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

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

@@ -0,0 +1,43 @@
+import { LitElement, css, html } from 'lit';
+export class CVGridColumn extends LitElement {
+    static elementName = 'cv-grid-column';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            label: { type: String, reflect: true },
+            index: { type: Number, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.label = '';
+        this.index = 0;
+        this.disabled = false;
+    }
+    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);
+        color: var(--cv-color-text, #e8ecf6);
+        font-weight: 600;
+        background: color-mix(in oklab, var(--cv-color-surface, #141923) 82%, transparent);
+      }
+
+      :host([disabled]) {
+        opacity: 0.55;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    render() {
+        return html `<slot>${this.label}</slot>`;
+    }
+}

package/dist/components/cv-grid-row.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+export type CVGridRowSlotchangeEvent = CustomEvent<null>;
+export interface CVGridRowEventMap {
+    'cv-grid-row-slotchange': CVGridRowSlotchangeEvent;
+}
+export declare class CVGridRow extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        index: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    index: number;
+    disabled: boolean;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-grid-row.js

@@ -0,0 +1,42 @@
+import { LitElement, css, html } from 'lit';
+export class CVGridRow extends LitElement {
+    static elementName = 'cv-grid-row';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            index: { type: Number, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.index = 0;
+        this.disabled = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: table-row;
+      }
+
+      :host([disabled]) {
+        opacity: 0.55;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleSlotChange() {
+        this.dispatchEvent(new CustomEvent('cv-grid-row-slotchange', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
+    }
+}