@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

package/src/components/avatar.tsx

@@ -15,17 +15,29 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 
 interface AvatarProps extends MarginProps, AvatarImplProps {}
 const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwardedRef) => {
-  const { asChild, children, className, style, color, radius, ...imageProps } = extractProps(
-    props,
-    avatarPropDefs,
-    marginPropDefs
-  );
+  const { asChild, children, className, style, color, radius, panelBackground, ...imageProps } =
+    extractProps(props, avatarPropDefs, marginPropDefs);
+
+  // Check if children contain a disabled element
+  const isDisabled = React.useMemo(() => {
+    if (!asChild || !children) return false;
+
+    // If children is a React element, check its props
+    if (React.isValidElement(children)) {
+      const childProps = children.props as any;
+      return childProps.disabled === true || childProps['data-disabled'] === true;
+    }
+
+    return false;
+  }, [asChild, children]);
 
   return (
     // TODO as a rule, should we rather spread the props on root?
     <AvatarPrimitive.Root
       data-accent-color={color}
       data-radius={radius}
+      data-panel-background={panelBackground}
+      data-disabled={isDisabled || undefined}
       className={classNames('rt-reset', 'rt-AvatarRoot', className)}
       style={style}
       asChild={asChild}
@@ -49,6 +61,7 @@ interface AvatarImplProps
 const AvatarImpl = React.forwardRef<AvatarImplElement, AvatarImplProps>(
   ({ fallback, ...imageProps }, forwardedRef) => {
     const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+
     return (
       <>
         {status === 'idle' || status === 'loading' ? <span className="rt-AvatarFallback" /> : null}
@@ -76,7 +89,7 @@ const AvatarImpl = React.forwardRef<AvatarImplElement, AvatarImplProps>(
         />
       </>
     );
-  }
+  },
 );
 
 AvatarImpl.displayName = 'AvatarImpl';

package/src/components/badge.css

@@ -1,3 +1,6 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target individual element types. */
+
 .rt-Badge {
   display: inline-flex;
   align-items: center;
@@ -7,9 +10,21 @@
   font-style: normal;
   flex-shrink: 0;
   line-height: 1;
+  transition: var(--transition-badge);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
+  
+  /* Fix Chrome background bleeding on rounded corners */
+  background-clip: padding-box;
+  
+  /* Force Chrome to recalculate styles when radius changes */
+  will-change: border-radius;
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 /***************************************************************************************************
@@ -21,12 +36,18 @@
 @breakpoints {
   .rt-Badge {
     &:where(.rt-r-size-1) {
-      font-size: var(--font-size-1);
-      line-height: var(--line-height-1);
-      letter-spacing: var(--letter-spacing-1);
+      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);
       gap: calc(var(--space-1) * 1.5);
       border-radius: max(var(--radius-1), var(--radius-full));
+      
+      /* Ghost variant gets reduced padding */
+      &:where(.rt-variant-ghost) {
+        padding: calc(var(--space-1) * 0.25) var(--space-1);
+        gap: var(--space-1);
+      }
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-1);
@@ -35,6 +56,12 @@
       padding: var(--space-1) var(--space-2);
       gap: calc(var(--space-1) * 1.5);
       border-radius: max(var(--radius-2), var(--radius-full));
+      
+      /* Ghost variant gets reduced padding */
+      &:where(.rt-variant-ghost) {
+        padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.25);
+        gap: var(--space-1);
+      }
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-2);
@@ -43,6 +70,12 @@
       padding: var(--space-1) calc(var(--space-2) * 1.25);
       gap: var(--space-2);
       border-radius: max(var(--radius-2), var(--radius-full));
+      
+      /* Ghost variant gets reduced padding */
+      &:where(.rt-variant-ghost) {
+        padding: calc(var(--space-1) * 0.75) var(--space-2);
+        gap: calc(var(--space-1) * 1.5);
+      }
     }
   }
 }
@@ -78,10 +111,33 @@
 /* surface */
 
 .rt-Badge:where(.rt-variant-surface) {
-  background-color: var(--accent-surface);
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  /* Base state: solid accent for solid panels */
+  background-color: var(--accent-2);
+  box-shadow: inset 0 0 0 1px var(--accent-7);
   color: var(--accent-a11);
 
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 1px var(--accent-a7);
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &:where(.rt-high-contrast) {
     color: var(--accent-12);
   }
@@ -90,8 +146,29 @@
 /* soft */
 
 .rt-Badge:where(.rt-variant-soft) {
-  background-color: var(--accent-a3);
+  /* Base state: solid accent for solid panels */
+  background-color: var(--accent-3);
   color: var(--accent-a11);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--accent-3);
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &:where(.rt-high-contrast) {
     color: var(--accent-12);
   }
@@ -100,10 +177,148 @@
 /* outline */
 
 .rt-Badge:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-a8);
+  /* Base state: solid accent for solid panels */
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--accent-7);
   color: var(--accent-a11);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+    
+    /* High contrast adjustments */
     box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
+    
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--accent-a7), inset 0 0 0 1px var(--gray-a11);
+    }
+  }
+}
+
+/* ghost */
+
+.rt-Badge:where(.rt-variant-ghost) {
+  /* Transparent by default */
+  background-color: transparent;
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+/* classic */
+
+.rt-Badge:where(.rt-variant-classic) {
+  position: relative;
+  top: var(--classic-elevation-offset);
+  color: var(--accent-a11);
+  background-color: var(--accent-2);
+      /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+          /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+  }
+
+  &:where(.rt-high-contrast) {
     color: var(--accent-12);
+    background-color: var(--accent-2);
+  }
+
+  &:where(:any-link, button) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--accent-3);
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 var(--classic-border-width) var(--white-a12),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+          0 0 0 var(--classic-border-width) var(--accent-a5),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7),
+          0 0 0 var(--classic-border-width) var(--accent-a5);
+
+        :where(.dark, .dark-theme) &,
+        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+          /* prettier-ignore */
+          box-shadow:
+            inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+            inset 0 var(--classic-border-width) var(--accent-a11),
+            inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+            inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+            0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+            0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
+            0 0 0 var(--classic-border-width) var(--accent-a5);
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      background-color: var(--accent-3);
+              /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 var(--classic-border-width) var(--white-a12),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+          0 0 0 var(--classic-border-width) var(--accent-a5),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7),
+          0 0 0 var(--classic-border-width) var(--accent-a5);
+
+      :where(.dark, .dark-theme) &,
+      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+          inset 0 var(--classic-border-width) var(--accent-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
+          0 0 0 var(--classic-border-width) var(--accent-a5);
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      padding-top: calc(var(--space-1) * 0.75);
+      padding-bottom: calc(var(--space-1) * 0.25);
+      background-color: var(--accent-3);
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+    }
+    &:where(:focus-visible) {
+      outline: 2px solid var(--focus-8);
+    }
   }
 }

package/src/components/badge.props.tsx

@@ -6,18 +6,20 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['solid', 'soft', 'surface', 'outline'] as const;
+const variants = ['solid', 'soft', 'surface', 'outline', 'ghost', 'classic'] as const;
 
 const badgePropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },
   ...accentColorPropDef,
   ...highContrastPropDef,
   ...radiusPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<'solid' | 'translucent'>;
 };
 
 export { badgePropDefs };

package/src/components/badge.tsx

@@ -17,16 +17,17 @@ interface BadgeProps
     MarginProps,
     BadgeOwnProps {}
 const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) => {
-  const { asChild, className, color, radius, ...badgeProps } = extractProps(
+  const { asChild, className, color, radius, panelBackground, ...badgeProps } = extractProps(
     props,
     badgePropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
   const Comp = asChild ? Slot.Root : 'span';
   return (
     <Comp
       data-accent-color={color}
       data-radius={radius}
+      data-panel-background={panelBackground}
       {...badgeProps}
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-Badge', className)}

package/src/components/button.css

@@ -24,15 +24,15 @@
 @breakpoints {
   .rt-Button {
     &:where(.rt-r-size-1) {
-      gap: var(--space-1);
+      gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: calc(var(--space-3) * 1.175);
-        height: calc(var(--space-3) * 1.175);
+        width: var(--content-icon-size-1);
+        height: var(--content-icon-size-1);
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -40,21 +40,21 @@
         padding-right: var(--space-2);
       }
       &:where(.rt-variant-ghost) {
-        gap: var(--space-1);
+        gap: var(--component-gap-ghost-1);
         --button-ghost-padding-x: var(--space-2);
         --button-ghost-padding-y: var(--space-1);
       }
     }
     &:where(.rt-r-size-2) {
-      gap: var(--space-2);
+      gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -62,21 +62,21 @@
         padding-right: var(--space-3);
       }
       &:where(.rt-variant-ghost) {
-        gap: var(--space-1);
+        gap: var(--component-gap-ghost-2);
         --button-ghost-padding-x: var(--space-2);
         --button-ghost-padding-y: var(--space-1);
       }
     }
     &:where(.rt-r-size-3) {
-      gap: var(--space-3);
+      gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-5);
-        height: var(--space-5);
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -84,21 +84,21 @@
         padding-right: var(--space-4);
       }
       &:where(.rt-variant-ghost) {
-        gap: var(--space-2);
+        gap: var(--component-gap-ghost-3);
         --button-ghost-padding-x: var(--space-3);
         --button-ghost-padding-y: calc(var(--space-1) * 1.5);
       }
     }
     &:where(.rt-r-size-4) {
-      gap: var(--space-3);
+      gap: var(--component-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-5);
-        height: var(--space-5);
+        width: var(--content-icon-size-4);
+        height: var(--content-icon-size-4);
       }
 
       &:where(:not(.rt-variant-ghost)) {
@@ -106,7 +106,7 @@
         padding-right: var(--space-5);
       }
       &:where(.rt-variant-ghost) {
-        gap: var(--space-2);
+        gap: var(--component-gap-ghost-4);
         --button-ghost-padding-x: var(--space-4);
         --button-ghost-padding-y: var(--space-2);
       }
@@ -120,6 +120,6 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-Button:where(:not(.rt-variant-ghost)) {
+.rt-Button {
   font-weight: var(--font-weight-medium);
 }

package/src/components/callout.css

@@ -5,6 +5,7 @@
   justify-content: flex-start;
   text-align: left;
   color: var(--accent-a11);
+  transition: var(--transition-card);
 
   &:where(.rt-high-contrast) {
     color: var(--accent-12);
@@ -18,7 +19,14 @@
   height: var(--callout-icon-height);
 }
 
-/* Anything that’s not an icon goes to the right of the icon */
+/* stylelint-disable-next-line selector-max-type */
+.rt-CalloutIcon :where(svg) {
+  width: var(--callout-icon-size);
+  height: var(--callout-icon-size);
+  flex-shrink: 0;
+}
+
+/* Anything that's not an icon goes to the right of the icon */
 .rt-CalloutRoot > :where(:not(.rt-CalloutIcon)) {
   grid-column-start: -1;
 }
@@ -36,7 +44,8 @@
       column-gap: var(--space-2);
       padding: var(--space-3);
       border-radius: var(--radius-3);
-      --callout-icon-height: var(--line-height-2);
+      --callout-icon-height: var(--line-height-1);
+      --callout-icon-size: var(--content-icon-size-1);
     }
     &:where(.rt-r-size-2) {
       row-gap: var(--space-2);
@@ -44,6 +53,7 @@
       padding: var(--space-4);
       border-radius: var(--radius-4);
       --callout-icon-height: var(--line-height-2);
+      --callout-icon-size: var(--content-icon-size-2);
     }
     &:where(.rt-r-size-3) {
       row-gap: var(--space-3);
@@ -51,6 +61,7 @@
       padding: var(--space-5);
       border-radius: var(--radius-5);
       --callout-icon-height: var(--line-height-3);
+      --callout-icon-size: var(--content-icon-size-3);
     }
   }
 }
@@ -64,18 +75,76 @@
 /* soft */
 
 .rt-CalloutRoot:where(.rt-variant-soft) {
-  background-color: var(--accent-a3);
+  /* Base state: solid colors for solid panels */
+  background-color: var(--accent-3);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--accent-3);
+    backdrop-filter: none;
+    --backdrop-filter-panel: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--accent-a3);
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+  }
 }
 
 /* surface */
 
 .rt-CalloutRoot:where(.rt-variant-surface) {
-  box-shadow: inset 0 0 0 1px var(--accent-a6);
-  background-color: var(--accent-a2);
+  /* Base state: solid colors for solid panels */
+  background-color: var(--accent-2);
+  box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-6);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-a6);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-6);
+    backdrop-filter: none;
+    --backdrop-filter-panel: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--accent-a2);
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-a6);
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+  }
 }
 
 /* outline */
 
 .rt-CalloutRoot:where(.rt-variant-outline) {
-  box-shadow: inset 0 0 0 1px var(--accent-a7);
+  /* Base state: solid colors for solid panels */
+  box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-7);
+
+  /* Theme-level translucent override */
+  :where([data-panel-background='translucent']) & {
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-a7);
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-7);
+  }
+
+  &:where([data-panel-background='translucent']) {
+    box-shadow: inset 0 0 0 var(--border-width-standard) var(--accent-a7);
+  }
 }

package/src/components/callout.props.tsx

@@ -6,6 +6,7 @@ import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
 const variants = ['soft', 'surface', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const calloutRootPropDefs = {
   ...asChildPropDef,
@@ -13,9 +14,11 @@ const calloutRootPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...accentColorPropDef,
   ...highContrastPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { calloutRootPropDefs };