@chromvoid/uikit 0.1.0 → 0.2.0

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

@@ -38,11 +38,11 @@ export class CVCommandItem extends LitElement {
       }
 
       :host([active]) [part='base'] {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+        background: var(--cv-color-primary-ring);
       }
 
       :host([selected]) [part='base'] {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+        background: var(--cv-color-primary-border);
       }
 
       :host([disabled]) [part='base'] {

package/dist/components/cv-command-palette.d.ts

@@ -101,5 +101,5 @@ export declare class CVCommandPalette extends ReatomLitElement {
     private handleInputKeyDown;
     private handleItemClick;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-command-palette.js

@@ -1,5 +1,6 @@
 import { createCommandPalette } from '@chromvoid/headless-ui/command-palette';
-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 { CVCommandItem } from './cv-command-item.js';
 const commandPaletteKeysToPrevent = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Escape']);
@@ -79,10 +80,28 @@ export class CVCommandPalette extends ReatomLitElement {
         border: 1px solid var(--cv-color-border, #2a3245);
         background: var(--cv-color-surface-elevated, #1d2432);
         box-shadow: var(--cv-shadow-2, 0 8px 30px rgba(0, 0, 0, 0.35));
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-command-palette-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-command-palette-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-command-palette-transition-duration, var(--cv-duration-fast, 120ms)) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='dialog'][hidden] {
         display: none;
+        opacity: 0;
+        transform: translate3d(0, -4px, 0);
+      }
+
+      @starting-style {
+        [part='dialog']:not([hidden]) {
+          opacity: 0;
+          transform: translate3d(0, -4px, 0);
+        }
       }
 
       [part='input'] {
@@ -542,6 +561,7 @@ export class CVCommandPalette extends ReatomLitElement {
           aria-modal=${dialogProps['aria-modal']}
           aria-label=${dialogProps['aria-label'] ?? nothing}
           ?hidden=${dialogProps.hidden}
+          class="cv-u-discrete-presence"
           part="dialog"
           @keydown=${this.handleDialogKeyDown}
         >

package/dist/components/cv-context-menu.d.ts

@@ -94,5 +94,5 @@ export declare class CVContextMenu extends ReatomLitElement {
     private handleMenuKeyDown;
     private handleItemClick;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-context-menu.js

@@ -1,5 +1,6 @@
 import { createContextMenu } from '@chromvoid/headless-ui/context-menu';
-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 { CVMenuItem } from './cv-menu-item.js';
 const contextMenuKeysToPrevent = new Set([

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

@@ -1,7 +1,8 @@
-import { type CopyButtonValue } from '@chromvoid/headless-ui/copy-button';
+import { type ClipboardAdapter, type CopyButtonValue } from '@chromvoid/headless-ui/copy-button';
 import type { PropertyValues } from 'lit';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 type CVCopyButtonSize = 'small' | 'medium' | 'large';
+type CVCopyButtonAppearance = 'default' | 'plain';
 export interface CVCopyButtonCopyDetail {
     value: string;
 }
@@ -20,6 +21,9 @@ export declare class CVCopyButton extends ReatomLitElement {
         value: {
             attribute: boolean;
         };
+        clipboard: {
+            attribute: boolean;
+        };
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -33,20 +37,44 @@ export declare class CVCopyButton extends ReatomLitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        successLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        errorLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     value: CopyButtonValue;
     disabled: boolean;
     feedbackDuration: number;
     size: CVCopyButtonSize;
-    private __clipboard?;
+    appearance: CVCopyButtonAppearance;
     private model;
+    private clipboardAdapter?;
+    private successText;
+    private errorText;
+    private idleAriaLabel;
+    get clipboard(): ClipboardAdapter | undefined;
+    set clipboard(clip: ClipboardAdapter | undefined);
+    get successLabel(): string;
+    set successLabel(label: string | null | undefined);
+    get errorLabel(): string;
+    set errorLabel(label: string | null | undefined);
+    get ariaLabel(): string | null;
+    set ariaLabel(label: string | null | undefined);
     /** @internal Overridable clipboard adapter for testing */
-    get _clipboard(): {
-        writeText(text: string): Promise<void>;
-    } | undefined;
-    set _clipboard(clip: {
-        writeText(text: string): Promise<void>;
-    } | undefined);
+    get _clipboard(): ClipboardAdapter | undefined;
+    set _clipboard(clip: ClipboardAdapter | undefined);
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
@@ -56,6 +84,6 @@ export declare class CVCopyButton extends ReatomLitElement {
     private handleClick;
     private handleKeyDown;
     private handleKeyUp;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
 export {};

package/dist/components/cv-copy-button.js

@@ -1,6 +1,9 @@
 import { createCopyButton, } from '@chromvoid/headless-ui/copy-button';
-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';
+const DEFAULT_SUCCESS_LABEL = 'Copied';
+const DEFAULT_ERROR_LABEL = 'Copy failed';
 // Default SVG icons
 const copyIcon = html `
   <svg
@@ -48,21 +51,82 @@ export class CVCopyButton extends ReatomLitElement {
     static get properties() {
         return {
             value: { attribute: false },
+            clipboard: { attribute: false },
             disabled: { type: Boolean, reflect: true },
             feedbackDuration: { type: Number, reflect: true, attribute: 'feedback-duration' },
             size: { type: String, reflect: true },
+            appearance: { type: String, reflect: true },
+            successLabel: { type: String, attribute: 'success-label' },
+            errorLabel: { type: String, attribute: 'error-label' },
+            ariaLabel: { type: String, attribute: 'aria-label' },
         };
     }
-    __clipboard;
     model;
+    clipboardAdapter;
+    successText = DEFAULT_SUCCESS_LABEL;
+    errorText = DEFAULT_ERROR_LABEL;
+    idleAriaLabel = null;
+    get clipboard() {
+        return this.clipboardAdapter;
+    }
+    set clipboard(clip) {
+        const old = this.clipboardAdapter;
+        if (old === clip)
+            return;
+        this.clipboardAdapter = clip;
+        if (this.model) {
+            this.model = this._createModel();
+        }
+        this.requestUpdate('clipboard', old);
+    }
+    get successLabel() {
+        return this.successText;
+    }
+    set successLabel(label) {
+        const old = this.successText;
+        const next = label || DEFAULT_SUCCESS_LABEL;
+        if (old === next)
+            return;
+        this.successText = next;
+        if (this.model) {
+            this.model = this._createModel();
+        }
+        this.requestUpdate('successLabel', old);
+    }
+    get errorLabel() {
+        return this.errorText;
+    }
+    set errorLabel(label) {
+        const old = this.errorText;
+        const next = label || DEFAULT_ERROR_LABEL;
+        if (old === next)
+            return;
+        this.errorText = next;
+        if (this.model) {
+            this.model = this._createModel();
+        }
+        this.requestUpdate('errorLabel', old);
+    }
+    get ariaLabel() {
+        return this.idleAriaLabel;
+    }
+    set ariaLabel(label) {
+        const old = this.idleAriaLabel;
+        const next = label ?? null;
+        if (old === next)
+            return;
+        this.idleAriaLabel = next;
+        if (this.model) {
+            this.model = this._createModel();
+        }
+        this.requestUpdate('ariaLabel', old);
+    }
     /** @internal Overridable clipboard adapter for testing */
     get _clipboard() {
-        return this.__clipboard;
+        return this.clipboard;
     }
     set _clipboard(clip) {
-        this.__clipboard = clip;
-        this.model = this._createModel();
-        this.requestUpdate();
+        this.clipboard = clip;
     }
     constructor() {
         super();
@@ -70,6 +134,7 @@ export class CVCopyButton extends ReatomLitElement {
         this.disabled = false;
         this.feedbackDuration = 1500;
         this.size = 'medium';
+        this.appearance = 'default';
         this.model = this._createModel();
     }
     static styles = [
@@ -89,9 +154,9 @@ export class CVCopyButton extends ReatomLitElement {
         width: var(--cv-copy-button-size);
         height: var(--cv-copy-button-size);
         border-radius: var(--cv-copy-button-border-radius);
-        border: 1px solid var(--cv-color-border, #2a3245);
-        background: var(--cv-color-surface, #141923);
-        color: var(--cv-color-text, #e8ecf6);
+        border: 1px solid var(--cv-copy-button-border-color, var(--cv-color-border, #2a3245));
+        background: var(--cv-copy-button-background, var(--cv-color-surface, #141923));
+        color: var(--cv-copy-button-color, var(--cv-color-text, #e8ecf6));
         cursor: pointer;
         user-select: none;
         padding: 0;
@@ -103,7 +168,12 @@ export class CVCopyButton extends ReatomLitElement {
       }
 
       [part='base']:hover {
-        border-color: var(--cv-color-primary, #65d7ff);
+        background: var(
+          --cv-copy-button-hover-background,
+          var(--cv-copy-button-background, var(--cv-color-surface, #141923))
+        );
+        border-color: var(--cv-copy-button-hover-border-color, var(--cv-color-primary, #65d7ff));
+        color: var(--cv-copy-button-hover-color, var(--cv-copy-button-color, var(--cv-color-text, #e8ecf6)));
       }
 
       [part='base']:focus-visible {
@@ -122,6 +192,14 @@ export class CVCopyButton extends ReatomLitElement {
         position: absolute;
         top: 0;
         left: 0;
+        opacity: 0;
+        pointer-events: none;
+        transform: scale(0.78);
+        filter: blur(2px);
+        transition:
+          opacity var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease),
+          transform var(--cv-duration-fast, 120ms) var(--cv-easing-decelerate, ease-out),
+          filter var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
       }
 
       [part='copy-icon'] svg,
@@ -157,10 +235,29 @@ export class CVCopyButton extends ReatomLitElement {
         pointer-events: none;
       }
 
-      /* --- status: idle --- */
-      :host([status='idle']) [part='success-icon'],
-      :host([status='idle']) [part='error-icon'] {
-        display: none;
+      :host([appearance='plain']) [part='base'] {
+        background: var(--cv-copy-button-plain-background, transparent);
+        border-color: var(--cv-copy-button-plain-border-color, transparent);
+      }
+
+      :host([appearance='plain']) [part='base']:hover {
+        background: var(
+          --cv-copy-button-plain-hover-background,
+          var(--cv-copy-button-hover-background, transparent)
+        );
+        border-color: var(
+          --cv-copy-button-plain-hover-border-color,
+          var(--cv-copy-button-plain-border-color, transparent)
+        );
+        color: var(--cv-copy-button-plain-hover-color, var(--cv-copy-button-hover-color, currentColor));
+      }
+
+      :host([status='idle']) [part='copy-icon'],
+      :host([status='success']) [part='success-icon'],
+      :host([status='error']) [part='error-icon'] {
+        opacity: 1;
+        transform: scale(1);
+        filter: blur(0);
       }
 
       /* --- status: success --- */
@@ -169,22 +266,12 @@ export class CVCopyButton extends ReatomLitElement {
         border-color: var(--cv-copy-button-success-color);
       }
 
-      :host([status='success']) [part='copy-icon'],
-      :host([status='success']) [part='error-icon'] {
-        display: none;
-      }
-
       /* --- status: error --- */
       :host([status='error']) [part='base'] {
         color: var(--cv-copy-button-error-color);
         border-color: var(--cv-copy-button-error-color);
       }
 
-      :host([status='error']) [part='copy-icon'],
-      :host([status='error']) [part='success-icon'] {
-        display: none;
-      }
-
       /* --- copying --- */
       :host([copying]) {
         cursor: progress;
@@ -202,6 +289,16 @@ export class CVCopyButton extends ReatomLitElement {
       :host([size='large']) {
         --cv-copy-button-size: 42px;
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        [part='copy-icon'],
+        [part='success-icon'],
+        [part='error-icon'] {
+          transform: none;
+          filter: none;
+          transition: opacity var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
+        }
+      }
     `,
     ];
     static define() {
@@ -214,7 +311,10 @@ export class CVCopyButton extends ReatomLitElement {
             value: this.value,
             isDisabled: this.disabled,
             feedbackDuration: this.feedbackDuration,
-            clipboard: this.__clipboard,
+            ariaLabel: this.ariaLabel ?? undefined,
+            successLabel: this.successLabel,
+            errorLabel: this.errorLabel,
+            clipboard: this.clipboard,
             onCopy: (value) => {
                 this.dispatchEvent(new CustomEvent('cv-copy', {
                     detail: { value },
@@ -273,7 +373,7 @@ export class CVCopyButton extends ReatomLitElement {
         const successIconProps = this.model.contracts.getIconContainerProps('success');
         const errorIconProps = this.model.contracts.getIconContainerProps('error');
         const statusText = this.model.state.status();
-        const statusAnnouncement = statusText === 'success' ? 'Copied' : statusText === 'error' ? 'Copy failed' : nothing;
+        const statusAnnouncement = statusText === 'success' ? this.successLabel : statusText === 'error' ? this.errorLabel : nothing;
         return html `
       <div
         part="base"
@@ -285,25 +385,13 @@ export class CVCopyButton extends ReatomLitElement {
         @keydown=${this.handleKeyDown}
         @keyup=${this.handleKeyUp}
       >
-        <span
-          part="copy-icon"
-          aria-hidden=${copyIconProps['aria-hidden']}
-          .hidden=${copyIconProps.hidden ?? false}
-        >
+        <span part="copy-icon" aria-hidden=${copyIconProps['aria-hidden']}>
           <slot name="copy-icon">${copyIcon}</slot>
         </span>
-        <span
-          part="success-icon"
-          aria-hidden=${successIconProps['aria-hidden']}
-          .hidden=${successIconProps.hidden ?? false}
-        >
+        <span part="success-icon" aria-hidden=${successIconProps['aria-hidden']}>
           <slot name="success-icon">${successIcon}</slot>
         </span>
-        <span
-          part="error-icon"
-          aria-hidden=${errorIconProps['aria-hidden']}
-          .hidden=${errorIconProps.hidden ?? false}
-        >
+        <span part="error-icon" aria-hidden=${errorIconProps['aria-hidden']}>
           <slot name="error-icon">${errorIcon}</slot>
         </span>
         <span

package/dist/components/cv-date-picker.d.ts

@@ -156,6 +156,6 @@ export declare class CVDatePicker extends FormAssociatedReatomElement {
     protected getFormAssociatedValidity(): FormAssociatedValidity;
     private isEffectivelyDisabled;
     private formatMonthLabel;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/components/cv-date-picker.js

@@ -120,10 +120,28 @@ export class CVDatePicker extends FormAssociatedReatomElement {
         border-radius: var(--cv-date-picker-border-radius, var(--cv-radius-md, 10px));
         border: 1px solid var(--cv-color-border, #2a3245);
         background: var(--cv-color-surface-elevated, #1d2432);
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-date-picker-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-date-picker-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-date-picker-transition-duration, var(--cv-duration-fast, 120ms)) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='dialog'][hidden] {
         display: none;
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+      }
+
+      @starting-style {
+        [part='dialog']:not([hidden]) {
+          opacity: 0;
+          transform: translate3d(0, -2px, 0);
+        }
       }
 
       [part='calendar-shell'] {
@@ -169,7 +187,7 @@ export class CVDatePicker extends FormAssociatedReatomElement {
       }
 
       [part='calendar-day'][aria-selected='true'] {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 22%, transparent);
+        background: var(--cv-color-primary-surface-strong);
       }
 
       [part='time-row'] {
@@ -650,6 +668,7 @@ export class CVDatePicker extends FormAssociatedReatomElement {
           role=${dialogProps.role}
           tabindex=${dialogProps.tabindex}
           ?hidden=${dialogProps.hidden}
+          class="cv-u-discrete-presence"
           aria-modal=${dialogProps['aria-modal']}
           aria-label=${dialogProps['aria-label']}
           @keydown=${this.handleDialogKeyDown}

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

@@ -1,4 +1,4 @@
-import type { PropertyValues } from 'lit';
+import { type PropertyValues } from 'lit';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 export interface CVDialogEventDetail {
     open: boolean;
@@ -61,6 +61,15 @@ export declare class CVDialog extends ReatomLitElement {
     private previousBodyOverflow;
     private suppressLifecycleFromUpdate;
     private lifecycleToken;
+    private focusRestoreTarget;
+    private portalVisible;
+    private presenceState;
+    private presenceAnimationTimeout;
+    private pendingFocusRestoreTargetId;
+    private shouldAnimatePresence;
+    private suppressNextNativeCancel;
+    private lastTouchClientY;
+    private readonly handleDocumentFocusInBound;
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
@@ -69,21 +78,54 @@ export declare class CVDialog extends ReatomLitElement {
     willUpdate(changedProperties: PropertyValues): void;
     updated(changedProperties: PropertyValues): void;
     private createModel;
+    private clearPresenceAnimationQueue;
+    private startOpenPresenceTransition;
+    private startClosePresenceTransition;
+    private finishPresenceTransition;
+    private syncRenderedPresenceState;
+    private shouldLockScrollForPresence;
+    private getPresenceTransitionDuration;
+    private readTransitionDuration;
+    private parseTimeValues;
     private captureState;
     private dispatchInput;
     private dispatchChange;
     private dispatchLifecycleEvent;
     private dispatchLifecycleTransition;
     private applyInteractionResult;
+    private captureFocusRestoreTarget;
+    private queueFocusRestore;
+    private restoreQueuedFocus;
+    private restoreFocus;
+    private getPortalOverlay;
+    private getContentElement;
+    private getModalShell;
+    private getPopoverShell;
+    private getCurrentPortalShell;
+    private isPopoverOpen;
+    private openPopoverShell;
+    private closePopoverShell;
+    private syncTopLayerVisibility;
+    private closeNativeShells;
     private syncOutsideFocusListener;
     private syncScrollLock;
     private releaseScrollLock;
     private focusInitialTarget;
+    private getTouchClientY;
+    private isVerticallyScrollable;
+    private collectScrollableContentAncestors;
+    private canScrollDialogContent;
+    private warnAboutDeprecatedTriggerSlot;
     private handleDocumentFocusIn;
     private handleTriggerClick;
     private handleTriggerKeyDown;
     private handleOverlayPointerDown;
+    private handleOverlayTouchStart;
+    private handleOverlayTouchMove;
+    private handleOverlayWheel;
     private handleContentKeyDown;
+    private handleNativeCancel;
     private handleHeaderCloseClick;
-    protected render(): import("lit").TemplateResult<1>;
+    private renderContent;
+    protected render(): import("lit-html").TemplateResult;
 }