@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/scroll-area.tsx

@@ -8,7 +8,6 @@ import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
 import { extractMarginProps } from '../helpers/extract-margin-props.js';
 import { getMarginStyles } from '../helpers/get-margin-styles.js';
-import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
 import { getSubtree } from '../helpers/get-subtree.js';
 import { mergeStyles } from '../helpers/merge-styles.js';
 
@@ -35,7 +34,6 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     type,
     scrollHideDelay = type !== 'scroll' ? 0 : undefined,
     dir,
-    size = scrollAreaPropDefs.size.default,
     radius = scrollAreaPropDefs.radius.default,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
     fade = scrollAreaPropDefs.fade.default,
@@ -70,14 +68,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="horizontal"
-              className={classNames(
-                'rt-ScrollAreaScrollbar',
-                getResponsiveClassNames({
-                  className: 'rt-r-size',
-                  value: size,
-                  propValues: scrollAreaPropDefs.size.values,
-                }),
-              )}
+              className="rt-ScrollAreaScrollbar"
             >
               <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>
@@ -87,14 +78,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
             <ScrollAreaPrimitive.Scrollbar
               data-radius={radius}
               orientation="vertical"
-              className={classNames(
-                'rt-ScrollAreaScrollbar',
-                getResponsiveClassNames({
-                  className: 'rt-r-size',
-                  value: size,
-                  propValues: scrollAreaPropDefs.size.values,
-                }),
-              )}
+              className="rt-ScrollAreaScrollbar"
             >
               <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
             </ScrollAreaPrimitive.Scrollbar>

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,39 +21,18 @@
 
   /* 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;
-  }
 }
 
+/* Disabled is a colour remap, never opacity, with a default cursor. */
 .rt-SegmentedControlRoot:where([data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-3);
+  cursor: default;
+}
+
+.rt-SegmentedControlItem:where([disabled]) {
+  color: var(--gray-a8);
+  cursor: default;
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -78,9 +57,10 @@
     border-bottom-right-radius: inherit;
   }
 
+  /* Drawn inside the track, which clips anything outside its own box. */
   &:where(:focus-visible) {
     border-radius: inherit;
-    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
   }
 }
@@ -116,11 +96,15 @@
     flex-shrink: 0;
   }
 
+  /* Hover is one step up, press two. A disabled segment takes neither. */
   @media (hover: hover) {
     :where(.rt-SegmentedControlItem[data-state='off']:not([disabled]):hover) & {
       background-color: var(--gray-a2);
     }
   }
+  :where(.rt-SegmentedControlItem[data-state='off']:not([disabled]):active) & {
+    background-color: var(--gray-a3);
+  }
 }
 
 .rt-SegmentedControlItemLabelInactive {
@@ -160,8 +144,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 +163,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,15 +394,14 @@
       & :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);
-        gap: var(--component-gap-1);
+        padding-inline: var(--control-px-1);
+        gap: var(--control-gap-1);
 
         /* Icon sizing for size 1 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-1);
-          height: var(--content-icon-size-1);
+          width: var(--icon-size-1);
+          height: var(--icon-size-1);
         }
       }
     }
@@ -441,15 +424,14 @@
       & :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);
-        gap: var(--component-gap-2);
+        padding-inline: var(--control-px-2);
+        gap: var(--control-gap-2);
 
         /* Icon sizing for size 2 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-2);
-          height: var(--content-icon-size-2);
+          width: var(--icon-size-2);
+          height: var(--icon-size-2);
         }
       }
     }
@@ -472,15 +454,14 @@
       & :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);
-        gap: var(--component-gap-3);
+        padding-inline: var(--control-px-3);
+        gap: var(--control-gap-3);
 
         /* Icon sizing for size 3 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-3);
-          height: var(--content-icon-size-3);
+          width: var(--icon-size-3);
+          height: var(--icon-size-3);
         }
       }
     }
@@ -503,15 +484,14 @@
       & :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);
-        gap: var(--component-gap-4);
+        padding-inline: var(--control-px-4);
+        gap: var(--control-gap-4);
 
         /* Icon sizing for size 4 */
         /* stylelint-disable-next-line selector-max-type */
         & :where(svg) {
-          width: var(--content-icon-size-4);
-          height: var(--content-icon-size-4);
+          width: var(--icon-size-4);
+          height: var(--icon-size-4);
         }
       }
     }
@@ -525,22 +505,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 +514,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.
@@ -560,8 +525,7 @@
 
   /* Remove padding and center icon */
   & :where(.rt-SegmentedControlItemLabel) {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 }
 
@@ -579,33 +543,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(--control-height-1);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
-  width: var(--space-6);
+  width: var(--control-height-2);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
-  width: var(--space-7);
+  width: var(--control-height-3);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
-  width: var(--space-8);
+  width: var(--control-height-4);
 }
 
 /* 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 };

package/src/components/segmented-control.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from 'radix-ui/internal';
 
 import { segmentedControlRootPropDefs } from './segmented-control.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -26,7 +27,8 @@ interface SegmentedControlRootProps
 }
 
 const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, segmentedControlRootPropDefs.size);
     const {
       className,
       children,
@@ -34,11 +36,8 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       value: valueProp,
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
-      material: materialProp,
       ...rootProps
     } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
-    const material = materialProp;
-
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
@@ -50,7 +49,6 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       <ToggleGroupPrimitive.Root
         data-disabled={props.disabled || undefined}
         data-radius={radius}
-        data-material={material}
         ref={forwardedRef}
         className={classNames('rt-SegmentedControlRoot', className)}
         onValueChange={(value) => {