@streamscloud/kit 0.46.0 → 0.48.0

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/page-toolbar/cmp.toolbar-icon-button.svelte

@@ -55,7 +55,7 @@ so they stay visually identical.
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .toolbar-icon-button--sm {
-  --_tib--size-height: var(--sc-kit--field--height--sm);
+  --_tib--size-height: 1.75rem;
 }
 .toolbar-icon-button--md {
   --_tib--size-height: var(--sc-kit--field--height--md);

package/dist/ui/page-toolbar/cmp.toolbar-option.svelte

@@ -77,6 +77,7 @@ these — plus `ToolbarSectionTitle` — inside one panel to build column / fiel
   --_opt--height: var(--sc-kit--toolbar-option--height, var(--_opt--size-height));
   --_opt--padding-inline: var(--sc-kit--toolbar-option--padding-inline, var(--_opt--size-padding-inline));
   --_opt--font-size: var(--sc-kit--toolbar-option--font-size, var(--_opt--size-font-size));
+  --_opt--line-height: var(--_opt--size-line-height);
   --_opt--gap: var(--sc-kit--toolbar-option--gap, var(--sc-kit--space--2));
   --_opt--border-radius: var(--sc-kit--toolbar-option--border-radius, var(--sc-kit--radius--sm));
   --_opt--color: var(--sc-kit--toolbar-option--color, var(--sc-kit--color--text--primary));
@@ -102,19 +103,21 @@ these — plus `ToolbarSectionTitle` — inside one panel to build column / fiel
   border-radius: var(--_opt--border-radius);
   color: var(--_opt--color);
   font-size: var(--_opt--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_opt--line-height);
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .toolbar-option--sm {
   --_opt--size-height: var(--sc-kit--field--height--sm);
   --_opt--size-padding-inline: var(--sc-kit--space--2);
   --_opt--size-font-size: var(--sc-kit--font-size--sm);
+  --_opt--size-line-height: var(--sc-kit--line-height--control--sm);
   --_opt--size-glyph-size: var(--sc-kit--field--icon--size--sm);
 }
 .toolbar-option--md {
   --_opt--size-height: var(--sc-kit--field--height--md);
   --_opt--size-padding-inline: var(--sc-kit--space--3);
   --_opt--size-font-size: var(--sc-kit--font-size--md);
+  --_opt--size-line-height: var(--sc-kit--line-height--control--md);
   --_opt--size-glyph-size: var(--sc-kit--field--icon--size--md);
 }
 .toolbar-option:hover {

package/dist/ui/page-toolbar/cmp.toolbar-sort-select.svelte.d.ts

@@ -6,7 +6,7 @@ declare function $$render<S>(): {
         value: S;
         /** Title shown above the options. @default localized `Order by` */
         label?: string;
-        /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
+        /** Button size preset — sm = 29px, md = 32px. @default 'sm' */
         size?: "sm" | "md";
         /** Presentational trigger — `'icon'` (flat icon button), `'button'` (labelled secondary button), or a custom snippet. The popover owns the click and is named by `label`. @default 'icon' */
         trigger?: "icon" | "button" | Snippet;

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -54,16 +54,19 @@ Shares the field-height preset so it lines up with other toolbar controls.
 .toolbar-value-stepper--sm {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
+  --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--sm);
   --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .toolbar-value-stepper--md {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
+  --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--md);
   --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper--lg {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
+  --_toolbar-value-stepper--line-height: var(--sc-kit--line-height--control--lg);
   --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper__btn {
@@ -83,6 +86,7 @@ Shares the field-height preset so it lines up with other toolbar controls.
   min-inline-size: var(--_toolbar-value-stepper--value--min-inline-size);
   text-align: center;
   font-size: var(--_toolbar-value-stepper--font-size);
+  line-height: var(--_toolbar-value-stepper--line-height);
   color: var(--sc-kit--color--text--primary);
   font-variant-numeric: tabular-nums;
 }</style>

package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 type ViewMode = 'list' | 'grid' | 'card';
 type Props = {
     view: ViewMode;
-    /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
+    /** Button size preset — sm = 29px, md = 32px. @default 'sm' */
     size?: 'sm' | 'md';
     /** Reveal the `card` view button alongside list / grid. @default false */
     showCard?: boolean;

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -61,6 +61,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
 <style>.segmented-control {
   --_sc--height: var(--sc-kit--segmented-control--height, var(--_sc--size-height));
   --_sc--font-size: var(--sc-kit--segmented-control--font-size, var(--_sc--size-font-size));
+  --_sc--line-height: var(--_sc--size-line-height);
   --_sc--padding-inline: var(--sc-kit--segmented-control--padding-inline, var(--_sc--size-padding-inline));
   --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--_sc--size-radius, var(--sc-kit--field--border-radius--md)));
   --_sc--color: var(--sc-kit--segmented-control--color, var(--sc-kit--color--text--muted));
@@ -83,14 +84,16 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   width: 100%;
 }
 .segmented-control--sm {
-  --_sc--size-height: 1.75rem;
+  --_sc--size-height: 1.8125rem;
   --_sc--size-font-size: var(--sc-kit--font-size--sm);
+  --_sc--size-line-height: var(--sc-kit--line-height--control--sm);
   --_sc--size-padding-inline: 0.625rem;
   --_sc--size-radius: var(--sc-kit--field--border-radius--sm);
 }
 .segmented-control--md {
   --_sc--size-height: 2rem;
   --_sc--size-font-size: var(--sc-kit--font-size--md);
+  --_sc--size-line-height: var(--sc-kit--line-height--control--md);
   --_sc--size-padding-inline: 0.75rem;
   --_sc--size-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -146,7 +149,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   font-family: inherit;
   font-size: var(--_sc--font-size);
   font-weight: var(--sc-kit--font-weight--regular);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_sc--line-height);
   cursor: pointer;
   white-space: nowrap;
   min-width: 0;

package/dist/ui/select/_select-trigger.scss

@@ -18,6 +18,7 @@
   --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
   --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
+  --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -38,7 +39,7 @@
   border-radius: var(--_sel--border-radius);
   color: var(--_sel--color);
   font-size: var(--_sel--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_sel--line-height);
   cursor: pointer;
   // prevents hairline anti-aliasing
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
@@ -48,6 +49,7 @@
     --_sel--size-height: var(--sc-kit--field--height--sm);
     --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
     --_sel--size-font-size: var(--sc-kit--font-size--sm);
+    --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
     --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
     --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
   }
@@ -55,6 +57,7 @@
     --_sel--size-height: var(--sc-kit--field--height--md);
     --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
     --_sel--size-font-size: var(--sc-kit--font-size--md);
+    --_sel--size-line-height: var(--sc-kit--line-height--control--md);
     --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
     --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }
@@ -62,6 +65,7 @@
     --_sel--size-height: var(--sc-kit--field--height--lg);
     --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
     --_sel--size-font-size: var(--sc-kit--font-size--lg);
+    --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
     --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
     --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }

package/dist/ui/select/cmp.input-suggest.svelte

@@ -322,6 +322,7 @@ background--hover}`.
   --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
   --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
+  --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -347,7 +348,7 @@ background--hover}`.
   border-radius: var(--_sel--border-radius);
   color: var(--_sel--color);
   font-size: var(--_sel--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_sel--line-height);
   cursor: pointer;
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -356,6 +357,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--sm);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -363,6 +365,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--md);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--md);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -370,6 +373,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--lg);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -191,6 +191,7 @@ background--hover}`.
   --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
   --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
+  --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -216,7 +217,7 @@ background--hover}`.
   border-radius: var(--_sel--border-radius);
   color: var(--_sel--color);
   font-size: var(--_sel--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_sel--line-height);
   cursor: pointer;
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -225,6 +226,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--sm);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -232,6 +234,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--md);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--md);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -239,6 +242,7 @@ background--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--lg);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }

package/dist/ui/select/multiselect-base.svelte

@@ -405,6 +405,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
   --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
+  --_sel--line-height: var(--sc-kit--select--trigger--line-height, var(--_sel--size-line-height, var(--sc-kit--line-height--control--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
@@ -430,7 +431,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   border-radius: var(--_sel--border-radius);
   color: var(--_sel--color);
   font-size: var(--_sel--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_sel--line-height);
   cursor: pointer;
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
@@ -439,6 +440,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--sm);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--sm);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -446,6 +448,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--md);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--md);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -453,6 +456,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   --_sel--size-height: var(--sc-kit--field--height--lg);
   --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-line-height: var(--sc-kit--line-height--control--lg);
   --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }

package/dist/ui/slider/cmp.slider.svelte

@@ -138,6 +138,7 @@ Optionally renders the current value, a numeric input alongside the track, and t
   padding: 0 var(--sc-kit--space--2);
   text-align: center;
   font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--line-height--control--sm);
   font-variant-numeric: tabular-nums;
   background: var(--sc-kit--color--bg--field);
   border: 1px solid var(--sc-kit--color--border--field);

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>>;