@streamscloud/kit 0.45.0 → 0.47.0

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.45.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];
-    }
-}