@juspay/svelte-ui-components 4.27.5 → 4.28.0

package/dist/Table/properties.d.ts

@@ -2,6 +2,21 @@ import type { JSONValue } from 'type-decoder';
 import type { Snippet } from 'svelte';
 import type { TooltipPosition } from '../Tooltip/properties';
 export type SortDirection = 'asc' | 'desc';
+/**
+ * Which column a table is sorted by, addressed by column ID rather than by
+ * column index.
+ *
+ * `columnId` is a `TableColumn.id` in the keyed model, and the column's index
+ * rendered as a string in the positional model (`tableHeaders`/`tableData`),
+ * which has no other identity to offer. The distinction is the whole point of
+ * the type: an index follows a POSITION, so reordering or hiding a column
+ * silently re-points a stored sort at whichever field moved into that slot,
+ * while an ID follows the FIELD and a hidden field simply stops being sorted.
+ */
+export type TableSortState = {
+    columnId: string;
+    direction: SortDirection;
+};
 /**
  * Built-in cell renderer vocabulary for the keyed column model.
  *
@@ -358,9 +373,29 @@ export type TableCheckboxSelectionConfig = {
  */
 export type TablePaginationConfig = {
     mode?: 'client' | 'server';
-    /** 1-indexed current page. Server mode: controlled by the consumer. */
+    /**
+     * 1-indexed current page — never 0-indexed, so an adapter over a
+     * zero-based engine (TanStack's `pageIndex`) converts once, here, and not
+     * again inside its own page handler.
+     *
+     * Server mode: authoritative. Table renders this page and `onPageChange` is
+     * a request the consumer may honor, delay, or refuse. Client mode: the
+     * starting page — Table then owns paging, and clamps the page it renders to
+     * the last page that actually has rows, so a dataset that shrinks from
+     * outside cannot leave the reader on a blank page past the end.
+     */
     page?: number;
-    /** Rows per page. Default 10. */
+    /**
+     * Rows per page. Default 10.
+     *
+     * Server mode: declaring it makes it authoritative, the same way
+     * `checkboxSelection.selectedIds` takes ownership of selection —
+     * `onPageSizeChange` becomes a request the consumer answers by changing
+     * this value, and refusing leaves both the rows and the chrome at the size
+     * the server actually served. Omit it in server mode to keep the older
+     * behavior where the page-size selector updates the chrome on its own.
+     * Client mode: the starting size, which the selector then owns.
+     */
     pageSize?: number;
     /** Page-size selector options. Default [10, 25, 50, 100]; `[]` hides the selector. */
     pageSizeOptions?: number[];
@@ -432,6 +467,38 @@ export type TableSearchConfig = {
     searchableColumnIndices?: number[];
     testId?: string;
     displayMode?: 'toolbar' | 'inline';
+    /**
+     * Controlled search term. Omitted (every pre-existing consumer): the input
+     * owns its term through an internal state, unchanged. Provided: the input
+     * renders FROM this string and never mutates it — `onSearchTermChange`
+     * reports the would-be next term and the consumer decides, exactly as
+     * `checkboxSelection.selectedIds` does for selection.
+     *
+     * Independent of `onsearchchange`: that prop delegates FILTERING to the
+     * consumer, this one only delegates the visible term, so a controlled term
+     * still filters client-side unless `onsearchchange` is also supplied.
+     */
+    searchTerm?: string;
+    /**
+     * Reports every would-be search term, in controlled and uncontrolled mode
+     * alike. A controlled consumer feeds it back through `searchTerm`; an
+     * uncontrolled one may use it purely as a notification.
+     */
+    onSearchTermChange?: (searchTerm: string) => void;
+};
+/**
+ * Why the table is showing nothing, handed to the `empty` snippet.
+ *
+ * "No records yet" and "nothing matched your search" are different messages
+ * with different remedies, and only Table can tell them apart once the built-in
+ * search owns the term: a consumer reading `rows.length === 0` sees the same
+ * zero either way. `searchTerm` is passed alongside so the message can quote
+ * what was searched for.
+ */
+export type TableEmptyContext = {
+    reason: 'no-rows' | 'no-matches';
+    /** The term currently filtering the view; `''` when none is active. */
+    searchTerm: string;
 };
 export type TableProperties = OptionalTableProperties & TableEventProperties;
 /**
@@ -487,6 +554,26 @@ export type OptionalTableProperties = {
      * (e.g. via a server query).
      */
     sortMode?: 'client' | 'server';
+    /**
+     * Controlled sort overlay, keyed by column ID (see `TableSortState`).
+     *
+     * Omitted (every pre-existing consumer): today's uncontrolled behavior —
+     * Table owns the sort state and a header click re-sorts it directly.
+     * Provided: the header indicators, `aria-sort`, and the client-side reorder
+     * all render FROM this value and Table never mutates it; a header click
+     * reports the would-be next state through `onsortchange` (and the
+     * unchanged `onsort`) and the consumer decides. This is what lets a sort
+     * held in a URL or on a server be restored into the built-in header.
+     *
+     * `null` is a controlled value meaning "no column is sorted" — pass it to
+     * clear a sort without handing sort ownership back to the table. A
+     * `columnId` that no currently rendered column carries (a hidden column)
+     * sorts nothing, rather than falling through to a neighboring field.
+     *
+     * Independent of `sortMode`: `'server'` still means Table does not reorder
+     * rows locally, controlled or not.
+     */
+    sortState?: TableSortState | null;
     /** Built-in paginator (see TablePaginationConfig). */
     pagination?: TablePaginationConfig;
     /**
@@ -526,6 +613,32 @@ export type OptionalTableProperties = {
      * edge. Defaults to `false` (in-flow rendering, unchanged).
      */
     usePortal?: boolean;
+    /**
+     * Opt-in stacked "record card" layout below a 640px viewport, in place
+     * of the default horizontal scroll. Off by default — flipping every existing
+     * consumer's table to a different layout at some width they never chose
+     * would be a breaking change to a published library, not a bug fix.
+     *
+     * CSS alone cannot build this for a Web Component consumer: the classic
+     * `td::before { content: attr(data-label) }` recipe needs a rule INSIDE the
+     * shadow tree, which a `<sui-table>` consumer's stylesheet can never reach.
+     * So Table carries the column→label mapping itself and renders it as markup
+     * (a real, `aria-hidden` element, not generated content — see the mobile
+     * label span in the template), which is compiled into the shadow root
+     * exactly like the rest of this file's styles and works identically through
+     * `<sui-table>` and the Svelte component.
+     *
+     * Stacking cells vertically means their CSS `display` can no longer be
+     * `table-cell` — which is also what silently drops the browser's implicit
+     * table/row/cell accessibility roles in several browser/AT combinations.
+     * This prop therefore also stamps explicit `role="table"/"rowgroup"/"row"/
+     * "columnheader"/"cell"` back onto the native elements (harmless and
+     * redundant at desktop width, load-bearing at the mobile breakpoint) — the
+     * documented fix for "CSS reformats a table but the AX tree must not lose
+     * it". See the `.table-mobile-cards` block in `<style>` for the layout and
+     * the accessibility decision recorded there for the visible-label choice.
+     */
+    mobileCardLayout?: boolean;
     sortable?: boolean;
     sortableColumns?: number[];
     stickyHeader?: boolean;
@@ -537,7 +650,14 @@ export type OptionalTableProperties = {
     sortDescIcon?: Snippet;
     sortDefaultIcon?: Snippet;
     cell?: Snippet<[JSONValue, number, number]>;
-    empty?: Snippet;
+    /**
+     * Rendered in place of the rows when the view has none. Receives why
+     * (`TableEmptyContext`) so one snippet can serve both "no records yet" and
+     * "nothing matched", which are different messages with different remedies.
+     * Declaring it without parameters stays valid — every existing consumer is
+     * unaffected.
+     */
+    empty?: Snippet<[TableEmptyContext]>;
     classes?: string;
     /** Snippet rendered in a footer region below the table (e.g. a paginator). */
     paginatorSlot?: Snippet;
@@ -560,6 +680,17 @@ export type OptionalTableProperties = {
 export type TableEventProperties = {
     onrowclick?: (rowIndex: number, rowData: JSONValue[], originalIndex: number) => void;
     onsort?: (columnIndex: number, direction: SortDirection) => void;
+    /**
+     * Fires with every `onsort`, carrying the same change keyed by column ID —
+     * the input half of the controlled contract (`sortState`) speaks IDs, so the
+     * report does too, and a consumer never has to resolve an index against a
+     * column list that may since have changed.
+     *
+     * Only ever reports a sorted state: a header click cycles ascending →
+     * descending → ascending, exactly as before. Clearing a sort is the
+     * consumer's own act of setting `sortState` to `null`.
+     */
+    onsortchange?: (sortState: TableSortState) => void;
     /**
      * C2-3: When provided, the built-in client-side filtering is disabled and
      * this callback is called on every search input change instead, letting the

package/dist/Tabs/Tabs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { prefersReducedMotion } from '../utils';
+  import { getActiveElement } from '../_interaction/focus';
   import type { TabItem, TabsProperties } from './properties';
   import Img from '../Img/Img.svelte';
   import chevronLeftSvg from '../assets/chevron-left.svg?raw';
@@ -13,6 +14,9 @@
     activeKey,
     disabled = false,
     orientation = 'horizontal',
+    activationMode = 'automatic',
+    loop = true,
+    dir,
     testId,
     scrollLeftIcon,
     scrollRightIcon,
@@ -34,19 +38,66 @@
     return typeof item === 'string' ? item : item.label;
   }
 
-  const resolvedActiveIndex = $derived(
-    isObjectMode
-      ? items.findIndex((item) => {
-          const tabItem = toTabItem(item);
-          return tabItem !== null && tabItem.key === activeKey;
-        })
-      : activeIndex
-  );
+  // What "the focused tab" means across a re-render. A keyed item keeps its identity
+  // when the list is reordered or trimmed; a plain string list has nothing stabler
+  // than its position.
+  function identityOf(item: string | TabItem, index: number): string {
+    return typeof item === 'object' ? item.key : String(index);
+  }
+
+  function isItemDisabled(index: number): boolean {
+    if (disabled) {
+      return true;
+    }
+    const item = items.at(index);
+    return typeof item === 'object' && item.disabled === true;
+  }
+
+  // -1 whenever nothing is selected: an out-of-range or non-integer `activeIndex`, an
+  // `activeKey` matching no item, or object items with no `activeKey` at all. The list
+  // then shows no selection rather than inventing one, and still offers a way in.
+  const selectedIndex = $derived.by(() => {
+    if (isObjectMode) {
+      return typeof activeKey === 'string'
+        ? items.findIndex((item) => toTabItem(item)?.key === activeKey)
+        : -1;
+    }
+    return Number.isInteger(activeIndex) && activeIndex >= 0 && activeIndex < items.length
+      ? activeIndex
+      : -1;
+  });
 
   function isActiveItem(index: number): boolean {
-    return index === resolvedActiveIndex;
+    return index === selectedIndex;
   }
 
+  let focusedKey: string | null = $state(null);
+
+  const focusedIndex = $derived(
+    focusedKey === null
+      ? -1
+      : items.findIndex((item, index) => identityOf(item, index) === focusedKey)
+  );
+
+  const firstEnabledIndex = $derived(items.findIndex((_, index) => !isItemDisabled(index)));
+
+  // A tablist is one tab stop. It is the focused tab while the user is inside the
+  // list, the selected tab otherwise, and the first enabled tab when nothing is
+  // selected — so a list with no selection, or one whose selection is disabled, can
+  // still be reached by Tab. A fully disabled list has no tab stop at all.
+  const tabStopIndex = $derived.by(() => {
+    if (disabled) {
+      return -1;
+    }
+    if (focusedIndex >= 0 && !isItemDisabled(focusedIndex)) {
+      return focusedIndex;
+    }
+    if (selectedIndex >= 0 && !isItemDisabled(selectedIndex)) {
+      return selectedIndex;
+    }
+    return firstEnabledIndex;
+  });
+
   let scrollContainer: HTMLDivElement | null = null;
   let canScrollLeft = $state(false);
   let canScrollRight = $state(false);
@@ -63,6 +114,34 @@
   const showStartArrow = $derived(isVertical ? canScrollUp : canScrollLeft);
   const showEndArrow = $derived(isVertical ? canScrollDown : canScrollRight);
 
+  const explicitDir: 'ltr' | 'rtl' | null = $derived(dir === 'rtl' || dir === 'ltr' ? dir : null);
+
+  function tabElements(): HTMLElement[] {
+    return scrollContainer === null
+      ? []
+      : Array.from(scrollContainer.querySelectorAll<HTMLElement>('[role="tab"]'));
+  }
+
+  // Read at the moment a key is pressed rather than tracked as state: the direction
+  // that matters is the one in effect now, and it can come from an ancestor's `dir`
+  // attribute or from CSS, neither of which is reactive.
+  function isRightToLeft(): boolean {
+    if (explicitDir !== null) {
+      return explicitDir === 'rtl';
+    }
+    if (scrollContainer === null) {
+      return false;
+    }
+    const declared = scrollContainer.closest('[dir]');
+    if (declared !== null) {
+      const value = declared.getAttribute('dir');
+      if (value === 'rtl' || value === 'ltr') {
+        return value === 'rtl';
+      }
+    }
+    return getComputedStyle(scrollContainer).direction === 'rtl';
+  }
+
   function updateOverflow(): void {
     if (scrollContainer === null) {
       return;
@@ -105,109 +184,215 @@
     if (scrollContainer === null) {
       return;
     }
+    // This file already had a reduced-motion @media block, and it was counted as
+    // guarded on that alone -- but the block covers the indicator's CSS transition
+    // and cannot touch a scrollBy `behavior`, which is not a style. Right row, wrong
+    // reason: the JS scroll went on animating under the preference.
+    const behavior: ScrollBehavior = prefersReducedMotion() ? 'auto' : 'smooth';
     if (isVertical) {
       const amount = scrollContainer.clientHeight * 0.6;
       scrollContainer.scrollBy({
         top: edge === 'start' ? -amount : amount,
-        behavior: 'smooth'
+        behavior
       });
       return;
     }
     const amount = scrollContainer.clientWidth * 0.6;
     scrollContainer.scrollBy({
       left: edge === 'start' ? -amount : amount,
-      behavior: 'smooth'
+      behavior
     });
   }
 
-  function handleTabClick(index: number): void {
-    if (disabled) {
+  function activate(index: number): void {
+    if (isItemDisabled(index)) {
       return;
     }
+    const rawItem = items.at(index);
     if (isObjectMode) {
-      const rawItem = items.at(index);
       if (typeof rawItem !== 'object') {
         return;
       }
-      const tabItem = toTabItem(rawItem);
-      if (tabItem === null) {
+      if (rawItem.key === activeKey) {
         return;
       }
-      if (tabItem.key === activeKey) {
-        return;
-      }
-      onkeychange?.(tabItem.key);
-    } else {
-      if (index === activeIndex) {
-        return;
+      onkeychange?.(rawItem.key);
+      return;
+    }
+    if (typeof rawItem !== 'string' || index === activeIndex) {
+      return;
+    }
+    activeIndex = index;
+    onchange?.(index, rawItem);
+  }
+
+  function handleTabClick(index: number): void {
+    activate(index);
+  }
+
+  function focusTabAt(index: number): void {
+    const item = items.at(index);
+    if (typeof item !== 'string' && typeof item !== 'object') {
+      return;
+    }
+    focusedKey = identityOf(item, index);
+    tabElements().at(index)?.focus();
+  }
+
+  /** Next enabled item in `step`'s direction, or -1 when there is none to move to. */
+  function nextEnabledIndex(from: number, step: number): number {
+    const count = items.length;
+    if (count === 0) {
+      return -1;
+    }
+    let index = from;
+    for (let moved = 0; moved < count; moved += 1) {
+      index += step;
+      if (index < 0 || index >= count) {
+        if (!loop) {
+          return -1;
+        }
+        index = ((index % count) + count) % count;
       }
-      const rawLabel = items.at(index);
-      if (typeof rawLabel !== 'string') {
-        return;
+      if (!isItemDisabled(index)) {
+        return index;
       }
-      activeIndex = index;
-      onchange?.(index, rawLabel);
     }
+    return -1;
   }
 
-  // After a keyboard-driven selection the active item changes (directly in
-  // string mode; via the consumer's activeKey update in object mode), and the
-  // roving tabindex re-roves with it. Move DOM focus onto the newly active tab
-  // so the user can keep arrowing — without this, focus is stranded on a
-  // tabindex="-1" item and the roving pattern breaks down.
-  function moveFocusToActiveTab(): void {
-    void tick().then(() => {
-      const activeTab = scrollContainer?.querySelector<HTMLElement>('[role="tab"][tabindex="0"]');
-      activeTab?.focus();
-    });
+  function edgeIndex(edge: 'start' | 'end'): number {
+    return edge === 'start'
+      ? items.findIndex((_, index) => !isItemDisabled(index))
+      : items.reduce((found: number, _, index) => (isItemDisabled(index) ? found : index), -1);
   }
 
-  // WAI-ARIA APG tablist keyboard contract with activation-follows-focus:
-  // Arrow keys (orientation-aware) move selection to the adjacent tab with
-  // wrap-around, Home/End jump to the first/last tab. Without this, the roving
-  // tabindex makes every non-active tab keyboard-unreachable.
+  // WAI-ARIA APG tablist keyboard contract: orientation-aware arrow keys move through
+  // the enabled tabs, Home/End jump to the ends, and Enter/Space select. Whether
+  // moving also selects is `activationMode`'s decision.
   function handleKeydown(event: KeyboardEvent, index: number): void {
+    // A tablist owns bare arrow keys, not the browser's and the OS's shortcuts built
+    // on them. Consuming Ctrl+Home or Shift+ArrowRight would take away scroll-to-top
+    // and text selection while the tablist happens to hold focus.
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    if (disabled) {
+      return;
+    }
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      handleTabClick(index);
+      activate(index);
       return;
     }
-    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
-    const previousKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
-    let targetIndex: number | null = null;
-    if (event.key === nextKey) {
-      targetIndex = (index + 1) % items.length;
-    } else if (event.key === previousKey) {
-      targetIndex = (index - 1 + items.length) % items.length;
+    const rightToLeft = !isVertical && isRightToLeft();
+    const forwardKey = isVertical ? 'ArrowDown' : rightToLeft ? 'ArrowLeft' : 'ArrowRight';
+    const backwardKey = isVertical ? 'ArrowUp' : rightToLeft ? 'ArrowRight' : 'ArrowLeft';
+    let targetIndex: number;
+    if (event.key === forwardKey) {
+      targetIndex = nextEnabledIndex(index, 1);
+    } else if (event.key === backwardKey) {
+      targetIndex = nextEnabledIndex(index, -1);
     } else if (event.key === 'Home') {
-      targetIndex = 0;
+      targetIndex = edgeIndex('start');
     } else if (event.key === 'End') {
-      targetIndex = items.length - 1;
-    }
-    if (targetIndex === null) {
+      targetIndex = edgeIndex('end');
+    } else {
       return;
     }
     event.preventDefault();
-    if (disabled || targetIndex === index) {
+    if (targetIndex < 0 || targetIndex === index) {
+      return;
+    }
+    focusTabAt(targetIndex);
+    if (activationMode === 'automatic') {
+      activate(targetIndex);
+    }
+  }
+
+  function handleFocusIn(event: FocusEvent): void {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const index = tabElements().indexOf(target);
+    const item = items.at(index);
+    if (index < 0 || (typeof item !== 'string' && typeof item !== 'object')) {
+      return;
+    }
+    focusedKey = identityOf(item, index);
+  }
+
+  function handleFocusOut(event: FocusEvent): void {
+    const next = event.relatedTarget;
+    if (next instanceof HTMLElement && tabElements().includes(next)) {
       return;
     }
-    handleTabClick(targetIndex);
-    moveFocusToActiveTab();
+    focusedKey = null;
+  }
+
+  /** Identity of the selected item, for noticing that the selection itself changed. */
+  let lastSelectionKey: string | null = null;
+
+  // Keeps DOM focus and the roving tab stop honest after the list changes underneath
+  // them: the selection moved, the focused item was removed, reordered, or disabled.
+  // Runs from the same MutationObserver that already tracks overflow, so nothing here
+  // needs an effect. It never pulls focus into a list the user is not already in.
+  function reconcileFocus(): void {
+    const elements = tabElements();
+    const active = getActiveElement(scrollContainer);
+    const isInside = active instanceof HTMLElement && elements.includes(active);
+    const selectedItem = items.at(selectedIndex);
+    const selectionKey =
+      selectedIndex >= 0 && (typeof selectedItem === 'string' || typeof selectedItem === 'object')
+        ? identityOf(selectedItem, selectedIndex)
+        : null;
+    const selectionChanged = selectionKey !== lastSelectionKey;
+    lastSelectionKey = selectionKey;
+    if (tabStopIndex < 0) {
+      if (isInside && active instanceof HTMLElement) {
+        active.blur();
+      }
+      focusedKey = null;
+      return;
+    }
+    if (!isInside && focusedKey === null) {
+      return;
+    }
+    // Focus follows a selection made elsewhere, so a parent switching tabs does not
+    // strand the user on a tab that is no longer the selected one.
+    const targetIndex =
+      selectionChanged && selectedIndex >= 0 && !isItemDisabled(selectedIndex)
+        ? selectedIndex
+        : tabStopIndex;
+    const target = elements.at(targetIndex);
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const item = items.at(targetIndex);
+    if (typeof item === 'string' || typeof item === 'object') {
+      focusedKey = identityOf(item, targetIndex);
+    }
+    if (getActiveElement(target) !== target) {
+      target.focus();
+    }
   }
 
   function initOverflow(node: HTMLDivElement): () => void {
     scrollContainer = node;
     updateOverflow();
     updateIndicator();
+    reconcileFocus();
     const observer = new MutationObserver(() => {
       updateOverflow();
       updateIndicator();
+      reconcileFocus();
     });
     observer.observe(node, {
       childList: true,
       subtree: true,
       attributes: true,
-      attributeFilter: ['class']
+      attributeFilter: ['class', 'tabindex', 'aria-selected', 'aria-disabled']
     });
     const resizeObserver = new ResizeObserver(() => {
       updateOverflow();
@@ -226,7 +411,14 @@
   );
 </script>
 
-<div class={rootClass} class:disabled class:vertical={isVertical} data-pw={testId} testID={testId}>
+<div
+  class={rootClass}
+  class:disabled
+  class:vertical={isVertical}
+  {...explicitDir === null ? {} : { dir: explicitDir }}
+  data-pw={testId}
+  testID={testId}
+>
   {#if showStartArrow}
     <button
       class="tabs-arrow tabs-arrow-start"
@@ -249,8 +441,11 @@
     class:fade-bottom={canScrollDown}
     role="tablist"
     aria-orientation={isVertical ? 'vertical' : null}
+    data-orientation={orientation}
     {@attach initOverflow}
     onscroll={updateOverflow}
+    onfocusin={handleFocusIn}
+    onfocusout={handleFocusOut}
   >
     {#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
       {@const tabItem = toTabItem(item)}
@@ -263,8 +458,11 @@
         class:active={isActiveItem(index)}
         role="tab"
         aria-selected={isActiveItem(index)}
-        aria-disabled={disabled ? true : null}
-        tabindex={isActiveItem(index) ? 0 : -1}
+        aria-disabled={isItemDisabled(index) ? 'true' : null}
+        tabindex={index === tabStopIndex ? 0 : -1}
+        data-state={isActiveItem(index) ? 'active' : 'inactive'}
+        data-disabled={isItemDisabled(index) ? '' : null}
+        data-orientation={orientation}
         data-pw={tabItem?.testId}
         testID={tabItem?.testId}
         onclick={() => handleTabClick(index)}
@@ -412,7 +610,7 @@
   }
 
   .tabs-arrow:hover {
-    color: var(--tabs-arrow-hover-color, var(--tabs-active-color, #1a73e8));
+    color: var(--tabs-arrow-hover-color, var(--tabs-active-color, #0b57d0));
     background: var(
       --tabs-arrow-hover-background,
       var(--tabs-arrow-background, var(--tabs-bar-background, #ffffff))
@@ -507,7 +705,7 @@
   }
 
   .tabs-item.active {
-    color: var(--tabs-active-color, #1a73e8);
+    color: var(--tabs-active-color, #0b57d0);
     font-weight: var(--tabs-active-font-weight, 600);
     background: var(--tabs-active-background, transparent);
   }
@@ -608,7 +806,7 @@
     font-weight: var(--tabs-section-label-font-weight, 700);
     letter-spacing: var(--tabs-section-label-letter-spacing, 0.04em);
     text-transform: var(--tabs-section-label-text-transform, uppercase);
-    color: var(--tabs-section-label-color, var(--tabs-item-color, #999999));
+    color: var(--tabs-section-label-color, var(--tabs-item-color, #666666));
     white-space: nowrap;
     user-select: none;
   }

package/dist/Tabs/properties.d.ts

@@ -23,6 +23,13 @@ export type TabItem = {
      * `tab` snippet, since it sits outside the item row.
      */
     sectionLabel?: string;
+    /**
+     * Blocks selection of this item. It keeps its place and its `aria-disabled`
+     * state, but arrow keys, `Home`/`End` and clicks skip past it, and it never
+     * becomes the list's tab stop. An item selected from outside stays selected
+     * even while disabled, matching how a controlled parent's state is honoured.
+     */
+    disabled?: boolean;
 };
 export type TabsProperties = MandatoryTabsProperties & OptionalTabsProperties & TabsEventProperties;
 export type MandatoryTabsProperties = {
@@ -38,6 +45,22 @@ export type OptionalTabsProperties = {
      * rail) — indicator on the leading edge, scroll arrows point up/down.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * `'automatic'` (default) selects a tab as soon as arrow keys reach it, which is
+     * right when switching panels is instant. `'manual'` moves focus only, and waits
+     * for `Enter`, `Space` or a click — the WAI-ARIA APG recommendation when showing
+     * a panel is expensive, since arrowing past three tabs should not load three
+     * panels.
+     */
+    activationMode?: 'automatic' | 'manual';
+    /** Whether arrow keys wrap around the ends. `true` by default. */
+    loop?: boolean;
+    /**
+     * Which way horizontal arrow keys read. Omitted, the inherited document direction
+     * decides, so an app that sets `dir` on a wrapper needs nothing here. Vertical
+     * lists are unaffected: `ArrowDown` always means "later in the list".
+     */
+    dir?: 'ltr' | 'rtl';
     testId?: string;
     scrollLeftIcon?: Snippet;
     scrollRightIcon?: Snippet;