@streamscloud/kit 0.47.0 → 0.49.0

package/dist/styles/_semantic.scss

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

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

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

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

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

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

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

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

@@ -41,7 +41,7 @@ const handleClose = () => {
     onclick={handleClick}
     onkeydown={on?.keydown}>
     {#if tab.icon}
-      <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'sm' }} /></span>
+      <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'control-sm' }} /></span>
     {/if}
     <span class="document-tab__label">{tab.label}</span>
   </button>
@@ -84,6 +84,7 @@ const handleClose = () => {
   max-inline-size: var(--_document-tab--max-width);
   flex-shrink: 0;
   padding-inline: var(--_document-tab--padding-inline);
+  padding-block-start: 1px;
   margin-block-end: var(--_document-tab--baseline-overlap);
   background: var(--_document-tab--background);
   border: var(--_document-tab--border-width) solid var(--_document-tab--border-color);
@@ -122,6 +123,7 @@ const handleClose = () => {
   --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background--active, var(--sc-kit--color--bg--panel)));
   --_document-tab--color: var(--sc-kit--document-tabs--color--active, var(--sc-kit--color--text--primary));
   margin-block-end: 0;
+  padding-block-start: 0;
 }
 .document-tab--hoverable:hover {
   --_document-tab--background: var(--_document-tab--background-hover);
@@ -149,7 +151,7 @@ const handleClose = () => {
   font-family: inherit;
   font-size: var(--_document-tab--font-size);
   font-weight: var(--_document-tab--font-weight);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--sc-kit--line-height--control--sm);
   cursor: var(--_document-tab--cursor);
 }
 .document-tab__button:focus-visible {

package/dist/ui/emoji-picker/cmp.emoji-panel.svelte

@@ -115,7 +115,7 @@ can be embedded directly by input components.
   width: 100%;
   height: var(--sc-kit--field--height--sm);
   font-size: var(--sc-kit--font-size--sm);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--sc-kit--line-height--control--sm);
   padding: 0 var(--sc-kit--field--padding-inline--md);
   border: 1px solid var(--_emoji-panel--border-color);
   border-radius: var(--sc-kit--radius--pill);

package/dist/ui/grid-card/fields/cmp.grid-card-select-field.svelte

@@ -60,6 +60,7 @@ trigger down to the row's own typography and drops its border, so a plain row li
   --_gcsf--chevron-size: var(--sc-kit--grid-card-select-field--chevron--size, 0.75rem);
   --sc-kit--select--trigger--height: var(--_gcsf--height);
   --sc-kit--select--trigger--font-size: var(--_gcsf--font-size);
+  --sc-kit--select--trigger--line-height: var(--_gcsf--line-height);
   --sc-kit--select--trigger--padding-inline: 0;
   --sc-kit--select--trigger--gap: var(--_gcsf--gap);
   --sc-kit--select--trigger--icon--size: var(--_gcsf--chevron-size);

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

@@ -76,7 +76,6 @@ Plus every public CSS variable exposed by `<Input>`.
   background: var(--_hi--prefix-background);
   color: var(--_hi--prefix-color);
   border-inline-end: 1px solid var(--_hi--prefix-border-color);
-  line-height: var(--sc-kit--leading--tight);
   user-select: none;
   white-space: nowrap;
 }

package/dist/ui/icon/cmp.icon.svelte

@@ -60,8 +60,8 @@ Renders an inline SVG icon with configurable size, color presets, and optional s
 | `icon--md` | `1.25rem` (20px) |
 | `icon--lg` | `2rem` (32px) |
 | `icon--xlg` | `3rem` (48px) |
-| `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
-| `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
+| `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (14px) |
+| `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (15px) |
 | `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
 | `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
 | `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |

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

@@ -6,7 +6,7 @@ interface Props {
     color?: IconColor | null;
     /**
      * Size preset. Standalone visual weight `sm | md | lg | xlg` = 14 / 20 / 32 / 48 px;
-     * control-paired `control-xs | control-sm | control-md | control-lg | control-xl` = 13 / 14 / 16 / 18 / 20 px.
+     * control-paired `control-xs | control-sm | control-md | control-lg | control-xl` = 14 / 15 / 16 / 18 / 20 px.
      * Omit to fall through to the CSS cascade (default 1.25rem = 20px).
      */
     size?: IconSize | null;
@@ -36,8 +36,8 @@ interface Props {
  * | `icon--md` | `1.25rem` (20px) |
  * | `icon--lg` | `2rem` (32px) |
  * | `icon--xlg` | `3rem` (48px) |
- * | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
- * | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
+ * | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (14px) |
+ * | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (15px) |
  * | `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
  * | `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
  * | `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |

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

@@ -68,7 +68,7 @@ styling all come from Singleselect.
 | `--sc-kit--icon-picker--selection--icon--size` | Leading icon size in the trigger selection | `1.125rem` |
 -->
 <style>.icon-picker__selection {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--sc-kit--space--2);
   min-width: 0;

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -71,16 +71,20 @@ status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, a
 }
 .icon-text--sm {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
+  --_icon-text--text--line-height: var(--sc-kit--line-height--control--sm);
 }
 .icon-text--md {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
+  --_icon-text--text--line-height: var(--sc-kit--line-height--control--md);
 }
 .icon-text--lg {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
+  --_icon-text--text--line-height: var(--sc-kit--line-height--control--lg);
 }
 .icon-text__text {
   font-size: var(--_icon-text--text--font-size);
   display: var(--_icon-text--text--display);
+  line-height: var(--_icon-text--text--line-height);
 }
 .icon-text__text--trim {
   display: block;

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -11,9 +11,9 @@ type Props = {
     trimText?: boolean;
     /** Hide text, showing only the icon(s) */
     hideText?: boolean;
-    /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/18. Unset: text + icon follow the inherited font size (`1em`). */
+    /** Size preset matching `Button` of the same size — text/icon px: sm 12/15, md 14/16, lg 16/18. Unset: text + icon follow the inherited font size (`1em`). */
     size?: 'sm' | 'md' | 'lg';
-    /** Bump the icon(s) one step up the scale relative to `size`, text unchanged (sm 14→16, md 16→18, lg 18→20). @default 'default' */
+    /** Bump the icon(s) one step up the scale relative to `size`, text unchanged (sm 15→16, md 16→18, lg 18→20). @default 'default' */
     iconScale?: 'default' | 'large';
     children?: Snippet;
 };

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

@@ -212,6 +212,7 @@ or the clear button (see `HandleInput`'s availability pill).
   --_in--border-radius: var(--sc-kit--input--border-radius, var(--_in--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_in--underline-color: var(--sc-kit--input--underline-color, transparent);
   --_in--font-size: var(--sc-kit--input--font-size, var(--_in--size-font-size, var(--sc-kit--font-size--md)));
+  --_in--line-height: var(--_in--size-line-height, var(--sc-kit--line-height--control--md));
   --_in--color: var(--sc-kit--input--color, var(--sc-kit--color--text--primary));
   --_in--placeholder-color: var(--sc-kit--input--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_in--icon-color: var(--sc-kit--input--icon--color, var(--sc-kit--color--text--muted));
@@ -236,7 +237,7 @@ or the clear button (see `HandleInput`'s availability pill).
   border-radius: var(--_in--border-radius);
   color: var(--_in--color);
   font-size: var(--_in--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_in--line-height);
   cursor: text;
   position: relative;
   overflow: hidden;
@@ -256,6 +257,7 @@ or the clear button (see `HandleInput`'s availability pill).
   --_in--size-height: var(--sc-kit--field--height--sm);
   --_in--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_in--size-font-size: var(--sc-kit--font-size--sm);
+  --_in--size-line-height: var(--sc-kit--line-height--control--sm);
   --_in--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_in--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -263,6 +265,7 @@ or the clear button (see `HandleInput`'s availability pill).
   --_in--size-height: var(--sc-kit--field--height--md);
   --_in--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_in--size-font-size: var(--sc-kit--font-size--md);
+  --_in--size-line-height: var(--sc-kit--line-height--control--md);
   --_in--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -270,6 +273,7 @@ or the clear button (see `HandleInput`'s availability pill).
   --_in--size-height: var(--sc-kit--field--height--lg);
   --_in--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_in--size-font-size: var(--sc-kit--font-size--lg);
+  --_in--size-line-height: var(--sc-kit--line-height--control--lg);
   --_in--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
 }

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

@@ -219,6 +219,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--border-radius: var(--sc-kit--numeral-input--border-radius, var(--_ni--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_ni--underline-color: var(--sc-kit--numeral-input--underline-color, transparent);
   --_ni--font-size: var(--sc-kit--numeral-input--font-size, var(--_ni--size-font-size, var(--sc-kit--font-size--md)));
+  --_ni--line-height: var(--_ni--size-line-height, var(--sc-kit--line-height--control--md));
   --_ni--color: var(--sc-kit--numeral-input--color, var(--sc-kit--color--text--primary));
   --_ni--placeholder-color: var(--sc-kit--numeral-input--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_ni--icon-color: var(--sc-kit--numeral-input--icon--color, var(--sc-kit--color--text--muted));
@@ -243,7 +244,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   border-radius: var(--_ni--border-radius);
   color: var(--_ni--color);
   font-size: var(--_ni--font-size);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_ni--line-height);
   cursor: text;
   box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_ni--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);
@@ -252,6 +253,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--size-height: var(--sc-kit--field--height--sm);
   --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
   --_ni--size-font-size: var(--sc-kit--font-size--sm);
+  --_ni--size-line-height: var(--sc-kit--line-height--control--sm);
   --_ni--size-icon-size: var(--sc-kit--field--icon--size--sm);
   --_ni--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
@@ -259,6 +261,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--size-height: var(--sc-kit--field--height--md);
   --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--md);
   --_ni--size-font-size: var(--sc-kit--font-size--md);
+  --_ni--size-line-height: var(--sc-kit--line-height--control--md);
   --_ni--size-icon-size: var(--sc-kit--field--icon--size--md);
   --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
@@ -266,6 +269,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--size-height: var(--sc-kit--field--height--lg);
   --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
   --_ni--size-font-size: var(--sc-kit--font-size--lg);
+  --_ni--size-line-height: var(--sc-kit--line-height--control--lg);
   --_ni--size-icon-size: var(--sc-kit--field--icon--size--lg);
   --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
 }

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

@@ -95,7 +95,7 @@ or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
   border: 1px solid var(--_op--border-color);
   border-radius: var(--sc-kit--radius--pill);
   font-family: inherit;
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--sc-kit--line-height--control--md);
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;

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/popover/cmp.popover.svelte

@@ -42,14 +42,24 @@ $effect(() => {
     const t = triggerEl;
     const c = contentEl;
     const update = async () => {
-        const middleware = [offsetMiddleware(offset), flip({ padding: boundaryMargin }), shift({ padding: boundaryMargin })];
-        if (matchWidth) {
-            middleware.push(size({
-                apply({ rects, elements }) {
-                    elements.floating.style.width = `${rects.reference.width}px`;
+        const middleware = [
+            offsetMiddleware(offset),
+            flip({ padding: boundaryMargin }),
+            shift({ padding: boundaryMargin }),
+            size({
+                padding: boundaryMargin,
+                apply({ rects, elements, availableWidth, availableHeight }) {
+                    elements.floating.style.setProperty('--_--popover--available-width', `${availableWidth}px`);
+                    elements.floating.style.setProperty('--_--popover--available-height', `${availableHeight}px`);
+                    if (matchWidth) {
+                        // Clamped here too, not just in CSS: the max-width rule is gated on `panel`, so panel={false} has no other bound.
+                        const width = Math.min(rects.reference.width, availableWidth);
+                        elements.floating.style.width = `${width}px`;
+                        elements.floating.style.minWidth = `${width}px`;
+                    }
                 }
-            }));
-        }
+            })
+        ];
         const result = await computePosition(t, c, {
             placement: position,
             strategy: fixedPosition ? 'fixed' : 'absolute',
@@ -187,13 +197,15 @@ const handleBackdropClick = (e) => {
     <div
       bind:this={contentEl}
       class="popover__content"
-      class:popover__content--panel={panel}
+      class:popover__content--bounded={panel}
       data-placement={resolvedPlacement}
       role="dialog"
       tabindex="-1"
       onclick={handleContentClick}
       onkeydown={() => undefined}>
-      {@render children()}
+      <div class="popover__panel" class:popover__panel--styled={panel}>
+        {@render children()}
+      </div>
     </div>
   {/if}
 </div>
@@ -224,6 +236,23 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 <button onclick={() => dd?.open()}>Open externally</button>
 ```
 
+With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+`flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+`text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+`--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+
+Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+
+Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+`outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+already carries the margin that keeps it clear.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
@@ -232,7 +261,10 @@ let dd: PopoverInstance | undefined = $state.raw(undefined);
 | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
 | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
-| `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+| `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+| `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+| `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+| `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
 | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
 | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
 
@@ -298,7 +330,10 @@ Props for keeping the popover open during interaction:
   --_dd--content-border-color: var(--sc-kit--popover--content--border-color, var(--sc-kit--color--border));
   --_dd--content-border-radius: var(--sc-kit--popover--content--border-radius, var(--sc-kit--radius--md));
   --_dd--content-shadow: var(--sc-kit--popover--content--box-shadow, var(--sc-kit--shadow--lg));
-  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12rem);
+  --_dd--content-max-height: var(--sc-kit--popover--content--max-height, var(--_--popover--available-height, 100vh));
+  --_dd--content-max-width: var(--sc-kit--popover--content--max-width, var(--_--popover--available-width, 100vw));
+  --_dd--content-min-width: var(--sc-kit--popover--content--min-width, 12.5rem);
+  --_dd--content-overflow: var(--sc-kit--popover--content--overflow, hidden auto);
   --_dd--content-padding: var(--sc-kit--popover--content--padding, var(--sc-kit--space--1) 0);
   --_dd--content-z-index: var(--sc-kit--popover--content--z-index, var(--sc-kit--z-index--popover));
   --_dd--anim-shift-x: 0;
@@ -311,15 +346,9 @@ Props for keeping the popover open during interaction:
   z-index: var(--_dd--content-z-index);
   width: max-content;
   min-width: var(--_dd--content-min-width);
-  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
-  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out) both;
 }
-.popover__content--panel {
-  background: var(--_dd--content-background);
-  border: 1px solid var(--_dd--content-border-color);
-  border-radius: var(--_dd--content-border-radius);
-  box-shadow: var(--_dd--content-shadow);
-  padding: var(--_dd--content-padding);
+.popover__content--bounded {
+  max-width: var(--_dd--content-max-width);
 }
 .popover__content:focus-visible {
   outline: none;
@@ -364,6 +393,39 @@ Props for keeping the popover open during interaction:
 .popover__content[data-placement=right-end] {
   --_dd--anim-origin-y: bottom;
 }
+.popover__panel {
+  transform-origin: var(--_dd--anim-origin-x) var(--_dd--anim-origin-y);
+  animation: popover-appear var(--sc-kit--duration--fast) var(--sc-kit--ease--out);
+}
+.popover__panel--styled {
+  background: var(--_dd--content-background);
+  border: 1px solid var(--_dd--content-border-color);
+  border-radius: var(--_dd--content-border-radius);
+  box-shadow: var(--_dd--content-shadow);
+  padding: var(--_dd--content-padding);
+  max-height: var(--_dd--content-max-height);
+  overflow: var(--_dd--content-overflow);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.popover__panel--styled::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.popover__panel--styled::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.popover__panel--styled::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .popover__panel--styled {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
 
 @keyframes popover-appear {
   from {

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

@@ -12,7 +12,7 @@ type Props = {
     boundaryMargin?: number;
     /** Render a semi-transparent backdrop behind the content. */
     backdrop?: boolean;
-    /** Make the content match the trigger element width. */
+    /** Make the content match the trigger element width, overriding `--sc-kit--popover--content--min-width` (never growing past the available space). */
     matchWidth?: boolean;
     /** Apply built-in panel styling (background, shadow, border-radius). @default true */
     panel?: boolean;
@@ -61,6 +61,23 @@ type Props = {
  * <button onclick={() => dd?.open()}>Open externally</button>
  * ```
  *
+ * With `panel` on, content sizes to `max-content` and, above the `min-width` floor, never exceeds the room Floating UI measures around the trigger: the `size()` middleware feeds the space left after
+ * `flip` / `shift` into the max-width / max-height defaults. So the panel always has a definite width — which is what makes a consumer's own
+ * `text-overflow: ellipsis` (on a `min-inline-size: 0` flex child) resolve inside the panel — and a long list scrolls instead of running off-screen. Set
+ * `--sc-kit--popover--content--max-width` for a tighter cap than the available space.
+ *
+ * Because the panel fits itself to the available height, it is a scroll container by default. With `panel={false}` none of the three bounds apply — no width
+ * cap, no height fit, no clipping — since that consumer owns the box entirely. Floating content nested inside it — a submenu, a `Tooltip` on
+ * an item — is not clipped **once the panel has appeared**: those bubbles resolve their position against the popover's own positioned box, which sits outside
+ * the scrolling area, so `fixedPosition` on a nested Popover stays optional. During the appear animation the panel does carry a transform and therefore does
+ * clip, so a bubble opening within that window (a `Tooltip` with a near-zero `delay`) is cut off for its duration.
+ *
+ * Two consequences of the panel being a scroll container. `--sc-kit--popover--content--overflow: visible` removes the clipping but not the height fit — the
+ * panel is still shrunk and its content would paint outside the chrome, so pair it with `--sc-kit--popover--content--max-height: none` to opt out of both. And
+ * the clip is tight to the panel's box, whose inline padding is `0` by default: content that paints a focus ring outside its own border box (kit's pattern is
+ * `outline: 2px` + `outline-offset: 2px`, so 4px) needs inline padding of its own — either via `--sc-kit--popover--content--padding` or a wrapper. `PopoverItem`
+ * already carries the margin that keeps it clear.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
@@ -69,7 +86,10 @@ type Props = {
  * | `--sc-kit--popover--content--border-color` | Content border color | `var(--sc-kit--color--border)` |
  * | `--sc-kit--popover--content--border-radius` | Content corner radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--popover--content--box-shadow` | Content shadow | `var(--sc-kit--shadow--lg)` |
- * | `--sc-kit--popover--content--min-width` | Content min width | `12rem` |
+ * | `--sc-kit--popover--content--max-height` | Content max height. Applies only with `panel` on — a `panel={false}` consumer owns its own bounds | available height around the trigger |
+ * | `--sc-kit--popover--content--max-width` | Content max width — the upper bound content shrinks against. Applies only with `panel` on | available width around the trigger |
+ * | `--sc-kit--popover--content--min-width` | Content min width. Wins over max-width when the two conflict; ignored under `matchWidth` | `12.5rem` |
+ * | `--sc-kit--popover--content--overflow` | Panel overflow, both axes. Applies only with `panel` on. `visible` opts out of clipping | `hidden auto` |
  * | `--sc-kit--popover--content--padding` | Content padding | `var(--sc-kit--space--1) 0` |
  * | `--sc-kit--popover--content--z-index` | Content z-index | `var(--sc-kit--z-index--popover)` |
  *

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/tab.svelte

@@ -25,6 +25,7 @@ export {};
 <style>.tab {
   --_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--line-height: var(--_tab--size-line-height, var(--sc-kit--line-height--control--md));
   --_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));
@@ -48,21 +49,23 @@ export {};
   font-family: inherit;
   font-size: var(--_tab--font-size);
   font-weight: var(--_tab--font-weight);
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_tab--line-height);
   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 {
-  --_tab--size-height: 1.75rem;
+  --_tab--size-height: 1.8125rem;
   --_tab--size-font-size: var(--sc-kit--font-size--sm);
+  --_tab--size-line-height: var(--sc-kit--line-height--control--sm);
   --_tab--size-font-weight: var(--sc-kit--font-weight--regular);
   --_tab--size-padding-inline: 0.625rem;
 }
 .tab--md {
   --_tab--size-height: 2.25rem;
   --_tab--size-font-size: var(--sc-kit--font-size--md);
+  --_tab--size-line-height: var(--sc-kit--line-height--control--md);
   --_tab--size-font-weight: var(--sc-kit--font-weight--medium);
   --_tab--size-padding-inline: 0.875rem;
 }

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

@@ -118,7 +118,6 @@ Plus every public CSS variable exposed by `<Input>`.
   background: var(--_ui--scheme-background);
   color: var(--_ui--scheme-color);
   border-inline-end: 1px solid var(--_ui--scheme-border-color);
-  line-height: var(--sc-kit--leading--tight);
   user-select: none;
   white-space: nowrap;
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);

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

@@ -64,7 +64,6 @@ Plus every public CSS variable exposed by `<Input>`.
   background: var(--_wi--prefix-background);
   color: var(--_wi--prefix-color);
   border-inline-end: 1px solid var(--_wi--prefix-border-color);
-  line-height: var(--sc-kit--leading--tight);
   user-select: none;
   white-space: nowrap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",