@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Toast/Toast.module.scss

@@ -1,22 +1,23 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/feedback" as feedback;
 
 .container {
   position: fixed;
-  z-index: var(--fui-feedback-toast-layer, 70);
+  z-index: var(--fui-overlay-layer-toast, #{$fui-overlay-layer-toast});
   display: flex;
   flex-direction: column;
-  gap: var(--fui-feedback-stack-gap, var(--fui-raw-space-8, 8px));
+  gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
   inline-size: min(
-    var(--fui-feedback-toast-max-inline, 400px),
+    var(--fui-overlay-popover-md, #{measurements.target-value("overlay", "popover-md")}),
     calc(
       100% - var(
           --fui-feedback-viewport-inset-left,
-          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+          max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-left))
         ) - var(
           --fui-feedback-viewport-inset-right,
-          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+          max(var(--fui-raw-space-16, #{measurements.raw-space(16)}), env(safe-area-inset-right))
         )
     )
   );
@@ -53,10 +54,17 @@
 
 .toast {
   @include feedback.transient;
+  @include high-contrast-outline;
 
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  border-radius: var(--fui-radius-lg, $fui-radius-lg);
+  --_toast-tint: var(--fui-bg-elevated, #{$fui-bg-elevated});
+  --_toast-line: var(--fui-border, #{$fui-border});
+  --_toast-ink: var(--fui-text-primary, #{$fui-text-primary});
+  --_toast-ink-soft: var(--fui-text-secondary, #{$fui-text-secondary});
+
+  background-color: var(--_toast-tint, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--_toast-line, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-l1, $fui-radius-l1);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   animation: toastEnter var(--fui-transition-normal, $fui-transition-normal);
 }
@@ -77,64 +85,46 @@
   }
 }
 
-.default .icon {
-  color: var(--fui-text-secondary, $fui-text-secondary);
-}
-
-.success {
-  background: var(--fui-color-success-bg, $fui-color-success-bg);
-  border-color: var(--fui-color-success-border, $fui-color-success-border);
-
-  .title,
-  .description,
-  .icon {
-    color: var(--fui-color-success-text, $fui-color-success-text);
-  }
+// Tones paint wash, hairline and ink from the shared status ramp; the
+// description drops to the same ink so the toast reads as one tinted object.
+@mixin _tone($tone, $bg, $text, $border) {
+  --_toast-tint: var(--fui-color-#{$tone}-bg, #{$bg});
+  --_toast-line: var(--fui-color-#{$tone}-border, #{$border});
+  --_toast-ink: var(--fui-color-#{$tone}-text, #{$text});
+  --_toast-ink-soft: var(--fui-color-#{$tone}-text, #{$text});
 }
 
-.error {
-  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  border-color: var(--fui-color-danger-border, $fui-color-danger-border);
-
-  .title,
-  .description,
-  .icon {
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
+.toneSuccess {
+  @include _tone(
+    "success",
+    $fui-color-success-bg,
+    $fui-color-success-text,
+    $fui-color-success-border
+  );
 }
 
-.warning {
-  background: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  border-color: var(--fui-color-warning-border, $fui-color-warning-border);
-
-  .title,
-  .description,
-  .icon {
-    color: var(--fui-color-warning-text, $fui-color-warning-text);
-  }
+.toneDanger {
+  @include _tone("danger", $fui-color-danger-bg, $fui-color-danger-text, $fui-color-danger-border);
 }
 
-.info {
-  background: var(--fui-color-info-bg, $fui-color-info-bg);
-  border-color: var(--fui-color-info-border, $fui-color-info-border);
-
-  .title,
-  .description,
-  .icon {
-    color: var(--fui-color-info-text, $fui-color-info-text);
-  }
+.toneWarning {
+  @include _tone(
+    "warning",
+    $fui-color-warning-bg,
+    $fui-color-warning-text,
+    $fui-color-warning-border
+  );
 }
 
-.success .description,
-.error .description,
-.warning .description,
-.info .description {
-  opacity: 0.8;
+.toneInfo {
+  @include _tone("info", $fui-color-info-bg, $fui-color-info-text, $fui-color-info-border);
 }
 
 .icon {
   @include feedback.icon;
 
+  color: var(--_toast-ink-soft, var(--fui-text-secondary, #{$fui-text-secondary}));
+
   svg {
     inline-size: 100%;
     block-size: 100%;
@@ -142,81 +132,36 @@
 }
 
 .toast:has(.description) .icon {
-  margin-block-start: var(--fui-stroke-hairline, 1px);
+  margin-block-start: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 .content {
   display: grid;
   flex: 1;
-  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
   min-inline-size: 0;
 }
 
 .title {
   @include feedback.title;
 
-  color: var(--fui-text-primary, $fui-text-primary);
+  color: var(--_toast-ink, var(--fui-text-primary, #{$fui-text-primary}));
 }
 
 .description {
   @include feedback.body;
 
-  color: var(--fui-text-secondary, $fui-text-secondary);
-}
-
-.action {
-  @include button-reset;
-  @include feedback.compact-action;
-
-  flex-shrink: 0;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: var(--fui-color-accent, $fui-color-accent);
-  cursor: pointer;
-  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
+  color: var(--_toast-ink-soft, var(--fui-text-secondary, #{$fui-text-secondary}));
 }
 
+// The action and close are kit buttons; only their placement lives here.
+.action,
 .close {
-  @include button-reset;
-  @include feedback.close;
-
   flex-shrink: 0;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
-  cursor: pointer;
-  transition:
-    background-color var(--fui-transition-fast, $fui-transition-fast),
-    color var(--fui-transition-fast, $fui-transition-fast);
-
-  svg {
-    inline-size: var(--_fui-action-icon-size);
-    block-size: var(--_fui-action-icon-size);
-  }
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-secondary, $fui-text-secondary);
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .toast {
     animation: none;
   }
-
-  .action,
-  .close {
-    transition: none;
-  }
 }

package/src/components/Toast/index.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import * as React from 'react';
-import styles from './Toast.module.scss';
+import * as React from "react";
+import { Button } from "../Button";
+import { IconButton } from "../IconButton";
+import styles from "./Toast.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+export type ToastTone = "neutral" | "success" | "danger" | "warning" | "info";
 export type ToastPosition =
   | 'top-left'
   | 'top-center'
@@ -20,7 +22,8 @@ export interface ToastData {
   id: string;
   title?: string;
   description?: string;
-  variant?: ToastVariant;
+  /** Colour. `neutral` is the plain notification; the semantic tones paint the shared status ramp. */
+  tone?: ToastTone;
   duration?: number;
   action?: {
     label: string;
@@ -76,21 +79,22 @@ export function useToast() {
     return context.addToast(options);
   }, [context]);
 
-  const makeVariantHelper = React.useCallback(
-    (variant: ToastVariant) =>
-      (titleOrOptions: string | Omit<ToastInput, 'variant'>, description?: string) => {
-        if (typeof titleOrOptions === 'string') {
-          return context.addToast({ title: titleOrOptions, description, variant });
+  const makeToneHelper = React.useCallback(
+    (tone: ToastTone) =>
+      (titleOrOptions: string | Omit<ToastInput, "tone">, description?: string) => {
+        if (typeof titleOrOptions === "string") {
+          return context.addToast({ title: titleOrOptions, description, tone });
         }
-        return context.addToast({ ...titleOrOptions, variant });
+        return context.addToast({ ...titleOrOptions, tone });
       },
     [context]
   );
 
-  const success = React.useMemo(() => makeVariantHelper('success'), [makeVariantHelper]);
-  const error = React.useMemo(() => makeVariantHelper('error'), [makeVariantHelper]);
-  const warning = React.useMemo(() => makeVariantHelper('warning'), [makeVariantHelper]);
-  const info = React.useMemo(() => makeVariantHelper('info'), [makeVariantHelper]);
+  const success = React.useMemo(() => makeToneHelper("success"), [makeToneHelper]);
+  // Keeps its name; the field it sets is `tone: "danger"`.
+  const error = React.useMemo(() => makeToneHelper("danger"), [makeToneHelper]);
+  const warning = React.useMemo(() => makeToneHelper("warning"), [makeToneHelper]);
+  const info = React.useMemo(() => makeToneHelper("info"), [makeToneHelper]);
 
   return {
     toast,
@@ -155,14 +159,22 @@ function CloseIcon() {
   );
 }
 
-const variantIcons: Record<ToastVariant, React.ComponentType | null> = {
-  default: null,
+const toneIcons: Record<ToastTone, React.ComponentType | null> = {
+  neutral: null,
   success: SuccessIcon,
-  error: ErrorIcon,
+  danger: ErrorIcon,
   warning: WarningIcon,
   info: InfoIcon,
 };
 
+const TONE_CLASS: Record<ToastTone, string | undefined> = {
+  neutral: undefined,
+  success: styles.toneSuccess,
+  danger: styles.toneDanger,
+  warning: styles.toneWarning,
+  info: styles.toneInfo,
+};
+
 // ============================================
 // Toast Component
 // ============================================
@@ -171,7 +183,7 @@ function ToastItem({
   id,
   title,
   description,
-  variant = 'default',
+  tone = "neutral",
   action,
   onDismiss,
   onPause,
@@ -183,18 +195,14 @@ function ToastItem({
   onPause?: () => void;
   onResume?: () => void;
 }) {
-  const Icon = variantIcons[variant];
+  const Icon = toneIcons[tone];
   const uniqueId = React.useId();
   const toastRef = React.useRef<HTMLDivElement>(null);
   const titleId = title ? `toast-title-${id || uniqueId}` : undefined;
   const descId = description ? `toast-desc-${id || uniqueId}` : undefined;
-  const liveRole = variant === 'error' || variant === 'warning' ? 'alert' : 'status';
+  const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
 
-  const toastClasses = [
-    styles.toast,
-    styles[variant],
-    className,
-  ].filter(Boolean).join(' ');
+  const toastClasses = [styles.toast, TONE_CLASS[tone], className].filter(Boolean).join(" ");
 
   return (
     <div
@@ -232,23 +240,20 @@ function ToastItem({
         {description && <div id={descId} className={styles.description}>{description}</div>}
       </div>
       {action && (
-        <button
-          type="button"
-          className={styles.action}
-          onClick={action.onClick}
-        >
+        <Button variant="link" size="sm" className={styles.action} onClick={action.onClick}>
           {action.label}
-        </button>
+        </Button>
       )}
       {onDismiss && (
-        <button
-          type="button"
+        <IconButton
+          variant="ghost"
+          size="sm"
           className={styles.close}
           onClick={onDismiss}
           aria-label="Dismiss notification"
         >
           <CloseIcon />
-        </button>
+        </IconButton>
       )}
     </div>
   );

package/src/components/ToggleGroup/ToggleGroup.contract.json

@@ -13,9 +13,9 @@
     "onChange: function",
     "onValueChange: function",
     "children: node (required)",
-    "variant: default|pills|outline|outlined (default: default)",
+    "variant: soft|ghost|outline (default: soft)",
     "size: sm|md|lg (default: md)",
-    "gap: sm|none|xs (default: xs for pills; none otherwise)",
+    "gap: sm|none|xs (default: xs for ghost; none otherwise)",
     "selectionMode: single (default: single)"
   ],
   "props": {
@@ -46,10 +46,10 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual style",
-      "default": "default",
+      "description": "Chrome: soft is the filled rail, ghost the open pill cluster, outline the connected bordered segments",
+      "default": "soft",
       "required": false,
-      "values": ["default", "pills", "outline", "outlined"]
+      "values": ["soft", "ghost", "outline"]
     },
     "size": {
       "type": "enum",
@@ -60,7 +60,7 @@
     },
     "gap": {
       "type": "enum",
-      "description": "Gap between items in the pills variant. Connected variants intentionally ignore gaps.",
+      "description": "Gap between items in the ghost variant. Connected variants intentionally ignore gaps.",
       "required": false,
       "values": ["sm", "none", "xs"]
     },
@@ -88,7 +88,7 @@
       "Two to five items",
       "Labels short enough to scan in one pass",
       "Icons work for well-known modes like grid and list",
-      "default for an inset tonal rail, pills for an open filter cluster, outlined for connected segments",
+      "soft for an inset tonal rail, ghost for an open filter cluster, outline for connected segments",
       "Keep targets at least 24px on touch"
     ],
     "accessibility": [
@@ -105,14 +105,14 @@
       "code": "<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Pills",
+      "name": "Ghost",
       "description": "Detached rounded buttons for open filter clusters.",
-      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"pills\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"
+      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"ghost\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Outlined",
+      "name": "Outline",
       "description": "Bordered segments sharing one continuous edge.",
-      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"outlined\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"
+      "code": "<ToggleGroup value={value} onChange={setValue} variant=\"outline\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
       "name": "Uncontrolled",
@@ -158,9 +158,9 @@
       "defaultValue?: string - initial selected value (uncontrolled)",
       "onChange: (value: string) => void - change handler (or onValueChange)",
       "children: ToggleGroup.Item[] - toggle items",
-      "variant: default|pills|outline|outlined - visual style (outlined aliases outline)",
+      "variant: soft|ghost|outline - chrome (soft rail, ghost cluster, outline segments)",
       "size: sm|md|lg - size variant",
-      "gap: none|xs|sm - pills spacing (xs by default; connected variants remain gapless)",
+      "gap: none|xs|sm - ghost spacing (xs by default; connected variants remain gapless)",
       "selectionMode: single (default: single)"
     ],
     "a11yRules": ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"]

package/src/components/ToggleGroup/ToggleGroup.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/layout";
 @use "../../recipes/segmented";
 
@@ -49,8 +50,7 @@
   }
 
   &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @include disabled-state;
   }
 }
 
@@ -95,11 +95,11 @@
 }
 
 // ============================================
-// Default variant: inset tonal selection
+// Soft variant: filled rail with an inset tonal selection
 // ============================================
 
-.default {
-  gap: 0;
+.soft {
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   padding: var(--fui-raw-space-2, 2px);
   background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -108,12 +108,13 @@
 
   .item {
     min-block-size: calc(
-      var(--_fui-segmented-track) - var(--fui-raw-space-2, 2px) - var(--fui-raw-space-2, 2px)
+      var(--_fui-segmented-track, #{segmented.track("md")}) - var(--fui-raw-space-2, 2px) -
+        var(--fui-raw-space-2, 2px)
     );
     background-color: transparent;
-    // Connected segments: only outer corners are rounded. Per-item full radius
-    // left a rail-colored notch between items that reads as a gap.
-    border-radius: 0;
+    // Connected segments: only outer corners are rounded (the item base carries
+    // no radius). Per-item full radius left a rail-colored notch between items
+    // that reads as a gap.
 
     &:first-child {
       border-start-start-radius: var(--fui-radius-md, $fui-radius-md);
@@ -134,26 +135,16 @@
     }
 
     &.selected {
-      background-color: var(
-        --fui-toggle-group-selected-bg,
-        var(
-          --fui-control-selected-bg,
-          color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 9%, transparent)
-        )
-      );
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }
 
 // ============================================
-// Pills variant: open cluster with soft selected pills
+// Ghost variant: open cluster of pills, no rail
 // ============================================
 
-.pills {
+.ghost {
   .item {
     background-color: transparent;
     border-radius: var(--fui-radius-full, $fui-radius-full);
@@ -164,17 +155,7 @@
     }
 
     &.selected {
-      background-color: var(
-        --fui-toggle-group-selected-bg,
-        var(
-          --fui-control-selected-bg,
-          color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 9%, transparent)
-        )
-      );
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }
@@ -184,7 +165,7 @@
 // ============================================
 
 .outline {
-  gap: 0;
+  gap: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   background-color: transparent;
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
@@ -192,7 +173,6 @@
 
   .item {
     background-color: transparent;
-    border-radius: 0;
 
     &:first-child {
       border-start-start-radius: var(--fui-radius-lg, $fui-radius-lg);
@@ -224,17 +204,7 @@
     }
 
     &.selected {
-      background-color: var(
-        --fui-toggle-group-selected-bg,
-        var(
-          --fui-control-selected-bg,
-          color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 9%, transparent)
-        )
-      );
-      box-shadow:
-        inset 0 0 0 var(--fui-stroke-hairline, 1px)
-          var(--fui-toggle-group-selected-border, transparent),
-        var(--fui-toggle-group-selected-shadow, none);
+      @include segmented-selection;
     }
   }
 }

package/src/components/ToggleGroup/index.tsx

@@ -23,15 +23,16 @@ export interface ToggleGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   onValueChange?: (value: string) => void;
   /** Toggle items */
   children: React.ReactNode;
-  /** Visual variant.
-   * @default "default"
+  /** Chrome. `soft` is the filled rail, `ghost` the open pill cluster,
+   * `outline` the connected bordered segments.
+   * @default "soft"
    * @see https://usefragments.com/components/togglegroup#variants */
-  variant?: "default" | "pills" | "outline" | "outlined";
+  variant?: "soft" | "ghost" | "outline";
   /** Size.
    * @default "md" */
   size?: "sm" | "md" | "lg";
-  /** Gap between items in the pills variant. Defaults to `xs` for pills and
-   * is intentionally removed from connected variants. */
+  /** Gap between items in the ghost variant. Defaults to `xs` for ghost and
+   * is intentionally removed from the connected variants. */
   gap?: "none" | "xs" | "sm";
   /** Selection mode for this control. Currently only single-select is supported.
    * @default "single" */
@@ -57,7 +58,7 @@ export interface ToggleGroupItemProps extends Omit<
 interface ToggleGroupContextValue {
   value: string;
   onChange: (value: string) => void;
-  variant: "default" | "pills" | "outline";
+  variant: "soft" | "ghost" | "outline";
   size: "sm" | "md" | "lg";
   hasFocusableSelection: boolean;
   firstEnabledValue: string | null;
@@ -83,7 +84,7 @@ function ToggleGroupRoot({
   onChange,
   onValueChange,
   children,
-  variant = "default",
+  variant = "soft",
   size: sizeProp,
   gap,
   selectionMode = "single",
@@ -91,8 +92,7 @@ function ToggleGroupRoot({
   ...htmlProps
 }: ToggleGroupProps) {
   const size = useResolvedControlSize(sizeProp);
-  const normalizedVariant = variant === "outlined" ? "outline" : variant;
-  const resolvedGap = normalizedVariant === "pills" ? (gap ?? "xs") : "none";
+  const resolvedGap = variant === "ghost" ? (gap ?? "xs") : "none";
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
   const isControlled = value !== undefined;
   const currentValue = isControlled ? (value ?? "") : internalValue;
@@ -107,7 +107,7 @@ function ToggleGroupRoot({
   );
   const classes = [
     styles.group,
-    styles[normalizedVariant],
+    styles[variant],
     styles[`size-${size}`],
     resolvedGap !== "none" && styles[`gap-${resolvedGap}`],
     className,
@@ -127,7 +127,7 @@ function ToggleGroupRoot({
   const contextValue: ToggleGroupContextValue = {
     value: currentValue,
     onChange: emitChange,
-    variant: normalizedVariant,
+    variant,
     size,
     hasFocusableSelection,
     firstEnabledValue,