@streamscloud/kit 0.9.0 → 0.9.2

package/README.md

@@ -0,0 +1,28 @@
+# @streamscloud/kit
+
+Shared UI components + utilities for StreamsCloud frontend apps. Svelte 5 (runes), TypeScript strict, SCSS/BEM.
+
+## Develop
+
+```sh
+npm install
+npm run dev          # dev playground, http://localhost:3011
+```
+
+After cloning, run `./setup-claude.sh` (Windows: `.\setup-claude.ps1`) to wire shared Claude hooks and skills from the sibling `development-memory` checkout —
+without it agent sessions run with no hooks and no shared skills. Re-run after changing `.claude/sc-skills`.
+
+## Checks
+
+```sh
+npm run check        # svelte-check + tsc for node files
+npm run lint         # prettier --check + eslint
+```
+
+## Release
+
+Always via the npm scripts — `npm run publish:prod` / `npm run publish:dev`, never raw `npm publish`. The full workflow is in `.claude/CLAUDE.md`.
+
+## Context
+
+Project facts, decisions (ADRs), and reference live in [`project-dev-memory/`](project-dev-memory/README.md). Agent rules live in `.claude/`.

package/dist/styles/_semantic.scss

@@ -7,11 +7,11 @@
   // ============================================================
   // COLOR — SURFACES
   // ============================================================
-  --sc-kit--color--bg--app: light-dark(#f6f7f9, #{$color-dark-900});
+  --sc-kit--color--bg--app: light-dark(#{$color-neutral-50}, #{$color-dark-900});
   --sc-kit--color--bg--panel: light-dark(#{$color-white}, #{$color-dark-800});
-  --sc-kit--color--bg--element: light-dark(#{$color-neutral-50}, #{$color-dark-800});
+  --sc-kit--color--bg--element: light-dark(#{$color-neutral-100}, #{$color-dark-700});
   --sc-kit--color--bg--field: light-dark(#{$color-white}, #{$color-dark-700});
-  --sc-kit--color--bg--field-alt: light-dark(#f8f9fb, #{$color-dark-700});
+  --sc-kit--color--bg--field-alt: light-dark(#{$color-neutral-50}, #{$color-dark-700});
   --sc-kit--color--bg--hover: light-dark(#f3f5f8, #{$color-dark-700});
   --sc-kit--color--bg--active: light-dark(#eef2f8, #{$color-dark-600});
   --sc-kit--color--bg--menu-active: light-dark(#{$color-blue-50}, #{$color-dark-500});
@@ -20,9 +20,9 @@
   // ============================================================
   // COLOR — TEXT
   // ============================================================
-  --sc-kit--color--text--primary: light-dark(#1a1d21, #{$color-white});
+  --sc-kit--color--text--primary: light-dark(#{$color-dark-800}, #{$color-white});
   --sc-kit--color--text--secondary: light-dark(#5c6370, #{$color-neutral-300});
-  --sc-kit--color--text--muted: light-dark(#9aa0aa, #{$color-neutral-400});
+  --sc-kit--color--text--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-400});
   --sc-kit--color--text--placeholder: light-dark(#b4b9c2, #{$color-neutral-500});
   --sc-kit--color--text--label: light-dark(#{$color-neutral-500}, #{$color-neutral-300});
   --sc-kit--color--text--on-accent: #{$color-white};
@@ -31,17 +31,17 @@
   // COLOR — BORDERS
   // ============================================================
   --sc-kit--color--border: light-dark(#{$color-neutral-200}, #{$color-dark-600});
-  --sc-kit--color--border--strong: light-dark(#d5d8de, #{$color-dark-500});
-  --sc-kit--color--border--field: light-dark(#e3e6eb, #{$color-dark-600});
+  --sc-kit--color--border--strong: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
+  --sc-kit--color--border--field: light-dark(#{$color-neutral-200}, #{$color-dark-600});
   --sc-kit--color--border--focus: light-dark(#{$color-blue-500}, #{$color-blue-400});
 
   // ============================================================
   // COLOR — BRAND / ACCENT — anchored at #144AB0
   // ============================================================
   --sc-kit--color--accent: light-dark(#{$color-blue-500}, #{$color-blue-400});
-  --sc-kit--color--accent--hover: light-dark(#0f3a8c, #{$color-blue-500});
-  --sc-kit--color--accent--soft: light-dark(#e3ebf8, #{$color-blue-900});
-  --sc-kit--color--accent--softer: light-dark(#f1f5fb, #{$color-blue-900});
+  --sc-kit--color--accent--hover: light-dark(#{$color-blue-700}, #{$color-blue-500});
+  --sc-kit--color--accent--soft: light-dark(#{$color-blue-100}, #{$color-blue-900});
+  --sc-kit--color--accent--softer: light-dark(#{$color-blue-50}, #{$color-blue-900});
 
   // ============================================================
   // COLOR — STATUS
@@ -65,7 +65,7 @@
   // COLOR — OVERLAYS
   // ============================================================
   --sc-kit--color--bg--scrim: light-dark(rgb(0 0 0 / 45%), rgb(0 0 0 / 65%));
-  --sc-kit--color--bg--tooltip: light-dark(#1a1d21, #{$color-dark-700});
+  --sc-kit--color--bg--tooltip: light-dark(#{$color-dark-800}, #{$color-dark-700});
   --sc-kit--color--text--tooltip: #{$color-white};
 
   // Z-scale — relative stacking order for the library's overlay components.

package/dist/ui/ai-panel/ai-panel-localization.d.ts

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

package/dist/ui/ai-panel/ai-panel-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    attach: {
+        en: 'Attach',
+        no: 'Legg ved'
+    }
+};
+export class AiPanelLocalization {
+    get attach() {
+        return loc.attach[AppLocale.current];
+    }
+}

package/dist/ui/ai-panel/cmp.ai-panel.svelte

@@ -0,0 +1,90 @@
+<script lang="ts" generics="T">import { Button } from '../button';
+import { SegmentedControl } from '../segmented-control';
+import { Textarea } from '../textarea';
+import { AiPanelLocalization } from './ai-panel-localization';
+import IconAdd from '@fluentui/svg-icons/icons/add_20_regular.svg?raw';
+import IconSparkle from '@fluentui/svg-icons/icons/sparkle_20_regular.svg?raw';
+const { segments, activeSegment, body, prompt = '', placeholder = '', generateLabel = '', on } = $props();
+const localization = new AiPanelLocalization();
+</script>
+
+<div class="ai-panel">
+  <div class="ai-panel__tabs">
+    <SegmentedControl value={activeSegment} segments={segments} size="sm" fullWidth on={{ change: (value) => on?.tabChange?.(value) }} />
+  </div>
+
+  <div class="ai-panel__body">
+    {@render body()}
+  </div>
+
+  <div class="ai-panel__composer">
+    <Textarea value={prompt} placeholder={placeholder} borderless rows={3} on={{ input: (value) => on?.promptInput?.(value) }} />
+    <span class="ai-panel__attach">
+      <Button type="button" variant="ghost" size="sm" icon={IconAdd} aria-label={localization.attach} on={{ click: () => on?.attach?.() }} />
+    </span>
+  </div>
+
+  <Button type="button" variant="success" fullWidth icon={IconSparkle} on={{ click: () => on?.generate?.() }}>{generateLabel}</Button>
+</div>
+
+<!--
+@component
+AiPanel — right-edge AI assistant panel: a segment strip, a consumer-filled `body`, and a built-in
+composer (prompt textarea + attach button + Generate bar). Compose-only; collapse is the surrounding
+layout's concern. User-facing copy (placeholder, Generate label) is consumer-supplied.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--ai-panel--width` | Panel width | `300px` |
+| `--sc-kit--ai-panel--gap` | Gap between sections | `16px` |
+| `--sc-kit--ai-panel--padding` | Panel padding | `16px` |
+| `--sc-kit--ai-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--ai-panel--border-color` | Left divider color | `--sc-kit--color--border` |
+| `--sc-kit--ai-panel--surface` | Body / composer / tab-tray fill | `--sc-kit--color--bg--app` |
+| `--sc-kit--ai-panel--surface-radius` | Body / composer corner radius | `--sc-kit--radius--md` |
+-->
+
+<style>.ai-panel {
+  --_ai-panel--width: var(--sc-kit--ai-panel--width, 18.75rem);
+  --_ai-panel--gap: var(--sc-kit--ai-panel--gap, 1rem);
+  --_ai-panel--padding: var(--sc-kit--ai-panel--padding, 1rem);
+  --_ai-panel--background: var(--sc-kit--ai-panel--background, var(--sc-kit--color--bg--panel));
+  --_ai-panel--border-color: var(--sc-kit--ai-panel--border-color, var(--sc-kit--color--border));
+  --_ai-panel--surface: var(--sc-kit--ai-panel--surface, var(--sc-kit--color--bg--app));
+  --_ai-panel--surface-radius: var(--sc-kit--ai-panel--surface-radius, var(--sc-kit--radius--md));
+  display: flex;
+  flex-direction: column;
+  gap: var(--_ai-panel--gap);
+  width: var(--_ai-panel--width);
+  padding: var(--_ai-panel--padding);
+  background: var(--_ai-panel--background);
+  border-left: 1px solid var(--_ai-panel--border-color);
+  overflow: hidden;
+}
+.ai-panel__tabs {
+  --sc-kit--segmented-control--tray--background: var(--_ai-panel--surface);
+  margin-bottom: -0.5rem;
+}
+.ai-panel__body {
+  flex: 1;
+  min-height: 15rem;
+  background: var(--_ai-panel--surface);
+  border-radius: var(--_ai-panel--surface-radius);
+  overflow-y: auto;
+}
+.ai-panel__composer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 6rem;
+  padding: 0.75rem;
+  background: var(--_ai-panel--surface);
+  border-radius: var(--_ai-panel--surface-radius);
+}
+.ai-panel__attach {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+}</style>

package/dist/ui/ai-panel/cmp.ai-panel.svelte.d.ts

@@ -0,0 +1,58 @@
+import { type Segment } from '../segmented-control';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        segments: Segment<NoInfer<T>>[];
+        activeSegment: T;
+        /** Content for the active segment — the consumer renders per-segment UI here. */
+        body: Snippet;
+        /** Composer textarea value. */
+        prompt?: string;
+        placeholder?: string;
+        /** Generate button label — consumer-supplied (kit ships no user-facing copy). */
+        generateLabel?: string;
+        on?: {
+            tabChange?: (value: T) => void;
+            promptInput?: (value: string) => void;
+            attach?: () => void;
+            generate?: () => 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']>;
+}
+/**
+ * AiPanel — right-edge AI assistant panel: a segment strip, a consumer-filled `body`, and a built-in
+ * composer (prompt textarea + attach button + Generate bar). Compose-only; collapse is the surrounding
+ * layout's concern. User-facing copy (placeholder, Generate label) is consumer-supplied.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--ai-panel--width` | Panel width | `300px` |
+ * | `--sc-kit--ai-panel--gap` | Gap between sections | `16px` |
+ * | `--sc-kit--ai-panel--padding` | Panel padding | `16px` |
+ * | `--sc-kit--ai-panel--background` | Panel background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--ai-panel--border-color` | Left divider color | `--sc-kit--color--border` |
+ * | `--sc-kit--ai-panel--surface` | Body / composer / tab-tray fill | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--ai-panel--surface-radius` | Body / composer corner radius | `--sc-kit--radius--md` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/ai-panel/index.d.ts

@@ -0,0 +1 @@
+export { default as AiPanel } from './cmp.ai-panel.svelte';

package/dist/ui/ai-panel/index.js

@@ -0,0 +1 @@
+export { default as AiPanel } from './cmp.ai-panel.svelte';

package/dist/ui/avatar/cmp.avatar.svelte

@@ -62,7 +62,7 @@ the load / error / stub state machine.
   --sc-kit--image--border-radius: 50%;
   --sc-kit--image--background: var(--_avatar--background);
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   width: var(--_avatar--size);

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

@@ -105,7 +105,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
 | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
-| `--sc-kit--button--width` | Explicit width | `auto` |
+| `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--max-width` | Maximum width | `100%` |
 -->
@@ -122,13 +122,13 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--sc-kit--space--4));
   --_btn--font-size: var(--sc-kit--button--font-size, var(--sc-kit--font-size--md));
   --_btn--gap: var(--sc-kit--button--gap, var(--sc-kit--space--2));
-  --_btn--width: var(--sc-kit--button--width, auto);
+  --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
   --_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
   --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--medium));
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--_btn--gap);

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

@@ -63,7 +63,7 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
- * | `--sc-kit--button--width` | Explicit width | `auto` |
+ * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--max-width` | Maximum width | `100%` |
  */

package/dist/ui/checkbox/cmp.checkbox.svelte

@@ -17,11 +17,9 @@ const handleClick = (event) => {
 
 <label class="check" class:check--on={isOn} class:check--indeterminate={isIndeterminate} class:check--disabled={disabled} title={title}>
   <button type="button" class="check__box" role="checkbox" aria-checked={ariaChecked} disabled={disabled} onclick={handleClick}>
-    {#if isOn}
-      <span class="check__mark" aria-hidden="true"><Icon src={IconCheckmark} /></span>
-    {:else if isIndeterminate}
-      <span class="check__mark" aria-hidden="true"><Icon src={IconSubtract} /></span>
-    {/if}
+    <span class="check__mark" class:check__mark--visible={isOn || isIndeterminate} aria-hidden="true">
+      <Icon src={isIndeterminate ? IconSubtract : IconCheckmark} />
+    </span>
   </button>
   {#if typeof label === 'string'}
     <span class="check__label">{label}</span>
@@ -66,9 +64,10 @@ so it can be safely nested inside clickable rows.
   --_check--label-font-size: var(--sc-kit--checkbox--label--font-size, var(--sc-kit--font-size--md));
   --_check--label-line-height: var(--sc-kit--checkbox--label--line-height, var(--sc-kit--line-height--md));
   --_check--label-color: var(--sc-kit--checkbox--label--color, var(--sc-kit--color--text--primary));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_check--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
   user-select: none;
@@ -110,6 +109,11 @@ so it can be safely nested inside clickable rows.
 .check__mark {
   --sc-kit--icon--size: 0.75rem;
   display: inline-flex;
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.check__mark--visible {
+  opacity: 1;
 }
 .check__label {
   min-width: 0;

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

@@ -85,9 +85,10 @@ checkmark on selected chips.
   --_cg--color-selected: var(--sc-kit--chip-group--color--selected, var(--sc-kit--color--accent));
   --_cg--background-selected-hover: var(--sc-kit--chip-group--background--selected-hover, var(--sc-kit--color--accent--softer));
   --_cg--focus-ring-color: var(--sc-kit--chip-group--focus-ring-color, var(--sc-kit--color--border--focus));
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: var(--_cg--gap);
+  width: fit-content;
   max-width: 100%;
 }
 .chip-group--sm {

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

@@ -8,7 +8,7 @@ import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import { colord } from 'colord';
 import AwesomeColorPicker from 'svelte-awesome-color-picker';
-let { value, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon } = $props();
+let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon } = $props();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
@@ -33,6 +33,7 @@ const previewBackgroundColor = $derived.by(() => {
     }
     return colord(displayColor).toHex().substring(0, 7);
 });
+const alphaPercent = $derived(displayColor ? `${Math.round(colord(displayColor).alpha() * 100)}%` : '');
 const triggerPlaceholder = $derived(placeholder ?? loc.notSet);
 const resetValue = (e) => {
     e.preventDefault();
@@ -52,6 +53,14 @@ const onColorPickerInput = ({ hex }) => {
       <div class="color-picker__trigger">
         {#if children}
           {@render children()}
+        {:else if variant === 'field'}
+          <div class="color-picker__field color-picker__field--{size}">
+            <span class="color-picker__field-swatch" style:background={previewBackgroundColor} aria-hidden="true"></span>
+            <span class="color-picker__field-label">{label}</span>
+            {#if displayColor}
+              <span class="color-picker__field-value">{alphaPercent}</span>
+            {/if}
+          </div>
         {:else}
           <Input
             value={value || ''}
@@ -118,6 +127,8 @@ between black and white for contrast.
 | Prop | Type | Default |
 |---|---|---|
 | `value` | `string \| null \| undefined` | required |
+| `variant` | `'fill' \| 'field'` | `'fill'` |
+| `label` | `string` (field variant row label) | — |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
 | `clearable` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
@@ -147,6 +158,54 @@ between black and white for contrast.
   transition: none;
   --sc-kit--input--cursor--inert: pointer;
 }
+.color-picker__field {
+  --_color-picker--field-height: var(--sc-kit--field--height--md);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--md);
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--sc-kit--space--2);
+  height: var(--_color-picker--field-height);
+  padding-inline: var(--_color-picker--field-padding-inline);
+  background: var(--sc-kit--color--bg--field);
+  border: 1px solid var(--sc-kit--color--border--field);
+  border-radius: var(--sc-kit--radius--md);
+  cursor: pointer;
+  transition: border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.color-picker__field--sm {
+  --_color-picker--field-height: var(--sc-kit--field--height--sm);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.color-picker__field--lg {
+  --_color-picker--field-height: var(--sc-kit--field--height--lg);
+  --_color-picker--field-padding-inline: var(--sc-kit--field--padding-inline--lg);
+}
+.color-picker__field:hover {
+  border-color: var(--sc-kit--color--border--strong);
+}
+.color-picker__field-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  border: 1px solid var(--sc-kit--color--border);
+  border-radius: var(--sc-kit--radius--sm);
+}
+.color-picker__field-label {
+  flex: 1;
+  min-width: 0;
+  color: var(--sc-kit--color--text--primary);
+  font-size: var(--sc-kit--font-size--sm);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.color-picker__field-value {
+  flex-shrink: 0;
+  color: var(--sc-kit--color--text--secondary);
+  font-size: var(--sc-kit--font-size--sm);
+}
 .color-picker__chevron, .color-picker__clear {
   display: inline-flex;
   align-items: center;

package/dist/ui/color-picker/cmp.color-picker.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | null | undefined;
+    /** Trigger presentation: `'fill'` floods the field with the color; `'field'` is a compact row (swatch + label + opacity). @default 'fill' */
+    variant?: 'fill' | 'field';
+    /** Row label for the `'field'` variant (e.g. "Background Color"). */
+    label?: string;
     /** Size preset (shared with Input / DatePicker / Select). @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     /** Default color shown in the picker UI when value is empty (does not set the value itself). */
@@ -35,6 +39,8 @@ type Props = {
  * | Prop | Type | Default |
  * |---|---|---|
  * | `value` | `string \| null \| undefined` | required |
+ * | `variant` | `'fill' \| 'field'` | `'fill'` |
+ * | `label` | `string` (field variant row label) | — |
  * | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
  * | `clearable` | `boolean` | `false` |
  * | `disabled` | `boolean` | `false` |

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

@@ -222,7 +222,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
 }
 .date-picker {
   position: relative;
-  display: inline-block;
+  display: flex;
   width: var(--_dp--width);
   max-width: 100%;
 }

package/dist/ui/input/cmp.input.svelte

@@ -195,7 +195,7 @@ or the clear button (see `HandleInput`'s availability pill).
 }
 .input {
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   width: var(--_in--width);
   max-width: 100%;

package/dist/ui/numeral-input/cmp.numeral-input.svelte

@@ -232,7 +232,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 }
 .numeral-input {
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   width: var(--_ni--width);
   max-width: 100%;

package/dist/ui/option-pill/cmp.option-pill.svelte

@@ -77,9 +77,10 @@ or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
   --_op--thumb-size: var(--sc-kit--option-pill--thumb--size, 1.75rem);
   --_op--thumb-background: var(--sc-kit--option-pill--thumb--background, var(--sc-kit--color--bg--active));
   --_op--thumb-color: var(--sc-kit--option-pill--thumb--color, var(--sc-kit--color--text--muted));
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: var(--_op--gap);
+  width: fit-content;
 }
 .option-pill--disabled {
   opacity: 0.6;

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

@@ -31,6 +31,21 @@ $effect(() => {
 const collapseButtons = $derived([leftPanel?.id, rightPanel?.id].filter((id) => id !== null && id !== undefined));
 const leftCollapsed = $derived(leftPanel?.entry.collapsed ?? false);
 const rightCollapsed = $derived(rightPanel?.entry.collapsed ?? false);
+export function toggleLeft() {
+    leftPanel?.entry.toggleCollapsed();
+}
+export function toggleRight() {
+    rightPanel?.entry.toggleCollapsed();
+}
+/** Collapses both sidebars, or expands both when they are already all collapsed. */
+export function toggleBoth() {
+    const entries = [leftPanel?.entry, rightPanel?.entry].filter((entry) => !!entry);
+    if (entries.length === 0) {
+        return;
+    }
+    const allCollapsed = entries.every((entry) => entry.collapsed);
+    entries.forEach((entry) => entry.setCollapsed(!allCollapsed));
+}
 $effect(() => {
     if (leftPanel) {
         leftPanel.entry.isValid = sidebarLeftIsValid;
@@ -86,6 +101,9 @@ PagePanelSidebars — a `PagePanel` whose body has collapsible left / right side
 fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
 header can target them. Sidebars slide horizontally on collapse / expand.
 
+Exposes imperative `toggleLeft()` / `toggleRight()` / `toggleBoth()` via `bind:this` for external
+collapse controls (e.g. a top-bar button), so callers don't reach into `PanelState` by id.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

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

@@ -20,11 +20,18 @@ type Props = {
  * fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
  * header can target them. Sidebars slide horizontally on collapse / expand.
  *
+ * Exposes imperative `toggleLeft()` / `toggleRight()` / `toggleBoth()` via `bind:this` for external
+ * collapse controls (e.g. a top-bar button), so callers don't reach into `PanelState` by id.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--page-panel-sidebars--border-color` | Sidebar divider color | `--sc-kit--color--border` |
  */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
+declare const Cmp: import("svelte").Component<Props, {
+    toggleLeft: () => void;
+    toggleRight: () => void;
+    toggleBoth: () => void;
+}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -280,6 +280,7 @@ to min / max; Enter / Space toggle collapsed.
 }
 .page-panel__header-left {
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: 1rem;
   min-width: 0;
@@ -298,6 +299,7 @@ to min / max; Enter / Space toggle collapsed.
 }
 .page-panel__header-right {
   display: flex;
+  align-self: stretch;
   align-items: center;
   justify-content: flex-end;
   margin-left: auto;

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon } from '../icon';
 import { PageLayoutLocalization } from './page-layout-localization';
-import IconSlideTransition from '@fluentui/svg-icons/icons/slide_transition_20_regular.svg?raw';
+import IconPanelLeft from '@fluentui/svg-icons/icons/panel_left_20_regular.svg?raw';
 const { panelState, panelId } = $props();
 const localization = new PageLayoutLocalization();
 const entry = $derived(panelState.get(panelId));
@@ -19,7 +19,7 @@ const handleClick = () => {
     onclick={handleClick}
     aria-label={localization.togglePanel}
     aria-pressed={entry.collapsed}>
-    <Icon src={IconSlideTransition} />
+    <Icon src={IconPanelLeft} />
   </button>
 {/if}
 
@@ -38,6 +38,7 @@ state. Renders nothing if the target panel isn't registered. Typically rendered
 | `--sc-kit--panel-collapse-button--color--invalid` | Color when the target panel is invalid | `--sc-kit--color--danger` |
 -->
 <style>.panel-collapse-button {
+  --sc-kit--icon--size: 1rem;
   --_panel-collapse-button--color: var(--sc-kit--panel-collapse-button--color, var(--sc-kit--color--text--muted));
   --_panel-collapse-button--color-hover: var(--sc-kit--panel-collapse-button--color--hover, var(--sc-kit--color--text--primary));
   --_panel-collapse-button--color-invalid: var(--sc-kit--panel-collapse-button--color--invalid, var(--sc-kit--color--danger));

package/dist/ui/pin-input/cmp.pin-input.svelte

@@ -116,8 +116,9 @@ as `<input type="password">`). Fires `on.complete` when all cells are filled.
   --_pi--border-radius: var(--sc-kit--pin-input--border-radius, var(--sc-kit--radius--lg));
   --_pi--color: var(--sc-kit--pin-input--color, var(--sc-kit--color--text--primary));
   --_pi--focus-shadow: var(--sc-kit--pin-input--focus-shadow, var(--sc-kit--shadow--focus));
-  display: inline-flex;
+  display: flex;
   gap: var(--_pi--gap);
+  width: fit-content;
 }
 .pin-input--disabled {
   opacity: 0.6;

package/dist/ui/radio/cmp.radio-card.svelte

@@ -19,7 +19,7 @@ const handleClick = (event) => {
   disabled={disabled}
   onclick={handleClick}>
   <span class="radio-card__dot" aria-hidden="true">
-    {#if selected}<span class="radio-card__inner"></span>{/if}
+    <span class="radio-card__inner" class:radio-card__inner--visible={selected}></span>
   </span>
   <span class="radio-card__body">
     <span class="radio-card__title">{title}</span>
@@ -78,7 +78,7 @@ label line (plan picker, account type, theme picker).
   --_card--dot-background: var(--sc-kit--radio-card--dot--background, var(--sc-kit--color--bg--field));
   --_card--dot-inner-color: var(--sc-kit--radio-card--dot--inner-color, var(--sc-kit--color--accent));
   box-sizing: border-box;
-  display: inline-flex;
+  display: flex;
   align-items: flex-start;
   gap: var(--_card--gap);
   width: 100%;
@@ -127,6 +127,11 @@ label line (plan picker, account type, theme picker).
   height: var(--_card--dot-inner-size);
   background: var(--_card--dot-inner-color);
   border-radius: var(--sc-kit--radius--circle);
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio-card__inner--visible {
+  opacity: 1;
 }
 .radio-card__body {
   display: inline-flex;

package/dist/ui/radio/cmp.radio.svelte

@@ -12,7 +12,7 @@ export {};
 
 <label class="radio" class:radio--on={selected} class:radio--disabled={disabled} title={title}>
   <button type="button" class="radio__dot" role="radio" aria-checked={selected} aria-label={ariaLabel} disabled={disabled} onclick={handleClick}>
-    {#if selected}<span class="radio__inner" aria-hidden="true"></span>{/if}
+    <span class="radio__inner" class:radio__inner--visible={selected} aria-hidden="true"></span>
   </button>
   {#if typeof label === 'string'}
     <span class="radio__label">{label}</span>
@@ -55,9 +55,10 @@ its state to this option's value. Pair with `RadioCard` for option-card layouts.
   --_radio--label-font-size: var(--sc-kit--radio--label--font-size, var(--sc-kit--font-size--md));
   --_radio--label-line-height: var(--sc-kit--radio--label--line-height, var(--sc-kit--line-height--md));
   --_radio--label-color: var(--sc-kit--radio--label--color, var(--sc-kit--color--text--primary));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_radio--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
   user-select: none;
@@ -95,6 +96,11 @@ its state to this option's value. Pair with `RadioCard` for option-card layouts.
   height: var(--_radio--inner-size);
   background: var(--_radio--inner-color);
   border-radius: var(--sc-kit--radius--circle);
+  opacity: 0;
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.radio__inner--visible {
+  opacity: 1;
 }
 .radio__label {
   min-width: 0;

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

@@ -1,40 +1,24 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts" generics="T">const { value, tabs, variant = 'default', size = 'md', compare, on } = $props();
+<script lang="ts" generics="T">import TabItem from './tab.svelte';
+const { value, tabs, variant = 'default', size = 'md', compare, on } = $props();
 const isActive = (tab) => (compare ? compare(value, tab.value) : value === tab.value);
-const handleClick = (tab) => {
-    if (tab.disabled || isActive(tab)) {
-        return;
-    }
-    on?.change?.(tab.value);
-};
 </script>
 
-<div class="tabs tabs--{variant} tabs--{size}" role="tablist">
+<div class="tabs tabs--{variant}" role="tablist">
   {#each tabs as tab, i (i)}
-    <button
-      type="button"
-      class="tabs__tab"
-      class:tabs__tab--active={isActive(tab)}
-      class:tabs__tab--disabled={tab.disabled}
-      role="tab"
-      aria-selected={isActive(tab)}
-      disabled={tab.disabled}
-      onclick={() => handleClick(tab)}>
-      <span class="tabs__label">{tab.label}</span>
-    </button>
+    <TabItem tab={tab} variant={variant} size={size} active={isActive(tab)} on={{ select: on?.change, close: on?.close }} />
   {/each}
 </div>
 
 <!--
 @component
 Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
-(switch on the active `value`). Two visual variants:
+(switch on the active `value`). Three 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`).
 
@@ -43,112 +27,41 @@ form input — use `SegmentedControl` for the latter (it's a `radiogroup`; this
 |---|---|---|
 | `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
 | `--sc-kit--tabs--font-size` | Tab label font size | per size |
+| `--sc-kit--tabs--font-weight` | Tab label font weight | per size (sm: regular / md: medium) |
 | `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
 | `--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: `--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--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 {
-  --_tabs--height: var(--sc-kit--tabs--height, 2.25rem);
-  --_tabs--font-size: var(--sc-kit--tabs--font-size, var(--sc-kit--font-size--md));
-  --_tabs--padding-inline: var(--sc-kit--tabs--padding-inline, 0.875rem);
-  --_tabs--radius: var(--sc-kit--tabs--radius, var(--sc-kit--radius--sm));
-  --_tabs--color: var(--sc-kit--tabs--color, var(--sc-kit--color--text--secondary));
-  --_tabs--color-hover: var(--sc-kit--tabs--color--hover, var(--sc-kit--color--text--primary));
-  --_tabs--color-active: var(--sc-kit--tabs--color--active, var(--_tabs--color-active-default));
-  --_tabs--color-disabled: var(--sc-kit--tabs--color--disabled, var(--sc-kit--color--text--muted));
-  --_tabs--accent: var(--sc-kit--tabs--accent, var(--sc-kit--color--accent));
   --_tabs--border-color: var(--sc-kit--tabs--border-color, var(--sc-kit--color--border));
   --_tabs--pills-background: var(--sc-kit--tabs--pills--background, var(--sc-kit--color--bg--active));
-  --_tabs--pills-background-active: var(--sc-kit--tabs--pills--background--active, var(--sc-kit--color--bg--panel));
-  --_tabs--pills-shadow-active: var(--sc-kit--tabs--pills--shadow--active, var(--sc-kit--shadow--sm));
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
   font-family: inherit;
 }
-.tabs--sm {
-  --sc-kit--tabs--height: 1.75rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--tabs--padding-inline: 0.625rem;
-}
-.tabs--md {
-  --sc-kit--tabs--height: 2.25rem;
-  --sc-kit--tabs--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--tabs--padding-inline: 0.875rem;
-}
 .tabs--default {
-  --_tabs--color-active-default: var(--_tabs--accent);
   border-bottom: 1px solid var(--_tabs--border-color);
 }
-.tabs--default .tabs__tab {
-  border-radius: 0;
-}
-.tabs--default .tabs__tab--active {
-  color: var(--_tabs--color-active);
-}
-.tabs--default .tabs__tab--active::after {
-  content: "";
-  position: absolute;
-  left: var(--_tabs--padding-inline);
-  right: var(--_tabs--padding-inline);
-  bottom: -1px;
-  height: 2px;
-  background: var(--_tabs--accent);
-  border-radius: 2px;
-}
 .tabs--pills {
-  --_tabs--color-active-default: var(--sc-kit--color--text--primary);
   gap: 0;
   padding: 0.25rem;
   background: var(--_tabs--pills-background);
   border-radius: var(--sc-kit--radius--md);
 }
-.tabs--pills .tabs__tab--active {
-  color: var(--_tabs--color-active);
-  background: var(--_tabs--pills-background-active);
-  box-shadow: var(--_tabs--pills-shadow-active);
-}
-.tabs__tab {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--_tabs--height);
-  padding: 0 var(--_tabs--padding-inline);
-  background: transparent;
-  border: none;
-  border-radius: var(--_tabs--radius);
-  color: var(--_tabs--color);
-  font-family: inherit;
-  font-size: var(--_tabs--font-size);
-  font-weight: var(--sc-kit--font-weight--medium);
-  line-height: var(--sc-kit--leading--tight);
-  cursor: pointer;
-  white-space: nowrap;
-  min-width: 0;
-  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
-}
-.tabs__tab:where(:hover):not(.tabs__tab--disabled):not(.tabs__tab--active) {
-  color: var(--_tabs--color-hover);
-}
-.tabs__tab--disabled {
-  color: var(--_tabs--color-disabled);
-  cursor: default;
-}
-.tabs__tab:focus-visible {
-  outline: 2px solid var(--sc-kit--color--border--focus);
-  outline-offset: 2px;
-}
-.tabs__label {
-  display: inline-block;
-  max-width: 100%;
+.tabs--document {
+  gap: 0;
+  align-items: flex-end;
 }</style>

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

@@ -1,22 +1,19 @@
-export type Tab<TValue = unknown> = {
-    value: TValue;
-    label: string;
-    /** Non-interactive — click does nothing. */
-    disabled?: boolean;
-};
+import type { Tab, TabsSize, TabsVariant } 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: Tab<NoInfer<T>>[];
         /** @default 'default' */
-        variant?: "default" | "pills";
+        variant?: TabsVariant;
         /** @default 'md' */
-        size?: "sm" | "md";
+        size?: TabsSize;
         /** Equality for object T values. @default reference equality (`===`) */
         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: {};
@@ -40,11 +37,13 @@ interface $$IsomorphicComponent {
 }
 /**
  * Tabs — header strip for switching between content panels. Panel rendering is consumer-controlled
- * (switch on the active `value`). Two visual variants:
+ * (switch on the active `value`). Three 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`).
  *
@@ -53,17 +52,21 @@ interface $$IsomorphicComponent {
  * |---|---|---|
  * | `--sc-kit--tabs--height` | Tab height | per size (28 / 36 px) |
  * | `--sc-kit--tabs--font-size` | Tab label font size | per size |
+ * | `--sc-kit--tabs--font-weight` | Tab label font weight | per size (sm: regular / md: medium) |
  * | `--sc-kit--tabs--padding-inline` | Per-tab horizontal padding | per size (10 / 14 px) |
  * | `--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: `--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--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/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Tabs } from './cmp.tabs.svelte';
-export type { Tab } from './cmp.tabs.svelte';
+export type { Tab } from './types';

package/dist/ui/tabs/tab.svelte

@@ -0,0 +1,169 @@
+<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);
+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);
+    }
+};
+</script>
+
+<button
+  type="button"
+  class="tab tab--{variant} tab--{size}"
+  class:tab--disabled={tab.disabled}
+  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} 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--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));
+  --_tab--color-active: var(--sc-kit--tabs--color--active, var(--_tab--color-active-default));
+  --_tab--color-disabled: var(--sc-kit--tabs--color--disabled, var(--sc-kit--color--text--muted));
+  --_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;
+  justify-content: center;
+  height: var(--_tab--height);
+  padding: 0 var(--_tab--padding-inline);
+  background: transparent;
+  border: none;
+  border-radius: var(--_tab--radius);
+  color: var(--_tab--color);
+  font-family: inherit;
+  font-size: var(--_tab--font-size);
+  font-weight: var(--_tab--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 0;
+  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--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--hoverable:hover {
+  color: var(--_tab--color-hover);
+}
+.tab--disabled {
+  color: var(--_tab--color-disabled);
+  cursor: default;
+}
+.tab--default {
+  --_tab--color-active-default: var(--_tab--accent);
+  border-radius: 0;
+}
+.tab--default-active {
+  color: var(--_tab--color-active);
+}
+.tab--default-active::after {
+  content: "";
+  position: absolute;
+  left: var(--_tab--padding-inline);
+  right: var(--_tab--padding-inline);
+  bottom: -1px;
+  height: 2px;
+  background: var(--_tab--accent);
+  border-radius: 2px;
+}
+.tab--pills {
+  --_tab--color-active-default: var(--sc-kit--color--text--primary);
+}
+.tab--pills-active {
+  color: var(--_tab--color-active);
+  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;
+}
+.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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+export type TabsVariant = 'default' | 'pills' | 'document';
+export type TabsSize = 'sm' | 'md';
+export type Tab<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+};

package/dist/ui/tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/toggle/cmp.toggle.svelte

@@ -80,14 +80,14 @@ switch left + label right, intrinsic width).
   --_row--label-color: var(--sc-kit--toggle-row--label--color, var(--sc-kit--color--text--primary));
   --_row--sub-font-size: var(--sc-kit--toggle-row--sub--font-size, var(--sc-kit--font-size--sm));
   --_row--sub-color: var(--sc-kit--toggle-row--sub--color, var(--sc-kit--color--text--muted));
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--_row--gap);
+  width: fit-content;
   max-width: 100%;
   cursor: pointer;
 }
 .toggle-row--spread {
-  display: flex;
   justify-content: space-between;
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -91,6 +91,10 @@
       "types": "./dist/core/validation/index.d.ts",
       "svelte": "./dist/core/validation/index.js"
     },
+    "./ui/ai-panel": {
+      "types": "./dist/ui/ai-panel/index.d.ts",
+      "svelte": "./dist/ui/ai-panel/index.js"
+    },
     "./ui/avatar": {
       "types": "./dist/ui/avatar/index.d.ts",
       "svelte": "./dist/ui/avatar/index.js"
@@ -465,7 +469,6 @@
     "yup": "^1.7.1"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
     "@floating-ui/dom": "^1.7.6",
     "@fluentui/svg-icons": "^1.1.326",