@womp/kookie-ui 0.16.0 → 0.17.0

package/src/components/chatbar.css

@@ -8,26 +8,12 @@
 
 /* Defaults */
 .rt-ChatbarRoot {
-  --chatbar-item-lead: var(--space-5);
+  --chatbar-item-lead: var(--space-6);
   --chatbar-item-lead-radius: var(--radius-2);
-  --chatbar-item-padding: var(--space-1);
+  --chatbar-item-padding: var(--space-2);
   /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
   display: flex;
   flex-direction: column;
-
-  /*
-   * Component-level material override
-   * When component has explicit material prop, override the inherited theme values.
-   */
-  &:where([data-material='solid']) {
-    --material-blend: 100%;
-    --material-alpha: 0;
-  }
-
-  &:where([data-material='translucent']) {
-    --material-blend: 60%;
-    --material-alpha: 1;
-  }
 }
 
 /* Unstyled textarea (reset) */
@@ -58,7 +44,7 @@
 .rt-ChatbarBox :where(.rt-ChatbarGrid) {
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: var(--space-5);
   width: 100%;
 }
 
@@ -104,7 +90,7 @@
   width: 100%;
 }
 
-/* ScrollArea radius scaling */
+/* ScrollArea follows the attachments radius */
 .rt-ChatbarScrollArea {
   border-radius: var(--chatbar-attachments-radius);
 }
@@ -126,12 +112,12 @@
 .rt-ChatbarItem {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   flex-shrink: 0;
   box-sizing: border-box;
   max-width: 240px;
   padding: var(--chatbar-item-padding);
-  padding-right: calc(var(--chatbar-item-padding) + var(--space-1));
+  padding-right: calc(var(--chatbar-item-padding) + var(--space-2));
   border: 1px solid var(--gray-a5);
   border-radius: calc(var(--chatbar-item-lead-radius) + var(--chatbar-item-padding));
   background-color: var(--color-panel-solid);
@@ -184,26 +170,28 @@
 }
 
 .rt-ChatbarItemRemove {
+  /* A hosted control: as tall as the lead tile, so a pill with × is as tall as one without. */
+  --base-button-height: var(--chatbar-item-lead);
   flex-shrink: 0;
-  margin-left: calc(var(--space-1) * -1);
+  margin-left: calc(var(--space-2) * -1);
 }
 
 @breakpoints {
   .rt-ChatbarRoot {
     &:where(.rt-r-size-1) {
-      --chatbar-item-lead: var(--space-4);
+      --chatbar-item-lead: var(--space-5);
       --chatbar-item-lead-radius: var(--radius-1);
-      --chatbar-item-padding: var(--space-1);
+      --chatbar-item-padding: var(--space-2);
     }
     &:where(.rt-r-size-2) {
-      --chatbar-item-lead: var(--space-5);
+      --chatbar-item-lead: var(--space-6);
       --chatbar-item-lead-radius: var(--radius-2);
-      --chatbar-item-padding: var(--space-1);
+      --chatbar-item-padding: var(--space-2);
     }
     &:where(.rt-r-size-3) {
-      --chatbar-item-lead: calc(var(--space-5) + var(--space-1));
+      --chatbar-item-lead: calc(var(--space-6) + var(--space-2));
       --chatbar-item-lead-radius: var(--radius-2);
-      --chatbar-item-padding: calc(var(--space-1) * 1.5);
+      --chatbar-item-padding: calc(var(--space-2) * 1.5);
     }
   }
 }
@@ -218,22 +206,12 @@
   isolation: isolate;
 }
 
-/* Theme-level translucent override for the visual shell (matches any ancestor) */
-:where([data-material='translucent']) .rt-ChatbarBox {
-  backdrop-filter: var(--backdrop-filter-components);
-  --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-}
-.rt-ChatbarRoot:where([data-material='solid']) .rt-ChatbarBox {
-  backdrop-filter: none;
-  --backdrop-filter-components: none;
-}
-
 /* Sizes (padding and radius via tokens) */
 @breakpoints {
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
     /* Map Chatbar size 1 to Card size 2 */
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
-    padding: var(--space-3);
+    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+    padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
     font-size: var(--font-size-1);
@@ -242,8 +220,8 @@
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
     /* Map Chatbar size 2 to Card size 3 */
-    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
     font-size: var(--font-size-2);
@@ -252,8 +230,8 @@
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
     /* Custom Chatbar size 3, different to Card size 4 */
-    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
-    padding: var(--space-4);
+    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+    padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
     font-size: var(--font-size-3);
@@ -265,10 +243,10 @@
 /* Only enforce min-height when expanded */
 @breakpoints {
   .rt-ChatbarRoot:where([data-state='open'].rt-r-size-1) .rt-ChatbarBox {
-    min-height: var(--space-8);
+    min-height: var(--space-9);
   }
   .rt-ChatbarRoot:where([data-state='open'].rt-r-size-2) .rt-ChatbarBox {
-    min-height: var(--space-9);
+    min-height: var(--space-10);
   }
   .rt-ChatbarRoot:where([data-state='open'].rt-r-size-3) .rt-ChatbarBox {
     min-height: 80px;
@@ -278,13 +256,13 @@
 /* Reduced radius when collapsed (scale down by 1) */
 @breakpoints {
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-1) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
+    border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
   }
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-2) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
+    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
   }
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-3) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
+    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
   }
 }
 
@@ -303,9 +281,7 @@
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
   --v-bg: var(--accent-3);
-  --v-bg-a: var(--accent-a3);
   --v-bg-hover: var(--accent-4);
-  --v-bg-hover-a: var(--accent-a4);
 }
 
 /* Ghost variant palette */
@@ -314,11 +290,8 @@
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
   --v-bg: transparent;
-  --v-bg-a: transparent;
   --v-bg-hover: var(--accent-3);
-  --v-bg-hover-a: var(--accent-a3);
   --v-bg-focus: var(--accent-2);
-  --v-bg-focus-a: var(--accent-a2);
 }
 
 /* Outline variant palette */
@@ -327,15 +300,10 @@
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
   --v-bg: transparent;
-  --v-bg-a: transparent;
   --v-bg-hover: var(--accent-2);
-  --v-bg-hover-a: var(--accent-a2);
   --v-border: var(--accent-6);
-  --v-border-a: var(--accent-a6);
   --v-border-hover: var(--accent-7);
-  --v-border-hover-a: var(--accent-a7);
   --v-border-focus: var(--accent-8);
-  --v-border-focus-a: var(--accent-a8);
 }
 
 /* Surface variant palette */
@@ -344,17 +312,11 @@
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
   --v-bg: var(--accent-2);
-  --v-bg-a: var(--accent-a2);
   --v-bg-hover: var(--accent-3);
-  --v-bg-hover-a: var(--accent-a3);
   --v-bg-focus: var(--accent-2);
-  --v-bg-focus-a: var(--accent-a2);
   --v-border: var(--accent-6);
-  --v-border-a: var(--accent-a6);
   --v-border-hover: var(--accent-7);
-  --v-border-hover-a: var(--accent-a7);
   --v-border-focus: var(--accent-8);
-  --v-border-focus-a: var(--accent-a8);
 }
 
 /***************************************************************************************************
@@ -368,20 +330,12 @@
 
 .rt-ChatbarBox:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
   /* Rest state */
-  background-color: color-mix(
-    in srgb,
-    var(--v-bg-a) calc(var(--material-alpha) * 100%),
-    var(--v-bg) var(--material-blend)
-  );
+  background-color: var(--v-bg);
 
   /* Hover state */
   @media (hover: hover) {
     &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
-      background-color: color-mix(
-        in srgb,
-        var(--v-bg-hover-a) calc(var(--material-alpha) * 100%),
-        var(--v-bg-hover) var(--material-blend)
-      );
+      background-color: var(--v-bg-hover);
     }
   }
 
@@ -395,52 +349,32 @@
 /* Border variants: outline and surface */
 .rt-ChatbarBox:where(.rt-variant-outline, .rt-variant-surface) {
   /* Rest state border */
-  box-shadow: inset 0 0 0 1px color-mix(
-    in srgb,
-    var(--v-border-a) calc(var(--material-alpha) * 100%),
-    var(--v-border) var(--material-blend)
-  );
+  box-shadow: inset 0 0 0 1px var(--v-border);
 
   /* Hover state border */
   @media (hover: hover) {
     &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
-      box-shadow: inset 0 0 0 1px color-mix(
-        in srgb,
-        var(--v-border-hover-a) calc(var(--material-alpha) * 100%),
-        var(--v-border-hover) var(--material-blend)
-      );
+      box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
   }
 
   /* Focus state border */
   &:where(:focus-within) {
-    box-shadow: inset 0 0 0 var(--text-area-border-width) color-mix(
-      in srgb,
-      var(--v-border-focus-a) calc(var(--material-alpha) * 100%),
-      var(--v-border-focus) var(--material-blend)
-    );
+    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--v-border-focus);
   }
 }
 
 /* Ghost focus state - needs background on focus */
 .rt-ChatbarBox:where(.rt-variant-ghost) {
   &:where(:focus-within) {
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-focus-a, var(--v-bg-a)) calc(var(--material-alpha) * 100%),
-      var(--v-bg-focus, var(--v-bg)) var(--material-blend)
-    );
+    background-color: var(--v-bg-focus, var(--v-bg));
   }
 }
 
 /* Surface focus state - background changes on focus */
 .rt-ChatbarBox:where(.rt-variant-surface) {
   &:where(:focus-within) {
-    background-color: color-mix(
-      in srgb,
-      var(--v-bg-focus-a, var(--v-bg-a)) calc(var(--material-alpha) * 100%),
-      var(--v-bg-focus, var(--v-bg)) var(--material-blend)
-    );
+    background-color: var(--v-bg-focus, var(--v-bg));
   }
 }
 
@@ -461,24 +395,10 @@
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
 
-  /* Translucent theme override (ancestor match, zero added specificity so hover still wins) */
-  :where([data-material='translucent']) & {
-    background-color: var(--color-surface-translucent);
-  }
-
-  /* Explicit solid material on the component beats an inherited translucent theme */
-  :where(.rt-ChatbarRoot[data-material='solid']) & {
-    background-color: var(--color-surface-solid);
-  }
-
   /* Hover effects */
   @media (hover: hover) {
     &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
-      background-color: color-mix(
-        in srgb,
-        var(--accent-a2) calc(var(--material-alpha) * 100%),
-        var(--accent-2) var(--material-blend)
-      );
+      background-color: var(--accent-2);
       box-shadow: var(--shadow-3);
     }
   }
@@ -562,7 +482,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 /* Reduced motion */
@@ -573,21 +493,21 @@
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 /* Row slot positioning */
 .rt-ChatbarRowStart {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   flex-shrink: 0;
 }
 
 .rt-ChatbarRowEnd {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   flex-shrink: 0;
   margin-left: auto;
 }
@@ -598,19 +518,19 @@
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
-      /* --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1))); */
+      /* --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2))); */
       --chatbar-attachments-radius: var(--radius-1);
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
-      /* --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2))); */
+      /* --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3))); */
       --chatbar-attachments-radius: var(--radius-2);
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
-      /* --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3))); */
+      /* --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4))); */
       --chatbar-attachments-radius: var(--radius-3);
     }
   }
@@ -626,13 +546,13 @@
 .rt-ChatbarNotices {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
-  margin-bottom: var(--space-2);
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
 }
 
 /* Context is quiet text below the box, inset to line up with the text inside it. */
 .rt-ChatbarContext {
-  padding: var(--space-2) var(--space-3) 0;
+  padding: var(--space-3) var(--space-4) 0;
   min-width: 0;
   overflow-wrap: anywhere;
 }

package/src/components/chatbar.tsx

@@ -215,8 +215,6 @@ interface ChatbarRootBaseProps {
   color?: (typeof accentColors)[number];
   /** Optional radius override (matches TextArea) */
   radius?: (typeof radii)[number];
-  /** Panel/material translucency flags (matches TextArea) */
-  material?: 'solid' | 'translucent';
 
   width?: React.CSSProperties['width'];
   maxWidth?: React.CSSProperties['maxWidth'];
@@ -321,7 +319,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     variant,
     color,
     radius,
-    material,
     width,
     maxWidth,
     attachments: attachmentsProp,
@@ -342,7 +339,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     context,
     ...divProps
   } = props;
-  const effectiveMaterial = material;
 
   const isValueControlled = valueProp != null;
   const [valueUncontrolled, setValueUncontrolled] = React.useState<string>(defaultValue);
@@ -703,7 +699,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
               data-drop-active={dragActive ? '' : undefined}
               data-accent-color={color}
               data-radius={radius}
-              data-material={effectiveMaterial}
               onBlurCapture={handleBlurCapture}
             >
               <input
@@ -725,7 +720,6 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                   style={{ position: 'relative' }}
                   data-accent-color={color}
                   data-radius={radius}
-                  data-material={effectiveMaterial}
                 >
                   <div className="rt-ChatbarGrid">
                     {children}
@@ -1040,7 +1034,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
     <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
         <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal" size="1">
-          <Flex align="center" gap="2" minWidth="fit-content">
+          <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
                 {renderAttachment?.(att)}

package/src/components/checkbox-cards.css

@@ -15,7 +15,7 @@
 
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
   cursor: var(--cursor-button);
   -webkit-tap-highlight-color: transparent;
 
@@ -61,7 +61,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
     }
     
 
@@ -71,7 +71,7 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--space-4);
+      --checkbox-cards-item-checkbox-size: var(--space-5);
     }
     /* Size 3 */
     &:where(.rt-r-size-3) {
@@ -79,7 +79,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
     }
     /* Size 4 */
     &:where(.rt-r-size-4) {
@@ -87,7 +87,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
     }
     /* Size 5 */
     &:where(.rt-r-size-5) {
@@ -95,7 +95,7 @@
       --line-height: var(--line-height-4);
       --letter-spacing: var(--letter-spacing-4);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: calc(var(--space-6) * var(--spacing-multiplier-medium));
     }
   }
 }
@@ -150,19 +150,19 @@
 @breakpoints {
   .rt-CheckboxCardsItem {
     &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
     }
     &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
     }
     &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
     }
     &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-4)));
+      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
     }
     &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
+      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
     }
   }
 }

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

@@ -8,20 +8,17 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4', '5'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
-const materials = ['solid', 'translucent'] as const;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
   gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
 };

package/src/components/checkbox-cards.tsx

@@ -12,7 +12,6 @@ import { Grid } from './grid.js';
 import { ThickCheckIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
-import { useThemeContext } from './theme.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { MarginProps } from '../props/margin.props.js';
@@ -45,13 +44,10 @@ interface CheckboxCardsRootProps
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
   (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const themeContext = useThemeContext();
-    const resolvedMaterial = props.material ?? themeContext.material;
     const {
       __scopeCheckboxCards,
       className,
       color,
-      material: _material,
       ...rootProps
     } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
@@ -65,7 +61,6 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
           <CheckboxGroupPrimitive.Root
             {...checkboxGroupScope}
             data-accent-color={color}
-            data-material={resolvedMaterial}
             {...rootProps}
             ref={forwardedRef}
             className={classNames('rt-CheckboxCardsRoot', className)}

package/src/components/checkbox-group.css

@@ -1,7 +1,7 @@
 .rt-CheckboxGroupRoot {
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }
 
 .rt-CheckboxGroupItem {

package/src/components/combobox.css

@@ -10,7 +10,7 @@
  * only, so these are the popover behaviours it still needs. Padding lives on
  * the search row and the viewport. */
 .rt-ComboboxContent {
-  --combobox-list-max-height: calc(300px * var(--scaling));
+  --combobox-list-max-height: calc(300px * var(--scale));
 
   min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
@@ -68,11 +68,11 @@
 
 /* Room for the check indicator on every size */
 .rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
+  --base-menu-item-padding-left: calc(var(--space-6) / 1.2);
 }
 
 .rt-BaseMenuContent:where(.rt-r-size-2, .rt-r-size-3) :where(.rt-ComboboxItem, .rt-ComboboxLabel) {
-  --base-menu-item-padding-left: var(--space-5);
+  --base-menu-item-padding-left: var(--space-6);
 }
 
 /* Search row: shares the surface background, no second panel */
@@ -94,11 +94,6 @@
   background-color: var(--accent-4);
 }
 
-.rt-BaseMenuContent:where(.rt-variant-soft):where([data-material='translucent'])
-  :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-a4);
-}
-
 :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
   color: var(--gray-11);
 }
@@ -116,7 +111,7 @@
 
 /* Empty state */
 .rt-ComboboxEmpty {
-  padding: var(--space-4);
+  padding: var(--space-5);
   text-align: center;
   color: var(--gray-a11);
   font-size: var(--font-size-2);

package/src/components/combobox.props.tsx

@@ -23,7 +23,6 @@ const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as con
  */
 const comboboxTriggerPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
-  material: { type: 'enum', values: ['solid', 'translucent'] },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },
@@ -34,7 +33,6 @@ const comboboxTriggerPropDefs = {
   placeholder: { type: 'string' },
 } satisfies {
   variant: PropDef<(typeof triggerVariants)[number]>;
-  material: PropDef<'solid' | 'translucent'>;
   error: PropDef<boolean>;
   loading: PropDef<boolean>;
   disabled: PropDef<boolean>;
@@ -45,7 +43,6 @@ const comboboxTriggerPropDefs = {
 
 // The list is a menu, and menus stop at size 3.
 const contentSizes = ['1', '2', '3'] as const;
-const materials = ['solid', 'translucent'] as const;
 
 /**
  * Styling props for the dropdown surface rendered by Combobox.Content.
@@ -53,14 +50,12 @@ const materials = ['solid', 'translucent'] as const;
 const comboboxContentPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: contentSizes, default: '2', responsive: true },
   ...colorPropDef,
-  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
   ...heightPropDefs,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;