@streamscloud/kit 0.46.0 → 0.47.0

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;

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

@@ -0,0 +1,210 @@
+<script lang="ts" generics="T">import { IconSlot } from '../icon';
+import { DocumentTabsLocalization } from './document-tabs-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+const { tab, active, closable, on } = $props();
+const localization = new DocumentTabsLocalization();
+const ariaLabel = $derived(tab.dirty ? `${tab.label} — ${localization.unsavedChanges}` : undefined);
+const handleClick = () => {
+    if (tab.disabled || active) {
+        return;
+    }
+    on?.select?.(tab.value);
+};
+const handleClose = () => {
+    on?.close?.(tab.value);
+};
+</script>
+
+<div
+  class="document-tab"
+  class:document-tab--active={active}
+  class:document-tab--disabled={tab.disabled}
+  class:document-tab--hoverable={!active && !tab.disabled}
+  class:document-tab--dirty={tab.dirty}
+  class:document-tab--closable={closable}
+  class:document-tab--tone-gray={tab.tone === 'gray'}
+  class:document-tab--tone-blue={tab.tone === 'blue'}
+  class:document-tab--tone-green={tab.tone === 'green'}
+  class:document-tab--tone-red={tab.tone === 'red'}
+  class:document-tab--tone-orange={tab.tone === 'orange'}
+  class:document-tab--tone-teal={tab.tone === 'teal'}
+  role="presentation">
+  <button
+    type="button"
+    class="document-tab__button"
+    role="tab"
+    aria-selected={active}
+    aria-label={ariaLabel}
+    tabindex={active ? 0 : -1}
+    disabled={tab.disabled}
+    title={tab.tooltip}
+    onclick={handleClick}
+    onkeydown={on?.keydown}>
+    {#if tab.icon}
+      <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'sm' }} /></span>
+    {/if}
+    <span class="document-tab__label">{tab.label}</span>
+  </button>
+  {#if tab.dirty || closable}
+    <span class="document-tab__trailing">
+      <span class="document-tab__dot" class:document-tab__dot--hidden={!tab.dirty}></span>
+      {#if closable}
+        <button type="button" class="document-tab__close" tabindex={active ? 0 : -1} aria-label={localization.close} onclick={handleClose}>
+          <IconSlot icon={IconDismiss} fallbacks={{ size: 'sm' }} />
+        </button>
+      {/if}
+    </span>
+  {/if}
+</div>
+
+<style>.document-tab {
+  --_document-tab--height: var(--sc-kit--document-tabs--height, 1.8125rem);
+  --_document-tab--padding-inline: var(--sc-kit--document-tabs--padding-inline, 0.625rem);
+  --_document-tab--min-width: var(--sc-kit--document-tabs--min-width, 7rem);
+  --_document-tab--max-width: var(--sc-kit--document-tabs--max-width, 12.5rem);
+  --_document-tab--gap: var(--sc-kit--document-tabs--tab--gap, 0.5rem);
+  --_document-tab--radius: var(--sc-kit--document-tabs--radius, var(--sc-kit--radius--sm));
+  --_document-tab--border-width: var(--sc-kit--document-tabs--border-width, 1px);
+  --_document-tab--border-color: var(--sc-kit--document-tabs--border-color, var(--sc-kit--color--border));
+  --_document-tab--baseline-overlap: var(--sc-kit--document-tabs--baseline-overlap, 1px);
+  --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background, var(--sc-kit--color--bg--app)));
+  --_document-tab--background-hover: var(
+    --_document-tab--tone-background-hover,
+    var(--sc-kit--document-tabs--background--hover, var(--sc-kit--color--bg--hover))
+  );
+  --_document-tab--color: var(--sc-kit--document-tabs--color, var(--sc-kit--color--text--secondary));
+  --_document-tab--font-size: var(--sc-kit--document-tabs--font-size, var(--sc-kit--font-size--sm));
+  --_document-tab--font-weight: var(--sc-kit--document-tabs--font-weight, var(--sc-kit--font-weight--regular));
+  --_document-tab--cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_document-tab--gap);
+  block-size: var(--_document-tab--height);
+  min-inline-size: var(--_document-tab--min-width);
+  max-inline-size: var(--_document-tab--max-width);
+  flex-shrink: 0;
+  padding-inline: var(--_document-tab--padding-inline);
+  margin-block-end: var(--_document-tab--baseline-overlap);
+  background: var(--_document-tab--background);
+  border: var(--_document-tab--border-width) solid var(--_document-tab--border-color);
+  border-block-end: 0;
+  border-start-start-radius: var(--_document-tab--radius);
+  border-start-end-radius: var(--_document-tab--radius);
+  color: var(--_document-tab--color);
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.document-tab--tone-gray {
+  --_document-tab--tone-background: var(--sc-kit--tone--gray--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--gray--fg) 10%, var(--sc-kit--tone--gray--bg));
+}
+.document-tab--tone-blue {
+  --_document-tab--tone-background: var(--sc-kit--tone--blue--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--blue--fg) 10%, var(--sc-kit--tone--blue--bg));
+}
+.document-tab--tone-green {
+  --_document-tab--tone-background: var(--sc-kit--tone--green--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--green--fg) 10%, var(--sc-kit--tone--green--bg));
+}
+.document-tab--tone-red {
+  --_document-tab--tone-background: var(--sc-kit--tone--red--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--red--fg) 10%, var(--sc-kit--tone--red--bg));
+}
+.document-tab--tone-orange {
+  --_document-tab--tone-background: var(--sc-kit--tone--orange--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--orange--fg) 10%, var(--sc-kit--tone--orange--bg));
+}
+.document-tab--tone-teal {
+  --_document-tab--tone-background: var(--sc-kit--tone--teal--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--teal--fg) 10%, var(--sc-kit--tone--teal--bg));
+}
+.document-tab--active {
+  --_document-tab--height: var(--sc-kit--document-tabs--height--active, 2rem);
+  --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background--active, var(--sc-kit--color--bg--panel)));
+  --_document-tab--color: var(--sc-kit--document-tabs--color--active, var(--sc-kit--color--text--primary));
+  margin-block-end: 0;
+}
+.document-tab--hoverable:hover {
+  --_document-tab--background: var(--_document-tab--background-hover);
+  --_document-tab--color: var(--sc-kit--document-tabs--color--hover, var(--sc-kit--color--text--primary));
+}
+.document-tab--disabled {
+  --_document-tab--color: var(--sc-kit--document-tabs--color--disabled, var(--sc-kit--color--text--muted));
+  --_document-tab--cursor: default;
+}
+.document-tab--closable:hover, .document-tab--closable:focus-within {
+  --_document-tab--dot-visibility: hidden;
+  --_document-tab--close-display: inline-flex;
+}
+.document-tab__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_document-tab--gap);
+  flex: 1;
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--_document-tab--font-size);
+  font-weight: var(--_document-tab--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: var(--_document-tab--cursor);
+}
+.document-tab__button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.document-tab__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.document-tab__label {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.document-tab__trailing {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+}
+.document-tab__dot {
+  display: inline-flex;
+  visibility: var(--_document-tab--dot-visibility, visible);
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  background: currentcolor;
+  border-radius: 50%;
+}
+.document-tab__dot--hidden {
+  visibility: hidden;
+}
+.document-tab__close {
+  display: var(--_document-tab--close-display, none);
+  position: absolute;
+  inset: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 1px;
+  background: none;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--secondary);
+  cursor: pointer;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.document-tab__close:hover {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}
+.document-tab__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 1px;
+}</style>

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

@@ -0,0 +1,34 @@
+import type { DocumentTab } from './types';
+declare function $$render<T>(): {
+    props: {
+        tab: DocumentTab<T>;
+        active: boolean;
+        closable: boolean;
+        on?: {
+            select?: (value: T) => void;
+            close?: (value: T) => void;
+            keydown?: (event: KeyboardEvent) => 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']>;
+}
+declare const DocumentTab: $$IsomorphicComponent;
+type DocumentTab<T> = InstanceType<typeof DocumentTab<T>>;
+export default DocumentTab;

package/dist/ui/document-tabs/document-tabs-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class DocumentTabsLocalization {
+    get close(): string;
+    get unsavedChanges(): string;
+    get scrollBack(): string;
+    get scrollForward(): string;
+}

package/dist/ui/document-tabs/document-tabs-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    close: {
+        en: 'Close tab',
+        no: 'Lukk fane'
+    },
+    unsavedChanges: {
+        en: 'unsaved changes',
+        no: 'ulagrede endringer'
+    },
+    scrollBack: {
+        en: 'Scroll back',
+        no: 'Rull tilbake'
+    },
+    scrollForward: {
+        en: 'Scroll forward',
+        no: 'Rull fremover'
+    }
+};
+export class DocumentTabsLocalization {
+    get close() {
+        return loc.close[AppLocale.current];
+    }
+    get unsavedChanges() {
+        return loc.unsavedChanges[AppLocale.current];
+    }
+    get scrollBack() {
+        return loc.scrollBack[AppLocale.current];
+    }
+    get scrollForward() {
+        return loc.scrollForward[AppLocale.current];
+    }
+}

package/dist/ui/document-tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DocumentTabs } from './cmp.document-tabs.svelte';
+export { DOCUMENT_TAB_TONES } from './types';
+export type { DocumentTab, DocumentTabsOverflow, DocumentTabTone } from './types';

package/dist/ui/document-tabs/index.js

@@ -0,0 +1,2 @@
+export { default as DocumentTabs } from './cmp.document-tabs.svelte';
+export { DOCUMENT_TAB_TONES } from './types';

package/dist/ui/document-tabs/types.d.ts

@@ -0,0 +1,20 @@
+import type { IconProp } from '../icon';
+export declare const DOCUMENT_TAB_TONES: readonly ["gray", "blue", "green", "red", "orange", "teal"];
+export type DocumentTabTone = (typeof DOCUMENT_TAB_TONES)[number];
+export type DocumentTabsOverflow = 'visible' | 'scroll';
+export type DocumentTab<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Leading glyph — a file-type mark, typically. */
+    icon?: IconProp;
+    /** Unsaved changes: a dot in the trailing slot, which the close button takes over on hover. */
+    dirty?: boolean;
+    /** Set `false` to keep one tab open while its neighbours stay closable. @default true (whenever `on.close` is provided) */
+    closable?: boolean;
+    /** Tints the tab so it reads as a different kind of thing from the documents beside it — a live preview, a diff, a terminal. */
+    tone?: DocumentTabTone;
+    /** Full text for a label that truncates — the complete file path, typically. */
+    tooltip?: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+};

package/dist/ui/document-tabs/types.js

@@ -0,0 +1 @@
+export const DOCUMENT_TAB_TONES = ['gray', 'blue', 'green', 'red', 'orange', 'teal'];

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte

@@ -1,9 +1,25 @@
 <script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
 import PagePanel from './cmp.page-panel.svelte';
 import { untrack } from 'svelte';
-const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false, toggle } = $props();
+const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false, alignActionsLeftToContent = false, toggle } = $props();
 let leftPanel = $state(null);
 let rightPanel = $state(null);
+let sidebarLeftWidth = $state(0);
+const sidebarLeftMounted = (node) => {
+    const measure = () => {
+        const divider = parseFloat(getComputedStyle(node).borderInlineEndWidth) || 0;
+        sidebarLeftWidth = Math.max(0, node.offsetWidth - divider);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    measure();
+    return {
+        destroy: () => {
+            observer.disconnect();
+            sidebarLeftWidth = 0;
+        }
+    };
+};
 $effect(() => {
     const hasLeft = !!sidebarLeft;
     untrack(() => {
@@ -69,10 +85,14 @@ $effect(() => {
   actionsCenter={actionsCenter}
   actionsRight={actionsRight}
   balanceHeaderCenter={balanceHeaderCenter}
-  collapseButtons={collapseButtons}>
+  collapseButtons={collapseButtons}
+  --_--page-panel--content-start="{alignActionsLeftToContent ? sidebarLeftWidth : 0}px">
   <div class="page-panel-sidebars">
     {#if sidebarLeft && !leftCollapsed}
-      <div class="page-panel-sidebars__sidebar page-panel-sidebars__sidebar--left" transition:slideHorizontally|local={{ duration: transitionDuration.slow }}>
+      <div
+        class="page-panel-sidebars__sidebar page-panel-sidebars__sidebar--left"
+        use:sidebarLeftMounted
+        transition:slideHorizontally|local={{ duration: transitionDuration.slow }}>
         {@render sidebarLeft()}
       </div>
     {/if}
@@ -97,6 +117,12 @@ Pass a `SidebarsToggle` instance as `toggle` to drive an external "collapse both
 top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
 off that same instance.
 
+`alignActionsLeftToContent` starts the header's scrolling left track at the content column rather
+than right after the collapse button: whatever sits in `actionsLeft` begins exactly where the
+content pane begins, and follows that edge as the sidebar resizes, collapses, or isn't there at all.
+The track starts on the sidebar's divider rather than after it, so a bordered child lands on that
+line instead of doubling it. The collapse button stays put outside that track.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte.d.ts

@@ -14,6 +14,8 @@ type Props = {
     actionsRight?: Snippet;
     /** Lay the inner panel header out as a 3-column grid so `actionsCenter` is centered against the panel width. @default false */
     balanceHeaderCenter?: boolean;
+    /** Start the header's left track at the content column instead of right after the collapse button, so `actionsLeft` begins where the content pane begins and follows the sidebar as it resizes or collapses. @default false */
+    alignActionsLeftToContent?: boolean;
     /** Shared collapse target for an external "collapse both sidebars" control (e.g. `PageLayout`'s `editorControls.panelsToggle`). */
     toggle?: SidebarsToggle;
 };
@@ -26,6 +28,12 @@ type Props = {
  * top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
  * off that same instance.
  *
+ * `alignActionsLeftToContent` starts the header's scrolling left track at the content column rather
+ * than right after the collapse button: whatever sits in `actionsLeft` begins exactly where the
+ * content pane begins, and follows that edge as the sidebar resizes, collapses, or isn't there at all.
+ * The track starts on the sidebar's divider rather than after it, so a bordered child lands on that
+ * line instead of doubling it. The collapse button stays put outside that track.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/page-layout/cmp.page-panel.svelte

@@ -145,44 +145,50 @@ $effect(() => {
         {:else}
           {#if balanceHeaderCenter || leftCollapseIds.length > 0 || title || actionsLeft}
             <div class="page-panel__header-left" class:page-panel__header-left--balanced={balanceHeaderCenter}>
-              {#if canScrollHeaderLeftBack}
-                <button
-                  type="button"
-                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--back"
-                  onclick={scrollHeaderLeftBack}
-                  aria-label={localization.scrollBack}>
-                  <Icon src={IconChevronLeft} size="sm" />
-                </button>
+              {#if leftCollapseIds.length > 0}
+                <div class="page-panel__header-collapse">
+                  {#each leftCollapseIds as cid (cid)}
+                    <PanelCollapseButton panelState={panelState} panelId={cid} />
+                  {/each}
+                </div>
               {/if}
-              <div
-                class="page-panel__header-left-track"
-                class:page-panel__header-left-track--mask-back={canScrollHeaderLeftBack && !canScrollHeaderLeftForward}
-                class:page-panel__header-left-track--mask-forward={canScrollHeaderLeftForward && !canScrollHeaderLeftBack}
-                class:page-panel__header-left-track--mask-both={canScrollHeaderLeftBack && canScrollHeaderLeftForward}
-                use:headerLeftTrackMounted
-                use:horizontalWheelScroll
-                onscroll={(e) => updateHeaderLeftScrollState(e.currentTarget)}>
-                {#each leftCollapseIds as cid (cid)}
-                  <PanelCollapseButton panelState={panelState} panelId={cid} />
-                {/each}
-                {#if typeof title === 'function'}
-                  {@render title()}
-                {:else if title}
-                  <span class="page-panel__title">{title}</span>
+              <div class="page-panel__header-track-wrap">
+                {#if canScrollHeaderLeftBack}
+                  <button
+                    type="button"
+                    class="page-panel__header-scroll-btn page-panel__header-scroll-btn--back"
+                    onclick={scrollHeaderLeftBack}
+                    aria-label={localization.scrollBack}>
+                    <Icon src={IconChevronLeft} size="sm" />
+                  </button>
                 {/if}
-                {#if actionsLeft}
-                  {@render actionsLeft()}
+                <div
+                  class="page-panel__header-left-track"
+                  class:page-panel__header-left-track--mask-back={canScrollHeaderLeftBack && !canScrollHeaderLeftForward}
+                  class:page-panel__header-left-track--mask-forward={canScrollHeaderLeftForward && !canScrollHeaderLeftBack}
+                  class:page-panel__header-left-track--mask-both={canScrollHeaderLeftBack && canScrollHeaderLeftForward}
+                  use:headerLeftTrackMounted
+                  use:horizontalWheelScroll
+                  onscroll={(e) => updateHeaderLeftScrollState(e.currentTarget)}>
+                  {#if typeof title === 'function'}
+                    {@render title()}
+                  {:else if title}
+                    <span class="page-panel__title">{title}</span>
+                  {/if}
+                  {#if actionsLeft}
+                    {@render actionsLeft()}
+                  {/if}
+                </div>
+                {#if canScrollHeaderLeftForward}
+                  <button
+                    type="button"
+                    class="page-panel__header-scroll-btn page-panel__header-scroll-btn--forward"
+                    onclick={scrollHeaderLeftForward}
+                    aria-label={localization.scrollForward}>
+                    <Icon src={IconChevronRight} size="sm" />
+                  </button>
                 {/if}
               </div>
-              {#if canScrollHeaderLeftForward}
-                <button
-                  type="button"
-                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--forward"
-                  onclick={scrollHeaderLeftForward}
-                  aria-label={localization.scrollForward}>
-                  <Icon src={IconChevronRight} size="sm" />
-                </button>
-              {/if}
             </div>
           {/if}
           {#if balanceHeaderCenter || actionsCenter}
@@ -274,6 +280,7 @@ to min / max; Enter / Space toggle collapsed.
   --_page-panel--footer-justify: var(--sc-kit--page-panel--footer--justify, flex-end);
   --_page-panel--header-background: var(--sc-kit--page-panel--header--background, var(--sc-kit--color--bg--panel));
   --_page-panel--header-padding-inline: var(--sc-kit--page-panel--header--padding-inline, 1.5rem);
+  --_page-panel--content-start: var(--_--page-panel--content-start, 0px);
   --_page-panel--title-font-size: var(--sc-kit--page-panel--title--font-size, 0.875rem);
   --_page-panel--resizer-color: var(--sc-kit--page-panel--resizer-color, var(--sc-kit--color--border));
   --_page-panel--height: var(--_--page-layout--panel--height, 100%);
@@ -334,7 +341,8 @@ to min / max; Enter / Space toggle collapsed.
   font-size: var(--_page-panel--title-font-size);
 }
 .page-panel__header-left {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(min-content, max(0px, var(--_page-panel--content-start) - var(--_page-panel--header-padding-inline))) minmax(0, 1fr);
   align-self: stretch;
   align-items: center;
   min-width: 0;
@@ -346,12 +354,29 @@ to min / max; Enter / Space toggle collapsed.
 .page-panel__header-left:hover {
   --_scroll-btn-opacity: 1;
 }
+.page-panel__header-collapse {
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  padding-inline-end: 1rem;
+}
+.page-panel__header-track-wrap {
+  grid-column: 2;
+  position: relative;
+  display: flex;
+  align-self: stretch;
+  align-items: stretch;
+  min-width: 0;
+}
 .page-panel__header-left-track {
   --_mask-size: 1.5rem;
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: 1rem;
   min-width: 0;
+  padding-block-end: 1px;
+  margin-block-end: -1px;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -369,13 +394,12 @@ to min / max; Enter / Space toggle collapsed.
 }
 .page-panel__header-scroll-btn {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.25rem;
+  padding-inline: 0.25rem;
   background: transparent;
   backdrop-filter: blur(2px);
   border: none;
@@ -388,13 +412,13 @@ to min / max; Enter / Space toggle collapsed.
   color: var(--sc-kit--color--text--primary);
 }
 .page-panel__header-scroll-btn--back {
-  left: 0;
-  padding-right: 0.625rem;
+  inset-inline-start: 0;
+  padding-inline-end: 0.625rem;
   background: linear-gradient(to right, var(--_page-panel--header-background) 60%, transparent);
 }
 .page-panel__header-scroll-btn--forward {
-  right: 0;
-  padding-left: 0.625rem;
+  inset-inline-end: 0;
+  padding-inline-start: 0.625rem;
   background: linear-gradient(to left, var(--_page-panel--header-background) 60%, transparent);
 }
 .page-panel__header-center {

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

@@ -5,22 +5,21 @@ const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.v
 
 <div class="tabs tabs--{variant}" role="tablist">
   {#each tabs as tab, i (i)}
-    <TabItem tab={tab} variant={variant} size={size} active={isActive(tab)} on={{ select: on?.change, close: on?.close }} />
+    <TabItem tab={tab} variant={variant} size={size} active={isActive(tab)} on={{ select: on?.change }} />
   {/each}
 </div>
 
 <!--
 @component
 Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
-(switch on the active `value`). Three visual variants:
+(switch on the active `value`). Two visual variants:
 
 - **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
 - **`pills`**: filled — the active tab lifts as a card on an inset tray.
-- **`document`**: browser-style tabs — flush, rounded-top; the active tab background matches the canvas so it reads as continuous with the content below.
 
-Providing `on.close` renders a close affordance on each non-disabled tab (works in any variant).
-Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
-form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+Each tab carries an optional `disabled` flag (non-interactive). It's a `tablist` — for navigation
+between panels, not single-choice form input. Closable tabs are an editor concern, not a panel
+switcher's, so they are not part of this component.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -32,16 +31,13 @@ form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this
 | `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
 | `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
 | `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
-| `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills/document: `--sc-kit--color--text--primary` |
+| `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills: `--sc-kit--color--text--primary` |
 | `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
 | `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
 | `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
 | `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
 | `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
 | `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
-| `--sc-kit--tabs--document--background` | Inactive tab background (document variant) | `neutral-200` / `dark-500` |
-| `--sc-kit--tabs--document--background--active` | Active tab background (document variant) — matches the canvas | `--sc-kit--color--bg--app` |
-| `--sc-kit--tabs--document--background--hover` | Inactive tab hover background (document variant) | `--sc-kit--color--bg--hover` |
 -->
 
 <style>.tabs {
@@ -60,8 +56,4 @@ form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this
   padding: 0.25rem;
   background: var(--_tabs--pills-background);
   border-radius: var(--sc-kit--radius--md);
-}
-.tabs--document {
-  gap: 0;
-  align-items: flex-end;
 }</style>

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

@@ -12,8 +12,6 @@ declare function $$render<T>(): {
         compare?: (a: T, b: T) => boolean;
         on?: {
             change?: (value: T) => void;
-            /** Providing this renders a close affordance on each non-disabled tab (works in any variant). */
-            close?: (value: T) => void;
         };
     };
     exports: {};
@@ -37,15 +35,14 @@ interface $$IsomorphicComponent {
 }
 /**
  * Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
- * (switch on the active `value`). Three visual variants:
+ * (switch on the active `value`). Two visual variants:
  *
  * - **`default`**: underline — a 2px accent bar travels under the active tab; the strip has a bottom border.
  * - **`pills`**: filled — the active tab lifts as a card on an inset tray.
- * - **`document`**: browser-style tabs — flush, rounded-top; the active tab background matches the canvas so it reads as continuous with the content below.
  *
- * Providing `on.close` renders a close affordance on each non-disabled tab (works in any variant).
- * Each tab carries an optional `disabled` flag (non-interactive). For navigation, not single-choice
- * form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this is a `tablist`).
+ * Each tab carries an optional `disabled` flag (non-interactive). It's a `tablist` — for navigation
+ * between panels, not single-choice form input. Closable tabs are an editor concern, not a panel
+ * switcher's, so they are not part of this component.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -57,16 +54,13 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--tabs--radius` | Tab radius (pills) / tray radius | `--sc-kit--radius--sm` / `--sc-kit--radius--md` |
  * | `--sc-kit--tabs--color` | Default tab text color | `--sc-kit--color--text--secondary` |
  * | `--sc-kit--tabs--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
- * | `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills/document: `--sc-kit--color--text--primary` |
+ * | `--sc-kit--tabs--color--active` | Active tab text color | default: `--sc-kit--color--accent`, pills: `--sc-kit--color--text--primary` |
  * | `--sc-kit--tabs--color--disabled` | Disabled tab text color | `--sc-kit--color--text--muted` |
  * | `--sc-kit--tabs--accent` | Underline bar color (default variant) | `--sc-kit--color--accent` |
  * | `--sc-kit--tabs--border-color` | Bottom border color (default variant) | `--sc-kit--color--border` |
  * | `--sc-kit--tabs--pills--background` | Inset tray background (pills variant) | `--sc-kit--color--bg--active` |
  * | `--sc-kit--tabs--pills--background--active` | Active tab background (pills variant) | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--tabs--pills--shadow--active` | Active tab lift shadow (pills variant) | `--sc-kit--shadow--sm` |
- * | `--sc-kit--tabs--document--background` | Inactive tab background (document variant) | `neutral-200` / `dark-500` |
- * | `--sc-kit--tabs--document--background--active` | Active tab background (document variant) — matches the canvas | `--sc-kit--color--bg--app` |
- * | `--sc-kit--tabs--document--background--hover` | Inactive tab hover background (document variant) | `--sc-kit--color--bg--hover` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T> = InstanceType<typeof Cmp<T>>;

package/dist/ui/tabs/tab.svelte

@@ -1,26 +1,11 @@
-<script lang="ts" generics="T">import { IconSlot } from '../icon';
-import { TabsLocalization } from './tabs-localization';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-const { tab, variant, size, active, on } = $props();
-const localization = new TabsLocalization();
-const closable = $derived(!!on?.close && !tab.disabled);
+<script lang="ts" generics="T">const { tab, variant, size, active, on } = $props();
 const handleClick = () => {
     if (tab.disabled || active) {
         return;
     }
     on?.select?.(tab.value);
 };
-const handleClose = (event) => {
-    event.stopPropagation();
-    on?.close?.(tab.value);
-};
-const handleCloseKeydown = (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        event.stopPropagation();
-        on?.close?.(tab.value);
-    }
-};
+export {};
 </script>
 
 <button
@@ -30,25 +15,18 @@ const handleCloseKeydown = (event) => {
   class:tab--hoverable={!active && !tab.disabled}
   class:tab--default-active={variant === 'default' && active}
   class:tab--pills-active={variant === 'pills' && active}
-  class:tab--document-active={variant === 'document' && active}
-  class:tab--document-hoverable={variant === 'document' && !active && !tab.disabled}
   role="tab"
   aria-selected={active}
   disabled={tab.disabled}
   onclick={handleClick}>
   <span class="tab__label">{tab.label}</span>
-  {#if closable}
-    <span class="tab__close" role="button" tabindex="0" aria-label={localization.close} onclick={handleClose} onkeydown={handleCloseKeydown}>
-      <IconSlot icon={IconDismiss} fallbacks={{ size: 'sm' }} />
-    </span>
-  {/if}
 </button>
 
 <style>.tab {
-  --_tab--height: var(--sc-kit--tabs--height, 2.25rem);
-  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--sc-kit--font-size--md));
-  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--sc-kit--font-weight--medium));
-  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, 0.875rem);
+  --_tab--height: var(--sc-kit--tabs--height, var(--_tab--size-height));
+  --_tab--font-size: var(--sc-kit--tabs--font-size, var(--_tab--size-font-size));
+  --_tab--font-weight: var(--sc-kit--tabs--font-weight, var(--_tab--size-font-weight));
+  --_tab--padding-inline: var(--sc-kit--tabs--padding-inline, var(--_tab--size-padding-inline));
   --_tab--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
   --_tab--color: var(--sc-kit--tabs--color, var(--sc-kit--color--text--secondary));
   --_tab--color-hover: var(--sc-kit--tabs--color--hover, var(--sc-kit--color--text--primary));
@@ -57,9 +35,6 @@ const handleCloseKeydown = (event) => {
   --_tab--accent: var(--sc-kit--tabs--accent, var(--sc-kit--color--accent));
   --_tab--pills-background-active: var(--sc-kit--tabs--pills--background--active, var(--sc-kit--color--bg--panel));
   --_tab--pills-shadow-active: var(--sc-kit--tabs--pills--shadow--active, var(--sc-kit--shadow--sm));
-  --_tab--document-background: var(--sc-kit--tabs--document--background, light-dark(#e5e7eb, #272727));
-  --_tab--document-background-active: var(--sc-kit--tabs--document--background--active, var(--sc-kit--color--bg--app));
-  --_tab--document-background-hover: var(--sc-kit--tabs--document--background--hover, var(--sc-kit--color--bg--hover));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -80,16 +55,16 @@ const handleCloseKeydown = (event) => {
   transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .tab--sm {
-  --sc-kit--tabs--height: 1.75rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--regular);
-  --sc-kit--tabs--padding-inline: 0.625rem;
+  --_tab--size-height: 1.75rem;
+  --_tab--size-font-size: var(--sc-kit--font-size--sm);
+  --_tab--size-font-weight: var(--sc-kit--font-weight--regular);
+  --_tab--size-padding-inline: 0.625rem;
 }
 .tab--md {
-  --sc-kit--tabs--height: 2.25rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--tabs--font-weight: var(--sc-kit--font-weight--medium);
-  --sc-kit--tabs--padding-inline: 0.875rem;
+  --_tab--size-height: 2.25rem;
+  --_tab--size-font-size: var(--sc-kit--font-size--md);
+  --_tab--size-font-weight: var(--sc-kit--font-weight--medium);
+  --_tab--size-padding-inline: 0.875rem;
 }
 .tab--hoverable:hover {
   color: var(--_tab--color-hover);
@@ -123,23 +98,6 @@ const handleCloseKeydown = (event) => {
   background: var(--_tab--pills-background-active);
   box-shadow: var(--_tab--pills-shadow-active);
 }
-.tab--document {
-  --_tab--color-active-default: var(--sc-kit--color--text--primary);
-  --_tab--height: 2rem;
-  --_tab--padding-inline: 0.75rem;
-  justify-content: flex-start;
-  gap: 0.5rem;
-  min-width: 7rem;
-  background: var(--_tab--document-background);
-  border-radius: 0.25rem 0.5rem 0 0;
-}
-.tab--document-hoverable:hover {
-  background: var(--_tab--document-background-hover);
-}
-.tab--document-active {
-  color: var(--_tab--color-active);
-  background: var(--_tab--document-background-active);
-}
 .tab:focus-visible {
   outline: 2px solid var(--sc-kit--color--border--focus);
   outline-offset: 2px;
@@ -147,23 +105,4 @@ const handleCloseKeydown = (event) => {
 .tab__label {
   display: inline-block;
   max-width: 100%;
-}
-.tab__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  margin-left: auto;
-  padding: 0.125rem;
-  color: var(--sc-kit--color--text--secondary);
-  border-radius: var(--sc-kit--radius--sm);
-  cursor: pointer;
-  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
-}
-.tab__close:hover {
-  color: var(--sc-kit--color--text--primary);
-}
-.tab__close:focus-visible {
-  outline: 2px solid var(--sc-kit--color--border--focus);
-  outline-offset: 2px;
 }</style>

package/dist/ui/tabs/tab.svelte.d.ts

@@ -7,7 +7,6 @@ declare function $$render<T>(): {
         active: boolean;
         on?: {
             select?: (value: T) => void;
-            close?: (value: T) => void;
         };
     };
     exports: {};

package/dist/ui/tabs/types.d.ts

@@ -1,4 +1,4 @@
-export type TabsVariant = 'default' | 'pills' | 'document';
+export type TabsVariant = 'default' | 'pills';
 export type TabsSize = 'sm' | 'md';
 export type Tab<TValue = unknown> = {
     value: TValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -163,6 +163,10 @@
       "types": "./dist/ui/divider/index.d.ts",
       "svelte": "./dist/ui/divider/index.js"
     },
+    "./ui/document-tabs": {
+      "types": "./dist/ui/document-tabs/index.d.ts",
+      "svelte": "./dist/ui/document-tabs/index.js"
+    },
     "./ui/drag-and-drop": {
       "types": "./dist/ui/drag-and-drop/index.d.ts",
       "svelte": "./dist/ui/drag-and-drop/index.js"

package/dist/ui/tabs/tabs-localization.d.ts

@@ -1,3 +0,0 @@
-export declare class TabsLocalization {
-    get close(): string;
-}

package/dist/ui/tabs/tabs-localization.js

@@ -1,12 +0,0 @@
-import { AppLocale } from '../../core/locale';
-const loc = {
-    close: {
-        en: 'Close tab',
-        no: 'Lukk fane'
-    }
-};
-export class TabsLocalization {
-    get close() {
-        return loc.close[AppLocale.current];
-    }
-}