@sekiui/elements 0.0.87 → 0.1.0

package/dist/collection/components/carousel/seki-carousel-dots.css

@@ -38,7 +38,7 @@
   width: var(--seki-carousel-dot-size, 0.5rem);
   height: var(--seki-carousel-dot-size, 0.5rem);
   border-radius: 50%;
-  background: var(--seki-carousel-dot-color, var(--seki-muted-foreground, hsl(0, 0%, 45.1%)));
+  background: var(--seki-carousel-dot-color, var(--seki-muted-foreground, hsl(0, 0%, 42%)));
   transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
 }
 

package/dist/collection/components/chart-legend/seki-chart-legend.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

package/dist/collection/components/checkbox/seki-checkbox.js

@@ -32,7 +32,8 @@ export class SekiCheckbox {
          */
         this.value = 'on';
         /**
-         * Internal checked state for uncontrolled mode.
+         * Rendered checked state. Seeded from `checked` (or `defaultChecked`) and
+         * thereafter the single source of truth for rendering.
          */
         this.internalChecked = false;
         /**
@@ -45,12 +46,11 @@ export class SekiCheckbox {
             // Clear indeterminate state on user interaction
             this.indeterminate = false;
             const newCheckedState = !this.isChecked;
-            // Update internal state only in uncontrolled mode
-            if (this.checked === undefined) {
-                this.internalChecked = newCheckedState;
-            }
+            this.internalChecked = newCheckedState;
+            // Keep the public property readable for consumers (`el.checked`) and let a
+            // controlled host overwrite it from the sekiChange handler below.
+            this.checked = newCheckedState;
             this.updateFormValue();
-            // Always emit event (for both controlled and uncontrolled)
             this.sekiChange.emit({ checked: newCheckedState, indeterminate: false });
         };
         /**
@@ -65,14 +65,26 @@ export class SekiCheckbox {
      * Initialize internal checked state from defaultChecked
      */
     componentWillLoad() {
-        this.internalChecked = this.defaultChecked;
+        var _a;
+        this.internalChecked = (_a = this.checked) !== null && _a !== void 0 ? _a : this.defaultChecked;
         this.updateFormValue();
     }
     /**
-     * Get current checked state (controlled vs uncontrolled)
+     * Mirror externally-assigned `checked` onto the rendered state. This is what
+     * keeps controlled usage working: a consumer writing `el.checked = x` (or
+     * writing the old value back to reject a toggle) always wins.
+     */
+    checkedChanged(newValue) {
+        if (newValue !== undefined && newValue !== this.internalChecked) {
+            this.internalChecked = newValue;
+            this.updateFormValue();
+        }
+    }
+    /**
+     * Get current checked state
      */
     get isChecked() {
-        return this.checked !== undefined ? this.checked : this.internalChecked;
+        return this.internalChecked;
     }
     /**
      * Update form value based on checked state
@@ -98,6 +110,7 @@ export class SekiCheckbox {
     // Form-associated lifecycle callbacks
     formResetCallback() {
         this.internalChecked = this.defaultChecked;
+        this.checked = this.defaultChecked;
         this.indeterminate = false;
         this.updateFormValue();
     }
@@ -107,11 +120,11 @@ export class SekiCheckbox {
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '5ef452f9ce743b1f1da21ea75ccc6aa3d30bcebb', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'a21c2bb8903ed3f5b2861095583ce63d80ccba08', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '5979b4f10e005ced43abf5901804e57f9706149e', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: 'c88243d01b350a2cd99f0f0921ec3adda280f764', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'cd209c8553ea4c8b5c13dcd88aa4dd9c566f4031', type: "button", role: "checkbox", class: "checkbox", part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '642e6483be2a1b33a819213d1a869f93534fd03d', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: 'ed3adf9652d50227a4ffb9928a615c2e2b50036b', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" })))))), this.name && (h("input", { key: 'dfb9732eed66e5f1cb853dbdeed94ffb34dc8f08', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
     }
     static get is() { return "seki-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -130,7 +143,7 @@ export class SekiCheckbox {
         return {
             "checked": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean | undefined",
@@ -140,7 +153,7 @@ export class SekiCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Controlled checked state. When provided, component operates in controlled mode."
+                    "text": "Checked state. In HTML this attribute is the *initial* state (as with\n`<input checked>`) and the component keeps it in step with user interaction.\nAssigning the property at any time drives the state, so a host framework can\nstill fully control the checkbox \u2014 including vetoing a user toggle by writing\nthe previous value back in its `sekiChange` handler."
                 },
                 "getter": false,
                 "setter": false,
@@ -330,6 +343,12 @@ export class SekiCheckbox {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

package/dist/collection/components/command/seki-command-empty.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -814,5 +816,5 @@
   text-align: center;
   font-size: var(--seki-text-sm, 0.875rem);
   line-height: var(--seki-leading-normal, 1.5);
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }

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

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -819,7 +821,7 @@
   font-size: var(--seki-text-xs, 0.75rem);
   font-weight: var(--seki-font-medium, 500);
   line-height: var(--seki-leading-tight, 1.25);
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }
 
 /* Dark mode */

package/dist/collection/components/command/seki-command-input.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -820,7 +822,7 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }
 
 .command-input {
@@ -836,7 +838,7 @@
 }
 
 .command-input::placeholder {
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }
 
 /* Dark mode */

package/dist/collection/components/command/seki-command-item.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -839,7 +841,7 @@
   margin-left: auto;
   font-size: var(--seki-text-xs, 0.75rem);
   letter-spacing: 0.05em;
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }
 
 /* Dark mode */

package/dist/collection/components/command/seki-command-item.js

@@ -25,7 +25,17 @@ export class SekiCommandItem {
         this.handleClick = () => {
             if (this.disabled)
                 return;
-            this.sekiCommandSelect.emit(this.value);
+            this.sekiCommandSelect.emit(this.resolvedValue);
+        };
+        /**
+         * Move the command's highlight onto the item under the pointer, the way cmdk
+         * (and therefore shadcn/ui) does. Without this the highlight only ever moves
+         * with the arrow keys, so a mouse user gets no feedback at all.
+         */
+        this.handleMouseEnter = () => {
+            if (this.disabled)
+                return;
+            this.sekiCommandHighlight.emit();
         };
         this.instanceId = `seki-command-item-${++SekiCommandItem.instanceCount}`;
     }
@@ -62,6 +72,13 @@ export class SekiCommandItem {
     isVisible() {
         return this._visible && !this.disabled;
     }
+    /**
+     * The value this item reports on select — the `value` prop, else its own text.
+     */
+    get resolvedValue() {
+        var _a, _b, _c;
+        return (_c = (_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+    }
     connectedCallback() {
         syncTheme(this.el);
     }
@@ -73,7 +90,7 @@ export class SekiCommandItem {
                 'command-item': true,
                 'command-item--disabled': this.disabled,
                 'command-item--highlighted': this._highlighted,
-            }, "aria-selected": this._highlighted ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-highlighted": this._highlighted ? 'true' : null, "data-disabled": this.disabled ? 'true' : null, "data-value": this.value, onClick: this.handleClick }, h("slot", null), this.shortcut && (h("span", { part: "shortcut", class: "command-item-shortcut" }, this.shortcut)))));
+            }, "aria-selected": this._highlighted ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-highlighted": this._highlighted ? 'true' : null, "data-disabled": this.disabled ? 'true' : null, "data-value": this.resolvedValue, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", null), this.shortcut && (h("span", { part: "shortcut", class: "command-item-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-command-item"; }
     static get encapsulation() { return "shadow"; }
@@ -94,14 +111,14 @@ export class SekiCommandItem {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Unique value emitted on select"
+                    "text": "Unique value emitted on select. Optional: when omitted it falls back to the\nitem's own text, so plain-HTML usage (`<seki-command-item>Profile</\u2026>`) emits\nsomething meaningful instead of `undefined`."
                 },
                 "getter": false,
                 "setter": false,
@@ -190,6 +207,21 @@ export class SekiCommandItem {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "sekiCommandHighlight",
+                "name": "sekiCommandHighlight",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the pointer moves onto this item, asking seki-command to move\nits highlight here. seki-command identifies the item from the event target."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/command/seki-command-list.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);
@@ -830,7 +832,7 @@
 }
 
 .command-list::-webkit-scrollbar-thumb:hover {
-  background-color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  background-color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
 }
 
 /* Dark mode */

package/dist/collection/components/command/seki-command-separator.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

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

@@ -74,7 +74,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

package/dist/collection/components/command/seki-command.js

@@ -55,6 +55,20 @@ export class SekiCommand {
         event.stopPropagation();
         this.sekiSelect.emit(event.detail);
     }
+    /**
+     * Move the highlight to a hovered item so the mouse and the arrow keys drive
+     * the same cursor (matches cmdk / shadcn's Command).
+     */
+    handleItemHighlight(event) {
+        event.stopPropagation();
+        const items = this.getVisibleItems();
+        // The emitter sits on the item host, so a composed event retargets to it.
+        const index = items.indexOf(event.target);
+        if (index === -1 || index === this._highlightedIndex)
+            return;
+        this._highlightedIndex = index;
+        this.updateHighlight(items);
+    }
     handleKeyDown(event) {
         const items = this.getVisibleItems();
         if (items.length === 0)
@@ -176,7 +190,7 @@ export class SekiCommand {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '17274685deb2a91864078ec6b47283b80557d3a0' }, h("div", { key: '801374ecadf5ab33bed1413507bb230a4e384f9a', part: "command", class: "command" }, h("slot", { key: 'e9533fd4cffa1f96a5d4a5c081e03e16d7c5b71a' }))));
+        return (h(Host, { key: '4af1c9484a7933661041774d0798814317863ca1' }, h("div", { key: 'c2aa8a3aacfa640fc77b8b932ae4421b5d1cd1e8', part: "command", class: "command" }, h("slot", { key: '8dc79744b9efb3da400ec6db2ae2895d16b020a7' }))));
     }
     static get is() { return "seki-command"; }
     static get encapsulation() { return "shadow"; }
@@ -293,6 +307,12 @@ export class SekiCommand {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "sekiCommandHighlight",
+                "method": "handleItemHighlight",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",

package/dist/collection/components/context-menu/seki-context-menu-content.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

package/dist/collection/components/context-menu/seki-context-menu.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);

package/dist/collection/components/data-table/seki-data-table.css

@@ -69,7 +69,9 @@
 
   /* Muted */
   --seki-muted: hsl(0, 0%, 96.1%);
-  --seki-muted-foreground: hsl(0, 0%, 45.1%);
+  /* 42% (not shadcn's 45.1%) so --seki-muted-foreground on --seki-muted reaches
+     4.89:1, clearing WCAG AA's 4.5:1 for normal text. See issue #293. */
+  --seki-muted-foreground: hsl(0, 0%, 42%);
 
   /* Card */
   --seki-card: hsl(0, 0%, 100%);