@fusion.dev/helix-headless 0.229.1 → 0.230.0

package/dist/table/column/table-column.d.ts

@@ -57,6 +57,10 @@ export { edgeOf } from '../edge.js';
  * `separator` on its end edge, moved by dragging or with the arrow keys. In a
  * table with reorderable columns, each column has a grip that the table moves.
  *
+ * A sortable heading draws two chevrons after its words. The chevron for the
+ * current direction takes the heading's ink, so you can see which columns sort
+ * and which way the table is sorted.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Column header, Th
@@ -72,6 +76,9 @@ export { edgeOf } from '../edge.js';
  * @csspart grip-mark - The icon on the grip.
  * @csspart resizer - The edge that is dragged to change the width, when the column is resizable.
  * @csspart sort - The button that a sortable heading renders as.
+ * @csspart sort-down - The lower chevron of `sort-mark`, which shows a descending sort.
+ * @csspart sort-mark - The two chevrons on a sortable heading. To remove them, set `display: none` on this part.
+ * @csspart sort-up - The upper chevron of `sort-mark`, which shows an ascending sort.
  *
  * @cssstate sorted-ascending - While the table is sorted by this column, smallest first.
  * @cssstate sorted-descending - While the table is sorted by this column, largest first.

package/dist/table/column/table-column.js

@@ -182,7 +182,10 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             </svg>
           </button>`
             : nothing}${this.canSort
-            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot></button>`
+            ? html `<button part="sort" type="button" tabindex=${control} aria-description=${this.sortWords || nothing}><slot></slot><svg aria-hidden="true" fill="none" part="sort-mark" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.9" viewBox="0 0 18 18">
+            <path d="M5.5 7.2 9 3.7l3.5 3.5" part="sort-up" />
+            <path d="M5.5 10.8 9 14.3l3.5-3.5" part="sort-down" />
+          </svg></button>`
             : html `<slot></slot>`}${this.resizable
             ? html `<span
             part="resizer"