@usefragments/ui 1.7.0 → 2.0.0

package/src/components/RadioGroup/index.tsx

@@ -50,13 +50,11 @@ export interface RadioGroupProps extends Omit<
   /** Size variant */
   size?: "sm" | "md" | "lg";
   /**
-   * Visual variant.
-   * - `default`: inline radio circle next to a label (form-control style).
-   * - `card`: each item is a full-width clickable card with the radio circle
-   *   tucked inside. Useful for high-stakes choices, surveys, plan pickers.
-   * @default "default"
+   * Chrome. Omit it for the inline radio circle next to a label (form-control
+   * style); `outline` renders each item as a full-width bordered surface with
+   * the radio circle tucked inside — high-stakes choices, surveys, plan pickers.
    */
-  variant?: "default" | "card";
+  variant?: "outline";
   /** Class applied to the outer wrapper (label + group + error) */
   wrapperClassName?: string;
   /** Class applied to the inner radio group container */
@@ -76,6 +74,12 @@ export interface RadioItemProps {
   helperText?: string;
   /** @deprecated Use helperText instead. Description text below the label. */
   description?: string;
+  /**
+   * A value at the end of the row, on the label's line — a price, a count,
+   * a date. Read by the label's accessible name, so keep it short and put
+   * the explanation in `helperText`.
+   */
+  trailing?: React.ReactNode;
   /** Whether this item is disabled */
   disabled?: boolean;
   /** Accessible name for icon-only mode */
@@ -97,7 +101,7 @@ export interface RadioItemProps {
 // ============================================
 
 const RadioSizeContext = React.createContext<ControlSize>("md");
-const RadioVariantContext = React.createContext<"default" | "card">("default");
+const RadioVariantContext = React.createContext<"outline" | undefined>(undefined);
 
 // ============================================
 // Radio Item Component
@@ -108,6 +112,7 @@ function RadioItem({
   label,
   helperText,
   description,
+  trailing,
   disabled = false,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
@@ -122,6 +127,7 @@ function RadioItem({
   const id = React.useId();
   const labelId = label ? `radio-label-${id}` : undefined;
   const descriptionId = resolvedHelperText ? `radio-desc-${id}` : undefined;
+  const trailingId = trailing != null ? `radio-trailing-${id}` : undefined;
 
   const radioClasses = [
     styles.radio,
@@ -134,7 +140,7 @@ function RadioItem({
 
   const wrapperClasses = [
     styles.itemWrapper,
-    variant === "card" && styles.itemWrapperCard,
+    variant === "outline" && styles.itemWrapperOutline,
     className,
   ]
     .filter(Boolean)
@@ -162,13 +168,14 @@ function RadioItem({
       className={wrapperClasses}
       data-disabled={disabled || undefined}
       data-has-description={resolvedHelperText ? true : undefined}
+      data-has-trailing={trailing != null ? true : undefined}
       data-size={size}
     >
       <BaseRadio.Root
         value={value}
         disabled={disabled}
         aria-label={ariaLabel}
-        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId, trailingId)}
         aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
         data-size={size}
         className={radioClasses}
@@ -185,6 +192,11 @@ function RadioItem({
           </span>
         )}
       </div>
+      {trailing != null && (
+        <span id={trailingId} className={styles.trailing}>
+          {trailing}
+        </span>
+      )}
     </label>
   );
 }
@@ -210,7 +222,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
     helperText,
     error,
     size: sizeProp,
-    variant = "default",
+    variant,
     wrapperClassName,
     groupClassName,
     groupId,
@@ -266,6 +278,7 @@ const RadioGroupRoot = React.forwardRef<HTMLDivElement, RadioGroupProps>(functio
             aria-describedby={mergeAriaIds(ariaDescribedBy, errorId, helperId)}
             data-size={size}
             data-invalid={hasError || undefined}
+            aria-invalid={hasError || undefined}
             className={groupClasses}
           >
             {children}

package/src/components/ScrollArea/ScrollArea.module.scss

@@ -1,46 +1,43 @@
 @use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/variables" as *;
 
+$_track-size: measurements.raw-space(6);
+$_inline-fade: measurements.raw-space(48);
+$_block-fade: measurements.raw-space(32);
+$_mask-none: linear-gradient(black, black);
+
 .root {
-  --fui-scrollarea-track-size: var(--fui-raw-space-6, #{measurements.raw-space(6)});
-  --fui-scrollarea-inline-fade: var(--fui-raw-space-48, #{measurements.raw-space(48)});
-  --fui-scrollarea-block-fade: var(--fui-raw-space-32, #{measurements.raw-space(32)});
-  --_fui-scrollarea-track-size: var(
-    --fui-scrollarea-track-size,
-    var(--fui-raw-space-6, #{measurements.raw-space(6)})
-  );
-  --_fui-scrollarea-inline-fade: var(
-    --fui-scrollarea-inline-fade,
-    var(--fui-raw-space-48, #{measurements.raw-space(48)})
-  );
-  --_fui-scrollarea-block-fade: var(
-    --fui-scrollarea-block-fade,
-    var(--fui-raw-space-32, #{measurements.raw-space(32)})
-  );
+  --_fui-scrollarea-track-size: var(--fui-raw-space-6, #{$_track-size});
+  --_fui-scrollarea-inline-fade: var(--fui-raw-space-48, #{$_inline-fade});
+  --_fui-scrollarea-block-fade: var(--fui-raw-space-32, #{$_block-fade});
 
   position: relative;
   overflow: hidden;
 }
 
 .viewport {
-  --_fui-scrollarea-inline-mask: linear-gradient(black, black);
-  --_fui-scrollarea-block-mask: linear-gradient(black, black);
+  --_fui-scrollarea-inline-mask: #{$_mask-none};
+  --_fui-scrollarea-block-mask: #{$_mask-none};
 
   inline-size: 100%;
   block-size: 100%;
   overflow: hidden;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
-  mask-image: var(--_fui-scrollarea-inline-mask), var(--_fui-scrollarea-block-mask);
+  mask-image:
+    var(--_fui-scrollarea-inline-mask, #{$_mask-none}),
+    var(--_fui-scrollarea-block-mask, #{$_mask-none});
   mask-repeat: no-repeat;
   mask-size: 100% 100%;
   mask-composite: intersect;
-  -webkit-mask-image: var(--_fui-scrollarea-inline-mask), var(--_fui-scrollarea-block-mask);
+  -webkit-mask-image:
+    var(--_fui-scrollarea-inline-mask, #{$_mask-none}),
+    var(--_fui-scrollarea-block-mask, #{$_mask-none});
   -webkit-mask-composite: source-in;
 
   &::-webkit-scrollbar {
-    width: var(--_fui-scrollarea-track-size);
-    height: var(--_fui-scrollarea-track-size);
+    width: var(--_fui-scrollarea-track-size, #{$_track-size});
+    height: var(--_fui-scrollarea-track-size, #{$_track-size});
   }
 
   &::-webkit-scrollbar-track {
@@ -84,18 +81,18 @@
 
 .horizontal:not([data-scroll-x="none"]),
 .both:not([data-scroll-x="none"]) {
-  scroll-padding-inline: var(--_fui-scrollarea-inline-fade);
+  scroll-padding-inline: var(--_fui-scrollarea-inline-fade, #{$_inline-fade});
 }
 
 .vertical:not([data-scroll-y="none"]),
 .both:not([data-scroll-y="none"]) {
-  scroll-padding-block: var(--_fui-scrollarea-block-fade);
+  scroll-padding-block: var(--_fui-scrollarea-block-fade, #{$_block-fade});
 }
 
 .viewport[data-scroll-x="end"] {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
@@ -104,7 +101,7 @@
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade)
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade})
   );
 }
 
@@ -112,8 +109,8 @@
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade),
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade}),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
@@ -122,14 +119,14 @@
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
     transparent,
-    black var(--_fui-scrollarea-inline-fade)
+    black var(--_fui-scrollarea-inline-fade, #{$_inline-fade})
   );
 }
 
 .viewport[data-scroll-x="start"]:dir(rtl) {
   --_fui-scrollarea-inline-mask: linear-gradient(
     to right,
-    black calc(100% - var(--_fui-scrollarea-inline-fade)),
+    black calc(100% - var(--_fui-scrollarea-inline-fade, #{$_inline-fade})),
     transparent
   );
 }
@@ -137,7 +134,7 @@
 .viewport[data-scroll-y="end"] {
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
-    black calc(100% - var(--_fui-scrollarea-block-fade)),
+    black calc(100% - var(--_fui-scrollarea-block-fade, #{$_block-fade})),
     transparent
   );
 }
@@ -146,7 +143,7 @@
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
     transparent,
-    black var(--_fui-scrollarea-block-fade)
+    black var(--_fui-scrollarea-block-fade, #{$_block-fade})
   );
 }
 
@@ -154,8 +151,8 @@
   --_fui-scrollarea-block-mask: linear-gradient(
     to bottom,
     transparent,
-    black var(--_fui-scrollarea-block-fade),
-    black calc(100% - var(--_fui-scrollarea-block-fade)),
+    black var(--_fui-scrollarea-block-fade, #{$_block-fade}),
+    black calc(100% - var(--_fui-scrollarea-block-fade, #{$_block-fade})),
     transparent
   );
 }

package/src/components/Select/Select.module.scss

@@ -37,9 +37,25 @@
   min-width: layout.measure("field-minimum");
   text-align: left;
 
+  &:focus-visible,
   &[data-popup-open] {
-    border-color: var(--fui-field-border-focus, $fui-color-accent);
+    @include field.focus-state;
   }
+
+  .wrapper[data-invalid] & {
+    @include field.invalid-state;
+
+    // Focused while invalid keeps the danger edge and takes the danger ring,
+    // the same pairing Input and Textarea render. Without it the ring stays
+    // accent-coloured and the control reads half-valid at the moment the user
+    // is actually in it.
+    &:focus-visible,
+    &[data-popup-open] {
+      @include field.invalid-focus-state;
+    }
+  }
+
+  @include high-contrast-outline;
 }
 
 // Trigger size variants
@@ -94,7 +110,7 @@
   &:disabled,
   &[data-disabled] {
     background-color: transparent;
-    opacity: 0.5;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }
 
@@ -169,7 +185,7 @@
 
 // Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, #{$fui-overlay-layer-anchored});
   outline: none;
 }
 
@@ -253,21 +269,6 @@
   @include popup.group-label;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .trigger {
-    border-width: var(--fui-stroke-default, 2px);
-    border-color: var(--fui-text-primary, $fui-text-primary);
-
-    &[data-popup-open] {
-      border-color: var(--fui-color-accent, $fui-color-accent);
-    }
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Select/index.tsx

@@ -4,10 +4,7 @@ import * as React from "react";
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { mergeAriaIds, useFormFieldIds, type FormFieldProps } from "../../utils/aria";
-import {
-  POPUP_OFFSET_PX,
-  resolvePopupViewportRows,
-} from "../../recipes/popup";
+import { POPUP_OFFSET_PX, resolvePopupViewportRows } from "../../recipes/popup";
 import styles from "./Select.module.scss";
 
 // ============================================
@@ -16,7 +13,7 @@ import styles from "./Select.module.scss";
 
 export type SelectValue = string;
 
-export type SelectVariant = "field" | "ghost";
+export type SelectVariant = "outline" | "ghost";
 
 export interface SelectOption {
   value: SelectValue;
@@ -68,10 +65,10 @@ export interface SelectProps extends FormFieldProps {
   /** Size variant.
    * @default "md" */
   size?: "sm" | "md" | "lg";
-  /** Visual treatment. `ghost` drops the field shell for a compact, borderless
-   * control — for toolbars and dense rows, where a bordered field reads as a
-   * form. Pair with `size="sm"`.
-   * @default "field" */
+  /** Chrome. `outline` is the bordered field shell; `ghost` drops it for a
+   * compact, borderless control — for toolbars and dense rows, where a bordered
+   * field reads as a form. Pair with `size="sm"`.
+   * @default "outline" */
   variant?: SelectVariant;
   /** Wrapper class name */
   className?: string;
@@ -163,6 +160,9 @@ interface SelectContextValue {
   unregisterItem: (value: SelectValue) => void;
   size: "sm" | "md" | "lg";
   variant: SelectVariant;
+  /** Mirrors the wrapper's `data-invalid` onto the trigger as `aria-invalid`,
+   * so assistive tech hears the state the danger edge is painting. */
+  invalid?: boolean;
   /** Items built from the `options` prop, so a custom composition can put the
    * trigger where it wants without having to re-render the list itself — and
    * without losing whatever the root knows about an option that a bare label
@@ -175,7 +175,7 @@ const SelectContext = React.createContext<SelectContextValue>({
   registerItem: () => {},
   unregisterItem: () => {},
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null,
 });
 
@@ -234,7 +234,7 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
     helperText,
     error,
     size: sizeProp,
-    variant = "field",
+    variant = "outline",
     className,
   }: SelectProps,
   ref
@@ -320,6 +320,12 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
     return merged;
   }, [declaredItems, items]);
 
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
+    label,
+    helperText,
+    error,
+  });
+
   const contextValue = React.useMemo(
     () => ({
       placeholder,
@@ -330,6 +336,7 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
       size,
       variant,
       optionItems,
+      invalid: hasError,
     }),
     [
       placeholder,
@@ -340,27 +347,18 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
       size,
       variant,
       optionItems,
+      hasError,
     ]
   );
 
-  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
-    label,
-    helperText,
-    error,
-  });
-
-  const wrapperClasses = [
-    styles.wrapper,
-    variant === "ghost" && styles.wrapperGhost,
-    className,
-  ]
+  const wrapperClasses = [styles.wrapper, variant === "ghost" && styles.wrapperGhost, className]
     .filter(Boolean)
     .join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
 
   return (
     <SelectContext.Provider value={contextValue}>
-      <div ref={ref} className={wrapperClasses}>
+      <div ref={ref} className={wrapperClasses} data-invalid={hasError || undefined}>
         <BaseSelect.Root
           value={value !== undefined || readOnly ? selectedValue : undefined}
           defaultValue={value === undefined && !readOnly ? defaultValue : undefined}
@@ -427,7 +425,11 @@ function SelectTrigger({
     (placeholderText ? <span className={styles.placeholder}>{placeholderText}</span> : null);
 
   return (
-    <BaseSelect.Trigger {...htmlProps} className={classes}>
+    <BaseSelect.Trigger
+      {...htmlProps}
+      className={classes}
+      aria-invalid={context.invalid || undefined}
+    >
       {children ?? (
         <>
           {icon && <span className={styles.triggerIcon}>{icon}</span>}

package/src/components/Separator/Separator.contract.json

@@ -9,7 +9,7 @@
   "exportName": "Separator",
   "propsSummary": [
     "orientation: horizontal|vertical (default: horizontal)",
-    "spacing: none|sm|md|lg (default: none)",
+    "gap: none|xs|sm|md|lg|xl (default: none)",
     "soft: boolean (default: false)",
     "label: string",
     "style: object"
@@ -22,12 +22,12 @@
       "required": false,
       "values": ["horizontal", "vertical"]
     },
-    "spacing": {
+    "gap": {
       "type": "enum",
-      "description": "Margin around the separator",
+      "description": "Breathing room around the rule",
       "default": "none",
       "required": false,
-      "values": ["none", "sm", "md", "lg"]
+      "values": ["none", "xs", "sm", "md", "lg", "xl"]
     },
     "soft": {
       "type": "boolean",
@@ -72,12 +72,12 @@
     {
       "name": "Default",
       "description": "Standard and soft weights, one above the other.",
-      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>Standard weight</Text>\n  <Separator spacing=\"md\" />\n  <Text>Soft weight</Text>\n  <Separator soft spacing=\"md\" />\n  <Text>Below</Text>\n</Box>"
+      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>Standard weight</Text>\n  <Separator gap=\"md\" />\n  <Text>Soft weight</Text>\n  <Separator soft gap=\"md\" />\n  <Text>Below</Text>\n</Box>"
     },
     {
       "name": "With Label",
       "description": "A label sits inside the rule for a major break.",
-      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>First section</Text>\n  <Separator label=\"Or\" spacing=\"md\" />\n  <Text>Second section</Text>\n</Box>"
+      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>First section</Text>\n  <Separator label=\"Or\" gap=\"md\" />\n  <Text>Second section</Text>\n</Box>"
     },
     {
       "name": "Vertical",
@@ -85,9 +85,9 @@
       "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Stack direction=\"row\" align=\"center\" gap=\"md\" style={{ height: '40px' }}>\n  <Text>Item 1</Text>\n  <Separator orientation=\"vertical\" />\n  <Text>Item 2</Text>\n  <Separator orientation=\"vertical\" />\n  <Text>Item 3</Text>\n</Stack>"
     },
     {
-      "name": "Spacing Options",
-      "description": "spacing sets the breathing room around the rule.",
-      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>none</Text>\n  <Separator spacing=\"none\" />\n  <Text>sm</Text>\n  <Separator spacing=\"sm\" />\n  <Text>md</Text>\n  <Separator spacing=\"md\" />\n  <Text>lg</Text>\n  <Separator spacing=\"lg\" />\n  <Text>End</Text>\n</Box>"
+      "name": "Gap Options",
+      "description": "gap sets the breathing room around the rule.",
+      "code": "import { Box } from '@/components/Box';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\n\n<Box width=\"100%\">\n  <Text>none</Text>\n  <Separator gap=\"none\" />\n  <Text>sm</Text>\n  <Separator gap=\"sm\" />\n  <Text>md</Text>\n  <Separator gap=\"md\" />\n  <Text>lg</Text>\n  <Separator gap=\"lg\" />\n  <Text>End</Text>\n</Box>"
     }
   ],
   "relations": [
@@ -100,7 +100,7 @@
   "contract": {
     "propsSummary": [
       "orientation: horizontal|vertical - direction",
-      "spacing: none|sm|md|lg - margin",
+      "gap: none|xs|sm|md|lg|xl - breathing room",
       "soft: boolean - lighter appearance",
       "label: string - centered label text"
     ],

package/src/components/Separator/Separator.module.scss

@@ -1,6 +1,7 @@
 @use "../../recipes/layout";
 @use "../../recipes/typography";
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 
 .separator {
   flex-shrink: 0;
@@ -9,25 +10,25 @@
 
 // Horizontal (default)
 .horizontal {
-  width: 100%;
+  inline-size: 100%;
 
   .line {
     display: block;
-    width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    inline-size: 100%;
+    block-size: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     background-color: var(--fui-border, $fui-border);
   }
 }
 
 // Vertical
 .vertical {
-  height: auto;
+  block-size: auto;
   align-self: stretch;
 
   .line {
     display: block;
-    width: var(--fui-stroke-hairline, 1px);
-    height: 100%;
+    inline-size: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
+    block-size: 100%;
     background-color: var(--fui-border, $fui-border);
   }
 }
@@ -43,7 +44,7 @@
   &::after {
     content: "";
     flex: 1;
-    height: var(--fui-stroke-hairline, 1px);
+    block-size: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     background-color: var(--fui-border, $fui-border);
   }
 }
@@ -52,51 +53,34 @@
   @include typography.role("ui-compact");
 
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  text-transform: uppercase;
   white-space: nowrap;
 }
 
-// Spacing variants
-.spacingNone {
-  padding: 0;
+// Gap: breathing room on the cross axis of the rule.
+.gapNone {
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
-.spacingSm {
-  &.horizontal {
-    padding-block: layout.gap("sm");
-  }
-
-  &.vertical {
-    padding-inline: layout.gap("sm");
-  }
-}
-
-.spacingMd {
-  &.horizontal {
-    padding-block: layout.gap("md");
-  }
-
-  &.vertical {
-    padding-inline: layout.gap("md");
-  }
-}
-
-.spacingLg {
-  &.horizontal {
-    padding-block: layout.gap("lg");
-  }
+@each $gap, $class in ("xs": "gapXs", "sm": "gapSm", "md": "gapMd", "lg": "gapLg", "xl": "gapXl") {
+  .#{$class} {
+    &.horizontal,
+    &.withLabel {
+      padding-block: layout.gap($gap);
+    }
 
-  &.vertical {
-    padding-inline: layout.gap("lg");
+    &.vertical {
+      padding-inline: layout.gap($gap);
+    }
   }
 }
 
-// Soft variant (lighter color)
+// Soft: half-weight rule for quieter breaks. Shares the disabled opacity step
+// (0.5) — there is no dedicated soft-rule token yet.
 .soft {
-  opacity: 0.5;
+  opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
 
   &.withLabel::before,
   &.withLabel::after {
-    opacity: 0.5;
+    opacity: var(--fui-opacity-disabled, #{$fui-opacity-disabled});
   }
 }