@juspay/svelte-ui-components 4.33.2 → 4.34.0

package/dist/Input/Input.svelte

@@ -11,6 +11,8 @@
     placeholder = '',
     dataType = 'text',
     label = '',
+    labelSuffix,
+    autofocus = false,
     onErrorMessage = '',
     infoMessage = '',
     validators = [],
@@ -110,6 +112,19 @@
 
   let inputElement: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
 
+  // Guarded to once per mount: without hasAutoFocused, a later element swap
+  // (useTextArea toggling, or a left/right-icon layout change moving
+  // fieldElement's render site) replaces inputElement and this effect would
+  // refocus the field again, long after the user may have moved on.
+  let hasAutoFocused = false;
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (autofocus && inputElement && !hasAutoFocused) {
+      inputElement.focus();
+      hasAutoFocused = true;
+    }
+  });
+
   let validationState = $derived.by(() => {
     const valueValidation: ValidationState = validateInput(
       value,
@@ -313,7 +328,16 @@
 </script>
 
 <div class="input-container {classes ?? ''}" class:input-error={showError && !actionInput}>
-  {#if hasVisibleLabel}
+  <!-- One chain, so the label-only default is the same single block it always was. -->
+  {#if hasVisibleLabel && typeof labelSuffix === 'function'}
+    <div class="label-row">
+      <label class="label" for={effectiveId}>
+        {label}{#if isRequired}<span class="input-mandatory-asterisk" aria-hidden="true">*</span
+          >{/if}
+      </label>
+      <span>{@render labelSuffix()}</span>
+    </div>
+  {:else if hasVisibleLabel}
     <label class="label" for={effectiveId}>
       {label}{#if isRequired}<span class="input-mandatory-asterisk" aria-hidden="true">*</span>{/if}
     </label>
@@ -542,6 +566,26 @@
     width: var(--input-container-width, fit-content);
   }
 
+  /* Only present when labelSuffix is supplied (and written as a direct child of the
+     container, so a `label-row` class a consumer passes through `classes`, which lands
+     on the container itself, cannot match): a flex item's own margin is
+     space around just that item, not something later content in the column
+     can rely on to open up room below the whole row, so the row itself
+     carries the margin a lone .label used to carry on its own below. */
+  .input-container > .label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--input-label-row-gap, 8px);
+    margin: var(--input-label-msg-margin, 0px 0px 6px 0px);
+  }
+
+  /* A row-wrapped label hands its margin to the row above, so it does not
+     take it twice. Only exists in the labelSuffix branch. */
+  .input-container > .label-row > .label {
+    margin: 0;
+  }
+
   .label {
     font-weight: var(--input-label-msg-text-weight, 400);
     font-size: var(--input-label-msg-text-size, 12px);

package/dist/Input/properties.d.ts

@@ -32,6 +32,21 @@ export type OptionalInputProperties = {
      */
     dataType?: InputDataType;
     label?: string | null;
+    /**
+     * Rendered beside the label, right-aligned (a status Pill, a character
+     * count, a short hint). It sits outside the `<label>`, so it never joins the
+     * field's accessible name, but it stays readable to assistive tech. Mark a
+     * purely decorative suffix `aria-hidden` yourself. Ignored without a
+     * visible `label` (there is no label row for it to sit in).
+     */
+    labelSuffix?: Snippet;
+    /**
+     * Focuses the field once it exists, via a plain native `.focus()` —
+     * deliberately not the exported `focus()` method, which also
+     * `scrollIntoView`s smoothly; a field that already exists to be typed
+     * into (a single-field dialog, say) does not need to scroll to itself.
+     */
+    autofocus?: boolean;
     onErrorMessage?: string | null;
     infoMessage?: string | null;
     validators?: CustomValidator[];

package/dist/KeyValue/KeyValue.svelte

@@ -40,7 +40,7 @@
           {item.label}
         {/if}
       </dt>
-      <dd class="key-value-value">
+      <dd class="key-value-value" title={item.title}>
         {#if valueSnippet}
           {@render valueSnippet(item, index)}
         {:else}
@@ -104,8 +104,12 @@
     line-height: var(--keyvalue-label-line-height, 1.4);
   }
 
+  /* The two cells' flex as variables, not just the label's basis: a label
+     that grows and truncates beside a content-sized value (a long name with a
+     short figure on the right) needs grow/shrink too, and a consumer's own
+     .key-value-label rule could only lose to this scoped one. */
   .key-value--horizontal .key-value-label {
-    flex: 0 0 var(--keyvalue-label-width, 140px);
+    flex: var(--keyvalue-label-flex, 0 0 var(--keyvalue-label-width, 140px));
   }
 
   .key-value-value {
@@ -117,8 +121,17 @@
     overflow-wrap: anywhere;
   }
 
+  /* Unset, each inherits -- exactly what the cell did before these hooks. Zero specificity,
+     so a consumer's own rule on the cell (`dd { text-align: right }`) keeps winning, as it
+     did before the hooks existed. */
+  :where(.key-value-value) {
+    font-family: var(--keyvalue-value-font-family, inherit);
+    text-align: var(--keyvalue-value-text-align, inherit);
+    font-variant-ligatures: var(--keyvalue-value-font-variant-ligatures, inherit);
+  }
+
   .key-value--horizontal .key-value-value {
-    flex: 1 1 auto;
+    flex: var(--keyvalue-value-flex, 1 1 auto);
     min-width: 0;
   }
 

package/dist/KeyValue/properties.d.ts

@@ -8,6 +8,8 @@ export type KeyValueItem = {
      * `hideEmpty` is `true` (the default), or rendered as `emptyText` otherwise.
      */
     value?: string | number | null;
+    /** Tooltip for the value cell, as its native `title` (e.g. the full path behind a shortened one). */
+    title?: string;
     /** Optional per-item test id, emitted as `data-pw` on the item wrapper. */
     testId?: string;
 };

package/dist/Progress/Progress.svelte

@@ -5,9 +5,13 @@
   let {
     value,
     max = 100,
+    leadingLabel,
     showLabel = false,
     animateValue = false,
     ariaLabel,
+    headerStart,
+    headerEnd,
+    note,
     testId,
     classes
   }: ProgressProperties = $props();
@@ -40,49 +44,89 @@
   let labelText = $derived(isIndeterminate ? 'Loading' : `${Math.round(percentage)}%`);
 </script>
 
-<div
-  class="container {classes ?? ''}"
-  data-pw={typeof testId === 'string' ? testId : null}
-  testID={typeof testId === 'string' ? testId : null}
-  role="progressbar"
-  aria-valuenow={isIndeterminate ? null : preciseValueNow}
-  aria-valuemin={0}
-  aria-valuemax={100}
-  aria-valuetext={isIndeterminate ? 'indeterminate' : null}
-  aria-busy={isIndeterminate ? true : null}
-  aria-label={ariaLabel ?? labelText}
->
-  <div class="track">
-    <div
-      class="bar"
-      class:indeterminate={isIndeterminate}
-      style:width={isIndeterminate ? null : `${percentage}%`}
-    ></div>
-  </div>
-  {#if showLabel && !isIndeterminate}
-    <div class="label">
-      {#if animateValue}
-        <!-- The rounded percentage is already the display value labelText
-             computes, so it is passed as a plain number rather than through
-             `format`: `AnimatedNumber`'s Intl percent style expects a 0-1
-             fraction and would re-derive a different number from this
-             already-0-100 one. The % is a literal beside it instead, exactly
-             mirroring what labelText already spells out below. -->
-        <!-- The unit goes INSIDE AnimatedNumber, not beside it. The odometer
-             carries role="img" with its own aria-label, so a unit left outside is
-             invisible to anyone navigating by graphic -- the rotor reads "75" with
-             no sign of what it measures. Passing the formatted string keeps the
-             unit in the accessible name; only the digits move, since the string
-             path rolls the characters that changed and leaves the rest. -->
-        <AnimatedNumber value={`${Math.round(percentage)}%`} />
-      {:else}
-        {labelText}
-      {/if}
+<!-- The bar itself. Rendered bare, exactly as it always was, unless a header
+     or note is passed: only then does a `.progress-root` wrap it. -->
+{#snippet trackRow()}
+  <div
+    class="container {classes ?? ''}"
+    data-pw={typeof testId === 'string' ? testId : null}
+    testID={typeof testId === 'string' ? testId : null}
+    role="progressbar"
+    aria-valuenow={isIndeterminate ? null : preciseValueNow}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    aria-valuetext={isIndeterminate ? 'indeterminate' : null}
+    aria-busy={isIndeterminate ? true : null}
+    aria-label={ariaLabel ?? labelText}
+  >
+    {#if typeof leadingLabel === 'function'}
+      {@render leadingLabel()}
+    {/if}
+    <div class="track">
+      <div
+        class="bar"
+        class:indeterminate={isIndeterminate}
+        style:width={isIndeterminate ? null : `${percentage}%`}
+      ></div>
     </div>
-  {/if}
-</div>
+    {#if showLabel && !isIndeterminate}
+      <div class="label">
+        {#if animateValue}
+          <!-- The rounded percentage is already the display value labelText
+               computes, so it is passed as a plain number rather than through
+               `format`: `AnimatedNumber`'s Intl percent style expects a 0-1
+               fraction and would re-derive a different number from this
+               already-0-100 one. The % is a literal beside it instead, exactly
+               mirroring what labelText already spells out below. -->
+          <!-- The unit goes INSIDE AnimatedNumber, not beside it. The odometer
+               carries role="img" with its own aria-label, so a unit left outside is
+               invisible to anyone navigating by graphic -- the rotor reads "75" with
+               no sign of what it measures. Passing the formatted string keeps the
+               unit in the accessible name; only the digits move, since the string
+               path rolls the characters that changed and leaves the rest. -->
+          <AnimatedNumber value={`${Math.round(percentage)}%`} />
+        {:else}
+          {labelText}
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+{#if typeof headerStart === 'function' || typeof headerEnd === 'function' || typeof note === 'function'}
+  <div class="progress-root">
+    {#if typeof headerStart === 'function' || typeof headerEnd === 'function'}
+      <div class="progress-header">
+        {#if typeof headerStart === 'function'}{@render headerStart()}{/if}
+        {#if typeof headerEnd === 'function'}{@render headerEnd()}{/if}
+      </div>
+    {/if}
+    {@render trackRow()}
+    {#if typeof note === 'function'}
+      <div class="progress-note">{@render note()}</div>
+    {/if}
+  </div>
+{:else}
+  {@render trackRow()}
+{/if}
 
 <style>
+  /* Only present when a header or note is passed; layout only, no type or
+     colour -- the snippets' content is the caller's to style. The names are prefixed so that a
+     class like `header` or `root`, which a consumer passes through `classes` to the
+     progressbar itself, cannot match them. */
+  .progress-root {
+    display: grid;
+    gap: var(--progress-root-gap, 5px);
+  }
+
+  .progress-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--progress-header-gap, 8px);
+  }
+
   .container {
     display: flex;
     align-items: center;
@@ -92,13 +136,24 @@
   }
 
   .track {
-    flex: 1;
+    flex: var(--progress-track-flex, 1);
     height: var(--progress-track-height, 8px);
     background: var(--progress-track-background, #e0e0e0);
     border-radius: var(--progress-track-border-radius, var(--radius, 4px));
     overflow: hidden;
   }
 
+  /* A track-scoped width is separate from --progress-container-width: the container also
+     holds leadingLabel/showLabel and their gaps, so sizing IT would size the whole row, not
+     the bar. Grow/shrink stay in the flex shorthand alongside the basis specifically so an
+     explicit width isn't silently stretched or shrunk away from by a consumer who set only
+     --progress-track-width and left --progress-track-flex at its default. Zero specificity,
+     so a consumer's own width rule for the track keeps winning, as it did before this hook
+     existed. */
+  :where(.track) {
+    width: var(--progress-track-width, auto);
+  }
+
   .bar {
     height: 100%;
     background: var(--progress-bar-background, #2196f3);

package/dist/Progress/properties.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 export type ProgressProperties = MandatoryProgressProperties & OptionalProgressProperties;
 export type MandatoryProgressProperties = {
     value: number;
@@ -11,6 +12,12 @@ export type OptionalProgressProperties = {
      * `aria-valuenow` and the percentage fallback text below.
      */
     max?: number;
+    /**
+     * Rendered in `.container` before the track, e.g. a fixed caption a
+     * percentage label shouldn't replace. Independent of `showLabel`, which
+     * renders after the track instead.
+     */
+    leadingLabel?: Snippet;
     showLabel?: boolean;
     /**
      * Routes the completion percentage through `AnimatedNumber` instead of
@@ -32,6 +39,18 @@ export type OptionalProgressProperties = {
      * fallback reads `"0%"`.
      */
     ariaLabel?: string;
+    /**
+     * Left end of a header row above the track, e.g. the bar's name. With
+     * `headerEnd` it makes the label/value line a metered bar usually carries
+     * ("Context  42%"). Layout only: the content's type and colour are the
+     * caller's. When none of `headerStart`, `headerEnd` and `note` is passed,
+     * the component renders exactly as before, with no extra wrapper.
+     */
+    headerStart?: Snippet;
+    /** Right end of the header row (see `headerStart`), e.g. the value text. */
+    headerEnd?: Snippet;
+    /** A line under the track, e.g. "resets in 2h" (see `headerStart`). */
+    note?: Snippet;
     testId?: string;
     classes?: string;
 };

package/dist/Snippet/Snippet.svelte

@@ -13,6 +13,7 @@
     copyIcon,
     copiedLabel = 'Copied!',
     copyResetMs = 2000,
+    multiline = false,
     oncopy,
     onerror,
     classes
@@ -44,11 +45,15 @@
 
 <div
   class="snippet {classes ?? ''}"
+  data-multiline={multiline ? '' : null}
+  data-has-copy={multiline && showCopyButton ? '' : null}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
   <code class="snippet-code">
-    <span class="snippet-prompt">{prompt}</span>
+    {#if !multiline || prompt !== ''}
+      <span class="snippet-prompt">{prompt}</span>
+    {/if}
     <span class="snippet-text">{text}</span>
   </code>
   {#if showCopyButton}
@@ -90,6 +95,10 @@
     gap: var(--snippet-gap, 8px);
     background: var(--snippet-background, #1e1e1e);
     border: var(--snippet-border, 1px solid #333);
+    /* One side on its own, for a block that sits flush under a header and wants
+       only a separator above it. Defaults to the whole border, so unset it is
+       the shorthand above. */
+    border-top: var(--snippet-border-top, var(--snippet-border, 1px solid #333));
     border-radius: var(--snippet-border-radius, var(--radius, 4px));
     padding: var(--snippet-padding, 12px 16px);
     font-family: var(--snippet-font-family, monospace);
@@ -106,6 +115,41 @@
     min-width: 0;
   }
 
+  /* multiline: every line of long output, not one ellipsised line. Declared
+     here rather than left to a consumer's own selectors, which can only TIE
+     these scoped rules on specificity -- and then stylesheet order, which
+     differs between dev and a production build, decides the layout. Marked by
+     data attributes, not classes: a class directive would strip a `multiline`
+     class a consumer already passes through `classes`, and these rules would
+     then style every snippet that carries one. */
+  .snippet[data-multiline] {
+    display: block;
+    position: relative;
+  }
+
+  .snippet[data-multiline] .snippet-code {
+    display: block;
+    overflow: auto;
+    max-height: var(--snippet-code-max-height, none);
+  }
+
+  .snippet[data-multiline][data-has-copy] .snippet-code {
+    padding-right: var(--snippet-code-padding-right, 32px);
+  }
+
+  .snippet[data-multiline] .snippet-text {
+    display: inline;
+    white-space: pre;
+    overflow: visible;
+    text-overflow: clip;
+  }
+
+  .snippet[data-multiline] .snippet-copy {
+    position: absolute;
+    top: var(--snippet-copy-inset, 8px);
+    right: var(--snippet-copy-inset, 8px);
+  }
+
   .snippet-prompt {
     color: var(--snippet-prompt-color, #888);
     margin-right: var(--snippet-prompt-margin-right, 8px);

package/dist/Snippet/properties.d.ts

@@ -12,6 +12,14 @@ export type OptionalSnippetProperties = {
     copiedLabel?: string;
     /** Milliseconds before the copied feedback reverts to the copy icon. Defaults to `2000`. */
     copyResetMs?: number;
+    /**
+     * Lays the snippet out as a pre-formatted block for long output (a command's
+     * stdout, a JSON dump) instead of the default one-line, ellipsised chip:
+     * every line shows, the code area scrolls (capped by
+     * `--snippet-code-max-height`), the copy button sits in the top-right corner,
+     * and an empty `prompt` renders nothing rather than an indent.
+     */
+    multiline?: boolean;
     classes?: string;
 };
 export type SnippetEventProperties = {

package/dist/Tabs/Tabs.svelte

@@ -17,16 +17,30 @@
     activationMode = 'automatic',
     loop = true,
     dir,
+    navigation = false,
     testId,
     scrollLeftIcon,
     scrollRightIcon,
     tab,
     classes,
+    ariaLabel,
     onchange,
     onkeychange
   }: TabsProperties = $props();
 
   const isVertical = $derived(orientation === 'vertical');
+  // `navigation` is passed AND every item has an href: the bar is site navigation, not a
+  // tab set. An href alone changes nothing, so items that already carry one as routing data
+  // keep rendering and behaving as the tab set they always did.
+  const isLinkMode = $derived(
+    navigation &&
+      Array.isArray(items) &&
+      items.length > 0 &&
+      items.every(
+        (item: string | TabItem) =>
+          typeof item === 'object' && typeof item.href === 'string' && item.href.length > 0
+      )
+  );
 
   const isObjectMode = $derived(items.length > 0 && typeof items.at(0) === 'object');
 
@@ -158,7 +172,8 @@
   }
 
   function updateIndicator(): void {
-    if (scrollContainer === null) {
+    if (scrollContainer === null || isLinkMode) {
+      indicatorReady = false;
       return;
     }
     const activeEl = scrollContainer.querySelector<HTMLElement>('.tabs-item.active');
@@ -230,6 +245,22 @@
     activate(index);
   }
 
+  // Link mode has no activate() of its own to consult -- the browser navigates on click, which
+  // is the point of a real <a href>. A disabled item's `aria-disabled` is cosmetic to a pointer
+  // or native Enter/Space activation, so this is the only place that actually honours
+  // TabItem.disabled's documented "clicks skip past it" for a link-mode item.
+  function blockIfDisabled(index: number, event: Event): void {
+    if (isItemDisabled(index)) {
+      event.preventDefault();
+    }
+  }
+
+  function handleLinkKeydown(index: number, event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      blockIfDisabled(index, event);
+    }
+  }
+
   function focusTabAt(index: number): void {
     const item = items.at(index);
     if (typeof item !== 'string' && typeof item !== 'object') {
@@ -433,19 +464,21 @@
       {/if}
     </button>
   {/if}
-  <div
+  <svelte:element
+    this={isLinkMode ? 'nav' : 'div'}
     class="tabs-bar"
     class:fade-left={canScrollLeft}
     class:fade-right={canScrollRight}
     class:fade-top={canScrollUp}
     class:fade-bottom={canScrollDown}
-    role="tablist"
-    aria-orientation={isVertical ? 'vertical' : null}
+    role={isLinkMode ? null : 'tablist'}
+    aria-orientation={isLinkMode || !isVertical ? null : 'vertical'}
+    aria-label={typeof ariaLabel === 'string' ? ariaLabel : null}
     data-orientation={orientation}
     {@attach initOverflow}
     onscroll={updateOverflow}
-    onfocusin={handleFocusIn}
-    onfocusout={handleFocusOut}
+    onfocusin={isLinkMode ? null : handleFocusIn}
+    onfocusout={isLinkMode ? null : handleFocusOut}
   >
     {#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
       {@const tabItem = toTabItem(item)}
@@ -453,20 +486,27 @@
       {#if typeof tabItem?.sectionLabel === 'string' && tabItem.sectionLabel.length > 0}
         <div class="tabs-section-label" aria-hidden="true">{tabItem.sectionLabel}</div>
       {/if}
-      <div
+      <svelte:element
+        this={isLinkMode ? 'a' : 'div'}
+        href={isLinkMode ? tabItem?.href : null}
         class="tabs-item"
         class:active={isActiveItem(index)}
-        role="tab"
-        aria-selected={isActiveItem(index)}
+        role={isLinkMode ? null : 'tab'}
+        aria-selected={isLinkMode ? null : isActiveItem(index)}
+        aria-current={isLinkMode && isActiveItem(index) ? 'page' : null}
         aria-disabled={isItemDisabled(index) ? 'true' : null}
-        tabindex={index === tabStopIndex ? 0 : -1}
+        tabindex={isLinkMode ? null : 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)}
-        onkeydown={(event) => handleKeydown(event, index)}
+        onclick={isLinkMode
+          ? (event: MouseEvent) => blockIfDisabled(index, event)
+          : () => handleTabClick(index)}
+        onkeydown={isLinkMode
+          ? (event: KeyboardEvent) => handleLinkKeydown(index, event)
+          : (event: KeyboardEvent) => handleKeydown(event, index)}
       >
         {#if typeof tab === 'function'}
           {@render tab({
@@ -486,9 +526,9 @@
             <span class="tabs-item-status status-{tabItem.status}" aria-hidden="true"></span>
           {/if}
         {/if}
-      </div>
+      </svelte:element>
     {/each}
-    {#if indicatorReady}
+    {#if indicatorReady && !isLinkMode}
       <span
         class="tabs-indicator"
         aria-hidden="true"
@@ -497,7 +537,7 @@
           : `left: ${indicatorLeft}px; width: ${indicatorWidth}px;`}
       ></span>
     {/if}
-  </div>
+  </svelte:element>
   {#if showEndArrow}
     <button
       class="tabs-arrow tabs-arrow-end"
@@ -638,7 +678,7 @@
     border-radius: var(--tabs-item-border-radius, 0);
     outline: none;
     white-space: nowrap;
-    flex-shrink: 0;
+    flex-shrink: var(--tabs-item-flex-shrink, 0);
     user-select: none;
     transition: var(
       --tabs-transition,
@@ -649,6 +689,19 @@
     );
   }
 
+  /* The grow and basis hooks live in a zero-specificity rule, so a consumer's own rule for
+     either (`.tabs-item { flex: 1 }` to stretch the items) wins exactly as it did before the
+     hooks existed. The shrink hook above replaces the literal that was already there. */
+  :where(.tabs-item) {
+    flex-grow: var(--tabs-item-flex-grow, 0);
+    flex-basis: var(--tabs-item-flex-basis, auto);
+  }
+
+  /* A link-mode item is an <a>: no underline unless asked for. Only an anchor matches. */
+  a.tabs-item {
+    text-decoration: var(--tabs-item-text-decoration, none);
+  }
+
   /* Roving focus really does move (see focusedKey/focusTabAt above) -- this
      just replaces the INDICATOR that outline:none above strips, which is what
      was actually missing (WCAG 2.4.7). :focus-visible only, so a mouse click
@@ -850,6 +903,12 @@
     user-select: none;
   }
 
+  /* Zero specificity, so a consumer's own font rule for the label still wins. */
+  :where(.tabs-section-label) {
+    font-family: var(--tabs-section-label-font-family, inherit);
+    font-variant-ligatures: var(--tabs-section-label-font-variant-ligatures, inherit);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .tabs-indicator,
     .tabs-wrapper.vertical .tabs-indicator {

package/dist/Tabs/properties.d.ts

@@ -23,6 +23,12 @@ export type TabItem = {
      * `tab` snippet, since it sits outside the item row.
      */
     sectionLabel?: string;
+    /**
+     * The link target in navigation mode (see `navigation` on the bar). Ignored
+     * unless `navigation` is set, so an item that already carries an `href` as its
+     * own routing data renders and behaves exactly as before.
+     */
+    href?: 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
@@ -36,6 +42,21 @@ export type MandatoryTabsProperties = {
     items: string[] | TabItem[];
 };
 export type OptionalTabsProperties = {
+    /**
+     * Turns the bar into site navigation instead of a tab set, when EVERY item also
+     * has an `href`: a `<nav>` of `<a href>` items, the active one marked
+     * `aria-current="page"`, reached with Tab like any links -- no tablist/tab
+     * roles, no roving tabindex, no arrow keys, no sliding indicator. Navigation is
+     * the browser's; `onchange` does not fire. Defaults to false, which keeps the
+     * tab set whatever the items contain.
+     */
+    navigation?: boolean;
+    /**
+     * Accessible name for the bar -- the tablist, or the `<nav>` in link mode
+     * (e.g. "Manual controls"; a `sectionLabel` is aria-hidden, so it does not
+     * name the bar).
+     */
+    ariaLabel?: string;
     activeIndex?: number;
     activeKey?: string;
     disabled?: boolean;

package/dist/ThinkingIndicator/ThinkingIndicator.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ThinkingIndicatorProperties } from './properties';
-declare const ThinkingIndicator: import("svelte").Component<ThinkingIndicatorProperties, {}, "selected" | "expanded">;
+declare const ThinkingIndicator: import("svelte").Component<ThinkingIndicatorProperties, {}, "expanded" | "selected">;
 type ThinkingIndicator = ReturnType<typeof ThinkingIndicator>;
 export default ThinkingIndicator;