@streamscloud/kit 0.46.0 → 0.48.0

package/dist/styles/_semantic.scss

@@ -119,7 +119,7 @@
   // FIELD SIZING — cross-cutting for input-shaped controls
   // (Input, Textarea, NumeralInput, DatePicker, Select triggers)
   // ============================================================
-  --sc-kit--field--height--sm: 1.75rem; // 28px
+  --sc-kit--field--height--sm: 1.8125rem; // 29px
   --sc-kit--field--height--md: 2rem; // 32px
   --sc-kit--field--height--lg: 2.5rem; // 40px
 
@@ -127,8 +127,8 @@
   --sc-kit--field--padding-inline--md: 0.625rem; // 10px
   --sc-kit--field--padding-inline--lg: 0.75rem; // 12px
 
-  --sc-kit--field--icon--size--xs: 0.8125rem; // 13px
-  --sc-kit--field--icon--size--sm: 0.875rem; // 14px
+  --sc-kit--field--icon--size--xs: 0.875rem; // 14px
+  --sc-kit--field--icon--size--sm: 0.9375rem; // 15px
   --sc-kit--field--icon--size--md: 1rem; // 16px
   --sc-kit--field--icon--size--lg: 1.125rem; // 18px
   --sc-kit--field--icon--size--xl: 1.25rem; // 20px
@@ -168,6 +168,12 @@
   --sc-kit--line-height--3xl: 40px;
   --sc-kit--line-height--4xl: 48px;
 
+  // Each value keeps (control height − this) even, or the label's line box starts on a half pixel and the engines break that tie in opposite directions.
+  --sc-kit--line-height--control--xs: 14px;
+  --sc-kit--line-height--control--sm: 15px;
+  --sc-kit--line-height--control--md: 18px;
+  --sc-kit--line-height--control--lg: 22px;
+
   --sc-kit--font-weight--regular: 400;
   --sc-kit--font-weight--medium: 500;
   --sc-kit--font-weight--semibold: 600;

package/dist/ui/button/cmp.button.svelte

@@ -130,6 +130,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--height: var(--sc-kit--button--height, var(--_btn--size-height));
   --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--_btn--size-padding-inline));
   --_btn--font-size: var(--sc-kit--button--font-size, var(--_btn--size-font-size));
+  --_btn--line-height: var(--_btn--size-line-height);
   --_btn--gap: var(--sc-kit--button--gap, var(--_btn--size-gap));
   --_btn--icon-size: var(--_btn--size-icon-size);
   --_btn--width: var(--sc-kit--button--width, fit-content);
@@ -152,7 +153,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   font-family: inherit;
   font-size: var(--_btn--font-size);
   font-weight: var(--_btn--font-weight);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_btn--line-height);
   color: var(--_btn--color);
   background: var(--_btn--background);
   border: var(--_btn--border);
@@ -207,14 +208,16 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-height: 1.5rem;
   --_btn--size-padding-inline: var(--sc-kit--space--2);
   --_btn--size-font-size: var(--sc-kit--font-size--xs);
+  --_btn--size-line-height: var(--sc-kit--line-height--control--xs);
   --_btn--size-gap: var(--sc-kit--space--1);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--xs);
   --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .btn--sm {
-  --_btn--size-height: 1.75rem;
+  --_btn--size-height: 1.8125rem;
   --_btn--size-padding-inline: var(--sc-kit--space--3);
   --_btn--size-font-size: var(--sc-kit--font-size--sm);
+  --_btn--size-line-height: var(--sc-kit--line-height--control--sm);
   --_btn--size-gap: var(--sc-kit--space--1);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
@@ -223,6 +226,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-height: 2rem;
   --_btn--size-padding-inline: var(--sc-kit--space--4);
   --_btn--size-font-size: var(--sc-kit--font-size--md);
+  --_btn--size-line-height: var(--sc-kit--line-height--control--md);
   --_btn--size-gap: var(--sc-kit--space--2);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);
@@ -231,6 +235,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-height: 2.5rem;
   --_btn--size-padding-inline: var(--sc-kit--space--6);
   --_btn--size-font-size: var(--sc-kit--font-size--lg);
+  --_btn--size-line-height: var(--sc-kit--line-height--control--lg);
   --_btn--size-gap: var(--sc-kit--space--2);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);

package/dist/ui/chip-group/cmp.chip-group.svelte

@@ -74,6 +74,7 @@ checkmark on selected chips.
   --_cg--height: var(--sc-kit--chip-group--height, 2rem);
   --_cg--padding-inline: var(--sc-kit--chip-group--padding-inline, 0.875rem);
   --_cg--font-size: var(--sc-kit--chip-group--font-size, var(--sc-kit--font-size--md));
+  --_cg--line-height: var(--_cg--size-line-height, var(--sc-kit--line-height--control--md));
   --_cg--font-weight: var(--sc-kit--chip-group--font-weight, var(--sc-kit--font-weight--medium));
   --_cg--background: var(--sc-kit--chip-group--background, var(--sc-kit--color--bg--field));
   --_cg--background-hover: var(--sc-kit--chip-group--background--hover, var(--sc-kit--color--bg--hover));
@@ -92,14 +93,16 @@ checkmark on selected chips.
   max-width: 100%;
 }
 .chip-group--sm {
-  --sc-kit--chip-group--height: 1.75rem;
+  --sc-kit--chip-group--height: 1.8125rem;
   --sc-kit--chip-group--padding-inline: 0.75rem;
   --sc-kit--chip-group--font-size: var(--sc-kit--font-size--sm);
+  --_cg--size-line-height: var(--sc-kit--line-height--control--sm);
 }
 .chip-group--md {
   --sc-kit--chip-group--height: 2rem;
   --sc-kit--chip-group--padding-inline: 0.875rem;
   --sc-kit--chip-group--font-size: var(--sc-kit--font-size--md);
+  --_cg--size-line-height: var(--sc-kit--line-height--control--md);
 }
 .chip-group--soft {
   --sc-kit--chip-group--background--selected: var(--sc-kit--color--accent--soft);
@@ -132,7 +135,7 @@ checkmark on selected chips.
   font-family: inherit;
   font-size: var(--_cg--font-size);
   font-weight: var(--_cg--font-weight);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_cg--line-height);
   white-space: nowrap;
   cursor: pointer;
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -212,6 +212,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--_dp--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
   --_dp--font-size: var(--sc-kit--date-picker--font-size, var(--_dp--size-font-size, var(--sc-kit--font-size--md)));
+  --_dp--line-height: var(--_dp--size-line-height, var(--sc-kit--line-height--control--md));
   --_dp--color: var(--sc-kit--date-picker--color, var(--sc-kit--color--text--primary));
   --_dp--placeholder-color: var(--sc-kit--date-picker--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_dp--icon-color: var(--sc-kit--date-picker--icon--color, var(--sc-kit--color--text--muted));
@@ -237,6 +238,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--size-height: var(--sc-kit--field--height--sm);
   --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_dp--size-font-size: var(--sc-kit--font-size--sm);
+  --_dp--size-line-height: var(--sc-kit--line-height--control--sm);
   --_dp--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_dp--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -244,6 +246,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--size-height: var(--sc-kit--field--height--md);
   --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_dp--size-font-size: var(--sc-kit--font-size--md);
+  --_dp--size-line-height: var(--sc-kit--line-height--control--md);
   --_dp--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -251,6 +254,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_dp--size-height: var(--sc-kit--field--height--lg);
   --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_dp--size-font-size: var(--sc-kit--font-size--lg);
+  --_dp--size-line-height: var(--sc-kit--line-height--control--lg);
   --_dp--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -297,7 +301,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   color: var(--_dp--color);
   font-family: inherit;
   font-size: var(--_dp--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_dp--line-height);
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_dp--underline-color);
   cursor: pointer;
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);

package/dist/ui/document-tabs/cmp.document-tabs.svelte

@@ -0,0 +1,245 @@
+<script lang="ts" generics="T">import { horizontalWheelScroll } from '../../core/actions';
+import { Icon } from '../icon';
+import DocumentTabItem from './document-tab.svelte';
+import { DocumentTabsLocalization } from './document-tabs-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+const { value, tabs, overflow = 'visible', compare, on } = $props();
+const localization = new DocumentTabsLocalization();
+const SCROLL_STEP = 160;
+let trackNode = $state(null);
+let canScrollBack = $state(false);
+let canScrollForward = $state(false);
+let scrollSyncArmed = false;
+const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.value);
+const isClosable = (tab) => !!on?.close && tab.closable !== false && !tab.disabled;
+const activeIndex = $derived(tabs.findIndex((tab) => isActive(tab)));
+const tabButtons = () => Array.from(trackNode?.querySelectorAll('[role="tab"]') ?? []);
+const updateScrollState = (node) => {
+    if (overflow !== 'scroll') {
+        canScrollBack = false;
+        canScrollForward = false;
+        return;
+    }
+    const { scrollLeft, scrollWidth, clientWidth } = node;
+    canScrollBack = scrollLeft > 0;
+    canScrollForward = scrollLeft < scrollWidth - clientWidth - 1;
+};
+const trackMounted = (node) => {
+    trackNode = node;
+    const observer = new ResizeObserver(() => updateScrollState(node));
+    observer.observe(node);
+    updateScrollState(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+const scrollBack = () => {
+    trackNode?.scrollBy({ left: -SCROLL_STEP, behavior: 'smooth' });
+};
+const scrollForward = () => {
+    trackNode?.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' });
+};
+const stepFocus = (buttons, from, step) => {
+    const count = buttons.length;
+    for (let offset = 1; offset <= count; offset++) {
+        const candidate = buttons[(((from + step * offset) % count) + count) % count];
+        if (!candidate.disabled) {
+            return candidate;
+        }
+    }
+    return null;
+};
+const handleKeydown = (event) => {
+    const buttons = tabButtons();
+    const current = buttons.indexOf(document.activeElement);
+    if (current === -1) {
+        return;
+    }
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+        const tab = tabs[current];
+        if (tab && isClosable(tab)) {
+            event.preventDefault();
+            on?.close?.(tab.value);
+        }
+        return;
+    }
+    let target;
+    switch (event.key) {
+        case 'ArrowRight':
+            target = stepFocus(buttons, current, 1);
+            break;
+        case 'ArrowLeft':
+            target = stepFocus(buttons, current, -1);
+            break;
+        case 'Home':
+            target = stepFocus(buttons, -1, 1);
+            break;
+        case 'End':
+            target = stepFocus(buttons, buttons.length, -1);
+            break;
+        default:
+            return;
+    }
+    if (!target) {
+        return;
+    }
+    event.preventDefault();
+    target.focus();
+    target.click();
+};
+$effect(() => {
+    const index = activeIndex;
+    if (!trackNode || index < 0) {
+        return;
+    }
+    if (!scrollSyncArmed) {
+        scrollSyncArmed = true;
+        return;
+    }
+    tabButtons()[index]?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+});
+</script>
+
+<div class="document-tabs">
+  {#if canScrollBack}
+    <button type="button" class="document-tabs__scroll-btn document-tabs__scroll-btn--back" onclick={scrollBack} aria-label={localization.scrollBack}>
+      <Icon src={IconChevronLeft} size="sm" />
+    </button>
+  {/if}
+  <div
+    class="document-tabs__track"
+    class:document-tabs__track--scrollable={overflow === 'scroll'}
+    class:document-tabs__track--mask-back={canScrollBack && !canScrollForward}
+    class:document-tabs__track--mask-forward={canScrollForward && !canScrollBack}
+    class:document-tabs__track--mask-both={canScrollBack && canScrollForward}
+    role="tablist"
+    use:trackMounted
+    use:horizontalWheelScroll={{ isolateScroll: overflow === 'scroll' }}
+    onscroll={(event) => updateScrollState(event.currentTarget)}>
+    {#each tabs as tab (tab.value)}
+      <DocumentTabItem tab={tab} active={isActive(tab)} closable={isClosable(tab)} on={{ select: on?.change, close: on?.close, keydown: handleKeydown }} />
+    {/each}
+  </div>
+  {#if canScrollForward}
+    <button type="button" class="document-tabs__scroll-btn document-tabs__scroll-btn--forward" onclick={scrollForward} aria-label={localization.scrollForward}>
+      <Icon src={IconChevronRight} size="sm" />
+    </button>
+  {/if}
+</div>
+
+<!--
+@component
+DocumentTabs — browser-style tabs for an editor: the active tab is taller than its neighbours and
+sits flush on the container's bottom rule, so it reads as continuous with the panel below while the
+inactive ones stay behind that line. Each tab carries an optional icon, an unsaved-changes dot, a
+`tone` for a tab of a different kind (a live preview), and its own `closable` opt-out. A closable or
+dirty tab reserves the trailing slot permanently: the dot sits there at rest, the close button takes
+its place on hover, and a tab's width never depends on which of them is showing. Arrow keys / Home /
+End move between tabs (roving tabindex), Delete closes the focused one.
+
+`overflow="scroll"` gives the strip its own scroll container with edge fades, chevrons and
+wheel-to-scroll. Leave it `'visible'` where the container already scrolls the strip — two nested
+scrollers fight each other.
+
+The active tab dips `--sc-kit--document-tabs--baseline-overlap` below the strip to cover the bottom
+rule of the bar it sits in. A container that clips (any `overflow` other than `visible`) has to
+leave that last pixel inside its own clip region, or the overlap is cut off.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--document-tabs--height` | Inactive tab height | `29px` |
+| `--sc-kit--document-tabs--height--active` | Active tab height | `32px` |
+| `--sc-kit--document-tabs--padding-inline` | Tab horizontal padding — the same in both states, so activating a tab shifts nothing sideways | `10px` |
+| `--sc-kit--document-tabs--min-width` | Minimum tab width | `112px` |
+| `--sc-kit--document-tabs--max-width` | Maximum tab width — the label ellipsizes past it | `200px` |
+| `--sc-kit--document-tabs--gap` | Gap between tabs | `1px` |
+| `--sc-kit--document-tabs--tab--gap` | Gap between a tab's icon, label and trailing slot | `8px` |
+| `--sc-kit--document-tabs--radius` | Top corner radius | `--sc-kit--radius--sm` |
+| `--sc-kit--document-tabs--border-width` | Tab border width | `1px` |
+| `--sc-kit--document-tabs--border-color` | Tab border color | `--sc-kit--color--border` |
+| `--sc-kit--document-tabs--baseline-overlap` | How far the active tab dips below the strip to cover its container's bottom rule | `1px` |
+| `--sc-kit--document-tabs--background` | Inactive tab background | `--sc-kit--color--bg--app` |
+| `--sc-kit--document-tabs--background--active` | Active tab background — matches the pane below | `--sc-kit--color--bg--panel` |
+| `--sc-kit--document-tabs--background--hover` | Inactive tab hover background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--document-tabs--color` | Inactive tab label color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--document-tabs--color--active` | Active tab label color | `--sc-kit--color--text--primary` |
+| `--sc-kit--document-tabs--color--hover` | Inactive tab hover label color | `--sc-kit--color--text--primary` |
+| `--sc-kit--document-tabs--color--disabled` | Disabled tab label color | `--sc-kit--color--text--muted` |
+| `--sc-kit--document-tabs--font-size` | Label font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--document-tabs--font-weight` | Label font weight | `--sc-kit--font-weight--regular` |
+| `--sc-kit--document-tabs--scroll-btn--background` | Fade behind the overflow chevrons | `--sc-kit--color--bg--panel` |
+-->
+
+<style>.document-tabs {
+  --_document-tabs--gap: var(--sc-kit--document-tabs--gap, 1px);
+  --_document-tabs--baseline-overlap: var(--sc-kit--document-tabs--baseline-overlap, 1px);
+  --_document-tabs--scroll-btn-background: var(--sc-kit--document-tabs--scroll-btn--background, var(--sc-kit--color--bg--panel));
+  position: relative;
+  display: flex;
+  align-self: stretch;
+  align-items: flex-end;
+  min-inline-size: 0;
+  margin-block-end: calc(-1 * var(--_document-tabs--baseline-overlap));
+}
+.document-tabs:hover {
+  --_scroll-btn-opacity: 1;
+}
+.document-tabs__track {
+  --_mask-size: 1.5rem;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--_document-tabs--gap);
+  min-inline-size: 0;
+}
+.document-tabs__track--scrollable {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.document-tabs__track--scrollable::-webkit-scrollbar {
+  display: none;
+}
+.document-tabs__track--mask-back {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black 100%);
+}
+.document-tabs__track--mask-forward {
+  mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.document-tabs__track--mask-both {
+  mask-image: linear-gradient(to right, transparent 0%, black var(--_mask-size), black calc(100% - var(--_mask-size)), transparent 100%);
+}
+.document-tabs__scroll-btn {
+  position: absolute;
+  inset-block: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.25rem;
+  background: transparent;
+  backdrop-filter: blur(2px);
+  border: none;
+  cursor: pointer;
+  color: var(--sc-kit--color--text--secondary);
+  opacity: var(--_scroll-btn-opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.document-tabs__scroll-btn:hover {
+  color: var(--sc-kit--color--text--primary);
+}
+.document-tabs__scroll-btn:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+  opacity: 1;
+}
+.document-tabs__scroll-btn--back {
+  inset-inline-start: 0;
+  padding-inline-end: 0.625rem;
+  background: linear-gradient(to right, var(--_document-tabs--scroll-btn-background) 60%, transparent);
+}
+.document-tabs__scroll-btn--forward {
+  inset-inline-end: 0;
+  padding-inline-start: 0.625rem;
+  background: linear-gradient(to left, var(--_document-tabs--scroll-btn-background) 60%, transparent);
+}</style>

package/dist/ui/document-tabs/cmp.document-tabs.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { DocumentTab, DocumentTabsOverflow } from './types';
+declare function $$render<T>(): {
+    props: {
+        value: T;
+        /** `NoInfer<T>` ensures `T` narrows from `value` only; inline tab literals type-check against the value's T without widening — no `as const` needed at callsites. */
+        tabs: DocumentTab<NoInfer<T>>[];
+        /** `'scroll'` makes the strip its own scroll container with edge fades and chevrons. Leave it `'visible'` when the container already scrolls the strip. @default 'visible' */
+        overflow?: DocumentTabsOverflow;
+        /** Equality for object T values. @default reference equality (`===`) */
+        compare?: (a: T, b: T) => boolean;
+        on?: {
+            change?: (value: T) => void;
+            /** Providing this renders a close button on every tab that doesn't opt out with `closable: false`. */
+            close?: (value: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * DocumentTabs — browser-style tabs for an editor: the active tab is taller than its neighbours and
+ * sits flush on the container's bottom rule, so it reads as continuous with the panel below while the
+ * inactive ones stay behind that line. Each tab carries an optional icon, an unsaved-changes dot, a
+ * `tone` for a tab of a different kind (a live preview), and its own `closable` opt-out. A closable or
+ * dirty tab reserves the trailing slot permanently: the dot sits there at rest, the close button takes
+ * its place on hover, and a tab's width never depends on which of them is showing. Arrow keys / Home /
+ * End move between tabs (roving tabindex), Delete closes the focused one.
+ *
+ * `overflow="scroll"` gives the strip its own scroll container with edge fades, chevrons and
+ * wheel-to-scroll. Leave it `'visible'` where the container already scrolls the strip — two nested
+ * scrollers fight each other.
+ *
+ * The active tab dips `--sc-kit--document-tabs--baseline-overlap` below the strip to cover the bottom
+ * rule of the bar it sits in. A container that clips (any `overflow` other than `visible`) has to
+ * leave that last pixel inside its own clip region, or the overlap is cut off.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--document-tabs--height` | Inactive tab height | `29px` |
+ * | `--sc-kit--document-tabs--height--active` | Active tab height | `32px` |
+ * | `--sc-kit--document-tabs--padding-inline` | Tab horizontal padding — the same in both states, so activating a tab shifts nothing sideways | `10px` |
+ * | `--sc-kit--document-tabs--min-width` | Minimum tab width | `112px` |
+ * | `--sc-kit--document-tabs--max-width` | Maximum tab width — the label ellipsizes past it | `200px` |
+ * | `--sc-kit--document-tabs--gap` | Gap between tabs | `1px` |
+ * | `--sc-kit--document-tabs--tab--gap` | Gap between a tab's icon, label and trailing slot | `8px` |
+ * | `--sc-kit--document-tabs--radius` | Top corner radius | `--sc-kit--radius--sm` |
+ * | `--sc-kit--document-tabs--border-width` | Tab border width | `1px` |
+ * | `--sc-kit--document-tabs--border-color` | Tab border color | `--sc-kit--color--border` |
+ * | `--sc-kit--document-tabs--baseline-overlap` | How far the active tab dips below the strip to cover its container's bottom rule | `1px` |
+ * | `--sc-kit--document-tabs--background` | Inactive tab background | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--document-tabs--background--active` | Active tab background — matches the pane below | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--document-tabs--background--hover` | Inactive tab hover background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--document-tabs--color` | Inactive tab label color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--document-tabs--color--active` | Active tab label color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--document-tabs--color--hover` | Inactive tab hover label color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--document-tabs--color--disabled` | Disabled tab label color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--document-tabs--font-size` | Label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--document-tabs--font-weight` | Label font weight | `--sc-kit--font-weight--regular` |
+ * | `--sc-kit--document-tabs--scroll-btn--background` | Fade behind the overflow chevrons | `--sc-kit--color--bg--panel` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;