@helixui/library 3.7.0 → 3.8.0-next.145

package/dist/shared/hx-button-group-D3QUmSzl.js

@@ -0,0 +1,248 @@
+import { css as b, html as f } from "lit";
+import { property as h, customElement as p } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { f as g } from "./forced-colors-CTEDFRGa.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+const v = b`
+  :host {
+    display: inline-flex;
+    contain: layout style;
+  }
+
+  .group {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  /* ─── Orientation Variants ─── */
+
+  .group--horizontal {
+    flex-direction: row;
+  }
+
+  .group--vertical {
+    flex-direction: column;
+  }
+
+  /* ─── No Double Borders: Horizontal ─── */
+
+  .group--horizontal ::slotted(*:not(:first-child)) {
+    margin-inline-start: var(
+      --hx-button-group-divider-offset,
+      calc(-1 * var(--hx-border-width-thin, 1px))
+    );
+  }
+
+  /* ─── No Double Borders: Vertical ─── */
+
+  .group--vertical ::slotted(*:not(:first-child)) {
+    margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
+  }
+
+  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
+
+  .group--horizontal ::slotted(:only-child) {
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
+  }
+
+  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
+
+  .group--horizontal ::slotted(:first-child:not(:only-child)) {
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+
+  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
+
+  .group--horizontal ::slotted(:last-child:not(:only-child)) {
+    --hx-button-border-radius: 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
+  }
+
+  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
+
+  .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {
+    --hx-button-border-radius: 0;
+  }
+
+  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
+
+  .group--vertical ::slotted(:only-child) {
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
+  }
+
+  /* ─── Border Radius: Vertical — First child keeps top corners ─── */
+
+  .group--vertical ::slotted(:first-child:not(:only-child)) {
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
+  }
+
+  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
+
+  .group--vertical ::slotted(:last-child:not(:only-child)) {
+    --hx-button-border-radius: 0 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
+  }
+
+  /* ─── Border Radius: Vertical — Middle children have no radius ─── */
+
+  .group--vertical ::slotted(:not(:first-child):not(:last-child)) {
+    --hx-button-border-radius: 0;
+  }
+
+  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
+
+  .group ::slotted(:focus-within) {
+    z-index: var(--hx-button-group-focus-z-index, 1);
+    position: relative;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * In forced-colors mode, negative margins that collapse borders between grouped
+     * buttons can obscure focus rings. Raise focused children so the Highlight
+     * outline from hx-button's own forced-colors block is fully visible.
+     */
+    .group ::slotted(:focus-within) {
+      z-index: var(--hx-button-group-focus-z-index-hc, 2);
+    }
+  }
+`;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, u = (t, e, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(e, o) : e, n = t.length - 1, s; n >= 0; n--)
+    (s = t[n]) && (r = (i ? s(e, o, r) : s(r)) || r);
+  return i && r && _(e, o, r), r;
+};
+let l = class extends x {
+  constructor() {
+    super(...arguments), this._orientation = "horizontal", this.size = "md", this.label = "", this._consumerAriaLabel = null, this._consumerRole = null, this._emptyLabelWarnEmitted = !1, this._focusableCache = null, this._handleKeydown = (t) => {
+      var r, n;
+      const e = this._orientation === "vertical", o = e ? "ArrowDown" : "ArrowRight", i = e ? "ArrowUp" : "ArrowLeft";
+      if (t.key === o)
+        t.preventDefault(), this._moveFocus("next");
+      else if (t.key === i)
+        t.preventDefault(), this._moveFocus("prev");
+      else if (t.key === "Home") {
+        t.preventDefault();
+        const s = this._getFocusableItems();
+        s.length && (s.forEach((a, d) => a.setAttribute("tabindex", d === 0 ? "0" : "-1")), (r = s[0]) == null || r.focus());
+      } else if (t.key === "End") {
+        t.preventDefault();
+        const s = this._getFocusableItems(), a = s.length - 1;
+        s.length && (s.forEach((d, c) => d.setAttribute("tabindex", c === a ? "0" : "-1")), (n = s[a]) == null || n.focus());
+      }
+    }, this._handleSlotChange = () => {
+      this._initRovingTabindex();
+    };
+  }
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(t) {
+    t !== "horizontal" && t !== "vertical" && (t = "horizontal"), this._orientation = t;
+  }
+  updated(t) {
+    super.updated(t), t.has("size") && this.style.setProperty("--hx-button-group-size", this.size), t.has("label") && (this.label ? this.setAttribute("aria-label", this.label) : this._consumerAriaLabel !== null ? this.setAttribute("aria-label", this._consumerAriaLabel) : this.removeAttribute("aria-label"));
+  }
+  /** @internal */
+  _isFocusable(t) {
+    if (t.hasAttribute("disabled") || t.disabled === !0) return !1;
+    if (t.tabIndex >= 0) return !0;
+    const o = t.tagName.toLowerCase();
+    return o === "button" || o === "input" || o === "select" || o === "textarea";
+  }
+  /** @internal */
+  _getFocusableItems() {
+    var o;
+    if (this._focusableCache) return this._focusableCache;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot"), e = [];
+    if (t) {
+      const i = t.assignedElements({ flatten: !0 });
+      for (const r of i)
+        if (r instanceof HTMLElement)
+          if (this._isFocusable(r))
+            e.push(r);
+          else {
+            const n = r.querySelectorAll("*");
+            for (const s of Array.from(n))
+              this._isFocusable(s) && e.push(s);
+          }
+    }
+    return this._focusableCache = e, e;
+  }
+  /** @internal */
+  _initRovingTabindex() {
+    this._focusableCache = null;
+    const t = this._getFocusableItems();
+    if (!t.length) return;
+    const e = t.findIndex((i) => i.getAttribute("tabindex") === "0"), o = e === -1 ? 0 : e;
+    t.forEach((i, r) => i.setAttribute("tabindex", r === o ? "0" : "-1"));
+  }
+  /** @internal */
+  _moveFocus(t) {
+    var n;
+    const e = this._getFocusableItems();
+    if (!e.length) return;
+    const o = document.activeElement, i = e.indexOf(o);
+    let r;
+    t === "next" ? r = i < e.length - 1 ? i + 1 : 0 : r = i > 0 ? i - 1 : e.length - 1, e.forEach((s, a) => s.setAttribute("tabindex", a === r ? "0" : "-1")), (n = e[r]) == null || n.focus();
+  }
+  firstUpdated() {
+    this._initRovingTabindex();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this._consumerAriaLabel === null && this.hasAttribute("aria-label") && (this._consumerAriaLabel = this.getAttribute("aria-label")), this._consumerRole === null && this.hasAttribute("role") && (this._consumerRole = this.getAttribute("role")), this._consumerRole ? this._internals.role = this._consumerRole : (this._internals.role = "group", this.setAttribute("role", "group")), this.style.setProperty("--hx-button-group-size", this.size), this.label ? this.setAttribute("aria-label", this.label) : this._consumerAriaLabel !== null || this._emptyLabelWarnEmitted || (this._emptyLabelWarnEmitted = !0);
+  }
+  // ─── Render ───
+  render() {
+    return f`
+      <div
+        part="group"
+        class=${m({
+      group: !0,
+      "group--horizontal": this.orientation === "horizontal",
+      "group--vertical": this.orientation === "vertical"
+    })}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+l.styles = [v, g];
+u([
+  h({ type: String, reflect: !0 })
+], l.prototype, "orientation", 1);
+u([
+  h({ type: String, reflect: !0, attribute: "hx-size" })
+], l.prototype, "size", 2);
+u([
+  h({ type: String })
+], l.prototype, "label", 2);
+l = u([
+  p("hx-button-group")
+], l);
+export {
+  l as H
+};
+//# sourceMappingURL=hx-button-group-D3QUmSzl.js.map

package/dist/shared/hx-button-group-D3QUmSzl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-group-D3QUmSzl.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n  :host {\n    display: inline-flex;\n    contain: layout style;\n  }\n\n  .group {\n    display: inline-flex;\n    align-items: stretch;\n  }\n\n  /* ─── Orientation Variants ─── */\n\n  .group--horizontal {\n    flex-direction: row;\n  }\n\n  .group--vertical {\n    flex-direction: column;\n  }\n\n  /* ─── No Double Borders: Horizontal ─── */\n\n  .group--horizontal ::slotted(*:not(:first-child)) {\n    margin-inline-start: var(\n      --hx-button-group-divider-offset,\n      calc(-1 * var(--hx-border-width-thin, 1px))\n    );\n  }\n\n  /* ─── No Double Borders: Vertical ─── */\n\n  .group--vertical ::slotted(*:not(:first-child)) {\n    margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));\n  }\n\n  /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */\n\n  .group--horizontal ::slotted(:only-child) {\n    --hx-button-border-radius: var(\n      --hx-button-group-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\n  }\n\n  /* ─── Border Radius: Horizontal — First child keeps left corners ─── */\n\n  .group--horizontal ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(\n        --hx-button-group-border-radius,\n        var(--hx-border-radius-md, 0.375rem)\n      )\n      0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));\n  }\n\n  /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */\n\n  .group--horizontal ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;\n  }\n\n  /* ─── Border Radius: Horizontal — Middle children have no radius ─── */\n\n  .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Border Radius: Vertical — Single child keeps all corners ─── */\n\n  .group--vertical ::slotted(:only-child) {\n    --hx-button-border-radius: var(\n      --hx-button-group-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\n  }\n\n  /* ─── Border Radius: Vertical — First child keeps top corners ─── */\n\n  .group--vertical ::slotted(:first-child:not(:only-child)) {\n    --hx-button-border-radius: var(\n        --hx-button-group-border-radius,\n        var(--hx-border-radius-md, 0.375rem)\n      )\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;\n  }\n\n  /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */\n\n  .group--vertical ::slotted(:last-child:not(:only-child)) {\n    --hx-button-border-radius: 0 0\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))\n      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));\n  }\n\n  /* ─── Border Radius: Vertical — Middle children have no radius ─── */\n\n  .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n    --hx-button-border-radius: 0;\n  }\n\n  /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */\n\n  .group ::slotted(:focus-within) {\n    z-index: var(--hx-button-group-focus-z-index, 1);\n    position: relative;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /*\n     * In forced-colors mode, negative margins that collapse borders between grouped\n     * buttons can obscure focus rings. Raise focused children so the Highlight\n     * outline from hx-button's own forced-colors block is fully visible.\n     */\n    .group ::slotted(:focus-within) {\n      z-index: var(--hx-button-group-focus-z-index-hc, 2);\n    }\n  }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n *\n * **Accessibility:** Always provide an accessible label via `aria-label` or\n * `aria-labelledby` so screen readers can announce the group purpose.\n *\n * @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n *\n * @tag hx-button-group\n *\n * @slot - Default slot accepting hx-button children.\n *\n * @csspart group - The container div element wrapping all slotted buttons.\n *\n * @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-button-group/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow; activate=Enter,Space; disabled-suppresses=true\n * @aria-pattern toolbar\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-button-group\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends HelixElement {\n  static override styles = [helixButtonGroupStyles, forcedColorsInteractive];\n\n  /**\n   * Layout orientation of the button group.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  get orientation(): 'horizontal' | 'vertical' {\n    return this._orientation;\n  }\n  set orientation(value: string) {\n    if (value !== 'horizontal' && value !== 'vertical') {\n      devWarn('hx-button-group', `Invalid orientation \"${value}\", defaulting to \"horizontal\".`);\n      value = 'horizontal';\n    }\n    this._orientation = value as 'horizontal' | 'vertical';\n  }\n  /**\n   * Backing store for the orientation property, holding the validated orientation value.\n   * @internal\n   */\n  private _orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size applied to the button group and cascaded to child buttons via\n   * the --hx-button-group-size CSS custom property.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label for the button group. Sets aria-label on the host element.\n   * **Strongly recommended** for WCAG 2.1 AA compliance — without it, screen\n   * readers announce an unnamed \"group\". For Drupal/Twig compatibility, prefer\n   * applying `aria-label` directly as an HTML attribute instead.\n   * @attr label\n   */\n  @property({ type: String })\n  label: string = '';\n\n  // ─── Lifecycle ───\n\n  /**\n   * Tracks whether the consumer set `aria-label` directly as an HTML attribute\n   * BEFORE the `label` property fired. Used to avoid clobbering consumer-set\n   * aria-label when `label` is empty.\n   * @internal\n   */\n  private _consumerAriaLabel: string | null = null;\n\n  /**\n   * Snapshot of the consumer-set `role` attribute taken at connect time.\n   * When non-null, the consumer has explicitly set a role (e.g. `toolbar`,\n   * `radiogroup`) and the host-canonical mirror MUST defer to that role\n   * rather than overwriting `internals.role` with the default `\"group\"`.\n   * Mirrors the `_consumerAriaLabel` snapshot pattern above.\n   * @internal\n   */\n  private _consumerRole: string | null = null;\n\n  /**\n   * Tracks whether the no-label devWarn has already fired for this instance,\n   * so disconnect/reconnect cycles do not spam the console.\n   * @internal\n   */\n  private _emptyLabelWarnEmitted = false;\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--hx-button-group-size', this.size);\n    }\n\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label);\n      } else if (this._consumerAriaLabel !== null) {\n        // Restore consumer-set aria-label rather than removing it. The\n        // consumer's HTML attribute is the documented Drupal/Twig path\n        // (lines 67-68 narrative) and must not be clobbered by an empty\n        // `label` property.\n        this.setAttribute('aria-label', this._consumerAriaLabel);\n      } else {\n        this.removeAttribute('aria-label');\n      }\n    }\n  }\n\n  /**\n   * Cached list of focusable items inside the group. Invalidated on\n   * slotchange. Used by the roving-tabindex keyboard contract.\n   * @internal\n   */\n  private _focusableCache: HTMLElement[] | null = null;\n\n  /**\n   * APG toolbar pattern roving-tabindex keyboard handler.\n   * Reference: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n   *\n   * - ArrowRight / ArrowDown (vertical): focus next item, wrap.\n   * - ArrowLeft  / ArrowUp   (vertical): focus prev item, wrap.\n   * - Home: focus first item.\n   * - End:  focus last item.\n   * @internal\n   */\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    const isVertical = this._orientation === 'vertical';\n    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';\n    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\n\n    if (e.key === nextKey) {\n      e.preventDefault();\n      this._moveFocus('next');\n    } else if (e.key === prevKey) {\n      e.preventDefault();\n      this._moveFocus('prev');\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === 0 ? '0' : '-1'));\n        items[0]?.focus();\n      }\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      const items = this._getFocusableItems();\n      const last = items.length - 1;\n      if (items.length) {\n        items.forEach((el, i) => el.setAttribute('tabindex', i === last ? '0' : '-1'));\n        items[last]?.focus();\n      }\n    }\n  };\n\n  /** @internal */\n  private _isFocusable(el: HTMLElement): boolean {\n    if (el.hasAttribute('disabled')) return false;\n    const elWithDisabled = el as HTMLElement & { disabled?: boolean };\n    if (elWithDisabled.disabled === true) return false;\n    if (el.tabIndex >= 0) return true;\n    const tag = el.tagName.toLowerCase();\n    return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';\n  }\n\n  /** @internal */\n  private _getFocusableItems(): HTMLElement[] {\n    if (this._focusableCache) return this._focusableCache;\n    const slot = this.shadowRoot?.querySelector('slot');\n    const items: HTMLElement[] = [];\n    if (slot) {\n      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });\n      for (const el of assigned) {\n        if (!(el instanceof HTMLElement)) continue;\n        if (this._isFocusable(el)) {\n          items.push(el);\n        } else {\n          const descendants = el.querySelectorAll<HTMLElement>('*');\n          for (const d of Array.from(descendants)) {\n            if (this._isFocusable(d)) items.push(d);\n          }\n        }\n      }\n    }\n    this._focusableCache = items;\n    return items;\n  }\n\n  /** @internal */\n  private _initRovingTabindex(): void {\n    this._focusableCache = null;\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    const activeIndex = items.findIndex((el) => el.getAttribute('tabindex') === '0');\n    const targetIndex = activeIndex === -1 ? 0 : activeIndex;\n    items.forEach((el, i) => el.setAttribute('tabindex', i === targetIndex ? '0' : '-1'));\n  }\n\n  /** @internal */\n  private _moveFocus(direction: 'next' | 'prev'): void {\n    const items = this._getFocusableItems();\n    if (!items.length) return;\n    const focused = document.activeElement as HTMLElement | null;\n    const currentIndex = items.indexOf(focused as HTMLElement);\n    let nextIndex: number;\n    if (direction === 'next') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    }\n    items.forEach((el, i) => el.setAttribute('tabindex', i === nextIndex ? '0' : '-1'));\n    items[nextIndex]?.focus();\n  }\n\n  /** @internal */\n  private _handleSlotChange = (): void => {\n    this._initRovingTabindex();\n  };\n\n  override firstUpdated(): void {\n    this._initRovingTabindex();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    // Capture any consumer-set aria-label BEFORE the `label` property writes\n    // overwrite it. This snapshot wins back the host attribute when `label`\n    // is later cleared.\n    if (this._consumerAriaLabel === null && this.hasAttribute('aria-label')) {\n      this._consumerAriaLabel = this.getAttribute('aria-label');\n    }\n    // CodeRabbit SHOULD-FIX (PR #1649 follow-up): snapshot the consumer's\n    // explicit `role` BEFORE the host-canonical mirror overwrites it. When\n    // a consumer sets `role=\"toolbar\"` (or `radiogroup`, etc.), the mirror\n    // must defer to that role; otherwise two surfaces disagree (host attr\n    // says toolbar, internals says group) and AT picks one inconsistently.\n    if (this._consumerRole === null && this.hasAttribute('role')) {\n      this._consumerRole = this.getAttribute('role');\n    }\n    // Host-canonical role: use ElementInternals so the role survives in the\n    // a11y tree even if a consumer attribute-strips the host. Mirror to the\n    // host attribute as well for older AT/devtools that walk attributes.\n    if (this._consumerRole) {\n      // Defer to the consumer's role on both surfaces.\n      this._internals.role = this._consumerRole;\n    } else {\n      this._internals.role = 'group';\n      this.setAttribute('role', 'group');\n    }\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else if (this._consumerAriaLabel !== null) {\n      // Consumer-set aria-label is fine — no warning needed.\n    } else if (!this._emptyLabelWarnEmitted) {\n      this._emptyLabelWarnEmitted = true;\n      devWarn(\n        'hx-button-group',\n        'Missing accessible label. Provide a `label` attribute so screen readers can announce the group purpose (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"group\"\n        class=${classMap({\n          group: true,\n          'group--horizontal': this.orientation === 'horizontal',\n          'group--vertical': this.orientation === 'vertical',\n        })}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-button-group': HelixButtonGroup;\n  }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","HelixElement","e","isVertical","nextKey","prevKey","items","el","i","_a","last","_b","value","changedProperties","tag","slot","assigned","descendants","d","activeIndex","targetIndex","direction","focused","currentIndex","nextIndex","html","classMap","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-carousel-item-z1Lc24op.js → hx-carousel-item-BVIKgQ4i.js}

@@ -1,9 +1,9 @@
 import { css as g, nothing as p, html as l } from "lit";
 import { property as n, state as c, customElement as f } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
-import { f as m } from "./forced-colors-CTEDFRGa.js";
+import { f as y } from "./forced-colors-CTEDFRGa.js";
 import { H as _ } from "./helix-element-BNEYeiys.js";
-const y = g`
+const m = g`
   :host {
     display: block;
     position: relative;
@@ -76,9 +76,12 @@ const y = g`
     cursor: not-allowed;
   }
 
-  .nav-btn svg {
-    width: 1.25em;
-    height: 1.25em;
+  .nav-btn .carousel__nav-glyph {
+    --hx-icon-size: 1.25em;
+  }
+
+  .play-pause-btn .carousel__autoplay-glyph {
+    --hx-icon-size: 1em;
   }
 
   /* ─── Play/Pause ─── */
@@ -243,75 +246,42 @@ const y = g`
     }
   }
 `;
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? w(e, i) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (s = (r ? u(e, i, s) : u(s)) || s);
-  return r && s && b(e, i, s), s;
+var b = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? P(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (a = (r ? u(e, i, a) : u(a)) || a);
+  return r && a && b(e, i, a), a;
 };
-const P = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
+const w = l`<hx-icon
+  class="carousel__nav-glyph"
+  library="helix"
+  name="chevron-left"
   aria-hidden="true"
->
-  <polyline points="15 18 9 12 15 6"></polyline>
-</svg>`, I = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
+></hx-icon>`, I = l`<hx-icon
+  class="carousel__nav-glyph"
+  library="helix"
+  name="chevron-up"
   aria-hidden="true"
->
-  <polyline points="18 15 12 9 6 15"></polyline>
-</svg>`, k = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
+></hx-icon>`, M = l`<hx-icon
+  class="carousel__nav-glyph"
+  library="helix"
+  name="chevron-right"
   aria-hidden="true"
->
-  <polyline points="9 18 15 12 9 6"></polyline>
-</svg>`, M = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
+></hx-icon>`, T = l`<hx-icon
+  class="carousel__nav-glyph"
+  library="helix"
+  name="chevron-down"
   aria-hidden="true"
->
-  <polyline points="6 9 12 15 18 9"></polyline>
-</svg>`, C = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
+></hx-icon>`, S = l`<hx-icon
+  class="carousel__autoplay-glyph"
+  library="fa-free"
+  name="play"
   aria-hidden="true"
-  width="1em"
-  height="1em"
->
-  <polygon points="5 3 19 12 5 21 5 3"></polygon>
-</svg>`, T = l`<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
+></hx-icon>`, $ = l`<hx-icon
+  class="carousel__autoplay-glyph"
+  library="fa-free"
+  name="pause"
   aria-hidden="true"
-  width="1em"
-  height="1em"
->
-  <rect x="6" y="4" width="4" height="16"></rect>
-  <rect x="14" y="4" width="4" height="16"></rect>
-</svg>`;
+></hx-icon>`;
 let o = class extends _ {
   constructor() {
     super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this.labelPrevSlide = "Previous slide", this.labelNextSlide = "Next slide", this.labelPauseAutoplay = "Pause autoplay", this.labelPlayAutoplay = "Play autoplay", this.labelSlideOf = (t, e) => `Slide ${t} of ${e}`, this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._livePolite = !0, this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
@@ -348,8 +318,8 @@ let o = class extends _ {
     const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
     if (!t) return;
     const e = t.assignedElements({ flatten: !0 }).filter((r) => r.tagName.toLowerCase() === "hx-carousel-item");
-    this._slides = e, e.forEach((r, s) => {
-      r.slideIndex = s, r.totalSlides = e.length;
+    this._slides = e, e.forEach((r, a) => {
+      r.slideIndex = a, r.totalSlides = e.length;
       const h = `${100 / this.slidesPerPage}%`;
       r.style.setProperty("--_hx-carousel-slide-width", h);
     }), this._currentIndex >= e.length && (this._currentIndex = Math.max(0, e.length - 1));
@@ -445,8 +415,8 @@ let o = class extends _ {
     if (!this._isDragging) return;
     const e = t.changedTouches[0];
     if (!e) return;
-    const r = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, s = 50;
-    this._touchMoved && (r > s ? this.previous() : r < -s && this.next()), this._isDragging = !1, this._touchMoved = !1;
+    const r = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, a = 50;
+    this._touchMoved && (r > a ? this.previous() : r < -a && this.next()), this._isDragging = !1, this._touchMoved = !1;
   }
   /** @internal */
   _goToManual(t) {
@@ -549,19 +519,19 @@ let o = class extends _ {
   }
   /** @internal */
   _renderPrevIcon() {
-    return this.orientation === "horizontal" ? P : I;
+    return this.orientation === "horizontal" ? w : I;
   }
   /** @internal */
   _renderNextIcon() {
-    return this.orientation === "horizontal" ? k : M;
+    return this.orientation === "horizontal" ? M : T;
   }
   /** @internal */
   _renderPlayIcon() {
-    return C;
+    return S;
   }
   /** @internal */
   _renderPauseIcon() {
-    return T;
+    return $;
   }
   // ─── Render ───
   render() {
@@ -606,65 +576,65 @@ let o = class extends _ {
     `;
   }
 };
-o.styles = [y, m];
-a([
+o.styles = [m, y];
+s([
   n({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
-a([
+s([
   n({ type: Boolean, reflect: !0 })
 ], o.prototype, "loop", 2);
-a([
+s([
   n({ type: Boolean, reflect: !0 })
 ], o.prototype, "autoplay", 2);
-a([
+s([
   n({ type: Number, attribute: "autoplay-interval" })
 ], o.prototype, "autoplayInterval", 2);
-a([
+s([
   n({ type: Number, attribute: "slides-per-page" })
 ], o.prototype, "slidesPerPage", 2);
-a([
+s([
   n({ type: Number, attribute: "slides-per-move" })
 ], o.prototype, "slidesPerMove", 2);
-a([
+s([
   n({ type: String, reflect: !0 })
 ], o.prototype, "orientation", 2);
-a([
+s([
   n({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
 ], o.prototype, "mouseDragging", 2);
-a([
+s([
   n({ type: String, attribute: "label-prev-slide" })
 ], o.prototype, "labelPrevSlide", 2);
-a([
+s([
   n({ type: String, attribute: "label-next-slide" })
 ], o.prototype, "labelNextSlide", 2);
-a([
+s([
   n({ type: String, attribute: "label-pause-autoplay" })
 ], o.prototype, "labelPauseAutoplay", 2);
-a([
+s([
   n({ type: String, attribute: "label-play-autoplay" })
 ], o.prototype, "labelPlayAutoplay", 2);
-a([
+s([
   n({ attribute: !1 })
 ], o.prototype, "labelSlideOf", 2);
-a([
+s([
   c()
 ], o.prototype, "_currentIndex", 2);
-a([
+s([
   c()
 ], o.prototype, "_slides", 2);
-a([
+s([
   c()
 ], o.prototype, "_isPlaying", 2);
-a([
+s([
   c()
 ], o.prototype, "_liveText", 2);
-a([
+s([
   c()
 ], o.prototype, "_livePolite", 2);
-o = a([
+o = s([
   f("hx-carousel")
 ], o);
-const S = g`
+const C = g`
   :host {
     display: block;
     flex-shrink: 0;
@@ -691,10 +661,10 @@ const S = g`
     }
   }
 `;
-var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, v = (t, e, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? D(e, i) : e, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (s = (r ? u(e, i, s) : u(s)) || s);
-  return r && s && $(e, i, s), s;
+var D = Object.defineProperty, k = Object.getOwnPropertyDescriptor, v = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? k(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (a = (r ? u(e, i, a) : u(a)) || a);
+  return r && a && D(e, i, a), a;
 };
 let d = class extends _ {
   constructor() {
@@ -709,7 +679,7 @@ let d = class extends _ {
     `;
   }
 };
-d.styles = [S];
+d.styles = [C];
 v([
   n({ type: Number, attribute: "slide-index" })
 ], d.prototype, "slideIndex", 2);
@@ -723,4 +693,4 @@ export {
   o as H,
   d as a
 };
-//# sourceMappingURL=hx-carousel-item-z1Lc24op.js.map
+//# sourceMappingURL=hx-carousel-item-BVIKgQ4i.js.map