snice 7.0.2 → 7.0.3

package/dist/cdn/table/snice-table.js

@@ -1,5 +1,5 @@
 /*!
- * snice v7.0.2
+ * snice v7.0.3
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -12366,6 +12366,7 @@ var SniceTable = (function (exports, snice) {
               btn.className = `tree-toggle${treeRow.expanded ? ' tree-toggle--expanded' : ''}`;
               btn.innerHTML = `<svg class="tree-toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`;
               btn.setAttribute('aria-expanded', String(treeRow.expanded));
+              btn.setAttribute('aria-label', `${treeRow.expanded ? 'Collapse' : 'Expand'} row`);
               btn.addEventListener('click', (e) => {
                   e.stopPropagation();
                   this.toggle(treeRow.key);
@@ -13416,6 +13417,18 @@ var SniceTable = (function (exports, snice) {
                       document.addEventListener('fullscreenchange', this.fsExitHandler);
                   }
               };
+              this.handleKeydown = (e) => {
+                  if (e.key !== 'Enter' && e.key !== ' ')
+                      return;
+                  const th = e.target.closest('th.sortable');
+                  if (!th)
+                      return;
+                  const columnKey = th.getAttribute('data-key');
+                  if (!columnKey)
+                      return;
+                  e.preventDefault();
+                  this.toggleSort(columnKey, true);
+              };
               this.handleClick = (e) => {
                   const target = e.target;
                   // Handle sortable header click — every click adds/cycles in multi-sort.
@@ -14942,7 +14955,7 @@ var SniceTable = (function (exports, snice) {
               if (hasSlottedRows) {
                   // Use slotted rows layout
                   return snice.html /*html*/ `
-        <div class="snice-table snice-table--slotted" @click=${this.handleClick} @change=${this.handleChange} @checkbox-change=${this.handleChange}>
+        <div class="snice-table snice-table--slotted" @click=${this.handleClick} @keydown=${this.handleKeydown} @change=${this.handleChange} @checkbox-change=${this.handleChange}>
           <div class="table-controls-container"></div>
 <div class="table-header" id="slotted-header"></div>
           <div class="table-body">
@@ -14955,7 +14968,7 @@ var SniceTable = (function (exports, snice) {
               else {
                   // Use traditional table layout
                   return snice.html /*html*/ `
-        <div class="snice-table" @click=${this.handleClick} @change=${this.handleChange} @checkbox-change=${this.handleChange}>
+        <div class="snice-table" @click=${this.handleClick} @keydown=${this.handleKeydown} @change=${this.handleChange} @checkbox-change=${this.handleChange}>
           <div class="table-controls-container"></div>
 <div class="table-frame">
             <div class="table-superheader" part="superheader">
@@ -15571,6 +15584,10 @@ var SniceTable = (function (exports, snice) {
                   if (this.sortable && column.sortable !== false) {
                       th.classList.add('sortable');
                       th.setAttribute('role', 'button');
+                      // A role=button must be focusable and named, or the keyboard cannot
+                      // sort at all. Matches the declarative header in snice-header.ts.
+                      th.setAttribute('tabindex', '0');
+                      th.setAttribute('aria-label', `Sort by ${column.label}`);
                       th.innerHTML = this.renderSortableHeader(column);
                   }
                   else {