@chromvoid/uikit 0.1.0

package/LICENSE

@@ -0,0 +1,8 @@
+ChromVoid uses the GNU Affero General Public License, version 3, for the
+components identified as `AGPL-3.0-only` in `LICENSING.md`.
+
+Canonical text:
+https://www.gnu.org/licenses/agpl-3.0.txt
+
+Human-readable overview:
+https://www.gnu.org/licenses/agpl-3.0.en.html

package/README.md

@@ -0,0 +1,96 @@
+# @chromvoid/uikit
+
+Thin Lit UI layer over `@chromvoid/headless-ui`.
+
+## Scope (MVP)
+
+- `cv-theme-provider` + theme engine API
+- `cv-accordion` + `cv-accordion-item`
+- `cv-alert-dialog`
+- `cv-alert`
+- `cv-breadcrumb` + `cv-breadcrumb-item`
+- `cv-button`
+- `cv-carousel` + `cv-carousel-slide`
+- `cv-checkbox`
+- `cv-command-palette` + `cv-command-item`
+- `cv-combobox` + `cv-combobox-option`
+- `cv-context-menu` + `cv-menu-item`
+- `cv-disclosure`
+- `cv-dialog`
+- `cv-feed` + `cv-feed-article`
+- `cv-grid` + `cv-grid-column` + `cv-grid-row` + `cv-grid-cell`
+- `cv-landmark`
+- `cv-link`
+- `cv-listbox` + `cv-option`
+- `cv-menu` + `cv-menu-item`
+- `cv-menu-button` + `cv-menu-item`
+- `cv-meter`
+- `cv-popover`
+- `cv-radio-group` + `cv-radio`
+- `cv-select` + `cv-select-option` + `cv-select-group`
+- `cv-slider`
+- `cv-slider-multi-thumb`
+- `cv-spinbutton`
+- `cv-switch`
+- `cv-table` + `cv-table-column` + `cv-table-row` + `cv-table-cell`
+- `cv-progress`
+- `cv-tabs` + `cv-tab` + `cv-tab-panel`
+- `cv-toast-region` + imperative toast controller
+- `cv-treegrid` + `cv-treegrid-column` + `cv-treegrid-row` + `cv-treegrid-cell`
+- `cv-treeview` + `cv-treeitem`
+- `cv-toolbar` + `cv-toolbar-item`
+- `cv-tooltip`
+- `cv-window-splitter`
+- vendored Reatom Lit runtime helpers
+
+## Vendored Reatom Lit source
+
+The `src/reatom-lit/*` files are vendored from:
+
+- Repository: `https://github.com/kaifaty/reatom`
+- Branch: `LIT_UPDATE`
+- Commit: `37ea4f8f6ff7165080f0f6c44603ab508cdf7238`
+
+## Usage
+
+```ts
+import {registerUikit} from '@chromvoid/uikit/register'
+
+registerUikit()
+```
+
+Optional theme css defaults:
+
+```ts
+import '@chromvoid/uikit/theme/tokens.css'
+```
+
+## Package-local Workflow
+
+```bash
+npm install
+npm run lint
+npm run test
+npm run build
+npm pack --dry-run
+```
+
+Run local documentation site:
+
+```bash
+npm run docs:dev
+```
+
+Open the docs dev server through the legacy shortcut:
+
+```bash
+npm run demo
+```
+
+The interactive playground now lives inside the documentation site at `/guide/playground`.
+
+Build the static docs output used for GitHub Pages:
+
+```bash
+npm run docs:build
+```

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

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+interface CVAccordionItemTriggerState {
+    id: string;
+    role: 'button';
+    tabindex: '0' | '-1';
+    ariaExpanded: 'true' | 'false';
+    ariaControls: string;
+    ariaDisabled: 'true' | 'false';
+}
+interface CVAccordionItemPanelState {
+    id: string;
+    role: 'region';
+    ariaLabelledBy: string;
+    hidden: boolean;
+}
+export interface CVAccordionItemContracts {
+    headerId: string;
+    trigger: CVAccordionItemTriggerState;
+    panel: CVAccordionItemPanelState;
+}
+export interface CVAccordionItemTriggerKeydownDetail {
+    key: string;
+}
+export type CVAccordionItemTriggerClickEvent = CustomEvent<null>;
+export type CVAccordionItemTriggerFocusEvent = CustomEvent<null>;
+export type CVAccordionItemTriggerKeydownEvent = CustomEvent<CVAccordionItemTriggerKeydownDetail>;
+export interface CVAccordionItemEventMap {
+    'cv-accordion-item-trigger-click': CVAccordionItemTriggerClickEvent;
+    'cv-accordion-item-trigger-focus': CVAccordionItemTriggerFocusEvent;
+    'cv-accordion-item-trigger-keydown': CVAccordionItemTriggerKeydownEvent;
+}
+export declare class CVAccordionItem extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        expanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    disabled: boolean;
+    expanded: boolean;
+    active: boolean;
+    private headerId;
+    private triggerState;
+    private panelState;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    applyContracts(contracts: CVAccordionItemContracts): void;
+    focusTrigger(): void;
+    private handleTriggerClick;
+    private handleTriggerFocus;
+    private handleTriggerKeyDown;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,176 @@
+import { LitElement, css, html, nothing } from 'lit';
+export class CVAccordionItem extends LitElement {
+    static elementName = 'cv-accordion-item';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            expanded: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+        };
+    }
+    headerId = '';
+    triggerState = {
+        id: '',
+        role: 'button',
+        tabindex: '-1',
+        ariaExpanded: 'false',
+        ariaControls: '',
+        ariaDisabled: 'false',
+    };
+    panelState = {
+        id: '',
+        role: 'region',
+        ariaLabelledBy: '',
+        hidden: true,
+    };
+    constructor() {
+        super();
+        this.value = '';
+        this.disabled = false;
+        this.expanded = false;
+        this.active = false;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-space-1, 4px);
+      }
+
+      [part='trigger'] {
+        inline-size: 100%;
+        min-block-size: 36px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--cv-space-2, 8px);
+        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);
+        font: inherit;
+        text-align: start;
+      }
+
+      [part='trigger']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='trigger-icon'] {
+        inline-size: 16px;
+        block-size: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--cv-color-text-muted, #9aa6bf);
+        transition: transform var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+      }
+
+      :host([expanded]) [part='trigger-icon'] {
+        transform: rotate(90deg);
+      }
+
+      [part='panel'] {
+        padding: 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-elevated, #1d2432);
+        color: var(--cv-color-text, #e8ecf6);
+      }
+
+      [part='panel'][hidden] {
+        display: none;
+      }
+
+      :host([active]) [part='trigger'] {
+        border-color: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([disabled]) [part='trigger'] {
+        opacity: 0.55;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    applyContracts(contracts) {
+        this.headerId = contracts.headerId;
+        this.triggerState = contracts.trigger;
+        this.panelState = contracts.panel;
+        this.expanded = contracts.trigger.ariaExpanded === 'true';
+        this.active = contracts.trigger.tabindex === '0';
+        this.requestUpdate();
+    }
+    focusTrigger() {
+        const trigger = this.renderRoot.querySelector('[part="trigger"]');
+        trigger?.focus();
+    }
+    handleTriggerClick() {
+        this.dispatchEvent(new CustomEvent('cv-accordion-item-trigger-click', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleTriggerFocus() {
+        this.dispatchEvent(new CustomEvent('cv-accordion-item-trigger-focus', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    handleTriggerKeyDown(event) {
+        const dispatched = this.dispatchEvent(new CustomEvent('cv-accordion-item-trigger-keydown', {
+            detail: { key: event.key },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        }));
+        if (!dispatched) {
+            event.preventDefault();
+        }
+    }
+    render() {
+        return html `
+      <div part="base">
+        <h3 id=${this.headerId} part="header">
+          <button
+            id=${this.triggerState.id}
+            role=${this.triggerState.role}
+            tabindex=${this.triggerState.tabindex}
+            aria-expanded=${this.triggerState.ariaExpanded}
+            aria-controls=${this.triggerState.ariaControls}
+            aria-disabled=${this.triggerState.ariaDisabled}
+            ?disabled=${this.triggerState.ariaDisabled === 'true'}
+            part="trigger"
+            type="button"
+            @click=${this.handleTriggerClick}
+            @focus=${this.handleTriggerFocus}
+            @keydown=${this.handleTriggerKeyDown}
+          >
+            <slot name="trigger"></slot>
+            <span part="trigger-icon" aria-hidden="true">▶</span>
+          </button>
+        </h3>
+
+        <div
+          id=${this.panelState.id}
+          role=${this.panelState.role}
+          aria-labelledby=${this.panelState.ariaLabelledBy || nothing}
+          ?hidden=${this.panelState.hidden}
+          part="panel"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}

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

@@ -0,0 +1,79 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVAccordionEventDetail {
+    value: string | null;
+    values: string[];
+    activeId: string | null;
+}
+export declare class CVAccordion extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        expandedValues: {
+            attribute: boolean;
+        };
+        allowMultiple: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        allowZeroExpanded: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        headingLevel: {
+            type: NumberConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        revealExpanded: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    expandedValues: string[];
+    allowMultiple: boolean;
+    allowZeroExpanded: boolean;
+    headingLevel: number;
+    ariaLabel: string;
+    revealExpanded: boolean;
+    private readonly idBase;
+    private itemRecords;
+    private itemListeners;
+    private readonly model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getItemElements;
+    private ensureItemValue;
+    private resolveConfiguredExpandedIds;
+    private syncFromSlot;
+    private detachItemListeners;
+    private attachItemListeners;
+    private syncItemElements;
+    private syncControlledValuesFromModel;
+    private captureSnapshot;
+    private focusActiveItem;
+    private dispatchInput;
+    private dispatchChange;
+    private revealExpandedItem;
+    private applyInteractionResult;
+    private handleItemTriggerClick;
+    private handleItemTriggerFocus;
+    private handleItemTriggerKeyDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}