@womp/kookie-ui 0.15.1 → 0.17.0

package/src/components/combobox.tsx

@@ -133,7 +133,6 @@ const ComboboxItemContext = React.createContext<ComboboxItemContextValue | null>
 interface ComboboxContentContextValue {
   sizeClassName?: string;
   color?: string;
-  material?: string;
   label?: string;
 }
 
@@ -333,14 +332,12 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     loading,
     color,
     radius,
-    material,
     onClick,
     onKeyDown,
     type: buttonType,
     ...triggerProps
   } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
 
-  const resolvedMaterial = material;
   const isDisabled = disabled ?? ctx.disabled;
   const resolvedColor = color ?? ctx.color;
   // Read-only and loading triggers stay focusable but do not open.
@@ -408,7 +405,6 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
       <button
         data-accent-color={resolvedColor}
         data-radius={radius}
-        data-material={resolvedMaterial}
         data-error={error}
         data-loading={loading}
         data-disabled={isDisabled || undefined}
@@ -488,8 +484,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const ctx = useComboboxContext('Content');
   const themeContext = useThemeContext();
 
-
-  const material = props.material ?? themeContext.material;
   // Menus stop at size 3; a size 4 field opens a size 3 list.
   const rootSize = ctx.size === '4' ? '3' : ctx.size;
   const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
@@ -500,7 +494,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
     color,
     forceMount,
     container,
-    material: _material,
     onOpenAutoFocus,
     'aria-label': _ariaLabel,
     'aria-labelledby': ariaLabelledByProp,
@@ -528,10 +521,9 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
       // Responsive-aware size class for the search field (never String() a responsive object).
       sizeClassName: extractProps({ size }, contentSizePropDefs).className || undefined,
       color: resolvedColor,
-      material,
       label,
     }),
-    [size, resolvedColor, material, label],
+    [size, resolvedColor, label],
   );
 
   const commandRef = React.useRef<HTMLDivElement>(null);
@@ -556,7 +548,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
       <Theme asChild>
         <PopoverPrimitive.Content
           data-accent-color={resolvedColor}
-          data-material={material}
           align="start"
           sideOffset={4}
           collisionPadding={10}
@@ -619,7 +610,6 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
       <div
         className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', contentContext?.sizeClassName, `rt-variant-${textFieldVariant}`)}
         data-accent-color={contentContext?.color}
-        data-material={contentContext?.material}
       >
         {startAdornment ? <div className="rt-TextFieldSlot">{startAdornment}</div> : null}
         <CommandPrimitive.Input

package/src/components/context-menu.tsx

@@ -26,7 +26,6 @@ import { MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
-  resolveMenuMaterial,
   toAriaKeyShortcuts,
   useResolvedResponsiveValue,
 } from './_internal/base-menu.utils.js';
@@ -59,7 +58,6 @@ type ContextMenuSurfaceProps = GetPropDefTypes<typeof contextMenuContentPropDefs
 type ContextMenuContentContextValue = {
   size?: ContextMenuSurfaceProps['size'];
   color?: ContextMenuSurfaceProps['color'];
-  material?: ContextMenuSurfaceProps['material'];
 };
 const ContextMenuContentContext = React.createContext<ContextMenuContentContextValue>({});
 type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Content>;
@@ -80,9 +78,6 @@ interface ContextMenuContentProps
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-
-
-    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = contextMenuContentPropDefs.size.default,
     } = props;
@@ -92,7 +87,6 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       color,
       container,
       forceMount,
-      material: _material,
       submenuBehavior: _submenuBehavior,
       virtualized = false,
       ...contentProps
@@ -102,8 +96,8 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
     const scalarSize = useResolvedResponsiveValue(size, contextMenuContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, color: resolvedColor, material }),
-      [size, resolvedColor, material],
+      () => ({ size, color: resolvedColor }),
+      [size, resolvedColor],
     );
 
     const body = (
@@ -117,8 +111,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
         <Theme asChild>
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
-            data-material={material}
-            alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+            alignOffset={getMenuAlignOffset(scalarSize)}
             collisionPadding={10}
             {...contentProps}
             asChild={false}
@@ -355,14 +348,10 @@ const ContextMenuSubContent = React.forwardRef<
   ContextMenuSubContentProps
 >((props, forwardedRef) => {
   const parent = React.useContext(ContextMenuContentContext);
-  const themeContext = useThemeContext();
-
 
   // A submenu inherits the parent surface, and its own props win.
   const size = props.size ?? parent.size;
   const color = props.color ?? parent.color;
-  const material =
-    props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
   const {
     className,
@@ -370,7 +359,6 @@ const ContextMenuSubContent = React.forwardRef<
     container,
     forceMount,
     color: _color,
-    material: _material,
     virtualized = false,
     ...subContentProps
   } = extractProps({ ...props, size }, contextMenuSubContentPropDefs);
@@ -378,8 +366,8 @@ const ContextMenuSubContent = React.forwardRef<
   const scalarSize = useResolvedResponsiveValue(size, contextMenuSubContentPropDefs.size.default);
 
   const contextValue = React.useMemo(
-    () => ({ size, color, material }),
-    [size, color, material],
+    () => ({ size, color }),
+    [size, color],
   );
 
   const body = (
@@ -393,8 +381,7 @@ const ContextMenuSubContent = React.forwardRef<
       <Theme asChild>
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
-          data-material={material}
-          alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+          alignOffset={getMenuAlignOffset(scalarSize)}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}
           collisionPadding={10}

package/src/components/data-list.css

@@ -81,13 +81,13 @@
 @breakpoints {
   .rt-DataListRoot {
     &:where(.rt-r-size-1) {
-      gap: var(--space-3);
+      gap: var(--space-4);
     }
     &:where(.rt-r-size-2) {
-      gap: var(--space-4);
+      gap: var(--space-5);
     }
     &:where(.rt-r-size-3) {
-      gap: calc(var(--space-4) * 1.25);
+      gap: calc(var(--space-5) * 1.25);
     }
   }
 }
@@ -113,7 +113,7 @@
 
         display: flex;
         flex-direction: column;
-        gap: var(--space-1);
+        gap: var(--space-2);
       }
 
       & :where(.rt-DataListLabel) {

package/src/components/dialog.css

@@ -1,13 +1 @@
 @import './_internal/base-dialog.css';
-
-/* Add blur effect to Dialog overlay */
-.rt-DialogOverlay::before {
-  backdrop-filter: var(--backdrop-filter-components) !important;
-}
-
-/* Safari backdrop-filter fallback */
-@supports not (backdrop-filter: blur(1px)) {
-  .rt-DialogOverlay::before {
-    backdrop-filter: none !important;
-  }
-}

package/src/components/dialog.props.tsx

@@ -7,7 +7,6 @@ import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const alignValues = ['start', 'center'] as const;
 const contentSizes = ['1', '2', '3', '4'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 const dialogContentPropDefs = {
   ...asChildPropDef,
@@ -24,7 +23,6 @@ const dialogContentPropDefs = {
     default: '3',
     responsive: true,
   },
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
@@ -32,7 +30,6 @@ const dialogContentPropDefs = {
 } satisfies {
   align: PropDef<(typeof alignValues)[number]>;
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/dialog.tsx

@@ -38,11 +38,9 @@ DialogTrigger.displayName = 'Dialog.Trigger';
 // them on every render.
 const {
   align: alignPropDef,
-  material: materialPropDef,
   ...contentPropDefs
 } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
-const materialPropDefs = { material: materialPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface DialogContentProps
@@ -54,20 +52,10 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
   ({ align, ...props }, forwardedRef) => {
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
-
-    const { material: extractedMaterial } = extractProps(
-      { material: props.material },
-      materialPropDefs,
-    );
-
-
-    const materialValue = extractedMaterial;
-
     const {
       className,
       forceMount,
       container,
-      material: __,
       ...contentProps
     } = extractProps(props, contentPropDefs);
 
@@ -143,7 +131,6 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                   {...contentProps}
                   ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
-                  data-material={materialValue}
                   tabIndex={-1}
                   role="dialog"
                   aria-modal="true"
@@ -176,7 +163,7 @@ type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
   (props, forwardedRef) => (
     <DialogPrimitive.Title asChild>
-      <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Title>
   ),
 );

package/src/components/dropdown-menu.css

@@ -95,7 +95,7 @@
 }
 
 .rt-DropdownMenuDrillDownBackIcon {
-  margin-inline-start: calc(-2px * var(--scaling));
+  margin-inline-start: calc(-2px * var(--scale));
   margin-inline-end: 0;
 }
 

package/src/components/dropdown-menu.tsx

@@ -33,7 +33,6 @@ import { MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
-  resolveMenuMaterial,
   toAriaKeyShortcuts,
   useResolvedResponsiveValue,
 } from './_internal/base-menu.utils.js';
@@ -92,7 +91,6 @@ type DropdownMenuSurfaceProps = GetPropDefTypes<typeof dropdownMenuSubContentPro
 type DropdownMenuContentContextValue = {
   size?: DropdownMenuSurfaceProps['size'];
   color?: DropdownMenuSurfaceProps['color'];
-  material?: DropdownMenuSurfaceProps['material'];
 };
 const DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});
 
@@ -132,9 +130,6 @@ interface DropdownMenuContentProps
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
-
-
-    const material = resolveMenuMaterial(props.material, themeContext);
     const {
       size = dropdownMenuContentPropDefs.size.default,
     } = props;
@@ -144,7 +139,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       color,
       container,
       forceMount,
-      material: _material,
       submenuBehavior,
       virtualized = false,
       onEscapeKeyDown,
@@ -177,8 +171,8 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     };
 
     const contextValue = React.useMemo(
-      () => ({ size, color: resolvedColor, material }),
-      [size, resolvedColor, material],
+      () => ({ size, color: resolvedColor }),
+      [size, resolvedColor],
     );
 
     const contentBody = (
@@ -196,7 +190,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
         <Theme asChild>
           <DropdownMenuPrimitive.Content
             data-accent-color={resolvedColor}
-            data-material={material}
             align="start"
             sideOffset={4}
             collisionPadding={10}
@@ -658,14 +651,10 @@ DropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';
 const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props, forwardedRef) => {
     const parent = React.useContext(DropdownMenuContentContext);
-    const themeContext = useThemeContext();
-
 
     // A submenu inherits the parent surface, and its own props win.
     const size = props.size ?? parent.size;
     const color = props.color ?? parent.color;
-    const material =
-      props.material ?? parent.material ?? resolveMenuMaterial(undefined, themeContext);
 
     const {
       className,
@@ -673,7 +662,6 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
       container,
       forceMount,
       color: _color,
-      material: _material,
       virtualized = false,
       ...subContentProps
     } = extractProps({ ...props, size }, dropdownMenuSubContentPropDefs);
@@ -681,8 +669,8 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
     const scalarSize = useResolvedResponsiveValue(size, dropdownMenuSubContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, color, material }),
-      [size, color, material],
+      () => ({ size, color }),
+      [size, color],
     );
 
     const body = (
@@ -696,8 +684,7 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
         <Theme asChild>
           <DropdownMenuPrimitive.SubContent
             data-accent-color={color}
-            data-material={material}
-            alignOffset={getMenuAlignOffset(scalarSize, themeContext.scaling)}
+            alignOffset={getMenuAlignOffset(scalarSize)}
             // Side offset accounts for the outer solid box-shadow
             sideOffset={1}
             collisionPadding={10}
@@ -757,7 +744,6 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
       virtualized: _virtualized,
       size: _size,
       color: _color,
-      material: _material,
       ...panelProps
     } = omitPopperProps(props);
 

package/src/components/hover-card.css

@@ -24,15 +24,15 @@
 @breakpoints {
   .rt-HoverCardContent {
     &:where(.rt-r-size-1) {
-      --hover-card-content-padding: var(--space-3);
+      --hover-card-content-padding: var(--space-4);
       border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-2) {
-      --hover-card-content-padding: var(--space-4);
+      --hover-card-content-padding: var(--space-5);
       border-radius: var(--radius-surface-4);
     }
     &:where(.rt-r-size-3) {
-      --hover-card-content-padding: var(--space-5);
+      --hover-card-content-padding: var(--space-6);
       border-radius: var(--radius-surface-5);
     }
   }

package/src/components/icon-button.css

@@ -142,16 +142,16 @@
      * These determine the amount of negative margin applied in flush mode
      */
     &:where(.rt-r-size-1) {
-      --icon-button-ghost-padding: var(--space-1);
+      --icon-button-ghost-padding: var(--space-2);
     }
     &:where(.rt-r-size-2) {
-      --icon-button-ghost-padding: calc(var(--space-1) * 1.5);
+      --icon-button-ghost-padding: calc(var(--space-2) * 1.5);
     }
     &:where(.rt-r-size-3) {
-      --icon-button-ghost-padding: var(--space-2);
+      --icon-button-ghost-padding: var(--space-3);
     }
     &:where(.rt-r-size-4) {
-      --icon-button-ghost-padding: var(--space-3);
+      --icon-button-ghost-padding: var(--space-4);
     }
   }
 }

package/src/components/image.css

@@ -208,7 +208,7 @@
   font-size: var(--font-size-1); /* Small, readable text */
   font-weight: var(--font-weight-regular); /* Regular weight for readability */
   color: var(--gray-11); /* Subtle but readable color */
-  margin-top: var(--space-2); /* Consistent spacing from image */
+  margin-top: var(--space-3); /* Consistent spacing from image */
   text-align: center; /* Centered alignment for visual balance */
 
   /* 

package/src/components/kbd.css

@@ -26,7 +26,7 @@
   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);
+  padding: var(--space-2) var(--space-3);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
@@ -140,91 +140,91 @@
       font-size: var(--font-size-0);
       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);
+      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
       border-radius: var(--radius-pill-1);
     }
     &:where(.rt-r-size-1) {
       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);
+      padding: var(--space-2) var(--space-3);
       border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-2) {
       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);
+      padding: var(--space-2) calc(var(--space-3) * 1.25);
       border-radius: var(--radius-pill-2);
     }
     &:where(.rt-r-size-3) {
       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);
+      padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
       border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-4) {
       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);
+      padding: calc(var(--space-2) * 1.5) var(--space-4);
       border-radius: var(--radius-pill-3);
     }
     &:where(.rt-r-size-5) {
       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);
+      padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.25);
       border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-6) {
       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);
+      padding: var(--space-3) calc(var(--space-4) * 1.5);
       border-radius: var(--radius-pill-4);
     }
     &:where(.rt-r-size-7) {
       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);
+      padding: calc(var(--space-3) * 1.25) var(--space-5);
       border-radius: var(--radius-pill-5);
     }
     &:where(.rt-r-size-8) {
       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);
+      padding: calc(var(--space-3) * 1.5) calc(var(--space-5) * 1.25);
       border-radius: var(--radius-pill-5);
     }
     &:where(.rt-r-size-9) {
       font-size: var(--font-size-9);
       line-height: var(--line-height-9);
       letter-spacing: var(--letter-spacing-9);
-      padding: calc(var(--space-2) * 1.75) calc(var(--space-4) * 1.5);
+      padding: calc(var(--space-3) * 1.75) calc(var(--space-5) * 1.5);
       border-radius: var(--radius-pill-6);
     }
     &:where(.rt-r-size-10) {
       font-size: var(--font-size-10);
       line-height: var(--line-height-10);
       letter-spacing: var(--letter-spacing-10);
-      padding: calc(var(--space-2) * 2.0) calc(var(--space-4) * 1.75);
+      padding: calc(var(--space-3) * 2.0) calc(var(--space-5) * 1.75);
       border-radius: var(--radius-pill-6);
     }
     &:where(.rt-r-size-11) {
       font-size: var(--font-size-11);
       line-height: var(--line-height-11);
       letter-spacing: var(--letter-spacing-11);
-      padding: calc(var(--space-2) * 2.25) calc(var(--space-4) * 2.0);
+      padding: calc(var(--space-3) * 2.25) calc(var(--space-5) * 2.0);
       border-radius: var(--radius-pill-6);
     }
     &:where(.rt-r-size-12) {
       font-size: var(--font-size-12);
       line-height: var(--line-height-12);
       letter-spacing: var(--letter-spacing-12);
-      padding: calc(var(--space-2) * 2.5) calc(var(--space-4) * 2.25);
+      padding: calc(var(--space-3) * 2.5) calc(var(--space-5) * 2.25);
       border-radius: var(--radius-pill-6);
     }
   }

package/src/components/message-scroller.css

@@ -40,7 +40,7 @@
    would be replaced by it. */
 .rt-MessageScrollerButton {
   position: absolute;
-  bottom: var(--space-3);
+  bottom: var(--space-4);
   left: 0;
   right: 0;
   margin-inline: auto;

package/src/components/navbar.css

@@ -35,24 +35,24 @@
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   width: 100%;
-  gap: var(--space-4);
+  gap: var(--space-5);
 }
 
 /* Size variants - padding based */
 .rt-NavbarRoot[data-size='1'] .rt-NavbarContainer {
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4);
 }
 
 .rt-NavbarRoot[data-size='2'] .rt-NavbarContainer {
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-4) var(--space-5);
 }
 
 .rt-NavbarRoot[data-size='3'] .rt-NavbarContainer {
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-5) var(--space-6);
 }
 
 .rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
-  padding: var(--space-5) var(--space-6);
+  padding: var(--space-6) var(--space-7);
 }
 
 /* Slot overflow handling */
@@ -69,6 +69,6 @@
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .rt-NavbarContainer {
-    gap: var(--space-3);
+    gap: var(--space-4);
   }
 }

package/src/components/notice.css

@@ -13,13 +13,7 @@
   border-radius: var(--notice-radius);
 
   /* An alpha fill, so the strip is a tint of whatever it sits on, as Callout was. */
-  --material-blend: 100%;
-  background-color: color-mix(in srgb, var(--accent-a3), transparent calc(100% - var(--material-blend)));
-
-  &:where([data-material='translucent']) {
-    --material-blend: 60%;
-    backdrop-filter: var(--backdrop-filter-components-enabled);
-  }
+  background-color: var(--accent-a3);
 
   @media (forced-colors: active) {
     border: 1px solid CanvasText;
@@ -28,7 +22,7 @@
 
 /* Gray is the resting category: its fill is one step quieter and its words are the ordinary ink. */
 .rt-NoticeRoot:where([data-accent-color='gray']) {
-  background-color: color-mix(in srgb, var(--gray-a3), transparent calc(100% - var(--material-blend)));
+  background-color: var(--gray-a3);
   color: var(--gray-12);
 }
 
@@ -56,7 +50,7 @@
   display: flex;
   flex: none;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
   /* A button is taller than a line: it centres on the first line and does not grow the strip. */
   margin-block: calc((var(--notice-line) - var(--notice-control)) / 2);
 }
@@ -73,24 +67,24 @@
 .rt-NoticeRoot {
   /* Callout's spacing: an even inset on every side, wider steps between icon, words and actions. */
   &:where(.rt-r-size-1) {
-    gap: var(--space-2);
-    padding: var(--space-3);
+    gap: var(--space-3);
+    padding: var(--space-4);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
     --notice-radius: var(--radius-surface-1);
     --notice-icon-size: var(--content-icon-size-1);
   }
   &:where(.rt-r-size-2) {
-    gap: var(--space-3);
-    padding: var(--space-4);
+    gap: var(--space-4);
+    padding: var(--space-5);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
     --notice-radius: var(--radius-surface-2);
     --notice-icon-size: var(--content-icon-size-2);
   }
   &:where(.rt-r-size-3) {
-    gap: var(--space-4);
-    padding: var(--space-5);
+    gap: var(--space-5);
+    padding: var(--space-6);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
     --notice-radius: var(--radius-surface-3);