@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-bottom-sheet.js

@@ -0,0 +1,513 @@
+import { css } from 'lit';
+import { html } from '../reatom-lit/index.js';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVDialog } from './cv-dialog.js';
+const DRAG_DISMISS_DISTANCE_PX = 96;
+const DRAG_DISMISS_VELOCITY_PX_PER_MS = 0.75;
+const DRAG_DETENT_DISTANCE_PX = 64;
+const DRAG_DETENT_VELOCITY_PX_PER_MS = 0.5;
+const DETENT_ORDER = ['collapsed', 'middle', 'expanded'];
+export class CVBottomSheet extends ReatomLitElement {
+    static elementName = 'cv-bottom-sheet';
+    static get properties() {
+        return {
+            open: { type: Boolean, reflect: true },
+            modal: { type: Boolean, reflect: true },
+            type: { type: String, reflect: true },
+            closeOnEscape: { type: Boolean, attribute: 'close-on-escape', reflect: true },
+            closeOnOutsidePointer: {
+                type: Boolean,
+                attribute: 'close-on-outside-pointer',
+                reflect: true,
+            },
+            closeOnOutsideFocus: { type: Boolean, attribute: 'close-on-outside-focus', reflect: true },
+            initialFocusId: { type: String, attribute: 'initial-focus-id' },
+            noHeader: { type: Boolean, attribute: 'no-header', reflect: true },
+            closable: { type: Boolean, reflect: true },
+            showHandle: { type: Boolean, attribute: 'show-handle', reflect: true },
+            dragToClose: { type: Boolean, attribute: 'drag-to-close', reflect: true },
+            detents: { type: String, reflect: true },
+            detent: { type: String, reflect: true },
+            handleLabel: { type: String, attribute: 'handle-label' },
+        };
+    }
+    dragPointerId = null;
+    dragStartY = 0;
+    dragStartedAt = 0;
+    dragStartDetent = 'expanded';
+    dragMoved = false;
+    suppressNextHandleClick = false;
+    constructor() {
+        super();
+        this.open = false;
+        this.modal = true;
+        this.type = 'dialog';
+        this.closeOnEscape = true;
+        this.closeOnOutsidePointer = true;
+        this.closeOnOutsideFocus = true;
+        this.initialFocusId = '';
+        this.noHeader = false;
+        this.closable = true;
+        this.showHandle = true;
+        this.dragToClose = true;
+        this.detents = '';
+        this.detent = 'expanded';
+        this.handleLabel = 'Resize sheet';
+    }
+    static styles = css `
+    :host {
+      display: contents;
+    }
+
+    cv-dialog {
+      --cv-bottom-sheet-overlay-block-start: max(
+        var(--cv-bottom-sheet-safe-top, 16px),
+        env(safe-area-inset-top, 0px)
+      );
+      --cv-bottom-sheet-safe-bottom-inset: var(
+        --cv-bottom-sheet-safe-bottom,
+        var(--safe-area-bottom-active, var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)))
+      );
+      --cv-bottom-sheet-keyboard-bottom-inset: var(
+        --cv-bottom-sheet-keyboard-inset,
+        var(--visual-viewport-bottom-inset, 0px)
+      );
+      --cv-bottom-sheet-visible-viewport-block-size: var(--visual-viewport-block-size, 100dvh);
+      --cv-bottom-sheet-overlay-block-end: calc(
+        var(--cv-bottom-sheet-safe-bottom-inset) + var(--cv-bottom-sheet-keyboard-bottom-inset)
+      );
+      --cv-bottom-sheet-available-height: max(
+        0px,
+        calc(
+          var(--cv-bottom-sheet-visible-viewport-block-size) - var(
+              --cv-bottom-sheet-overlay-block-start
+            ) - var(--cv-bottom-sheet-safe-bottom-inset)
+        )
+      );
+      --cv-dialog-z-index: var(--cv-bottom-sheet-z-index, 40);
+      --cv-dialog-width: var(--cv-bottom-sheet-width, 100%);
+      --cv-dialog-max-height: var(--cv-bottom-sheet-max-height, min(82dvh, calc(100dvh - 32px)));
+      --cv-dialog-border-radius: var(
+        --cv-bottom-sheet-border-radius,
+        var(--cv-radius-lg, 14px) var(--cv-radius-lg, 14px) 0 0
+      );
+      --cv-dialog-overlay-color: var(--cv-bottom-sheet-overlay-color, var(--cv-color-overlay));
+      --cv-dialog-padding-block: 0px;
+      --cv-dialog-padding-inline: 0px;
+      --cv-dialog-content-transition-property: transform;
+      --cv-dialog-transition-duration: var(--cv-bottom-sheet-dismiss-duration, 180ms);
+      --cv-dialog-transition-easing-open: var(--cv-easing-decelerate, cubic-bezier(0, 0, 0.2, 1));
+      --cv-dialog-transition-easing-close: var(--cv-easing-standard, ease);
+      --cv-dialog-content-closed-transform: translateY(
+        calc(100% + var(--cv-bottom-sheet-overlay-block-end) + 32px)
+      );
+      --cv-dialog-content-open-transform: translateY(var(--cv-bottom-sheet-drag-offset, 0px));
+    }
+
+    cv-dialog::part(trigger) {
+      display: none;
+    }
+
+    cv-dialog::part(overlay) {
+      place-items: end center;
+      padding-block-start: var(--cv-bottom-sheet-overlay-block-start);
+      padding-block-end: 0px;
+      transform: translateY(calc(0px - var(--cv-bottom-sheet-overlay-block-end)));
+      padding-inline: var(--cv-bottom-sheet-inline-inset, 0px);
+      transition: transform 0.12s ease;
+    }
+
+    cv-dialog::part(content) {
+      inline-size: var(--cv-bottom-sheet-width, 100%);
+      max-inline-size: var(--cv-bottom-sheet-max-width, 100%);
+      max-block-size: min(
+        var(--cv-bottom-sheet-max-height, min(82dvh, calc(100dvh - 32px))),
+        var(--cv-bottom-sheet-available-height)
+      );
+      gap: 0;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      overflow: hidden;
+      padding: 0;
+      border-block-end: 0;
+      border-radius: var(
+        --cv-bottom-sheet-border-radius,
+        var(--cv-radius-lg, 14px) var(--cv-radius-lg, 14px) 0 0
+      );
+      will-change: transform;
+    }
+
+    cv-dialog.has-detents {
+      --cv-bottom-sheet-detent-max-height: min(
+        var(--cv-bottom-sheet-expanded-height, min(92dvh, calc(100dvh - 32px))),
+        var(--cv-bottom-sheet-available-height)
+      );
+      --cv-bottom-sheet-active-detent-height: var(--cv-bottom-sheet-detent-max-height);
+      --cv-bottom-sheet-detent-visible-height: min(
+        var(--cv-bottom-sheet-active-detent-height),
+        var(--cv-bottom-sheet-detent-max-height)
+      );
+      --cv-bottom-sheet-detent-offset: 0px;
+      --cv-dialog-content-open-transform: translateY(
+        calc(var(--cv-bottom-sheet-detent-offset, 0px) + var(--cv-bottom-sheet-drag-offset, 0px))
+      );
+    }
+
+    cv-dialog.has-detents::part(content) {
+      block-size: var(--cv-bottom-sheet-detent-max-height);
+    }
+
+    cv-dialog.has-detents::part(body) {
+      block-size: var(--cv-bottom-sheet-detent-visible-height);
+      max-block-size: var(--cv-bottom-sheet-detent-visible-height);
+    }
+
+    cv-dialog.detent-collapsed {
+      --cv-bottom-sheet-active-detent-height: var(--cv-bottom-sheet-collapsed-height, 148px);
+      --cv-bottom-sheet-detent-offset: max(
+        0px,
+        calc(var(--cv-bottom-sheet-detent-max-height) - var(--cv-bottom-sheet-collapsed-height, 148px))
+      );
+    }
+
+    cv-dialog.detent-middle {
+      --cv-bottom-sheet-active-detent-height: var(--cv-bottom-sheet-middle-height, min(52dvh, 440px));
+      --cv-bottom-sheet-detent-offset: max(
+        0px,
+        calc(
+          var(--cv-bottom-sheet-detent-max-height) - var(--cv-bottom-sheet-middle-height, min(52dvh, 440px))
+        )
+      );
+    }
+
+    cv-dialog.detent-expanded {
+      --cv-bottom-sheet-active-detent-height: var(
+        --cv-bottom-sheet-expanded-height,
+        min(92dvh, calc(100dvh - 32px))
+      );
+      --cv-bottom-sheet-detent-offset: 0px;
+    }
+
+    cv-dialog.is-dragging::part(content) {
+      transition: none;
+    }
+
+    cv-dialog::part(body) {
+      min-block-size: 0;
+      overflow: auto;
+      padding: 0;
+    }
+
+    .sheet-handle {
+      inline-size: 100%;
+      min-block-size: var(--cv-bottom-sheet-handle-block-size, 32px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-block: var(--cv-bottom-sheet-handle-padding-block, 12px 8px);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: grab;
+      touch-action: none;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .sheet-handle:focus-visible {
+      outline: 2px solid var(--cv-color-primary, #65d7ff);
+      outline-offset: -2px;
+    }
+
+    .sheet-handle:active {
+      cursor: grabbing;
+    }
+
+    .sheet-grabber {
+      inline-size: var(--cv-bottom-sheet-grabber-width, 44px);
+      block-size: var(--cv-bottom-sheet-grabber-height, 4px);
+      border-radius: 999px;
+      background: var(--cv-bottom-sheet-grabber-color, var(--cv-color-border-strong, #64748b));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      cv-dialog {
+        --cv-bottom-sheet-dismiss-duration: 0ms;
+        --cv-dialog-transition-duration: 0ms;
+      }
+    }
+  `;
+    static define() {
+        CVDialog.define();
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    disconnectedCallback() {
+        this.resetSheetDragState();
+        super.disconnectedCallback();
+    }
+    getDialogElement() {
+        return this.shadowRoot?.querySelector('cv-dialog');
+    }
+    getEnabledDetents() {
+        const values = (this.detents ?? '').split(/[,\s]+/).filter(Boolean);
+        const seen = new Set();
+        const enabled = [];
+        for (const value of values) {
+            if (!this.isDetent(value) || seen.has(value))
+                continue;
+            seen.add(value);
+            enabled.push(value);
+        }
+        return DETENT_ORDER.filter((detent) => seen.has(detent));
+    }
+    hasDetents() {
+        return this.getEnabledDetents().length > 0;
+    }
+    isDetent(value) {
+        return value === 'collapsed' || value === 'middle' || value === 'expanded';
+    }
+    getResolvedDetent() {
+        const enabled = this.getEnabledDetents();
+        if (enabled.includes(this.detent))
+            return this.detent;
+        return enabled[0] ?? 'expanded';
+    }
+    getResolvedDetentIndex() {
+        return this.getEnabledDetents().indexOf(this.getResolvedDetent());
+    }
+    resetSheetDragState() {
+        this.dragPointerId = null;
+        this.dragStartY = 0;
+        this.dragStartedAt = 0;
+        this.dragStartDetent = this.getResolvedDetent();
+        this.dragMoved = false;
+        const dialog = this.getDialogElement();
+        dialog?.classList.remove('is-dragging');
+        dialog?.style.removeProperty('--cv-bottom-sheet-drag-offset');
+    }
+    setSheetDragOffset(offset, allowNegative = false) {
+        const safeOffset = allowNegative ? offset : Math.max(0, offset);
+        this.getDialogElement()?.style.setProperty('--cv-bottom-sheet-drag-offset', `${Math.round(safeOffset)}px`);
+    }
+    createEventDetail(open) {
+        if (!this.hasDetents()) {
+            return { open };
+        }
+        return {
+            open,
+            detent: this.getResolvedDetent(),
+        };
+    }
+    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 }));
+    }
+    commitUserClose() {
+        if (!this.open)
+            return;
+        const detail = this.createEventDetail(false);
+        this.open = false;
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    commitUserDetent(detent) {
+        if (!this.open || !this.hasDetents() || detent === this.getResolvedDetent())
+            return;
+        this.detent = detent;
+        const detail = this.createEventDetail(true);
+        this.dispatchInput(detail);
+        this.dispatchChange(detail);
+    }
+    commitDragClose() {
+        const dialog = this.getDialogElement();
+        this.dragPointerId = null;
+        dialog?.classList.remove('is-dragging');
+        this.commitUserClose();
+    }
+    handleDialogInput(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        if (typeof event.detail.open !== 'boolean')
+            return;
+        event.stopPropagation();
+        this.open = event.detail.open;
+        this.dispatchInput(this.createEventDetail(this.open));
+    }
+    handleDialogChange(event) {
+        if (event.target !== event.currentTarget)
+            return;
+        if (typeof event.detail.open !== 'boolean')
+            return;
+        event.stopPropagation();
+        this.open = event.detail.open;
+        this.dispatchChange(this.createEventDetail(this.open));
+    }
+    handleDragPointerDown(event) {
+        if (!this.open)
+            return;
+        if (!this.dragToClose && !this.hasDetents())
+            return;
+        if (typeof event.button === 'number' && event.button !== 0)
+            return;
+        this.dragPointerId = event.pointerId;
+        this.dragStartY = event.clientY;
+        this.dragStartedAt = performance.now();
+        this.dragStartDetent = this.getResolvedDetent();
+        this.dragMoved = false;
+        this.setSheetDragOffset(0, this.hasDetents());
+        this.getDialogElement()?.classList.add('is-dragging');
+        const handle = event.currentTarget;
+        handle?.setPointerCapture?.(event.pointerId);
+        event.preventDefault();
+    }
+    handleDragPointerMove(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        const offset = event.clientY - this.dragStartY;
+        this.dragMoved ||= Math.abs(offset) > 4;
+        this.setSheetDragOffset(offset, this.hasDetents());
+        if (offset !== 0) {
+            event.preventDefault();
+        }
+    }
+    getNextDetentForDrag(offset, velocity) {
+        const enabled = this.getEnabledDetents();
+        const index = enabled.indexOf(this.dragStartDetent);
+        if (index < 0)
+            return this.getResolvedDetent();
+        const shouldExpand = offset <= -DRAG_DETENT_DISTANCE_PX || velocity <= -DRAG_DETENT_VELOCITY_PX_PER_MS;
+        if (shouldExpand) {
+            return enabled[Math.min(index + 1, enabled.length - 1)] ?? this.dragStartDetent;
+        }
+        const shouldCollapse = offset >= DRAG_DETENT_DISTANCE_PX || velocity >= DRAG_DETENT_VELOCITY_PX_PER_MS;
+        if (!shouldCollapse) {
+            return this.dragStartDetent;
+        }
+        if (index > 0) {
+            return enabled[index - 1] ?? this.dragStartDetent;
+        }
+        return null;
+    }
+    handleDragPointerUp(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        const handle = event.currentTarget;
+        handle?.releasePointerCapture?.(event.pointerId);
+        const elapsed = Math.max(1, performance.now() - this.dragStartedAt);
+        const offset = event.clientY - this.dragStartY;
+        const velocity = offset / elapsed;
+        this.suppressNextHandleClick = this.dragMoved;
+        if (this.hasDetents()) {
+            const nextDetent = this.getNextDetentForDrag(offset, velocity);
+            if (nextDetent === null && this.dragToClose) {
+                this.commitDragClose();
+                return;
+            }
+            this.resetSheetDragState();
+            if (nextDetent) {
+                this.commitUserDetent(nextDetent);
+            }
+            return;
+        }
+        const dismissOffset = Math.max(0, offset);
+        const dismissVelocity = dismissOffset / elapsed;
+        if (dismissOffset >= DRAG_DISMISS_DISTANCE_PX || dismissVelocity >= DRAG_DISMISS_VELOCITY_PX_PER_MS) {
+            this.commitDragClose();
+            return;
+        }
+        this.resetSheetDragState();
+    }
+    handleDragPointerCancel(event) {
+        if (this.dragPointerId !== event.pointerId)
+            return;
+        const handle = event.currentTarget;
+        handle?.releasePointerCapture?.(event.pointerId);
+        this.resetSheetDragState();
+    }
+    handleHandleClick(event) {
+        if (this.suppressNextHandleClick) {
+            this.suppressNextHandleClick = false;
+            return;
+        }
+        if (!this.hasDetents())
+            return;
+        const enabled = this.getEnabledDetents();
+        const index = this.getResolvedDetentIndex();
+        const next = enabled[index + 1];
+        if (!next)
+            return;
+        event.preventDefault();
+        this.commitUserDetent(next);
+    }
+    handleDialogAfterHide() {
+        this.resetSheetDragState();
+    }
+    render() {
+        const hasDetents = this.hasDetents();
+        const dialogClass = [
+            'sheet-dialog',
+            hasDetents ? 'has-detents' : '',
+            hasDetents ? `detent-${this.getResolvedDetent()}` : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return html `
+      <cv-dialog
+        class=${dialogClass}
+        exportparts="trigger, overlay, content, header, title, description, header-close, body, footer"
+        .open=${this.open}
+        .modal=${this.modal}
+        .type=${this.type}
+        .closeOnEscape=${this.closeOnEscape}
+        .closeOnOutsidePointer=${this.closeOnOutsidePointer}
+        .closeOnOutsideFocus=${this.closeOnOutsideFocus}
+        .initialFocusId=${this.initialFocusId}
+        .noHeader=${this.noHeader}
+        .closable=${this.closable}
+        @cv-input=${this.handleDialogInput}
+        @cv-change=${this.handleDialogChange}
+        @cv-after-hide=${this.handleDialogAfterHide}
+      >
+        <slot name="title" slot="title"></slot>
+        <slot name="description" slot="description"></slot>
+        <slot name="header-close" slot="header-close"
+          ><svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          >
+            <line x1="4" y1="4" x2="12" y2="12" />
+            <line x1="12" y1="4" x2="4" y2="12" /></svg
+        ></slot>
+        ${this.showHandle
+            ? html `
+                <button
+                  slot="before-header"
+                  class="sheet-handle"
+                  part="handle"
+                  type="button"
+                  aria-label=${this.handleLabel}
+                  @pointerdown=${this.handleDragPointerDown}
+                  @pointermove=${this.handleDragPointerMove}
+                  @pointerup=${this.handleDragPointerUp}
+                  @pointercancel=${this.handleDragPointerCancel}
+                  @click=${this.handleHandleClick}
+                >
+                  <span class="sheet-grabber" part="grabber"></span>
+                </button>
+              `
+            : null}
+        <slot></slot>
+        <slot name="footer" slot="footer"></slot>
+      </cv-dialog>
+    `;
+    }
+}

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

@@ -31,5 +31,5 @@ export declare class CVBreadcrumbItem extends LitElement {
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -36,7 +36,7 @@ export class CVBreadcrumbItem extends LitElement {
       }
 
       [part='separator'] {
-        color: color-mix(in oklab, var(--cv-color-text, #e8ecf6) 60%, transparent);
+        color: var(--cv-color-text-subtle, #7f8aa3);
       }
 
       [part='separator'][hidden] {

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

@@ -35,5 +35,5 @@ export declare class CVBreadcrumb extends ReatomLitElement {
     private rebuildModelFromSlot;
     private syncItemElements;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-breadcrumb.js

@@ -1,5 +1,6 @@
 import { createBreadcrumb } from '@chromvoid/headless-ui/breadcrumb';
-import { css, html, nothing } from 'lit';
+import { css, nothing } from 'lit';
+import { html } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 import { CVBreadcrumbItem } from './cv-breadcrumb-item.js';
 let cvBreadcrumbNonce = 0;

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

@@ -3,6 +3,7 @@ import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedRe
 type CVButtonVariant = 'default' | 'primary' | 'danger' | 'ghost';
 type CVButtonSize = 'small' | 'medium' | 'large';
 type CVButtonType = 'button' | 'submit' | 'reset';
+type CVButtonPreset = 'action-primary' | 'action-primary-subtle';
 export interface CVButtonInputDetail {
     pressed: boolean;
     toggle: boolean;
@@ -45,11 +46,24 @@ export declare class CVButton extends FormAssociatedReatomElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        preset: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         type: {
             type: StringConstructor;
             reflect: boolean;
         };
+        unstyled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        buttonTabIndex: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
+    static get observedAttributes(): string[];
     disabled: boolean;
     toggle: boolean;
     pressed: boolean;
@@ -58,12 +72,18 @@ export declare class CVButton extends FormAssociatedReatomElement {
     outline: boolean;
     pill: boolean;
     size: CVButtonSize;
+    preset: CVButtonPreset | undefined;
     type: CVButtonType;
+    unstyled: boolean;
+    buttonTabIndex: string | null;
     private model;
     private suppressKeyboardClick;
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     willUpdate(changedProperties: PropertyValues): void;
     private createModel;
     private dispatchInput;
@@ -74,10 +94,12 @@ export declare class CVButton extends FormAssociatedReatomElement {
     protected getFormAssociatedValue(): string | File | FormData | null;
     private triggerFormAction;
     private handleClick;
+    private handleHostClick;
     private handleKeyDown;
     private handleKeyUp;
     private handleContentSlotChange;
     private hasSlotContent;
-    protected render(): import("lit").TemplateResult<1>;
+    private getPassthroughAttribute;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};