@helixui/library 3.3.1-next.115 → 3.3.1-next.118

package/dist/components/hx-toggle-button/index.js

@@ -1,4 +1,4 @@
-import { H as t } from "../../shared/hx-toggle-button-iLiYrMbD.js";
+import { H as t } from "../../shared/hx-toggle-button-Dcz9IlUm.js";
 export {
   t as HelixToggleButton
 };

package/dist/components/hx-tooltip/hx-tooltip.d.ts

@@ -2,6 +2,37 @@ import { HelixElement } from '../../base/index.js';
 /**
  * A tooltip that displays contextual help text on hover or focus.
  *
+ * ## Architecture Note: Light-DOM Description Shim (group-4 round-1)
+ *
+ * `aria-describedby` IDREFs cannot resolve across the Shadow DOM boundary —
+ * the trigger lives in the consumer's light DOM and references a tooltip
+ * whose body is in this component's shadow root. The tooltip text must
+ * therefore be exposed in DOCUMENT scope.
+ *
+ * The shim is a single visually-hidden `<span>` appended to `document.body`
+ * with the `_tooltipId` as its `id`. The trigger's `aria-describedby` points
+ * at this span. The text content is mirrored from the slotted `content`
+ * slot on every relevant signal:
+ *
+ *   1. `firstUpdated` (initial wiring)
+ *   2. `slotchange` on the default slot AND the `content` slot (the slotted
+ *      element list changes)
+ *   3. **Text-content mutations on the assigned `content` slot elements**
+ *      (round-23 P2 pattern). Without this observer a framework that
+ *      rewrites the slotted `<span slot="content">` `textContent` IN PLACE
+ *      (Vue / React keyed text rerender) would leave the shim stale.
+ *
+ * Cleanup: `disconnectedCallback` removes the shim from `document.body`,
+ * disconnects the slot-text observer, and clears the timers. SSR is
+ * sidestepped by guarding `document` access — the shim is created lazily
+ * the first time `_setupTriggerAria()` runs in a browser environment.
+ *
+ * `role="tooltip"` is the correct APG role and is NEVER promoted to
+ * `role="dialog"` — APG explicitly forbids tooltips from holding focus and
+ * the tooltip body is not a focus target. No host-canonical `_internals`
+ * work is owed: the trigger is the announced surface, and it correctly
+ * references the tooltip via `aria-describedby`.
+ *
  * @summary Contextual help text and abbreviations with smart positioning.
  *
  * @tag hx-tooltip
@@ -97,11 +128,32 @@ export declare class HelixTooltip extends HelixElement {
      * @internal
      */
     private _lightDomDescription;
+    /**
+     * Watches in-place text mutations on the elements assigned to the
+     * `<slot name="content">`. Without this observer, a framework that
+     * rewrites the slotted `<span slot="content">` `textContent` in place
+     * would leave the document-scope shim stale — the `slotchange` event
+     * does NOT fire on descendant text mutations.
+     *
+     * The observer is reinstalled on every `_setupTriggerAria()` call against
+     * the deduped current set of assigned elements; it is fully torn down in
+     * `disconnectedCallback` to prevent leaks on SSR teardown.
+     * @internal
+     */
+    private _contentSlotTextObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     /** @internal */
     private _setupTriggerAria;
+    /**
+     * (Re-)installs the slotted-content text observer over the deduped union
+     * of assigned `content` slot elements. Disconnects any previous observer
+     * before re-attaching so observer count is bounded by component lifetime,
+     * not by `slotchange` event count.
+     * @internal
+     */
+    private _installContentSlotTextObserver;
     /** @internal */
     private _scheduleShow;
     /** @internal */

package/dist/components/hx-tooltip/hx-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hx-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/hx-tooltip/hx-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,4CAA4C,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,qBAAqB,CAAC;AAMpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAEH,qBACa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAA6C;IAEnE;;;;;OAKG;IAEH,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;;OAGG;IAEH,SAAS,SAAO;IAEhB;;;OAGG;IAEH,SAAS,SAAO;IAEhB,gBAAgB;IACP,OAAO,CAAC,QAAQ,CAAS;IAElC,gBAAgB;IAChB,OAAO,CAAC,UAAU,CAA8C;IAChE,gBAAgB;IAChB,OAAO,CAAC,UAAU,CAA8C;IAEhE,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAE/C,gBAAgB;IACW,OAAO,CAAC,YAAY,CAA0B;IACzE,gBAAgB;IACe,OAAO,CAAC,YAAY,CAA0B;IAC7E,gBAAgB;IACW,OAAO,CAAC,eAAe,CAAsB;IACxE,gBAAgB;IACW,OAAO,CAAC,UAAU,CAAsB;IACnE,gBAAgB;IACS,OAAO,CAAC,QAAQ,CAAsB;IAE/D;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB,CAAgC;IAInD,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5B,YAAY,IAAI,IAAI;IAM7B,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IAuCzB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAOrB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAOrB,gBAAgB;YACF,KAAK;IAMnB,gBAAgB;IAChB,OAAO,CAAC,KAAK;IAIb,gBAAgB;IAChB,OAAO,CAAC,YAAY;IAapB,gBAAgB;YACF,eAAe;IA0C7B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAMpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,wBAAwB;IAavB,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}
+{"version":3,"file":"hx-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/hx-tooltip/hx-tooltip.ts"],"names":[],"mappings":"AACA,OAAO,4CAA4C,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAmB,MAAM,qBAAqB,CAAC;AAMpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAEH,qBACa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAA6C;IAEnE;;;;;OAKG;IAEH,SAAS,EACL,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAS;IAEvB;;;OAGG;IAEH,SAAS,SAAO;IAEhB;;;OAGG;IAEH,SAAS,SAAO;IAEhB,gBAAgB;IACP,OAAO,CAAC,QAAQ,CAAS;IAElC,gBAAgB;IAChB,OAAO,CAAC,UAAU,CAA8C;IAChE,gBAAgB;IAChB,OAAO,CAAC,UAAU,CAA8C;IAEhE,gBAAgB;IAChB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAoB;IAE/C,gBAAgB;IACW,OAAO,CAAC,YAAY,CAA0B;IACzE,gBAAgB;IACe,OAAO,CAAC,YAAY,CAA0B;IAC7E,gBAAgB;IACW,OAAO,CAAC,eAAe,CAAsB;IACxE,gBAAgB;IACW,OAAO,CAAC,UAAU,CAAsB;IACnE,gBAAgB;IACS,OAAO,CAAC,QAAQ,CAAsB;IAE/D;;;;;;OAMG;IACH,OAAO,CAAC,oBAAoB,CAAgC;IAE5D;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,wBAAwB,CAAiC;IAIxD,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAa5B,YAAY,IAAI,IAAI;IAM7B,gBAAgB;IAChB,OAAO,CAAC,iBAAiB;IA0CzB;;;;;;OAMG;IACH,OAAO,CAAC,+BAA+B;IAsCvC,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAOrB,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAOrB,gBAAgB;YACF,KAAK;IAMnB,gBAAgB;IAChB,OAAO,CAAC,KAAK;IAIb,gBAAgB;IAChB,OAAO,CAAC,YAAY;IAapB,gBAAgB;YACF,eAAe;IA0C7B,gBAAgB;IAChB,OAAO,CAAC,cAAc,CAMpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,wBAAwB;IAavB,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,YAAY,CAAC;KAC5B;CACF"}

package/dist/components/hx-tooltip/index.js

@@ -1,4 +1,4 @@
-import { H as i } from "../../shared/hx-tooltip-nYOv9OLu.js";
+import { H as i } from "../../shared/hx-tooltip-DVqtKPCD.js";
 export {
   i as HelixTooltip
 };

package/dist/css/helix-all.css

@@ -2080,6 +2080,23 @@
 
   /* ─── Focus Ring ─── */
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner input is demoted
+   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so
+   * keyboard users still get a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * input is the tab target. The native :focus-visible on the input drives
+   * the same visual ring, scoped via the inner-state class.
+   */
   .checkbox__input:focus-visible ~ .checkbox__box {
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -2234,6 +2251,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .checkbox__box,
     .checkbox__input:focus-visible ~ .checkbox__box {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -2900,6 +2918,31 @@
     pointer-events: none;
     opacity: var(--hx-opacity-disabled, 0.5);
   }
+  /* Slotted label / help / error blocks for cross-shadow naming. */
+  .hx-color-picker__label {
+    display: block;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-900, #1a1a1a);
+  }
+  .hx-color-picker__label:empty {
+    display: none;
+  }
+  .hx-color-picker__help {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #525252);
+  }
+  .hx-color-picker__error {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-danger-700, #c43e3e);
+  }
+  [hidden] {
+    display: none !important;
+  }
   .trigger {
     display: inline-flex;
     align-items: center;
@@ -4426,7 +4469,8 @@
      Live region (screen reader announcements)
      ============================================================ */
 
-  .calendar__live-region {
+  .calendar__live-region,
+  .field__sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -8298,6 +8342,11 @@ export const helixGridItemStyles = css`
 /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
   :host {
     display: block;
+    /* Round-3 finding 1: host is the canonical combobox surface, so it owns
+       keyboard focus. Suppress the UA default outline; the custom focus ring
+       is painted on the inner trigger via :host(:focus-visible)
+       .field__trigger so visual feedback follows the host's focus state. */
+    outline: none;
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
@@ -8374,6 +8423,12 @@ export const helixGridItemStyles = css`
   }
 
   .field__trigger {
+    /* Round-3 finding 1 / CodeRabbit F1: trigger is a <button type="button">
+       (labelable) so native <label for> click activation works for mouse
+       users. Reset native button chrome before applying field styles. */
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -8384,6 +8439,7 @@ export const helixGridItemStyles = css`
     border-radius: var(--_border-radius);
     background-color: var(--_bg);
     color: var(--_color);
+    font: inherit;
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -8396,6 +8452,11 @@ export const helixGridItemStyles = css`
     outline: none;
   }
 
+  /* Round-3 finding 1: host is the canonical focusable surface. Both the
+     :host(:focus-visible) descendant selector AND the legacy
+     .field__trigger:focus-visible (kept for forced-colors regression test
+     parity) paint the focus ring on the visual trigger. */
+  :host(:focus-visible) .field__trigger,
   .field__trigger:focus-visible {
     border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -8464,6 +8525,7 @@ export const helixGridItemStyles = css`
     border-color: var(--_error-color);
   }
 
+  :host(:focus-visible) .field--error .field__trigger,
   .field--error .field__trigger:focus-visible {
     border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -8597,6 +8659,7 @@ export const helixGridItemStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .field__trigger,
     .field__trigger:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -10544,6 +10607,22 @@ export const helixStructuredListRowStyles = css`
     appearance: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner track button is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .switch__track {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * track button is the tab target. Native :focus-visible drives the ring.
+   */
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -10681,6 +10760,7 @@ export const helixStructuredListRowStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .switch__track,
     .switch__track:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -12483,6 +12563,22 @@ export const helixToastStackStyles = css`
     -webkit-user-select: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner <button> is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .button {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * <button> is the tab target. Native :focus-visible drives the ring.
+   */
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -12681,6 +12777,7 @@ export const helixToastStackStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .button,
     .button:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/helix-forms.css

@@ -72,6 +72,23 @@
 
   /* ─── Focus Ring ─── */
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner input is demoted
+   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so
+   * keyboard users still get a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * input is the tab target. The native :focus-visible on the input drives
+   * the same visual ring, scoped via the inner-state class.
+   */
   .checkbox__input:focus-visible ~ .checkbox__box {
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -226,6 +243,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .checkbox__box,
     .checkbox__input:focus-visible ~ .checkbox__box {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -402,6 +420,31 @@
     pointer-events: none;
     opacity: var(--hx-opacity-disabled, 0.5);
   }
+  /* Slotted label / help / error blocks for cross-shadow naming. */
+  .hx-color-picker__label {
+    display: block;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-900, #1a1a1a);
+  }
+  .hx-color-picker__label:empty {
+    display: none;
+  }
+  .hx-color-picker__help {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #525252);
+  }
+  .hx-color-picker__error {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-danger-700, #c43e3e);
+  }
+  [hidden] {
+    display: none !important;
+  }
   .trigger {
     display: inline-flex;
     align-items: center;
@@ -1398,7 +1441,8 @@
      Live region (screen reader announcements)
      ============================================================ */
 
-  .calendar__live-region {
+  .calendar__live-region,
+  .field__sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -2615,6 +2659,11 @@
 /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
   :host {
     display: block;
+    /* Round-3 finding 1: host is the canonical combobox surface, so it owns
+       keyboard focus. Suppress the UA default outline; the custom focus ring
+       is painted on the inner trigger via :host(:focus-visible)
+       .field__trigger so visual feedback follows the host's focus state. */
+    outline: none;
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
@@ -2691,6 +2740,12 @@
   }
 
   .field__trigger {
+    /* Round-3 finding 1 / CodeRabbit F1: trigger is a <button type="button">
+       (labelable) so native <label for> click activation works for mouse
+       users. Reset native button chrome before applying field styles. */
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -2701,6 +2756,7 @@
     border-radius: var(--_border-radius);
     background-color: var(--_bg);
     color: var(--_color);
+    font: inherit;
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -2713,6 +2769,11 @@
     outline: none;
   }
 
+  /* Round-3 finding 1: host is the canonical focusable surface. Both the
+     :host(:focus-visible) descendant selector AND the legacy
+     .field__trigger:focus-visible (kept for forced-colors regression test
+     parity) paint the focus ring on the visual trigger. */
+  :host(:focus-visible) .field__trigger,
   .field__trigger:focus-visible {
     border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -2781,6 +2842,7 @@
     border-color: var(--_error-color);
   }
 
+  :host(:focus-visible) .field--error .field__trigger,
   .field--error .field__trigger:focus-visible {
     border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -2914,6 +2976,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .field__trigger,
     .field__trigger:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -3328,6 +3391,22 @@
     appearance: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner track button is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .switch__track {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * track button is the tab target. Native :focus-visible drives the ring.
+   */
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -3465,6 +3544,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .switch__track,
     .switch__track:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -4400,6 +4480,22 @@
     -webkit-user-select: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner <button> is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .button {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * <button> is the tab target. Native :focus-visible drives the ring.
+   */
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -4598,6 +4694,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .button,
     .button:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/hx-checkbox.css

@@ -70,6 +70,23 @@
 
   /* ─── Focus Ring ─── */
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner input is demoted
+   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so
+   * keyboard users still get a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * input is the tab target. The native :focus-visible on the input drives
+   * the same visual ring, scoped via the inner-state class.
+   */
   .checkbox__input:focus-visible ~ .checkbox__box {
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -224,6 +241,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .checkbox__box,
     .checkbox__input:focus-visible ~ .checkbox__box {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/hx-color-picker.css

@@ -9,6 +9,31 @@
     pointer-events: none;
     opacity: var(--hx-opacity-disabled, 0.5);
   }
+  /* Slotted label / help / error blocks for cross-shadow naming. */
+  .hx-color-picker__label {
+    display: block;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-900, #1a1a1a);
+  }
+  .hx-color-picker__label:empty {
+    display: none;
+  }
+  .hx-color-picker__help {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #525252);
+  }
+  .hx-color-picker__error {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-danger-700, #c43e3e);
+  }
+  [hidden] {
+    display: none !important;
+  }
   .trigger {
     display: inline-flex;
     align-items: center;

package/dist/css/hx-date-picker.css

@@ -335,7 +335,8 @@
      Live region (screen reader announcements)
      ============================================================ */
 
-  .calendar__live-region {
+  .calendar__live-region,
+  .field__sr-only {
     position: absolute;
     width: 1px;
     height: 1px;

package/dist/css/hx-select.css

@@ -2,6 +2,11 @@
 /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
   :host {
     display: block;
+    /* Round-3 finding 1: host is the canonical combobox surface, so it owns
+       keyboard focus. Suppress the UA default outline; the custom focus ring
+       is painted on the inner trigger via :host(:focus-visible)
+       .field__trigger so visual feedback follows the host's focus state. */
+    outline: none;
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
@@ -78,6 +83,12 @@
   }
 
   .field__trigger {
+    /* Round-3 finding 1 / CodeRabbit F1: trigger is a <button type="button">
+       (labelable) so native <label for> click activation works for mouse
+       users. Reset native button chrome before applying field styles. */
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -88,6 +99,7 @@
     border-radius: var(--_border-radius);
     background-color: var(--_bg);
     color: var(--_color);
+    font: inherit;
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -100,6 +112,11 @@
     outline: none;
   }
 
+  /* Round-3 finding 1: host is the canonical focusable surface. Both the
+     :host(:focus-visible) descendant selector AND the legacy
+     .field__trigger:focus-visible (kept for forced-colors regression test
+     parity) paint the focus ring on the visual trigger. */
+  :host(:focus-visible) .field__trigger,
   .field__trigger:focus-visible {
     border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -168,6 +185,7 @@
     border-color: var(--_error-color);
   }
 
+  :host(:focus-visible) .field--error .field__trigger,
   .field--error .field__trigger:focus-visible {
     border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -301,6 +319,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .field__trigger,
     .field__trigger:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/hx-switch.css

@@ -49,6 +49,22 @@
     appearance: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner track button is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .switch__track {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * track button is the tab target. Native :focus-visible drives the ring.
+   */
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -186,6 +202,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .switch__track,
     .switch__track:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/hx-toggle-button.css

@@ -34,6 +34,22 @@
     -webkit-user-select: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner <button> is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .button {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * <button> is the tab target. Native :focus-visible drives the ring.
+   */
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -232,6 +248,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .button,
     .button:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-05-03T14:41:47.411Z */
+/* index.css — generated 2026-05-05T19:04:42.574Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';