@streamscloud/kit 0.46.0 → 0.48.0

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

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

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

@@ -0,0 +1,34 @@
+import type { DocumentTab } from './types';
+declare function $$render<T>(): {
+    props: {
+        tab: DocumentTab<T>;
+        active: boolean;
+        closable: boolean;
+        on?: {
+            select?: (value: T) => void;
+            close?: (value: T) => void;
+            keydown?: (event: KeyboardEvent) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DocumentTab: $$IsomorphicComponent;
+type DocumentTab<T> = InstanceType<typeof DocumentTab<T>>;
+export default DocumentTab;

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/ui/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-layout/cmp.page-panel-sidebars.svelte

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

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

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