@sekiui/elements 0.0.87 → 0.1.0

package/dist/collection/components/sidebar/seki-sidebar-rail.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/sidebar/seki-sidebar-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/sidebar/seki-sidebar.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/skeleton/seki-skeleton.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/slider/seki-slider.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/slider/seki-slider.js

@@ -111,16 +111,24 @@ export class SekiSlider {
         };
     }
     componentWillLoad() {
-        // Initialize internal value
-        if (this.defaultValue !== undefined) {
-            this.internalValue = this.clampValue(this.defaultValue);
-        }
-        else {
-            this.internalValue = this.clampValue(this.min);
-        }
+        var _a, _b;
+        // Seed internal value from `value` when authored, else `defaultValue`, else min.
+        const seed = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue) !== null && _b !== void 0 ? _b : this.min;
+        this.internalValue = this.clampValue(seed);
         this.syncFormValue();
     }
-    handleValueChange() {
+    /**
+     * Mirror an externally-assigned `value` onto the rendered value. This is what
+     * keeps controlled usage working: a consumer writing `el.value = n` (or writing
+     * the old value back to reject a drag) always wins.
+     */
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            const clamped = this.clampValue(newValue);
+            if (clamped !== this.internalValue) {
+                this.internalValue = clamped;
+            }
+        }
         this.syncFormValue();
     }
     handleDisabledChange() {
@@ -145,8 +153,7 @@ export class SekiSlider {
      * Get current value (controlled vs uncontrolled), clamped to valid range
      */
     get currentValue() {
-        const rawValue = this.value !== undefined ? this.value : this.internalValue;
-        return this.clampValue(rawValue);
+        return this.clampValue(this.internalValue);
     }
     /**
      * Clamp value to min/max range and round to step
@@ -195,11 +202,11 @@ export class SekiSlider {
         const clampedValue = this.clampValue(newValue);
         if (clampedValue === this.currentValue)
             return;
-        // Update internal state only in uncontrolled mode
-        if (this.value === undefined) {
-            this.internalValue = clampedValue;
-            this.syncFormValue();
-        }
+        this.internalValue = clampedValue;
+        // Keep the public property readable for consumers (`el.value`) and let a
+        // controlled host overwrite it from the event handlers below.
+        this.value = clampedValue;
+        this.syncFormValue();
         // Emit input event for real-time updates
         if (isInput) {
             this.sekiInput.emit({ value: clampedValue });
@@ -277,7 +284,7 @@ export class SekiSlider {
         const thumbStyle = isVertical
             ? { bottom: `${percentage}%` }
             : { left: `${percentage}%` };
-        return (h(Host, { key: 'ace760809cf620a6679071a786b4b004ed797815', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '8933ccd09fdf329242851bf7ea0d601f257721e9', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: 'ec1af39586cb99468a4a5731d514e6a1c69167c2', class: "track", part: "track" }, h("div", { key: '3dc59ed3bde5d0bf881e5f3148b2c18cc6057ad8', class: "range", part: "range", style: rangeStyle })), h("div", { key: '8e17f03af7ccfda419d2ebb67e2b499a2cb704e3', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined }))));
+        return (h(Host, { key: 'bd63373d36fcfcffa71016c633c6f1fb87246c60', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: 'a1fecb182c60835c7ef5c510334a867556a24091', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '049b71a6472efab099a3ed07a1e8e4947365068d', class: "track", part: "track" }, h("div", { key: '9b866f4a322f63f2c3a28f1963d832c577cc302e', class: "range", part: "range", style: rangeStyle })), h("div", { key: '2923e369e16c6207c27e94b894a22c608ed5b557', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined }))));
     }
     static get is() { return "seki-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -356,7 +363,7 @@ export class SekiSlider {
             },
             "value": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number | undefined",
@@ -366,7 +373,7 @@ export class SekiSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Controlled value. When provided, component operates in controlled mode."
+                    "text": "Current value. In HTML this attribute is the *initial* value (as with\n`<input type=\"range\" value=\"\u2026\">`) and the component keeps it in step with\ndragging. Assigning the property at any time drives the value, so a host\nframework can still fully control the slider \u2014 including vetoing a drag by\nwriting the previous value back in its `sekiInput`/`sekiChange` handler."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -28,7 +28,8 @@ export class SekiSwitch {
          */
         this.value = 'on';
         /**
-         * @description Internal checked state for uncontrolled mode.
+         * @description Rendered checked state. Seeded from `checked` (or `defaultChecked`)
+         * and thereafter the single source of truth for rendering.
          */
         this.internalChecked = false;
         /**
@@ -39,11 +40,10 @@ export class SekiSwitch {
                 return;
             }
             const newCheckedState = !this.isChecked;
-            // Update internal state only in uncontrolled mode
-            if (this.checked === undefined) {
-                this.internalChecked = newCheckedState;
-            }
-            // Always emit event (for both controlled and uncontrolled)
+            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.sekiChange.emit({ checked: newCheckedState });
         };
         /**
@@ -54,16 +54,27 @@ export class SekiSwitch {
         };
     }
     /**
-     * Initialize internal checked state from defaultChecked
+     * Seed internal state from `checked` when authored, else from `defaultChecked`.
      */
     componentWillLoad() {
-        this.internalChecked = this.defaultChecked;
+        var _a;
+        this.internalChecked = (_a = this.checked) !== null && _a !== void 0 ? _a : this.defaultChecked;
+    }
+    /**
+     * 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;
+        }
     }
     /**
-     * Get current checked state (controlled vs uncontrolled)
+     * Get current checked state
      */
     get isChecked() {
-        return this.checked !== undefined ? this.checked : this.internalChecked;
+        return this.internalChecked;
     }
     /**
      * Handle keyboard events (Space and Enter keys)
@@ -84,7 +95,7 @@ export class SekiSwitch {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '2d34acb2b436989fd7262dd84fbab1fae87663bc', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '7a0db15c52cd163791ecff8bdaf829ba6fe49321', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: '1d7e0f44d78d7e55e32a4a5f8e5c598a354449a7', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '67b8805bceca7db0f3979dc4b788d6ec6f40a4df', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        return (h(Host, { key: 'be5a2da7ad4b444c86321bbdad06dcf7c192891e', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '51d9edd0b076a5ef2b245ccfe62aa3709471ea77', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: 'abcc7bada37ff730756f7be92d8a914074f5fa5a', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '20604db58692c924a5a4af8ca579e0e8453873f2', 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-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -102,7 +113,7 @@ export class SekiSwitch {
         return {
             "checked": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean | undefined",
@@ -113,7 +124,7 @@ export class SekiSwitch {
                 "docs": {
                     "tags": [{
                             "name": "description",
-                            "text": "Controlled checked state. When provided, component operates in controlled mode."
+                            "text": "Checked state. In HTML this attribute is the *initial* state (as\nwith `<input checked>`), and the component keeps it in step with user\ninteraction. Assigning the property at any time drives the state, so a host\nframework can still fully control the switch \u2014 including vetoing a user\ntoggle by writing the previous value back in its `sekiChange` handler."
                         }],
                     "text": ""
                 },
@@ -287,6 +298,12 @@ export class SekiSwitch {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

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

package/dist/collection/components/tabs/seki-tabs-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%);
@@ -830,7 +832,7 @@
   font-size: var(--seki-font-size-sm, 0.875rem);
   font-weight: var(--seki-font-weight-medium, 500);
   line-height: var(--seki-line-height-tight, 1.25);
-  color: var(--seki-muted-foreground, hsl(0, 0%, 45.1%));
+  color: var(--seki-muted-foreground, hsl(0, 0%, 42%));
   background: transparent;
   border: none;
   border-radius: var(--seki-radius-md, 0.375rem);

package/dist/collection/components/tabs/seki-tabs.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/textarea/seki-textarea.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/toggle/seki-toggle.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/toggle/seki-toggle.js

@@ -91,11 +91,10 @@ export class SekiToggle {
             }
             // Standalone toggle behavior
             const newPressedState = !this.isPressed;
-            // Update internal state only in uncontrolled mode
-            if (this.pressed === undefined) {
-                this.internalPressed = newPressedState;
-            }
-            // Always emit event (for both controlled and uncontrolled)
+            this.internalPressed = newPressedState;
+            // Keep the public property readable for consumers (`el.pressed`) and let a
+            // controlled host overwrite it from the sekiPressedChange handler below.
+            this.pressed = newPressedState;
             this.sekiPressedChange.emit({ pressed: newPressedState });
         };
         /**
@@ -120,6 +119,7 @@ export class SekiToggle {
         return this.groupContext !== null;
     }
     componentWillLoad() {
+        var _a;
         this.groupContext = this.getGroupContext();
         if (this.groupContext && this.value) {
             this.groupContext.registerToggle(this.value, this.el);
@@ -129,9 +129,11 @@ export class SekiToggle {
             console.warn(`[seki-toggle] Toggle inside seki-toggle-group requires a "value" prop. ` +
                 `Please add value prop to identify this toggle in the group.`);
         }
-        // Only initialize internal state if not in group
+        // Only initialize internal state if not in group. `pressed` in markup is the
+        // *initial* state, not a permanent lock — see pressedChanged() for how a
+        // controlling host keeps authority.
         if (!this.isInGroup) {
-            this.internalPressed = this.defaultPressed;
+            this.internalPressed = (_a = this.pressed) !== null && _a !== void 0 ? _a : this.defaultPressed;
         }
     }
     componentDidLoad() {
@@ -159,8 +161,21 @@ export class SekiToggle {
         if (this.isInGroup && this.value) {
             return this.groupContext.isPressed(this.value);
         }
-        // Otherwise use local controlled/uncontrolled state
-        return this.pressed !== undefined ? this.pressed : this.internalPressed;
+        // Otherwise use local state
+        return this.internalPressed;
+    }
+    /**
+     * Mirror an externally-assigned `pressed` onto the rendered state. This is what
+     * keeps controlled usage working: a consumer writing `el.pressed = x` (or
+     * writing the old value back to reject a toggle) always wins. Ignored inside a
+     * toggle group, where the group owns the pressed state.
+     */
+    pressedChanged(newValue) {
+        if (this.isInGroup)
+            return;
+        if (newValue !== undefined && newValue !== this.internalPressed) {
+            this.internalPressed = newValue;
+        }
     }
     /**
      * Handle keyboard events (Space and Enter keys)
@@ -196,7 +211,7 @@ export class SekiToggle {
                 tabIndex = focusedValue === this.value ? 0 : -1;
             }
         }
-        return (h(Host, { key: '4370065c1fba735c8bb2973c63f03abd73bc2bbb', "data-state": dataState, "data-disabled": effectiveDisabled ? '' : null }, h("button", { key: 'a32854fa9b4a90add321aefdeb3bd07391f48867', type: "button", class: `toggle toggle--${effectiveVariant} toggle--${effectiveSize}`, part: "toggle", "aria-pressed": isPressed ? 'true' : 'false', "aria-disabled": effectiveDisabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, disabled: effectiveDisabled, tabindex: tabIndex, onClick: this.handleClick }, h("slot", { key: 'b5398a95a13d620805fa905d7377bda23e6618d6' }))));
+        return (h(Host, { key: '3d1f01c83ed17373e52a4db798513563bb7b2ff5', "data-state": dataState, "data-disabled": effectiveDisabled ? '' : null }, h("button", { key: 'b7da84e81f8d5042211cfd915a862308a3d5d19a', type: "button", class: `toggle toggle--${effectiveVariant} toggle--${effectiveSize}`, part: "toggle", "aria-pressed": isPressed ? 'true' : 'false', "aria-disabled": effectiveDisabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, disabled: effectiveDisabled, tabindex: tabIndex, onClick: this.handleClick }, h("slot", { key: '975619b475ef4af361a6c0cf5399d16980090dfa' }))));
     }
     static get is() { return "seki-toggle"; }
     static get encapsulation() { return "shadow"; }
@@ -233,7 +248,7 @@ export class SekiToggle {
             },
             "pressed": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean | undefined",
@@ -376,6 +391,12 @@ export class SekiToggle {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "pressed",
+                "methodName": "pressedChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

package/dist/collection/components/toggle-group/seki-toggle-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/tooltip/seki-tooltip.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/tooltip/seki-tooltip.js

@@ -41,6 +41,17 @@ export class SekiTooltip {
          * @min 0
          */
         this.offset = 8;
+        /**
+         * Controlled open state. Reflects to the `open` attribute, so
+         * `<seki-tooltip open>` renders visible with no script involved.
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Initial open state for uncontrolled usage
+         * @default false
+         */
+        this.defaultOpen = false;
         /**
          * Internal state: whether tooltip is currently visible
          */
@@ -181,8 +192,11 @@ export class SekiTooltip {
      * @returns Promise resolves when tooltip is visible
      */
     async show() {
-        if (this.disabled)
+        if (this.disabled) {
+            // Keep the reflected prop honest when a show request is refused.
+            this.open = false;
             return;
+        }
         // Clear any pending hide timer
         if (this.hideTimer) {
             clearTimeout(this.hideTimer);
@@ -190,6 +204,7 @@ export class SekiTooltip {
         }
         // Set visible state
         this.isVisible = true;
+        this.open = true;
         // Calculate position
         this.calculatePosition();
         // Emit show event
@@ -207,6 +222,7 @@ export class SekiTooltip {
         }
         // Set hidden state
         this.isVisible = false;
+        this.open = false;
         // Emit hide event
         this.hideTooltip.emit({ reason: 'blur' });
     }
@@ -338,9 +354,31 @@ export class SekiTooltip {
         // here so it does not leak (and keep firing) after the tooltip is detached.
         document.removeEventListener('keydown', this.onEscapeKey);
     }
+    componentWillLoad() {
+        // `disabled` wins over a requested initial open state.
+        this.isVisible = (this.open || this.defaultOpen) && !this.disabled;
+        this.open = this.isVisible;
+    }
     componentDidLoad() {
         this.hasLoaded = true;
         this.attachTriggerListeners();
+        if (this.isVisible) {
+            // Children are only in place now, so the initial position can finally be
+            // measured against the trigger.
+            this.calculatePosition();
+        }
+    }
+    openChanged(newValue) {
+        // An outside assignment (`tooltip.open = true`) has to win after first render;
+        // `open` is only read once in componentWillLoad otherwise.
+        if (newValue === this.isVisible)
+            return;
+        if (newValue) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
     }
     connectedCallback() {
         syncTheme(this.el);
@@ -363,7 +401,7 @@ export class SekiTooltip {
             clearTimeout(this.longPressTimer);
     }
     render() {
-        return (h("div", { key: '70d4c876ab2b64a306893b555301ed08e438fff7', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '6bcde89ad0903a7859e1717c45204416554bd78f', name: "content" }), h("div", { key: '481b96927ad6431e0415fce2695fc1c13011aa72', class: "tooltip-arrow" })));
+        return (h("div", { key: 'd934fb59ac9e6b47e208113f430dbdf151e4b9d8', class: `tooltip ${this.isVisible ? 'tooltip--visible' : ''}`, role: "tooltip" }, h("slot", { key: '0fe73a7b7b0bcd405dec9a77ddcf0c4a7e2b4b09', name: "content" }), h("div", { key: '9917e3661c8740b69bdaca4e8e7aa168b0c7c47c', class: "tooltip-arrow" })));
     }
     static get is() { return "seki-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -485,6 +523,52 @@ export class SekiTooltip {
                 "reflect": false,
                 "attribute": "offset",
                 "defaultValue": "8"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controlled open state. Reflects to the `open` attribute, so\n`<seki-tooltip open>` renders visible with no script involved."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "defaultOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Initial open state for uncontrolled usage"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-open",
+                "defaultValue": "false"
             }
         };
     }
@@ -622,4 +706,10 @@ export class SekiTooltip {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
 }

package/dist/collection/utils/positioning.js

@@ -59,3 +59,30 @@ export function computeAnchoredPosition(triggerRect, contentRect, options) {
     top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
     return { top, left, side };
 }
+/**
+ * Measure an anchor element that may be a `display: contents` custom-element host.
+ *
+ * Several trigger components (seki-menubar-trigger, seki-menubar-sub-trigger, …)
+ * set `:host { display: contents }`, which means the host generates no box of its
+ * own and `getBoundingClientRect()` returns an all-zero rect. Anchoring a popup to
+ * that rect pins it to the viewport origin instead of to the trigger — the menubar
+ * dropdown rendered in the top-left corner of the page because of exactly this.
+ *
+ * Falls through to the first laid-out element inside the host's shadow root.
+ */
+export function getAnchorRect(anchor) {
+    var _a;
+    if (!anchor)
+        return null;
+    const hostRect = anchor.getBoundingClientRect();
+    if (hostRect.width > 0 || hostRect.height > 0)
+        return hostRect;
+    // Zero-sized host: measure whatever it actually rendered.
+    const inner = (_a = anchor.shadowRoot) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (inner) {
+        const innerRect = inner.getBoundingClientRect();
+        if (innerRect.width > 0 || innerRect.height > 0)
+            return innerRect;
+    }
+    return hostRect;
+}