@helixui/library 3.3.1 → 3.4.0-next.123

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

@@ -1,9 +1,11 @@
-import { css as d, nothing as g, html as n } from "lit";
+import { css as f, nothing as y, 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 N } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+import { s as $, i as O, r as H } from "./aria-idref-DCuEaknC.js";
+import { f as S } from "./aria-flatten-DY6v2vah.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+const B = f`
   :host {
     display: block;
     overflow-x: auto;
@@ -117,27 +119,27 @@ const P = d`
     }
   }
 `;
-d`
+f`
   :host {
     display: contents;
   }
 `;
-d`
+f`
   :host {
     display: contents;
   }
 `;
-const $ = d`
+const L = f`
   :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 M = Object.defineProperty, P = Object.getOwnPropertyDescriptor, v = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? P(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = (o ? a(r, i, t) : a(t)) || t);
+  return o && t && M(r, i, t), t;
 };
-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;
   }
@@ -162,68 +164,68 @@ let h = class extends v {
     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}>
+        <table part="table" role="table" aria-label=${this.label || y}>
           ${e ? n`<caption part="caption">
                 <slot name="caption" @slotchange=${this._onCaptionSlotChange}>${this.caption}</slot>
-              </caption>` : g}
+              </caption>` : y}
           <slot></slot>
         </table>
       </div>
     `;
   }
 };
-h.styles = [P, O];
-x([
+h.styles = [B, N];
+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);
+var E = Object.getOwnPropertyDescriptor, j = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? E(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = a(t) || t);
   return t;
 };
-let w = class extends v {
+let C = class extends u {
   render() {
     return n`<thead part="thead" role="rowgroup">
       <slot></slot>
     </thead>`;
   }
 };
-w.styles = [$];
-w = B([
+C.styles = [L];
+C = j([
   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);
+], C);
+var k = Object.getOwnPropertyDescriptor, z = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? k(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = a(t) || t);
   return t;
 };
-let _ = class extends v {
+let A = class extends u {
   render() {
     return n`<tbody part="tbody" role="rowgroup">
       <slot></slot>
     </tbody>`;
   }
 };
-_.styles = [
-  d`
+A.styles = [
+  f`
       :host {
         display: contents;
       }
@@ -238,49 +240,76 @@ _.styles = [
       }
     `
 ];
-_ = M([
+A = z([
   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);
+], A);
+var U = Object.getOwnPropertyDescriptor, W = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? U(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = a(t) || t);
   return t;
 };
-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, q = Object.getOwnPropertyDescriptor, R = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? q(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = (o ? a(r, i, t) : a(t)) || t);
+  return o && t && F(r, i, t), t;
 };
-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 e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("selected") || e.has("disabled")) && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var a;
+    const e = this._internals;
+    this._supportsIdrefRefs ? (e.role = "row", e.ariaSelected = this.selected ? "true" : null, e.ariaDisabled = this.disabled ? "true" : null) : (e.role = null, e.ariaLabel = null, e.ariaSelected = null, e.ariaDisabled = null);
+    const r = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", i = this.getAttribute("aria-labelledby"), o = H(this, i), t = o.length > 0;
+    if (this._supportsIdrefRefs) {
+      const d = e;
+      d.ariaLabelledByElements = t ? o : null;
+    }
+    let s = "";
+    t ? (s = o.map((_) => S(_)).filter(Boolean).join(" ") || r || "", this._supportsIdrefRefs && (e.ariaLabel = null)) : r ? (s = r, this._supportsIdrefRefs && (e.ariaLabel = r)) : (s = "", this._supportsIdrefRefs && (e.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" : y}
+        aria-disabled=${this.disabled ? "true" : y}
       >
         <slot></slot>
       </tr>
     `;
   }
 };
-y.styles = [
-  d`
+g.styles = [
+  f`
       :host {
         display: contents;
       }
@@ -310,23 +339,61 @@ y.styles = [
       }
     `
 ];
-C([
+g.__testSupportsIdrefRefsOverride = null;
+R([
   l({ type: Boolean, reflect: !0 })
-], y.prototype, "selected", 2);
-C([
+], g.prototype, "selected", 2);
+R([
   l({ type: Boolean, reflect: !0 })
-], y.prototype, "disabled", 2);
-y = C([
+], g.prototype, "disabled", 2);
+g = R([
   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 V = Object.defineProperty, G = Object.getOwnPropertyDescriptor, x = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? G(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = (o ? a(r, i, t) : a(t)) || t);
+  return o && t && V(r, i, t), t;
 };
-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, this._resolvedAccessibleName = "";
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("sortable") || e.has("sortDirection")) && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _onSlotChange(e) {
+    const i = e.target.assignedNodes({ flatten: !0 });
+    let o = "";
+    for (const s of i)
+      s.nodeType === Node.TEXT_NODE ? o += s.textContent ?? "" : s.nodeType === Node.ELEMENT_NODE && (o += S(s));
+    const t = o.replace(/\s+/g, " ").trim();
+    t !== this._slotText && (this._slotText = t, this._syncHostAriaSemantics());
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var d;
+    const e = this._internals, r = this._ariaSortValue();
+    this._supportsIdrefRefs ? (e.role = "columnheader", e.ariaSort = r) : (e.role = null, e.ariaSort = null, e.ariaLabel = null);
+    const i = ((d = this.getAttribute("aria-label")) == null ? void 0 : d.trim()) || "", o = this.getAttribute("aria-labelledby"), t = H(this, o), s = t.length > 0;
+    if (this._supportsIdrefRefs) {
+      const _ = e;
+      _.ariaLabelledByElements = s ? t : null;
+    }
+    let a = "";
+    s ? (a = t.map((T) => S(T)).filter(Boolean).join(" ") || i || this._slotText, this._supportsIdrefRefs && (e.ariaLabel = null)) : i ? (a = i, this._supportsIdrefRefs && (e.ariaLabel = i)) : (a = this._slotText, this._supportsIdrefRefs && (e.ariaLabel = null)), this._resolvedAccessibleName !== a && (this._resolvedAccessibleName = a, this.requestUpdate());
   }
   // ─── Event Handlers ───
   /** @internal */
@@ -363,12 +430,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 e = this._ariaSortValue();
+    return e === null ? y : e;
+  }
+  /**
+   * 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 e = this._resolvedAccessibleName || this._slotText;
+    let r;
+    return this.sortDirection === "asc" ? r = "Sort descending" : this.sortDirection === "desc" ? r = "Sort ascending" : r = "Sort", e ? this.sortDirection === "asc" ? `Sort ${e} descending` : this.sortDirection === "desc" ? `Sort ${e} ascending` : `Sort by ${e}` : r;
   }
   render() {
     return n`
@@ -376,22 +458,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=${m(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${m(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`
+  f`
       :host {
         display: contents;
       }
@@ -471,6 +553,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,41 +595,74 @@ 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 X = Object.defineProperty, J = Object.getOwnPropertyDescriptor, w = (e, r, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? J(r, i) : r, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (t = (o ? a(r, i, t) : a(t)) || t);
+  return o && t && X(r, i, t), t;
 };
-let p = class extends v {
+let p = 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 e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : $(this._internals), this._syncHostAriaSemantics(), this._ariaMirror = O(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), e.has("label") && this._syncHostAriaSemantics();
+  }
+  /** @internal */
+  _syncHostAriaSemantics() {
+    var a;
+    const e = this._internals;
+    this._supportsIdrefRefs ? e.role = "cell" : (e.role = null, e.ariaLabel = null);
+    const r = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", i = this.getAttribute("aria-labelledby"), o = H(this, i), t = o.length > 0;
+    if (this._supportsIdrefRefs) {
+      const d = e;
+      d.ariaLabelledByElements = t ? o : null;
+    }
+    let s = "";
+    t ? (s = o.map((_) => S(_)).filter(Boolean).join(" ") || r || this.label || "", this._supportsIdrefRefs && (e.ariaLabel = null)) : r ? (s = r, this._supportsIdrefRefs && (e.ariaLabel = r)) : this.label ? (s = this.label, this._supportsIdrefRefs && (e.ariaLabel = this.label)) : (s = "", this._supportsIdrefRefs && (e.ariaLabel = null)), this._resolvedAccessibleName !== s && (this._resolvedAccessibleName = s, this.requestUpdate());
   }
   render() {
+    const e = this._resolvedAccessibleName || this.label || void 0;
     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=${m(e)}
+        data-label=${m(this.label || void 0)}
+        colspan=${m(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${m(this.rowspan > 0 ? this.rowspan : void 0)}
       >
         <slot></slot>
       </td>
@@ -537,7 +670,7 @@ let p = class extends v {
   }
 };
 p.styles = [
-  d`
+  f`
       :host {
         display: contents;
       }
@@ -566,6 +699,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 +736,29 @@ p.styles = [
       }
     `
 ];
-m([
+p.__testSupportsIdrefRefsOverride = null;
+w([
   l({ type: String, reflect: !0 })
 ], p.prototype, "align", 2);
-m([
+w([
   l({ type: Number })
 ], p.prototype, "colspan", 2);
-m([
+w([
   l({ type: Number })
 ], p.prototype, "rowspan", 2);
-m([
+w([
   l({ type: String, attribute: "label" })
 ], p.prototype, "label", 2);
-p = m([
+p = w([
   b("hx-td")
 ], p);
 export {
   h as H,
-  _ as a,
+  A as a,
   p as b,
-  S as c,
-  w as d,
+  I as c,
+  C as d,
   c as e,
-  y as f
+  g as f
 };
-//# sourceMappingURL=hx-td-DnnEMIuA.js.map
+//# sourceMappingURL=hx-td-BPsb6OaG.js.map