@sekiui/elements 0.1.5 → 0.1.6

package/dist/collection/components/resizable/seki-resizable-panel-group.js

@@ -1,10 +1,8 @@
 // src/components/resizable/seki-resizable-panel-group.tsx
 import { h, Host } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
+import { clamp, computeHandleRange, computeResize, fitSizesToTotal } from "./layout";
 const STORAGE_KEY_PREFIX = 'seki-resizable:';
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
 /**
  * Resizable panel group - container that manages layout direction and coordinates panel sizes
  *
@@ -22,6 +20,13 @@ export class SekiResizablePanelGroup {
          * Disable all resize interactions
          */
         this.disabled = false;
+        /**
+         * Set once the initial layout is in place (or the user has resized). From then
+         * on, adding/removing a panel keeps the other panels' sizes instead of
+         * recomputing everything from `default-size`.
+         */
+        this.layoutSettled = false;
+        this.panelElements = new Map();
         this._panels = new Map();
         this._panelOrder = [];
         /**
@@ -34,31 +39,42 @@ export class SekiResizablePanelGroup {
             unregisterPanel: () => { },
             getPanelSize: () => 0,
             getPanelOrder: () => [],
+            getHandleRange: () => null,
             resizePanels: () => { },
             collapsePanel: () => { },
             expandPanel: () => { },
             isCollapsed: () => false,
             getHandleIndex: () => -1,
         };
-        this.registerPanel = (id, constraints) => {
+        this.registerPanel = (id, constraints, element) => {
             var _a;
+            if (element)
+                this.panelElements.set(id, element);
             const fullConstraints = Object.assign(Object.assign({}, constraints), { id });
-            const panelState = {
+            const existing = this._panels.get(id);
+            const newPanels = new Map(this._panels);
+            if (existing) {
+                // Constraint update for a panel that is already laid out: keep its size
+                // and order, then re-fit the whole layout to the new limits.
+                newPanels.set(id, Object.assign(Object.assign({}, existing), { constraints: fullConstraints }));
+                this._panels = newPanels;
+                this.distributeSizes(id, false);
+                return;
+            }
+            newPanels.set(id, {
                 id,
                 size: (_a = constraints.defaultSize) !== null && _a !== void 0 ? _a : 0,
                 constraints: fullConstraints,
                 isCollapsed: false,
-            };
-            const newPanels = new Map(this._panels);
-            newPanels.set(id, panelState);
+            });
             this._panels = newPanels;
-            if (!this._panelOrder.includes(id)) {
-                this._panelOrder = [...this._panelOrder, id];
-            }
-            // Distribute sizes if needed
-            this.distributeSizes();
+            this._panelOrder = this.sortByDocumentOrder([...this._panelOrder, id]);
+            this.distributeSizes(id, true);
         };
         this.unregisterPanel = (id) => {
+            this.panelElements.delete(id);
+            if (!this._panels.has(id))
+                return;
             const newPanels = new Map(this._panels);
             newPanels.delete(id);
             this._panels = newPanels;
@@ -80,37 +96,58 @@ export class SekiResizablePanelGroup {
             const handles = Array.from(this.el.querySelectorAll('seki-resizable-handle'));
             return handles.indexOf(handleElement);
         };
-        this.distributeSizes = () => {
+        this.getHandleRange = (handleIndex) => {
+            if (handleIndex < 0 || handleIndex >= this._panelOrder.length - 1)
+                return null;
+            const before = this._panels.get(this._panelOrder[handleIndex]);
+            const after = this._panels.get(this._panelOrder[handleIndex + 1]);
+            if (!before || !after)
+                return null;
+            return computeHandleRange(before, after);
+        };
+        /**
+         * Lay the panels out after the set changed. `addedId` is the panel that was
+         * just registered (or whose constraints changed), if any.
+         */
+        this.distributeSizes = (addedId, isNew = false) => {
+            var _a, _b;
             if (this._panelOrder.length === 0)
                 return;
             const newPanels = new Map(this._panels);
-            let totalSpecified = 0;
-            let unspecifiedCount = 0;
-            // Calculate total specified sizes
-            for (const id of this._panelOrder) {
-                const panel = newPanels.get(id);
-                if (panel && panel.constraints.defaultSize !== undefined) {
-                    totalSpecified += panel.constraints.defaultSize;
+            const panels = this._panelOrder.map((id) => newPanels.get(id)).filter(Boolean);
+            if (!this.layoutSettled) {
+                // Initial mount: panels register one by one, so recompute from defaults.
+                let totalSpecified = 0;
+                let unspecifiedCount = 0;
+                for (const panel of panels) {
+                    if (panel.constraints.defaultSize !== undefined)
+                        totalSpecified += panel.constraints.defaultSize;
+                    else
+                        unspecifiedCount++;
                 }
-                else {
-                    unspecifiedCount++;
+                const perUnspecified = unspecifiedCount > 0 ? (100 - totalSpecified) / unspecifiedCount : 0;
+                for (const panel of panels) {
+                    panel.size = (_a = panel.constraints.defaultSize) !== null && _a !== void 0 ? _a : perUnspecified;
                 }
             }
-            // Distribute remaining space equally among unspecified panels
-            const remaining = 100 - totalSpecified;
-            const perUnspecified = unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;
-            for (const id of this._panelOrder) {
-                const panel = newPanels.get(id);
-                if (panel) {
-                    if (panel.constraints.defaultSize !== undefined) {
-                        panel.size = panel.constraints.defaultSize;
-                    }
-                    else {
-                        panel.size = perUnspecified;
-                    }
-                    newPanels.set(id, panel);
+            else {
+                // Later changes: keep what the user (or the initial layout) arrived at.
+                // A newly added panel claims its default (or an equal share) and the
+                // others give up / take back just enough to total 100.
+                const added = isNew && addedId ? newPanels.get(addedId) : undefined;
+                if (added) {
+                    const share = (_b = added.constraints.defaultSize) !== null && _b !== void 0 ? _b : 100 / panels.length;
+                    added.size = clamp(share, added.constraints.minSize, added.constraints.maxSize);
                 }
+                // Collapsed panels keep their collapsed size; the rest flex.
+                const fixedTotal = panels.filter((p) => p.isCollapsed).reduce((acc, p) => acc + p.size, 0);
+                const others = panels.filter((p) => !p.isCollapsed && p !== added);
+                const target = 100 - fixedTotal - (added ? added.size : 0);
+                const fitted = fitSizesToTotal(others.map((p) => ({ size: p.size, min: p.constraints.minSize, max: p.constraints.maxSize })), target);
+                others.forEach((p, i) => (p.size = fitted[i]));
             }
+            for (const panel of panels)
+                newPanels.set(panel.id, panel);
             this._panels = newPanels;
             this.emitLayoutChange();
         };
@@ -119,52 +156,22 @@ export class SekiResizablePanelGroup {
                 return;
             if (handleIndex < 0 || handleIndex >= this._panelOrder.length - 1)
                 return;
+            if (!deltaPercent)
+                return;
             const panelBeforeId = this._panelOrder[handleIndex];
             const panelAfterId = this._panelOrder[handleIndex + 1];
-            const newPanels = new Map(this._panels);
-            const panelBefore = newPanels.get(panelBeforeId);
-            const panelAfter = newPanels.get(panelAfterId);
+            const panelBefore = this._panels.get(panelBeforeId);
+            const panelAfter = this._panels.get(panelAfterId);
             if (!panelBefore || !panelAfter)
                 return;
-            // Calculate new size for panel before handle
-            let newSizeBefore = panelBefore.size + deltaPercent;
-            let newSizeAfter = panelAfter.size - deltaPercent;
-            // Handle collapse snap for panel before
-            if (panelBefore.constraints.collapsible && newSizeBefore < panelBefore.constraints.minSize && deltaPercent < 0) {
-                newSizeBefore = panelBefore.constraints.collapsedSize;
-                panelBefore.isCollapsed = true;
-            }
-            else if (panelBefore.isCollapsed && deltaPercent > 0) {
-                // Expanding from collapsed
-                newSizeBefore = panelBefore.constraints.minSize;
-                panelBefore.isCollapsed = false;
-            }
-            else {
-                newSizeBefore = clamp(newSizeBefore, panelBefore.constraints.minSize, panelBefore.constraints.maxSize);
-                panelBefore.isCollapsed = false;
-            }
-            // Handle collapse snap for panel after
-            if (panelAfter.constraints.collapsible && newSizeAfter < panelAfter.constraints.minSize && deltaPercent > 0) {
-                newSizeAfter = panelAfter.constraints.collapsedSize;
-                panelAfter.isCollapsed = true;
-            }
-            else if (panelAfter.isCollapsed && deltaPercent < 0) {
-                // Expanding from collapsed
-                newSizeAfter = panelAfter.constraints.minSize;
-                panelAfter.isCollapsed = false;
-            }
-            else {
-                newSizeAfter = clamp(newSizeAfter, panelAfter.constraints.minSize, panelAfter.constraints.maxSize);
-                panelAfter.isCollapsed = false;
-            }
-            // Ensure total stays at 100% (adjust the panel that has room)
-            const actualDelta = newSizeBefore - panelBefore.size;
-            newSizeAfter = panelAfter.size - actualDelta;
-            panelBefore.size = newSizeBefore;
-            panelAfter.size = newSizeAfter;
-            newPanels.set(panelBeforeId, panelBefore);
-            newPanels.set(panelAfterId, panelAfter);
+            const result = computeResize(panelBefore, panelAfter, deltaPercent);
+            if (!result)
+                return;
+            const newPanels = new Map(this._panels);
+            newPanels.set(panelBeforeId, Object.assign(Object.assign({}, panelBefore), result.before));
+            newPanels.set(panelAfterId, Object.assign(Object.assign({}, panelAfter), result.after));
             this._panels = newPanels;
+            this.layoutSettled = true;
             this.emitLayoutChange();
             this.saveLayout();
         };
@@ -245,6 +252,7 @@ export class SekiResizablePanelGroup {
     componentDidLoad() {
         // Try to restore layout from localStorage
         this.restoreLayout();
+        this.layoutSettled = true;
     }
     updateContext() {
         const context = {
@@ -254,6 +262,7 @@ export class SekiResizablePanelGroup {
             unregisterPanel: this.unregisterPanel,
             getPanelSize: this.getPanelSize,
             getPanelOrder: this.getPanelOrder,
+            getHandleRange: this.getHandleRange,
             resizePanels: this.resizePanels,
             collapsePanel: this.collapsePanel,
             expandPanel: this.expandPanel,
@@ -265,6 +274,17 @@ export class SekiResizablePanelGroup {
         // and notify any child that mounted before this group was defined.
         publishContext(this.el, '_resizableContext', context, this.contextChange);
     }
+    /** Panels can finish loading in any order; handle indices follow the DOM. */
+    sortByDocumentOrder(ids) {
+        const FOLLOWING = 4; // Node.DOCUMENT_POSITION_FOLLOWING
+        return [...ids].sort((a, b) => {
+            const ea = this.panelElements.get(a);
+            const eb = this.panelElements.get(b);
+            if (!ea || !eb)
+                return 0;
+            return ea.compareDocumentPosition(eb) & FOLLOWING ? -1 : 1;
+        });
+    }
     emitLayoutChange() {
         const sizes = this._panelOrder.map((id) => { var _a, _b; return (_b = (_a = this._panels.get(id)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0; });
         this.sekiLayoutChange.emit(sizes);
@@ -312,11 +332,11 @@ export class SekiResizablePanelGroup {
         }
     }
     render() {
-        return (h(Host, { key: '38f00f78a09473cd8197e2ab86de77b7452ae056' }, h("div", { key: '3e70a20b91c12276faa806c0b558286f2af5e1d5', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
+        return (h(Host, { key: '5fe1c6125506aee9cae6d412c33846986004f04c' }, h("div", { key: '04e52a26b3cb5cef717e4b7cffa76b9f198875db', part: "group", role: "group", "aria-label": "Resizable panel group", class: {
                 'resizable-panel-group': true,
                 'resizable-panel-group--horizontal': this.direction === 'horizontal',
                 'resizable-panel-group--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: '04b9acd57ec8dbc4d1ec24831d4d1f779063afa2' }))));
+            } }, h("slot", { key: '86ace975a70a0c3fcdf4acd2e98cebfee9812c98' }))));
     }
     static get is() { return "seki-resizable-panel-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/resizable/seki-resizable-panel.css

@@ -329,6 +329,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/resizable/seki-resizable-panel.js

@@ -58,11 +58,14 @@ export class SekiResizablePanel {
             maxSize: this.maxSize,
             collapsible: this.collapsible,
             collapsedSize: this.collapsedSize,
-        });
+        }, this.el);
         this.hasRegistered = true;
     }
     getContext() {
-        const group = this.el.closest('seki-resizable-panel-group');
+        var _a;
+        // Once detached, closest() no longer finds the group; fall back to the one
+        // we were registered with so removal can still unregister this panel.
+        const group = (_a = this.el.closest('seki-resizable-panel-group')) !== null && _a !== void 0 ? _a : this.groupElement;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return group ? group._resizableContext : null;
     }
@@ -104,9 +107,10 @@ export class SekiResizablePanel {
         const context = this.getContext();
         if (context) {
             // Re-register with new constraints
-            context.unregisterPanel(this.panelId);
+            // The group updates constraints in place, keeping this panel's size and order.
             this.hasRegistered = false;
             this.registerWithGroup();
+            this.updateSize();
         }
     }
     updateSize() {
@@ -164,14 +168,14 @@ export class SekiResizablePanel {
         return this.panelId;
     }
     render() {
-        return (h(Host, { key: 'b8de78bb2e22fcdb55a75ce15ec2738f8ce5503d', style: {
+        return (h(Host, { key: '7131acc444ff314abcecdefea6d50a7d35b0994e', style: {
                 flexBasis: `${this._size}%`,
                 flexGrow: '0',
                 flexShrink: '0',
-            } }, h("div", { key: '157870f62b18e505693463b7f098563e61c9845f', part: "panel", role: "region", class: {
+            } }, h("div", { key: '2b75e0fe753750cf3f3dba471c51b75d23b44356', part: "panel", role: "region", class: {
                 'resizable-panel': true,
                 'resizable-panel--collapsed': this._isCollapsed,
-            } }, h("slot", { key: '69fd5281eabcf236869470e9138c474a645a7fc5' }))));
+            } }, h("slot", { key: '295aa48096e5188fd40dda5e52f180eb4512a193' }))));
     }
     static get is() { return "seki-resizable-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-area.js

@@ -92,6 +92,10 @@ export class SekiScrollArea {
             return;
         this.resizeObserver = new ResizeObserver(() => {
             this.updateScrollState();
+            // Content or viewport size changed without a scroll: tell the bars to
+            // recompute (they otherwise only react to sekiScroll). Internal,
+            // non-bubbling, not part of the public API.
+            this.el.dispatchEvent(new CustomEvent('sekiScrollMetricsChange', { bubbles: false }));
         });
         // Observe the viewport for size changes
         this.resizeObserver.observe(this.viewportRef);
@@ -152,7 +156,7 @@ export class SekiScrollArea {
     render() {
         const hasVerticalOverflow = this.scrollState.scrollHeight > this.scrollState.clientHeight;
         const hasHorizontalOverflow = this.scrollState.scrollWidth > this.scrollState.clientWidth;
-        return (h(Host, { key: 'd933f2f45821018aa92a2b9b88638eb6f061aaf6', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '14c88c502df49b8609f8a7177d4920bca2df4f47', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'db9426461caa0293381031c4943c0748bce2a0f9', class: "content" }, h("slot", { key: '2c686a9252fde9cd33d35935340c15f2ab7c521c' }))), h("slot", { key: 'c99e4816a50c0fea88cadf3e86764494db2f487e', name: "scrollbar" })));
+        return (h(Host, { key: '3f9483889afadab1fd2d9a3c07117361860f4a65', "data-state": this.isScrollbarVisible ? 'visible' : 'hidden', "data-has-vertical-overflow": hasVerticalOverflow ? '' : undefined, "data-has-horizontal-overflow": hasHorizontalOverflow ? '' : undefined }, h("div", { key: '72e180d10f8832ebfff6d74f2c5c26c6b3628d23', ref: (el) => (this.viewportRef = el), part: "viewport", class: "viewport", tabindex: "0", onScroll: this.handleScroll, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '5b37a7765bb258ac4c66174c3fde3100d187a8e8', class: "content" }, h("slot", { key: '918a356ec02a2c5ad23bc9190324dca3a18543c3' }))), h("slot", { key: '2232c0cb5529adc0e5dd63d72578902f42472db2', name: "scrollbar" })));
     }
     static get is() { return "seki-scroll-area"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scroll-area/seki-scroll-bar.css

@@ -333,6 +333,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/scroll-area/seki-scroll-bar.js

@@ -91,6 +91,7 @@ export class SekiScrollBar {
         if (scrollArea) {
             this.scrollAreaRef = scrollArea;
             scrollArea.addEventListener('sekiScroll', this.scrollHandler);
+            scrollArea.addEventListener('sekiScrollMetricsChange', this.scrollHandler);
             // Also update on resize
             this.resizeObserver = new ResizeObserver(() => {
                 this.updateFromContext();
@@ -107,14 +108,15 @@ export class SekiScrollBar {
         this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-scroll-area', ['data-state', 'data-has-vertical-overflow', 'data-has-horizontal-overflow'], { trackHover: true });
     }
     disconnectedCallback() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp);
         document.removeEventListener('touchmove', this.handleTouchMove);
         document.removeEventListener('touchend', this.handleTouchEnd);
         (_a = this.scrollAreaRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiScroll', this.scrollHandler);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        (_c = this.attrMirror) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_b = this.scrollAreaRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('sekiScrollMetricsChange', this.scrollHandler);
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this.attrMirror) === null || _d === void 0 ? void 0 : _d.disconnect();
         this.attrMirror = undefined;
     }
     updateFromContext() {

package/dist/collection/components/select/seki-select.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/select-content/seki-select-content.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/select-group/seki-select-group.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/select-group/seki-select-group.js

@@ -11,7 +11,7 @@ export class SekiSelectGroup {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '0707b0bf05de6c1b88196de6729f3c10b6259a40' }, h("div", { key: '59d2bfe73a9b1bc693d81309740c98228d3f2486', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: '19598269e7471b45d7694b20c4f1872f1de9fed6', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '113bcca772015b15ff3c7f625db31ace791b5d5d', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'b223766c95a812ad6c74e306688f50079ae0d079', name: "label" }, this.label)), h("div", { key: 'b77bcce151260031191a029e29fb12e3a4d5f832', class: "group-options" }, h("slot", { key: '8b45fc6d7b4070ad1c21ad13aa54f553bf6f0507' })))));
+        return (h(Host, { key: 'a513acd4f01dfb7d4db6f63e8eee8b1d5249b86b' }, h("div", { key: '35a893bf77ef759a6001f38010c6a30372b513cf', class: "group", role: "group", "aria-labelledby": this.groupLabelId }, h("div", { key: 'c3c8d61384a1660e3c52e8b1ca5f053143f8a425', class: "group-separator", "aria-hidden": "true" }), h("div", { key: '0e4765b4b61259a130515000a4fc8a368c789e1b', class: "group-label", id: this.groupLabelId, role: "presentation" }, h("slot", { key: 'c85a2403dba075584544c2f700a2fffc7cae08dd', name: "label" }, this.label)), h("div", { key: 'a7ba1778166483fa04d50a1b1ff295e76615ae92', class: "group-options" }, h("slot", { key: '6266116b99f6166f297ba7bf8c5bf37e60527e1b' })))));
     }
     static get is() { return "seki-select-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-option/seki-select-option.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/select-option/seki-select-option.js

@@ -141,7 +141,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '2f9cda6aace5745c241cc41516964f32dd9c9150' }, h("div", { key: '5c20fffbb001fca4e149ecf142c82e46ff472e6e', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '1a36aa341c260a1d3d93cbc05ccbc68989d9fa22', class: "option-label" }, h("slot", { key: '1c89f2be8c02b85bde14b2c71b9e4052fdb16cf3' })), h("span", { key: '95e4c6f4b9bfc1ee64a0b870cd19b5129da99879', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '21b90d788c95b3c6bcebb4a881ac17be0e7a5bb4', name: "selected-indicator" }, h("svg", { key: '977dc30b75e9572ad1d05899c097fa7576f7e5b4', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd023e0d908de93f227037995e33783e115274a19', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: 'be2b0a302e6f21927d223920bdcac193f8add286' }, h("div", { key: 'e993165ddf1e0e6df510242295c39ab3980de434', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '10f725ea3f1823f8580c1bdcee087f28404373db', class: "option-label" }, h("slot", { key: '1c296c94d3172a984c2f938df65e90faabbe10f4' })), h("span", { key: 'e38ec22f253c40ce532dbbded02e9c08df283011', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '52d63e08396cd4d6b463acdf8e5254d169a59ac6', name: "selected-indicator" }, h("svg", { key: '53b5338beb1ff345ca3a697736103f75831ff97b', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f05922eed0ba8323a20ef36ae704aa7fb635c7dd', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-trigger/seki-select-trigger.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights