@motion-proto/live-tokens 0.9.0 → 0.11.0

package/src/system/components/ProgressBar.svelte

@@ -2,22 +2,35 @@
   interface Props {
     value?: number;
     label?: string;
-    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
-    showIcon?: boolean;
+    /** Bar fill. Accepts either a design-system var name (`--gradient-1`,
+        `--color-brand-500`) or a literal CSS value (`red`, `#ff0000`,
+        `linear-gradient(...)`, etc.). When omitted, the themed
+        `--progressbar-fill` default is used. Values containing characters that
+        could break out of the inline style attribute or inject extra CSS rules
+        are dropped and the default is used instead. */
+    fill?: string;
   }
 
   let {
     value = 0,
     label = '',
-    variant = 'primary',
-    showIcon = true
+    fill,
   }: Props = $props();
 
   let clampedValue = $derived(Math.min(100, Math.max(0, value)));
-  let isComplete = $derived(clampedValue >= 100);
+  // Inline-style injection guard: reject chars that could escape the value
+  // context (quotes, backslashes, newlines) or terminate the declaration to
+  // smuggle another property (`;`, `{`, `}`, `<`, `>`). Everything else —
+  // including `(`/`)` for gradient/rgb syntax — is safe inside `background:`.
+  let fillStyle = $derived.by(() => {
+    if (!fill) return '';
+    if (/^--[\w-]+$/.test(fill)) return `background: var(${fill});`;
+    if (/["'\\;{}<>\n\r]/.test(fill)) return '';
+    return `background: ${fill};`;
+  });
 </script>
 
-<div class="progress {variant}" class:has-label={!!label} class:has-icon={showIcon && isComplete}>
+<div class="progress" class:has-label={!!label}>
   {#if label}
     <div class="progress-label">
       <span>{label}</span>
@@ -26,115 +39,38 @@
   {/if}
   <div class="progress-track">
     <div
-      class="progress-fill {variant}"
-      style="width: {clampedValue}%;"
+      class="progress-fill"
+      style="width: {clampedValue}%; {fillStyle}"
     ></div>
   </div>
-  {#if showIcon && isComplete}
-    <div class="progress-icon">
-      <i class="fas fa-check-circle"></i>
-    </div>
-  {/if}
 </div>
 
 <style>
   :global(:root) {
-    /* Primary */
-    --progressbar-primary-track-surface: var(--surface-neutral-low);
-    --progressbar-primary-track-border: var(--border-neutral-faint);
-    --progressbar-primary-track-border-width: var(--border-width-1);
-    --progressbar-primary-track-height: var(--space-8);
-    --progressbar-primary-radius: var(--radius-full);
-    --progressbar-primary-fill: var(--gradient-1);
-    --progressbar-primary-label: var(--text-secondary);
-    --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-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-md);
-
-    /* Success */
-    --progressbar-success-track-surface: var(--surface-neutral-low);
-    --progressbar-success-track-border: var(--border-neutral-faint);
-    --progressbar-success-track-border-width: var(--border-width-1);
-    --progressbar-success-track-height: var(--space-8);
-    --progressbar-success-radius: var(--radius-full);
-    --progressbar-success-fill: var(--border-success);
-    --progressbar-success-label: var(--text-secondary);
-    --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-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-md);
-
-    /* Warning */
-    --progressbar-warning-track-surface: var(--surface-neutral-low);
-    --progressbar-warning-track-border: var(--border-neutral-faint);
-    --progressbar-warning-track-border-width: var(--border-width-1);
-    --progressbar-warning-track-height: var(--space-8);
-    --progressbar-warning-radius: var(--radius-full);
-    --progressbar-warning-fill: var(--border-warning);
-    --progressbar-warning-label: var(--text-secondary);
-    --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-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-md);
-
-    /* Danger */
-    --progressbar-danger-track-surface: var(--surface-neutral-low);
-    --progressbar-danger-track-border: var(--border-neutral-faint);
-    --progressbar-danger-track-border-width: var(--border-width-1);
-    --progressbar-danger-track-height: var(--space-8);
-    --progressbar-danger-radius: var(--radius-full);
-    --progressbar-danger-fill: var(--border-danger);
-    --progressbar-danger-label: var(--text-secondary);
-    --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-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-md);
-
-    /* Info */
-    --progressbar-info-track-surface: var(--surface-neutral-low);
-    --progressbar-info-track-border: var(--border-neutral-faint);
-    --progressbar-info-track-border-width: var(--border-width-1);
-    --progressbar-info-track-height: var(--space-8);
-    --progressbar-info-radius: var(--radius-full);
-    --progressbar-info-fill: var(--border-info);
-    --progressbar-info-label: var(--text-secondary);
-    --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-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-md);
+    --progressbar-track-surface: var(--surface-neutral-low);
+    --progressbar-track-border: var(--border-neutral-faint);
+    --progressbar-track-border-width: var(--border-width-1);
+    --progressbar-track-height: var(--space-8);
+    --progressbar-radius: var(--radius-full);
+    --progressbar-fill: var(--gradient-1);
+    --progressbar-label-gap: var(--space-6);
+    --progressbar-label: var(--text-secondary);
+    --progressbar-label-font-family: var(--font-sans);
+    --progressbar-label-font-size: var(--font-size-sm);
+    --progressbar-label-font-weight: var(--font-weight-light);
+    --progressbar-label-line-height: var(--line-height-md);
+    --progressbar-value: var(--text-tertiary);
+    --progressbar-value-font-family: var(--font-mono);
+    --progressbar-value-font-size: var(--font-size-xs);
+    --progressbar-value-font-weight: var(--font-weight-light);
+    --progressbar-value-line-height: var(--line-height-md);
   }
 
   .progress {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas: "track";
-    row-gap: var(--space-6);
+    row-gap: var(--progressbar-label-gap);
     width: 100%;
   }
 
@@ -144,18 +80,6 @@
       "track";
   }
 
-  .progress.has-icon {
-    grid-template-columns: minmax(0, 1fr) auto;
-    column-gap: var(--space-8);
-    grid-template-areas: "track icon";
-  }
-
-  .progress.has-label.has-icon {
-    grid-template-areas:
-      "label ."
-      "track icon";
-  }
-
   .progress-label {
     grid-area: label;
     display: flex;
@@ -163,159 +87,39 @@
     align-items: center;
   }
 
+  .progress-label > span {
+    color: var(--progressbar-label);
+    font-family: var(--progressbar-label-font-family);
+    font-size: var(--progressbar-label-font-size);
+    font-weight: var(--progressbar-label-font-weight);
+    line-height: var(--progressbar-label-line-height);
+  }
+
+  .progress-label > .progress-value {
+    color: var(--progressbar-value);
+    font-family: var(--progressbar-value-font-family);
+    font-size: var(--progressbar-value-font-size);
+    font-weight: var(--progressbar-value-font-weight);
+    line-height: var(--progressbar-value-line-height);
+  }
+
   .progress-track {
     grid-area: track;
     align-self: center;
     width: 100%;
     overflow: hidden;
     border-style: solid;
+    background: var(--progressbar-track-surface);
+    border-color: var(--progressbar-track-border);
+    border-width: var(--progressbar-track-border-width);
+    border-radius: var(--progressbar-radius);
+    height: var(--progressbar-track-height);
   }
 
   .progress-fill {
     height: 100%;
+    background: var(--progressbar-fill);
+    border-radius: var(--progressbar-radius);
     transition: width 0.4s ease;
   }
-
-  /* Primary */
-  .progress.primary .progress-label > span {
-    color: var(--progressbar-primary-label);
-    font-family: var(--progressbar-primary-label-font-family);
-    font-size: var(--progressbar-primary-label-font-size);
-    font-weight: var(--progressbar-primary-label-font-weight);
-    line-height: var(--progressbar-primary-label-line-height);
-  }
-  .progress.primary .progress-value {
-    color: var(--progressbar-primary-value);
-    font-family: var(--progressbar-primary-value-font-family);
-    font-size: var(--progressbar-primary-value-font-size);
-    font-weight: var(--progressbar-primary-value-font-weight);
-    line-height: var(--progressbar-primary-value-line-height);
-  }
-  .progress.primary .progress-track {
-    background: var(--progressbar-primary-track-surface);
-    border-color: var(--progressbar-primary-track-border);
-    border-width: var(--progressbar-primary-track-border-width);
-    border-radius: var(--progressbar-primary-radius);
-    height: var(--progressbar-primary-track-height);
-  }
-  .progress-fill.primary {
-    background: var(--progressbar-primary-fill);
-    border-radius: var(--progressbar-primary-radius);
-  }
-
-  /* Success */
-  .progress.success .progress-label > span {
-    color: var(--progressbar-success-label);
-    font-family: var(--progressbar-success-label-font-family);
-    font-size: var(--progressbar-success-label-font-size);
-    font-weight: var(--progressbar-success-label-font-weight);
-    line-height: var(--progressbar-success-label-line-height);
-  }
-  .progress.success .progress-value {
-    color: var(--progressbar-success-value);
-    font-family: var(--progressbar-success-value-font-family);
-    font-size: var(--progressbar-success-value-font-size);
-    font-weight: var(--progressbar-success-value-font-weight);
-    line-height: var(--progressbar-success-value-line-height);
-  }
-  .progress.success .progress-track {
-    background: var(--progressbar-success-track-surface);
-    border-color: var(--progressbar-success-track-border);
-    border-width: var(--progressbar-success-track-border-width);
-    border-radius: var(--progressbar-success-radius);
-    height: var(--progressbar-success-track-height);
-  }
-  .progress-fill.success {
-    background: var(--progressbar-success-fill);
-    border-radius: var(--progressbar-success-radius);
-  }
-
-  /* Warning */
-  .progress.warning .progress-label > span {
-    color: var(--progressbar-warning-label);
-    font-family: var(--progressbar-warning-label-font-family);
-    font-size: var(--progressbar-warning-label-font-size);
-    font-weight: var(--progressbar-warning-label-font-weight);
-    line-height: var(--progressbar-warning-label-line-height);
-  }
-  .progress.warning .progress-value {
-    color: var(--progressbar-warning-value);
-    font-family: var(--progressbar-warning-value-font-family);
-    font-size: var(--progressbar-warning-value-font-size);
-    font-weight: var(--progressbar-warning-value-font-weight);
-    line-height: var(--progressbar-warning-value-line-height);
-  }
-  .progress.warning .progress-track {
-    background: var(--progressbar-warning-track-surface);
-    border-color: var(--progressbar-warning-track-border);
-    border-width: var(--progressbar-warning-track-border-width);
-    border-radius: var(--progressbar-warning-radius);
-    height: var(--progressbar-warning-track-height);
-  }
-  .progress-fill.warning {
-    background: var(--progressbar-warning-fill);
-    border-radius: var(--progressbar-warning-radius);
-  }
-
-  /* Danger */
-  .progress.danger .progress-label > span {
-    color: var(--progressbar-danger-label);
-    font-family: var(--progressbar-danger-label-font-family);
-    font-size: var(--progressbar-danger-label-font-size);
-    font-weight: var(--progressbar-danger-label-font-weight);
-    line-height: var(--progressbar-danger-label-line-height);
-  }
-  .progress.danger .progress-value {
-    color: var(--progressbar-danger-value);
-    font-family: var(--progressbar-danger-value-font-family);
-    font-size: var(--progressbar-danger-value-font-size);
-    font-weight: var(--progressbar-danger-value-font-weight);
-    line-height: var(--progressbar-danger-value-line-height);
-  }
-  .progress.danger .progress-track {
-    background: var(--progressbar-danger-track-surface);
-    border-color: var(--progressbar-danger-track-border);
-    border-width: var(--progressbar-danger-track-border-width);
-    border-radius: var(--progressbar-danger-radius);
-    height: var(--progressbar-danger-track-height);
-  }
-  .progress-fill.danger {
-    background: var(--progressbar-danger-fill);
-    border-radius: var(--progressbar-danger-radius);
-  }
-
-  /* Info */
-  .progress.info .progress-label > span {
-    color: var(--progressbar-info-label);
-    font-family: var(--progressbar-info-label-font-family);
-    font-size: var(--progressbar-info-label-font-size);
-    font-weight: var(--progressbar-info-label-font-weight);
-    line-height: var(--progressbar-info-label-line-height);
-  }
-  .progress.info .progress-value {
-    color: var(--progressbar-info-value);
-    font-family: var(--progressbar-info-value-font-family);
-    font-size: var(--progressbar-info-value-font-size);
-    font-weight: var(--progressbar-info-value-font-weight);
-    line-height: var(--progressbar-info-value-line-height);
-  }
-  .progress.info .progress-track {
-    background: var(--progressbar-info-track-surface);
-    border-color: var(--progressbar-info-track-border);
-    border-width: var(--progressbar-info-track-border-width);
-    border-radius: var(--progressbar-info-radius);
-    height: var(--progressbar-info-track-height);
-  }
-  .progress-fill.info {
-    background: var(--progressbar-info-fill);
-    border-radius: var(--progressbar-info-radius);
-  }
-
-  .progress-icon {
-    grid-area: icon;
-    align-self: center;
-    color: var(--text-success);
-    font-size: var(--icon-size-md);
-    line-height: 1;
-  }
 </style>

package/src/system/components/SegmentedControl.svelte

@@ -13,6 +13,9 @@
     value?: string;
     disabled?: boolean;
     forceHoverValue?: string | null;
+    /** Visual size. `small` cascades `--segmentedcontrol-*-small-*` tokens
+        through the default token names so per-state rules pick them up. */
+    size?: 'default' | 'small';
     /** Selection callback. Preferred over `on:change` from 0.5.0 onward. */
     onchange?: (value: string) => void;
   }
@@ -22,6 +25,7 @@
     value = $bindable(''),
     disabled = false,
     forceHoverValue = null,
+    size = 'default',
     onchange
   }: Props = $props();
 
@@ -35,7 +39,7 @@
   }
 </script>
 
-<div class="segmented-control" class:is-disabled={disabled} role="radiogroup">
+<div class="segmented-control" class:is-disabled={disabled} class:small={size === 'small'} role="radiogroup">
   {#each segments as seg, i (seg.value)}
     {#if i > 0}
       <span class="segment-divider" aria-hidden="true"></span>
@@ -68,10 +72,15 @@
     --segmentedcontrol-bar-padding: var(--space-4);
     --segmentedcontrol-bar-gap: var(--space-8);
 
-    /* Divider (line between non-selected options) */
+    /* Divider (line between non-selected options). Inset is the top + bottom
+       margin trimmed from the divider; 0 = bar-height divider. */
     --segmentedcontrol-divider-color: var(--border-neutral);
     --segmentedcontrol-divider-thickness: var(--border-width-1);
-    --segmentedcontrol-divider-height: var(--space-12);
+    --segmentedcontrol-divider-inset: var(--space-6);
+
+    /* Option (inner button) — shape applies to every state */
+    --segmentedcontrol-option-padding: var(--space-8);
+    --segmentedcontrol-option-gap: var(--space-8);
 
     /* Option — default */
     --segmentedcontrol-option-text: var(--text-primary);
@@ -90,7 +99,6 @@
     --segmentedcontrol-option-hover-text-font-weight: var(--font-weight-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);
 
     /* Selected (inner pill) — looks the same hovered or not */
     --segmentedcontrol-selected-surface: var(--surface-success-high);
@@ -100,7 +108,6 @@
     --segmentedcontrol-selected-text-font-weight: var(--font-weight-semibold);
     --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);
     --segmentedcontrol-selected-border-width: var(--border-width-1);
     --segmentedcontrol-selected-radius: var(--radius-md);
@@ -113,7 +120,21 @@
     --segmentedcontrol-disabled-text-font-weight: var(--font-weight-light);
     --segmentedcontrol-disabled-text-line-height: var(--line-height-md);
     --segmentedcontrol-disabled-icon: var(--text-tertiary);
-    --segmentedcontrol-disabled-icon-size: var(--icon-size-md);
+
+    /* Small size — overrides for geometry + typography. Per-state colors and
+       font-weight stay shared with default; only the size-driven properties
+       differ. The `.small` rule below rebinds the default tokens to these
+       values so existing state-specific cascades flow through unchanged. */
+    --segmentedcontrol-bar-small-padding: var(--space-2);
+    --segmentedcontrol-bar-small-radius: var(--radius-md);
+    --segmentedcontrol-divider-small-inset: var(--space-4);
+    --segmentedcontrol-divider-small-thickness: var(--border-width-1);
+    --segmentedcontrol-option-small-padding: var(--space-6);
+    --segmentedcontrol-option-small-gap: var(--space-6);
+    --segmentedcontrol-option-small-icon-size: var(--icon-size-sm);
+    --segmentedcontrol-option-small-text-font-size: var(--font-size-sm);
+    --segmentedcontrol-option-small-text-line-height: var(--line-height-sm);
+    --segmentedcontrol-selected-small-radius: var(--radius-sm);
   }
 
   .segmented-control {
@@ -126,6 +147,50 @@
     border-radius: var(--segmentedcontrol-bar-radius);
   }
 
+  /* Small size modifier — rebinds the default tokens to their `-small-*`
+     counterparts. Per-state cascades (selected/hover/disabled typography,
+     icon size) all read through these default names, so rebinding them
+     here is enough — no per-state small token explosion. Per-side padding
+     overrides are rebound too so split-padding edits at small don't leak
+     through to default size. Font-weight and color are intentionally NOT
+     rebound: weight differences are state-driven (selected = semibold),
+     colors are state-driven too. */
+  .segmented-control.small {
+    --segmentedcontrol-bar-padding: var(--segmentedcontrol-bar-small-padding);
+    --segmentedcontrol-bar-padding-top: var(--segmentedcontrol-bar-small-padding-top);
+    --segmentedcontrol-bar-padding-right: var(--segmentedcontrol-bar-small-padding-right);
+    --segmentedcontrol-bar-padding-bottom: var(--segmentedcontrol-bar-small-padding-bottom);
+    --segmentedcontrol-bar-padding-left: var(--segmentedcontrol-bar-small-padding-left);
+    --segmentedcontrol-bar-radius: var(--segmentedcontrol-bar-small-radius);
+
+    --segmentedcontrol-divider-inset: var(--segmentedcontrol-divider-small-inset);
+    --segmentedcontrol-divider-thickness: var(--segmentedcontrol-divider-small-thickness);
+
+    --segmentedcontrol-option-padding: var(--segmentedcontrol-option-small-padding);
+    --segmentedcontrol-option-padding-top: var(--segmentedcontrol-option-small-padding-top);
+    --segmentedcontrol-option-padding-right: var(--segmentedcontrol-option-small-padding-right);
+    --segmentedcontrol-option-padding-bottom: var(--segmentedcontrol-option-small-padding-bottom);
+    --segmentedcontrol-option-padding-left: var(--segmentedcontrol-option-small-padding-left);
+    --segmentedcontrol-option-gap: var(--segmentedcontrol-option-small-gap);
+
+    /* Icon size has a single source-of-truth token now; text size/line-height
+       still need per-state rebinds because typography genuinely varies per
+       state (selected = semibold, default = normal). */
+    --segmentedcontrol-option-icon-size: var(--segmentedcontrol-option-small-icon-size);
+
+    --segmentedcontrol-option-text-font-size: var(--segmentedcontrol-option-small-text-font-size);
+    --segmentedcontrol-selected-text-font-size: var(--segmentedcontrol-option-small-text-font-size);
+    --segmentedcontrol-option-hover-text-font-size: var(--segmentedcontrol-option-small-text-font-size);
+    --segmentedcontrol-disabled-text-font-size: var(--segmentedcontrol-option-small-text-font-size);
+
+    --segmentedcontrol-option-text-line-height: var(--segmentedcontrol-option-small-text-line-height);
+    --segmentedcontrol-selected-text-line-height: var(--segmentedcontrol-option-small-text-line-height);
+    --segmentedcontrol-option-hover-text-line-height: var(--segmentedcontrol-option-small-text-line-height);
+    --segmentedcontrol-disabled-text-line-height: var(--segmentedcontrol-option-small-text-line-height);
+
+    --segmentedcontrol-selected-radius: var(--segmentedcontrol-selected-small-radius);
+  }
+
   /* Font + color properties are declared once on `.segment` and rebound per
      state via the `--_*` custom properties below. State classes only change
      the bindings; the actual `font-*` declarations never move. When two
@@ -144,8 +209,8 @@
 
     display: inline-flex;
     align-items: center;
-    gap: var(--space-8);
-    padding: var(--space-6) var(--space-16);
+    gap: var(--segmentedcontrol-option-gap);
+    @include themed-padding(--segmentedcontrol-option-padding, $h: 2);
     background: transparent;
     border: 0;
     border-radius: var(--segmentedcontrol-selected-radius);
@@ -165,13 +230,17 @@
     transition: color var(--duration-150);
   }
 
-  /* Short centered divider between adjacent segments. Negative margins absorb
-     the surrounding flex gap so seg-to-seg distance stays var(--bar-gap). */
+  /* Divider between adjacent segments. Stretches to the bar's cross-axis size
+     by inheriting the parent's `align-items: stretch`; an explicit margin-block
+     trims top + bottom so "Full" (0 inset) gives a bar-height line and larger
+     insets give shorter ones. Avoids the percentage-height collapse that bit us
+     when the divider was `align-self: center; height: 100%`.
+     Negative inline margins absorb the surrounding flex gap so seg-to-seg
+     distance stays var(--bar-gap). */
   .segment-divider {
-    align-self: center;
     flex-shrink: 0;
     width: var(--segmentedcontrol-divider-thickness);
-    height: var(--segmentedcontrol-divider-height);
+    margin-block: var(--segmentedcontrol-divider-inset);
     margin-inline: calc(
       var(--segmentedcontrol-bar-gap) * -0.5 - var(--segmentedcontrol-divider-thickness) * 0.5
     );
@@ -187,7 +256,6 @@
     --_text-weight: var(--segmentedcontrol-option-hover-text-font-weight);
     --_text-line-height: var(--segmentedcontrol-option-hover-text-line-height);
     --_icon-color: var(--segmentedcontrol-option-hover-icon);
-    --_icon-size: var(--segmentedcontrol-option-hover-icon-size);
     background: var(--segmentedcontrol-option-hover-surface);
   }
 
@@ -202,7 +270,6 @@
     --_text-weight: var(--segmentedcontrol-selected-text-font-weight);
     --_text-line-height: var(--segmentedcontrol-selected-text-line-height);
     --_icon-color: var(--segmentedcontrol-selected-icon);
-    --_icon-size: var(--segmentedcontrol-selected-icon-size);
     background: var(--segmentedcontrol-selected-surface);
     outline: var(--segmentedcontrol-selected-border-width) solid var(--segmentedcontrol-selected-border);
     outline-offset: calc(var(--segmentedcontrol-selected-border-width) * -1);
@@ -215,7 +282,6 @@
     --_text-weight: var(--segmentedcontrol-disabled-text-font-weight);
     --_text-line-height: var(--segmentedcontrol-disabled-text-line-height);
     --_icon-color: var(--segmentedcontrol-disabled-icon);
-    --_icon-size: var(--segmentedcontrol-disabled-icon-size);
     background: var(--segmentedcontrol-disabled-surface);
     opacity: 0.4;
     cursor: not-allowed;