@womp/kookie-ui 0.13.2 → 0.14.0

package/src/components/kbd.css

@@ -15,12 +15,12 @@
   user-select: none;
 
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
 
   min-width: 1.75em;
   box-sizing: border-box;
-  word-spacing: var(--classic-word-spacing);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  word-spacing: var(--raised-word-spacing);
+  border-radius: var(--radius-pill-2);
   
   /* Default sizing (size 2) */
   font-size: var(--font-size-1);
@@ -40,23 +40,23 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-Kbd:where(.rt-variant-classic) {
+.rt-Kbd:where(.rt-variant-raised) {
   background-color: var(--gray-1);
   /* prettier-ignore */
   box-shadow:
-    inset 0 var(--classic-border-width) var(--white-a12),
-    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
-    0 0 0 var(--classic-border-width) var(--gray-a5),
-    0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+    inset 0 var(--raised-border-width) var(--white-a12),
+    inset 0 calc(-1 * var(--raised-border-width)) var(--gray-a6),
+    0 0 0 var(--raised-border-width) var(--gray-a5),
+    0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
 
   :where(.dark, .dark-theme) &,
   :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
     /* prettier-ignore */
     box-shadow:
-      inset 0 var(--classic-border-width) var(--gray-a11),
-      inset 0 calc(-1 * var(--classic-border-width)) var(--black-a11),
-      0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+      inset 0 var(--raised-border-width) var(--gray-a11),
+      inset 0 calc(-1 * var(--raised-border-width)) var(--black-a11),
+      0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+      0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12);
   }
   transition: box-shadow 120ms, background-color 120ms;
 
@@ -67,16 +67,16 @@
           background-color: var(--color-background);
           /* prettier-ignore */
           box-shadow:
-            0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7),
-            0 0 0 var(--classic-border-width) var(--gray-a5);
+            0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7),
+            0 0 0 var(--raised-border-width) var(--gray-a5);
 
           :where(.dark, .dark-theme) &,
           :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
             /* prettier-ignore */
             box-shadow:
-              0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-              0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
-              0 0 0 var(--classic-border-width) var(--gray-a5);
+              0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+              0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12),
+              0 0 0 var(--raised-border-width) var(--gray-a5);
           }
         }
       }
@@ -85,25 +85,25 @@
       background-color: var(--color-background);
       /* prettier-ignore */
       box-shadow:
-        inset 0 var(--classic-border-width) var(--white-a12),
-        0 0 0 var(--classic-border-width) var(--gray-a5),
-        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+        inset 0 var(--raised-border-width) var(--white-a12),
+        0 0 0 var(--raised-border-width) var(--gray-a5),
+        0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--gray-a7);
 
       :where(.dark, .dark-theme) &,
       :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
         /* prettier-ignore */
         box-shadow:
-          inset 0 var(--classic-border-width) var(--gray-a11),
-          0 0 0 var(--classic-border-width-thick) var(--gray-a7),
-          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+          inset 0 var(--raised-border-width) var(--gray-a11),
+          0 0 0 var(--raised-border-width-thick) var(--gray-a7),
+          0 var(--raised-shadow-offset-y) var(--raised-shadow-blur-small) var(--black-a12);
       }
     }
     &:where(:active:not([data-state='open'])) {
-      padding-top: var(--classic-border-width);
+      padding-top: var(--raised-border-width);
       padding-bottom: 0;
       transition-duration: 40ms, 40ms;
       background-color: var(--gray-2);
-      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
+      box-shadow: inset 0 var(--raised-border-width) var(--black-a3), 0 0 0 var(--raised-border-width) var(--gray-a7);
     }
     &:where(:focus-visible) {
       outline: 2px solid var(--focus-8);
@@ -145,63 +145,63 @@
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
       padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-1) var(--space-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-1) calc(var(--space-2) * 1.25);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-4) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-5) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       padding: calc(var(--space-1) * 1.5) var(--space-3);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-6) {
       font-size: var(--font-size-5);
       line-height: var(--line-height-5);
       letter-spacing: var(--letter-spacing-5);
       padding: calc(var(--space-1) * 1.75) calc(var(--space-3) * 1.25);
-      border-radius: max(var(--radius-4), var(--radius-full));
+      border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-7) {
       font-size: var(--font-size-6);
       line-height: var(--line-height-6);
       letter-spacing: var(--letter-spacing-6);
       padding: var(--space-2) calc(var(--space-3) * 1.5);
-      border-radius: max(var(--radius-4), var(--radius-full));
+      border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-8) {
       font-size: var(--font-size-7);
       line-height: var(--line-height-7);
       letter-spacing: var(--letter-spacing-7);
       padding: calc(var(--space-2) * 1.25) var(--space-4);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      border-radius: var(--radius-pill-5);
     }
     &:where(.rt-r-size-9) {
       font-size: var(--font-size-8);
       line-height: var(--line-height-8);
       letter-spacing: var(--letter-spacing-8);
       padding: calc(var(--space-2) * 1.5) calc(var(--space-4) * 1.25);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      border-radius: var(--radius-pill-5);
     }
   }
 }

package/src/components/kbd.props.tsx

@@ -1,9 +1,10 @@
+import { parseVariant } from '../helpers/parse-variant.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
-const variants = ['classic', 'soft'] as const;
+const variants = ['raised', 'soft', 'classic'] as const;
 
 const kbdPropDefs = {
   ...asChildPropDef,
@@ -17,7 +18,8 @@ const kbdPropDefs = {
     type: 'enum',
     className: 'rt-variant',
     values: variants,
-    default: 'classic',
+    default: 'raised',
+    parseValue: parseVariant,
   },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/navbar.css

@@ -51,6 +51,10 @@
   padding: var(--space-4) var(--space-5);
 }
 
+.rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
+  padding: var(--space-5) var(--space-6);
+}
+
 /* Slot overflow handling */
 .rt-NavbarLogo,
 .rt-NavbarActions {

package/src/components/navbar.props.tsx

@@ -1,7 +1,7 @@
 import type { PropDef } from '../props/prop-def.js';
 
 const positions = ['static', 'fixed', 'sticky'] as const;
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 
 const navbarRootPropDefs = {
   position: {

package/src/components/popover.props.tsx

@@ -16,6 +16,8 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
@@ -26,6 +28,7 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 

package/src/components/popover.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
@@ -61,11 +62,13 @@ interface PopoverContentProps
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       className,
       forceMount,
       container,
+      material: _material,
       panelBackground: _,
       ...contentProps
     } = extractProps(props, popoverContentPropDefs);
@@ -109,6 +112,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             ref={combinedRef}
             aria-labelledby={labelId}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>

package/src/components/progress.css

@@ -36,7 +36,6 @@
   }
 }
 
-
 .rt-ProgressIndicator {
   display: block;
   height: var(--position-full);
@@ -85,8 +84,6 @@
   }
 }
 
-
-
 /***************************************************************************************************
  *                                                                                                 *
  * SIZES                                                                                           *
@@ -115,31 +112,6 @@
       --progress-radius: var(--progress-slider-radius-4);
       --progress-indicator-radius: var(--progress-slider-radius-4);
     }
-    &:where(.rt-r-size-5) {
-      --progress-height: var(--progress-slider-height-5);
-      --progress-radius: var(--progress-slider-radius-5);
-      --progress-indicator-radius: var(--progress-slider-radius-5);
-    }
-    &:where(.rt-r-size-6) {
-      --progress-height: var(--progress-slider-height-6);
-      --progress-radius: var(--progress-slider-radius-6);
-      --progress-indicator-radius: var(--progress-slider-radius-6);
-    }
-    &:where(.rt-r-size-7) {
-      --progress-height: var(--progress-slider-height-7);
-      --progress-radius: var(--progress-slider-radius-7);
-      --progress-indicator-radius: var(--progress-slider-radius-7);
-    }
-    &:where(.rt-r-size-8) {
-      --progress-height: var(--progress-slider-height-8);
-      --progress-radius: var(--progress-slider-radius-8);
-      --progress-indicator-radius: var(--progress-slider-radius-8);
-    }
-    &:where(.rt-r-size-9) {
-      --progress-height: var(--progress-slider-height-9);
-      --progress-radius: var(--progress-slider-radius-9);
-      --progress-indicator-radius: var(--progress-slider-radius-9);
-    }
   }
 }
 
@@ -177,12 +149,6 @@
   }
 }
 
-
-
-
-
-
-
 /* soft */
 
 .rt-ProgressRoot:where(.rt-variant-soft) {
@@ -232,7 +198,3 @@
   }
 }
 
-
-
-
-

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

@@ -1,3 +1,5 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { cardPropDefs } from './card.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 import { gridPropDefs } from './grid.props.js';
@@ -5,13 +7,16 @@ import { gridPropDefs } from './grid.props.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
-const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
+// The same list as Card: a selectable card looks like any other card.
+const variants = cardPropDefs.variant.values;
 const panelBackgrounds = ['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: 'surface' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
+  material: { type: 'enum', values: panelBackgrounds, default: undefined },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
@@ -19,6 +24,7 @@ const radioCardsRootPropDefs = {
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;

package/src/components/radio-cards.tsx

@@ -1,3 +1,4 @@
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
@@ -36,10 +37,12 @@ interface RadioCardsRootProps
 const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const panelBackground = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
     const {
       className,
       color,
+      material: _material,
       panelBackground: _,
       ...rootProps
     } = extractProps(props, radioCardsRootPropDefs, marginPropDefs);
@@ -49,6 +52,7 @@ const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootPro
           <RadioGroupPrimitive.Root
             data-accent-color={color}
             data-panel-background={panelBackground}
+            data-material={panelBackground}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-RadioCardsRoot', className)}

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

@@ -1,15 +1,18 @@
+import { parseVariant } from '../helpers/parse-variant.js';
+import { baseRadioPropDefs } from './_internal/base-radio.props.js';
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'solid', 'soft'] as const;
+// The same list as Radio: a group offers exactly what its items can draw.
+const variants = baseRadioPropDefs.variant.values;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

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

@@ -57,11 +57,11 @@ export const BaseButtonSchema = z
 
     /**
      * Visual variant that determines the button's appearance and context
-     * @default 'solid'
+     * @default 'raised'
      */
     variant: z
-      .enum(['classic', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override'])
-      .default('solid')
+      .enum(['raised', 'solid', 'soft', 'surface', 'outline', 'ghost', 'override', 'classic'])
+      .default('raised')
       .describe("Visual variant that determines the button's appearance and context"),
 
     /**

package/src/components/scroll-area.css

@@ -88,15 +88,15 @@
   .rt-ScrollAreaScrollbar {
     &:where(.rt-r-size-1) {
       --scrollarea-scrollbar-size: var(--space-1);
-      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-2) {
       --scrollarea-scrollbar-size: var(--space-2);
-      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-3) {
       --scrollarea-scrollbar-size: var(--space-3);
-      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+      --scrollarea-scrollbar-border-radius: var(--radius-pill-1);
     }
   }
 }

package/src/components/segmented-control.css

@@ -404,7 +404,7 @@
     }
 
     &:where(.rt-r-size-1) {
-      --segmented-control-border-radius: max(var(--radius-1), var(--radius-full));
+      --segmented-control-border-radius: var(--radius-pill-1);
       --segmented-control-height: var(--control-height-1);
       height: var(--segmented-control-height);
 
@@ -435,7 +435,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --segmented-control-border-radius: max(var(--radius-2), var(--radius-full));
+      --segmented-control-border-radius: var(--radius-pill-2);
       --segmented-control-height: var(--control-height-2);
       height: var(--segmented-control-height);
 
@@ -466,7 +466,7 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --segmented-control-border-radius: max(var(--radius-3), var(--radius-full));
+      --segmented-control-border-radius: var(--radius-pill-3);
       --segmented-control-height: var(--control-height-3);
       height: var(--segmented-control-height);
 
@@ -497,7 +497,7 @@
       }
     }
     &:where(.rt-r-size-4) {
-      --segmented-control-border-radius: max(var(--radius-4), var(--radius-full));
+      --segmented-control-border-radius: var(--radius-pill-4);
       --segmented-control-height: var(--control-height-4);
       height: var(--segmented-control-height);
 

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

@@ -17,17 +17,16 @@ const segmentedControlRootPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  panelBackground: {
-    type: 'enum',
-    className: 'rt-panel-background',
-    values: ['solid', 'translucent'],
-  },
+  material: { type: 'enum', values: ['solid', 'translucent'] },
+  /** @deprecated Use `material`. Removed in 0.15.0. */
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'] },
   ...radiusPropDef,
 } satisfies {
   disabled?: PropDef<boolean>;
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   orientation: PropDef<(typeof orientations)[number]>;
+  material: PropDef<'solid' | 'translucent'>;
   panelBackground: PropDef<'solid' | 'translucent'>;
 };
 

package/src/components/segmented-control.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';
+import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
@@ -33,8 +35,16 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       value: valueProp,
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
+      material: materialProp,
+      panelBackground,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
+    useDeprecatedPanelBackgroundWarning(props.panelBackground);
+    const material = materialProp ?? panelBackground;
+
+    if (props.variant !== undefined) {
+      warnDeprecated('SegmentedControl `variant` is deprecated and will be removed in 0.15.0. It has one value, so it chooses nothing.');
+    }
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -46,6 +56,8 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
+        data-panel-background={material}
+        data-material={material}
         ref={forwardedRef}
         className={classNames('rt-SegmentedControlRoot', className)}
         onValueChange={(value) => {

package/src/components/select.css

@@ -191,7 +191,7 @@
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-      border-radius: max(var(--radius-1), var(--radius-full));
+      border-radius: var(--radius-pill-1);
 
       &:where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-2);
@@ -212,7 +212,7 @@
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: var(--radius-pill-2);
 
       &:where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-3);
@@ -233,7 +233,7 @@
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: var(--radius-pill-3);
 
       &:where(:not(.rt-variant-ghost)) {
         padding-left: var(--space-4);
@@ -248,6 +248,27 @@
         height: var(--trigger-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-trigger-height: var(--control-height-4);
+      gap: var(--component-gap-4);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      border-radius: var(--radius-pill-4);
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--component-gap-ghost-4);
+        --select-trigger-ghost-padding-x: var(--space-3);
+      }
+      & :where(.rt-SelectIcon) {
+        width: var(--trigger-icon-size-4);
+        height: var(--trigger-icon-size-4);
+      }
+    }
   }
 }
 
@@ -282,7 +303,7 @@
         height: var(--select-indicator-icon-size-1);
       }
     }
-    &:where(.rt-r-size-2, .rt-r-size-3) {
+    &:where(.rt-r-size-2, .rt-r-size-3, .rt-r-size-4) {
       --select-content-padding: var(--space-2);
       --select-item-indicator-width: var(--space-5);
       --select-separator-margin-right: var(--space-3);
@@ -322,6 +343,18 @@
         height: var(--select-indicator-icon-size-3);
       }
     }
+    &:where(.rt-r-size-4) {
+      --select-item-height: var(--control-height-4);
+
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-4);
+        letter-spacing: var(--letter-spacing-4);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: var(--select-indicator-icon-size-4);
+        height: var(--select-indicator-icon-size-4);
+      }
+    }
   }
 }
 
@@ -331,11 +364,11 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* classic */
+/* raised */
 
-.rt-SelectTrigger:where(.rt-variant-classic) {
+.rt-SelectTrigger:where(.rt-variant-raised) {
   position: relative;
-  top: var(--classic-elevation-offset);
+  top: var(--raised-elevation-offset);
   color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);