@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Stack/index.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
-import styles from './Stack.module.scss';
+import * as React from "react";
+import { resolveLayoutGap } from "../../utils/layout-spacing";
+import styles from "./Stack.module.scss";
 
-type Direction = 'row' | 'column';
-type GapToken = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type Direction = "row" | "column";
+type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 /** Gap accepts string tokens or numbers (1-8) mapping to the spacing scale */
 type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 type Gap = GapToken | GapScale;
@@ -39,7 +40,10 @@ export interface ResponsiveGap {
  * Flexbox layout component for vertical or horizontal stacking with consistent spacing.
  * @see https://usefragments.com/components/stack
  */
-export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'style' | 'className'> {
+export interface StackProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "style" | "className"
+> {
   children: React.ReactNode;
   /**
    * Stack direction.
@@ -53,8 +57,8 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
    * - An object for responsive gap: `{ base: "sm", md: "lg" }`
    */
   gap?: Gap | ResponsiveGap;
-  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  justify?: 'start' | 'center' | 'end' | 'between';
+  align?: "start" | "center" | "end" | "stretch" | "baseline";
+  justify?: "start" | "center" | "end" | "between";
   wrap?: boolean;
   /**
    * Render a separator between each child.
@@ -62,145 +66,171 @@ export interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, 'chi
    * - A ReactNode renders custom content between children
    */
   separator?: boolean | React.ReactNode;
-  as?: 'div' | 'section' | 'nav' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'ul' | 'ol';
+  as?: "div" | "section" | "nav" | "article" | "aside" | "header" | "footer" | "main" | "ul" | "ol";
   className?: string;
   style?: React.CSSProperties;
 }
 
 function isResponsiveDirection(
-  direction: StackProps['direction']
+  direction: StackProps["direction"]
 ): direction is ResponsiveDirection {
-  return typeof direction === 'object' && direction !== null;
+  return typeof direction === "object" && direction !== null;
 }
 
-function isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {
-  return typeof gap === 'object' && gap !== null;
+function isResponsiveGap(gap: StackProps["gap"]): gap is ResponsiveGap {
+  return typeof gap === "object" && gap !== null;
 }
 
-function isNumericGap(gap: StackProps['gap']): gap is GapScale {
-  return typeof gap === 'number';
+function isNumericGap(gap: StackProps["gap"]): gap is GapScale {
+  return typeof gap === "number";
 }
 
-const StackRoot = React.forwardRef<HTMLElement, StackProps>(
-  function Stack(
-    {
-      children,
-      direction = 'column',
-      gap = 'md',
-      align,
-      justify,
-      wrap = false,
-      separator,
-      as: Component = 'div',
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    let directionClass: string;
-    let gapClass: string | false;
-    let inlineStyle: React.CSSProperties | undefined;
-
-    // Handle responsive direction
-    if (isResponsiveDirection(direction)) {
-      directionClass = styles.directionResponsive;
-      const vars: Record<string, string> = {};
-      if (direction.base) vars['--fui-stack-direction'] = direction.base;
-      if (direction.sm) vars['--fui-stack-direction-sm'] = direction.sm;
-      if (direction.md) vars['--fui-stack-direction-md'] = direction.md;
-      if (direction.lg) vars['--fui-stack-direction-lg'] = direction.lg;
-      if (direction.xl) vars['--fui-stack-direction-xl'] = direction.xl;
-      inlineStyle = vars as unknown as React.CSSProperties;
-    } else {
-      directionClass = styles[direction];
-    }
+const StackRoot = React.forwardRef<HTMLElement, StackProps>(function Stack(
+  {
+    children,
+    direction = "column",
+    gap = "md",
+    align,
+    justify,
+    wrap = false,
+    separator,
+    as: Component = "div",
+    className,
+    style,
+    ...htmlProps
+  },
+  ref
+) {
+  let directionClass: string;
+  let gapClass: string | false;
+  let inlineStyle: React.CSSProperties | undefined;
+
+  // Handle responsive direction
+  if (isResponsiveDirection(direction)) {
+    directionClass = styles.directionResponsive;
+    const vars: Record<string, string> = {};
+    const baseDirection = direction.base ?? "column";
+    const smDirection = direction.sm ?? baseDirection;
+    const mdDirection = direction.md ?? smDirection;
+    const lgDirection = direction.lg ?? mdDirection;
+    const xlDirection = direction.xl ?? lgDirection;
+    vars["--fui-stack-direction"] = baseDirection;
+    vars["--fui-stack-direction-sm"] = smDirection;
+    vars["--fui-stack-direction-md"] = mdDirection;
+    vars["--fui-stack-direction-lg"] = lgDirection;
+    vars["--fui-stack-direction-xl"] = xlDirection;
+    inlineStyle = vars as unknown as React.CSSProperties;
+  } else {
+    directionClass = styles[direction];
+  }
 
-    // Handle responsive gap
-    if (isResponsiveGap(gap)) {
-      gapClass = styles.gapResponsive;
-      const gapVars: Record<string, string> = {};
-      if (gap.base && gap.base !== 'none') gapVars['--fui-stack-gap'] = `var(--fui-space-${gapToSpace(gap.base)})`;
-      if (gap.sm && gap.sm !== 'none') gapVars['--fui-stack-gap-sm'] = `var(--fui-space-${gapToSpace(gap.sm)})`;
-      if (gap.md && gap.md !== 'none') gapVars['--fui-stack-gap-md'] = `var(--fui-space-${gapToSpace(gap.md)})`;
-      if (gap.lg && gap.lg !== 'none') gapVars['--fui-stack-gap-lg'] = `var(--fui-space-${gapToSpace(gap.lg)})`;
-      if (gap.xl && gap.xl !== 'none') gapVars['--fui-stack-gap-xl'] = `var(--fui-space-${gapToSpace(gap.xl)})`;
-      inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;
-    } else if (isNumericGap(gap)) {
-      // Numeric gap: maps to space scale tokens (e.g. gap={2} → var(--fui-space-2))
-      gapClass = false;
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;
-    } else {
-      gapClass = gap !== 'none' && styles[`gap-${gap}`];
-    }
+  // Handle responsive gap
+  if (isResponsiveGap(gap)) {
+    gapClass = styles.gapResponsive;
+    const gapVars: Record<string, string> = {};
+    if (gap.base) gapVars["--fui-stack-gap"] = resolveLayoutGap(gap.base);
+    if (gap.sm) gapVars["--fui-stack-gap-sm"] = resolveLayoutGap(gap.sm);
+    if (gap.md) gapVars["--fui-stack-gap-md"] = resolveLayoutGap(gap.md);
+    if (gap.lg) gapVars["--fui-stack-gap-lg"] = resolveLayoutGap(gap.lg);
+    if (gap.xl) gapVars["--fui-stack-gap-xl"] = resolveLayoutGap(gap.xl);
+    inlineStyle = { ...inlineStyle, ...gapVars } as React.CSSProperties;
+  } else if (isNumericGap(gap)) {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": resolveLayoutGap(gap),
+    } as React.CSSProperties;
+  } else {
+    gapClass = false;
+    inlineStyle = {
+      ...inlineStyle,
+      "--fui-stack-gap": resolveLayoutGap(gap),
+    } as React.CSSProperties;
+  }
 
-    const classes = [
-      styles.stack,
-      directionClass,
-      gapClass,
-      align && styles[`align-${align}`],
-      justify && styles[`justify-${justify}`],
-      wrap && styles.wrap,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-
-    // Interleave separator between children when provided
-    let content: React.ReactNode = children;
-    if (separator) {
-      const validChildren = React.Children.toArray(children).filter(Boolean);
-      if (validChildren.length > 1) {
-        const resolvedDir = isResponsiveDirection(direction) ? (direction.base ?? 'column') : direction;
-        const separatorEl = separator === true ? (
+  const classes = [
+    styles.stack,
+    directionClass,
+    gapClass,
+    align && styles[`align-${align}`],
+    justify && styles[`justify-${justify}`],
+    wrap && styles.wrap,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+
+  // Interleave separator between children when provided
+  let content: React.ReactNode = children;
+  if (separator) {
+    const validChildren = React.Children.toArray(children).filter(Boolean);
+    if (validChildren.length > 1) {
+      const responsiveDirection = isResponsiveDirection(direction);
+      const resolvedDir = responsiveDirection ? (direction.base ?? "column") : direction;
+      const separatorEl =
+        separator === true ? (
           <div
             className={styles.separator}
-            data-orientation={resolvedDir === 'row' ? 'vertical' : 'horizontal'}
-            role="separator"
+            data-orientation={resolvedDir === "row" ? "vertical" : "horizontal"}
+            role={responsiveDirection ? undefined : "separator"}
+            aria-hidden={responsiveDirection ? true : undefined}
           />
-        ) : separator;
-
-        const items: React.ReactNode[] = [];
-        validChildren.forEach((child, idx) => {
-          items.push(child);
-          if (idx < validChildren.length - 1) {
-            const childKey = React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
-            items.push(
-              <React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>
-            );
-          }
-        });
-        content = items;
-      }
+        ) : (
+          separator
+        );
+
+      const items: React.ReactNode[] = [];
+      validChildren.forEach((child, idx) => {
+        items.push(child);
+        if (idx < validChildren.length - 1) {
+          const childKey =
+            React.isValidElement(child) && child.key != null ? child.key : `idx-${idx}`;
+          items.push(<React.Fragment key={`sep-${childKey}`}>{separatorEl}</React.Fragment>);
+        }
+      });
+      content = items;
     }
-
-    return (
-      <Component
-        {...htmlProps}
-        ref={ref as React.Ref<never>}
-        className={classes}
-        style={mergedStyle}
-      >
-        {content}
-      </Component>
-    );
   }
-);
-
-// Map gap prop values to space variable numbers
-function gapToSpace(gap: GapToken): string {
-  const map: Record<GapToken, string> = {
-    none: '0',
-    xs: '1',
-    sm: '2',
-    md: '3',
-    lg: '4',
-    xl: '6',
-  };
-  return map[gap];
-}
+
+  return (
+    <Component
+      {...htmlProps}
+      ref={ref as React.Ref<never>}
+      className={classes}
+      style={mergedStyle}
+      data-direction-base={
+        isResponsiveDirection(direction) ? (direction.base ?? "column") : direction
+      }
+      data-direction-sm={
+        isResponsiveDirection(direction) ? (direction.sm ?? direction.base ?? "column") : direction
+      }
+      data-direction-md={
+        isResponsiveDirection(direction)
+          ? (direction.md ?? direction.sm ?? direction.base ?? "column")
+          : direction
+      }
+      data-direction-lg={
+        isResponsiveDirection(direction)
+          ? (direction.lg ?? direction.md ?? direction.sm ?? direction.base ?? "column")
+          : direction
+      }
+      data-direction-xl={
+        isResponsiveDirection(direction)
+          ? (direction.xl ??
+            direction.lg ??
+            direction.md ??
+            direction.sm ??
+            direction.base ??
+            "column")
+          : direction
+      }
+    >
+      {content}
+    </Component>
+  );
+});
 
 export const Stack = Object.assign(StackRoot, {
   Root: StackRoot,

package/src/components/{Toggle/Toggle.contract.json → Switch/Switch.contract.json}

@@ -11,7 +11,7 @@
     "preference"
   ],
   "status": "stable",
-  "sourcePath": "src/components/Toggle/index.tsx",
+  "sourcePath": "src/components/Switch/index.tsx",
   "exportName": "Switch",
   "propsSummary": [
     "checked: boolean",

package/src/components/{Toggle/Toggle.module.scss → Switch/Switch.module.scss}

@@ -1,16 +1,9 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// Local component tokens (web-proportioned: ~1.8:1 width:height ratio)
-$fui-toggle-width-sm: 1.857rem !default; // 26px
-$fui-toggle-width-md: 2.571rem !default; // 36px
-$fui-toggle-width-lg: 3.286rem !default; // 46px
-$fui-toggle-height-sm: 1.143rem !default; // 16px
-$fui-toggle-height-md: 1.429rem !default; // 20px
-$fui-toggle-height-lg: 1.857rem !default; // 26px
-$fui-toggle-thumb-sm: 0.857rem !default; // 12px
-$fui-toggle-thumb-md: 1.143rem !default; // 16px
-$fui-toggle-thumb-offset: 2px !default;
+@use "../../recipes/boolean-range" as boolean;
+@use "../../recipes/field" as field;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 .root {
   --_switch-off-bg: light-dark(
@@ -38,35 +31,38 @@ $fui-toggle-thumb-offset: 2px !default;
     color-mix(in srgb, var(--fui-border-strong) 45%, var(--fui-text-primary) 55%)
   );
 
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
+  @include target.hit-area("compact");
+
+  display: grid;
+  align-items: start;
   cursor: pointer;
-  font-family: var(--fui-font-sans, $fui-font-sans);
   -webkit-tap-highlight-color: transparent;
 
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+  &[data-size="sm"] {
+    grid-template-columns: boolean.switch-inline-size("sm") minmax(0, 1fr);
+    column-gap: boolean.label-gap("sm");
+    @include typography.role("ui-compact");
   }
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: max(100%, var(--fui-target-size-min, #{$fui-target-size-min}));
-    height: var(--fui-target-size-min, $fui-target-size-min);
-    transform: translateY(-50%);
+  &[data-size="md"] {
+    grid-template-columns: boolean.switch-inline-size("md") minmax(0, 1fr);
+    column-gap: boolean.label-gap("md");
+    @include typography.role("ui-standard");
   }
-}
 
-.rootWithHelper {
-  align-items: flex-start;
+  &[data-size="lg"] {
+    grid-template-columns: boolean.switch-inline-size("lg") minmax(0, 1fr);
+    column-gap: boolean.label-gap("lg");
+    @include typography.role("ui-standard");
+  }
 
-  .track {
-    margin-top: var(--fui-space-0-5, $fui-space-0-5);
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  @media (pointer: coarse) {
+    --_fui-target-hit-size: #{target.hit-size("touch")};
   }
 }
 
@@ -78,7 +74,7 @@ $fui-toggle-thumb-offset: 2px !default;
   flex-shrink: 0;
   box-sizing: border-box;
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  border: 1px solid var(--_switch-off-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-off-border);
   background-color: var(--_switch-off-bg);
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
@@ -111,57 +107,46 @@ $fui-toggle-thumb-offset: 2px !default;
   }
 
   .root:focus-visible & {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 }
 
-// Sm: 40×24
 .trackSm {
-  width: var(--fui-toggle-width-sm, $fui-toggle-width-sm);
-  height: var(--fui-toggle-height-sm, $fui-toggle-height-sm);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-sm, #{$fui-toggle-width-sm}) - var(--_toggle-thumb-size) - 4px
+  @include boolean.switch-track("sm");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-compact")} - #{boolean.switch-block-size("sm")}) / 2
   );
 }
 
-// Lg: 60×36
 .trackLg {
-  width: var(--fui-toggle-width-lg, $fui-toggle-width-lg);
-  height: var(--fui-toggle-height-lg, $fui-toggle-height-lg);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-lg, #{$fui-toggle-height-lg}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-lg, #{$fui-toggle-width-lg}) - var(--_toggle-thumb-size) - 4px
+  @include boolean.switch-track("lg");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-standard")} - #{boolean.switch-block-size("lg")}) / 2
   );
 }
 
-// Md: 51×31 (iOS standard)
 .trackMd {
-  width: var(--fui-toggle-width-md, $fui-toggle-width-md);
-  height: var(--fui-toggle-height-md, $fui-toggle-height-md);
-  --_toggle-thumb-size: calc(var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - 4px);
-  --_toggle-inset: 1px;
-  --_toggle-translate: calc(
-    var(--fui-toggle-width-md, #{$fui-toggle-width-md}) - var(--_toggle-thumb-size) - 4px
+  @include boolean.switch-track("md");
+  margin-block-start: calc(
+    (#{typography.line-height("ui-standard")} - #{boolean.switch-block-size("md")}) / 2
   );
 }
 
 .thumb {
   position: absolute;
-  top: var(--_toggle-inset, $fui-toggle-thumb-offset);
-  left: var(--_toggle-inset, $fui-toggle-thumb-offset);
+  inset-block-start: 50%;
+  inset-inline-start: var(--_fui-switch-inset);
   box-sizing: border-box;
-  width: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
-  height: var(--_toggle-thumb-size, $fui-toggle-thumb-md);
+  width: var(--_fui-switch-thumb-size);
+  height: var(--_fui-switch-thumb-size);
   border-radius: 50%;
   pointer-events: none;
   background-color: var(--_switch-thumb-bg);
-  border: 1px solid var(--_switch-thumb-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-thumb-border);
   box-shadow:
     0 1px 1px color-mix(in srgb, black 18%, transparent),
     inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
+  transform: translateY(-50%);
   transition:
     transform var(--fui-transition-normal, $fui-transition-normal),
     background-color var(--fui-transition-normal, $fui-transition-normal),
@@ -169,7 +154,7 @@ $fui-toggle-thumb-offset: 2px !default;
     box-shadow var(--fui-transition-fast, $fui-transition-fast);
 
   .root[data-checked] & {
-    transform: translateX(var(--_toggle-translate, 0));
+    transform: translate(var(--_fui-switch-travel), -50%);
     background-color: var(--fui-button-primary-color, #fff);
     border-color: color-mix(
       in srgb,
@@ -178,41 +163,27 @@ $fui-toggle-thumb-offset: 2px !default;
     );
   }
 
+  .root:dir(rtl)[data-checked] & {
+    transform: translate(calc(-1 * var(--_fui-switch-travel)), -50%);
+  }
+
   .root:active:not([data-disabled]) & {
     box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   }
 }
 
 .content {
-  flex: 1;
+  min-inline-size: 0;
 }
 
 .label {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
   user-select: none;
 }
 
-.labelSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.labelLg {
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
-}
-
 .helper {
   display: block;
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-  margin-top: var(--fui-space-1, $fui-space-1);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
-}
-
-.helperSm {
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  @include field.helper;
 }
 
 // ============================================
@@ -221,7 +192,9 @@ $fui-toggle-thumb-offset: 2px !default;
 
 @media (prefers-contrast: more) {
   .track {
-    border: 2px solid var(--fui-text-primary, $fui-text-primary);
+    border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 
   .root[data-checked] .track {

package/src/components/{Toggle → Switch}/index.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Switch as BaseSwitch } from "@base-ui/react/switch";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { mergeAriaIds } from "../../utils/aria";
-import styles from "./Toggle.module.scss";
+import styles from "./Switch.module.scss";
 
 /**
  * Binary on/off switch for settings and preferences.
@@ -40,8 +40,6 @@ export interface SwitchProps {
   "aria-describedby"?: string;
 }
 
-export type ToggleProps = SwitchProps;
-
 const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
   {
     checked,
@@ -80,19 +78,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 
   const thumbClasses = styles.thumb;
 
-  const labelClasses = [
-    styles.label,
-    size === "sm" && styles.labelSm,
-    size === "lg" && styles.labelLg,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const helperClasses = [styles.helper, size === "sm" && styles.helperSm].filter(Boolean).join(" ");
-
-  const rootClasses = [styles.root, resolvedHelperText && styles.rootWithHelper, className]
-    .filter(Boolean)
-    .join(" ");
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
 
   return (
     <BaseSwitch.Root
@@ -110,6 +96,7 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
       uncheckedValue={uncheckedValue}
       inputRef={inputRef}
       className={rootClasses}
+      data-size={size}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={mergeAriaIds(ariaDescribedBy, helperId)}
@@ -120,9 +107,9 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 
       {(label || resolvedHelperText) && (
         <div className={styles.content}>
-          {label && <span className={labelClasses}>{label}</span>}
+          {label && <span className={styles.label}>{label}</span>}
           {resolvedHelperText && (
-            <span id={helperId} className={helperClasses}>
+            <span id={helperId} className={styles.helper}>
               {resolvedHelperText}
             </span>
           )}
@@ -135,6 +122,3 @@ const SwitchRoot = React.forwardRef<HTMLButtonElement, SwitchProps>(function Swi
 export const Switch = Object.assign(SwitchRoot, {
   Root: SwitchRoot,
 });
-
-/** @deprecated Use `Switch` instead. */
-export const Toggle = Switch;