@womp/kookie-ui 0.16.0 → 0.17.0

package/src/components/notice.tsx

@@ -40,8 +40,6 @@ interface StripProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'
    * fact the words don't already give, such as `red` for something that stops the next step.
    */
   color?: NoticeColor;
-  /** `translucent` when content scrolls behind the strip. */
-  material?: 'solid' | 'translucent';
   /** The message. */
   children: React.ReactNode;
 }
@@ -73,7 +71,7 @@ interface ConfirmationProps extends StripProps {
 }
 
 const Strip = React.forwardRef<HTMLDivElement, StripProps & { kind: 'notice' | 'confirmation'; trailing: React.ReactNode; leading?: React.ReactNode }>(
-  ({ kind, size = '2', color = 'gray', material, className, children, trailing, leading, ...props }, forwardedRef) => (
+  ({ kind, size = '2', color = 'gray', className, children, trailing, leading, ...props }, forwardedRef) => (
     <div
       role="status"
       aria-live="polite"
@@ -82,7 +80,6 @@ const Strip = React.forwardRef<HTMLDivElement, StripProps & { kind: 'notice' | '
       className={classNames('rt-NoticeRoot', `rt-r-size-${size}`, className)}
       data-kind={kind}
       data-accent-color={color}
-      data-material={material}
     >
       {leading ? (
         <span className="rt-NoticeIcon" aria-hidden>

package/src/components/popover.css

@@ -1,14 +1,5 @@
 .rt-PopoverContent {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
-  /* Base state: use --color-panel which adapts to theme context */
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+  background-color: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
@@ -27,19 +18,6 @@
 
   transform-origin: var(--radix-popover-content-transform-origin);
 
-  /* Reduced motion support */
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--color-panel-solid);
-    backdrop-filter: none;
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: var(--color-panel-translucent);
-    backdrop-filter: var(--backdrop-filter-panel);
-  }
-
   /* Toolbar integration */
   &:where([data-has-toolbar]) {
     /* When toolbar is present, top padding equals toolbar height */
@@ -56,15 +34,15 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  column-gap: var(--space-1);
+  column-gap: var(--space-2);
   padding: var(--popover-toolbar-padding);
-  background-color: var(--color-panel);
+  background-color: var(--color-panel-solid);
 }
 
 .rt-PopoverToolbarSection {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .rt-PopoverToolbarLeft { justify-self: start; }
@@ -89,24 +67,24 @@
 @breakpoints {
   .rt-PopoverContent {
     &:where(.rt-r-size-1) {
-      --popover-content-padding: var(--space-3);
-      --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-2)));
-    }
-    &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-4);
-      --popover-toolbar-padding: var(--space-2);
-      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-3)));
+      --popover-toolbar-padding: var(--space-3);
+      border-radius: min(var(--radius-surface-3), calc(var(--radius-surface-1) + var(--space-3)));
     }
-    &:where(.rt-r-size-3) {
+    &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-5);
       --popover-toolbar-padding: var(--space-3);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-4)));
+      border-radius: min(var(--radius-surface-4), calc(var(--radius-surface-2) + var(--space-4)));
     }
-    &:where(.rt-r-size-4) {
+    &:where(.rt-r-size-3) {
       --popover-content-padding: var(--space-6);
       --popover-toolbar-padding: var(--space-4);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-5)));
+      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-3) + var(--space-5)));
+    }
+    &:where(.rt-r-size-4) {
+      --popover-content-padding: var(--space-7);
+      --popover-toolbar-padding: var(--space-5);
+      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-4) + var(--space-6)));
     }
   }
 }

package/src/components/popover.props.tsx

@@ -5,7 +5,6 @@ import { widthPropDefs } from '../props/width.props.js';
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
 const contentSizes = ['1', '2', '3', '4'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const popoverContentPropDefs = {
   ...asChildPropDef,
@@ -16,7 +15,6 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
@@ -26,7 +24,6 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 type PopoverContentOwnProps = GetPropDefTypes<

package/src/components/popover.tsx

@@ -6,7 +6,6 @@ import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
-import { useThemeContext } from './theme.js';
 
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -60,13 +59,10 @@ interface PopoverContentProps
 }
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
   (props, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       className,
       forceMount,
       container,
-      material: _material,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
 
@@ -108,7 +104,6 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             {...contentProps}
             ref={combinedRef}
             aria-labelledby={labelId}
-            data-material={resolvedMaterial}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>

package/src/components/progress.css

@@ -9,31 +9,7 @@
   height: var(--progress-height);
   border-radius: var(--progress-radius);
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
-
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 }
 
 .rt-ProgressIndicator {
@@ -126,23 +102,6 @@
   background-color: var(--gray-2);
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
@@ -153,20 +112,6 @@
 .rt-ProgressRoot:where(.rt-variant-soft) {
   background-color: var(--gray-3);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    background-color: var(--gray-3);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
@@ -178,20 +123,6 @@
   /* Base state: no background, just border */
   box-shadow: inset 0 0 0 1px var(--gray-6);
 
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
-  /* Component-level overrides */
-  &:where([data-material='solid']) {
-    box-shadow: inset 0 0 0 1px var(--gray-6);
-  }
-
-  &:where([data-material='translucent']) {
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-  }
-
   & :where(.rt-ProgressIndicator) {
     background-color: var(--accent-solid);
   }

package/src/components/radio-cards.css

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 
   & > * {
     /* Avoid unintentional drag interactions (e.g. on images) */
@@ -130,19 +130,19 @@
 @breakpoints {
   .rt-RadioCardsItem {
     &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
     &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
     }
   }
 }

package/src/components/radio-cards.props.tsx

@@ -8,20 +8,17 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4', '5'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
-const materials = ['solid', 'translucent'] as const;
 
 const radioCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/radio-cards.tsx

@@ -6,7 +6,6 @@ import { radioCardsRootPropDefs } from './radio-cards.props.js';
 import { Grid } from './grid.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
-import { useThemeContext } from './theme.js';
 
 import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -35,12 +34,9 @@ interface RadioCardsRootProps
     RadioCardsRootOwnProps {}
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       className,
       color,
-      material: _material,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
     return (
@@ -48,7 +44,6 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
         <Grid asChild>
           <RadioGroupPrimitive.Root
             data-accent-color={color}
-            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

package/src/components/radio-group.css

@@ -1,7 +1,7 @@
 .rt-RadioGroupRoot {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }
 
 .rt-RadioGroupItem {

package/src/components/schemas/base-button.schema.ts

@@ -118,15 +118,6 @@ export const BaseButtonSchema = z
       .default(false)
       .describe('Loading state that shows a spinner and disables interaction'),
 
-    /**
-     * Material type for visual rendering and depth effects
-     * Controls how the button renders its visual elements
-     */
-    material: z
-      .enum(['solid', 'translucent'])
-      .optional()
-      .describe('Material type for visual rendering and depth effects'),
-
     /**
      * Flush mode that removes visual padding for seamless text integration
      * Only effective with ghost variant

package/src/components/scroll-area.css

@@ -1,12 +1,12 @@
 .radix-themes {
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-2);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-2);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-2);
 }
 
 .rt-ScrollAreaRoot {
@@ -73,8 +73,8 @@
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
-    min-width: var(--space-4);
-    min-height: var(--space-4);
+    min-width: var(--space-5);
+    min-height: var(--space-5);
   }
 }
 
@@ -87,15 +87,15 @@
 @breakpoints {
   .rt-ScrollAreaScrollbar {
     &:where(.rt-r-size-1) {
-      --scrollarea-scrollbar-size: var(--space-1);
+      --scrollarea-scrollbar-size: var(--space-2);
       --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-2) {
-      --scrollarea-scrollbar-size: var(--space-2);
+      --scrollarea-scrollbar-size: var(--space-3);
       --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-3) {
-      --scrollarea-scrollbar-size: var(--space-3);
+      --scrollarea-scrollbar-size: var(--space-4);
       --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
   }
@@ -166,7 +166,7 @@
 
 :root,
 .radix-themes {
-  --scroll-fade-size: var(--space-6);
+  --scroll-fade-size: var(--space-7);
 }
 
 /*

package/src/components/section.css

@@ -6,20 +6,20 @@
 @breakpoints {
   .rt-Section {
     &:where(.rt-r-size-1) {
-      padding-top: var(--space-5);
-      padding-bottom: var(--space-5);
+      padding-top: var(--space-6);
+      padding-bottom: var(--space-6);
     }
     &:where(.rt-r-size-2) {
-      padding-top: var(--space-7);
-      padding-bottom: var(--space-7);
+      padding-top: var(--space-8);
+      padding-bottom: var(--space-8);
     }
     &:where(.rt-r-size-3) {
-      padding-top: var(--space-9);
-      padding-bottom: var(--space-9);
+      padding-top: var(--space-10);
+      padding-bottom: var(--space-10);
     }
     &:where(.rt-r-size-4) {
-      padding-top: calc(80px * var(--scaling));
-      padding-bottom: calc(80px * var(--scaling));
+      padding-top: calc(80px * var(--scale));
+      padding-bottom: calc(80px * var(--scale));
     }
   }
 }

package/src/components/segmented-control.css

@@ -21,34 +21,6 @@
 
   /* Create a new stacking context */
   isolation: isolate;
-
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Disable backdrop-filter when inside elements that already have backdrop-filter */
-  :where(.rt-PopoverContent, .rt-BaseDialogContent, .rt-BaseMenuContent, .rt-DropdownMenuContent, .rt-ContextMenuContent, .rt-AlertDialogContent, .rt-HoverCardContent, .rt-TooltipContent, .rt-Card) & {
-    backdrop-filter: none !important;
-  }
 }
 
 .rt-SegmentedControlRoot:where([data-disabled]) {
@@ -160,8 +132,8 @@
   z-index: -1;
 
   /* Horizontal orientation (default) */
-  margin-top: calc(var(--space-1) * 0.75); /* 3px - slightly smaller than space-1 */
-  margin-bottom: calc(var(--space-1) * 0.75); /* 3px */
+  margin-top: calc(var(--space-2) * 0.75); /* 3px - slightly smaller than space-1 */
+  margin-bottom: calc(var(--space-2) * 0.75); /* 3px */
   margin-left: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: var(--border-width-standard); /* 1px */
@@ -179,8 +151,8 @@
 
 /* Vertical orientation - separator */
 :where(.rt-r-orientation-vertical) .rt-SegmentedControlItemSeparator {
-  margin-left: calc(var(--space-1) * 0.75); /* 3px */
-  margin-right: calc(var(--space-1) * 0.75); /* 3px */
+  margin-left: calc(var(--space-2) * 0.75); /* 3px */
+  margin-right: calc(var(--space-2) * 0.75); /* 3px */
   margin-top: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   margin-bottom: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: auto;
@@ -410,8 +382,8 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
         gap: var(--component-gap-1);
 
         /* Icon sizing for size 1 */
@@ -441,8 +413,8 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-2);
         letter-spacing: var(--letter-spacing-2);
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
+        padding-left: var(--space-5);
+        padding-right: var(--space-5);
         gap: var(--component-gap-2);
 
         /* Icon sizing for size 2 */
@@ -472,8 +444,8 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
+        padding-left: var(--space-5);
+        padding-right: var(--space-5);
         gap: var(--component-gap-3);
 
         /* Icon sizing for size 3 */
@@ -503,8 +475,8 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-4);
         letter-spacing: var(--letter-spacing-4);
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
+        padding-left: var(--space-6);
+        padding-right: var(--space-6);
         gap: var(--component-gap-4);
 
         /* Icon sizing for size 4 */
@@ -525,22 +497,7 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-SegmentedControlRoot {
-  /* Base state: solid color for solid panels */
   background-color: var(--gray-3);
-
-  /* Theme-level translucent override */
-  :where([data-material='translucent']) & {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
-
-  /* Component-level overrides (higher specificity) */
-  &:where([data-material='solid']) {
-    background-color: var(--gray-3);
-  }
-
-  &:where([data-material='translucent']) {
-    background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -549,7 +506,7 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-/* 
+/*
  * Icon-only items get minimum square dimensions matching the height,
  * but can grow to fill available space while keeping icons centered.
  * This section is placed after size definitions for proper specificity.
@@ -579,33 +536,33 @@
 
 /* Vertical icon-only root width (explicit since nested :has() in @breakpoints may not work) */
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-1):has([data-icon-only]) {
-  width: var(--space-5);
+  width: var(--space-6);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
-  width: var(--space-6);
+  width: var(--space-7);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
-  width: var(--space-7);
+  width: var(--space-8);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
-  width: var(--space-8);
+  width: var(--space-9);
 }
 
 /* Vertical text items need vertical padding */
 :where(.rt-r-orientation-vertical):where(.rt-r-size-1) .rt-SegmentedControlItemLabel {
-  padding-top: var(--space-1);
-  padding-bottom: var(--space-1);
-}
-:where(.rt-r-orientation-vertical):where(.rt-r-size-2) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
-:where(.rt-r-orientation-vertical):where(.rt-r-size-3) .rt-SegmentedControlItemLabel {
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
+:where(.rt-r-orientation-vertical):where(.rt-r-size-2) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
 }
-:where(.rt-r-orientation-vertical):where(.rt-r-size-4) .rt-SegmentedControlItemLabel {
+:where(.rt-r-orientation-vertical):where(.rt-r-size-3) .rt-SegmentedControlItemLabel {
   padding-top: var(--space-3);
   padding-bottom: var(--space-3);
 }
+:where(.rt-r-orientation-vertical):where(.rt-r-size-4) .rt-SegmentedControlItemLabel {
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+}
 

package/src/components/segmented-control.props.tsx

@@ -15,13 +15,11 @@ const segmentedControlRootPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  material: { type: 'enum', values: ['solid', 'translucent'] },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
   orientation: PropDef<(typeof orientations)[number]>;
-  material: PropDef<'solid' | 'translucent'>;
 };
 
 export { segmentedControlRootPropDefs };