@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-button.js

@@ -2,6 +2,20 @@ import { createButton } from '@chromvoid/headless-ui/button';
 import { css, html, nothing } from 'lit';
 import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
 let cvButtonNonce = 0;
+const passthroughAttributes = [
+    'aria-controls',
+    'aria-current',
+    'aria-expanded',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-pressed',
+    'aria-selected',
+    'role',
+    'title',
+];
 export class CVButton extends FormAssociatedReatomElement {
     static elementName = 'cv-button';
     static get properties() {
@@ -14,9 +28,15 @@ export class CVButton extends FormAssociatedReatomElement {
             outline: { type: Boolean, reflect: true },
             pill: { type: Boolean, reflect: true },
             size: { type: String, reflect: true },
+            preset: { type: String, reflect: true },
             type: { type: String, reflect: true },
+            unstyled: { type: Boolean, reflect: true },
+            buttonTabIndex: { type: String, attribute: 'button-tabindex' },
         };
     }
+    static get observedAttributes() {
+        return Array.from(new Set([...super.observedAttributes, ...passthroughAttributes]));
+    }
     model;
     suppressKeyboardClick = false;
     constructor() {
@@ -29,7 +49,10 @@ export class CVButton extends FormAssociatedReatomElement {
         this.outline = false;
         this.pill = false;
         this.size = 'medium';
+        this.preset = undefined;
         this.type = 'button';
+        this.unstyled = false;
+        this.buttonTabIndex = null;
         this.model = this.createModel();
     }
     static styles = [
@@ -219,31 +242,23 @@ export class CVButton extends FormAssociatedReatomElement {
         --cv-button-background: transparent;
         --cv-button-border-color: transparent;
         --cv-button-border-color-hover: transparent;
-        --cv-button-background-hover: color-mix(in oklab, var(--cv-button-accent-color) 10%, transparent);
+        --cv-button-background-hover: rgb(from var(--cv-button-accent-color) r g b / 0.1);
         --cv-button-border-color-active: transparent;
-        --cv-button-background-active: color-mix(in oklab, var(--cv-button-accent-color) 16%, transparent);
+        --cv-button-background-active: rgb(from var(--cv-button-accent-color) r g b / 0.16);
         --cv-button-border-color-pressed: transparent;
         --cv-button-border-color-pressed-hover: transparent;
-        --cv-button-background-pressed: color-mix(in oklab, var(--cv-button-accent-color) 14%, transparent);
-        --cv-button-background-pressed-hover: color-mix(
-          in oklab,
-          var(--cv-button-accent-color) 18%,
-          transparent
-        );
+        --cv-button-background-pressed: rgb(from var(--cv-button-accent-color) r g b / 0.14);
+        --cv-button-background-pressed-hover: rgb(from var(--cv-button-accent-color) r g b / 0.18);
       }
 
       /* --- outline modifier --- */
       :host([outline]) [part='base'] {
         --cv-button-background: transparent;
         --cv-button-border-color: var(--cv-color-border, #2a3245);
-        --cv-button-background-hover: color-mix(in oklab, var(--cv-button-accent-color) 10%, transparent);
-        --cv-button-background-active: color-mix(in oklab, var(--cv-button-accent-color) 16%, transparent);
-        --cv-button-background-pressed: color-mix(in oklab, var(--cv-button-accent-color) 16%, transparent);
-        --cv-button-background-pressed-hover: color-mix(
-          in oklab,
-          var(--cv-button-accent-color) 20%,
-          transparent
-        );
+        --cv-button-background-hover: rgb(from var(--cv-button-accent-color) r g b / 0.1);
+        --cv-button-background-active: rgb(from var(--cv-button-accent-color) r g b / 0.16);
+        --cv-button-background-pressed: rgb(from var(--cv-button-accent-color) r g b / 0.16);
+        --cv-button-background-pressed-hover: rgb(from var(--cv-button-accent-color) r g b / 0.2);
       }
 
       :host([outline][variant='primary']) [part='base'] {
@@ -262,16 +277,8 @@ export class CVButton extends FormAssociatedReatomElement {
           var(--cv-color-primary, #65d7ff) 90%,
           var(--cv-color-border, #2a3245)
         );
-        --cv-button-background-pressed: color-mix(
-          in oklab,
-          var(--cv-color-primary, #65d7ff) 20%,
-          transparent
-        );
-        --cv-button-background-pressed-hover: color-mix(
-          in oklab,
-          var(--cv-color-primary, #65d7ff) 24%,
-          transparent
-        );
+        --cv-button-background-pressed: var(--cv-color-primary-surface-strong);
+        --cv-button-background-pressed-hover: var(--cv-color-primary-ring);
       }
 
       :host([outline][variant='danger']) [part='base'] {
@@ -290,12 +297,8 @@ export class CVButton extends FormAssociatedReatomElement {
           var(--cv-color-danger, #ff7d86) 90%,
           var(--cv-color-border, #2a3245)
         );
-        --cv-button-background-pressed: color-mix(in oklab, var(--cv-color-danger, #ff7d86) 16%, transparent);
-        --cv-button-background-pressed-hover: color-mix(
-          in oklab,
-          var(--cv-color-danger, #ff7d86) 22%,
-          transparent
-        );
+        --cv-button-background-pressed: var(--cv-color-danger-surface);
+        --cv-button-background-pressed-hover: var(--cv-color-danger-surface-strong);
       }
 
       /* --- pill modifier --- */
@@ -349,12 +352,92 @@ export class CVButton extends FormAssociatedReatomElement {
         --cv-button-font-size: var(--cv-button-font-size-large, var(--cv-font-size-md, 16px));
       }
 
+      :host([preset='action-primary']) {
+        --cv-button-background: var(--cv-button-action-primary-background, var(--cv-color-primary-dark));
+        --cv-button-background-hover: var(
+          --cv-button-action-primary-background-hover,
+          var(--cv-color-primary)
+        );
+        --cv-button-background-active: var(
+          --cv-button-action-primary-background-active,
+          var(--cv-color-primary-darker)
+        );
+        --cv-button-border-color: var(
+          --cv-button-action-primary-border-color,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-border-color-hover: var(
+          --cv-button-action-primary-border-color-hover,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-border-color-active: var(
+          --cv-button-action-primary-border-color-active,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-text-color: var(--cv-button-action-primary-text-color, var(--cv-color-on-primary));
+        --cv-button-text-color-hover: var(
+          --cv-button-action-primary-text-color-hover,
+          var(--cv-color-on-primary)
+        );
+        --cv-button-text-color-active: var(
+          --cv-button-action-primary-text-color-active,
+          var(--cv-color-on-primary)
+        );
+        --cv-button-focus-ring-color: var(
+          --cv-button-action-primary-focus-ring-color,
+          var(--cv-color-primary-ring)
+        );
+      }
+
+      :host([preset='action-primary-subtle']) {
+        --cv-button-background: var(
+          --cv-button-action-primary-subtle-background,
+          var(--cv-color-primary-surface-strong)
+        );
+        --cv-button-background-hover: var(
+          --cv-button-action-primary-subtle-background-hover,
+          var(--cv-color-primary-muted)
+        );
+        --cv-button-background-active: var(
+          --cv-button-action-primary-subtle-background-active,
+          var(--cv-color-primary-surface)
+        );
+        --cv-button-border-color: var(
+          --cv-button-action-primary-subtle-border-color,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-border-color-hover: var(
+          --cv-button-action-primary-subtle-border-color-hover,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-border-color-active: var(
+          --cv-button-action-primary-subtle-border-color-active,
+          var(--cv-color-primary-border-strong)
+        );
+        --cv-button-text-color: var(
+          --cv-button-action-primary-subtle-text-color,
+          var(--cv-color-text-strong)
+        );
+        --cv-button-text-color-hover: var(
+          --cv-button-action-primary-subtle-text-color-hover,
+          var(--cv-color-text-strongest)
+        );
+        --cv-button-text-color-active: var(
+          --cv-button-action-primary-subtle-text-color-active,
+          var(--cv-color-text-strongest)
+        );
+        --cv-button-focus-ring-color: var(
+          --cv-button-action-primary-subtle-focus-ring-color,
+          var(--cv-color-primary-ring)
+        );
+      }
+
       /* --- spinner --- */
       [part='spinner'] {
         inline-size: 14px;
         block-size: 14px;
         border-radius: 999px;
-        border: 2px solid color-mix(in oklab, var(--cv-button-accent-color) 32%, transparent);
+        border: 2px solid rgb(from var(--cv-button-accent-color) r g b / 0.32);
         border-top-color: var(--cv-button-accent-color);
         animation: cv-button-spin 800ms linear infinite;
       }
@@ -381,6 +464,40 @@ export class CVButton extends FormAssociatedReatomElement {
         cursor: not-allowed;
       }
 
+      :host([unstyled]) {
+        --cv-button-min-height: 0;
+        --cv-button-padding-inline: 0;
+        --cv-button-padding-block: 0;
+        --cv-button-border-radius: inherit;
+      }
+
+      :host([unstyled]) [part='base'] {
+        box-sizing: border-box;
+        inline-size: 100%;
+        block-size: 100%;
+        min-inline-size: 0;
+        min-block-size: 0;
+        padding: var(--cv-button-padding-block) var(--cv-button-padding-inline);
+        border: 0;
+        border-radius: inherit;
+        background: transparent;
+        color: inherit;
+        box-shadow: none;
+        font: inherit;
+        letter-spacing: inherit;
+        line-height: inherit;
+        text-align: inherit;
+      }
+
+      :host([unstyled]) [part='base']:hover:not(:disabled),
+      :host([unstyled]) [part='base']:active:not(:disabled),
+      :host([unstyled][pressed]) [part='base'],
+      :host([unstyled][pressed]) [part='base']:hover:not(:disabled) {
+        border-color: transparent;
+        background: transparent;
+        color: inherit;
+      }
+
       @keyframes cv-button-spin {
         to {
           transform: rotate(360deg);
@@ -393,6 +510,21 @@ export class CVButton extends FormAssociatedReatomElement {
             customElements.define(this.elementName, this);
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleHostClick, { capture: true });
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleHostClick, { capture: true });
+        super.disconnectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (oldValue !== newValue &&
+            passthroughAttributes.includes(name)) {
+            this.requestUpdate();
+        }
+    }
     willUpdate(changedProperties) {
         super.willUpdate(changedProperties);
         if (changedProperties.has('toggle')) {
@@ -484,6 +616,17 @@ export class CVButton extends FormAssociatedReatomElement {
         this.suppressKeyboardClick = false;
         this.model.contracts.getButtonProps().onClick();
     }
+    handleHostClick(event) {
+        if (event.composedPath()[0] !== this) {
+            return;
+        }
+        if (this.isFormAssociatedDisabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        this.model.contracts.getButtonProps().onClick();
+    }
     handleKeyDown(event) {
         if (event.key === 'Enter') {
             this.suppressKeyboardClick = true;
@@ -502,23 +645,37 @@ export class CVButton extends FormAssociatedReatomElement {
     hasSlotContent(name) {
         return Array.from(this.children ?? []).some((child) => child.getAttribute('slot') === name);
     }
+    getPassthroughAttribute(name) {
+        return this.getAttribute(name) ?? nothing;
+    }
     render() {
         const props = this.model.contracts.getButtonProps();
         const isUnavailable = this.disabled || this.loading;
         const hasPrefixContent = this.hasSlotContent('prefix');
         const hasSuffixContent = this.hasSlotContent('suffix');
+        const tabIndex = this.buttonTabIndex ?? props.tabindex;
+        const ariaPressed = props['aria-pressed'] ?? this.getPassthroughAttribute('aria-pressed');
         return html `
       <button
         id=${props.id}
         type="button"
-        role=${props.role}
-        tabindex=${props.tabindex}
+        role=${this.getAttribute('role') ?? props.role}
+        tabindex=${tabIndex}
         ?disabled=${isUnavailable}
         aria-disabled=${props['aria-disabled'] ?? nothing}
         aria-busy=${props['aria-busy'] ?? nothing}
-        aria-pressed=${props['aria-pressed'] ?? nothing}
+        aria-controls=${this.getPassthroughAttribute('aria-controls')}
+        aria-current=${this.getPassthroughAttribute('aria-current')}
+        aria-expanded=${this.getPassthroughAttribute('aria-expanded')}
+        aria-haspopup=${this.getPassthroughAttribute('aria-haspopup')}
+        aria-hidden=${this.getPassthroughAttribute('aria-hidden')}
+        aria-label=${this.getPassthroughAttribute('aria-label')}
+        aria-labelledby=${this.getPassthroughAttribute('aria-labelledby')}
+        aria-describedby=${this.getPassthroughAttribute('aria-describedby')}
+        aria-pressed=${ariaPressed}
+        aria-selected=${this.getPassthroughAttribute('aria-selected')}
+        title=${this.getPassthroughAttribute('title')}
         part="base"
-        class="cv-u-control-shell"
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
         @keyup=${this.handleKeyUp}

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

@@ -1,6 +1,7 @@
 import { type CalloutVariant } from '@chromvoid/headless-ui/callout';
 import type { PropertyValues } from 'lit';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+type CVCalloutDensity = 'compact' | 'dense';
 export declare class CVCallout extends ReatomLitElement {
     static elementName: string;
     static get properties(): {
@@ -8,6 +9,10 @@ export declare class CVCallout extends ReatomLitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        density: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         closable: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -18,6 +23,7 @@ export declare class CVCallout extends ReatomLitElement {
         };
     };
     variant: CalloutVariant;
+    density: CVCalloutDensity | undefined;
     closable: boolean;
     open: boolean;
     private readonly idBase;
@@ -27,6 +33,7 @@ export declare class CVCallout extends ReatomLitElement {
     static define(): void;
     willUpdate(changedProperties: PropertyValues): void;
     private handleClose;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
     private renderCloseButton;
 }
+export {};

package/dist/components/cv-callout.js

@@ -1,5 +1,6 @@
 import { createCallout } from '@chromvoid/headless-ui/callout';
-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';
 let cvCalloutNonce = 0;
 export class CVCallout extends ReatomLitElement {
@@ -7,6 +8,7 @@ export class CVCallout extends ReatomLitElement {
     static get properties() {
         return {
             variant: { type: String, reflect: true },
+            density: { type: String, reflect: true },
             closable: { type: Boolean, reflect: true },
             open: { type: Boolean, reflect: true },
         };
@@ -16,6 +18,7 @@ export class CVCallout extends ReatomLitElement {
     constructor() {
         super();
         this.variant = 'info';
+        this.density = undefined;
         this.closable = false;
         this.open = true;
         this.model = createCallout({
@@ -149,6 +152,20 @@ export class CVCallout extends ReatomLitElement {
         border-color: var(--cv-callout-border-color, var(--cv-color-border, #2a3245));
         background: var(--cv-callout-background, var(--cv-color-surface-elevated, #1d2432));
       }
+
+      :host([density='compact']) {
+        --cv-callout-padding-block: var(--cv-callout-compact-padding-block, var(--app-spacing-3, 12px));
+        --cv-callout-padding-inline: var(--cv-callout-compact-padding-inline, var(--app-spacing-3, 12px));
+        --cv-callout-border-radius: var(--cv-callout-compact-border-radius, var(--cv-radius-2, 10px));
+        --cv-callout-font-size: var(--cv-callout-compact-font-size, var(--cv-font-size-sm, 0.875rem));
+      }
+
+      :host([density='dense']) {
+        --cv-callout-padding-block: var(--cv-callout-dense-padding-block, var(--app-spacing-2, 8px));
+        --cv-callout-padding-inline: var(--cv-callout-dense-padding-inline, var(--app-spacing-3, 12px));
+        --cv-callout-border-radius: var(--cv-callout-dense-border-radius, var(--cv-radius-2, 10px));
+        --cv-callout-font-size: var(--cv-callout-dense-font-size, var(--cv-font-size-xs, 0.75rem));
+      }
     `,
     ];
     static define() {

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

@@ -43,6 +43,6 @@ export declare class CVCard extends ReatomLitElement {
     private handleExpandedChange;
     private handleHeaderClick;
     private handleHeaderKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
 export {};

package/dist/components/cv-card.js

@@ -1,5 +1,6 @@
 import { createCard } from '@chromvoid/headless-ui/card';
-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';
 let cvCardNonce = 0;
 export class CVCard extends ReatomLitElement {
@@ -209,7 +210,6 @@ export class CVCard extends ReatomLitElement {
         }
     }
     render() {
-        const cardProps = this.model.contracts.getCardProps();
         const triggerProps = this.model.contracts.getTriggerProps();
         const contentProps = this.model.contracts.getContentProps();
         const isExpandable = this.model.state.isExpandable();

package/dist/components/cv-carousel-slide.d.ts

@@ -21,5 +21,5 @@ export declare class CVCarouselSlide 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-carousel.d.ts

@@ -92,5 +92,5 @@ export declare class CVCarousel extends ReatomLitElement {
     private handleSlidesPointerDown;
     private handleSlidesPointerMove;
     private handleSlidesPointerUp;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-carousel.js

@@ -1,5 +1,6 @@
 import { createCarousel } from '@chromvoid/headless-ui/carousel';
-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 { CVCarouselSlide } from './cv-carousel-slide.js';
 const carouselKeysToPrevent = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);

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

@@ -80,5 +80,5 @@ export declare class CVCheckbox extends FormAssociatedReatomElement {
     private syncFromModelAndEmit;
     private handleClick;
     private handleKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-combobox-group.d.ts

@@ -11,5 +11,5 @@ export declare class CVComboboxGroup 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-combobox-option.d.ts

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

package/dist/components/cv-combobox-option.js

@@ -36,11 +36,11 @@ export class CVComboboxOption extends LitElement {
       }
 
       :host([active]) .option {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+        background: var(--cv-color-primary-ring);
       }
 
       :host([selected]) .option {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+        background: var(--cv-color-primary-border);
       }
 
       :host([disabled]) .option {

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

@@ -104,6 +104,8 @@ export declare class CVCombobox extends ReatomLitElement {
     private getOptionElements;
     private getGroupElements;
     private ensureOptionValue;
+    private parseMultipleValueIds;
+    private hasUnknownSelectedIds;
     private resolveInitialSelected;
     private rebuildModelFromSlot;
     private syncHostState;
@@ -131,5 +133,5 @@ export declare class CVCombobox extends ReatomLitElement {
     private renderTags;
     private renderClearButton;
     private renderListboxContent;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-combobox.js

@@ -1,11 +1,15 @@
 import { createCombobox, } from '@chromvoid/headless-ui/combobox';
-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 { CVComboboxGroup } from './cv-combobox-group.js';
 import { CVComboboxOption } from './cv-combobox-option.js';
 const comboboxNavigationKeys = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Escape']);
 function isVisibleGroup(item) {
-    return 'options' in item && Array.isArray(item.options);
+    return (typeof item === 'object' &&
+        item !== null &&
+        'options' in item &&
+        Array.isArray(item.options));
 }
 let cvComboboxNonce = 0;
 export class CVCombobox extends ReatomLitElement {
@@ -53,6 +57,9 @@ export class CVCombobox extends ReatomLitElement {
         css `
       :host {
         inline-size: 260px;
+        --cv-combobox-border-color: var(--cv-color-border, #2a3245);
+        --cv-combobox-border-radius: var(--cv-radius-sm, 6px);
+        --cv-combobox-background: var(--cv-color-surface, #141923);
       }
 
       [part='base'] {
@@ -65,6 +72,9 @@ export class CVCombobox extends ReatomLitElement {
         gap: var(--cv-space-1, 4px);
         min-block-size: 36px;
         padding: 0 var(--cv-space-3, 12px);
+        border: 1px solid var(--cv-combobox-border-color);
+        border-radius: var(--cv-combobox-border-radius);
+        background: var(--cv-combobox-background);
       }
 
       [part='input'] {
@@ -110,7 +120,7 @@ export class CVCombobox extends ReatomLitElement {
         gap: var(--cv-space-1, 4px);
         padding: 2px var(--cv-space-2, 8px);
         border-radius: var(--cv-radius-sm, 6px);
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+        background: var(--cv-color-primary-ring);
         font-size: 0.85em;
       }
 
@@ -147,6 +157,28 @@ export class CVCombobox extends ReatomLitElement {
         overflow: auto;
         padding: var(--cv-space-1, 4px);
         background: var(--cv-color-surface, #141923);
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-combobox-listbox-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-combobox-listbox-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-combobox-listbox-transition-duration, var(--cv-duration-fast, 120ms))
+            allow-discrete;
+        transition-behavior: allow-discrete;
+      }
+
+      [part='listbox'][hidden] {
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+      }
+
+      @starting-style {
+        [part='listbox']:not([hidden]) {
+          opacity: 0;
+          transform: translate3d(0, -2px, 0);
+        }
       }
 
       [part='group'] {
@@ -201,9 +233,12 @@ export class CVCombobox extends ReatomLitElement {
             }
             else if (this.multiple) {
                 // Multi-mode: parse space-delimited ids
-                const ids = next.split(/\s+/).filter(Boolean);
+                const ids = this.parseMultipleValueIds();
                 const currentIds = this.model.state.selectedIds();
                 if (ids.join(' ') !== currentIds.join(' ')) {
+                    if (this.hasUnknownSelectedIds(ids)) {
+                        return;
+                    }
                     // Clear and re-select each id
                     this.model.actions.clearSelection();
                     for (const id of ids) {
@@ -269,6 +304,13 @@ export class CVCombobox extends ReatomLitElement {
         option.value = fallback;
         return fallback;
     }
+    parseMultipleValueIds() {
+        return this.value.trim().split(/\s+/).filter(Boolean);
+    }
+    hasUnknownSelectedIds(ids) {
+        const enabledIds = new Set(this.optionRecords.filter((record) => !record.disabled).map((record) => record.id));
+        return ids.some((id) => !enabledIds.has(id));
+    }
     resolveInitialSelected(optionElements) {
         const fromProperty = this.value.trim();
         if (fromProperty.length > 0)
@@ -287,7 +329,7 @@ export class CVCombobox extends ReatomLitElement {
             ? this.captureState()
             : {
                 selectedId: this.resolveInitialSelected(optionElements),
-                selectedIds: this.multiple ? this.value.trim().split(/\s+/).filter(Boolean) : [],
+                selectedIds: this.multiple ? this.parseMultipleValueIds() : [],
                 inputValue: this.inputValue,
                 activeId: null,
                 isOpen: this.open,
@@ -298,7 +340,6 @@ export class CVCombobox extends ReatomLitElement {
         this.groupRecords = groupElements.map((element) => {
             const id = `group-${++groupNonce}`;
             const label = element.label || element.getAttribute('label') || '';
-            const childOptions = Array.from(element.children).filter((child) => child.tagName.toLowerCase() === CVComboboxOption.elementName);
             const optionIds = [];
             return { id, label, element, optionIds };
         });
@@ -380,7 +421,7 @@ export class CVCombobox extends ReatomLitElement {
         let initialSelectedId = null;
         let initialSelectedIds;
         if (this.multiple) {
-            const prevIds = previousState.selectedIds ?? [];
+            const prevIds = this.parseMultipleValueIds();
             initialSelectedIds = prevIds.filter((id) => enabledIds.has(id));
         }
         else {
@@ -824,7 +865,7 @@ export class CVCombobox extends ReatomLitElement {
           aria-multiselectable=${listboxProps['aria-multiselectable'] ?? nothing}
           ?hidden=${!this.open}
           part="listbox"
-          class="cv-u-panel-shell"
+          class="cv-u-panel-shell cv-u-discrete-presence"
         >
           ${hasGroups ? this.renderListboxContent() : html `<slot @slotchange=${this.handleSlotChange}></slot>`}
         </div>

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

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