@helixui/library 0.3.3 → 1.0.0

package/dist/shared/hx-td-CVwCGBYf.js

@@ -0,0 +1,604 @@
+import { css as d, LitElement as b, nothing as g, html as n } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+import { tokenStyles as O } from "@helixui/tokens/lit";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+const P = d`
+  :host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Scroll Wrapper ─── */
+
+  .table-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  /* ─── Table ─── */
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  :host([full-width]) table {
+    width: 100%;
+  }
+
+  /* ─── Caption ─── */
+
+  caption {
+    caption-side: top;
+    text-align: left;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+    font-size: var(--hx-font-size-base, 1rem);
+  }
+
+  /* ─── Slotted sub-component styling ─── */
+
+  /*
+   * ::slotted() only matches DIRECT slot assignees. hx-table's direct
+   * slot children are hx-thead, hx-tbody, and hx-tfoot — never hx-tr,
+   * hx-th, or hx-td. CSS custom properties inherit through shadow DOM
+   * boundaries, so variables set on section elements cascade to their
+   * slotted row and cell descendants automatically.
+   */
+
+  /* Header background via CSS vars that cascade through display:contents */
+  ::slotted(hx-thead) {
+    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */
+  :host([variant='striped']) ::slotted(hx-tbody) {
+    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Hover variant: set hover bg variable on direct slotted section elements */
+  :host([variant='hover']) ::slotted(hx-tbody),
+  :host([variant='hover']) ::slotted(hx-thead),
+  :host([variant='striped']) ::slotted(hx-tbody),
+  :host([variant='striped']) ::slotted(hx-thead),
+  :host([variant='default']) ::slotted(hx-tbody),
+  :host([variant='default']) ::slotted(hx-thead) {
+    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* Compact variant: reduced padding signal set on section elements that cascade to cells */
+  :host([variant='compact']) ::slotted(hx-thead),
+  :host([variant='compact']) ::slotted(hx-tbody),
+  :host([variant='compact']) ::slotted(hx-tfoot) {
+    --_hx-table-cell-padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Sticky Header ─── */
+
+  :host([sticky-header]) ::slotted(hx-thead) {
+    --_hx-table-th-position: sticky;
+    --_hx-table-th-top: 0;
+    --_hx-table-th-z-index: 1;
+    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+  }
+
+  /* ─── Focus ─── */
+
+  ::slotted(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, -2px);
+  }
+
+  /* ─── Dark Mode ─── */
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --hx-table-border-color: var(--hx-color-neutral-700, #334155);
+      --hx-table-header-bg: var(--hx-color-neutral-800, #1e293b);
+      --hx-table-header-color: var(--hx-color-neutral-200, #e2e8f0);
+      --hx-table-cell-color: var(--hx-color-neutral-100, #f1f5f9);
+      --hx-table-row-hover-bg: var(--hx-color-neutral-700, #334155);
+      --hx-table-stripe-bg: var(--hx-color-neutral-800, #1e293b);
+    }
+  }
+
+  /* ─── Responsive Mobile Card Layout ─── */
+
+  @media (max-width: 768px) {
+    .table-wrapper {
+      overflow-x: visible;
+    }
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    ::slotted(*) {
+      transition: none !important;
+    }
+  }
+`;
+d`
+  :host {
+    display: contents;
+  }
+`;
+d`
+  :host {
+    display: contents;
+  }
+`;
+const D = d`
+  :host {
+    display: contents;
+  }
+`;
+var C = Object.defineProperty, H = Object.getOwnPropertyDescriptor, x = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? H(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = (o ? s(e, l, t) : s(t)) || t);
+  return o && t && C(e, l, t), t;
+};
+let h = class extends b {
+  constructor() {
+    super(...arguments), this.label = "", this.caption = "", this.variant = "default", this.stickyHeader = !1, this.fullWidth = !0;
+  }
+  // ─── Lifecycle ───
+  willUpdate(r) {
+    r.has("label") && !this.label && r.get("label");
+  }
+  // ─── Render ───
+  render() {
+    const r = this.caption || this.querySelector('[slot="caption"]') !== null;
+    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}>
+          ${r ? n`<caption part="caption">
+                <slot name="caption">${this.caption}</slot>
+              </caption>` : g}
+          <slot></slot>
+        </table>
+      </div>
+    `;
+  }
+};
+h.styles = [O, P];
+x([
+  i({ type: String })
+], h.prototype, "label", 2);
+x([
+  i({ type: String })
+], h.prototype, "caption", 2);
+x([
+  i({ type: String, reflect: !0 })
+], h.prototype, "variant", 2);
+x([
+  i({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], h.prototype, "stickyHeader", 2);
+x([
+  i({ type: Boolean, reflect: !0, attribute: "full-width" })
+], h.prototype, "fullWidth", 2);
+h = x([
+  v("hx-table")
+], h);
+var j = Object.getOwnPropertyDescriptor, T = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? j(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = s(t) || t);
+  return t;
+};
+let w = class extends b {
+  render() {
+    return n`<thead part="thead" role="rowgroup">
+      <slot></slot>
+    </thead>`;
+  }
+};
+w.styles = [D];
+w = T([
+  v("hx-thead")
+], w);
+var B = Object.getOwnPropertyDescriptor, z = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? B(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = s(t) || t);
+  return t;
+};
+let _ = class extends b {
+  render() {
+    return n`<tbody part="tbody" role="rowgroup">
+      <slot></slot>
+    </tbody>`;
+  }
+};
+_.styles = [
+  d`
+      :host {
+        display: contents;
+      }
+
+      /*
+       * Striped rows: only applies when the parent hx-table sets
+       * --_hx-table-row-stripe-bg (via variant="striped"). Falls back
+       * to transparent so non-striped variants are unaffected.
+       */
+      ::slotted(hx-tr:nth-child(even)) {
+        --_hx-table-row-bg: var(--_hx-table-row-stripe-bg, transparent);
+      }
+    `
+];
+_ = z([
+  v("hx-tbody")
+], _);
+var M = Object.getOwnPropertyDescriptor, L = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? M(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = s(t) || t);
+  return t;
+};
+let S = class extends b {
+  render() {
+    return n`<tfoot part="tfoot" role="rowgroup">
+      <slot></slot>
+    </tfoot>`;
+  }
+};
+S.styles = [D];
+S = L([
+  v("hx-tfoot")
+], S);
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, $ = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? E(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = (o ? s(e, l, t) : s(t)) || t);
+  return o && t && A(e, l, t), t;
+};
+let y = class extends b {
+  constructor() {
+    super(...arguments), this.selected = !1, this.disabled = !1;
+  }
+  render() {
+    return n`
+      <tr
+        part="row"
+        role="row"
+        aria-selected=${this.selected ? "true" : g}
+        aria-disabled=${this.disabled ? "true" : g}
+      >
+        <slot></slot>
+      </tr>
+    `;
+  }
+};
+y.styles = [
+  d`
+      :host {
+        display: contents;
+      }
+
+      tr {
+        background-color: var(--_hx-table-row-bg, transparent);
+        transition: background-color var(--hx-transition-fast, 150ms ease);
+      }
+
+      tr:hover {
+        background-color: var(--_hx-table-row-hover-bg, var(--hx-table-row-hover-bg, transparent));
+      }
+
+      :host([selected]) tr {
+        background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+      }
+
+      :host([disabled]) tr {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        tr {
+          transition: none;
+        }
+      }
+    `
+];
+$([
+  i({ type: Boolean, reflect: !0 })
+], y.prototype, "selected", 2);
+$([
+  i({ type: Boolean, reflect: !0 })
+], y.prototype, "disabled", 2);
+y = $([
+  v("hx-tr")
+], y);
+var I = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? N(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = (o ? s(e, l, t) : s(t)) || t);
+  return o && t && I(e, l, t), t;
+};
+let c = class extends b {
+  constructor() {
+    super(...arguments), this.sortable = !1, this.sortDirection = "none", this.scope = "col", this.colspan = 0, this.rowspan = 0;
+  }
+  // ─── Event Handlers ───
+  _handleSort() {
+    const r = this.sortDirection === "asc" ? "desc" : "asc";
+    this.sortDirection = r, this.dispatchEvent(
+      new CustomEvent("hx-sort", {
+        bubbles: !0,
+        composed: !0,
+        detail: { direction: r }
+      })
+    );
+  }
+  // ─── Render Helpers ───
+  _renderSortIcon() {
+    const e = [
+      "sort-icon",
+      this.sortDirection !== "none" ? "sort-icon--active" : "",
+      this.sortDirection === "desc" ? "sort-icon--desc" : ""
+    ].filter(Boolean).join(" ");
+    return n`
+      <span part="sort-icon" class=${e} aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          width="16"
+          height="16"
+        >
+          <path d="M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z" fill-rule="evenodd" />
+        </svg>
+      </span>
+    `;
+  }
+  _ariaSort() {
+    return this.sortable ? this.sortDirection === "asc" ? "ascending" : this.sortDirection === "desc" ? "descending" : "none" : g;
+  }
+  _sortLabel() {
+    return this.sortDirection === "asc" ? "Sort descending" : this.sortDirection === "desc" ? "Sort ascending" : "Sort";
+  }
+  render() {
+    return n`
+      <th
+        part="header"
+        role="columnheader"
+        scope=${this.scope}
+        colspan=${f(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${f(this.rowspan > 0 ? this.rowspan : void 0)}
+        aria-sort=${this._ariaSort()}
+      >
+        ${this.sortable ? n`
+              <button class="sort-btn" @click=${this._handleSort} aria-label=${this._sortLabel()}>
+                <slot></slot>
+                ${this._renderSortIcon()}
+              </button>
+            ` : n`<slot></slot>`}
+      </th>
+    `;
+  }
+};
+c.styles = [
+  d`
+      :host {
+        display: contents;
+      }
+
+      th {
+        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
+        text-align: left;
+        font-weight: var(--hx-font-weight-semibold, 600);
+        color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+        background-color: var(
+          --_hx-table-cell-bg,
+          var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc))
+        );
+        border-bottom: var(--hx-border-width-thin, 1px) solid
+          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+        white-space: nowrap;
+        vertical-align: middle;
+        position: var(--_hx-table-th-position, static);
+        top: var(--_hx-table-th-top, auto);
+        z-index: var(--_hx-table-th-z-index, auto);
+      }
+
+      :host([sortable]) th {
+        cursor: pointer;
+      }
+
+      /* ─── Sort Button ─── */
+
+      .sort-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--hx-space-1, 0.25rem);
+        background: none;
+        border: none;
+        padding: 0;
+        font: inherit;
+        font-weight: inherit;
+        color: inherit;
+        cursor: pointer;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      .sort-btn:focus-visible {
+        outline: var(--hx-focus-ring-width, 2px) solid
+          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+        outline-offset: var(--hx-focus-ring-offset, 2px);
+        border-radius: var(--hx-border-radius-sm, 2px);
+      }
+
+      /* ─── Sort Icon ─── */
+
+      .sort-icon {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+        opacity: 0.4;
+        transition:
+          opacity var(--hx-transition-fast, 150ms ease),
+          transform var(--hx-transition-fast, 150ms ease);
+      }
+
+      .sort-icon--active {
+        opacity: 1;
+        color: var(--hx-color-primary-500, #2563eb);
+      }
+
+      .sort-icon--desc {
+        transform: rotate(180deg);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .sort-icon {
+          transition: none;
+        }
+      }
+
+      /* ─── Mobile card layout ─── */
+
+      @media (max-width: 768px) {
+        /*
+         * Visually hide the header cell on mobile while keeping it in the
+         * accessibility tree. Screen readers can then associate column
+         * headers with data cells via the semantic table structure
+         * (scope="col", role="columnheader"), satisfying WCAG 2.1 AA.
+         * Using display:none would remove headers from the a11y tree entirely.
+         */
+        th {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          white-space: nowrap;
+          border: 0;
+        }
+      }
+    `
+];
+u([
+  i({ type: Boolean, reflect: !0 })
+], c.prototype, "sortable", 2);
+u([
+  i({ type: String, reflect: !0, attribute: "sort-direction" })
+], c.prototype, "sortDirection", 2);
+u([
+  i({ type: String })
+], c.prototype, "scope", 2);
+u([
+  i({ type: Number })
+], c.prototype, "colspan", 2);
+u([
+  i({ type: Number })
+], c.prototype, "rowspan", 2);
+c = u([
+  v("hx-th")
+], c);
+var R = Object.defineProperty, W = Object.getOwnPropertyDescriptor, m = (r, e, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? W(e, l) : e, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (t = (o ? s(e, l, t) : s(t)) || t);
+  return o && t && R(e, l, t), t;
+};
+let p = class extends b {
+  constructor() {
+    super(...arguments), this.align = "left", this.colspan = 0, this.rowspan = 0, this.label = "";
+  }
+  render() {
+    return n`
+      <td
+        part="cell"
+        role="cell"
+        data-label=${f(this.label || void 0)}
+        colspan=${f(this.colspan > 0 ? this.colspan : void 0)}
+        rowspan=${f(this.rowspan > 0 ? this.rowspan : void 0)}
+      >
+        <slot></slot>
+      </td>
+    `;
+  }
+};
+p.styles = [
+  d`
+      :host {
+        display: contents;
+      }
+
+      td {
+        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
+        text-align: left;
+        color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+        border-bottom: var(--hx-border-width-thin, 1px) solid
+          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+        vertical-align: middle;
+      }
+
+      :host([align='center']) td {
+        text-align: center;
+      }
+
+      :host([align='right']) td {
+        text-align: right;
+      }
+
+      td:focus-visible {
+        outline: var(--hx-focus-ring-width, 2px) solid
+          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+        outline-offset: var(--hx-focus-ring-offset, -2px);
+        border-radius: var(--hx-border-radius-sm, 2px);
+      }
+
+      /* ─── Mobile card layout ─── */
+
+      @media (max-width: 768px) {
+        :host {
+          display: block;
+        }
+
+        td {
+          display: block;
+          text-align: right;
+          padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+          border-bottom: none;
+          position: relative;
+        }
+
+        td::before {
+          content: attr(data-label);
+          font-weight: var(--hx-font-weight-semibold, 600);
+          float: left;
+          color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));
+        }
+      }
+    `
+];
+m([
+  i({ type: String, reflect: !0 })
+], p.prototype, "align", 2);
+m([
+  i({ type: Number })
+], p.prototype, "colspan", 2);
+m([
+  i({ type: Number })
+], p.prototype, "rowspan", 2);
+m([
+  i({ type: String, attribute: "label" })
+], p.prototype, "label", 2);
+p = m([
+  v("hx-td")
+], p);
+export {
+  h as H,
+  _ as a,
+  p as b,
+  S as c,
+  w as d,
+  c as e,
+  y as f
+};
+//# sourceMappingURL=hx-td-CVwCGBYf.js.map

package/dist/shared/hx-td-CVwCGBYf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-td-CVwCGBYf.js","sources":["../../src/components/hx-table/hx-table.styles.ts","../../src/components/hx-table/hx-table.ts","../../src/components/hx-table/hx-thead.ts","../../src/components/hx-table/hx-tbody.ts","../../src/components/hx-table/hx-tfoot.ts","../../src/components/hx-table/hx-tr.ts","../../src/components/hx-table/hx-th.ts","../../src/components/hx-table/hx-td.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Scroll Wrapper ─── */\n\n  .table-wrapper {\n    min-width: 0;\n    width: 100%;\n  }\n\n  /* ─── Table ─── */\n\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  :host([full-width]) table {\n    width: 100%;\n  }\n\n  /* ─── Caption ─── */\n\n  caption {\n    caption-side: top;\n    text-align: left;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n    font-size: var(--hx-font-size-base, 1rem);\n  }\n\n  /* ─── Slotted sub-component styling ─── */\n\n  /*\n   * ::slotted() only matches DIRECT slot assignees. hx-table's direct\n   * slot children are hx-thead, hx-tbody, and hx-tfoot — never hx-tr,\n   * hx-th, or hx-td. CSS custom properties inherit through shadow DOM\n   * boundaries, so variables set on section elements cascade to their\n   * slotted row and cell descendants automatically.\n   */\n\n  /* Header background via CSS vars that cascade through display:contents */\n  ::slotted(hx-thead) {\n    --_hx-table-cell-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* Striped variant: set stripe signal on hx-tbody (direct slotted child) so hx-tbody can apply to even rows */\n  :host([variant='striped']) ::slotted(hx-tbody) {\n    --_hx-table-row-stripe-bg: var(--hx-table-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* Hover variant: set hover bg variable on direct slotted section elements */\n  :host([variant='hover']) ::slotted(hx-tbody),\n  :host([variant='hover']) ::slotted(hx-thead),\n  :host([variant='striped']) ::slotted(hx-tbody),\n  :host([variant='striped']) ::slotted(hx-thead),\n  :host([variant='default']) ::slotted(hx-tbody),\n  :host([variant='default']) ::slotted(hx-thead) {\n    --_hx-table-row-hover-bg: var(--hx-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* Compact variant: reduced padding signal set on section elements that cascade to cells */\n  :host([variant='compact']) ::slotted(hx-thead),\n  :host([variant='compact']) ::slotted(hx-tbody),\n  :host([variant='compact']) ::slotted(hx-tfoot) {\n    --_hx-table-cell-padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Sticky Header ─── */\n\n  :host([sticky-header]) ::slotted(hx-thead) {\n    --_hx-table-th-position: sticky;\n    --_hx-table-th-top: 0;\n    --_hx-table-th-z-index: 1;\n    --_hx-table-th-bg: var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  /* ─── Focus ─── */\n\n  ::slotted(:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Dark Mode ─── */\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hx-table-border-color: var(--hx-color-neutral-700, #334155);\n      --hx-table-header-bg: var(--hx-color-neutral-800, #1e293b);\n      --hx-table-header-color: var(--hx-color-neutral-200, #e2e8f0);\n      --hx-table-cell-color: var(--hx-color-neutral-100, #f1f5f9);\n      --hx-table-row-hover-bg: var(--hx-color-neutral-700, #334155);\n      --hx-table-stripe-bg: var(--hx-color-neutral-800, #1e293b);\n    }\n  }\n\n  /* ─── Responsive Mobile Card Layout ─── */\n\n  @media (max-width: 768px) {\n    .table-wrapper {\n      overflow-x: visible;\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    ::slotted(*) {\n      transition: none !important;\n    }\n  }\n`;\n\n/**\n * Styles shared by sub-components (hx-th, hx-td) for cell layout.\n * Exported so sub-components can import them directly.\n */\nexport const helixTableCellBaseStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n\nexport const helixTableRowBaseStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n\nexport const helixTableSectionBaseStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTableStyles } from './hx-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * A semantic table container with variant styling and accessibility support.\n * Compose with `hx-thead`, `hx-tbody`, `hx-tfoot`, `hx-tr`, `hx-th`, and `hx-td`.\n *\n * @summary Semantic HTML table with variant styling, sticky header, and responsive layout.\n *\n * @tag hx-table\n *\n * @slot - Default slot for `hx-thead`, `hx-tbody`, and `hx-tfoot` sub-components.\n * @slot caption - Custom caption content rendered inside the `<caption>` element.\n *\n * @csspart table - The `<table>` element.\n * @csspart caption - The `<caption>` element.\n *\n * @cssprop [--hx-table-border-color=var(--hx-color-neutral-200, #e2e8f0)] - Cell border color.\n * @cssprop [--hx-table-header-bg=var(--hx-color-neutral-50, #f8fafc)] - Header row background.\n * @cssprop [--hx-table-header-color=var(--hx-color-neutral-700, #334155)] - Header text color.\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0f172a)] - Cell text color.\n * @cssprop [--hx-table-row-hover-bg=var(--hx-color-neutral-50, #f8fafc)] - Row hover background.\n * @cssprop [--hx-table-stripe-bg=var(--hx-color-neutral-50, #f8fafc)] - Striped row background.\n */\n@customElement('hx-table')\nexport class HelixTable extends LitElement {\n  static override styles = [tokenStyles, helixTableStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Accessible name for the table (WCAG 4.1.2 requirement).\n   * Exposed via `aria-label` on the `<table>` element.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visible caption text. When set, renders a `<caption>` element.\n   * Use the `caption` slot for richer caption content.\n   * @attr caption\n   */\n  @property({ type: String })\n  caption = '';\n\n  /**\n   * Visual variant that controls row styling.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'striped' | 'hover' | 'compact' = 'default';\n\n  /**\n   * When true, the header row stays fixed while the table body scrolls.\n   * @attr sticky-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  /**\n   * When true, the table expands to fill 100% of its container width.\n   * @attr full-width\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = true;\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('label') && !this.label && changed.get('label') !== undefined) {\n      devWarn(\n        'hx-table',\n        'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasCaption = this.caption || this.querySelector('[slot=\"caption\"]') !== null;\n\n    return html`\n      <div class=\"table-wrapper\">\n        <!-- role=\"table\" is required: sub-components use display:contents which can confuse assistive technology in Shadow DOM -->\n        <table part=\"table\" role=\"table\" aria-label=${this.label || nothing}>\n          ${hasCaption\n            ? html`<caption part=\"caption\">\n                <slot name=\"caption\">${this.caption}</slot>\n              </caption>`\n            : nothing}\n          <slot></slot>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-table': HelixTable;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table head section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-th` header cells.\n *\n * @summary Table head section (`<thead>`) for use inside `hx-table`.\n *\n * @tag hx-thead\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart thead - The `<thead>` element.\n */\n@customElement('hx-thead')\nexport class HelixTableHead extends LitElement {\n  static override styles = [helixTableSectionBaseStyles];\n\n  override render() {\n    return html`<thead part=\"thead\" role=\"rowgroup\">\n      <slot></slot>\n    </thead>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-thead': HelixTableHead;\n  }\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n/**\n * Semantic table body section. Must be a direct child of `hx-table`.\n * Contains `hx-tr` rows with `hx-td` data cells.\n *\n * @summary Table body section (`<tbody>`) for use inside `hx-table`.\n *\n * @tag hx-tbody\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tbody - The `<tbody>` element.\n */\n@customElement('hx-tbody')\nexport class HelixTableBody extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      /*\n       * Striped rows: only applies when the parent hx-table sets\n       * --_hx-table-row-stripe-bg (via variant=\"striped\"). Falls back\n       * to transparent so non-striped variants are unaffected.\n       */\n      ::slotted(hx-tr:nth-child(even)) {\n        --_hx-table-row-bg: var(--_hx-table-row-stripe-bg, transparent);\n      }\n    `,\n  ];\n\n  override render() {\n    return html`<tbody part=\"tbody\" role=\"rowgroup\">\n      <slot></slot>\n    </tbody>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tbody': HelixTableBody;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { helixTableSectionBaseStyles } from './hx-table.styles.js';\n\n/**\n * Semantic table foot section. Must be a direct child of `hx-table`.\n * Typically contains summary or totals rows.\n *\n * @summary Table foot section (`<tfoot>`) for use inside `hx-table`.\n *\n * @tag hx-tfoot\n *\n * @slot - Default slot for `hx-tr` elements.\n *\n * @csspart tfoot - The `<tfoot>` element.\n */\n@customElement('hx-tfoot')\nexport class HelixTableFoot extends LitElement {\n  static override styles = [helixTableSectionBaseStyles];\n\n  override render() {\n    return html`<tfoot part=\"tfoot\" role=\"rowgroup\">\n      <slot></slot>\n    </tfoot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tfoot': HelixTableFoot;\n  }\n}\n","import { LitElement, html, nothing, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * Semantic table row. Must be a child of `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n * Contains `hx-th` or `hx-td` cells.\n *\n * @summary Table row (`<tr>`) for use inside `hx-thead`, `hx-tbody`, or `hx-tfoot`.\n *\n * @tag hx-tr\n *\n * @slot - Default slot for `hx-th` and `hx-td` elements.\n *\n * @csspart row - The `<tr>` element.\n */\n@customElement('hx-tr')\nexport class HelixTableRow extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      tr {\n        background-color: var(--_hx-table-row-bg, transparent);\n        transition: background-color var(--hx-transition-fast, 150ms ease);\n      }\n\n      tr:hover {\n        background-color: var(--_hx-table-row-hover-bg, var(--hx-table-row-hover-bg, transparent));\n      }\n\n      :host([selected]) tr {\n        background-color: var(--hx-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n      }\n\n      :host([disabled]) tr {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        tr {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * When true, marks the row as selected and applies selected styling.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * When true, the row is visually disabled and non-interactive.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override render() {\n    return html`\n      <tr\n        part=\"row\"\n        role=\"row\"\n        aria-selected=${this.selected ? 'true' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n      >\n        <slot></slot>\n      </tr>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tr': HelixTableRow;\n  }\n}\n","import { LitElement, html, nothing, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * Detail type for `hx-sort` events dispatched from `hx-th`.\n */\nexport interface HxTableSortDetail {\n  direction: 'asc' | 'desc';\n}\n\n/**\n * Semantic table header cell. Must be a child of `hx-tr`.\n * Supports sortable columns with accessible sort state.\n *\n * @summary Table header cell (`<th>`) with optional sort support.\n *\n * @tag hx-th\n *\n * @slot - Default slot for header label content.\n *\n * @fires {CustomEvent<HxTableSortDetail>} hx-sort - Dispatched when a sortable header is activated.\n *\n * @csspart header - The `<th>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n */\n@customElement('hx-th')\nexport class HelixTableHeader extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      th {\n        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n        text-align: left;\n        font-weight: var(--hx-font-weight-semibold, 600);\n        color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n        background-color: var(\n          --_hx-table-cell-bg,\n          var(--hx-table-header-bg, var(--hx-color-neutral-50, #f8fafc))\n        );\n        border-bottom: var(--hx-border-width-thin, 1px) solid\n          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n        white-space: nowrap;\n        vertical-align: middle;\n        position: var(--_hx-table-th-position, static);\n        top: var(--_hx-table-th-top, auto);\n        z-index: var(--_hx-table-th-z-index, auto);\n      }\n\n      :host([sortable]) th {\n        cursor: pointer;\n      }\n\n      /* ─── Sort Button ─── */\n\n      .sort-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--hx-space-1, 0.25rem);\n        background: none;\n        border: none;\n        padding: 0;\n        font: inherit;\n        font-weight: inherit;\n        color: inherit;\n        cursor: pointer;\n        white-space: nowrap;\n        width: 100%;\n      }\n\n      .sort-btn:focus-visible {\n        outline: var(--hx-focus-ring-width, 2px) solid\n          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n        outline-offset: var(--hx-focus-ring-offset, 2px);\n        border-radius: var(--hx-border-radius-sm, 2px);\n      }\n\n      /* ─── Sort Icon ─── */\n\n      .sort-icon {\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n        width: 1em;\n        height: 1em;\n        opacity: 0.4;\n        transition:\n          opacity var(--hx-transition-fast, 150ms ease),\n          transform var(--hx-transition-fast, 150ms ease);\n      }\n\n      .sort-icon--active {\n        opacity: 1;\n        color: var(--hx-color-primary-500, #2563eb);\n      }\n\n      .sort-icon--desc {\n        transform: rotate(180deg);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .sort-icon {\n          transition: none;\n        }\n      }\n\n      /* ─── Mobile card layout ─── */\n\n      @media (max-width: 768px) {\n        /*\n         * Visually hide the header cell on mobile while keeping it in the\n         * accessibility tree. Screen readers can then associate column\n         * headers with data cells via the semantic table structure\n         * (scope=\"col\", role=\"columnheader\"), satisfying WCAG 2.1 AA.\n         * Using display:none would remove headers from the a11y tree entirely.\n         */\n        th {\n          position: absolute;\n          width: 1px;\n          height: 1px;\n          padding: 0;\n          margin: -1px;\n          overflow: hidden;\n          clip: rect(0, 0, 0, 0);\n          white-space: nowrap;\n          border: 0;\n        }\n      }\n    `,\n  ];\n\n  /**\n   * When true, the header renders a sort button and emits `hx-sort` on activation.\n   * @attr sortable\n   */\n  @property({ type: Boolean, reflect: true })\n  sortable = false;\n\n  /**\n   * Current sort direction. Reflected for CSS targeting.\n   * @attr sort-direction\n   */\n  @property({ type: String, reflect: true, attribute: 'sort-direction' })\n  sortDirection: 'asc' | 'desc' | 'none' = 'none';\n\n  /**\n   * The `scope` attribute for the underlying `<th>` element.\n   * @attr scope\n   */\n  @property({ type: String })\n  scope: 'col' | 'row' | 'colgroup' | 'rowgroup' = 'col';\n\n  /**\n   * Number of columns this header spans.\n   * @attr colspan\n   */\n  @property({ type: Number })\n  colspan = 0;\n\n  /**\n   * Number of rows this header spans.\n   * @attr rowspan\n   */\n  @property({ type: Number })\n  rowspan = 0;\n\n  // ─── Event Handlers ───\n\n  private _handleSort(): void {\n    const next: 'asc' | 'desc' = this.sortDirection === 'asc' ? 'desc' : 'asc';\n    this.sortDirection = next;\n    this.dispatchEvent(\n      new CustomEvent<HxTableSortDetail>('hx-sort', {\n        bubbles: true,\n        composed: true,\n        detail: { direction: next },\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  private _renderSortIcon() {\n    const isActive = this.sortDirection !== 'none';\n    const iconClass = [\n      'sort-icon',\n      isActive ? 'sort-icon--active' : '',\n      this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          width=\"16\"\n          height=\"16\"\n        >\n          <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  private _ariaSort(): 'ascending' | 'descending' | 'none' | typeof nothing {\n    if (!this.sortable) return nothing;\n    if (this.sortDirection === 'asc') return 'ascending';\n    if (this.sortDirection === 'desc') return 'descending';\n    return 'none';\n  }\n\n  private _sortLabel(): string {\n    if (this.sortDirection === 'asc') return 'Sort descending';\n    if (this.sortDirection === 'desc') return 'Sort ascending';\n    return 'Sort';\n  }\n\n  override render() {\n    return html`\n      <th\n        part=\"header\"\n        role=\"columnheader\"\n        scope=${this.scope}\n        colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n        rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n        aria-sort=${this._ariaSort()}\n      >\n        ${this.sortable\n          ? html`\n              <button class=\"sort-btn\" @click=${this._handleSort} aria-label=${this._sortLabel()}>\n                <slot></slot>\n                ${this._renderSortIcon()}\n              </button>\n            `\n          : html`<slot></slot>`}\n      </th>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-th': HelixTableHeader;\n  }\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\n/**\n * Semantic table data cell. Must be a child of `hx-tr`.\n *\n * @summary Table data cell (`<td>`) for use inside `hx-tr`.\n *\n * @tag hx-td\n *\n * @slot - Default slot for cell content.\n *\n * @csspart cell - The `<td>` element.\n *\n * @cssprop [--hx-table-cell-color=var(--hx-color-neutral-900, #0f172a)] - Cell text color.\n */\n@customElement('hx-td')\nexport class HelixTableCell extends LitElement {\n  static override styles = [\n    css`\n      :host {\n        display: contents;\n      }\n\n      td {\n        padding: var(--_hx-table-cell-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n        text-align: left;\n        color: var(--hx-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n        border-bottom: var(--hx-border-width-thin, 1px) solid\n          var(--hx-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n        vertical-align: middle;\n      }\n\n      :host([align='center']) td {\n        text-align: center;\n      }\n\n      :host([align='right']) td {\n        text-align: right;\n      }\n\n      td:focus-visible {\n        outline: var(--hx-focus-ring-width, 2px) solid\n          var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n        outline-offset: var(--hx-focus-ring-offset, -2px);\n        border-radius: var(--hx-border-radius-sm, 2px);\n      }\n\n      /* ─── Mobile card layout ─── */\n\n      @media (max-width: 768px) {\n        :host {\n          display: block;\n        }\n\n        td {\n          display: block;\n          text-align: right;\n          padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n          border-bottom: none;\n          position: relative;\n        }\n\n        td::before {\n          content: attr(data-label);\n          font-weight: var(--hx-font-weight-semibold, 600);\n          float: left;\n          color: var(--hx-table-header-color, var(--hx-color-neutral-700, #334155));\n        }\n      }\n    `,\n  ];\n\n  /**\n   * Horizontal alignment for cell content.\n   * @attr align\n   */\n  @property({ type: String, reflect: true })\n  align: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Number of columns this cell spans.\n   * @attr colspan\n   */\n  @property({ type: Number })\n  colspan = 0;\n\n  /**\n   * Number of rows this cell spans.\n   * @attr rowspan\n   */\n  @property({ type: Number })\n  rowspan = 0;\n\n  /**\n   * Column header label for this cell. Forwarded as `data-label` on the native `<td>` for\n   * the mobile card layout (`td::before { content: attr(data-label) }`) and as `aria-label`\n   * so screen readers identify the column when the header row is hidden.\n   * @attr label\n   */\n  @property({ type: String, attribute: 'label' })\n  label = '';\n\n  override render() {\n    return html`\n      <td\n        part=\"cell\"\n        role=\"cell\"\n        data-label=${ifDefined(this.label || undefined)}\n        colspan=${ifDefined(this.colspan > 0 ? this.colspan : undefined)}\n        rowspan=${ifDefined(this.rowspan > 0 ? this.rowspan : undefined)}\n      >\n        <slot></slot>\n      </td>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-td': HelixTableCell;\n  }\n}\n"],"names":["helixTableStyles","css","helixTableSectionBaseStyles","HelixTable","LitElement","changed","hasCaption","html","nothing","tokenStyles","__decorateClass","property","customElement","HelixTableHead","HelixTableBody","HelixTableFoot","HelixTableRow","HelixTableHeader","next","iconClass","ifDefined","HelixTableCell"],"mappings":"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"}

package/dist/shared/{hx-text-input-BUMgOQHX.js → hx-text-input-BrCjo4fJ.js}

@@ -259,6 +259,10 @@ let $ = 0, r = class extends x {
   formStateRestoreCallback(e) {
     this.value = e;
   }
+  // Called when a parent fieldset is disabled/enabled
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
   // ─── Event Handling ───
   /** @internal */
   _handleInput(e) {
@@ -437,4 +441,4 @@ r = i([
 export {
   r as H
 };
-//# sourceMappingURL=hx-text-input-BUMgOQHX.js.map
+//# sourceMappingURL=hx-text-input-BrCjo4fJ.js.map