@chromvoid/uikit 0.1.0 → 0.2.0

package/dist/components/cv-progress-ring.d.ts

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

package/dist/components/cv-progress-ring.js

@@ -1,5 +1,6 @@
 import { createProgress } from '@chromvoid/headless-ui/progress';
-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 cvProgressRingNonce = 0;
 const RADIUS = 45;

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

@@ -1,5 +1,6 @@
 import type { PropertyValues } from 'lit';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+type CVProgressTone = 'upload' | 'queued' | 'success' | 'danger' | 'warning';
 export declare class CVProgress extends ReatomLitElement {
     static elementName: string;
     static get properties(): {
@@ -27,6 +28,10 @@ export declare class CVProgress extends ReatomLitElement {
             type: StringConstructor;
             attribute: string;
         };
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     value: number;
     min: number;
@@ -34,6 +39,7 @@ export declare class CVProgress extends ReatomLitElement {
     indeterminate: boolean;
     valueText: string;
     ariaLabel: string;
+    tone: CVProgressTone | undefined;
     private readonly idBase;
     private model;
     constructor();
@@ -41,5 +47,6 @@ export declare class CVProgress extends ReatomLitElement {
     static define(): void;
     willUpdate(changedProperties: PropertyValues): void;
     private createModel;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
+export {};

package/dist/components/cv-progress.js

@@ -1,5 +1,6 @@
 import { createProgress } from '@chromvoid/headless-ui/progress';
-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 cvProgressNonce = 0;
 export class CVProgress extends ReatomLitElement {
@@ -12,6 +13,7 @@ export class CVProgress extends ReatomLitElement {
             indeterminate: { type: Boolean, reflect: true },
             valueText: { type: String, attribute: 'value-text' },
             ariaLabel: { type: String, attribute: 'aria-label' },
+            tone: { type: String, reflect: true },
         };
     }
     idBase = `cv-progress-${++cvProgressNonce}`;
@@ -24,6 +26,7 @@ export class CVProgress extends ReatomLitElement {
         this.indeterminate = false;
         this.valueText = '';
         this.ariaLabel = '';
+        this.tone = undefined;
         this.model = this.createModel();
     }
     static styles = [
@@ -46,11 +49,9 @@ export class CVProgress extends ReatomLitElement {
         block-size: 100%;
         inline-size: var(--cv-progress-width, 0%);
         border-radius: inherit;
-        background: linear-gradient(
-          90deg,
-          var(--cv-progress-indicator-color, var(--cv-color-primary, #65d7ff)) 0%,
-          color-mix(in oklab, var(--cv-progress-indicator-color, var(--cv-color-primary, #65d7ff)) 70%, white)
-            100%
+        background: var(
+          --cv-progress-indicator-background,
+          var(--cv-gradient-progress-primary, var(--cv-gradient-primary))
         );
         transition: inline-size var(--cv-duration-normal, 220ms) var(--cv-easing-standard, ease);
         position: relative;
@@ -71,10 +72,40 @@ export class CVProgress extends ReatomLitElement {
       }
 
       :host([data-complete]) [part='indicator'] {
-        background: linear-gradient(
-          90deg,
-          var(--cv-color-success, #6ef7c8) 0%,
-          color-mix(in oklab, var(--cv-color-success, #6ef7c8) 70%, white) 100%
+        background: var(--cv-gradient-progress-success, var(--cv-gradient-success));
+      }
+
+      :host([tone='upload']) {
+        --cv-progress-height: var(--cv-progress-upload-height, 6px);
+        --cv-progress-track-color: var(--cv-progress-upload-track-color, var(--cv-color-border));
+        --cv-progress-indicator-background: var(
+          --cv-progress-upload-indicator-background,
+          var(--cv-gradient-primary)
+        );
+      }
+
+      :host([tone='queued']) {
+        --cv-progress-indicator-background: var(
+          --cv-progress-tone-queued-background,
+          var(--cv-color-border-strong)
+        );
+      }
+
+      :host([tone='success']) {
+        --cv-progress-indicator-background: var(
+          --cv-progress-tone-success-background,
+          var(--cv-color-success)
+        );
+      }
+
+      :host([tone='danger']) {
+        --cv-progress-indicator-background: var(--cv-progress-tone-danger-background, var(--cv-color-danger));
+      }
+
+      :host([tone='warning']) {
+        --cv-progress-indicator-background: var(
+          --cv-progress-tone-warning-background,
+          var(--cv-color-warning)
         );
       }
 

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

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

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

@@ -32,5 +32,5 @@ export declare class CVRadio 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-radio.js

@@ -77,7 +77,7 @@ export class CVRadio extends LitElement {
       }
 
       :host([active]) .radio {
-        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 12%, transparent);
+        background: var(--cv-color-primary-surface);
       }
 
       :host([checked]) .indicator {

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

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

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

@@ -36,11 +36,11 @@ export class CVSelectOption 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-select.d.ts

@@ -124,5 +124,5 @@ export declare class CVSelect extends FormAssociatedReatomElement {
     private handleClearClick;
     private handleSlotChange;
     private getValueText;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/cv-select.js

@@ -73,6 +73,9 @@ export class CVSelect extends FormAssociatedReatomElement {
         css `
       :host {
         inline-size: var(--cv-select-inline-size, 260px);
+        --cv-select-border-color: var(--cv-color-border, #2a3245);
+        --cv-select-border-radius: var(--cv-radius-sm, 6px);
+        --cv-select-background: var(--cv-color-surface, #141923);
       }
 
       :host([disabled]) {
@@ -92,6 +95,9 @@ export class CVSelect extends FormAssociatedReatomElement {
         min-block-size: var(--cv-select-min-height, 36px);
         padding: var(--cv-select-padding-block, var(--cv-space-2, 8px))
           var(--cv-select-padding-inline, var(--cv-space-3, 12px));
+        border: 1px solid var(--cv-select-border-color);
+        border-radius: var(--cv-select-border-radius);
+        background: var(--cv-select-background);
         color: var(--cv-color-text, #e8ecf6);
         cursor: pointer;
       }
@@ -142,6 +148,27 @@ export class CVSelect extends FormAssociatedReatomElement {
         gap: var(--cv-space-1, 4px);
         padding: var(--cv-space-1, 4px);
         background: var(--cv-color-surface-elevated, #1d2432);
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+        transition:
+          opacity var(--cv-select-listbox-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          transform var(--cv-select-listbox-transition-duration, var(--cv-duration-fast, 120ms))
+            var(--cv-easing-standard, ease),
+          display var(--cv-select-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);
+        }
       }
     `,
     ];
@@ -655,7 +682,7 @@ export class CVSelect extends FormAssociatedReatomElement {
           aria-activedescendant=${listboxProps['aria-activedescendant'] ?? nothing}
           ?hidden=${listboxProps.hidden}
           part="listbox"
-          class="cv-u-panel-shell"
+          class="cv-u-panel-shell cv-u-discrete-presence"
           @keydown=${this.handleListboxKeyDown}
         >
           <slot @slotchange=${this.handleSlotChange}></slot>

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

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

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

@@ -166,6 +166,6 @@ export declare class CVSidebar extends ReatomLitElement {
     private updateActiveId;
     private syncScrollspyActiveState;
     private revealActiveBinding;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }
 export {};

package/dist/components/cv-sidebar.js

@@ -1,5 +1,6 @@
 import { createSidebar } from '@chromvoid/headless-ui/sidebar';
-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 cvSidebarNonce = 0;
 const TOP_ANCHOR_THRESHOLDS = [0, 0.25, 0.5, 0.75, 1];
@@ -91,7 +92,7 @@ export class CVSidebar extends ReatomLitElement {
         position: fixed;
         inset: 0;
         z-index: calc(var(--cv-sidebar-z-index, 30) + 10);
-        background: var(--cv-sidebar-overlay-color, color-mix(in oklab, black 56%, transparent));
+        background: var(--cv-sidebar-overlay-color, var(--cv-color-overlay));
       }
 
       [part='overlay'][hidden] {

package/dist/components/cv-slider-multi-thumb.d.ts

@@ -69,5 +69,5 @@ export declare class CVSliderMultiThumb extends ReatomLitElement {
     private cleanupDragListeners;
     private handleThumbFocus;
     private handleThumbKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-slider-multi-thumb.js

@@ -1,5 +1,6 @@
 import { createSliderMultiThumb, } from '@chromvoid/headless-ui/slider-multi-thumb';
-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 sliderKeyboardKeys = new Set([
     'ArrowLeft',

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

@@ -5,6 +5,12 @@ export interface CVSliderEventDetail {
     value: number;
     percentage: number;
 }
+export type CVSliderInputEvent = CustomEvent<CVSliderEventDetail>;
+export type CVSliderChangeEvent = CustomEvent<CVSliderEventDetail>;
+export interface CVSliderEventMap {
+    'cv-input': CVSliderInputEvent;
+    'cv-change': CVSliderChangeEvent;
+}
 export declare class CVSlider extends ReatomLitElement {
     static elementName: string;
     static get properties(): {
@@ -64,21 +70,28 @@ export declare class CVSlider extends ReatomLitElement {
     private model;
     private dragging;
     private dragValueChanged;
+    private activePointerId;
+    private dragAbortController;
     constructor();
     static styles: import("lit").CSSResult[];
     static define(): void;
     disconnectedCallback(): void;
     willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
     private createModel;
     private getEventDetail;
+    private getSliderPercentage;
+    private applySliderPercentage;
     private dispatchInput;
     private dispatchChange;
     private syncFromModelAndEmit;
     private updateValueFromPointer;
+    private getPointerId;
     private handleThumbKeyDown;
-    private handleTrackMouseDown;
-    private handleDocumentMouseMove;
-    private handleDocumentMouseUp;
+    private handleBasePointerDown;
+    private handleDocumentPointerMove;
+    private handleDocumentPointerUp;
+    private handleDocumentPointerCancel;
     private cleanupDragListeners;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-slider.js

@@ -1,5 +1,6 @@
 import { createSlider } from '@chromvoid/headless-ui/slider';
-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 sliderKeyboardKeys = new Set([
     'ArrowLeft',
@@ -32,6 +33,8 @@ export class CVSlider extends ReatomLitElement {
     model;
     dragging = false;
     dragValueChanged = false;
+    activePointerId = null;
+    dragAbortController = null;
     constructor() {
         super();
         this.value = 0;
@@ -60,6 +63,8 @@ export class CVSlider extends ReatomLitElement {
         place-items: center;
         inline-size: 100%;
         block-size: 24px;
+        touch-action: pan-y;
+        -webkit-tap-highlight-color: transparent;
         --cv-slider-percentage: 0%;
       }
 
@@ -70,6 +75,8 @@ export class CVSlider extends ReatomLitElement {
         border-radius: 999px;
         border: 1px solid var(--cv-color-border, #2a3245);
         background: var(--cv-color-surface, #141923);
+        touch-action: pan-y;
+        -webkit-tap-highlight-color: transparent;
       }
 
       [part='range'] {
@@ -96,6 +103,8 @@ export class CVSlider extends ReatomLitElement {
         background: var(--cv-color-surface-elevated, #1d2432);
         transform: translate(-50%, -50%);
         cursor: grab;
+        touch-action: pan-y;
+        -webkit-tap-highlight-color: transparent;
       }
 
       [part='thumb']:focus-visible {
@@ -115,11 +124,13 @@ export class CVSlider extends ReatomLitElement {
       :host([orientation='vertical']) [part='base'] {
         inline-size: 24px;
         block-size: 100%;
+        touch-action: pan-x;
       }
 
       :host([orientation='vertical']) [part='track'] {
         inline-size: 6px;
         block-size: 100%;
+        touch-action: pan-x;
       }
 
       :host([orientation='vertical']) [part='range'] {
@@ -140,6 +151,7 @@ export class CVSlider extends ReatomLitElement {
         inset-block-start: auto;
         inset-block-end: var(--cv-slider-percentage);
         transform: translate(-50%, 50%);
+        touch-action: pan-x;
       }
 
       :host([disabled]) [part='base'] {
@@ -180,6 +192,10 @@ export class CVSlider extends ReatomLitElement {
             this.model.actions.setValue(this.value);
         }
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.applySliderPercentage();
+    }
     createModel() {
         return createSlider({
             idBase: this.idBase,
@@ -201,6 +217,13 @@ export class CVSlider extends ReatomLitElement {
             percentage: this.model.state.percentage(),
         };
     }
+    getSliderPercentage() {
+        return Math.max(0, Math.min(100, this.model.state.percentage()));
+    }
+    applySliderPercentage() {
+        const base = this.shadowRoot?.querySelector('[part="base"]');
+        base?.style.setProperty('--cv-slider-percentage', `${this.getSliderPercentage()}%`);
+    }
     dispatchInput(detail) {
         this.dispatchEvent(new CustomEvent('cv-input', {
             detail,
@@ -218,6 +241,7 @@ export class CVSlider extends ReatomLitElement {
     syncFromModelAndEmit(previousValue, emitChange) {
         const nextValue = this.model.state.value();
         this.value = nextValue;
+        this.applySliderPercentage();
         if (previousValue === nextValue)
             return false;
         const detail = this.getEventDetail();
@@ -245,6 +269,9 @@ export class CVSlider extends ReatomLitElement {
         this.model.actions.setValue(nextValue);
         return this.syncFromModelAndEmit(previousValue, false);
     }
+    getPointerId(event) {
+        return Number.isFinite(event.pointerId) ? event.pointerId : 1;
+    }
     handleThumbKeyDown(event) {
         if (sliderKeyboardKeys.has(event.key)) {
             event.preventDefault();
@@ -253,25 +280,38 @@ export class CVSlider extends ReatomLitElement {
         this.model.contracts.getThumbProps().onKeyDown(event);
         this.syncFromModelAndEmit(previousValue, true);
     }
-    handleTrackMouseDown(event) {
-        if (this.disabled || event.button !== 0)
+    handleBasePointerDown(event) {
+        if (this.disabled || event.isPrimary === false || event.button !== 0)
             return;
         event.preventDefault();
         this.shadowRoot?.querySelector('[part="thumb"]')?.focus();
+        this.cleanupDragListeners();
         this.dragging = true;
+        this.activePointerId = this.getPointerId(event);
         this.dragValueChanged = this.updateValueFromPointer(event.clientX, event.clientY);
-        document.addEventListener('mousemove', this.handleDocumentMouseMove);
-        document.addEventListener('mouseup', this.handleDocumentMouseUp);
+        const controller = new AbortController();
+        this.dragAbortController = controller;
+        document.addEventListener('pointermove', (moveEvent) => this.handleDocumentPointerMove(moveEvent), {
+            signal: controller.signal,
+        });
+        document.addEventListener('pointerup', (upEvent) => this.handleDocumentPointerUp(upEvent), {
+            signal: controller.signal,
+        });
+        document.addEventListener('pointercancel', (cancelEvent) => this.handleDocumentPointerCancel(cancelEvent), {
+            signal: controller.signal,
+        });
     }
-    handleDocumentMouseMove = (event) => {
-        if (!this.dragging)
+    handleDocumentPointerMove(event) {
+        if (!this.dragging || this.getPointerId(event) !== this.activePointerId)
             return;
+        event.preventDefault();
         const changed = this.updateValueFromPointer(event.clientX, event.clientY);
         this.dragValueChanged = this.dragValueChanged || changed;
-    };
-    handleDocumentMouseUp = (event) => {
-        if (!this.dragging)
+    }
+    handleDocumentPointerUp(event) {
+        if (!this.dragging || this.getPointerId(event) !== this.activePointerId)
             return;
+        event.preventDefault();
         const changed = this.updateValueFromPointer(event.clientX, event.clientY);
         this.dragValueChanged = this.dragValueChanged || changed;
         if (this.dragValueChanged) {
@@ -280,30 +320,32 @@ export class CVSlider extends ReatomLitElement {
         this.dragging = false;
         this.dragValueChanged = false;
         this.cleanupDragListeners();
-    };
+    }
+    handleDocumentPointerCancel(event) {
+        if (this.getPointerId(event) !== this.activePointerId)
+            return;
+        this.dragging = false;
+        this.dragValueChanged = false;
+        this.cleanupDragListeners();
+    }
     cleanupDragListeners() {
-        document.removeEventListener('mousemove', this.handleDocumentMouseMove);
-        document.removeEventListener('mouseup', this.handleDocumentMouseUp);
+        this.dragAbortController?.abort();
+        this.dragAbortController = null;
+        this.activePointerId = null;
     }
     render() {
         const rootProps = this.model.contracts.getRootProps();
         const trackProps = this.model.contracts.getTrackProps();
         const thumbProps = this.model.contracts.getThumbProps();
-        const percentage = Math.max(0, Math.min(100, this.model.state.percentage()));
         return html `
       <div
         id=${rootProps.id}
         data-orientation=${rootProps['data-orientation']}
         aria-disabled=${rootProps['aria-disabled'] ?? nothing}
-        style=${`--cv-slider-percentage:${percentage}%;`}
         part="base"
+        @pointerdown=${this.handleBasePointerDown}
       >
-        <div
-          id=${trackProps.id}
-          data-orientation=${trackProps['data-orientation']}
-          part="track"
-          @mousedown=${this.handleTrackMouseDown}
-        >
+        <div id=${trackProps.id} data-orientation=${trackProps['data-orientation']} part="track">
           <div part="range"></div>
           <div
             id=${thumbProps.id}

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

@@ -117,5 +117,5 @@ export declare class CVSpinbutton extends FormAssociatedReatomElement {
     private handleSpinbuttonKeyDown;
     private handleIncrementClick;
     private handleDecrementClick;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -14,5 +14,5 @@ export declare class CVSpinner extends ReatomLitElement {
     static styles: import("lit").CSSResult[];
     static define(): void;
     willUpdate(changedProperties: PropertyValues): void;
-    protected render(): import("lit").TemplateResult<2>;
+    protected render(): import("lit-html").TemplateResult;
 }

package/dist/components/cv-spinner.js

@@ -1,5 +1,6 @@
 import { createSpinner } from '@chromvoid/headless-ui/spinner';
-import { css, svg } from 'lit';
+import { css } from 'lit';
+import { svg } from '../reatom-lit/index.js';
 import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
 const RADIUS = 45;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

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

@@ -76,6 +76,6 @@ export declare class CVSwitch extends FormAssociatedReatomElement {
     private isEffectivelyDisabled;
     private handleClick;
     private handleKeyDown;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/components/cv-tab-panel.d.ts

@@ -16,5 +16,5 @@ export declare class CVTabPanel 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-tab.d.ts

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

package/dist/components/cv-table-cell.d.ts

@@ -27,5 +27,5 @@ export declare class CVTableCell 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-table-cell.js

@@ -22,7 +22,7 @@ export class CVTableCell extends LitElement {
         display: table-cell;
         padding: var(--cv-table-cell-padding-block, var(--cv-space-2, 8px))
           var(--cv-table-cell-padding-inline, var(--cv-space-3, 12px));
-        border-bottom: 1px solid color-mix(in oklab, var(--cv-color-border, #2a3245) 70%, transparent);
+        border-bottom: 1px solid var(--cv-color-border-soft);
         color: var(--cv-color-text, #e8ecf6);
       }
 

package/dist/components/cv-table-column.d.ts

@@ -33,5 +33,5 @@ export declare class CVTableColumn 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-table-column.js

@@ -26,7 +26,7 @@ export class CVTableColumn extends LitElement {
         border-bottom: 1px solid var(--cv-color-border, #2a3245);
         font-weight: 600;
         color: var(--cv-color-text, #e8ecf6);
-        background: color-mix(in oklab, var(--cv-color-surface, #141923) 82%, transparent);
+        background: var(--cv-color-surface-glass-strong);
         outline: none;
       }
 

package/dist/components/cv-table-row.d.ts

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