@motion-proto/live-tokens 0.3.9 → 0.6.0

package/src/components/Notification.svelte

@@ -3,15 +3,34 @@
    import Button from './Button.svelte';
    import type { NotificationActions } from './types';
 
-   export let title: string;
-   export let description: string;
-   export let variant: 'info' | 'warning' | 'danger' | 'success' = 'info';
-   export let size: 'normal' | 'compact' = 'normal';
-   export let icon: string = '';
-   export let dismissible: boolean = false;
-   export let emphasis: boolean = false;
-   export let actions: NotificationActions = {};
+   interface Props {
+      title: string;
+      description: string;
+      variant?: 'info' | 'warning' | 'danger' | 'success';
+      size?: 'normal' | 'compact';
+      icon?: string;
+      dismissible?: boolean;
+      emphasis?: boolean;
+      actions?: NotificationActions;
+      /** Dismiss callback. Preferred over `on:dismiss` from 0.5.0 onward. */
+      ondismiss?: () => void;
+      children?: import('svelte').Snippet;
+   }
 
+   let {
+      title,
+      description,
+      variant = 'info',
+      size = 'normal',
+      icon = '',
+      dismissible = false,
+      emphasis = false,
+      actions = {},
+      ondismiss,
+      children
+   }: Props = $props();
+
+   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
    const dispatch = createEventDispatcher();
 
    // Default icons based on variant
@@ -22,9 +41,10 @@
       success: 'fas fa-check-circle'
    };
 
-   $: displayIcon = icon || defaultIcons[variant];
+   let displayIcon = $derived(icon || defaultIcons[variant]);
 
    function handleDismiss() {
+      ondismiss?.();
       dispatch('dismiss');
    }
 </script>
@@ -41,7 +61,7 @@
          </div>
       {/if}
       {#if dismissible}
-         <button class="notification-close" on:click={handleDismiss} type="button" aria-label="Dismiss">
+         <button class="notification-close" onclick={handleDismiss} type="button" aria-label="Dismiss">
             <i class="fas fa-times"></i>
          </button>
       {/if}
@@ -67,7 +87,7 @@
          {/if}
       </div>
    {/if}
-   <slot />
+   {@render children?.()}
    {#if actions.inline}
       <div class="notification-actions-inline">
          {#if description}
@@ -103,12 +123,12 @@
       --notification-info-title-font-family: var(--font-sans);
       --notification-info-title-font-size: var(--font-size-lg);
       --notification-info-title-font-weight: var(--font-weight-normal);
-      --notification-info-title-line-height: var(--line-height-snug);
+      --notification-info-title-line-height: var(--line-height-sm);
       --notification-info-text: var(--text-primary);
       --notification-info-text-font-family: var(--font-sans);
       --notification-info-text-font-size: var(--font-size-md);
       --notification-info-text-font-weight: var(--font-weight-extralight);
-      --notification-info-text-line-height: var(--line-height-normal);
+      --notification-info-text-line-height: var(--line-height-md);
 
       /* Success */
       --notification-success-surface: var(--surface-success);
@@ -122,12 +142,12 @@
       --notification-success-title-font-family: var(--font-sans);
       --notification-success-title-font-size: var(--font-size-lg);
       --notification-success-title-font-weight: var(--font-weight-normal);
-      --notification-success-title-line-height: var(--line-height-snug);
+      --notification-success-title-line-height: var(--line-height-sm);
       --notification-success-text: var(--text-primary);
       --notification-success-text-font-family: var(--font-sans);
       --notification-success-text-font-size: var(--font-size-md);
       --notification-success-text-font-weight: var(--font-weight-extralight);
-      --notification-success-text-line-height: var(--line-height-normal);
+      --notification-success-text-line-height: var(--line-height-md);
 
       /* Warning */
       --notification-warning-surface: var(--surface-warning);
@@ -141,12 +161,12 @@
       --notification-warning-title-font-family: var(--font-sans);
       --notification-warning-title-font-size: var(--font-size-lg);
       --notification-warning-title-font-weight: var(--font-weight-normal);
-      --notification-warning-title-line-height: var(--line-height-snug);
+      --notification-warning-title-line-height: var(--line-height-sm);
       --notification-warning-text: var(--text-primary);
       --notification-warning-text-font-family: var(--font-sans);
       --notification-warning-text-font-size: var(--font-size-md);
       --notification-warning-text-font-weight: var(--font-weight-extralight);
-      --notification-warning-text-line-height: var(--line-height-normal);
+      --notification-warning-text-line-height: var(--line-height-md);
 
       /* Danger */
       --notification-danger-surface: var(--surface-danger);
@@ -160,12 +180,12 @@
       --notification-danger-title-font-family: var(--font-sans);
       --notification-danger-title-font-size: var(--font-size-lg);
       --notification-danger-title-font-weight: var(--font-weight-normal);
-      --notification-danger-title-line-height: var(--line-height-snug);
+      --notification-danger-title-line-height: var(--line-height-sm);
       --notification-danger-text: var(--text-primary);
       --notification-danger-text-font-family: var(--font-sans);
       --notification-danger-text-font-size: var(--font-size-md);
       --notification-danger-text-font-weight: var(--font-weight-extralight);
-      --notification-danger-text-line-height: var(--line-height-normal);
+      --notification-danger-text-line-height: var(--line-height-md);
    }
 
    .notification {

package/src/components/ProgressBar.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
-  export let value: number = 0;
-  export let label: string = '';
-  export let variant: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
-  export let size: 'default' | 'compact' = 'default';
-  export let showIcon: boolean = true;
+  interface Props {
+    value?: number;
+    label?: string;
+    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'default' | 'compact';
+    showIcon?: boolean;
+  }
+
+  let {
+    value = 0,
+    label = '',
+    variant = 'primary',
+    size = 'default',
+    showIcon = true
+  }: Props = $props();
 
-  $: clampedValue = Math.min(100, Math.max(0, value));
-  $: isComplete = clampedValue >= 100;
+  let clampedValue = $derived(Math.min(100, Math.max(0, value)));
+  let isComplete = $derived(clampedValue >= 100);
 </script>
 
 <div class="progress {variant}" class:compact={size === 'compact'}>
@@ -42,12 +52,12 @@
     --progressbar-primary-label-font-family: var(--font-sans);
     --progressbar-primary-label-font-size: var(--font-size-sm);
     --progressbar-primary-label-font-weight: var(--font-weight-light);
-    --progressbar-primary-label-line-height: var(--line-height-normal);
+    --progressbar-primary-label-line-height: var(--line-height-md);
     --progressbar-primary-value: var(--text-tertiary);
     --progressbar-primary-value-font-family: var(--font-mono);
     --progressbar-primary-value-font-size: var(--font-size-xs);
     --progressbar-primary-value-font-weight: var(--font-weight-light);
-    --progressbar-primary-value-line-height: var(--line-height-normal);
+    --progressbar-primary-value-line-height: var(--line-height-md);
 
     /* Success */
     --progressbar-success-track-surface: var(--surface-neutral-low);
@@ -60,12 +70,12 @@
     --progressbar-success-label-font-family: var(--font-sans);
     --progressbar-success-label-font-size: var(--font-size-sm);
     --progressbar-success-label-font-weight: var(--font-weight-light);
-    --progressbar-success-label-line-height: var(--line-height-normal);
+    --progressbar-success-label-line-height: var(--line-height-md);
     --progressbar-success-value: var(--text-tertiary);
     --progressbar-success-value-font-family: var(--font-mono);
     --progressbar-success-value-font-size: var(--font-size-xs);
     --progressbar-success-value-font-weight: var(--font-weight-light);
-    --progressbar-success-value-line-height: var(--line-height-normal);
+    --progressbar-success-value-line-height: var(--line-height-md);
 
     /* Warning */
     --progressbar-warning-track-surface: var(--surface-neutral-low);
@@ -78,12 +88,12 @@
     --progressbar-warning-label-font-family: var(--font-sans);
     --progressbar-warning-label-font-size: var(--font-size-sm);
     --progressbar-warning-label-font-weight: var(--font-weight-light);
-    --progressbar-warning-label-line-height: var(--line-height-normal);
+    --progressbar-warning-label-line-height: var(--line-height-md);
     --progressbar-warning-value: var(--text-tertiary);
     --progressbar-warning-value-font-family: var(--font-mono);
     --progressbar-warning-value-font-size: var(--font-size-xs);
     --progressbar-warning-value-font-weight: var(--font-weight-light);
-    --progressbar-warning-value-line-height: var(--line-height-normal);
+    --progressbar-warning-value-line-height: var(--line-height-md);
 
     /* Danger */
     --progressbar-danger-track-surface: var(--surface-neutral-low);
@@ -96,12 +106,12 @@
     --progressbar-danger-label-font-family: var(--font-sans);
     --progressbar-danger-label-font-size: var(--font-size-sm);
     --progressbar-danger-label-font-weight: var(--font-weight-light);
-    --progressbar-danger-label-line-height: var(--line-height-normal);
+    --progressbar-danger-label-line-height: var(--line-height-md);
     --progressbar-danger-value: var(--text-tertiary);
     --progressbar-danger-value-font-family: var(--font-mono);
     --progressbar-danger-value-font-size: var(--font-size-xs);
     --progressbar-danger-value-font-weight: var(--font-weight-light);
-    --progressbar-danger-value-line-height: var(--line-height-normal);
+    --progressbar-danger-value-line-height: var(--line-height-md);
 
     /* Info */
     --progressbar-info-track-surface: var(--surface-neutral-low);
@@ -114,12 +124,12 @@
     --progressbar-info-label-font-family: var(--font-sans);
     --progressbar-info-label-font-size: var(--font-size-sm);
     --progressbar-info-label-font-weight: var(--font-weight-light);
-    --progressbar-info-label-line-height: var(--line-height-normal);
+    --progressbar-info-label-line-height: var(--line-height-md);
     --progressbar-info-value: var(--text-tertiary);
     --progressbar-info-value-font-family: var(--font-mono);
     --progressbar-info-value-font-size: var(--font-size-xs);
     --progressbar-info-value-font-weight: var(--font-weight-light);
-    --progressbar-info-value-line-height: var(--line-height-normal);
+    --progressbar-info-value-line-height: var(--line-height-md);
   }
 
   .progress {

package/src/components/RadioButton.svelte

@@ -1,20 +1,37 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  export let active: boolean = false;
-  export let label: string;
-  export let color: string = '';
-  let className: string = '';
-  export { className as class };
+  interface Props {
+    active?: boolean;
+    label: string;
+    color?: string;
+    class?: string;
+    /** Click callback. Preferred over `on:click` from 0.5.0 onward. */
+    onclick?: () => void;
+  }
+
+  let {
+    active = false,
+    label,
+    color = '',
+    class: className = '',
+    onclick
+  }: Props = $props();
 
+  // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher();
+
+  function fireClick() {
+    onclick?.();
+    dispatch('click');
+  }
 </script>
 
 <button
   class="radio-button {className}"
   class:active
   style={color ? `--radiobutton-color: ${color};` : ''}
-  on:click={() => dispatch('click')}
+  onclick={fireClick}
 >
   <span class="radio-dot"></span>
   <span class="radio-label">{label}</span>
@@ -31,7 +48,7 @@
     --radiobutton-default-label-font-family: var(--font-sans);
     --radiobutton-default-label-font-size: var(--font-size-md);
     --radiobutton-default-label-font-weight: var(--font-weight-semibold);
-    --radiobutton-default-label-line-height: var(--line-height-tight);
+    --radiobutton-default-label-line-height: var(--line-height-xs);
 
     /* Hover */
     --radiobutton-hover-dot-border-color: var(--border-neutral);
@@ -42,7 +59,7 @@
     --radiobutton-hover-label-font-family: var(--font-sans);
     --radiobutton-hover-label-font-size: var(--font-size-md);
     --radiobutton-hover-label-font-weight: var(--font-weight-semibold);
-    --radiobutton-hover-label-line-height: var(--line-height-tight);
+    --radiobutton-hover-label-line-height: var(--line-height-xs);
 
     /* Active */
     --radiobutton-active-dot-border-color: var(--border-neutral);
@@ -53,7 +70,7 @@
     --radiobutton-active-label-font-family: var(--font-sans);
     --radiobutton-active-label-font-size: var(--font-size-md);
     --radiobutton-active-label-font-weight: var(--font-weight-semibold);
-    --radiobutton-active-label-line-height: var(--line-height-tight);
+    --radiobutton-active-label-line-height: var(--line-height-xs);
   }
 
   .radio-button {
@@ -65,7 +82,7 @@
     border: none;
     cursor: pointer;
     transition: all var(--duration-200);
-    line-height: var(--line-height-tight);
+    line-height: var(--line-height-xs);
 
     &:hover,
     &.force-hover {

package/src/components/SectionDivider.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { onMount, tick } from 'svelte';
 
-  export let title: string;
-  export let description: string | undefined = undefined;
-  export let variant: 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special' = 'canvas';
+  interface Props {
+    title: string;
+    description?: string | undefined;
+    variant?: 'canvas' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special';
+  }
+
+  let { title, description = undefined, variant = 'canvas' }: Props = $props();
 
-  let svgEl: SVGSVGElement | undefined;
-  let svgTextEl: SVGTextElement | undefined;
-  let svgW = 0;
-  let svgH = 0;
-  let svgX = 0;
-  let svgY = 0;
+  let svgEl: SVGSVGElement | undefined = $state();
+  let svgTextEl: SVGTextElement | undefined = $state();
+  let svgW = $state(0);
+  let svgH = $state(0);
+  let svgX = $state(0);
+  let svgY = $state(0);
 
   // feMorphology radius and feFlood flood-color are non-presentation attributes:
   // they can't read CSS vars. We read the resolved values off the SVG element
@@ -18,8 +24,8 @@
   // mutates inline CSS vars on documentElement. Reading the variant-scoped
   // internal `--_divider-title-*` vars (set by the .variant-{v} class) keeps
   // this independent of the variant prop.
-  let outlineRadius = '0';
-  let outlineColor = '#000';
+  let outlineRadius = $state('0');
+  let outlineColor = $state('#000');
   // Stable per-instance id so multiple SectionDividers on the same page each
   // bind their <text> to their own filter.
   const filterId = `sd-outline-${Math.random().toString(36).slice(2, 10)}`;
@@ -49,9 +55,11 @@
     svgH = Math.ceil(bb.height);
   }
 
-  $: if (title) {
-    tick().then(() => { measure(); syncFilter(); });
-  }
+  run(() => {
+    if (title) {
+      tick().then(() => { measure(); syncFilter(); });
+    }
+  });
 
   onMount(() => {
     measure();
@@ -108,7 +116,7 @@
     --sectiondivider-canvas-title-font-family: var(--font-display);
     --sectiondivider-canvas-title-font-size: var(--font-size-5xl);
     --sectiondivider-canvas-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-canvas-title-line-height: var(--line-height-tight);
+    --sectiondivider-canvas-title-line-height: var(--line-height-xs);
     --sectiondivider-canvas-title-border-width: var(--border-width-4);
     --sectiondivider-canvas-title-stroke-color: var(--surface-canvas-lowest);
     /* Title stroke defaults intentionally diverge per variant — the property
@@ -118,7 +126,7 @@
     --sectiondivider-canvas-description-font-family: var(--font-sans);
     --sectiondivider-canvas-description-font-size: var(--font-size-md);
     --sectiondivider-canvas-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-canvas-description-line-height: var(--line-height-normal);
+    --sectiondivider-canvas-description-line-height: var(--line-height-md);
     --sectiondivider-canvas-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-canvas-gradient-stop-1-color: var(--surface-canvas-highest);
     --sectiondivider-canvas-gradient-stop-1-position: var(--gradient-stop-start);
@@ -137,14 +145,14 @@
     --sectiondivider-neutral-title-font-family: var(--font-display);
     --sectiondivider-neutral-title-font-size: var(--font-size-5xl);
     --sectiondivider-neutral-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-neutral-title-line-height: var(--line-height-tight);
+    --sectiondivider-neutral-title-line-height: var(--line-height-xs);
     --sectiondivider-neutral-title-border-width: var(--border-width-4);
     --sectiondivider-neutral-title-stroke-color: var(--surface-neutral-lowest);
     --sectiondivider-neutral-description: var(--text-secondary);
     --sectiondivider-neutral-description-font-family: var(--font-sans);
     --sectiondivider-neutral-description-font-size: var(--font-size-md);
     --sectiondivider-neutral-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-neutral-description-line-height: var(--line-height-normal);
+    --sectiondivider-neutral-description-line-height: var(--line-height-md);
     --sectiondivider-neutral-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-neutral-gradient-stop-1-color: var(--surface-neutral-highest);
     --sectiondivider-neutral-gradient-stop-1-position: var(--gradient-stop-start);
@@ -163,14 +171,14 @@
     --sectiondivider-alternate-title-font-family: var(--font-display);
     --sectiondivider-alternate-title-font-size: var(--font-size-5xl);
     --sectiondivider-alternate-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-alternate-title-line-height: var(--line-height-tight);
+    --sectiondivider-alternate-title-line-height: var(--line-height-xs);
     --sectiondivider-alternate-title-border-width: var(--border-width-4);
     --sectiondivider-alternate-title-stroke-color: var(--surface-alternate-lowest);
     --sectiondivider-alternate-description: var(--text-secondary);
     --sectiondivider-alternate-description-font-family: var(--font-sans);
     --sectiondivider-alternate-description-font-size: var(--font-size-md);
     --sectiondivider-alternate-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-alternate-description-line-height: var(--line-height-normal);
+    --sectiondivider-alternate-description-line-height: var(--line-height-md);
     --sectiondivider-alternate-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-alternate-gradient-stop-1-color: var(--surface-alternate-highest);
     --sectiondivider-alternate-gradient-stop-1-position: var(--gradient-stop-start);
@@ -189,14 +197,14 @@
     --sectiondivider-primary-title-font-family: var(--font-display);
     --sectiondivider-primary-title-font-size: var(--font-size-5xl);
     --sectiondivider-primary-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-primary-title-line-height: var(--line-height-tight);
+    --sectiondivider-primary-title-line-height: var(--line-height-xs);
     --sectiondivider-primary-title-border-width: var(--border-width-4);
     --sectiondivider-primary-title-stroke-color: var(--surface-brand-lowest);
     --sectiondivider-primary-description: var(--text-secondary);
     --sectiondivider-primary-description-font-family: var(--font-sans);
     --sectiondivider-primary-description-font-size: var(--font-size-md);
     --sectiondivider-primary-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-primary-description-line-height: var(--line-height-normal);
+    --sectiondivider-primary-description-line-height: var(--line-height-md);
     --sectiondivider-primary-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-primary-gradient-stop-1-color: var(--surface-brand-highest);
     --sectiondivider-primary-gradient-stop-1-position: var(--gradient-stop-start);
@@ -215,14 +223,14 @@
     --sectiondivider-accent-title-font-family: var(--font-display);
     --sectiondivider-accent-title-font-size: var(--font-size-5xl);
     --sectiondivider-accent-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-accent-title-line-height: var(--line-height-tight);
+    --sectiondivider-accent-title-line-height: var(--line-height-xs);
     --sectiondivider-accent-title-border-width: var(--border-width-4);
     --sectiondivider-accent-title-stroke-color: var(--surface-accent-lowest);
     --sectiondivider-accent-description: var(--text-secondary);
     --sectiondivider-accent-description-font-family: var(--font-sans);
     --sectiondivider-accent-description-font-size: var(--font-size-md);
     --sectiondivider-accent-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-accent-description-line-height: var(--line-height-normal);
+    --sectiondivider-accent-description-line-height: var(--line-height-md);
     --sectiondivider-accent-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-accent-gradient-stop-1-color: var(--surface-accent-highest);
     --sectiondivider-accent-gradient-stop-1-position: var(--gradient-stop-start);
@@ -241,14 +249,14 @@
     --sectiondivider-special-title-font-family: var(--font-display);
     --sectiondivider-special-title-font-size: var(--font-size-5xl);
     --sectiondivider-special-title-font-weight: var(--font-weight-normal);
-    --sectiondivider-special-title-line-height: var(--line-height-tight);
+    --sectiondivider-special-title-line-height: var(--line-height-xs);
     --sectiondivider-special-title-border-width: var(--border-width-4);
     --sectiondivider-special-title-stroke-color: var(--surface-special-lowest);
     --sectiondivider-special-description: var(--text-secondary);
     --sectiondivider-special-description-font-family: var(--font-sans);
     --sectiondivider-special-description-font-size: var(--font-size-md);
     --sectiondivider-special-description-font-weight: var(--font-weight-normal);
-    --sectiondivider-special-description-line-height: var(--line-height-normal);
+    --sectiondivider-special-description-line-height: var(--line-height-md);
     --sectiondivider-special-gradient-angle: var(--gradient-angle-diagonal);
     --sectiondivider-special-gradient-stop-1-color: var(--surface-special-highest);
     --sectiondivider-special-gradient-stop-1-position: var(--gradient-stop-start);

package/src/components/SegmentedControl.svelte

@@ -8,15 +8,29 @@
     disabled?: boolean;
   };
 
-  export let segments: Segment[] = [];
-  export let value: string = '';
-  export let disabled: boolean = false;
-  export let forceHoverValue: string | null = null;
+  interface Props {
+    segments?: Segment[];
+    value?: string;
+    disabled?: boolean;
+    forceHoverValue?: string | null;
+    /** Selection callback. Preferred over `on:change` from 0.5.0 onward. */
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    segments = [],
+    value = $bindable(''),
+    disabled = false,
+    forceHoverValue = null,
+    onchange
+  }: Props = $props();
 
+  // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{ change: string }>();
 
   function select(v: string) {
     value = v;
+    onchange?.(v);
     dispatch('change', v);
   }
 </script>
@@ -34,7 +48,7 @@
       disabled={disabled || seg.disabled}
       role="radio"
       aria-checked={value === seg.value}
-      on:click={() => select(seg.value)}
+      onclick={() => select(seg.value)}
     >
       {#if seg.icon}<i class={seg.icon}></i>{/if}
       <span>{seg.label}</span>
@@ -64,7 +78,7 @@
     --segmentedcontrol-option-text-font-family: var(--font-sans);
     --segmentedcontrol-option-text-font-size: var(--font-size-md);
     --segmentedcontrol-option-text-font-weight: var(--font-weight-normal);
-    --segmentedcontrol-option-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-option-text-line-height: var(--line-height-md);
     --segmentedcontrol-option-icon: var(--text-secondary);
     --segmentedcontrol-option-icon-size: var(--icon-size-md);
 
@@ -74,7 +88,7 @@
     --segmentedcontrol-option-hover-text-font-family: var(--font-sans);
     --segmentedcontrol-option-hover-text-font-size: var(--font-size-md);
     --segmentedcontrol-option-hover-text-font-weight: var(--font-weight-normal);
-    --segmentedcontrol-option-hover-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-option-hover-text-line-height: var(--line-height-md);
     --segmentedcontrol-option-hover-icon: var(--text-secondary);
     --segmentedcontrol-option-hover-icon-size: var(--icon-size-md);
 
@@ -84,7 +98,7 @@
     --segmentedcontrol-selected-text-font-family: var(--font-sans);
     --segmentedcontrol-selected-text-font-size: var(--font-size-md);
     --segmentedcontrol-selected-text-font-weight: var(--font-weight-semibold);
-    --segmentedcontrol-selected-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-selected-text-line-height: var(--line-height-md);
     --segmentedcontrol-selected-icon: var(--text-secondary);
     --segmentedcontrol-selected-icon-size: var(--icon-size-md);
     --segmentedcontrol-selected-border: var(--border-success);
@@ -97,7 +111,7 @@
     --segmentedcontrol-disabled-text-font-family: var(--font-sans);
     --segmentedcontrol-disabled-text-font-size: var(--font-size-md);
     --segmentedcontrol-disabled-text-font-weight: var(--font-weight-light);
-    --segmentedcontrol-disabled-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-disabled-text-line-height: var(--line-height-md);
     --segmentedcontrol-disabled-icon: var(--text-tertiary);
     --segmentedcontrol-disabled-icon-size: var(--icon-size-md);
   }

package/src/components/TabBar.svelte

@@ -8,18 +8,31 @@
     disabled?: boolean;
   }
 
-  export let tabs: Tab[] = [];
-  export let selectedTab: string = '';
-  export let iconOnly: boolean = false;
-  let className: string = '';
-  export { className as class };
+  interface Props {
+    tabs?: Tab[];
+    selectedTab?: string;
+    iconOnly?: boolean;
+    class?: string;
+    /** Tab-change callback. Preferred over `on:tabChange` from 0.5.0 onward. */
+    ontabChange?: (id: string) => void;
+  }
+
+  let {
+    tabs = [],
+    selectedTab = '',
+    iconOnly = false,
+    class: className = '',
+    ontabChange
+  }: Props = $props();
 
+  // Dual-fire bridge — see Button.svelte for the deprecation timeline.
   const dispatch = createEventDispatcher<{
     tabChange: string;
   }>();
 
   function selectTab(tab: Tab) {
     if (!tab.disabled) {
+      ontabChange?.(tab.id);
       dispatch('tabChange', tab.id);
     }
   }
@@ -32,7 +45,7 @@
       class:active={selectedTab === tab.id}
       class:icon-only={iconOnly}
       disabled={tab.disabled}
-      on:click={() => selectTab(tab)}
+      onclick={() => selectTab(tab)}
     >
       {#if tab.icon}
         <i class={tab.icon}></i>
@@ -62,7 +75,7 @@
     --tabbar-default-text-font-family: var(--font-sans);
     --tabbar-default-text-font-size: var(--font-size-md);
     --tabbar-default-text-font-weight: var(--font-weight-light);
-    --tabbar-default-text-line-height: var(--line-height-normal);
+    --tabbar-default-text-line-height: var(--line-height-md);
     --tabbar-default-icon-size: var(--icon-size-md);
     --tabbar-default-padding: var(--space-8);
     --tabbar-default-border: var(--color-transparent);
@@ -78,7 +91,7 @@
     --tabbar-hover-text-font-family: var(--font-sans);
     --tabbar-hover-text-font-size: var(--font-size-md);
     --tabbar-hover-text-font-weight: var(--font-weight-light);
-    --tabbar-hover-text-line-height: var(--line-height-normal);
+    --tabbar-hover-text-line-height: var(--line-height-md);
     --tabbar-hover-icon-size: var(--icon-size-md);
     --tabbar-hover-padding: var(--space-8);
     --tabbar-hover-border: var(--color-transparent);
@@ -94,7 +107,7 @@
     --tabbar-active-text-font-family: var(--font-sans);
     --tabbar-active-text-font-size: var(--font-size-md);
     --tabbar-active-text-font-weight: var(--font-weight-light);
-    --tabbar-active-text-line-height: var(--line-height-normal);
+    --tabbar-active-text-line-height: var(--line-height-md);
     --tabbar-active-icon-size: var(--icon-size-md);
     --tabbar-active-padding: var(--space-8);
     --tabbar-active-tab-border-color: var(--color-transparent);
@@ -107,7 +120,7 @@
     --tabbar-disabled-text-font-family: var(--font-sans);
     --tabbar-disabled-text-font-size: var(--font-size-md);
     --tabbar-disabled-text-font-weight: var(--font-weight-light);
-    --tabbar-disabled-text-line-height: var(--line-height-normal);
+    --tabbar-disabled-text-line-height: var(--line-height-md);
     --tabbar-disabled-icon-size: var(--icon-size-md);
     --tabbar-disabled-padding: var(--space-8);
     --tabbar-disabled-border: var(--color-transparent);

package/src/components/Table.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <div class="table-wrapper">
-  <slot />
+  {@render children?.()}
 </div>
 
 <style lang="scss">
@@ -19,7 +24,7 @@
     --table-default-header-font-family: var(--font-sans);
     --table-default-header-font-size: var(--font-size-sm);
     --table-default-header-font-weight: var(--font-weight-normal);
-    --table-default-header-line-height: var(--line-height-tight);
+    --table-default-header-line-height: var(--line-height-xs);
     --table-default-header-padding: var(--space-12);
     --table-default-header-border: var(--border-canvas-subtle);
     --table-default-header-border-width: var(--border-width-1);
@@ -29,7 +34,7 @@
     --table-default-cell-font-family: var(--font-sans);
     --table-default-cell-font-size: var(--font-size-sm);
     --table-default-cell-font-weight: var(--font-weight-normal);
-    --table-default-cell-line-height: var(--line-height-normal);
+    --table-default-cell-line-height: var(--line-height-md);
     --table-default-cell-padding: var(--space-8);
 
     /* Row */