@chromvoid/uikit 0.1.0

package/dist/components/cv-window-splitter.js

@@ -0,0 +1,316 @@
+import { createWindowSplitter, } from '@chromvoid/headless-ui/window-splitter';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+const splitterKeysToPrevent = new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'Enter',
+]);
+let cvWindowSplitterNonce = 0;
+export class CVWindowSplitter extends ReatomLitElement {
+    static elementName = 'cv-window-splitter';
+    static get properties() {
+        return {
+            position: { type: Number, reflect: true },
+            min: { type: Number, reflect: true },
+            max: { type: Number, reflect: true },
+            step: { type: Number, reflect: true },
+            orientation: { type: String, reflect: true },
+            fixed: { type: Boolean, reflect: true },
+            snap: { type: String },
+            snapThreshold: { type: Number, attribute: 'snap-threshold' },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+        };
+    }
+    idBase = `cv-window-splitter-${++cvWindowSplitterNonce}`;
+    model;
+    _dragStartPosition = 0;
+    constructor() {
+        super();
+        this.position = 50;
+        this.min = 0;
+        this.max = 100;
+        this.step = 1;
+        this.orientation = 'vertical';
+        this.fixed = false;
+        this.snap = undefined;
+        this.snapThreshold = 12;
+        this.ariaLabel = '';
+        this.ariaLabelledBy = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        inline-size: 100%;
+        min-block-size: 140px;
+      }
+
+      [part='base'] {
+        inline-size: 100%;
+        block-size: 100%;
+        display: grid;
+        gap: 0;
+      }
+
+      [part='base'][data-orientation='vertical'] {
+        grid-template-columns:
+          var(--cv-window-splitter-primary-size, 50%) var(--cv-window-splitter-divider-size, 8px)
+          1fr;
+      }
+
+      [part='base'][data-orientation='horizontal'] {
+        grid-template-rows:
+          var(--cv-window-splitter-primary-size, 50%) var(--cv-window-splitter-divider-size, 8px)
+          1fr;
+      }
+
+      [part='pane'] {
+        min-inline-size: 0;
+        min-block-size: 0;
+        overflow: auto;
+      }
+
+      [part='pane'][data-pane='primary'] {
+        border-inline-end: 1px solid transparent;
+      }
+
+      [part='separator'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: color-mix(in oklab, var(--cv-color-surface, #141923) 82%, black);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        color: var(--cv-color-text-muted, #9aa6bf);
+        user-select: none;
+        touch-action: none;
+      }
+
+      [part='separator']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='separator'][data-orientation='vertical'] {
+        cursor: col-resize;
+      }
+
+      [part='separator'][data-orientation='horizontal'] {
+        cursor: row-resize;
+      }
+
+      [part='separator-handle'] {
+        opacity: 0.8;
+        font-size: 11px;
+        line-height: 1;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('step') ||
+            changedProperties.has('orientation') ||
+            changedProperties.has('fixed') ||
+            changedProperties.has('snap') ||
+            changedProperties.has('snapThreshold') ||
+            changedProperties.has('ariaLabel') ||
+            changedProperties.has('ariaLabelledBy')) {
+            this.model = this.createModel();
+            return;
+        }
+        if (changedProperties.has('position') && this.model.state.position() !== this.position) {
+            this.model.actions.setPosition(this.position);
+        }
+    }
+    createModel() {
+        return createWindowSplitter({
+            idBase: this.idBase,
+            min: this.min,
+            max: this.max,
+            position: this.position,
+            step: this.step,
+            orientation: this.orientation,
+            isFixed: this.fixed,
+            snap: this.snap,
+            snapThreshold: this.snapThreshold,
+            ariaLabel: this.ariaLabel || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+        });
+    }
+    getPercentage() {
+        const min = this.model.state.min();
+        const max = this.model.state.max();
+        if (max <= min)
+            return 0;
+        return Math.max(0, Math.min(100, ((this.model.state.position() - min) / (max - min)) * 100));
+    }
+    dispatchInput(detail) {
+        this.dispatchEvent(new CustomEvent('cv-input', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchChange(detail) {
+        this.dispatchEvent(new CustomEvent('cv-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    syncFromModelAndEmit(previousPosition, emitChange) {
+        const nextPosition = this.model.state.position();
+        this.position = nextPosition;
+        if (nextPosition === previousPosition)
+            return false;
+        const detail = { position: nextPosition };
+        this.dispatchInput(detail);
+        if (emitChange) {
+            this.dispatchChange(detail);
+        }
+        return true;
+    }
+    handleSeparatorKeyDown(event) {
+        if (splitterKeysToPrevent.has(event.key)) {
+            event.preventDefault();
+        }
+        const previousPosition = this.model.state.position();
+        this.model.actions.handleKeyDown({ key: event.key });
+        // Re-apply setPosition to trigger snap resolution if snap is configured
+        if (this.snap) {
+            this.model.actions.setPosition(this.model.state.position());
+        }
+        this.syncFromModelAndEmit(previousPosition, true);
+    }
+    _onPointerDown = (e) => {
+        if (e.button !== undefined &&
+            e.button !== 0)
+            return;
+        e.preventDefault();
+        const sep = e.currentTarget;
+        sep.setPointerCapture(e.pointerId);
+        this.model.actions.startDragging();
+        this._dragStartPosition = this.position;
+        sep.setAttribute('data-dragging', '');
+        sep.addEventListener('pointermove', this._onPointerMove);
+        sep.addEventListener('pointerup', this._onPointerUp);
+        sep.addEventListener('pointercancel', this._onPointerUp);
+        sep.addEventListener('lostpointercapture', this._onLostPointerCapture);
+    };
+    _onPointerMove = (e) => {
+        const base = this.shadowRoot?.querySelector('[part="base"]');
+        if (!base)
+            return;
+        const rect = base.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        const ratioRaw = this.orientation === 'vertical'
+            ? (e.clientX - rect.left) / rect.width
+            : (e.clientY - rect.top) / rect.height;
+        const ratio = Math.max(0, Math.min(1, ratioRaw));
+        const min = this.model.state.min();
+        const max = this.model.state.max();
+        const newPos = min + ratio * (max - min);
+        this.model.actions.setPosition(newPos);
+        const pos = this.model.state.position();
+        this.position = pos;
+        this.dispatchEvent(new CustomEvent('cv-input', { detail: { position: pos }, bubbles: true, composed: true }));
+    };
+    _onPointerUp = (e) => {
+        const sep = e.currentTarget;
+        sep.removeEventListener('pointermove', this._onPointerMove);
+        sep.removeEventListener('pointerup', this._onPointerUp);
+        sep.removeEventListener('pointercancel', this._onPointerUp);
+        sep.removeEventListener('lostpointercapture', this._onLostPointerCapture);
+        sep.removeAttribute('data-dragging');
+        this.model.actions.stopDragging();
+        const pos = this.model.state.position();
+        if (pos !== this._dragStartPosition) {
+            this.dispatchEvent(new CustomEvent('cv-change', { detail: { position: pos }, bubbles: true, composed: true }));
+        }
+    };
+    _onLostPointerCapture = (e) => {
+        const sep = e.currentTarget;
+        sep.removeEventListener('pointermove', this._onPointerMove);
+        sep.removeEventListener('pointerup', this._onPointerUp);
+        sep.removeEventListener('pointercancel', this._onPointerUp);
+        sep.removeEventListener('lostpointercapture', this._onLostPointerCapture);
+        sep.removeAttribute('data-dragging');
+        this.model.actions.stopDragging();
+        const pos = this.model.state.position();
+        if (pos !== this._dragStartPosition) {
+            this.dispatchEvent(new CustomEvent('cv-change', { detail: { position: pos }, bubbles: true, composed: true }));
+        }
+    };
+    render() {
+        const splitterProps = this.model.contracts.getSplitterProps();
+        const primaryPaneProps = this.model.contracts.getPrimaryPaneProps();
+        const secondaryPaneProps = this.model.contracts.getSecondaryPaneProps();
+        const percentage = this.getPercentage();
+        const isDragging = this.model.state.isDragging();
+        return html `
+      <div
+        part="base"
+        data-orientation=${this.orientation}
+        style=${`--cv-window-splitter-primary-size:${percentage}%;`}
+      >
+        <div
+          id=${primaryPaneProps.id}
+          data-pane=${primaryPaneProps['data-pane']}
+          data-orientation=${primaryPaneProps['data-orientation']}
+          part="pane"
+        >
+          <slot name="primary"></slot>
+        </div>
+
+        <div
+          id=${splitterProps.id}
+          role=${splitterProps.role}
+          tabindex=${splitterProps.tabindex}
+          aria-valuenow=${splitterProps['aria-valuenow']}
+          aria-valuemin=${splitterProps['aria-valuemin']}
+          aria-valuemax=${splitterProps['aria-valuemax']}
+          aria-valuetext=${splitterProps['aria-valuetext'] ?? nothing}
+          aria-orientation=${splitterProps['aria-orientation']}
+          aria-controls=${splitterProps['aria-controls']}
+          aria-label=${splitterProps['aria-label'] ?? nothing}
+          aria-labelledby=${splitterProps['aria-labelledby'] ?? nothing}
+          data-orientation=${this.orientation}
+          ?data-dragging=${isDragging}
+          part="separator"
+          @keydown=${this.handleSeparatorKeyDown}
+          @pointerdown=${this._onPointerDown}
+        >
+          <span part="separator-handle">
+            <slot name="separator">${this.orientation === 'vertical' ? '⋮' : '⋯'}</slot>
+          </span>
+        </div>
+
+        <div
+          id=${secondaryPaneProps.id}
+          data-pane=${secondaryPaneProps['data-pane']}
+          data-orientation=${secondaryPaneProps['data-orientation']}
+          part="pane"
+        >
+          <slot name="secondary"></slot>
+        </div>
+      </div>
+    `;
+    }
+}

package/dist/components/index.d.ts

@@ -0,0 +1,94 @@
+export { CVAccordion } from './cv-accordion.js';
+export { CVAccordionItem } from './cv-accordion-item.js';
+export { CVAlertDialog } from './cv-alert-dialog.js';
+export { CVAlert } from './cv-alert.js';
+export { CVBreadcrumb } from './cv-breadcrumb.js';
+export { CVBreadcrumbItem } from './cv-breadcrumb-item.js';
+export { CVBadge } from './cv-badge.js';
+export { CVButton } from './cv-button.js';
+export { CVCallout } from './cv-callout.js';
+export { CVCopyButton } from './cv-copy-button.js';
+export { CVCard } from './cv-card.js';
+export { CVCarousel } from './cv-carousel.js';
+export { CVCarouselSlide } from './cv-carousel-slide.js';
+export { CVCheckbox } from './cv-checkbox.js';
+export { CVCommandItem } from './cv-command-item.js';
+export { CVCommandPalette } from './cv-command-palette.js';
+export { CVCombobox } from './cv-combobox.js';
+export { CVComboboxGroup } from './cv-combobox-group.js';
+export { CVComboboxOption } from './cv-combobox-option.js';
+export { CVContextMenu } from './cv-context-menu.js';
+export { CVDisclosure } from './cv-disclosure.js';
+export { CVDatePicker } from './cv-date-picker.js';
+export { CVDialog } from './cv-dialog.js';
+export { CVDrawer } from './cv-drawer.js';
+export { CVFeed } from './cv-feed.js';
+export { CVFeedArticle } from './cv-feed-article.js';
+export { CVGridCell } from './cv-grid-cell.js';
+export { CVGridColumn } from './cv-grid-column.js';
+export { CVGridRow } from './cv-grid-row.js';
+export { CVGrid } from './cv-grid.js';
+export { CVIcon } from './cv-icon.js';
+export { CVInput } from './cv-input.js';
+export type { CVAccordionItemEventMap, CVAccordionItemTriggerClickEvent, CVAccordionItemTriggerFocusEvent, CVAccordionItemTriggerKeydownDetail, CVAccordionItemTriggerKeydownEvent, } from './cv-accordion-item.js';
+export type { CVComboboxChangeEvent, CVComboboxClearEvent, CVComboboxEventDetail, CVComboboxEventMap, CVComboboxInputEvent, } from './cv-combobox.js';
+export type { CVCopyButtonCopyDetail, CVCopyButtonCopyEvent, CVCopyButtonErrorDetail, CVCopyButtonErrorEvent, CVCopyButtonEventMap, } from './cv-copy-button.js';
+export type { CVFeedEventMap, CVFeedExitAfterEvent, CVFeedExitBeforeEvent, CVFeedLoadMoreEvent, CVFeedLoadNewerEvent, } from './cv-feed.js';
+export type { CVGridRowEventMap, CVGridRowSlotchangeEvent } from './cv-grid-row.js';
+export type { CVInputBlurEvent, CVInputChangeEvent, CVInputClearEvent, CVInputEventMap, CVInputFocusEvent, CVInputInputEvent, CVInputValueDetail, } from './cv-input.js';
+export type { CVMenuButtonActionEvent, CVMenuButtonChangeEvent, CVMenuButtonEventDetail, CVMenuButtonEventMap, CVMenuButtonInputEvent, } from './cv-menu-button.js';
+export type { CVNumberBlurEvent, CVNumberChangeEvent, CVNumberClearEvent, CVNumberEventMap, CVNumberFocusEvent, CVNumberValueDetail, } from './cv-number.js';
+export type { CVSelectChangeEvent, CVSelectEventDetail, CVSelectEventMap, CVSelectInputEvent, } from './cv-select.js';
+export type { CVSidebarChangeDetail, CVSidebarChangeEvent, CVSidebarEventMap, CVSidebarInputDetail, CVSidebarInputEvent, CVSidebarScrollspyChangeDetail, CVSidebarScrollspyChangeEvent, } from './cv-sidebar.js';
+export type { CVTableChangeEvent, CVTableEventDetail, CVTableEventMap, CVTableFocusChangeDetail, CVTableFocusChangeEvent, CVTableInputEvent, CVTableSelectionChangeDetail, CVTableSelectionChangeEvent, } from './cv-table.js';
+export type { CVTableRowEventMap, CVTableRowSlotchangeEvent } from './cv-table-row.js';
+export type { CVTextareaBlurEvent, CVTextareaChangeEvent, CVTextareaEventMap, CVTextareaFocusEvent, CVTextareaInputEvent, CVTextareaValueDetail, } from './cv-textarea.js';
+export type { CVTreegridRowEventMap, CVTreegridRowSlotchangeEvent } from './cv-treegrid-row.js';
+export type { CVTreeItemEventMap, CVTreeItemToggleDetail, CVTreeItemToggleEvent } from './cv-treeitem.js';
+export { CVLandmark } from './cv-landmark.js';
+export { CVListbox } from './cv-listbox.js';
+export { CVListboxGroup } from './cv-listbox-group.js';
+export { CVLink } from './cv-link.js';
+export { CVMenu } from './cv-menu.js';
+export { CVMenuButton } from './cv-menu-button.js';
+export { CVMenuGroup } from './cv-menu-group.js';
+export { CVMenuItem } from './cv-menu-item.js';
+export { CVMeter } from './cv-meter.js';
+export { CVNumber } from './cv-number.js';
+export { CVOption } from './cv-option.js';
+export { CVPopover } from './cv-popover.js';
+export { CVProgress } from './cv-progress.js';
+export { CVProgressRing } from './cv-progress-ring.js';
+export { CVRadio } from './cv-radio.js';
+export { CVRadioGroup } from './cv-radio-group.js';
+export { CVSelect } from './cv-select.js';
+export { CVSidebar } from './cv-sidebar.js';
+export { CVSidebarItem } from './cv-sidebar-item.js';
+export { CVSelectGroup } from './cv-select-group.js';
+export { CVSelectOption } from './cv-select-option.js';
+export { CVSlider } from './cv-slider.js';
+export { CVSliderMultiThumb } from './cv-slider-multi-thumb.js';
+export { CVSpinbutton } from './cv-spinbutton.js';
+export { CVSpinner } from './cv-spinner.js';
+export { CVSwitch } from './cv-switch.js';
+export { CVTableCell } from './cv-table-cell.js';
+export { CVTableColumn } from './cv-table-column.js';
+export { CVTableRow } from './cv-table-row.js';
+export { CVTable } from './cv-table.js';
+export { CVTextarea } from './cv-textarea.js';
+export { CVTab } from './cv-tab.js';
+export { CVTabPanel } from './cv-tab-panel.js';
+export { CVTabs } from './cv-tabs.js';
+export { CVToast } from './cv-toast.js';
+export { CVToastRegion } from './cv-toast-region.js';
+export { CVTreegrid } from './cv-treegrid.js';
+export { CVTreegridCell } from './cv-treegrid-cell.js';
+export { CVTreegridColumn } from './cv-treegrid-column.js';
+export { CVTreegridRow } from './cv-treegrid-row.js';
+export { CVTreeItem } from './cv-treeitem.js';
+export { CVTreeview } from './cv-treeview.js';
+export { CVToolbar } from './cv-toolbar.js';
+export { CVToolbarItem } from './cv-toolbar-item.js';
+export { CVToolbarSeparator } from './cv-toolbar-separator.js';
+export { CVTooltip } from './cv-tooltip.js';
+export { CVWindowSplitter } from './cv-window-splitter.js';

package/dist/components/index.js

@@ -0,0 +1,79 @@
+export { CVAccordion } from './cv-accordion.js';
+export { CVAccordionItem } from './cv-accordion-item.js';
+export { CVAlertDialog } from './cv-alert-dialog.js';
+export { CVAlert } from './cv-alert.js';
+export { CVBreadcrumb } from './cv-breadcrumb.js';
+export { CVBreadcrumbItem } from './cv-breadcrumb-item.js';
+export { CVBadge } from './cv-badge.js';
+export { CVButton } from './cv-button.js';
+export { CVCallout } from './cv-callout.js';
+export { CVCopyButton } from './cv-copy-button.js';
+export { CVCard } from './cv-card.js';
+export { CVCarousel } from './cv-carousel.js';
+export { CVCarouselSlide } from './cv-carousel-slide.js';
+export { CVCheckbox } from './cv-checkbox.js';
+export { CVCommandItem } from './cv-command-item.js';
+export { CVCommandPalette } from './cv-command-palette.js';
+export { CVCombobox } from './cv-combobox.js';
+export { CVComboboxGroup } from './cv-combobox-group.js';
+export { CVComboboxOption } from './cv-combobox-option.js';
+export { CVContextMenu } from './cv-context-menu.js';
+export { CVDisclosure } from './cv-disclosure.js';
+export { CVDatePicker } from './cv-date-picker.js';
+export { CVDialog } from './cv-dialog.js';
+export { CVDrawer } from './cv-drawer.js';
+export { CVFeed } from './cv-feed.js';
+export { CVFeedArticle } from './cv-feed-article.js';
+export { CVGridCell } from './cv-grid-cell.js';
+export { CVGridColumn } from './cv-grid-column.js';
+export { CVGridRow } from './cv-grid-row.js';
+export { CVGrid } from './cv-grid.js';
+export { CVIcon } from './cv-icon.js';
+export { CVInput } from './cv-input.js';
+export { CVLandmark } from './cv-landmark.js';
+export { CVListbox } from './cv-listbox.js';
+export { CVListboxGroup } from './cv-listbox-group.js';
+export { CVLink } from './cv-link.js';
+export { CVMenu } from './cv-menu.js';
+export { CVMenuButton } from './cv-menu-button.js';
+export { CVMenuGroup } from './cv-menu-group.js';
+export { CVMenuItem } from './cv-menu-item.js';
+export { CVMeter } from './cv-meter.js';
+export { CVNumber } from './cv-number.js';
+export { CVOption } from './cv-option.js';
+export { CVPopover } from './cv-popover.js';
+export { CVProgress } from './cv-progress.js';
+export { CVProgressRing } from './cv-progress-ring.js';
+export { CVRadio } from './cv-radio.js';
+export { CVRadioGroup } from './cv-radio-group.js';
+export { CVSelect } from './cv-select.js';
+export { CVSidebar } from './cv-sidebar.js';
+export { CVSidebarItem } from './cv-sidebar-item.js';
+export { CVSelectGroup } from './cv-select-group.js';
+export { CVSelectOption } from './cv-select-option.js';
+export { CVSlider } from './cv-slider.js';
+export { CVSliderMultiThumb } from './cv-slider-multi-thumb.js';
+export { CVSpinbutton } from './cv-spinbutton.js';
+export { CVSpinner } from './cv-spinner.js';
+export { CVSwitch } from './cv-switch.js';
+export { CVTableCell } from './cv-table-cell.js';
+export { CVTableColumn } from './cv-table-column.js';
+export { CVTableRow } from './cv-table-row.js';
+export { CVTable } from './cv-table.js';
+export { CVTextarea } from './cv-textarea.js';
+export { CVTab } from './cv-tab.js';
+export { CVTabPanel } from './cv-tab-panel.js';
+export { CVTabs } from './cv-tabs.js';
+export { CVToast } from './cv-toast.js';
+export { CVToastRegion } from './cv-toast-region.js';
+export { CVTreegrid } from './cv-treegrid.js';
+export { CVTreegridCell } from './cv-treegrid-cell.js';
+export { CVTreegridColumn } from './cv-treegrid-column.js';
+export { CVTreegridRow } from './cv-treegrid-row.js';
+export { CVTreeItem } from './cv-treeitem.js';
+export { CVTreeview } from './cv-treeview.js';
+export { CVToolbar } from './cv-toolbar.js';
+export { CVToolbarItem } from './cv-toolbar-item.js';
+export { CVToolbarSeparator } from './cv-toolbar-separator.js';
+export { CVTooltip } from './cv-tooltip.js';
+export { CVWindowSplitter } from './cv-window-splitter.js';

package/dist/dialog/create-dialog-controller.d.ts

@@ -0,0 +1,31 @@
+import { type TemplateResult } from 'lit';
+export type DialogPriority = 'polite' | 'assertive';
+export interface DialogControllerAdapters {
+    announce?: (message: string, priority?: DialogPriority) => void;
+    setInertExcept?: (element: HTMLElement) => void;
+    restoreInert?: () => void;
+    findFirstFocusable?: (container: Element) => HTMLElement | null;
+}
+export interface ManagedDialogOptions<T> {
+    element: HTMLElement;
+    title?: string;
+    show: () => Promise<T>;
+    close: () => void;
+}
+export interface CustomDialogOptions {
+    title?: string;
+    content: TemplateResult | string;
+    footer?: TemplateResult;
+    size?: 's' | 'm' | 'l' | 'xl';
+    closable?: boolean;
+    noHeader?: boolean;
+    noFooter?: boolean;
+    className?: string;
+}
+export interface DialogController {
+    present<T>(options: ManagedDialogOptions<T>): Promise<T>;
+    showCustom<T>(options: CustomDialogOptions, resultHandler: (dialog: HTMLElement, resolve: (value: T | null) => void) => void): Promise<T | null>;
+    closeAll(): void;
+    getActiveCount(): number;
+}
+export declare function createDialogController(adapters?: DialogControllerAdapters): DialogController;