@sekiui/elements 0.0.87 → 0.1.0

package/dist/collection/components/menubar/seki-menubar-content.js

@@ -1,7 +1,7 @@
 // src/components/menubar/seki-menubar-content.tsx
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
-import { computeAnchoredPosition } from "../../utils/positioning";
+import { computeAnchoredPosition, getAnchorRect } from "../../utils/positioning";
 /**
  * Menubar content - dropdown content container
  *
@@ -145,7 +145,10 @@ export class SekiMenubarContent {
         const trigger = menu === null || menu === void 0 ? void 0 : menu.querySelector('seki-menubar-trigger');
         if (!trigger || !this.contentRef)
             return;
-        const triggerRect = trigger.getBoundingClientRect();
+        // seki-menubar-trigger's host is `display: contents`, so measure its box.
+        const triggerRect = getAnchorRect(trigger);
+        if (!triggerRect)
+            return;
         const contentRect = this.contentRef.getBoundingClientRect();
         const { top, left } = computeAnchoredPosition(triggerRect, contentRect, {
             side: this.side,

package/dist/collection/components/menubar/seki-menubar-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%);

package/dist/collection/components/menubar/seki-menubar-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%);

package/dist/collection/components/menubar/seki-menubar-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/menubar/seki-menubar-menu.js

@@ -15,8 +15,15 @@ export class SekiMenubarMenu {
         return menubar ? menubar._menubarContext : null;
     }
     componentWillLoad() {
+        if (!this.menuId) {
+            this.menuId = `seki-menubar-menu-${++SekiMenubarMenu.instanceCount}`;
+            // Write the attribute now rather than waiting for `reflect` to flush on
+            // render: seki-menubar's focusTrigger() looks the menu up with a
+            // `[menu-id="…"]` selector, and children read it off the DOM.
+            this.el.setAttribute('menu-id', this.menuId);
+        }
         const context = this.getContext();
-        if (context && this.menuId) {
+        if (context) {
             context.registerMenu(this.menuId);
         }
     }
@@ -30,7 +37,7 @@ export class SekiMenubarMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'b146d8ab399acb1a97c70b2b585b59cc38475c82' }, h("div", { key: '9d0b5cdef445bc19a50a453156ac07007fef1d64', part: "menu", class: "menubar-menu" }, h("slot", { key: 'ba408ca6a8580638344808ed4b60245071afb644' }))));
+        return (h(Host, { key: '6ee0fb6b64c3b707386e451f9a8c9cdcfa9aab2e' }, h("div", { key: 'c17873fc0db58a19e474f8c92707015fdab3885b', part: "menu", class: "menubar-menu" }, h("slot", { key: '6388e0bf551b737bfdf55faae156f4b73b40d6c7' }))));
     }
     static get is() { return "seki-menubar-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -48,17 +55,17 @@ export class SekiMenubarMenu {
         return {
             "menuId": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Unique identifier for this menu"
+                    "text": "Unique identifier for this menu. Optional: when omitted, one is generated\nand reflected onto the host. Requiring the author to supply it made every\nplain-HTML menubar inert, because the trigger resolves its menu through\n`closest('seki-menubar-menu').getAttribute('menu-id')` and bailed on null."
                 },
                 "getter": false,
                 "setter": false,
@@ -69,3 +76,5 @@ export class SekiMenubarMenu {
     }
     static get elementRef() { return "el"; }
 }
+/** Backs the auto-generated menu-id fallback below. */
+SekiMenubarMenu.instanceCount = 0;

package/dist/collection/components/menubar/seki-menubar-radio-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%);

package/dist/collection/components/menubar/seki-menubar-radio.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/menubar/seki-menubar-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/menubar/seki-menubar-shortcut.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/menubar/seki-menubar-sub-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/menubar/seki-menubar-sub-content.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { syncTheme } from "../../utils/theme-sync";
+import { getAnchorRect } from "../../utils/positioning";
 /**
  * Menubar sub content - submenu content container
  *
@@ -36,7 +37,10 @@ export class SekiMenubarSubContent {
     checkPosition() {
         const sub = this.el.closest('seki-menubar-sub');
         if (sub) {
-            const rect = sub.getBoundingClientRect();
+            // seki-menubar-sub's host is `display: contents`, so measure its rendered box.
+            const rect = getAnchorRect(sub);
+            if (!rect)
+                return;
             const spaceOnRight = window.innerWidth - rect.right;
             this._openToLeft = spaceOnRight < 200;
         }

package/dist/collection/components/menubar/seki-menubar-sub-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/menubar/seki-menubar-sub.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/menubar/seki-menubar-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/menubar/seki-menubar.css

@@ -70,7 +70,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/menubar/seki-menubar.js

@@ -62,11 +62,13 @@ export class SekiMenubar {
             this._menuIds = this._menuIds.filter((id) => id !== menuId);
         };
         this.focusTrigger = (menuId) => {
+            var _a, _b;
             const menu = this.el.querySelector(`seki-menubar-menu[menu-id="${menuId}"]`);
             const trigger = menu === null || menu === void 0 ? void 0 : menu.querySelector('seki-menubar-trigger');
-            if (trigger) {
-                trigger.focus();
-            }
+            // The trigger host is `display: contents` and not focusable itself; the
+            // real tab stop is the button it renders in its shadow root.
+            const focusTarget = ((_b = (_a = trigger === null || trigger === void 0 ? void 0 : trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : trigger);
+            focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
         };
         this.getNextMenuId = (currentId) => {
             const index = this._menuIds.indexOf(currentId);
@@ -159,7 +161,7 @@ export class SekiMenubar {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '8b0838b7a698718e5c7c838ab2c8166cb8f66e99' }, h("div", { key: '2e74ad550ae70f0136c631f94fec07e3af0d46ec', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '6bb39bfd0bba1cee0d9cf857159cbdcac33847b5' }))));
+        return (h(Host, { key: 'adfe8bddb4f07d46dc78dd2981b19fe4a941f0c6' }, h("div", { key: 'd86d188173f3ec74b01eb52776626e37aadb7194', part: "menubar", role: "menubar", class: "menubar" }, h("slot", { key: '4475232a2f219ef39a3396d58c944b103d1e0af9' }))));
     }
     static get is() { return "seki-menubar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message/seki-message-avatar.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/message/seki-message-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/message/seki-message-footer.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%);
@@ -825,5 +827,5 @@
   font-size: var(--seki-text-sm, 0.875rem);
   font-weight: var(--seki-font-normal, 400);
   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/message/seki-message-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%);

package/dist/collection/components/message/seki-message-header.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%);
@@ -825,5 +827,5 @@
   font-size: var(--seki-text-sm, 0.875rem);
   font-weight: var(--seki-font-medium, 500);
   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/message/seki-message.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/message-scroller/seki-message-scroller-button.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/message-scroller/seki-message-scroller-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/message-scroller/seki-message-scroller-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%);

package/dist/collection/components/message-scroller/seki-message-scroller-viewport.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/message-scroller/seki-message-scroller.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/navigation-menu/seki-navigation-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/pagination/seki-pagination.css

@@ -2,7 +2,7 @@
 
 :host {
   --seki-pagination-text-color: var(--seki-foreground, hsl(0, 0%, 3.9%));
-  --seki-pagination-text-muted: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  --seki-pagination-text-muted: var(--seki-muted-foreground, hsl(0, 0%, 42%));
   --seki-pagination-bg: transparent;
   --seki-pagination-bg-hover: var(--seki-muted, hsl(0, 0%, 96.1%));
   --seki-pagination-bg-active: var(--seki-primary, hsl(0, 0%, 9%));

package/dist/collection/components/popover/seki-popover-close.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/popover/seki-popover-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/popover/seki-popover-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/popover/seki-popover.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/radio-group/seki-radio-group-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%);

package/dist/collection/components/radio-group/seki-radio-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%);

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

@@ -26,13 +26,27 @@ export class SekiRadioGroup {
         this.orientation = 'vertical';
     }
     componentWillLoad() {
-        this.internalValue = this.defaultValue;
+        var _a;
+        // `value` in markup is the *initial* selection, not a permanent lock — see
+        // valueChanged() for how a controlling host keeps authority.
+        this.internalValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue;
     }
     /**
-     * Get current selected value (controlled vs uncontrolled)
+     * Mirror an externally-assigned `value` onto the rendered selection. This is
+     * what keeps controlled usage working: a consumer writing `el.value = x` (or
+     * writing the old value back to reject a selection) always wins.
+     */
+    valueChanged(newValue) {
+        if (newValue !== undefined && newValue !== this.internalValue) {
+            this.internalValue = newValue;
+            this.updateChildItems();
+        }
+    }
+    /**
+     * Get current selected value
      */
     get selectedValue() {
-        return this.value !== undefined ? this.value : this.internalValue;
+        return this.internalValue;
     }
     /**
      * Handle radio item selection
@@ -43,11 +57,10 @@ export class SekiRadioGroup {
             return;
         }
         const newValue = event.detail.value;
-        // Update internal state only in uncontrolled mode
-        if (this.value === undefined) {
-            this.internalValue = newValue;
-        }
-        // Emit change event
+        this.internalValue = newValue;
+        // Keep the public property readable for consumers (`el.value`) and let a
+        // controlled host overwrite it from the sekiChange handler below.
+        this.value = newValue;
         this.sekiChange.emit({ value: newValue });
         // Update all child radio items
         this.updateChildItems();
@@ -91,9 +104,8 @@ export class SekiRadioGroup {
             const nextItem = enabledItems[nextIndex];
             nextItem.setFocus();
             // Select the focused item
-            if (this.value === undefined) {
-                this.internalValue = nextItem.value;
-            }
+            this.internalValue = nextItem.value;
+            this.value = nextItem.value;
             this.sekiChange.emit({ value: nextItem.value });
             this.updateChildItems();
         }
@@ -127,7 +139,7 @@ export class SekiRadioGroup {
         syncTheme(this.el);
     }
     render() {
-        return (h(Host, { key: '56b71235458fd65a7042d318690f87e3fb6d6b67', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '3713999064fa498f9812345c6d95a2c95c484aed' }), this.name && this.selectedValue && (h("input", { key: '4276f9ff8a658944602b94762ade4efdc3c77d9b', type: "hidden", name: this.name, value: this.selectedValue }))));
+        return (h(Host, { key: '68b9adf3c7d3344caac9fea8698942a4a3f04953', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: 'e19d857caa80b2263e1d9090f1208962ee256763' }), this.name && this.selectedValue && (h("input", { key: '78fff938c34786300d8da5e9869148d52c1ed178', type: "hidden", name: this.name, value: this.selectedValue }))));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -145,7 +157,7 @@ export class SekiRadioGroup {
         return {
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string | undefined",
@@ -305,6 +317,12 @@ export class SekiRadioGroup {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "sekiRadioSelect",

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

@@ -70,7 +70,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/resizable/seki-resizable-panel-group.css

@@ -70,7 +70,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/resizable/seki-resizable-panel.css

@@ -70,7 +70,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%);