@smwb/ui-solid 0.11.0 → 0.11.1

package/dist/assets/styles/less/components/table/table.entry.css

@@ -1 +1 @@
-.smwb-table{width:100%;white-space:nowrap;border-collapse:collapse;overflow:scroll}.smwb-table.smwb-hovered tbody tr:hover{background:var(--smui-onSurfaceHover);cursor:pointer}.smwb-table__error{margin-bottom:10px}.smwb-table__container{display:flex;overflow-x:auto;border:1px solid var(--smui-tableBorderColor);border-radius:4px;flex-direction:column}.smwb-table__container.smwb-withPagination{border-radius:4px 4px 0 0}.smwb-table__wrapper{display:flex;flex-direction:column;background-color:var(--smui-surfaceBackground)}.smwb-table__wrapper_loading{pointer-events:none}.smwb-table__cell{position:relative;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:nowrap;padding:0 16px;height:52px;vertical-align:middle;overflow:hidden;word-wrap:break-word}.smwb-table__cell.smwb-head-cell{height:56px;text-align:left;font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-sortable{cursor:pointer}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content{align-items:center;display:inline-flex;vertical-align:middle;gap:5px;user-select:none}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content input{font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-align_left{text-align:left}.smwb-table__cell.smwb-head-cell.smwb-align_center{text-align:center}.smwb-table__cell.smwb-head-cell.smwb-align_right{text-align:right}.smwb-table__cell.smwb-head-cell .smwb-head-cell__icon{flex-shrink:0;display:none;transition:all .15s ease-in-out;fill:var(--smui-primaryTextColor)}.smwb-table__cell.smwb-head-cell.smwb-sorted_asc .smwb-head-cell__icon{display:inline-flex;transform:rotate(0)}.smwb-table__cell.smwb-head-cell.smwb-sorted_desc .smwb-head-cell__icon{display:inline-flex;transform:rotate(180deg)}.smwb-table__head .smwb-table__row{border-top:none}.smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table.smwb-dense .smwb-table__cell{padding:0 16px;height:36px;vertical-align:middle}.smwb-table.smwb-dense .smwb-table__cell.smwb-head-cell{height:40px}.smwb-table.smwb-dense .smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table__loader{width:100%;display:flex;align-items:center;justify-content:center;position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.smwb-table__loader__row{height:100px;position:relative}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}.smwb-head-cell_sortable .smwb-head-cell__content{cursor:pointer;user-select:none;outline:none}.smwb-head-cell_sortable .smwb-head-cell__content:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-table__row_selected{background-color:var(--smui-onSurfaceHover)}.smwb-table__caption{caption-side:top;text-align:left;padding:8px 12px;color:var(--smui-onSurfaceVariant)}.smwb-table_sticky-header{overflow:visible}.smwb-table__container:has(.smwb-table_sticky-header){overflow:visible}.smwb-table_sticky-header .smwb-table__head .smwb-table__cell{position:sticky;top:0;z-index:2;background-color:var(--smui-surfaceBackground)}
+.smwb-table{width:100%;white-space:nowrap;border-collapse:collapse;overflow:scroll}.smwb-table.smwb-hovered tbody tr:hover{background:var(--smui-onSurfaceHover);cursor:pointer}.smwb-table__error{margin-bottom:10px}.smwb-table__container{display:flex;overflow-x:auto;border:1px solid var(--smui-tableBorderColor);border-radius:4px;flex-direction:column}.smwb-table__container.smwb-withPagination{border-radius:4px 4px 0 0}.smwb-table__wrapper{display:flex;flex-direction:column;background-color:var(--smui-surfaceBackground)}.smwb-table__wrapper_loading{pointer-events:none}.smwb-table__cell{position:relative;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:nowrap;padding:0 16px;height:52px;vertical-align:middle;overflow:hidden;word-wrap:break-word}.smwb-table__cell.smwb-head-cell{height:56px;text-align:left;font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-sortable,.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable{cursor:pointer}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content{align-items:center;display:inline-flex;vertical-align:middle;gap:5px;user-select:none}.smwb-table__cell.smwb-head-cell .smwb-head-cell__content input{font-weight:500}.smwb-table__cell.smwb-head-cell.smwb-align_left{text-align:left}.smwb-table__cell.smwb-head-cell.smwb-align_center{text-align:center}.smwb-table__cell.smwb-head-cell.smwb-align_right{text-align:right}.smwb-table__cell.smwb-head-cell .smwb-head-cell__icon{flex-shrink:0;transition:opacity .15s ease-in-out;opacity:.4}.smwb-table__cell.smwb-head-cell.smwb-head-cell_sorted .smwb-head-cell__icon,.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable:hover .smwb-head-cell__icon,.smwb-table__cell.smwb-head-cell .smwb-head-cell__content:focus-visible .smwb-head-cell__icon{opacity:1}.smwb-table__cell.smwb-head-cell.smwb-sorted_asc .smwb-head-cell__icon{opacity:1;transform:rotate(0)}.smwb-table__cell.smwb-head-cell.smwb-sorted_desc .smwb-head-cell__icon{opacity:1;transform:rotate(180deg)}.smwb-table__head .smwb-table__row{border-top:none}.smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table.smwb-dense .smwb-table__cell{padding:0 16px;height:36px;vertical-align:middle}.smwb-table.smwb-dense .smwb-table__cell.smwb-head-cell{height:40px}.smwb-table.smwb-dense .smwb-table__row{border-top:1px solid var(--smui-tableBorderColor)}.smwb-table__loader{width:100%;display:flex;align-items:center;justify-content:center;position:absolute;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.smwb-table__loader__row{height:100px;position:relative}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px;height:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}.smwb-head-cell_sortable .smwb-head-cell__content{cursor:pointer;user-select:none;outline:none}.smwb-head-cell_sortable .smwb-head-cell__content:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-table__row_selected{background-color:var(--smui-onSurfaceHover)}.smwb-table__caption{caption-side:top;text-align:left;padding:8px 12px;color:var(--smui-onSurfaceVariant)}.smwb-table_sticky-header{overflow:visible}.smwb-table__container:has(.smwb-table_sticky-header){overflow:visible}.smwb-table_sticky-header .smwb-table__head .smwb-table__cell{position:sticky;top:0;z-index:2;background-color:var(--smui-surfaceBackground)}

package/dist/components/dataDisplay/table/tableHeadCell.js

@@ -1,44 +1,53 @@
-import { use as v, spread as y, mergeProps as _, addEventListener as c, insert as a, createComponent as w, effect as S, setAttribute as d, template as h, delegateEvents as A } from "solid-js/web";
-import { mergeProps as D, splitProps as k } from "solid-js";
-import x from "clsx";
-import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var $ = /* @__PURE__ */ h("<th><span class=smwb-head-cell__content>");
-function K(m) {
+import { use as _, spread as h, mergeProps as w, addEventListener as c, insert as i, createComponent as d, effect as y, setAttribute as m, template as S, delegateEvents as A } from "solid-js/web";
+import { mergeProps as D, splitProps as k, Show as x } from "solid-js";
+import B from "clsx";
+import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var C = /* @__PURE__ */ S("<th><span class=smwb-head-cell__content>");
+function L(b) {
   const f = D({
     cellAlign: "left"
-  }, m), [e, b] = k(f, ["children", "class", "cellAlign", "isSortedByAsc", "isSortedByDesc", "sortable", "sortDirection", "onSort", "ref"]), s = () => e.sortDirection !== void 0 ? e.sortDirection : e.isSortedByAsc ? "asc" : e.isSortedByDesc ? "desc" : !1, g = () => e.sortable ? s() === "asc" ? "ascending" : s() === "desc" ? "descending" : "none" : void 0, u = () => s() === "asc" ? "expand_more" : s() === "desc" ? "expand_less" : "", p = (t) => {
-    e.sortable && e.onSort && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.onSort());
+  }, b), [e, u] = k(f, ["children", "class", "cellAlign", "isSortedByAsc", "isSortedByDesc", "sortable", "sortDirection", "onSort", "ref"]), o = () => e.sortDirection !== void 0 ? e.sortDirection : e.isSortedByAsc ? "asc" : e.isSortedByDesc ? "desc" : !1, g = () => e.sortable ? o() === "asc" ? "ascending" : o() === "desc" ? "descending" : "none" : void 0, p = () => o() === "asc" ? "expand_more" : o() === "desc" ? "expand_less" : "unfold_more", v = (r) => {
+    e.sortable && e.onSort && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSort());
   };
   return (() => {
-    var t = $(), r = t.firstChild, l = B(e.ref);
-    return typeof l == "function" && v(l, t), y(t, _(b, {
+    var r = C(), t = r.firstChild, l = P(e.ref);
+    return typeof l == "function" && _(l, r), h(r, w(u, {
       get "aria-sort"() {
         return g();
       },
       get class() {
-        return x("smwb-table__cell", "smwb-head-cell", e.class, {
+        return B("smwb-table__cell", "smwb-head-cell", e.class, {
           [`smwb-align_${e.cellAlign}`]: !!e.cellAlign,
-          "smwb-head-cell_sortable": e.sortable
+          "smwb-head-cell_sortable": e.sortable,
+          "smwb-head-cell_sorted": !!e.sortable && o() !== !1
         });
       }
-    }), !1, !0), c(r, "keydown", e.sortable ? p : void 0, !0), c(r, "click", e.sortable ? () => e.onSort?.() : void 0, !0), a(r, () => e.children, null), a(r, w(P, {
-      get name() {
-        return u();
+    }), !1, !0), c(t, "keydown", e.sortable ? v : void 0, !0), c(t, "click", e.sortable ? () => e.onSort?.() : void 0, !0), i(t, () => e.children, null), i(t, d(x, {
+      get when() {
+        return e.sortable;
       },
-      size: 18,
-      weight: 800
-    }), null), S((o) => {
-      var n = e.sortable ? "button" : void 0, i = e.sortable ? 0 : void 0;
-      return n !== o.e && d(r, "role", o.e = n), i !== o.t && d(r, "tabindex", o.t = i), o;
+      get children() {
+        return d($, {
+          class: "smwb-head-cell__icon",
+          get name() {
+            return p();
+          },
+          size: 18,
+          weight: 800
+        });
+      }
+    }), null), y((s) => {
+      var n = e.sortable ? "button" : void 0, a = e.sortable ? 0 : void 0;
+      return n !== s.e && m(t, "role", s.e = n), a !== s.t && m(t, "tabindex", s.t = a), s;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), r;
   })();
 }
 A(["click", "keydown"]);
 export {
-  K as TableHeadCell
+  L as TableHeadCell
 };
 //# sourceMappingURL=tableHeadCell.js.map

package/dist/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  const iconName = (): string => (direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"\");\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Icon name={iconName()} size={18} weight={800} />\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","direction","sortDirection","undefined","isSortedByAsc","isSortedByDesc","ariaSort","sortable","iconName","onKeyDown","event","onSort","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$addEventListener","_$insert","children","_$createComponent","Icon","name","size","weight","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$delegateEvents"],"mappings":";;;;;;AAsBO,SAASA,EAAcC,GAAqD;AACjF,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,YACA,SACA,aACA,iBACA,kBACA,YACA,iBACA,UACA,KAAK,CACN,GAEKM,IAAYA,MAChBH,EAAMI,kBAAkBC,SAAYL,EAAMI,gBAAgBJ,EAAMM,gBAAgB,QAAQN,EAAMO,iBAAiB,SAAS,IAEpHC,IAAWA,MACfR,EAAMS,WAAYN,EAAAA,MAAgB,QAAQ,cAAcA,EAAAA,MAAgB,SAAS,eAAe,SAAUE,QAEtGK,IAAWA,MAAeP,EAAAA,MAAgB,QAAQ,gBAAgBA,EAAAA,MAAgB,SAAS,gBAAgB,IAE3GQ,IAA+DC,CAAAA,MAAU;AAC7E,IAAIZ,EAAMS,YAAYT,EAAMa,WAAWD,EAAME,QAAQ,WAAWF,EAAME,QAAQ,SAC5EF,EAAMG,eAAAA,GACNf,EAAMa,OAAAA;AAAAA,EAEV;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUrB,EAAMsB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBxB,GAAI;AAAA,MAAA,IAAA,cAAA;AAAA,eAEGO,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAA,QAAA;AAAA,eACdkB,EAAG,oBAAoB,kBAAkB1B,EAAM2B,OAAO;AAAA,UAC3D,CAAC,cAAc3B,EAAMD,SAAS,EAAE,GAAG,CAAC,CAACC,EAAMD;AAAAA,UAC3C,2BAA2BC,EAAMS;AAAAA,QAAAA,CAClC;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAmB,EAAAV,GAAA,WAKWlB,EAAMS,WAAWE,IAAYN,QAAS,EAAA,GAAAuB,EAAAV,GAAA,SADxClB,EAAMS,WAAW,MAAMT,EAAMa,SAAAA,IAAaR,QAAS,EAAA,GAAAwB,EAAAX,GAAA,MAK3DlB,EAAM8B,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAEwB,MAAM;AAAA,MAAIC,QAAQ;AAAA,IAAA,CAAG,GAAA,IAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAJvCtC,EAAMS,WAAW,WAAWJ,QAASkC,IACjCvC,EAAMS,WAAW,IAAIJ;AAASiC,aAAAA,MAAAD,EAAAG,KAAAC,EAAAvB,GAAA,QAAAmB,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAD,EAAAvB,GAAA,YAAAmB,EAAAK,IAAAH,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAnC;AAAAA,MAAAqC,GAAArC;AAAAA,IAAAA,CAAA,GAAAW;AAAAA,EAAA,GAAA;AAOhD;AAE6B2B,EAAA,CAAA,SAAA,SAAA,CAAA;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","direction","sortDirection","undefined","isSortedByAsc","isSortedByDesc","ariaSort","sortable","iconName","onKeyDown","event","onSort","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$addEventListener","_$insert","children","_$createComponent","Show","when","Icon","name","size","weight","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$delegateEvents"],"mappings":";;;;;;AAsBO,SAASA,EAAcC,GAAqD;AACjF,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,YACA,SACA,aACA,iBACA,kBACA,YACA,iBACA,UACA,KAAK,CACN,GAEKM,IAAYA,MAChBH,EAAMI,kBAAkBC,SAAYL,EAAMI,gBAAgBJ,EAAMM,gBAAgB,QAAQN,EAAMO,iBAAiB,SAAS,IAEpHC,IAAWA,MACfR,EAAMS,WAAYN,EAAAA,MAAgB,QAAQ,cAAcA,EAAAA,MAAgB,SAAS,eAAe,SAAUE,QAStGK,IAAWA,MACfP,EAAAA,MAAgB,QAAQ,gBAAgBA,EAAAA,MAAgB,SAAS,gBAAgB,eAE7EQ,IAA+DC,CAAAA,MAAU;AAC7E,IAAIZ,EAAMS,YAAYT,EAAMa,WAAWD,EAAME,QAAQ,WAAWF,EAAME,QAAQ,SAC5EF,EAAMG,eAAAA,GACNf,EAAMa,OAAAA;AAAAA,EAEV;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUrB,EAAMsB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBxB,GAAI;AAAA,MAAA,IAAA,cAAA;AAAA,eAEGO,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAA,QAAA;AAAA,eACdkB,EAAG,oBAAoB,kBAAkB1B,EAAM2B,OAAO;AAAA,UAC3D,CAAC,cAAc3B,EAAMD,SAAS,EAAE,GAAG,CAAC,CAACC,EAAMD;AAAAA,UAC3C,2BAA2BC,EAAMS;AAAAA,UACjC,yBAAyB,CAAC,CAACT,EAAMS,YAAYN,QAAgB;AAAA,QAAA,CAC9D;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAyB,EAAAV,GAAA,WAKWlB,EAAMS,WAAWE,IAAYN,QAAS,EAAA,GAAAuB,EAAAV,GAAA,SADxClB,EAAMS,WAAW,MAAMT,EAAMa,SAAAA,IAAaR,QAAS,EAAA,GAAAwB,EAAAX,GAAA,MAK3DlB,EAAM8B,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjC,EAAMS;AAAAA,MAAQ;AAAA,MAAA,IAAAqB,WAAA;AAAA,eAAAC,EACvBG,GAAI;AAAA,UAAA,OAAA;AAAA,UAAA,IAA8BC,OAAI;AAAA,mBAAEzB,EAAAA;AAAAA,UAAU;AAAA,UAAE0B,MAAM;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAG;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IALtExC,EAAMS,WAAW,WAAWJ,QAASoC,IACjCzC,EAAMS,WAAW,IAAIJ;AAASmC,aAAAA,MAAAD,EAAAG,KAAAC,EAAAzB,GAAA,QAAAqB,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAD,EAAAzB,GAAA,YAAAqB,EAAAK,IAAAH,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAArC;AAAAA,MAAAuC,GAAAvC;AAAAA,IAAAA,CAAA,GAAAW;AAAAA,EAAA,GAAA;AAShD;AAE6B6B,EAAA,CAAA,SAAA,SAAA,CAAA;"}

package/dist/headless/components/dataDisplay/table/tableHeadCell.js

@@ -1,44 +1,53 @@
-import { use as v, spread as y, mergeProps as _, addEventListener as c, insert as a, createComponent as w, effect as S, setAttribute as d, template as h, delegateEvents as A } from "solid-js/web";
-import { mergeProps as D, splitProps as k } from "solid-js";
-import x from "clsx";
-import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
-import { Icon as P } from "../../base/icon/icon.js";
-var $ = /* @__PURE__ */ h("<th><span class=smwb-head-cell__content>");
-function K(m) {
+import { use as _, spread as h, mergeProps as w, addEventListener as c, insert as i, createComponent as d, effect as y, setAttribute as m, template as S, delegateEvents as A } from "solid-js/web";
+import { mergeProps as D, splitProps as k, Show as x } from "solid-js";
+import B from "clsx";
+import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+var C = /* @__PURE__ */ S("<th><span class=smwb-head-cell__content>");
+function L(b) {
   const f = D({
     cellAlign: "left"
-  }, m), [e, b] = k(f, ["children", "class", "cellAlign", "isSortedByAsc", "isSortedByDesc", "sortable", "sortDirection", "onSort", "ref"]), s = () => e.sortDirection !== void 0 ? e.sortDirection : e.isSortedByAsc ? "asc" : e.isSortedByDesc ? "desc" : !1, g = () => e.sortable ? s() === "asc" ? "ascending" : s() === "desc" ? "descending" : "none" : void 0, u = () => s() === "asc" ? "expand_more" : s() === "desc" ? "expand_less" : "", p = (t) => {
-    e.sortable && e.onSort && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.onSort());
+  }, b), [e, u] = k(f, ["children", "class", "cellAlign", "isSortedByAsc", "isSortedByDesc", "sortable", "sortDirection", "onSort", "ref"]), o = () => e.sortDirection !== void 0 ? e.sortDirection : e.isSortedByAsc ? "asc" : e.isSortedByDesc ? "desc" : !1, g = () => e.sortable ? o() === "asc" ? "ascending" : o() === "desc" ? "descending" : "none" : void 0, p = () => o() === "asc" ? "expand_more" : o() === "desc" ? "expand_less" : "unfold_more", v = (r) => {
+    e.sortable && e.onSort && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSort());
   };
   return (() => {
-    var t = $(), r = t.firstChild, l = B(e.ref);
-    return typeof l == "function" && v(l, t), y(t, _(b, {
+    var r = C(), t = r.firstChild, l = P(e.ref);
+    return typeof l == "function" && _(l, r), h(r, w(u, {
       get "aria-sort"() {
         return g();
       },
       get class() {
-        return x("smwb-table__cell", "smwb-head-cell", e.class, {
+        return B("smwb-table__cell", "smwb-head-cell", e.class, {
           [`smwb-align_${e.cellAlign}`]: !!e.cellAlign,
-          "smwb-head-cell_sortable": e.sortable
+          "smwb-head-cell_sortable": e.sortable,
+          "smwb-head-cell_sorted": !!e.sortable && o() !== !1
         });
       }
-    }), !1, !0), c(r, "keydown", e.sortable ? p : void 0, !0), c(r, "click", e.sortable ? () => e.onSort?.() : void 0, !0), a(r, () => e.children, null), a(r, w(P, {
-      get name() {
-        return u();
+    }), !1, !0), c(t, "keydown", e.sortable ? v : void 0, !0), c(t, "click", e.sortable ? () => e.onSort?.() : void 0, !0), i(t, () => e.children, null), i(t, d(x, {
+      get when() {
+        return e.sortable;
       },
-      size: 18,
-      weight: 800
-    }), null), S((o) => {
-      var n = e.sortable ? "button" : void 0, i = e.sortable ? 0 : void 0;
-      return n !== o.e && d(r, "role", o.e = n), i !== o.t && d(r, "tabindex", o.t = i), o;
+      get children() {
+        return d($, {
+          class: "smwb-head-cell__icon",
+          get name() {
+            return p();
+          },
+          size: 18,
+          weight: 800
+        });
+      }
+    }), null), y((s) => {
+      var n = e.sortable ? "button" : void 0, a = e.sortable ? 0 : void 0;
+      return n !== s.e && m(t, "role", s.e = n), a !== s.t && m(t, "tabindex", s.t = a), s;
     }, {
       e: void 0,
       t: void 0
-    }), t;
+    }), r;
   })();
 }
 A(["click", "keydown"]);
 export {
-  K as TableHeadCell
+  L as TableHeadCell
 };
 //# sourceMappingURL=tableHeadCell.js.map

package/dist/headless/components/dataDisplay/table/tableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  const iconName = (): string => (direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"\");\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Icon name={iconName()} size={18} weight={800} />\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","direction","sortDirection","undefined","isSortedByAsc","isSortedByDesc","ariaSort","sortable","iconName","onKeyDown","event","onSort","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$addEventListener","_$insert","children","_$createComponent","Icon","name","size","weight","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$delegateEvents"],"mappings":";;;;;;AAsBO,SAASA,EAAcC,GAAqD;AACjF,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,YACA,SACA,aACA,iBACA,kBACA,YACA,iBACA,UACA,KAAK,CACN,GAEKM,IAAYA,MAChBH,EAAMI,kBAAkBC,SAAYL,EAAMI,gBAAgBJ,EAAMM,gBAAgB,QAAQN,EAAMO,iBAAiB,SAAS,IAEpHC,IAAWA,MACfR,EAAMS,WAAYN,EAAAA,MAAgB,QAAQ,cAAcA,EAAAA,MAAgB,SAAS,eAAe,SAAUE,QAEtGK,IAAWA,MAAeP,EAAAA,MAAgB,QAAQ,gBAAgBA,EAAAA,MAAgB,SAAS,gBAAgB,IAE3GQ,IAA+DC,CAAAA,MAAU;AAC7E,IAAIZ,EAAMS,YAAYT,EAAMa,WAAWD,EAAME,QAAQ,WAAWF,EAAME,QAAQ,SAC5EF,EAAMG,eAAAA,GACNf,EAAMa,OAAAA;AAAAA,EAEV;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUrB,EAAMsB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBxB,GAAI;AAAA,MAAA,IAAA,cAAA;AAAA,eAEGO,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAA,QAAA;AAAA,eACdkB,EAAG,oBAAoB,kBAAkB1B,EAAM2B,OAAO;AAAA,UAC3D,CAAC,cAAc3B,EAAMD,SAAS,EAAE,GAAG,CAAC,CAACC,EAAMD;AAAAA,UAC3C,2BAA2BC,EAAMS;AAAAA,QAAAA,CAClC;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAmB,EAAAV,GAAA,WAKWlB,EAAMS,WAAWE,IAAYN,QAAS,EAAA,GAAAuB,EAAAV,GAAA,SADxClB,EAAMS,WAAW,MAAMT,EAAMa,SAAAA,IAAaR,QAAS,EAAA,GAAAwB,EAAAX,GAAA,MAK3DlB,EAAM8B,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEvB,EAAAA;AAAAA,MAAU;AAAA,MAAEwB,MAAM;AAAA,MAAIC,QAAQ;AAAA,IAAA,CAAG,GAAA,IAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IAJvCtC,EAAMS,WAAW,WAAWJ,QAASkC,IACjCvC,EAAMS,WAAW,IAAIJ;AAASiC,aAAAA,MAAAD,EAAAG,KAAAC,EAAAvB,GAAA,QAAAmB,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAD,EAAAvB,GAAA,YAAAmB,EAAAK,IAAAH,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAAnC;AAAAA,MAAAqC,GAAArC;AAAAA,IAAAA,CAAA,GAAAW;AAAAA,EAAA,GAAA;AAOhD;AAE6B2B,EAAA,CAAA,SAAA,SAAA,CAAA;"}
+{"version":3,"file":"tableHeadCell.js","sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"names":["TableHeadCell","props","merged","mergeProps","cellAlign","local","rest","splitProps","direction","sortDirection","undefined","isSortedByAsc","isSortedByDesc","ariaSort","sortable","iconName","onKeyDown","event","onSort","key","preventDefault","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$addEventListener","_$insert","children","_$createComponent","Show","when","Icon","name","size","weight","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","_$delegateEvents"],"mappings":";;;;;;AAsBO,SAASA,EAAcC,GAAqD;AACjF,QAAMC,IAASC,EAAW;AAAA,IAAEC,WAAW;AAAA,EAAA,GAAmBH,CAAK,GACzD,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,YACA,SACA,aACA,iBACA,kBACA,YACA,iBACA,UACA,KAAK,CACN,GAEKM,IAAYA,MAChBH,EAAMI,kBAAkBC,SAAYL,EAAMI,gBAAgBJ,EAAMM,gBAAgB,QAAQN,EAAMO,iBAAiB,SAAS,IAEpHC,IAAWA,MACfR,EAAMS,WAAYN,EAAAA,MAAgB,QAAQ,cAAcA,EAAAA,MAAgB,SAAS,eAAe,SAAUE,QAStGK,IAAWA,MACfP,EAAAA,MAAgB,QAAQ,gBAAgBA,EAAAA,MAAgB,SAAS,gBAAgB,eAE7EQ,IAA+DC,CAAAA,MAAU;AAC7E,IAAIZ,EAAMS,YAAYT,EAAMa,WAAWD,EAAME,QAAQ,WAAWF,EAAME,QAAQ,SAC5EF,EAAMG,eAAAA,GACNf,EAAMa,OAAAA;AAAAA,EAEV;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUrB,EAAMsB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBxB,GAAI;AAAA,MAAA,IAAA,cAAA;AAAA,eAEGO,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAA,QAAA;AAAA,eACdkB,EAAG,oBAAoB,kBAAkB1B,EAAM2B,OAAO;AAAA,UAC3D,CAAC,cAAc3B,EAAMD,SAAS,EAAE,GAAG,CAAC,CAACC,EAAMD;AAAAA,UAC3C,2BAA2BC,EAAMS;AAAAA,UACjC,yBAAyB,CAAC,CAACT,EAAMS,YAAYN,QAAgB;AAAA,QAAA,CAC9D;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAyB,EAAAV,GAAA,WAKWlB,EAAMS,WAAWE,IAAYN,QAAS,EAAA,GAAAuB,EAAAV,GAAA,SADxClB,EAAMS,WAAW,MAAMT,EAAMa,SAAAA,IAAaR,QAAS,EAAA,GAAAwB,EAAAX,GAAA,MAK3DlB,EAAM8B,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjC,EAAMS;AAAAA,MAAQ;AAAA,MAAA,IAAAqB,WAAA;AAAA,eAAAC,EACvBG,GAAI;AAAA,UAAA,OAAA;AAAA,UAAA,IAA8BC,OAAI;AAAA,mBAAEzB,EAAAA;AAAAA,UAAU;AAAA,UAAE0B,MAAM;AAAA,UAAIC,QAAQ;AAAA,QAAA,CAAG;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IALtExC,EAAMS,WAAW,WAAWJ,QAASoC,IACjCzC,EAAMS,WAAW,IAAIJ;AAASmC,aAAAA,MAAAD,EAAAG,KAAAC,EAAAzB,GAAA,QAAAqB,EAAAG,IAAAF,CAAA,GAAAC,MAAAF,EAAAK,KAAAD,EAAAzB,GAAA,YAAAqB,EAAAK,IAAAH,CAAA,GAAAF;AAAAA,IAAA,GAAA;AAAA,MAAAG,GAAArC;AAAAA,MAAAuC,GAAAvC;AAAAA,IAAAA,CAAA,GAAAW;AAAAA,EAAA,GAAA;AAShD;AAE6B6B,EAAA,CAAA,SAAA,SAAA,CAAA;"}

package/dist/headless/source/components/dataDisplay/table/tableHeadCell.jsx

@@ -1,4 +1,4 @@
-import { mergeProps, splitProps } from "solid-js";
+import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -17,7 +17,7 @@ function TableHeadCell(props) {
   ]);
   const direction = () => local.sortDirection !== void 0 ? local.sortDirection : local.isSortedByAsc ? "asc" : local.isSortedByDesc ? "desc" : false;
   const ariaSort = () => local.sortable ? direction() === "asc" ? "ascending" : direction() === "desc" ? "descending" : "none" : void 0;
-  const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "";
+  const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "unfold_more";
   const onKeyDown = (event) => {
     if (local.sortable && local.onSort && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
@@ -30,7 +30,8 @@ function TableHeadCell(props) {
     aria-sort={ariaSort()}
     class={cn("smwb-table__cell", "smwb-head-cell", local.class, {
       [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,
-      "smwb-head-cell_sortable": local.sortable
+      "smwb-head-cell_sortable": local.sortable,
+      "smwb-head-cell_sorted": !!local.sortable && direction() !== false
     })}
   >
       <span
@@ -41,7 +42,9 @@ function TableHeadCell(props) {
     tabindex={local.sortable ? 0 : void 0}
   >
         {local.children}
-        <Icon name={iconName()} size={18} weight={800} />
+        <Show when={local.sortable}>
+          <Icon class="smwb-head-cell__icon" name={iconName()} size={18} weight={800} />
+        </Show>
       </span>
     </th>;
 }

package/dist/headless/source/components/dataDisplay/table/tableHeadCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  const iconName = (): string => (direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"\");\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Icon name={iconName()} size={18} weight={800} />\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAE5G,QAAM,WAAW,MAAe,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEjH,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,MACnD,EATC,KASM;AAAA,IACT,EAnBC;AAqBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}

package/dist/source/components/dataDisplay/table/tableHeadCell.jsx

@@ -1,4 +1,4 @@
-import { mergeProps, splitProps } from "solid-js";
+import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -17,7 +17,7 @@ function TableHeadCell(props) {
   ]);
   const direction = () => local.sortDirection !== void 0 ? local.sortDirection : local.isSortedByAsc ? "asc" : local.isSortedByDesc ? "desc" : false;
   const ariaSort = () => local.sortable ? direction() === "asc" ? "ascending" : direction() === "desc" ? "descending" : "none" : void 0;
-  const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "";
+  const iconName = () => direction() === "asc" ? "expand_more" : direction() === "desc" ? "expand_less" : "unfold_more";
   const onKeyDown = (event) => {
     if (local.sortable && local.onSort && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
@@ -30,7 +30,8 @@ function TableHeadCell(props) {
     aria-sort={ariaSort()}
     class={cn("smwb-table__cell", "smwb-head-cell", local.class, {
       [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,
-      "smwb-head-cell_sortable": local.sortable
+      "smwb-head-cell_sortable": local.sortable,
+      "smwb-head-cell_sorted": !!local.sortable && direction() !== false
     })}
   >
       <span
@@ -41,7 +42,9 @@ function TableHeadCell(props) {
     tabindex={local.sortable ? 0 : void 0}
   >
         {local.children}
-        <Icon name={iconName()} size={18} weight={800} />
+        <Show when={local.sortable}>
+          <Icon class="smwb-head-cell__icon" name={iconName()} size={18} weight={800} />
+        </Show>
       </span>
     </th>;
 }

package/dist/source/components/dataDisplay/table/tableHeadCell.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  const iconName = (): string => (direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"\");\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Icon name={iconName()} size={18} weight={800} />\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAE5G,QAAM,WAAW,MAAe,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEjH,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,IACnC,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,MACnD,EATC,KASM;AAAA,IACT,EAnBC;AAqBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}
+{"version":3,"sources":["../../../../../src/components/dataDisplay/table/tableHeadCell.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SortDirection = \"asc\" | \"desc\" | false;\n\nexport interface TableHeadCellProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** @deprecated use `sortDirection=\"desc\"`. */\n  isSortedByDesc?: boolean;\n  /** @deprecated use `sortDirection=\"asc\"`. */\n  isSortedByAsc?: boolean;\n  /** Enables the interactive sort affordance with keyboard/aria support. */\n  sortable?: boolean;\n  /** Current sort direction for this column. */\n  sortDirection?: SortDirection;\n  /** Invoked when the user activates the sort control. */\n  onSort?: () => void;\n  ref?: Ref<HTMLTableCellElement>;\n}\n\nexport function TableHeadCell(props: ParentProps<TableHeadCellProps>): JSX.Element {\n  const merged = mergeProps({ cellAlign: \"left\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"cellAlign\",\n    \"isSortedByAsc\",\n    \"isSortedByDesc\",\n    \"sortable\",\n    \"sortDirection\",\n    \"onSort\",\n    \"ref\",\n  ]);\n\n  const direction = (): SortDirection =>\n    local.sortDirection !== undefined ? local.sortDirection : local.isSortedByAsc ? \"asc\" : local.isSortedByDesc ? \"desc\" : false;\n\n  const ariaSort = (): \"ascending\" | \"descending\" | \"none\" | undefined =>\n    local.sortable ? (direction() === \"asc\" ? \"ascending\" : direction() === \"desc\" ? \"descending\" : \"none\") : undefined;\n\n  /**\n   * A sortable column always shows a marker: the current direction once sorted,\n   * and `unfold_more` before that — otherwise nothing tells the reader the column\n   * can be sorted at all. A cell that is not sortable shows nothing; it used to\n   * render an `<Icon name=\"\">`, which reserved a gap and warned about a missing\n   * icon under `source: \"smwb\"`.\n   */\n  const iconName = (): string =>\n    direction() === \"asc\" ? \"expand_more\" : direction() === \"desc\" ? \"expand_less\" : \"unfold_more\";\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (local.sortable && local.onSort && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSort();\n    }\n  };\n\n  return (\n    <th\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      aria-sort={ariaSort()}\n      class={cn(\"smwb-table__cell\", \"smwb-head-cell\", local.class, {\n        [`smwb-align_${local.cellAlign}`]: !!local.cellAlign,\n        \"smwb-head-cell_sortable\": local.sortable,\n        \"smwb-head-cell_sorted\": !!local.sortable && direction() !== false,\n      })}\n    >\n      <span\n        class=\"smwb-head-cell__content\"\n        onClick={local.sortable ? () => local.onSort?.() : undefined}\n        onKeyDown={local.sortable ? onKeyDown : undefined}\n        role={local.sortable ? \"button\" : undefined}\n        tabindex={local.sortable ? 0 : undefined}\n      >\n        {local.children}\n        <Show when={local.sortable}>\n          <Icon class=\"smwb-head-cell__icon\" name={iconName()} size={18} weight={800} />\n        </Show>\n      </span>\n    </th>\n  );\n}\n\nexport default TableHeadCell;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AAmB7B,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS,WAAW,EAAE,WAAW,OAAgB,GAAG,KAAK;AAC/D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAY,MAChB,MAAM,kBAAkB,SAAY,MAAM,gBAAgB,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB,SAAS;AAE1H,QAAM,WAAW,MACf,MAAM,WAAY,UAAU,MAAM,QAAQ,cAAc,UAAU,MAAM,SAAS,eAAe,SAAU;AAS5G,QAAM,WAAW,MACf,UAAU,MAAM,QAAQ,gBAAgB,UAAU,MAAM,SAAS,gBAAgB;AAEnF,QAAM,YAA8D,CAAC,UAAU;AAC7E,QAAI,MAAM,YAAY,MAAM,WAAW,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAClF,YAAM,eAAe;AACrB,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,WAAW,SAAS;AAAA,IACpB,OAAO,GAAG,oBAAoB,kBAAkB,MAAM,OAAO;AAAA,MAC3D,CAAC,cAAc,MAAM,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM;AAAA,MAC3C,2BAA2B,MAAM;AAAA,MACjC,yBAAyB,CAAC,CAAC,MAAM,YAAY,UAAU,MAAM;AAAA,IAC/D,CAAC;AAAA,GACF;AAAA,MACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,MAAM,WAAW,MAAM,MAAM,SAAS,IAAI;AAAA,IACnD,WAAW,MAAM,WAAW,YAAY;AAAA,IACxC,MAAM,MAAM,WAAW,WAAW;AAAA,IAClC,UAAU,MAAM,WAAW,IAAI;AAAA,GAChC;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,UAC1B,CAAC,KAAK,MAAM,uBAAuB,MAAM,SAAS,GAAG,MAAM,IAAI,QAAQ,KAAK,EAAE;AAAA,QAChF,EAFC,KAEM;AAAA,MACT,EAXC,KAWM;AAAA,IACT,EAtBC;AAwBL;AAEA,IAAO,wBAAQ;","names":[],"file":"tableHeadCell.jsx"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-solid",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "SolidJS port of summer-ui: strict, tree-shakeable Material-style component library sharing the @smwb/ui-styles design system.",
   "license": "MIT",
   "type": "module",
@@ -539,7 +539,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.0",
-    "@smwb/ui-styles": "^1.4.0",
+    "@smwb/ui-styles": "^1.4.2",
     "clsx": "^2.1.1",
     "zod": "^4.4.3"
   },
@@ -549,7 +549,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.0",
-    "@smwb/ui-styles": "^1.4.0",
+    "@smwb/ui-styles": "^1.4.2",
     "@solidjs/testing-library": "^0.8.10",
     "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-links": "^10.4.0",