@womp/kookie-ui 0.17.0 → 0.19.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/segmented-control.css

@@ -23,9 +23,16 @@
   isolation: isolate;
 }
 
+/* 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;
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -50,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);
   }
 }
@@ -88,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 {
@@ -364,7 +376,7 @@
     }
 
     &:where(.rt-r-size-1) {
-      --segmented-control-border-radius: var(--radius-pill-1);
+      --segmented-control-border-radius: var(--radius-control-1);
       --segmented-control-height: var(--control-height-1);
       height: var(--segmented-control-height);
 
@@ -382,20 +394,19 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-1);
         letter-spacing: var(--letter-spacing-1);
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-        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);
         }
       }
     }
     &:where(.rt-r-size-2) {
-      --segmented-control-border-radius: var(--radius-pill-2);
+      --segmented-control-border-radius: var(--radius-control-2);
       --segmented-control-height: var(--control-height-2);
       height: var(--segmented-control-height);
 
@@ -413,20 +424,19 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-2);
         letter-spacing: var(--letter-spacing-2);
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-        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);
         }
       }
     }
     &:where(.rt-r-size-3) {
-      --segmented-control-border-radius: var(--radius-pill-3);
+      --segmented-control-border-radius: var(--radius-control-3);
       --segmented-control-height: var(--control-height-3);
       height: var(--segmented-control-height);
 
@@ -444,20 +454,19 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-3);
         letter-spacing: var(--letter-spacing-3);
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-        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);
         }
       }
     }
     &:where(.rt-r-size-4) {
-      --segmented-control-border-radius: var(--radius-pill-4);
+      --segmented-control-border-radius: var(--radius-control-4);
       --segmented-control-height: var(--control-height-4);
       height: var(--segmented-control-height);
 
@@ -475,15 +484,14 @@
       & :where(.rt-SegmentedControlItemLabel) {
         font-size: var(--font-size-4);
         letter-spacing: var(--letter-spacing-4);
-        padding-left: var(--space-6);
-        padding-right: var(--space-6);
-        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);
         }
       }
     }
@@ -517,8 +525,7 @@
 
   /* Remove padding and center icon */
   & :where(.rt-SegmentedControlItemLabel) {
-    padding-left: 0;
-    padding-right: 0;
+    padding-inline: 0;
   }
 }
 
@@ -536,16 +543,16 @@
 
 /* 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-6);
+  width: var(--control-height-1);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-2):has([data-icon-only]) {
-  width: var(--space-7);
+  width: var(--control-height-2);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-3):has([data-icon-only]) {
-  width: var(--space-8);
+  width: var(--control-height-3);
 }
 .rt-SegmentedControlRoot:where(.rt-r-orientation-vertical):where(.rt-r-size-4):has([data-icon-only]) {
-  width: var(--space-9);
+  width: var(--control-height-4);
 }
 
 /* Vertical text items need vertical padding */

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,

package/src/components/select.css

@@ -5,7 +5,6 @@
   flex-shrink: 0;
   user-select: none;
   vertical-align: top;
-  line-height: var(--height);
 
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-regular);
@@ -137,36 +136,34 @@
 
 .rt-SelectTrigger {
   color: var(--gray-12);
-
-  &:where(:not(.rt-variant-ghost)) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-  }
-  &:where(.rt-variant-ghost) {
-    box-sizing: border-box;
-    height: var(--select-trigger-height);
-    padding: 0 var(--select-trigger-ghost-padding-x);
-  }
+  box-sizing: border-box;
+  /* min-height, not height: a hard height clips text resized to 200%. */
+  min-height: var(--select-trigger-height);
+  gap: var(--select-trigger-gap);
+
+  /*
+   * The label's edge is bare, so under a full radius it pads wider (the curve cuts into the
+   * text). `--radius-full` is 0px below `full` and 9999px at `full`. The chevron's edge keeps
+   * the plain padding.
+   */
+  padding-left: calc(
+    var(--select-trigger-px) + min(var(--radius-full, 0px), var(--select-trigger-px-pill) - var(--select-trigger-px))
+  );
+  padding-right: var(--select-trigger-px);
 }
 
 @breakpoints {
   .rt-SelectTrigger {
     &:where(.rt-r-size-1) {
       --select-trigger-height: var(--control-height-1);
-      gap: var(--component-gap-1);
+      --select-trigger-px: var(--control-px-1);
+      --select-trigger-px-pill: var(--control-px-pill-1);
+      --select-trigger-gap: var(--control-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-      border-radius: var(--radius-pill-1);
+      border-radius: var(--radius-control-1);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-1);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-1);
         height: var(--trigger-icon-size-1);
@@ -174,20 +171,14 @@
     }
     &:where(.rt-r-size-2) {
       --select-trigger-height: var(--control-height-2);
-      gap: var(--component-gap-2);
+      --select-trigger-px: var(--control-px-2);
+      --select-trigger-px-pill: var(--control-px-pill-2);
+      --select-trigger-gap: var(--control-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-4);
-        padding-right: var(--space-4);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-2);
-        --select-trigger-ghost-padding-x: var(--space-3);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-2);
         height: var(--trigger-icon-size-2);
@@ -195,20 +186,14 @@
     }
     &:where(.rt-r-size-3) {
       --select-trigger-height: var(--control-height-3);
-      gap: var(--component-gap-3);
+      --select-trigger-px: var(--control-px-3);
+      --select-trigger-px-pill: var(--control-px-pill-3);
+      --select-trigger-gap: var(--control-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-3);
-        --select-trigger-ghost-padding-x: var(--space-4);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-3);
         height: var(--trigger-icon-size-3);
@@ -216,20 +201,14 @@
     }
     &:where(.rt-r-size-4) {
       --select-trigger-height: var(--control-height-4);
-      gap: var(--component-gap-4);
+      --select-trigger-px: var(--control-px-4);
+      --select-trigger-px-pill: var(--control-px-pill-4);
+      --select-trigger-gap: var(--control-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);
+      border-radius: var(--radius-control-4);
 
-      &:where(:not(.rt-variant-ghost)) {
-        padding-left: var(--space-5);
-        padding-right: var(--space-5);
-      }
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-4);
-        --select-trigger-ghost-padding-x: var(--space-4);
-      }
       & :where(.rt-SelectIcon) {
         width: var(--trigger-icon-size-4);
         height: var(--trigger-icon-size-4);
@@ -251,7 +230,7 @@
       --select-item-height: var(--control-height-1);
       --select-item-indicator-width: calc(var(--space-6) / var(--select-item-indicator-width-factor));
       --select-separator-margin-right: var(--space-3);
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
 
       & :where(.rt-SelectLabel) {
         font-size: var(--font-size-1);
@@ -273,7 +252,7 @@
       --select-content-padding: var(--space-3);
       --select-item-indicator-width: var(--space-6);
       --select-separator-margin-right: var(--space-4);
-      border-radius: var(--radius-surface-4);
+      border-radius: var(--radius-surface-1);
 
       & :where(.rt-SelectLabel) {
         font-size: var(--font-size-2);
@@ -345,7 +324,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-2);
     }
@@ -364,8 +343,7 @@
     background-color: var(--gray-a3);
     box-shadow: none;
     outline: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
     top: 0;
   }
 
@@ -388,7 +366,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-4);
     }
   }
@@ -397,15 +375,14 @@
     background-color: var(--accent-4);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-5);
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -431,7 +408,7 @@
   }
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
     }
   }
@@ -445,15 +422,14 @@
     background-color: var(--accent-3);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
   }
 
   &:where(:disabled) {
     color: var(--gray-a8);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -464,7 +440,7 @@
   color: var(--accent-ink);
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-2);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -475,7 +451,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
@@ -489,8 +465,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
     background-color: transparent;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -509,7 +484,7 @@
   color: var(--accent-ink);
 
   @media (hover: hover) {
-    &:where(:hover) {
+    &:where(:hover:not(:disabled)) {
       background-color: var(--accent-3);
       box-shadow: inset 0 0 0 1px var(--accent-7);
     }
@@ -520,7 +495,7 @@
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
 
-  &:where(:active:not([data-state='open'])) {
+  &:where(:active:not([data-state='open'], :disabled)) {
     background-color: var(--accent-4);
     box-shadow: inset 0 0 0 1px var(--accent-8);
   }
@@ -534,8 +509,7 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
     background-color: var(--gray-a2);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 
   &:where([data-placeholder]) {
@@ -546,22 +520,50 @@
   }
 }
 
-/* all disabled */
+/* all disabled: a colour remap, never opacity, and the arrow cursor */
 .rt-SelectTrigger {
   &:where(:disabled) {
     & :where(.rt-SelectIcon) {
       color: var(--gray-a9);
     }
+    &:where([data-placeholder]) :where(.rt-SelectTriggerInner) {
+      color: var(--gray-a8);
+      opacity: 1;
+    }
   }
 }
 
-/* Error state styling */
-.rt-SelectTrigger:where([data-error="true"]) {
-  box-shadow: inset 0 0 0 1px var(--red-9);
-}
+/*
+ * Invalid. Keyed on `aria-invalid`, which the `error` prop sets, so both paths style the same.
+ * Only the border and the focus ring move; the fill stays the variant's.
+ */
+.rt-SelectTrigger:where([aria-invalid='true']) {
+  &:where(:not(.rt-variant-raised)) {
+    box-shadow: inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: inset 0 0 0 1px var(--red-7);
+      }
+    }
+    &:where([data-state='open'], :active) {
+      box-shadow: inset 0 0 0 1px var(--red-7);
+    }
+  }
 
-.rt-SelectTrigger:where([data-error="true"]:focus-visible) {
-  outline: 2px solid var(--red-8);
+  &:where(.rt-variant-raised) {
+    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
+
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled)) {
+        box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-7);
+      }
+    }
+  }
+
+  &:where(:focus-visible) {
+    outline-color: var(--red-8);
+  }
 }
 
 /* Loading state styling */
@@ -595,7 +597,7 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-SelectTrigger:where([data-error="true"]) {
+  .rt-SelectTrigger:where([aria-invalid='true']) {
     border: 1px solid CanvasText;
   }
 }

package/src/components/select.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import {
@@ -27,7 +28,8 @@ const SelectContext = React.createContext<SelectContextValue>({});
 
 interface SelectRootProps extends SelectPrimitive.SelectProps, SelectContextValue {}
 const SelectRoot: React.FC<SelectRootProps> = (props) => {
-  const { children, size = selectRootPropDefs.size.default, ...rootProps } = props;
+  const { children, size: sizeProp, ...rootProps } = props;
+  const size = useThemeSize(sizeProp, selectRootPropDefs.size);
   return (
     <SelectPrimitive.Root {...rootProps}>
       <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
@@ -172,7 +174,7 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
                 </ScrollAreaPrimitive.Viewport>
               </SelectPrimitive.Viewport>
               <ScrollAreaPrimitive.Scrollbar
-                className="rt-ScrollAreaScrollbar rt-r-size-1"
+                className="rt-ScrollAreaScrollbar"
                 orientation="vertical"
               >
                 <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />

package/src/components/separator.css

@@ -1,4 +1,6 @@
 .rt-Separator {
+  /* Fills its container along its own axis, as in v2. */
+  --separator-size: 100%;
   display: block;
   background-color: var(--accent-a5);
 }
@@ -25,26 +27,3 @@
     }
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-Separator {
-    &:where(.rt-r-size-1) {
-      --separator-size: var(--space-5);
-    }
-    &:where(.rt-r-size-2) {
-      --separator-size: var(--space-7);
-    }
-    &:where(.rt-r-size-3) {
-      --separator-size: var(--space-10);
-    }
-    &:where(.rt-r-size-4) {
-      --separator-size: 100%;
-    }
-  }
-}

package/src/components/separator.props.tsx

@@ -3,7 +3,6 @@ import { colorPropDef } from '../props/color.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const orientationValues = ['horizontal', 'vertical'] as const;
-const sizes = ['1', '2', '3', '4'] as const;
 
 const separatorPropDefs = {
   orientation: {
@@ -13,13 +12,11 @@ const separatorPropDefs = {
     default: 'horizontal',
     responsive: true,
   },
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   color: { ...colorPropDef.color, default: 'gray' },
   decorative: { type: 'boolean', default: true },
   light: { type: 'boolean', className: 'rt-light', default: false },
 } satisfies {
   orientation: PropDef<(typeof orientationValues)[number]>;
-  size: PropDef<(typeof sizes)[number]>;
   color: typeof colorPropDef.color;
   decorative: PropDef<boolean>;
   light: PropDef<boolean>;

package/src/components/sheet.css

@@ -2,7 +2,8 @@
   position: fixed !important;
   /* Use physical properties to integrate with width/height responsive utilities */
   width: var(--width, 90vw);
-  max-width: var(--max-width, 100vw);
+  /* The size's overlay width caps the start/end sides; top and bottom span the window. */
+  max-width: min(var(--overlay-w), 100vw);
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;