@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/_internal/base-checkbox.css

@@ -61,22 +61,32 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * The box is v2's mark ladder (16/20/24/26): a mark occupies one line of the label beside it.
+ * The glyph keeps v1's proportion of the box. The corner keeps v1's ramp off --radius-1,
+ * clamped below a circle.
+ */
 @breakpoints {
   .rt-BaseCheckboxRoot {
     &:where(.rt-r-size-1) {
-      --checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
-      --checkbox-indicator-size: var(--indicator-icon-size-1);
-      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-small)), var(--checkbox-radius-max));
+      --checkbox-size: var(--mark-1, calc(16px * var(--scale)));
+      --checkbox-indicator-size: calc(10px * var(--scale));
+      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-2) {
-      --checkbox-size: var(--space-5);
-      --checkbox-indicator-size: var(--indicator-icon-size-2);
+      --checkbox-size: var(--mark-2, calc(20px * var(--scale)));
+      --checkbox-indicator-size: calc(12px * var(--scale));
       --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
     }
     &:where(.rt-r-size-3) {
-      --checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
-      --checkbox-indicator-size: var(--indicator-icon-size-3);
-      --checkbox-border-radius: min(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--checkbox-radius-max));
+      --checkbox-size: var(--mark-3, calc(24px * var(--scale)));
+      --checkbox-indicator-size: calc(14px * var(--scale));
+      --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
+    }
+    &:where(.rt-r-size-4) {
+      --checkbox-size: var(--mark-4, calc(26px * var(--scale)));
+      --checkbox-indicator-size: calc(16px * var(--scale));
+      --checkbox-border-radius: min(var(--radius-1), var(--checkbox-radius-max));
     }
   }
 }
@@ -246,3 +256,76 @@
     }
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * INTERACTION                                                                                     *
+ *                                                                                                 *
+ * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseCheckboxRoot {
+  --checkbox-unchecked-hover: var(--accent-a2);
+  --checkbox-unchecked-active: var(--accent-a3);
+  --checkbox-checked-hover: var(--accent-4);
+  --checkbox-checked-active: var(--accent-5);
+
+  &:where(.rt-variant-solid) {
+    --checkbox-checked-hover: var(--accent-solid-hover);
+    --checkbox-checked-active: var(--accent-solid-active);
+  }
+  &:where(.rt-variant-raised) {
+    --checkbox-unchecked-hover: var(--color-surface-solid);
+    --checkbox-unchecked-active: var(--accent-3);
+  }
+  &:where(.rt-variant-soft) {
+    --checkbox-unchecked-hover: var(--accent-4);
+    --checkbox-unchecked-active: var(--accent-5);
+  }
+  &:where(.rt-variant-outline) {
+    --checkbox-checked-hover: var(--accent-3);
+    --checkbox-checked-active: var(--accent-4);
+  }
+  &:where(.rt-variant-surface) {
+    --checkbox-unchecked-hover: var(--accent-3);
+    --checkbox-unchecked-active: var(--accent-4);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled]))::before {
+      background-color: var(--checkbox-unchecked-hover);
+    }
+    &:where(:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+      background-color: var(--checkbox-checked-hover);
+    }
+  }
+  &:where(:active:not(:disabled, [data-disabled]))::before {
+    background-color: var(--checkbox-unchecked-active);
+  }
+  &:where(:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+    background-color: var(--checkbox-checked-active);
+  }
+  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+    box-shadow: inset 0 0 0 1px var(--checkbox-checked-active);
+  }
+  @media (hover: hover) {
+    &:where(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where([data-state='checked'], [data-state='indeterminate'])::before {
+      box-shadow: inset 0 0 0 1px var(--checkbox-checked-hover);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * FOCUS AND DISABLED                                                                              *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* The focus ring lives on Checkbox and CheckboxGroup: CheckboxCards rings its card instead. */
+.rt-BaseCheckboxRoot {
+  /* Disabled is a colour remap (per variant above), never opacity; the cursor stays default. */
+  &:where(:disabled, [data-disabled]) {
+    cursor: default;
+  }
+}

package/src/components/_internal/base-checkbox.props.ts

@@ -2,7 +2,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseCheckboxPropDefs = {

package/src/components/_internal/base-dialog.css

@@ -44,10 +44,6 @@
   box-sizing: border-box;
   overflow: auto;
 
-  --inset-padding-top: var(--dialog-content-padding);
-  --inset-padding-right: var(--dialog-content-padding);
-  --inset-padding-bottom: var(--dialog-content-padding);
-  --inset-padding-left: var(--dialog-content-padding);
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
 
@@ -62,23 +58,33 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * v2's overlay ladder. Size N wears the overlay corner N, pads one surface step above its
+ * index (capped at 4), and publishes --overlay-w as its designed maximum width. Dialog and
+ * AlertDialog read it as max-width; Sheet reads it on its start/end sides only. An explicit
+ * maxWidth prop wins, because the max-width utility comes later in the cascade.
+ */
 @breakpoints {
   .rt-BaseDialogContent {
     &:where(.rt-r-size-1) {
-      --dialog-content-padding: var(--space-6);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-3)));
+      --dialog-content-padding: var(--surface-p-2);
+      --overlay-w: var(--overlay-w-1);
+      border-radius: var(--radius-overlay-1);
     }
     &:where(.rt-r-size-2) {
-      --dialog-content-padding: var(--space-7);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-4)));
+      --dialog-content-padding: var(--surface-p-3);
+      --overlay-w: var(--overlay-w-2);
+      border-radius: var(--radius-overlay-2);
     }
     &:where(.rt-r-size-3) {
-      --dialog-content-padding: var(--space-8);
-      border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-5)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-3);
+      border-radius: var(--radius-overlay-3);
     }
     &:where(.rt-r-size-4) {
-      --dialog-content-padding: var(--space-9);
-      border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-6)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-4);
+      border-radius: var(--radius-overlay-4);
     }
   }
 }

package/src/components/_internal/base-menu.css

@@ -139,7 +139,7 @@
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-1);
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-2);
@@ -177,7 +177,7 @@
       --base-menu-item-padding-right: var(--space-4);
       --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-2);
-      border-radius: var(--radius-surface-5);
+      border-radius: var(--radius-surface-2);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-3);
@@ -215,7 +215,7 @@
       --base-menu-item-padding-right: var(--space-4);
       --base-menu-item-padding-y: var(--space-3);
       --base-menu-item-height: var(--control-height-3);
-      border-radius: var(--radius-surface-6);
+      border-radius: var(--radius-surface-3);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-4);

package/src/components/_internal/base-radio.css

@@ -17,8 +17,9 @@
 
   isolation: isolate;
 
+  /* Disabled is a colour remap (per variant below), never opacity; the cursor stays default. */
   &:where(:disabled, [data-disabled]) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
 
   &::before {
@@ -46,8 +47,8 @@
   }
 
   &:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }
 
@@ -57,16 +58,20 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* The box is v2's mark ladder (16/20/24/26), the same box Checkbox has at each size. */
 @breakpoints {
   .rt-BaseRadioRoot {
     &:where(.rt-r-size-1) {
-      --radio-size: calc(var(--space-5) * 0.875);
+      --radio-size: var(--mark-1, calc(16px * var(--scale)));
     }
     &:where(.rt-r-size-2) {
-      --radio-size: var(--space-5);
+      --radio-size: var(--mark-2, calc(20px * var(--scale)));
     }
     &:where(.rt-r-size-3) {
-      --radio-size: calc(var(--space-5) * 1.25);
+      --radio-size: var(--mark-3, calc(24px * var(--scale)));
+    }
+    &:where(.rt-r-size-4) {
+      --radio-size: var(--mark-4, calc(26px * var(--scale)));
     }
   }
 }
@@ -213,3 +218,60 @@
     background-color: var(--gray-a8);
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * INTERACTION                                                                                     *
+ *                                                                                                 *
+ * Hover is one step up the variant's own ramp, press two. Disabled marks take neither.           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-BaseRadioRoot {
+  --radio-unchecked-hover: var(--accent-a2);
+  --radio-unchecked-active: var(--accent-a3);
+  --radio-checked-hover: var(--accent-4);
+  --radio-checked-active: var(--accent-5);
+
+  &:where(.rt-variant-solid) {
+    --radio-checked-hover: var(--accent-solid-hover);
+    --radio-checked-active: var(--accent-solid-active);
+  }
+  &:where(.rt-variant-raised) {
+    --radio-unchecked-hover: var(--color-surface-solid);
+    --radio-unchecked-active: var(--accent-3);
+  }
+  &:where(.rt-variant-soft) {
+    --radio-unchecked-hover: var(--accent-4);
+    --radio-unchecked-active: var(--accent-5);
+  }
+  &:where(.rt-variant-outline) {
+    --radio-checked-hover: var(--accent-3);
+    --radio-checked-active: var(--accent-4);
+  }
+  &:where(.rt-variant-surface) {
+    --radio-unchecked-hover: var(--accent-3);
+    --radio-unchecked-active: var(--accent-4);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled]))::before {
+      background-color: var(--radio-unchecked-hover);
+    }
+    &:where(:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      background-color: var(--radio-checked-hover);
+    }
+    &:where(.rt-variant-solid:hover:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+      box-shadow: inset 0 0 0 1px var(--radio-checked-hover);
+    }
+  }
+  &:where(:active:not(:disabled, [data-disabled]))::before {
+    background-color: var(--radio-unchecked-active);
+  }
+  &:where(:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    background-color: var(--radio-checked-active);
+  }
+  &:where(.rt-variant-solid:active:not(:disabled, [data-disabled])):where(:checked, [data-state='checked'])::before {
+    box-shadow: inset 0 0 0 1px var(--radio-checked-active);
+  }
+}

package/src/components/_internal/base-radio.props.ts

@@ -2,7 +2,7 @@ import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseRadioPropDefs = {

package/src/components/_internal/base-tab-list.css

@@ -61,11 +61,14 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * Height is the control ladder. The hover pill pads by --control-px-N; half a control gap on each
+ * side of it sets neighbouring pills one --control-gap-N apart.
+ */
 .rt-BaseTabListTrigger {
   box-sizing: border-box;
   height: var(--tab-height);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
+  padding-inline: var(--tab-padding-x);
 }
 
 .rt-BaseTabListTriggerInner,
@@ -82,20 +85,20 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       --tab-height: var(--control-height-1);
-      --tab-padding-x: var(--space-2);
-      --tab-inner-padding-x: var(--space-2);
+      --tab-padding-x: calc(var(--control-gap-1) / 2);
+      --tab-inner-padding-x: var(--control-px-1);
       --tab-inner-padding-y: calc(var(--space-2) * var(--spacing-multiplier-small));
       --tab-inner-border-radius: var(--radius-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-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-1);
+        gap: var(--control-gap-1);
       }
     }
     &:where(.rt-r-size-2) {
@@ -103,20 +106,20 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       --tab-height: var(--control-height-2);
-      --tab-padding-x: var(--space-3);
-      --tab-inner-padding-x: var(--space-3);
+      --tab-padding-x: calc(var(--control-gap-2) / 2);
+      --tab-inner-padding-x: var(--control-px-2);
       --tab-inner-padding-y: var(--space-2);
       --tab-inner-border-radius: var(--radius-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-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-2);
+        gap: var(--control-gap-2);
       }
     }
     &:where(.rt-r-size-3) {
@@ -124,20 +127,20 @@
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
       --tab-height: var(--control-height-3);
-      --tab-padding-x: var(--space-4);
-      --tab-inner-padding-x: var(--space-4);
+      --tab-padding-x: calc(var(--control-gap-3) / 2);
+      --tab-inner-padding-x: var(--control-px-3);
       --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-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-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-3);
+        gap: var(--control-gap-3);
       }
     }
     &:where(.rt-r-size-4) {
@@ -145,20 +148,20 @@
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
       --tab-height: var(--control-height-4);
-      --tab-padding-x: var(--space-4);
-      --tab-inner-padding-x: var(--space-5);
+      --tab-padding-x: calc(var(--control-gap-4) / 2);
+      --tab-inner-padding-x: var(--control-px-4);
       --tab-inner-padding-y: var(--space-3);
       --tab-inner-border-radius: var(--radius-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);
       }
 
       & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
-        gap: var(--component-gap-4);
+        gap: var(--control-gap-4);
       }
     }
   }
@@ -188,18 +191,23 @@
       background-color: var(--accent-a3);
     }
   }
+  /* Hover is one step up, press two. */
+  &:where(:active:not([data-disabled])) :where(.rt-BaseTabListTriggerInner) {
+    background-color: var(--gray-a4);
+  }
   &:where([data-state='active'], [data-active]) {
     color: var(--gray-12);
   }
+  /* Drawn inside the trigger: the scrolling list clips anything outside it. */
   &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
-    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);
     scroll-margin: var(--space-3);
   }
   &:where([data-state='active'], [data-active])::before {
     box-sizing: border-box;
     content: '';
-    height: var(--focus-outline-width); /* Consistent with focus outline thickness */
+    height: var(--focus-ring-width, 2px); /* Consistent with focus ring thickness */
     position: absolute;
     bottom: 0;
     left: 0;
@@ -222,7 +230,7 @@
   }
 }
 
-/* Disabled: the same treatment as a disabled menu item. It keeps no hover fill. */
+/* Disabled: the same treatment as a disabled menu item, a colour remap with no opacity. It keeps no hover or press fill. */
 .rt-BaseTabListTrigger:where([data-disabled]) {
   color: var(--gray-a8);
   cursor: default;

package/src/components/accordion.css

@@ -12,13 +12,13 @@
       border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      border-radius: var(--radius-surface-2);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-3) {
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-4) {
-      border-radius: var(--radius-surface-4);
+      border-radius: var(--radius-surface-1);
     }
   }
 }

package/src/components/accordion.tsx

@@ -10,6 +10,7 @@ import {
   accordionContentPropDefs,
 } from './accordion.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 
 import type {
   AccordionRootOwnProps,
@@ -27,7 +28,8 @@ interface AccordionRootProps
     AccordionRootOwnProps {}
 
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
-  (props, forwardedRef) => {
+  (ownProps, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, accordionRootPropDefs.size);
     const { className, flush, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 

package/src/components/alert-dialog.css

@@ -1 +1,5 @@
 @import './_internal/base-dialog.css';
+
+.rt-AlertDialogContent {
+  max-width: var(--overlay-w);
+}

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
@@ -51,7 +52,8 @@ interface AlertDialogContentProps
   container?: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>['container'];
 }
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ align, ...props }, forwardedRef) => {
+  ({ align, ...ownProps }, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     const {