@chromvoid/uikit 0.1.0 → 0.2.0

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

@@ -13,6 +13,7 @@ export interface CVMenuButtonEventMap {
     'cv-change': CVMenuButtonChangeEvent;
     'cv-action': CVMenuButtonActionEvent;
 }
+type CVMenuButtonPreset = 'icon-overflow';
 export declare class CVMenuButton extends ReatomLitElement {
     static elementName: string;
     static hostDisplay: "inline-block";
@@ -41,6 +42,10 @@ export declare class CVMenuButton extends ReatomLitElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        preset: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         closeOnSelect: {
             type: BooleanConstructor;
             attribute: string;
@@ -57,10 +62,12 @@ export declare class CVMenuButton extends ReatomLitElement {
     split: boolean;
     size: 'small' | 'medium' | 'large';
     variant: 'default' | 'primary' | 'danger' | 'ghost';
+    preset: CVMenuButtonPreset | undefined;
     closeOnSelect: boolean;
     ariaLabel: string;
     private readonly idBase;
     private itemRecords;
+    private portalItemRecords;
     private itemListeners;
     private hasPrefixContent;
     private hasLabelContent;
@@ -68,6 +75,9 @@ export declare class CVMenuButton extends ReatomLitElement {
     private model?;
     private hasLayoutListeners;
     private layoutFrame;
+    private portalRoot;
+    private readonly portalClickListener;
+    private readonly portalKeydownListener;
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
@@ -77,10 +87,15 @@ export declare class CVMenuButton extends ReatomLitElement {
     updated(changedProperties: PropertyValues): void;
     private getMenuElement;
     private getBaseElement;
+    private ensurePortalRoot;
+    private destroyPortal;
     private clearInlineLayout;
     private getMenuOffset;
     private getMenuMinInlineSize;
+    private getMenuInlineStart;
+    private getMenuItemProperty;
     private applyMenuLayout;
+    private applyPortalLayout;
     private syncMenuLayout;
     private cancelLayoutFrame;
     private scheduleLayout;
@@ -96,6 +111,10 @@ export declare class CVMenuButton extends ReatomLitElement {
     private detachItemListeners;
     private attachItemListeners;
     private syncItemElements;
+    private applyItemElementState;
+    private syncPortalElements;
+    private applyPortalBaseState;
+    private getMenuZIndex;
     private captureState;
     private dispatchInput;
     private dispatchChange;
@@ -104,6 +123,9 @@ export declare class CVMenuButton extends ReatomLitElement {
     private applyInteractionResult;
     private syncOutsidePointerListener;
     private handleDocumentPointerDown;
+    private getPortalItemIdFromEvent;
+    private handlePortalClick;
+    private handlePortalKeyDown;
     private handleItemClick;
     private handleTriggerClick;
     private handleActionClick;
@@ -114,5 +136,6 @@ export declare class CVMenuButton extends ReatomLitElement {
     private renderDropdownIcon;
     private renderSplitMode;
     private renderStandardMode;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
+export {};

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

@@ -1,5 +1,6 @@
 import { createMenuButton } from '@chromvoid/headless-ui/menu-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';
 import { CVIcon } from './cv-icon.js';
 import { CVMenuItem } from './cv-menu-item.js';
@@ -26,12 +27,14 @@ export class CVMenuButton extends ReatomLitElement {
             split: { type: Boolean, reflect: true },
             size: { type: String, reflect: true },
             variant: { type: String, reflect: true },
+            preset: { type: String, reflect: true },
             closeOnSelect: { type: Boolean, attribute: 'close-on-select', reflect: true },
             ariaLabel: { type: String, attribute: 'aria-label' },
         };
     }
     idBase = `cv-menu-button-${++cvMenuButtonNonce}`;
     itemRecords = [];
+    portalItemRecords = [];
     itemListeners = new WeakMap();
     hasPrefixContent = false;
     hasLabelContent = false;
@@ -39,6 +42,9 @@ export class CVMenuButton extends ReatomLitElement {
     model;
     hasLayoutListeners = false;
     layoutFrame = -1;
+    portalRoot = null;
+    portalClickListener = (event) => this.handlePortalClick(event);
+    portalKeydownListener = (event) => this.handlePortalKeyDown(event);
     constructor() {
         super();
         this.value = '';
@@ -47,6 +53,7 @@ export class CVMenuButton extends ReatomLitElement {
         this.split = false;
         this.size = 'medium';
         this.variant = 'default';
+        this.preset = undefined;
         this.closeOnSelect = true;
         this.ariaLabel = '';
     }
@@ -57,9 +64,12 @@ export class CVMenuButton extends ReatomLitElement {
         --cv-menu-button-padding-inline: var(--cv-space-3, 12px);
         --cv-menu-button-padding-block: var(--cv-space-2, 8px);
         --cv-menu-button-border-radius: var(--cv-radius-sm, 6px);
+        --cv-menu-button-border-color: var(--cv-color-border, #2a3245);
+        --cv-menu-button-background: var(--cv-color-surface, #141923);
         --cv-menu-button-gap: var(--cv-space-2, 8px);
         --cv-menu-button-font-size: inherit;
         --cv-menu-button-menu-offset: var(--cv-space-1, 4px);
+        --cv-menu-button-menu-align: start;
         --cv-menu-button-menu-min-inline-size: 180px;
         --cv-menu-button-menu-z-index: 20;
       }
@@ -78,6 +88,9 @@ export class CVMenuButton extends ReatomLitElement {
         gap: var(--cv-menu-button-gap);
         min-block-size: var(--cv-menu-button-min-height);
         padding: var(--cv-menu-button-padding-block) var(--cv-menu-button-padding-inline);
+        border: 1px solid var(--cv-menu-button-border-color);
+        border-radius: var(--cv-menu-button-border-radius);
+        background: var(--cv-menu-button-background);
         font-size: var(--cv-menu-button-font-size);
         color: var(--cv-color-text, #e8ecf6);
         cursor: pointer;
@@ -164,6 +177,21 @@ export class CVMenuButton extends ReatomLitElement {
         --cv-menu-button-padding-block: var(--cv-space-2, 8px);
       }
 
+      :host([preset='icon-overflow']) {
+        --cv-menu-button-gap: 0;
+        --cv-menu-button-padding-inline: 0;
+        --cv-menu-button-padding-block: 0;
+        --cv-menu-button-menu-offset: var(--cv-menu-button-icon-overflow-menu-offset, var(--cv-space-1, 4px));
+        --cv-menu-button-menu-min-inline-size: var(
+          --cv-menu-button-icon-overflow-menu-min-inline-size,
+          180px
+        );
+        --cv-menu-button-menu-max-inline-size: var(
+          --cv-menu-button-icon-overflow-menu-max-inline-size,
+          min(280px, calc(100vw - 16px))
+        );
+      }
+
       /* --- variant: default --- */
       :host([variant='default']) [part='trigger'],
       :host([variant='default']) [part='action'],
@@ -229,6 +257,7 @@ export class CVMenuButton extends ReatomLitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.detachItemListeners();
+        this.destroyPortal();
         this.syncOutsidePointerListener(true);
         this.toggleLayoutListeners(false);
         this.cancelLayoutFrame();
@@ -282,6 +311,7 @@ export class CVMenuButton extends ReatomLitElement {
         }
         else {
             this.cancelLayoutFrame();
+            this.destroyPortal();
             const menu = this.getMenuElement();
             if (menu) {
                 this.clearInlineLayout(menu);
@@ -297,6 +327,30 @@ export class CVMenuButton extends ReatomLitElement {
     getBaseElement() {
         return this.shadowRoot?.querySelector('[part="base"]');
     }
+    ensurePortalRoot() {
+        const ownerDocument = this.ownerDocument;
+        if (!ownerDocument?.body)
+            return null;
+        if (this.portalRoot?.isConnected) {
+            return this.portalRoot;
+        }
+        const portal = ownerDocument.createElement('div');
+        portal.setAttribute('data-cv-menu-button-portal', this.idBase);
+        portal.addEventListener('click', this.portalClickListener);
+        portal.addEventListener('keydown', this.portalKeydownListener);
+        ownerDocument.body.append(portal);
+        this.portalRoot = portal;
+        return portal;
+    }
+    destroyPortal() {
+        if (!this.portalRoot)
+            return;
+        this.portalRoot.removeEventListener('click', this.portalClickListener);
+        this.portalRoot.removeEventListener('keydown', this.portalKeydownListener);
+        this.portalRoot.remove();
+        this.portalRoot = null;
+        this.portalItemRecords = [];
+    }
     clearInlineLayout(menu) {
         menu.style.position = '';
         menu.style.top = '';
@@ -318,6 +372,23 @@ export class CVMenuButton extends ReatomLitElement {
         const parsed = Number.parseFloat(raw);
         return Number.isFinite(parsed) ? parsed : 180;
     }
+    getMenuInlineStart(baseRect, menuWidth, viewportWidth) {
+        const rawAlign = getComputedStyle(this).getPropertyValue('--cv-menu-button-menu-align').trim();
+        const align = rawAlign === 'center' || rawAlign === 'end' ? rawAlign : 'start';
+        const viewportPadding = 8;
+        const maxLeft = Math.max(viewportPadding, viewportWidth - menuWidth - viewportPadding);
+        const preferredLeft = align === 'center'
+            ? baseRect.left + baseRect.width / 2 - menuWidth / 2
+            : align === 'end'
+                ? baseRect.right - menuWidth
+                : baseRect.left;
+        return Math.min(Math.max(preferredLeft, viewportPadding), maxLeft);
+    }
+    getMenuItemProperty(source, name, fallback) {
+        return (source?.getPropertyValue(name).trim() ||
+            getComputedStyle(this).getPropertyValue(name).trim() ||
+            fallback);
+    }
     applyMenuLayout(menu, base) {
         const baseRect = base.getBoundingClientRect();
         const minWidth = Math.max(this.getMenuMinInlineSize(), Math.ceil(baseRect.width));
@@ -339,10 +410,8 @@ export class CVMenuButton extends ReatomLitElement {
         const spaceBelow = Math.max(0, viewportHeight - baseRect.bottom - viewportPadding - gap);
         const placeAbove = spaceBelow < menuRect.height + gap && spaceAbove > spaceBelow;
         let top = placeAbove ? baseRect.top - menuRect.height - gap : baseRect.bottom + gap;
-        let left = baseRect.left;
-        const maxLeft = Math.max(viewportPadding, viewportWidth - menuRect.width - viewportPadding);
+        let left = this.getMenuInlineStart(baseRect, menuRect.width, viewportWidth);
         const maxTop = Math.max(viewportPadding, viewportHeight - menuRect.height - viewportPadding);
-        left = Math.min(Math.max(left, viewportPadding), maxLeft);
         top = Math.min(Math.max(top, viewportPadding), maxTop);
         menu.style.position = 'absolute';
         menu.style.top = `${top - baseRect.top}px`;
@@ -353,12 +422,48 @@ export class CVMenuButton extends ReatomLitElement {
         menu.style.translate = 'none';
         menu.style.visibility = 'visible';
     }
+    applyPortalLayout(portal, base) {
+        const baseRect = base.getBoundingClientRect();
+        const minWidth = Math.max(this.getMenuMinInlineSize(), Math.ceil(baseRect.width));
+        portal.style.position = 'fixed';
+        portal.style.minWidth = `${minWidth}px`;
+        portal.style.top = '0px';
+        portal.style.left = '0px';
+        portal.style.bottom = 'auto';
+        portal.style.right = 'auto';
+        portal.style.transform = 'none';
+        portal.style.translate = 'none';
+        portal.style.visibility = 'hidden';
+        const menuRect = portal.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const gap = this.getMenuOffset();
+        const viewportPadding = 8;
+        const spaceAbove = Math.max(0, baseRect.top - viewportPadding - gap);
+        const spaceBelow = Math.max(0, viewportHeight - baseRect.bottom - viewportPadding - gap);
+        const placeAbove = spaceBelow < menuRect.height + gap && spaceAbove > spaceBelow;
+        let top = placeAbove ? baseRect.top - menuRect.height - gap : baseRect.bottom + gap;
+        let left = this.getMenuInlineStart(baseRect, menuRect.width, viewportWidth);
+        const maxTop = Math.max(viewportPadding, viewportHeight - menuRect.height - viewportPadding);
+        top = Math.min(Math.max(top, viewportPadding), maxTop);
+        portal.style.position = 'fixed';
+        portal.style.top = `${top}px`;
+        portal.style.left = `${left}px`;
+        portal.style.bottom = 'auto';
+        portal.style.right = 'auto';
+        portal.style.transform = 'none';
+        portal.style.translate = 'none';
+        portal.style.visibility = 'visible';
+    }
     syncMenuLayout() {
         const menu = this.getMenuElement();
         const base = this.getBaseElement();
         if (!menu || !base)
             return;
         this.applyMenuLayout(menu, base);
+        if (this.portalRoot) {
+            this.applyPortalLayout(this.portalRoot, base);
+        }
     }
     cancelLayoutFrame() {
         if (this.layoutFrame === -1)
@@ -517,21 +622,92 @@ export class CVMenuButton extends ReatomLitElement {
             return;
         for (const record of this.itemRecords) {
             const props = this.model.contracts.getItemProps(record.id);
-            record.element.id = props.id;
-            record.element.setAttribute('role', props.role);
-            record.element.setAttribute('tabindex', props.tabindex);
-            if (props['aria-disabled']) {
-                record.element.setAttribute('aria-disabled', props['aria-disabled']);
-            }
-            else {
-                record.element.removeAttribute('aria-disabled');
-            }
-            record.element.setAttribute('data-active', props['data-active']);
-            record.element.active = props['data-active'] === 'true';
-            record.element.selected = this.value === record.id;
-            record.element.disabled = props['aria-disabled'] === 'true';
-            record.element.hidden = !this.open;
+            this.applyItemElementState(record.element, props, this.value === record.id, !this.open);
+        }
+        if (this.open) {
+            this.syncPortalElements();
         }
+        else {
+            this.destroyPortal();
+        }
+    }
+    applyItemElementState(element, props, selected, hidden) {
+        element.id = props.id;
+        element.setAttribute('role', props.role);
+        element.setAttribute('tabindex', props.tabindex);
+        if (props['aria-disabled']) {
+            element.setAttribute('aria-disabled', props['aria-disabled']);
+        }
+        else {
+            element.removeAttribute('aria-disabled');
+        }
+        element.setAttribute('data-active', props['data-active']);
+        element.active = props['data-active'] === 'true';
+        element.selected = selected;
+        element.disabled = props['aria-disabled'] === 'true';
+        element.hidden = hidden;
+    }
+    syncPortalElements() {
+        if (!this.open || !this.model)
+            return;
+        const portal = this.ensurePortalRoot();
+        if (!portal)
+            return;
+        const menu = this.getMenuElement();
+        this.applyPortalBaseState(portal, menu);
+        const fragment = this.ownerDocument.createDocumentFragment();
+        const nextPortalRecords = [];
+        for (const record of this.itemRecords) {
+            const clone = record.element.cloneNode(true);
+            const props = this.model.contracts.getItemProps(record.id);
+            clone.removeAttribute('slot');
+            clone.setAttribute('data-cv-menu-value', record.id);
+            clone.value = record.id;
+            clone.className = record.element.className;
+            this.applyItemElementState(clone, props, this.value === record.id, false);
+            fragment.append(clone);
+            nextPortalRecords.push({ id: record.id, element: clone });
+        }
+        portal.replaceChildren(fragment);
+        this.portalItemRecords = nextPortalRecords;
+        const base = this.getBaseElement();
+        if (base) {
+            this.applyPortalLayout(portal, base);
+        }
+        else {
+            portal.style.visibility = 'hidden';
+        }
+    }
+    applyPortalBaseState(portal, menu) {
+        const source = menu ? getComputedStyle(menu) : null;
+        portal.hidden = false;
+        portal.setAttribute('role', menu?.getAttribute('role') ?? 'menu');
+        portal.setAttribute('tabindex', menu?.getAttribute('tabindex') ?? '-1');
+        portal.setAttribute('aria-label', menu?.getAttribute('aria-label') ?? this.ariaLabel ?? '');
+        portal.style.boxSizing = 'border-box';
+        portal.style.display = 'inline-grid';
+        portal.style.gap = source?.gap || '4px';
+        portal.style.alignContent = source?.alignContent || 'start';
+        portal.style.padding = source?.padding || '4px';
+        portal.style.background = source?.background || 'var(--cv-color-surface-elevated, #1d2432)';
+        portal.style.border = source?.border || '0px solid transparent';
+        portal.style.borderRadius = source?.borderRadius || 'var(--cv-radius-sm, 6px)';
+        portal.style.boxShadow = source?.boxShadow || '';
+        portal.style.color = source?.color || 'var(--cv-color-text, #e8ecf6)';
+        portal.style.font = source?.font || 'inherit';
+        portal.style.maxWidth = source?.maxWidth || 'calc(100vw - 16px)';
+        portal.style.maxHeight = source?.maxHeight || 'calc(100dvh - 16px)';
+        portal.style.overflowY = source?.overflowY || 'auto';
+        portal.style.pointerEvents = 'auto';
+        portal.style.zIndex = source?.zIndex || this.getMenuZIndex();
+        portal.style.setProperty('--cv-menu-item-gap', this.getMenuItemProperty(source, '--cv-menu-item-gap', '10px'));
+        portal.style.setProperty('--cv-menu-item-padding-block', this.getMenuItemProperty(source, '--cv-menu-item-padding-block', '10px'));
+        portal.style.setProperty('--cv-menu-item-padding-inline', this.getMenuItemProperty(source, '--cv-menu-item-padding-inline', '12px'));
+        portal.style.setProperty('--cv-menu-item-border-radius', this.getMenuItemProperty(source, '--cv-menu-item-border-radius', 'var(--cv-radius-1, 6px)'));
+    }
+    getMenuZIndex() {
+        const raw = getComputedStyle(this).getPropertyValue('--cv-menu-button-menu-z-index').trim();
+        return raw || '20';
     }
     captureState() {
         return {
@@ -568,6 +744,11 @@ export class CVMenuButton extends ReatomLitElement {
         const activeId = this.model.state.activeId();
         if (!activeId)
             return;
+        const activePortalRecord = this.portalItemRecords.find((record) => record.id === activeId);
+        if (activePortalRecord) {
+            activePortalRecord.element.focus();
+            return;
+        }
         const activeRecord = this.itemRecords.find((record) => record.id === activeId);
         activeRecord?.element.focus();
     }
@@ -616,10 +797,37 @@ export class CVMenuButton extends ReatomLitElement {
         const path = event.composedPath();
         if (path.includes(this))
             return;
+        if (this.portalRoot && path.includes(this.portalRoot))
+            return;
         const previous = this.captureState();
         this.model.actions.handleOutsidePointer();
         this.applyInteractionResult(previous);
     };
+    getPortalItemIdFromEvent(event) {
+        for (const target of event.composedPath()) {
+            if (!(target instanceof HTMLElement))
+                continue;
+            if (target === this.portalRoot)
+                break;
+            if (target.tagName.toLowerCase() !== CVMenuItem.elementName)
+                continue;
+            const id = target.dataset['cvMenuValue']?.trim();
+            if (id)
+                return id;
+        }
+        return null;
+    }
+    handlePortalClick(event) {
+        const id = this.getPortalItemIdFromEvent(event);
+        if (!id)
+            return;
+        event.preventDefault();
+        this.handleItemClick(id);
+    }
+    handlePortalKeyDown(event) {
+        event.stopPropagation();
+        this.handleKeyDown(event);
+    }
     handleItemClick(id) {
         if (!this.model)
             return;

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

@@ -16,5 +16,5 @@ export declare class CVMenuGroup 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-menu-item.d.ts

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

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

@@ -44,12 +44,16 @@ export class CVMenuItem extends LitElement {
           color var(--cv-duration-fast, 120ms) var(--cv-easing-standard, ease);
       }
 
+      :host(:hover) .item {
+        background: var(--cv-color-primary-ring);
+      }
+
       :host([active]) .item {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 24%, transparent);
+        background: var(--cv-color-primary-ring);
       }
 
       :host([selected]) .item {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 32%, transparent);
+        background: var(--cv-color-primary-border);
       }
 
       :host([disabled]) .item {

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

@@ -58,5 +58,5 @@ export declare class CVMenu extends ReatomLitElement {
     private syncOutsidePointerListener;
     private handleDocumentPointerDown;
     private handleSlotChange;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-menu.js

@@ -1,5 +1,6 @@
 import { createMenu } from '@chromvoid/headless-ui/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 menuKeysToPrevent = new Set([
@@ -52,10 +53,28 @@ export class CVMenu extends ReatomLitElement {
         max-height: var(--cv-menu-max-height, none);
         min-inline-size: var(--cv-menu-min-inline-size, 180px);
         overflow-y: auto;
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-menu-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-menu-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-menu-transition-duration, var(--cv-duration-fast, 120ms)) allow-discrete;
+        transition-behavior: allow-discrete;
       }
 
       [part='base'][hidden] {
         display: none;
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+      }
+
+      @starting-style {
+        [part='base']:not([hidden]) {
+          opacity: 0;
+          transform: translate3d(0, -2px, 0);
+        }
       }
     `,
     ];
@@ -404,6 +423,7 @@ export class CVMenu extends ReatomLitElement {
         tabindex=${menuProps.tabindex}
         aria-label=${menuProps['aria-label'] ?? nothing}
         ?hidden=${!this.open}
+        class="cv-u-discrete-presence"
         part="base"
         @keydown=${this.handleMenuKeyDown}
       >

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

@@ -62,5 +62,5 @@ export declare class CVMeter extends ReatomLitElement {
     willUpdate(changedProperties: PropertyValues): void;
     private createModel;
     private toFiniteOrUndefined;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-meter.js

@@ -1,5 +1,6 @@
 import { createMeter } from '@chromvoid/headless-ui/meter';
-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 cvMeterNonce = 0;
 export class CVMeter extends ReatomLitElement {
@@ -54,38 +55,21 @@ export class CVMeter extends ReatomLitElement {
         block-size: 100%;
         inline-size: var(--cv-meter-width, 0%);
         border-radius: inherit;
-        background: linear-gradient(
-          90deg,
-          var(--cv-color-primary, #65d7ff) 0%,
-          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 70%, white) 100%
-        );
+        background: var(--cv-gradient-progress-primary, var(--cv-gradient-primary));
         transition: inline-size var(--cv-meter-transition-duration, var(--cv-duration-normal, 220ms))
           var(--cv-easing-standard, ease);
       }
 
       [part='indicator'][data-status='low'] {
-        background: linear-gradient(
-          90deg,
-          var(--cv-meter-suboptimum-color, var(--cv-color-warning, #ffbe65)) 0%,
-          color-mix(in oklab, var(--cv-meter-suboptimum-color, var(--cv-color-warning, #ffbe65)) 72%, white)
-            100%
-        );
+        background: var(--cv-gradient-progress-warning, var(--cv-gradient-primary));
       }
 
       [part='indicator'][data-status='high'] {
-        background: linear-gradient(
-          90deg,
-          var(--cv-meter-danger-color, var(--cv-color-danger, #ff7a8a)) 0%,
-          color-mix(in oklab, var(--cv-meter-danger-color, var(--cv-color-danger, #ff7a8a)) 72%, white) 100%
-        );
+        background: var(--cv-gradient-progress-danger, var(--cv-gradient-primary));
       }
 
       [part='indicator'][data-status='optimum'] {
-        background: linear-gradient(
-          90deg,
-          var(--cv-meter-optimum-color, var(--cv-color-success, #6ef7c8)) 0%,
-          color-mix(in oklab, var(--cv-meter-optimum-color, var(--cv-color-success, #6ef7c8)) 72%, white) 100%
-        );
+        background: var(--cv-gradient-progress-success, var(--cv-gradient-success));
       }
     `,
     ];

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

@@ -134,6 +134,6 @@ export declare class CVNumber extends FormAssociatedReatomElement {
     private handleIncrementClick;
     private handleDecrementClick;
     private handleClearClick;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -26,5 +26,5 @@ export declare class CVOption 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-option.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from 'lit';
-import { componentResetStyles, getComponentHostDisplayStyles } from '../styles/component-styles.js';
+import { componentResetStyles } from '../styles/component-styles.js';
 export class CVOption extends LitElement {
     static elementName = 'cv-option';
     static get properties() {
@@ -43,17 +43,11 @@ export class CVOption extends LitElement {
       }
 
       :host([active]) [part='base'] {
-        background: var(
-          --cv-option-active-background,
-          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 22%, transparent)
-        );
+        background: var(--cv-option-active-background, var(--cv-color-primary-ring));
       }
 
       :host([selected]) [part='base'] {
-        background: var(
-          --cv-option-selected-background,
-          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 34%, transparent)
-        );
+        background: var(--cv-option-selected-background, var(--cv-color-primary-border));
         color: var(--cv-color-text, #e8ecf6);
       }
 

package/dist/components/cv-popover-positioning.d.ts

@@ -0,0 +1,22 @@
+export type CVPopoverPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
+export interface CVPopoverRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface CVPopoverViewport {
+    width: number;
+    height: number;
+    padding: number;
+}
+export interface CVPopoverResolvedPosition {
+    left: number;
+    top: number;
+    placement: CVPopoverPlacement;
+}
+export declare function getPlacementFallbacks(placement: CVPopoverPlacement): CVPopoverPlacement[];
+export declare function getPositionAreaForPlacement(placement: CVPopoverPlacement): string;
+export declare function resolvePopoverPosition(anchorRect: CVPopoverRect, panelRect: CVPopoverRect, placement: CVPopoverPlacement, offset: number, viewport: CVPopoverViewport): CVPopoverResolvedPosition;