@helixui/library 3.3.1 → 3.4.0

package/dist/shared/{hx-td-DnnEMIuA.js → hx-td-BGkFOJEK.js}

@@ -1,9 +1,11 @@
-import { css as d, nothing as g, html as n } from "lit";
+import { css as p, nothing as m, html as n } from "lit";
 import { property as l, state as D, customElement as b } from "lit/decorators.js";
-import { a as O } from "./forced-colors-CTEDFRGa.js";
-import { H as v } from "./helix-element-BNEYeiys.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-const P = d`
+import { a as T } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+import { s as $, i as O, r as R } from "./aria-idref-CxvyzfQS.js";
+import { f as A } from "./aria-flatten-DY6v2vah.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+const M = p`
   :host {
     display: block;
     overflow-x: auto;
@@ -117,27 +119,27 @@ const P = d`
     }
   }
 `;
-d`
+p`
   :host {
     display: contents;
   }
 `;
-d`
+p`
   :host {
     display: contents;
   }
 `;
-const $ = d`
+const L = p`
   :host {
     display: contents;
   }
 `;
-var H = Object.defineProperty, j = Object.getOwnPropertyDescriptor, x = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? j(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && H(r, i, t), t;
+var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, v = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? B(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = (o ? a(r, i, e) : a(e)) || e);
+  return o && e && P(r, i, e), e;
 };
-let h = class extends v {
+let h = class extends u {
   constructor() {
     super(...arguments), this.label = "", this.caption = "", this.variant = "default", this.stickyHeader = !1, this.fullWidth = !0, this._hasCaptionSlot = !1;
   }
@@ -145,85 +147,85 @@ let h = class extends v {
   connectedCallback() {
     super.connectedCallback(), this._hasCaptionSlot = this.querySelector('[slot="caption"]') !== null;
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), !this.label && !this.caption && this._hasCaptionSlot;
+  firstUpdated(t) {
+    super.firstUpdated(t), !this.label && !this.caption && this._hasCaptionSlot;
   }
-  willUpdate(e) {
-    e.has("label") && !this.label && e.get("label");
+  willUpdate(t) {
+    t.has("label") && !this.label && t.get("label");
   }
   /** @internal */
-  _onCaptionSlotChange(e) {
-    const r = e.target;
+  _onCaptionSlotChange(t) {
+    const r = t.target;
     this._hasCaptionSlot = r.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render ───
   render() {
-    const e = this.caption || this._hasCaptionSlot;
+    const t = this.caption || this._hasCaptionSlot;
     return n`
       <div class="table-wrapper">
         <!-- role="table" is required: sub-components use display:contents which can confuse assistive technology in Shadow DOM -->
-        <table part="table" role="table" aria-label=${this.label || g}>
-          ${e ? n`<caption part="caption">
+        <table part="table" role="table" aria-label=${this.label || m}>
+          ${t ? n`<caption part="caption">
                 <slot name="caption" @slotchange=${this._onCaptionSlotChange}>${this.caption}</slot>
-              </caption>` : g}
+              </caption>` : m}
           <slot></slot>
         </table>
       </div>
     `;
   }
 };
-h.styles = [P, O];
-x([
+h.styles = [M, T];
+v([
   l({ type: String })
 ], h.prototype, "label", 2);
-x([
+v([
   l({ type: String })
 ], h.prototype, "caption", 2);
-x([
+v([
   l({ type: String, reflect: !0 })
 ], h.prototype, "variant", 2);
-x([
+v([
   l({ type: Boolean, reflect: !0, attribute: "sticky-header" })
 ], h.prototype, "stickyHeader", 2);
-x([
+v([
   l({ type: Boolean, reflect: !0, attribute: "full-width" })
 ], h.prototype, "fullWidth", 2);
-x([
+v([
   D()
 ], h.prototype, "_hasCaptionSlot", 2);
-h = x([
+h = v([
   b("hx-table")
 ], h);
-var T = Object.getOwnPropertyDescriptor, B = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? T(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = s(t) || t);
-  return t;
+var E = Object.getOwnPropertyDescriptor, N = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? E(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = a(e) || e);
+  return e;
 };
-let w = class extends v {
+let S = class extends u {
   render() {
     return n`<thead part="thead" role="rowgroup">
       <slot></slot>
     </thead>`;
   }
 };
-w.styles = [$];
-w = B([
+S.styles = [L];
+S = N([
   b("hx-thead")
-], w);
-var z = Object.getOwnPropertyDescriptor, M = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? z(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = s(t) || t);
-  return t;
+], S);
+var j = Object.getOwnPropertyDescriptor, k = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? j(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = a(e) || e);
+  return e;
 };
-let _ = class extends v {
+let C = class extends u {
   render() {
     return n`<tbody part="tbody" role="rowgroup">
       <slot></slot>
     </tbody>`;
   }
 };
-_.styles = [
-  d`
+C.styles = [
+  p`
       :host {
         display: contents;
       }
@@ -238,49 +240,76 @@ _.styles = [
       }
     `
 ];
-_ = M([
+C = k([
   b("hx-tbody")
-], _);
-var A = Object.getOwnPropertyDescriptor, E = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? A(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = s(t) || t);
-  return t;
+], C);
+var z = Object.getOwnPropertyDescriptor, W = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? z(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = a(e) || e);
+  return e;
 };
-let S = class extends v {
+let I = class extends u {
   render() {
     return n`<tfoot part="tfoot" role="rowgroup">
       <slot></slot>
     </tfoot>`;
   }
 };
-S.styles = [$];
-S = E([
+I.styles = [L];
+I = W([
   b("hx-tfoot")
-], S);
-var L = Object.defineProperty, N = Object.getOwnPropertyDescriptor, C = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? N(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && L(r, i, t), t;
+], I);
+var F = Object.defineProperty, U = Object.getOwnPropertyDescriptor, H = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? U(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = (o ? a(r, i, e) : a(e)) || e);
+  return o && e && F(r, i, e), e;
 };
-let y = class extends v {
+let g = class extends u {
   constructor() {
-    super(...arguments), this.selected = !1, this.disabled = !1;
+    super(...arguments), this.selected = !1, this.disabled = !1, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.constructor;
+    this._supportsIdrefRefs = t.__testSupportsIdrefRefsOverride !== null ? t.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
+  }
+  updated(t) {
+    super.updated(t), (t.has("selected") || t.has("disabled")) && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var a;
+    const t = this._internals;
+    this._supportsIdrefRefs ? (t.role = "row", t.ariaSelected = this.selected ? "true" : null, t.ariaDisabled = this.disabled ? "true" : null) : (t.role = null, t.ariaLabel = null, t.ariaSelected = null, t.ariaDisabled = null);
+    const r = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", i = this.getAttribute("aria-labelledby"), o = R(this, i), e = o.length > 0;
+    if (this._supportsIdrefRefs) {
+      const f = t;
+      f.ariaLabelledByElements = e ? o : null;
+    }
+    let s = "";
+    e ? (s = o.map((w) => A(w)).filter(Boolean).join(" ") || r || "", this._supportsIdrefRefs && (t.ariaLabel = null)) : r ? (s = r, this._supportsIdrefRefs && (t.ariaLabel = r)) : (s = "", this._supportsIdrefRefs && (t.ariaLabel = null)), this._resolvedAccessibleName !== s && (this._resolvedAccessibleName = s, this._supportsIdrefRefs || this.requestUpdate());
   }
   render() {
     return n`
       <tr
         part="row"
         role="row"
-        aria-selected=${this.selected ? "true" : g}
-        aria-disabled=${this.disabled ? "true" : g}
+        aria-selected=${this.selected ? "true" : m}
+        aria-disabled=${this.disabled ? "true" : m}
       >
         <slot></slot>
       </tr>
     `;
   }
 };
-y.styles = [
-  d`
+g.styles = [
+  p`
       :host {
         display: contents;
       }
@@ -310,33 +339,69 @@ y.styles = [
       }
     `
 ];
-C([
+g.__testSupportsIdrefRefsOverride = null;
+H([
   l({ type: Boolean, reflect: !0 })
-], y.prototype, "selected", 2);
-C([
+], g.prototype, "selected", 2);
+H([
   l({ type: Boolean, reflect: !0 })
-], y.prototype, "disabled", 2);
-y = C([
+], g.prototype, "disabled", 2);
+g = H([
   b("hx-tr")
-], y);
-var W = Object.defineProperty, F = Object.getOwnPropertyDescriptor, f = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? F(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && W(r, i, t), t;
+], g);
+var q = Object.defineProperty, V = Object.getOwnPropertyDescriptor, x = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? V(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = (o ? a(r, i, e) : a(e)) || e);
+  return o && e && q(r, i, e), e;
 };
-let c = class extends v {
+let c = class extends u {
   constructor() {
-    super(...arguments), this.sortable = !1, this.sortDirection = "none", this.scope = "col", this.colspan = 0, this.rowspan = 0;
+    super(...arguments), this.sortable = !1, this.sortDirection = "none", this.scope = "col", this.colspan = 0, this.rowspan = 0, this._slotText = "", this._supportsIdrefRefs = !0, this._ariaMirror = null;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.constructor;
+    this._supportsIdrefRefs = t.__testSupportsIdrefRefsOverride !== null ? t.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
+  }
+  updated(t) {
+    super.updated(t), (t.has("sortable") || t.has("sortDirection")) && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _onSlotChange(t) {
+    const i = t.target.assignedNodes({ flatten: !0 });
+    let o = "";
+    for (const e of i)
+      e.nodeType === Node.TEXT_NODE ? o += e.textContent ?? "" : e.nodeType === Node.ELEMENT_NODE && (o += A(e));
+    this._slotText = o.replace(/\s+/g, " ").trim();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var a;
+    const t = this._internals, r = this._ariaSortValue();
+    this._supportsIdrefRefs ? (t.role = "columnheader", t.ariaSort = r) : (t.role = null, t.ariaSort = null, t.ariaLabel = null);
+    const i = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", o = this.getAttribute("aria-labelledby"), e = R(this, o), s = e.length > 0;
+    if (this._supportsIdrefRefs) {
+      const f = t;
+      f.ariaLabelledByElements = s ? e : null;
+    }
+    s ? this._supportsIdrefRefs && (t.ariaLabel = null) : i ? this._supportsIdrefRefs && (t.ariaLabel = i) : this._supportsIdrefRefs && (t.ariaLabel = null);
   }
   // ─── Event Handlers ───
   /** @internal */
   _handleSort() {
-    const e = this.sortDirection === "asc" ? "desc" : "asc";
-    this.sortDirection = e, this.dispatchEvent(
+    const t = this.sortDirection === "asc" ? "desc" : "asc";
+    this.sortDirection = t, this.dispatchEvent(
       new CustomEvent("hx-sort", {
         bubbles: !0,
         composed: !0,
-        detail: { direction: e }
+        detail: { direction: t }
       })
     );
   }
@@ -363,12 +428,27 @@ let c = class extends v {
     `;
   }
   /** @internal */
-  _ariaSort() {
-    return this.sortable ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : g;
+  _ariaSortValue() {
+    return this.sortable ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : null;
   }
   /** @internal */
+  _ariaSortAttr() {
+    const t = this._ariaSortValue();
+    return t === null ? m : t;
+  }
+  /**
+   * Build the sort button's aria-label. Includes the slotted column text
+   * when available so a blind user pressing Tab through 5 sortable columns
+   * hears "Sort by Patient name, currently sorted ascending" instead of
+   * just "Sort. Sort. Sort." (audit B-A2-style label disambiguation).
+   * Promoted to `protected` so subclasses can override the i18n surface
+   * without re-implementing the full sort cycle.
+   * @internal
+   */
   _sortLabel() {
-    return this.sortDirection === "asc" ? "Sort descending" : this.sortDirection === "desc" ? "Sort ascending" : "Sort";
+    const t = this._slotText;
+    let r;
+    return this.sortDirection === "asc" ? r = "Sort descending" : this.sortDirection === "desc" ? r = "Sort ascending" : r = "Sort", t ? this.sortDirection === "asc" ? `Sort ${t} descending` : this.sortDirection === "desc" ? `Sort ${t} ascending` : `Sort by ${t}` : r;
   }
   render() {
     return n`
@@ -376,22 +456,22 @@ let c = class extends v {
         part="header"
         role="columnheader"
         scope=${this.scope}
-        colspan=${u(this.colspan > 0 ? this.colspan : void 0)}
-        rowspan=${u(this.rowspan > 0 ? this.rowspan : void 0)}
-        aria-sort=${this._ariaSort()}
+        colspan=${_(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${_(this.rowspan > 0 ? this.rowspan : void 0)}
+        aria-sort=${this._ariaSortAttr()}
       >
         ${this.sortable ? n`
               <button class="sort-btn" @click=${this._handleSort} aria-label=${this._sortLabel()}>
-                <slot></slot>
+                <slot @slotchange=${this._onSlotChange}></slot>
                 ${this._renderSortIcon()}
               </button>
-            ` : n`<slot></slot>`}
+            ` : n`<slot @slotchange=${this._onSlotChange}></slot>`}
       </th>
     `;
   }
 };
 c.styles = [
-  d`
+  p`
       :host {
         display: contents;
       }
@@ -471,6 +551,24 @@ c.styles = [
         }
       }
 
+      /* ─── Forced Colors (Windows High Contrast) ─── */
+
+      @media (forced-colors: active) {
+        th {
+          border-bottom-color: CanvasText;
+        }
+
+        .sort-btn:focus-visible {
+          outline: 2px solid Highlight;
+          outline-offset: var(--hx-focus-ring-offset, 2px);
+        }
+
+        .sort-icon--active {
+          forced-color-adjust: none;
+          color: Highlight;
+        }
+      }
+
       /* ─── Mobile card layout ─── */
 
       @media (max-width: 768px) {
@@ -495,49 +593,81 @@ c.styles = [
       }
     `
 ];
-f([
+c.__testSupportsIdrefRefsOverride = null;
+x([
   l({ type: Boolean, reflect: !0 })
 ], c.prototype, "sortable", 2);
-f([
+x([
   l({ type: String, reflect: !0, attribute: "sort-direction" })
 ], c.prototype, "sortDirection", 2);
-f([
+x([
   l({ type: String })
 ], c.prototype, "scope", 2);
-f([
+x([
   l({ type: Number })
 ], c.prototype, "colspan", 2);
-f([
+x([
   l({ type: Number })
 ], c.prototype, "rowspan", 2);
-c = f([
+x([
+  D()
+], c.prototype, "_slotText", 2);
+c = x([
   b("hx-th")
 ], c);
-var I = Object.defineProperty, R = Object.getOwnPropertyDescriptor, m = (e, r, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? R(r, i) : r, a = e.length - 1, s; a >= 0; a--)
-    (s = e[a]) && (t = (o ? s(r, i, t) : s(t)) || t);
-  return o && t && I(r, i, t), t;
+var G = Object.defineProperty, X = Object.getOwnPropertyDescriptor, y = (t, r, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? X(r, i) : r, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (e = (o ? a(r, i, e) : a(e)) || e);
+  return o && e && G(r, i, e), e;
 };
-let p = class extends v {
+let d = class extends u {
   constructor() {
-    super(...arguments), this.align = "left", this.colspan = 0, this.rowspan = 0, this.label = "";
+    super(...arguments), this.align = "left", this.colspan = 0, this.rowspan = 0, this.label = "", this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.constructor;
+    this._supportsIdrefRefs = t.__testSupportsIdrefRefsOverride !== null ? t.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ariaMirror) == null || t.disconnect(), this._ariaMirror = null;
+  }
+  updated(t) {
+    super.updated(t), t.has("label") && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var a;
+    const t = this._internals;
+    this._supportsIdrefRefs ? t.role = "cell" : (t.role = null, t.ariaLabel = null);
+    const r = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", i = this.getAttribute("aria-labelledby"), o = R(this, i), e = o.length > 0;
+    if (this._supportsIdrefRefs) {
+      const f = t;
+      f.ariaLabelledByElements = e ? o : null;
+    }
+    let s = "";
+    e ? (s = o.map((w) => A(w)).filter(Boolean).join(" ") || r || this.label || "", this._supportsIdrefRefs && (t.ariaLabel = null)) : r ? (s = r, this._supportsIdrefRefs && (t.ariaLabel = r)) : this.label ? (s = this.label, this._supportsIdrefRefs && (t.ariaLabel = this.label)) : (s = "", this._supportsIdrefRefs && (t.ariaLabel = null)), this._resolvedAccessibleName !== s && (this._resolvedAccessibleName = s, this._supportsIdrefRefs || this.requestUpdate());
   }
   render() {
     return n`
       <td
         part="cell"
         role="cell"
-        data-label=${u(this.label || void 0)}
-        colspan=${u(this.colspan > 0 ? this.colspan : void 0)}
-        rowspan=${u(this.rowspan > 0 ? this.rowspan : void 0)}
+        aria-label=${_(this.label || void 0)}
+        data-label=${_(this.label || void 0)}
+        colspan=${_(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${_(this.rowspan > 0 ? this.rowspan : void 0)}
       >
         <slot></slot>
       </td>
     `;
   }
 };
-p.styles = [
-  d`
+d.styles = [
+  p`
       :host {
         display: contents;
       }
@@ -566,6 +696,19 @@ p.styles = [
         border-radius: var(--hx-border-radius-sm, 2px);
       }
 
+      /* ─── Forced Colors (Windows High Contrast) ─── */
+
+      @media (forced-colors: active) {
+        td {
+          border-bottom-color: CanvasText;
+        }
+
+        td:focus-visible {
+          outline: 2px solid Highlight;
+          outline-offset: var(--hx-focus-ring-offset, -2px);
+        }
+      }
+
       /* ─── Mobile card layout ─── */
 
       @media (max-width: 768px) {
@@ -590,28 +733,29 @@ p.styles = [
       }
     `
 ];
-m([
+d.__testSupportsIdrefRefsOverride = null;
+y([
   l({ type: String, reflect: !0 })
-], p.prototype, "align", 2);
-m([
+], d.prototype, "align", 2);
+y([
   l({ type: Number })
-], p.prototype, "colspan", 2);
-m([
+], d.prototype, "colspan", 2);
+y([
   l({ type: Number })
-], p.prototype, "rowspan", 2);
-m([
+], d.prototype, "rowspan", 2);
+y([
   l({ type: String, attribute: "label" })
-], p.prototype, "label", 2);
-p = m([
+], d.prototype, "label", 2);
+d = y([
   b("hx-td")
-], p);
+], d);
 export {
   h as H,
-  _ as a,
-  p as b,
-  S as c,
-  w as d,
+  C as a,
+  d as b,
+  I as c,
+  S as d,
   c as e,
-  y as f
+  g as f
 };
-//# sourceMappingURL=hx-td-DnnEMIuA.js.map
+//# sourceMappingURL=hx-td-BGkFOJEK.js.map