@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/tab-group/index.js

@@ -9,6 +9,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/roving.ts
+var enabledItems = (items) => items.filter((item) => !item.disabled);
+var rovingTargetOf = (enabled, value) => enabled.find((item) => item.value === value) ?? enabled[0];
+var stepIndex = (index, length, delta) => (Math.max(index, 0) + delta + length) % length;
+
 // src/components/tab-group/tab-group.ts
 import { html as html3 } from "lit";
 
@@ -142,7 +147,7 @@ var tabStyles = css2`
   }
 
   :host([disabled]) .tab {
-    color: var(--lt-color-neutral-300);
+    color: var(--lt-text-disabled);
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -185,6 +190,17 @@ var tabStyles = css2`
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
     color: var(--lt-text-primary);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    /* :host([data-variant='pills']) .tab must be listed explicitly, not just .tab — it outranks a bare .tab in
+       specificity (an extra :host() attribute selector), so it would otherwise keep its own transition. */
+    .tab,
+    :host([data-variant='pills']) .tab {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/tab/tab.ts
@@ -198,21 +214,13 @@ var Tab = class extends ThemeableElement {
     this.active = false;
     this.disabled = false;
     this.size = "md";
-    this._handleHostClick = () => {
-      if (this.disabled) return;
-      this.dispatchEvent(
-        new CustomEvent("tab-click", {
-          detail: { value: this.value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    };
+    // Enter/Space activate the tab exactly like a mouse click: a native `click` on the host, which
+    // `lt-tab-group` (or any consumer) listens for. There is no separate tab event.
     this._handleHostKeydown = (e) => {
       if (this.disabled) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        this._handleHostClick();
+        this.click();
       }
     };
   }
@@ -220,12 +228,10 @@ var Tab = class extends ThemeableElement {
     super.connectedCallback();
     this.setAttribute("role", "tab");
     this.tabIndex = 0;
-    this.addEventListener("click", this._handleHostClick);
     this.addEventListener("keydown", this._handleHostKeydown);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("click", this._handleHostClick);
     this.removeEventListener("keydown", this._handleHostKeydown);
   }
   updated(changedProperties) {
@@ -308,31 +314,64 @@ TabPanel = __decorateClass([
 ], TabPanel);
 
 // src/components/tab-group/tab-group.ts
+var groupCount = 0;
 var TabGroup = class extends ThemeableElement {
   constructor() {
     super(...arguments);
     this.value = "";
     this.appearance = "default";
     this.size = "md";
+    // Scopes generated tab/panel ids to this instance, so two groups on the same page whose tabs happen to share a
+    // `value` (e.g. two groups each with a "settings" tab) don't collide.
+    this._uid = `lt-tab-group-${groupCount++}`;
+    // Reacts to a slotted tab's `disabled` attribute changing after the fact (e.g. a consumer disabling a tab
+    // dynamically, with no accompanying change to this group's own value/size/appearance), so the roving tabindex
+    // and keyboard navigation immediately stop landing on it.
+    this._tabObserver = new MutationObserver(() => this.updateTabs());
     /**
      * Handles click events from tabs.
      * @private
      */
     this.handleTabClick = (e) => {
-      const tab = e.target;
-      if (tab.disabled) return;
-      this.value = tab.value;
-      this.updateTabs();
-      this.updatePanels();
-      this.dispatchEvent(
-        new CustomEvent("change", {
-          detail: { value: this.value },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this._select(e.currentTarget);
+    };
+    /**
+     * ArrowLeft/Right move the roving tab stop (and, per the automatic-activation model, select the tab); Home/End
+     * jump to the first/last enabled tab. Disabled tabs are skipped entirely, matching the radiogroup/listbox
+     * patterns elsewhere in the DS.
+     * @private
+     */
+    this.handleTabKeydown = (e) => {
+      const enabled = enabledItems(this.tabs ?? []);
+      if (enabled.length === 0) return;
+      const index = enabled.indexOf(e.currentTarget);
+      let next;
+      switch (e.key) {
+        case "ArrowRight":
+          next = enabled[stepIndex(index, enabled.length, 1)];
+          break;
+        case "ArrowLeft":
+          next = enabled[stepIndex(index, enabled.length, -1)];
+          break;
+        case "Home":
+          next = enabled[0];
+          break;
+        case "End":
+          next = enabled[enabled.length - 1];
+          break;
+      }
+      if (!next) return;
+      e.preventDefault();
+      this._select(next);
+      next.focus();
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._tabObserver.observe(this, { attributes: true, attributeFilter: ["disabled"], subtree: true });
+    this.updateTabs();
+    this.updatePanels();
+  }
   /**
    * Lifecycle: Called after the element's DOM has been updated.
    */
@@ -341,24 +380,29 @@ var TabGroup = class extends ThemeableElement {
     this.updatePanels();
   }
   /**
-   * Updates all tabs with the correct active state and size.
+   * Updates all tabs with the correct active/roving-tabindex state, size, and ARIA wiring.
    * @private
    */
   updateTabs() {
     if (!this.tabs) return;
+    const enabled = enabledItems(this.tabs);
+    const rovingTarget = rovingTargetOf(enabled, this.value);
     this.tabs.forEach((tab) => {
       tab.size = this.size;
       tab.active = tab.value === this.value;
+      tab.tabIndex = tab === rovingTarget ? 0 : -1;
+      if (!tab.id) tab.id = `${this._uid}-tab-${tab.value}`;
       if (this.appearance === "pills") {
         tab.setAttribute("data-variant", "pills");
       } else {
         tab.removeAttribute("data-variant");
       }
-      tab.addEventListener("tab-click", this.handleTabClick);
+      tab.addEventListener("click", this.handleTabClick);
+      tab.addEventListener("keydown", this.handleTabKeydown);
     });
   }
   /**
-   * Updates panel visibility based on selected value.
+   * Updates panel visibility and ARIA wiring based on selected value.
    * @private
    */
   updatePanels() {
@@ -370,8 +414,34 @@ var TabGroup = class extends ThemeableElement {
       } else {
         panel.removeAttribute("active");
       }
+      if (!panel.id) panel.id = `${this._uid}-panel-${panelValue}`;
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", `${this._uid}-tab-${panelValue}`);
+      if (!panel.hasAttribute("tabindex")) panel.setAttribute("tabindex", "0");
+    });
+    this.tabs?.forEach((tab) => {
+      const panel = this.panels.find((p) => (p.getAttribute("value") ?? p.getAttribute("data-value")) === tab.value);
+      if (panel) tab.setAttribute("aria-controls", panel.id);
+      else tab.removeAttribute("aria-controls");
     });
   }
+  /**
+   * Selects a tab (used by both the click and keyboard-navigation handlers below).
+   * @private
+   */
+  _select(tab) {
+    if (tab.disabled || tab.value === this.value) return;
+    this.value = tab.value;
+    this.updateTabs();
+    this.updatePanels();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   /**
    * Handles slot changes.
    * @private
@@ -385,9 +455,11 @@ var TabGroup = class extends ThemeableElement {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._tabObserver.disconnect();
     if (this.tabs) {
       this.tabs.forEach((tab) => {
-        tab.removeEventListener("tab-click", this.handleTabClick);
+        tab.removeEventListener("click", this.handleTabClick);
+        tab.removeEventListener("keydown", this.handleTabKeydown);
       });
     }
   }

package/dist/components/tab-group/tab-group.d.ts

@@ -63,25 +63,40 @@ export declare class TabGroup extends ThemeableElement {
      * @private
      */
     private panels;
+    private readonly _uid;
+    private readonly _tabObserver;
+    connectedCallback(): void;
     /**
      * Lifecycle: Called after the element's DOM has been updated.
      */
     firstUpdated(): void;
     /**
-     * Updates all tabs with the correct active state and size.
+     * Updates all tabs with the correct active/roving-tabindex state, size, and ARIA wiring.
      * @private
      */
     private updateTabs;
     /**
-     * Updates panel visibility based on selected value.
+     * Updates panel visibility and ARIA wiring based on selected value.
      * @private
      */
     private updatePanels;
+    /**
+     * Selects a tab (used by both the click and keyboard-navigation handlers below).
+     * @private
+     */
+    private _select;
     /**
      * Handles click events from tabs.
      * @private
      */
     private handleTabClick;
+    /**
+     * ArrowLeft/Right move the roving tab stop (and, per the automatic-activation model, select the tab); Home/End
+     * jump to the first/last enabled tab. Disabled tabs are skipped entirely, matching the radiogroup/listbox
+     * patterns elsewhere in the DS.
+     * @private
+     */
+    private handleTabKeydown;
     /**
      * Handles slot changes.
      * @private

package/dist/components/table/index.js

@@ -51,6 +51,8 @@ var tableStyles = css`
   }
 
   .table-container {
+    /* The loading overlay is absolutely positioned, so it needs this as its containing block. */
+    position: relative;
     overflow-x: auto;
     width: 100%;
   }
@@ -73,38 +75,46 @@ var tableStyles = css`
   th {
     color: var(--lt-text-default);
     font-weight: 600;
-    text-align: left;
+    text-align: start;
     white-space: nowrap;
   }
 
   th[data-align='center'] {
     text-align: center;
   }
-  th[data-align='right'] {
-    text-align: right;
+  th[data-align='end'] {
+    text-align: end;
   }
 
   /* Sortable headers */
   th.sortable {
     cursor: pointer;
+    padding: 0;
     user-select: none;
-    transition: background-color 120ms ease;
   }
 
   th.sortable:hover {
     background: var(--lt-bg-overlay);
   }
 
+  /* The button (not the th) carries the density padding, so it — not just a slice of it — is the click target. */
   th.sortable .header-content {
     align-items: center;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
     display: flex;
+    font: inherit;
     gap: var(--lt-spacing-2);
+    transition: background-color 120ms ease;
+    width: 100%;
   }
 
   th[data-align='center'] .header-content {
     justify-content: center;
   }
-  th[data-align='right'] .header-content {
+  th[data-align='end'] .header-content {
     justify-content: flex-end;
   }
 
@@ -155,8 +165,8 @@ var tableStyles = css`
   td[data-align='center'] {
     text-align: center;
   }
-  td[data-align='right'] {
-    text-align: right;
+  td[data-align='end'] {
+    text-align: end;
   }
 
   /* Density variants */
@@ -175,11 +185,30 @@ var tableStyles = css`
     padding: var(--lt-spacing-4) var(--lt-spacing-5);
   }
 
+  /* A sortable th's own padding moves onto its button (below), so the whole visible cell — not just the area
+     inside the th's padding — is the click target. Matches the density rules above in specificity and comes
+     after them in source order, so it wins the cascade regardless of selector order elsewhere in this file. */
+  :host th.sortable {
+    padding: 0;
+  }
+
+  :host([density='compact']) th.sortable .header-content {
+    padding: var(--lt-spacing-2) var(--lt-spacing-3);
+  }
+
+  :host([density='normal']) th.sortable .header-content {
+    padding: var(--lt-spacing-3) var(--lt-spacing-4);
+  }
+
+  :host([density='comfortable']) th.sortable .header-content {
+    padding: var(--lt-spacing-4) var(--lt-spacing-5);
+  }
+
   /* Sticky columns */
   th.sticky {
     background: var(--lt-bg-surface);
     box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
-    left: 0;
+    inset-inline-start: 0;
     position: sticky;
     z-index: 2;
   }
@@ -187,7 +216,7 @@ var tableStyles = css`
   td.sticky {
     background: var(--lt-bg-default);
     box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
-    left: 0;
+    inset-inline-start: 0;
     position: sticky;
     z-index: 1;
   }
@@ -211,12 +240,12 @@ var tableStyles = css`
 
   :host([bordered]) th,
   :host([bordered]) td {
-    border-right: 1px solid var(--lt-border-default);
+    border-inline-end: 1px solid var(--lt-border-default);
   }
 
   :host([bordered]) th:last-child,
   :host([bordered]) td:last-child {
-    border-right: none;
+    border-inline-end: none;
   }
 
   /* Empty state */
@@ -229,11 +258,11 @@ var tableStyles = css`
   /* Loading state */
   .loading-overlay {
     align-items: center;
-    background: rgba(255, 255, 255, 0.8);
+    background: color-mix(in srgb, var(--lt-bg-default) 80%, transparent);
     display: flex;
     height: 100%;
     justify-content: center;
-    left: 0;
+    inset-inline-start: 0;
     position: absolute;
     top: 0;
     width: 100%;
@@ -273,7 +302,7 @@ var tableStyles = css`
       gap: var(--lt-spacing-2);
       grid-template-columns: 120px 1fr;
       padding: var(--lt-spacing-2) 0;
-      text-align: left;
+      text-align: start;
     }
 
     :host([responsive-mode='stack']) td::before {
@@ -293,14 +322,30 @@ var tableStyles = css`
     }
   }
 
-  th.sortable:focus-visible {
+  th.sortable .header-content:focus-visible {
     outline: 2px solid var(--lt-interactive-primary-bg);
     outline-offset: -2px;
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    th.sortable .header-content,
+    .sort-icon,
+    tbody tr {
+      transition: none;
+    }
+  }
 `;
 
 // src/components/table/table.ts
 import "@latty-ds/icons";
+var compareValues = (a, b) => {
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "bigint" && typeof b === "bigint") return a < b ? -1 : a > b ? 1 : 0;
+  return String(a).localeCompare(String(b), void 0, { numeric: true });
+};
 var jsonArrayConverter = {
   fromAttribute(value) {
     if (value === null) return [];
@@ -324,6 +369,7 @@ var Table = class extends ThemeableElement {
     this.bordered = false;
     this.loading = false;
     this.emptyMessage = "No data available";
+    this.label = "";
     this.rowKey = "";
     this.internalSort = null;
     this.sortedData = [];
@@ -365,12 +411,7 @@ var Table = class extends ThemeableElement {
       if (aValue == null && bValue == null) return 0;
       if (aValue == null) return 1;
       if (bValue == null) return -1;
-      let comparison = 0;
-      if (typeof aValue === "number" && typeof bValue === "number") {
-        comparison = aValue - bValue;
-      } else {
-        comparison = String(aValue).localeCompare(String(bValue));
-      }
+      const comparison = compareValues(aValue, bValue);
       return this.currentSort.direction === "asc" ? comparison : -comparison;
     });
     this.sortedData = sorted;
@@ -393,7 +434,7 @@ var Table = class extends ThemeableElement {
       this.internalSort = newSort;
     }
     this.dispatchEvent(
-      new CustomEvent("sort-change", {
+      new CustomEvent("sortchange", {
         bubbles: true,
         composed: true,
         detail: {
@@ -446,15 +487,7 @@ var Table = class extends ThemeableElement {
         sticky: !!column.sticky,
         "hide-on-mobile": !!column.hideOnMobile
       })}
-                data-align=${column.align || "left"}
-                @click=${() => this.handleHeaderClick(column)}
-                @keydown=${(e) => {
-        if (column.sortable && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-          this.handleHeaderClick(column);
-        }
-      }}
-                tabindex=${column.sortable ? "0" : "-1"}
+                data-align=${column.align || "start"}
                 aria-sort=${column.sortable ? this.currentSort?.key === column.key ? this.currentSort.direction === "asc" ? "ascending" : "descending" : "none" : nothing}
                 style=${styleMap({
         ...column.width ? { width: column.width } : {},
@@ -462,10 +495,20 @@ var Table = class extends ThemeableElement {
       })}
               >
                 ${column.sortable ? html`
-                      <div class="header-content">
+                      <button
+                        type="button"
+                        class="header-content"
+                        @click=${() => this.handleHeaderClick(column)}
+                        @keydown=${(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.handleHeaderClick(column);
+        }
+      }}
+                      >
                         <span>${column.label}</span>
                         ${this.renderSortIcon(column)}
-                      </div>
+                      </button>
                     ` : column.label}
               </th>
             `
@@ -483,46 +526,44 @@ var Table = class extends ThemeableElement {
       return html`
         <tbody>
           <tr>
-            <td colspan=${columns.length} class="empty-state">${this.emptyMessage}</td>
+            <td colspan=${Math.max(columns.length, 1)} class="empty-state">${this.emptyMessage}</td>
           </tr>
         </tbody>
       `;
     }
-    return html`
-      <tbody>
-        ${repeat(
-      this.sortedData,
-      (row) => this.rowKey ? row[this.rowKey] : JSON.stringify(row),
-      (row, index) => html`
-            <tr>
-              ${columns.map(
-        (column) => html`
-                  <td
-                    class=${classMap({
-          sticky: !!column.sticky,
-          "hide-on-mobile": !!column.hideOnMobile
-        })}
-                    data-align=${column.align || "left"}
-                    data-label=${column.label}
-                    style=${styleMap({
-          ...column.width ? { width: column.width } : {},
-          ...column.minWidth ? { minWidth: column.minWidth } : {}
-        })}
-                  >
-                    ${this.renderCell(column, row, index)}
-                  </td>
-                `
-      )}
-            </tr>
+    const renderRow = (row, index) => html`
+      <tr>
+        ${columns.map(
+      (column) => html`
+            <td
+              class=${classMap({
+        sticky: !!column.sticky,
+        "hide-on-mobile": !!column.hideOnMobile
+      })}
+              data-align=${column.align || "start"}
+              data-label=${column.label}
+              style=${styleMap({
+        ...column.width ? { width: column.width } : {},
+        ...column.minWidth ? { minWidth: column.minWidth } : {}
+      })}
+            >
+              ${this.renderCell(column, row, index)}
+            </td>
           `
     )}
+      </tr>
+    `;
+    const rows = this.rowKey ? repeat(this.sortedData, (row) => row[this.rowKey], renderRow) : this.sortedData.map(renderRow);
+    return html`
+      <tbody>
+        ${rows}
       </tbody>
     `;
   }
   render() {
     return html`
       <div class="table-container">
-        <table>
+        <table aria-label=${this.label || nothing}>
           ${this.renderHeader()} ${this.renderBody()}
         </table>
         ${this.loading ? html`
@@ -562,6 +603,9 @@ __decorateClass([
 __decorateClass([
   property2({ attribute: "empty-message" })
 ], Table.prototype, "emptyMessage", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Table.prototype, "label", 2);
 __decorateClass([
   property2({ attribute: "row-key" })
 ], Table.prototype, "rowKey", 2);

package/dist/components/table/table.d.ts

@@ -19,14 +19,14 @@ import '@latty-ds/icons';
  * - Hide columns on mobile
  * - Accessible with keyboard navigation
  *
- * @fires sort-change - Fired when sort changes
+ * @fires sortchange - Fired when sort changes
  *
  * @example
  * ```typescript
  * const columns = [
  *   { key: 'name', label: 'Name', sortable: true },
  *   { key: 'email', label: 'Email', sortable: true },
- *   { key: 'age', label: 'Age', sortable: true, align: 'right' }
+ *   { key: 'age', label: 'Age', sortable: true, align: 'end' }
  * ];
  *
  * const data = [
@@ -104,6 +104,12 @@ export declare class Table<T = Record<string, unknown>> extends ThemeableElement
      * @default 'No data available'
      */
     emptyMessage: string;
+    /**
+     * Accessible name for the table. Required when a page has more than one table, since column labels alone
+     * don't tell assistive tech which table it's in.
+     * @default ''
+     */
+    label: string;
     /**
      * Field name to use as a stable row identity key for efficient DOM reuse during sorts/updates.
      * When omitted, falls back to the row's JSON representation.

package/dist/components/table/table.types.d.ts

@@ -18,9 +18,10 @@ export type TableDensity = 'compact' | 'normal' | 'comfortable';
  */
 export type SortDirection = 'asc' | 'desc' | null;
 /**
- * Alignment for cell content.
+ * Alignment for cell content. Logical, not physical — `'end'` means "the trailing edge of the reading
+ * direction" (right in LTR, left in RTL), matching CSS `text-align: end` rather than `text-align: right`.
  */
-export type CellAlign = 'left' | 'center' | 'right';
+export type CellAlign = 'start' | 'center' | 'end';
 /**
  * Configuration for a table column.
  */
@@ -54,7 +55,7 @@ export interface TableColumn<T = Record<string, unknown>> {
     minWidth?: string;
     /**
      * Text alignment for this column.
-     * @default 'left'
+     * @default 'start'
      */
     align?: CellAlign;
     /**

package/dist/components/text/index.js

@@ -200,6 +200,20 @@ var textStyles = css`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -224,7 +238,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };