@helixui/library 3.1.0 → 3.2.0-next.74

package/dist/shared/{hx-breadcrumb-item-CldCwD1d.js → hx-breadcrumb-item-COeYcB2x.js}

@@ -1,8 +1,9 @@
 import { css as m, nothing as u, html as d } from "lit";
-import { property as n, state as x, customElement as b } from "lit/decorators.js";
-import { H as f } from "./helix-element-BNEYeiys.js";
-import { c as v } from "./id-counter-DuX8vsui.js";
-const y = m`
+import { property as n, state as v, customElement as b } from "lit/decorators.js";
+import { f } from "./forced-colors-CTEDFRGa.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+import { c as y } from "./id-counter-DuX8vsui.js";
+const g = m`
   :host {
     display: block;
     font-family: var(
@@ -66,15 +67,15 @@ const y = m`
     }
   }
 `;
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (t, e, s, a) => {
-  for (var r = a > 1 ? void 0 : a ? _(e, s) : e, o = t.length - 1, l; o >= 0; o--)
+var _ = Object.defineProperty, L = Object.getOwnPropertyDescriptor, c = (t, e, s, a) => {
+  for (var r = a > 1 ? void 0 : a ? L(e, s) : e, o = t.length - 1, l; o >= 0; o--)
     (l = t[o]) && (r = (a ? l(e, s, r) : l(r)) || r);
-  return a && r && g(e, s, r), r;
+  return a && r && _(e, s, r), r;
 };
-const L = v("hx-breadcrumb");
-let i = class extends f {
+const w = y("hx-breadcrumb");
+let i = class extends x {
   constructor() {
-    super(...arguments), this.separator = "/", this.label = "Breadcrumb", this.maxItems = 0, this.labelEllipsis = "Show all breadcrumb items", this.jsonLd = !1, this._showEllipsis = !1, this._jsonLdScript = null, this._managedCurrentItems = /* @__PURE__ */ new WeakSet(), this._jsonLdId = `${L()}-ld`;
+    super(...arguments), this.separator = "/", this.label = "Breadcrumb", this.maxItems = 0, this.labelEllipsis = "Show all breadcrumb items", this.jsonLd = !1, this._showEllipsis = !1, this._jsonLdScript = null, this._managedCurrentItems = /* @__PURE__ */ new WeakSet(), this._jsonLdId = `${w()}-ld`;
   }
   // ─── Item Helpers ───
   /**
@@ -224,7 +225,7 @@ let i = class extends f {
     `;
   }
 };
-i.styles = [y];
+i.styles = [g, f];
 c([
   n({ type: String })
 ], i.prototype, "separator", 2);
@@ -241,12 +242,12 @@ c([
   n({ type: Boolean, attribute: "json-ld" })
 ], i.prototype, "jsonLd", 2);
 c([
-  x()
+  v()
 ], i.prototype, "_showEllipsis", 2);
 i = c([
   b("hx-breadcrumb")
 ], i);
-const w = m`
+const C = m`
   :host {
     display: inline-flex;
     align-items: center;
@@ -264,7 +265,7 @@ const w = m`
   }
 
   [part='link'] {
-    color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));
+    color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600, #0f7078));
     text-decoration: none;
     cursor: pointer;
     font-family: inherit;
@@ -276,7 +277,7 @@ const w = m`
   }
 
   [part='link']:hover {
-    color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));
+    color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700, #0f6363));
     text-decoration: underline;
   }
 
@@ -284,14 +285,14 @@ const w = m`
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-breadcrumb-link-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   [part='text'] {
-    color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));
+    color: var(--hx-breadcrumb-text-color, var(--hx-color-text-strong, #202b39));
     font-family: inherit;
     font-size: inherit;
     max-width: var(--hx-breadcrumb-item-max-width);
@@ -302,7 +303,7 @@ const w = m`
 
   .separator {
     margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));
-    color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));
+    color: var(--hx-breadcrumb-separator-color, var(--hx-color-text-muted, #4a5362));
     user-select: none;
   }
 
@@ -336,12 +337,12 @@ const w = m`
     }
   }
 `;
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, e, s, a) => {
+var I = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, e, s, a) => {
   for (var r = a > 1 ? void 0 : a ? S(e, s) : e, o = t.length - 1, l; o >= 0; o--)
     (l = t[o]) && (r = (a ? l(e, s, r) : l(r)) || r);
-  return a && r && C(e, s, r), r;
+  return a && r && I(e, s, r), r;
 };
-let p = class extends f {
+let p = class extends x {
   constructor() {
     super(...arguments), this.href = void 0, this.dataBcLast = !1, this.current = !1;
   }
@@ -357,7 +358,7 @@ let p = class extends f {
     `;
   }
 };
-p.styles = [w];
+p.styles = [C, f];
 h([
   n({ type: String, reflect: !0 })
 ], p.prototype, "href", 2);
@@ -374,4 +375,4 @@ export {
   i as H,
   p as a
 };
-//# sourceMappingURL=hx-breadcrumb-item-CldCwD1d.js.map
+//# sourceMappingURL=hx-breadcrumb-item-COeYcB2x.js.map

package/dist/shared/hx-breadcrumb-item-COeYcB2x.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-breadcrumb-item-COeYcB2x.js","sources":["../../src/components/hx-breadcrumb/hx-breadcrumb.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.styles.ts","../../src/components/hx-breadcrumb/hx-breadcrumb-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBreadcrumbStyles = css`\n  :host {\n    display: block;\n    font-family: var(\n      --hx-breadcrumb-font-family,\n      var(--hx-font-family-sans, system-ui, sans-serif)\n    );\n    font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  [part='nav'] {\n    /* nav landmark — no additional styling needed */\n  }\n\n  [part='list'] {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: 0;\n  }\n\n  /* Hide middle items when collapsed via maxItems */\n  ::slotted([data-bc-hidden]) {\n    display: none;\n  }\n\n  /*\n   * Ellipsis ordering when collapsed (FS-014 fix):\n   * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating\n   * the consumer's light DOM. CSS order places it between the first item\n   * (order: 0, default) and the last item (order: 2) in the flex <ol>.\n   */\n  .hx-bc-ellipsis {\n    order: 1;\n  }\n\n  ::slotted([data-bc-last]) {\n    order: 2;\n  }\n\n  /* Visually hide the separator slot — used only to read text content.\n   * display:none is intentional: the slot contains no interactive or focusable\n   * content. If a future change adds focusable elements to this slot, switch to\n   * visibility:hidden + position:absolute to preserve focus reachability. */\n  .separator-slot {\n    display: none;\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /*\n   * hx-breadcrumb is a nav container. Link colors and separators are handled\n   * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed\n   * at the container level.\n   */\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: auto;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixBreadcrumbStyles } from './hx-breadcrumb.styles.js';\n\n/** Typed schema.org ListItem entry for JSON-LD BreadcrumbList structured data. */\ninterface JsonLdListItem {\n  '@type': string;\n  position: number;\n  name: string;\n  item?: string;\n}\n\nconst _nextBreadcrumbId = createIdCounter('hx-breadcrumb');\n\n/**\n * Hierarchical page path navigation showing current location in site structure.\n *\n * @summary Navigation breadcrumb showing the page hierarchy. Works with Drupal's breadcrumb system.\n *\n * @tag hx-breadcrumb\n *\n * @slot - Default slot for hx-breadcrumb-item children.\n * @slot separator - Optional separator element. Its text content overrides the `separator` property.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The ordered list containing items.\n *\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character between items.\n *   NOTE: If overriding this custom property directly in CSS (rather than via the `separator`\n *   attribute), the value MUST be quoted: `--hx-breadcrumb-separator-content: \">\"`. An unquoted\n *   value is invalid for the CSS `content` property and will silently render nothing.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal gap around separators.\n * @cssprop [--hx-breadcrumb-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-item-max-width] - Max-width for item text truncation (e.g. `12rem`).\n * @cssprop [--hx-breadcrumb-font-family] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n */\n@customElement('hx-breadcrumb')\nexport class HelixBreadcrumb extends HelixElement {\n  static override styles = [helixBreadcrumbStyles, forcedColorsInteractive];\n\n  /**\n   * The separator character displayed between breadcrumb items.\n   * @attr separator\n   */\n  @property({ type: String })\n  separator = '/';\n\n  /**\n   * The accessible label for the nav landmark.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Breadcrumb';\n\n  /**\n   * Maximum number of items to show before collapsing middle items with an ellipsis.\n   * Set to 0 (default) to show all items. The ellipsis is a keyboard-accessible\n   * button; activating it expands the full breadcrumb by setting maxItems to 0.\n   * @attr max-items\n   */\n  @property({ type: Number, attribute: 'max-items' })\n  maxItems = 0;\n\n  /**\n   * Accessible label for the expand ellipsis button. Override for i18n.\n   * @attr label-ellipsis\n   */\n  @property({ attribute: 'label-ellipsis' }) labelEllipsis = 'Show all breadcrumb items';\n\n  /**\n   * When true, injects a JSON-LD BreadcrumbList structured data script into the document head.\n   *\n   * NOTE: Drupal manages `<head>` content via its own render pipeline. Injecting a\n   * `<script>` directly via `document.head.appendChild()` in a Drupal context:\n   * 1. Bypasses Drupal's deduplication and `hook_html_head_alter()` hook.\n   * 2. Is not cacheable by Drupal's page cache.\n   * 3. Will be wiped on BigPipe partial page replacements.\n   *\n   * For Drupal integrations, leave `json-ld` false and use the structured data\n   * Twig template instead (see `hx-breadcrumb.twig` in the component directory).\n   *\n   * @attr json-ld\n   */\n  @property({ type: Boolean, attribute: 'json-ld' })\n  jsonLd = false;\n\n  /**\n   * Whether the ellipsis expand button is currently shown (shadow DOM rendered).\n   * Driven by maxItems collapse logic; replaces the old light-DOM ellipsis injection.\n   * @internal\n   */\n  @state() private _showEllipsis = false;\n  /** @internal */\n  private _jsonLdScript: HTMLScriptElement | null = null;\n\n  /**\n   * Tracks which items had their `current` attribute set by this component\n   * (as opposed to set by a consumer/Drupal template). This lets us re-evaluate\n   * positional current-page detection on each slotchange without incorrectly\n   * treating a previously component-set `current` attribute as a consumer-set\n   * explicit override.\n   * @internal\n   */\n  private readonly _managedCurrentItems = new WeakSet<Element>();\n\n  /**\n   * Stable per-instance ID used to tag the injected script element so that\n   * multiple hx-breadcrumb instances on the same page don't produce conflicting\n   * or duplicate structured-data blocks. Each instance owns exactly one script\n   * tag identified by this ID; any stale tag from a previous render cycle is\n   * removed before a new one is inserted.\n   *\n   * Uses a static counter (not Math.random()) so IDs are deterministic across\n   * server and client renders, enabling SSR hydration matching.\n   * @internal\n   */\n  private readonly _jsonLdId = `${_nextBreadcrumbId()}-ld`;\n\n  // ─── Item Helpers ───\n\n  /**\n   * Returns only real breadcrumb items, excluding the managed ellipsis element.\n   * @internal\n   */\n  private _getBreadcrumbItems(slot: HTMLSlotElement): Element[] {\n    return slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el) =>\n          el.tagName.toLowerCase() === 'hx-breadcrumb-item' &&\n          !el.classList.contains('hx-bc-ellipsis'),\n      );\n  }\n\n  /**\n   * Applies aria/state attributes to the item list.\n   *\n   * Current-page detection: if any item has an explicit `current` attribute\n   * (e.g. set by a Drupal Twig template), that item is treated as the current\n   * page. Otherwise the last item is the current page (default behaviour).\n   *\n   * This separation allows Drupal to control current-page marking without\n   * relying on item order.\n   * @internal\n   */\n  private _applyItemAttributes(items: Element[]): void {\n    // Detect consumer-set 'current' attributes. An item has an explicit consumer\n    // current if it has the 'current' attribute AND the component did not set it\n    // (tracked via _managedCurrentItems). This prevents component-managed state\n    // from being misread as a consumer override on subsequent slotchange events.\n    const hasExplicitCurrent = items.some(\n      (el) => el.hasAttribute('current') && !this._managedCurrentItems.has(el),\n    );\n\n    items.forEach((item, i) => {\n      const el = item as HTMLElement;\n      const isLast = i === items.length - 1;\n\n      // Separator hiding: always positional — last item has no trailing separator.\n      if (isLast) {\n        el.setAttribute('data-bc-last', '');\n      } else {\n        el.removeAttribute('data-bc-last');\n      }\n\n      // Current-page marker: explicit consumer attribute wins over positional last.\n      // The item component renders aria-current=\"page\" on its inner element\n      // based on this attribute (see hx-breadcrumb-item.ts).\n      if (!hasExplicitCurrent) {\n        if (isLast) {\n          el.setAttribute('current', '');\n          this._managedCurrentItems.add(el);\n        } else {\n          el.removeAttribute('current');\n          this._managedCurrentItems.delete(el);\n        }\n      }\n      // When hasExplicitCurrent is true, leave 'current' attributes as-is so\n      // consumer or Drupal template markup is not overridden.\n    });\n  }\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    if (!(e.target instanceof HTMLSlotElement)) return;\n    const items = this._getBreadcrumbItems(e.target);\n\n    // Handle collapse behaviour\n    if (this.maxItems > 0 && items.length > this.maxItems) {\n      this._applyCollapse(items);\n    } else {\n      this._removeCollapse(items);\n    }\n\n    this._applyItemAttributes(items);\n\n    if (this.jsonLd) {\n      this._updateJsonLd(items);\n    }\n  }\n\n  /** @internal */\n  private _handleSeparatorSlotChange(e: Event): void {\n    if (!(e.target instanceof HTMLSlotElement)) return;\n    const assigned = e.target.assignedElements({ flatten: true });\n    if (assigned.length > 0) {\n      const text = (assigned[0] as HTMLElement).textContent?.trim() ?? '';\n      this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(text));\n    }\n  }\n\n  // ─── Collapse ───\n\n  /** @internal */\n  private _applyCollapse(items: Element[]): void {\n    // Show only first and last; hide all middle items via data attribute.\n    // The ellipsis is rendered in shadow DOM (see render()) to avoid mutating\n    // the consumer's light DOM structure (FS-014).\n    items.forEach((item, i) => {\n      const el = item as HTMLElement;\n      if (i === 0 || i === items.length - 1) {\n        el.removeAttribute('data-bc-hidden');\n      } else {\n        el.setAttribute('data-bc-hidden', '');\n      }\n    });\n\n    this._showEllipsis = true;\n  }\n\n  /** @internal */\n  private _removeCollapse(items: Element[]): void {\n    items.forEach((item) => {\n      (item as HTMLElement).removeAttribute('data-bc-hidden');\n    });\n\n    this._showEllipsis = false;\n  }\n\n  /**\n   * Expands a collapsed breadcrumb by resetting maxItems to 0.\n   * Called by the ellipsis expand button (click or Enter/Space).\n   * @internal\n   */\n  private _expandBreadcrumb(): void {\n    this.maxItems = 0;\n    // updated() will detect the maxItems change and call _removeCollapse.\n  }\n\n  // ─── JSON-LD ───\n\n  /**\n   * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.\n   * @internal\n   */\n  private _buildListItem(item: Element, position: number): JsonLdListItem {\n    const href = (item as HTMLElement).getAttribute('href');\n    const name = (item as HTMLElement).textContent?.trim() ?? '';\n    const entry: JsonLdListItem = {\n      '@type': 'ListItem',\n      position,\n      name,\n    };\n    if (href) entry.item = href;\n    return entry;\n  }\n\n  /** @internal */\n  private _updateJsonLd(items: Element[]): void {\n    const schema = {\n      '@context': 'https://schema.org',\n      '@type': 'BreadcrumbList',\n      itemListElement: items.map((item, i) => this._buildListItem(item, i + 1)),\n    };\n\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document === 'undefined') return;\n\n    if (!this._jsonLdScript) {\n      // Dedup guard: remove any stale script with this instance's ID before\n      // creating a fresh one. This handles the edge case where the element was\n      // reconnected to the DOM after being disconnected without the script\n      // reference being re-established.\n      document.getElementById(this._jsonLdId)?.remove();\n\n      this._jsonLdScript = document.createElement('script');\n      this._jsonLdScript.type = 'application/ld+json';\n      this._jsonLdScript.id = this._jsonLdId;\n      this._jsonLdScript.setAttribute('data-hx-breadcrumb', '');\n      document.head.appendChild(this._jsonLdScript);\n    }\n\n    this._jsonLdScript.textContent = JSON.stringify(schema);\n  }\n\n  /** @internal */\n  private _removeJsonLd(): void {\n    this._jsonLdScript?.remove();\n    this._jsonLdScript = null;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Do NOT set role=\"list\" on the host. The shadow-DOM <nav><ol> provides\n    // both navigation landmark and list semantics. Setting role=\"list\" on\n    // the host conflicts with the <nav> child — axe-core flags\n    // aria-required-children because a list cannot own a navigation landmark.\n    // Slotted items no longer need role=\"listitem\" either; the native <ol>\n    // handles list semantics in the composed accessibility tree.\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeJsonLd();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('separator')) {\n      // JSON.stringify wraps the string in quotes so the value is valid\n      // for use in the CSS `content` property (e.g. '/' becomes '\"/\"').\n      this.style.setProperty('--hx-breadcrumb-separator-content', JSON.stringify(this.separator));\n    }\n\n    if (changedProperties.has('maxItems')) {\n      // Re-evaluate collapse state when maxItems changes programmatically\n      // (e.g. when the expand button resets maxItems to 0).\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n      if (slot) {\n        const items = this._getBreadcrumbItems(slot);\n        if (this.maxItems > 0 && items.length > this.maxItems) {\n          this._applyCollapse(items);\n        } else {\n          this._removeCollapse(items);\n        }\n        this._applyItemAttributes(items);\n      }\n    }\n\n    if (changedProperties.has('jsonLd')) {\n      if (this.jsonLd) {\n        // json-ld toggled on after initial render — inject script immediately.\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        if (slot) {\n          this._updateJsonLd(this._getBreadcrumbItems(slot));\n        }\n      } else {\n        // json-ld toggled off — remove existing script.\n        this._removeJsonLd();\n      }\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <nav part=\"nav\" aria-label=${this.label}>\n        <ol part=\"list\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n          ${this._showEllipsis\n            ? html`\n                <hx-breadcrumb-item class=\"hx-bc-ellipsis\">\n                  <button\n                    type=\"button\"\n                    aria-label=${this.labelEllipsis}\n                    @click=${this._expandBreadcrumb}\n                  >\n                    …\n                  </button>\n                </hx-breadcrumb-item>\n              `\n            : nothing}\n        </ol>\n      </nav>\n      <slot\n        name=\"separator\"\n        class=\"separator-slot\"\n        @slotchange=${this._handleSeparatorSlotChange}\n      ></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-breadcrumb': HelixBreadcrumb;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixBreadcrumbItemStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /*\n   * display: contents removes [part='item'] from the box model entirely.\n   * This is intentional — the wrapper exists only for slot selection purposes.\n   * Consumers using ::part(item) CANNOT apply box-model properties (padding,\n   * margin, background, border) to this part. Use ::part(link) or ::part(text)\n   * for visual styling of breadcrumb item content.\n   */\n  [part='item'] {\n    display: contents;\n  }\n\n  [part='link'] {\n    color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600, #0f7078));\n    text-decoration: none;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    max-width: var(--hx-breadcrumb-item-max-width);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  [part='link']:hover {\n    color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700, #0f6363));\n    text-decoration: underline;\n  }\n\n  [part='link']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-breadcrumb-link-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  [part='text'] {\n    color: var(--hx-breadcrumb-text-color, var(--hx-color-text-strong, #202b39));\n    font-family: inherit;\n    font-size: inherit;\n    max-width: var(--hx-breadcrumb-item-max-width);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .separator {\n    margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));\n    color: var(--hx-breadcrumb-separator-color, var(--hx-color-text-muted, #4a5362));\n    user-select: none;\n  }\n\n  .separator::before {\n    content: var(--hx-breadcrumb-separator-content, '/');\n  }\n\n  /* Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). */\n  ::slotted(button) {\n    background: none;\n    border: none;\n    cursor: pointer;\n    font: inherit;\n    color: inherit;\n    padding: 0;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='link'] {\n      color: LinkText;\n    }\n\n    [part='link']:hover {\n      color: LinkText;\n    }\n\n    .separator {\n      color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixBreadcrumbItemStyles } from './hx-breadcrumb-item.styles.js';\n\n/**\n * A single breadcrumb navigation item.\n *\n * @summary A navigation item within an hx-breadcrumb component. Renders as a link when `href` is\n * provided, or as static text for the current page item. The current page item is determined by\n * the `current` attribute (set explicitly or automatically by the parent `hx-breadcrumb`).\n *\n * @tag hx-breadcrumb-item\n *\n * @slot - The link or page text content. Accepts text, HTML, or icon elements.\n *\n * @csspart item - Wrapper around the link or text content.\n * @csspart link - The anchor element when href is provided (non-current items only).\n * @csspart text - The span element for the current page or items without href.\n * @csspart separator - The separator element rendered after non-last items.\n *\n * @cssprop [--hx-breadcrumb-link-color=var(--hx-color-primary-600)] - Link text color.\n * @cssprop [--hx-breadcrumb-link-hover-color=var(--hx-color-primary-700)] - Link hover text color.\n * @cssprop [--hx-breadcrumb-text-color=var(--hx-color-neutral-700)] - Current page text color.\n * @cssprop [--hx-breadcrumb-separator-content='/'] - Separator character displayed after non-last items.\n * @cssprop [--hx-breadcrumb-separator-color=var(--hx-color-neutral-400)] - Separator color.\n * @cssprop [--hx-breadcrumb-separator-gap=var(--hx-space-1)] - Horizontal margin around separator.\n * @cssprop [--hx-breadcrumb-item-max-width] - Optional max-width for text truncation.\n * @cssprop [--hx-breadcrumb-link-focus-ring-color=var(--hx-focus-ring-color, var(--hx-color-primary-500))] - Focus ring color for breadcrumb links.\n */\n@customElement('hx-breadcrumb-item')\nexport class HelixBreadcrumbItem extends HelixElement {\n  static override styles = [helixBreadcrumbItemStyles, forcedColorsInteractive];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // No explicit role needed. The shadow-DOM <ol> inside hx-breadcrumb\n    // provides native list semantics; slotted items are projected into it.\n    // Previously role=\"listitem\" was set here, but it conflicted with the\n    // host's role=\"list\" + shadow-DOM <nav> structure (aria-required-children).\n    // The native <ol> handles the accessibility tree correctly without\n    // explicit ARIA roles on host or items.\n  }\n\n  /**\n   * The URL for this breadcrumb link. Omit for the current page item.\n   * When `current` is true, this attribute is ignored and the item always\n   * renders as static text per WAI-ARIA APG breadcrumb guidance.\n   * @attr href\n   */\n  @property({ type: String, reflect: true })\n  href: string | undefined = undefined;\n\n  /**\n   * Whether this is the last item in the breadcrumb trail. Set by the parent\n   * hx-breadcrumb component via the `data-bc-last` boolean attribute. When\n   * present the trailing separator is hidden.\n   *\n   * @attr data-bc-last\n   * @internal\n   */\n  @property({ type: Boolean, attribute: 'data-bc-last', reflect: true })\n  dataBcLast = false;\n\n  /**\n   * Marks this item as the current page. When set, the item always renders as\n   * static text (never a navigable link) and `aria-current=\"page\"` is placed on\n   * the inner text element per WAI-ARIA APG breadcrumb guidance, yielding the\n   * canonical AT announcement (\"current page, Patient Records\").\n   *\n   * Can be set explicitly by consumers (e.g. Drupal Twig templates) to override\n   * the default positional last-item detection in `hx-breadcrumb`. When any item\n   * in the breadcrumb has an explicit `current` attribute, the parent will not\n   * override it.\n   *\n   * @attr current\n   */\n  @property({ type: Boolean, reflect: true })\n  current = false;\n\n  override render() {\n    // Per WAI-ARIA APG, the current page item MUST NOT be a navigable link.\n    // aria-current=\"page\" is placed on the inner element (not the listitem host)\n    // for canonical AT announcement (\"current page, Patient Records\" vs\n    // \"current page, list item\").\n    return html`\n      <span part=\"item\">\n        ${this.current\n          ? html`<span part=\"text\" aria-current=\"page\"><slot></slot></span>`\n          : this.href\n            ? html`<a part=\"link\" href=${this.href}><slot></slot></a>`\n            : html`<span part=\"text\"><slot></slot></span>`}\n      </span>\n      ${!this.dataBcLast\n        ? html`<span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>`\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-breadcrumb-item': HelixBreadcrumbItem;\n  }\n}\n"],"names":["helixBreadcrumbStyles","css","_nextBreadcrumbId","createIdCounter","HelixBreadcrumb","HelixElement","slot","el","items","hasExplicitCurrent","item","i","isLast","e","assigned","text","_a","position","href","name","entry","schema","changedProperties","_b","html","nothing","forcedColorsInteractive","__decorateClass","property","state","customElement","helixBreadcrumbItemStyles","HelixBreadcrumbItem"],"mappings":"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"}

package/dist/shared/{hx-button-group-BJOGWoMa.js → hx-button-group-BI-QBqmO.js}

@@ -1,8 +1,9 @@
-import { css as h, html as u } from "lit";
+import { css as u, html as h } from "lit";
 import { property as n, customElement as c } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-const m = h`
+import { classMap as b } from "lit/directives/class-map.js";
+import { f as p } from "./forced-colors-CTEDFRGa.js";
+import { H as g } from "./helix-element-BNEYeiys.js";
+const x = u`
   :host {
     display: inline-flex;
     contain: layout style;
@@ -26,33 +27,43 @@ const m = h`
   /* ─── No Double Borders: Horizontal ─── */
 
   .group--horizontal ::slotted(*:not(:first-child)) {
-    margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
+    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: calc(-1 * var(--hx-border-width-thin, 1px));
+    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-border-radius-md, 0.375rem);
+    --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-border-radius-md, 0.375rem) 0 0
-      var(--hx-border-radius-md, 0.375rem);
+    --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-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0;
+    --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 ─── */
@@ -64,21 +75,28 @@ const m = h`
   /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
 
   .group--vertical ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --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-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0 0;
+    --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-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem);
+    --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 ─── */
@@ -90,7 +108,7 @@ const m = h`
   /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
 
   .group ::slotted(:focus-within) {
-    z-index: 1;
+    z-index: var(--hx-button-group-focus-z-index, 1);
     position: relative;
   }
 
@@ -103,16 +121,16 @@ const m = h`
      * outline from hx-button's own forced-colors block is fully visible.
      */
     .group ::slotted(:focus-within) {
-      z-index: 2;
+      z-index: var(--hx-button-group-focus-z-index-hc, 2);
     }
   }
 `;
-var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (r, e, l, i) => {
-  for (var t = i > 1 ? void 0 : i ? f(e, l) : e, a = r.length - 1, d; a >= 0; a--)
-    (d = r[a]) && (t = (i ? d(e, l, t) : d(t)) || t);
-  return i && t && g(e, l, t), t;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (r, e, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? f(e, a) : e, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (t = (i ? d(e, a, t) : d(t)) || t);
+  return i && t && v(e, a, t), t;
 };
-let o = class extends b {
+let o = class extends g {
   constructor() {
     super(...arguments), this._orientation = "horizontal", this.size = "md", this.label = "";
   }
@@ -131,10 +149,10 @@ let o = class extends b {
   }
   // ─── Render ───
   render() {
-    return u`
+    return h`
       <div
         part="group"
-        class=${p({
+        class=${b({
       group: !0,
       "group--horizontal": this.orientation === "horizontal",
       "group--vertical": this.orientation === "vertical"
@@ -145,7 +163,7 @@ let o = class extends b {
     `;
   }
 };
-o.styles = [m];
+o.styles = [x, p];
 s([
   n({ type: String, reflect: !0 })
 ], o.prototype, "orientation", 1);
@@ -161,4 +179,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-button-group-BJOGWoMa.js.map
+//# sourceMappingURL=hx-button-group-BI-QBqmO.js.map

package/dist/shared/hx-button-group-BI-QBqmO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-group-BI-QBqmO.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 */\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  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 {\n        this.removeAttribute('aria-label');\n      }\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'group');\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.setAttribute('aria-label', this.label);\n    } else {\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></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","value","changedProperties","html","classMap","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC4B/B,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAsBL,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB;AAAA,EAAA;AAAA,EAhChB,IAAI,cAAyC;AAC3C,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,YAAYC,GAAe;AAC7B,IAAIA,MAAU,gBAAgBA,MAAU,eAEtCA,IAAQ,eAEV,KAAK,eAAeA;AAAA,EACtB;AAAA;AAAA,EA2BS,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC3B,KAAK,QACP,KAAK,aAAa,cAAc,KAAK,KAAK,IAE1C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,OAAO,GACjC,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,SACP,KAAK,aAAa,cAAc,KAAK,KAAK;AAAA,EAO9C;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB,KAAK,gBAAgB;AAAA,MAC1C,mBAAmB,KAAK,gBAAgB;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AA1FaL,EACK,SAAS,CAACF,GAAwBQ,CAAuB;AAOrEC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BR,EAQP,WAAA,eAAA,CAAA;AAsBJO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA7BpDR,EA8BX,WAAA,QAAA,CAAA;AAUAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfR,EAwCX,WAAA,SAAA,CAAA;AAxCWA,IAANO,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBT,CAAA;"}

package/dist/shared/{hx-button-Ddl-T6T-.js → hx-button-modUSOpY.js}

@@ -1,11 +1,12 @@
-import { css as v, html as u, nothing as s } from "lit";
-import { property as a, customElement as p } from "lit/decorators.js";
+import { css as f, html as u, nothing as s } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as c } from "lit/directives/if-defined.js";
+import { f as p } from "./forced-colors-CTEDFRGa.js";
 import { d as x } from "./dev-warn-YlwPHjtX.js";
-import { m as f } from "./aria-delegation-Doq6RRUy.js";
+import { m } from "./aria-delegation-Doq6RRUy.js";
 import { H as g } from "./helix-element-BNEYeiys.js";
-const m = v`
+const y = f`
   :host {
     display: inline-block;
   }
@@ -34,7 +35,7 @@ const m = v`
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-button-border-color, transparent);
     border-radius: var(--hx-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #2563eb));
+    background-color: var(--hx-button-bg, var(--hx-color-primary-500, #429797));
     color: var(--hx-button-color, var(--hx-color-neutral-0, #ffffff));
     font-family: var(--hx-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -53,7 +54,10 @@ const m = v`
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-button-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -91,63 +95,77 @@ const m = v`
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-button-bg: var(--hx-color-primary-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-button-border-color: transparent;
   }
 
   .button--secondary {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-primary-500);
-    --hx-button-border-color: var(--hx-color-primary-500);
+    /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
+       primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
+    --hx-button-color: var(--hx-color-primary-600, #0f7078);
+    --hx-button-border-color: var(--hx-color-primary-600, #0f7078);
   }
 
   .button--secondary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--tertiary {
-    --hx-button-bg: var(--hx-color-neutral-100);
-    --hx-button-color: var(--hx-color-neutral-900);
+    --hx-button-bg: var(--hx-color-surface-sunken, #ebeee9);
+    --hx-button-color: var(--hx-color-text-primary, #0d1825);
     --hx-button-border-color: transparent;
   }
 
   .button--tertiary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-200));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--danger {
-    --hx-button-bg: var(--hx-color-error-500);
-    --hx-button-color: var(--hx-color-neutral-0);
+    --hx-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-button-border-color: transparent;
   }
 
+  /* on-error tokens are tuned for error-500 (neutral-900 on #E5493E ≈ 4.59:1).
+     error-600 (#C92A2A) drops that to 2.25:1 — AA fail. Hold fg at neutral-0
+     directly so darker hover fills stay legible. Mirrors hx-toast precedent
+     (commit 300e21ab0). */
   .button--danger:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-error-600, #c92a2a));
+    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--ghost {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-primary-500);
+    /* primary-500 (#429797) text on white surface = 3.43:1 — fails AA.
+       primary-600 (#0F7078) on white = 6.06:1 — AA pass. */
+    --hx-button-color: var(--hx-color-primary-600, #0f7078);
     --hx-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-100));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   .button--outline {
     --hx-button-bg: transparent;
-    --hx-button-color: var(--hx-color-neutral-900);
-    --hx-button-border-color: var(--hx-color-neutral-300);
+    --hx-button-color: var(--hx-color-text-primary, #0d1825);
+    --hx-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--outline:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-neutral-50));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
+  /* on-primary token resolves to neutral-900 (#0D1825) — tuned for primary-500.
+     primary-600 (#0F7078) drops the pair to 3.07:1 — AA fail. Pin fg at
+     neutral-0 for the darker hover fill. Mirrors hx-toast precedent
+     (commit 300e21ab0). */
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600, #0f7078));
+    --hx-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   /* ─── Disabled ─── */
@@ -193,7 +211,7 @@ const m = v`
 
   /* Override text color and filter-based hover/active for all variants */
   :host([inverted]) .button {
-    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0));
+    color: var(--hx-button-inverted-color, var(--hx-color-neutral-0, #ffffff));
     filter: none;
   }
 
@@ -214,7 +232,7 @@ const m = v`
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
+    --hx-button-bg: var(--hx-color-primary-400, #6ab1b1);
   }
 
   /* Secondary inverted — white border and text */
@@ -305,12 +323,12 @@ const m = v`
     }
   }
 `;
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
-  for (var o = i > 1 ? void 0 : i ? _(r, h) : r, l = t.length - 1, b; l >= 0; l--)
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, r, h, i) => {
+  for (var o = i > 1 ? void 0 : i ? w(r, h) : r, l = t.length - 1, b; l >= 0; l--)
     (b = t[l]) && (o = (i ? b(r, h, o) : b(o)) || o);
-  return i && o && y(r, h, o), o;
+  return i && o && _(r, h, o), o;
 };
-let e = class extends f(g) {
+let e = class extends m(g) {
   constructor() {
     super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.type = "button", this.href = void 0, this.target = void 0, this.name = void 0, this.value = void 0, this.full = !1, this.inverted = !1, this.accessibleLabel = "", this._emptySlotWarnEmitted = !1;
   }
@@ -463,7 +481,7 @@ let e = class extends f(g) {
     `;
   }
 };
-e.styles = [m];
+e.styles = [y, p];
 e.formAssociated = !0;
 e._VALID_VARIANTS = [
   "primary",
@@ -510,9 +528,9 @@ n([
   a({ type: String, attribute: "accessible-label" })
 ], e.prototype, "accessibleLabel", 2);
 e = n([
-  p("hx-button")
+  v("hx-button")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-button-Ddl-T6T-.js.map
+//# sourceMappingURL=hx-button-modUSOpY.js.map