@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/popup-motion.css

@@ -1,6 +1,5 @@
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
-    outline-style: none;
     transition-property: translate;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
@@ -27,42 +26,17 @@
     translate: 100% 0;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow-shape"]) {
-    fill: currentcolor;
-  }
-
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"]) {
-    font-size: var(--text-xs);
-    line-height: var(--text-xs--line-height);
+    font-size: var(--text-label);
+    line-height: 1.35;
     text-wrap: balance;
-    outline-style: none;
-    --_popup-tooltip-content-transition-property: opacity, scale;
-    transition-property: var(--_popup-tooltip-content-transition-property);
+    transition-property: opacity, scale;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
   }
 
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-instant]) {
-    --_popup-tooltip-content-transition-property: none;
-    transition-property: var(--_popup-tooltip-content-transition-property);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-ending-style]) {
-    --_popup-tooltip-content-opacity: 0%;
-    opacity: var(--_popup-tooltip-content-opacity);
-    --_popup-tooltip-content-scale: 95% 95%;
-    scale: var(--_popup-tooltip-content-scale);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-starting-style]) {
-    --_popup-tooltip-content-opacity: 0%;
-    opacity: var(--_popup-tooltip-content-opacity);
-    --_popup-tooltip-content-scale: 95% 95%;
-    scale: var(--_popup-tooltip-content-scale);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="positioner"]) {
-    outline-style: none;
+    transition-property: none;
   }
 
   :where(
@@ -76,19 +50,4 @@
     --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);
     border-radius: var(--_popup-tooltip-content-radius);
   }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="top"]) {
-    --_popup-tooltip-arrow-rotate: 180deg;
-    rotate: var(--_popup-tooltip-arrow-rotate);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="left"]) {
-    --_popup-tooltip-arrow-rotate: 90deg;
-    rotate: var(--_popup-tooltip-arrow-rotate);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="right"]) {
-    --_popup-tooltip-arrow-rotate: calc(90deg * -1);
-    rotate: var(--_popup-tooltip-arrow-rotate);
-  }
 }

package/dist/styles/recipes/popup-toast.css

@@ -1,10 +1,17 @@
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"]) {
+    --cui-popup-title-font-size: var(--text-body);
+    --cui-popup-title-line-height: 1.35;
+    --cui-popup-status-success-foreground: var(--success-text);
+    --cui-popup-status-warning-foreground: var(--warning-text);
+    --cui-popup-status-info-foreground: var(--info-text);
+    --cui-popup-status-error-foreground: var(--destructive);
     --_toast-swipe-x: var(--toast-swipe-movement-x);
     --_toast-swipe-y: var(--toast-swipe-movement-y);
+    --_toast-y: calc(var(--_toast-swipe-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)));
+    --_toast-scale: var(--scale);
     transform-origin: bottom;
-    transform: translateX(var(--_toast-swipe-x))
-      translateY(calc(var(--_toast-swipe-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)))) scale(var(--scale));
+    transform: translateX(var(--_toast-swipe-x)) translateY(var(--_toast-y)) scale(var(--_toast-scale));
     transition:
       transform var(--duration-slow) var(--ease-emphasized),
       opacity var(--duration-slow) var(--ease-standard),
@@ -16,16 +23,21 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-expanded]) {
-    transform: translateX(var(--_toast-swipe-x)) translateY(var(--offset-y));
+    --_toast-y: var(--offset-y);
+    --_toast-scale: 1;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-starting-style]) {
+    transform: translateY(150%);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-starting-style]),
   :where(
     [data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style]:not([data-limited]):not(
       [data-swipe-direction]
     )
   ) {
-    transform: translateY(150%);
+    transform: translateX(var(--_toast-swipe-x)) translateY(calc(var(--_toast-y) + var(--spacing) * 3)) scale(var(--_toast-scale));
+    transition-duration: var(--duration-fast);
   }
 
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style][data-swipe-direction="down"]) {
@@ -63,38 +75,55 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="indicator"]) {
-    --_toast-indicator-background: var(--foreground);
-    margin-block-start: calc(var(--spacing) * 1.5);
-    inline-size: calc(var(--spacing) * 2);
-    block-size: calc(var(--spacing) * 2);
-    border-radius: 9999px;
-    background: var(--_toast-indicator-background);
+    display: flex;
+    align-items: center;
+    block-size: 1lh;
+    font-size: var(--cui-popup-title-font-size);
+    line-height: var(--cui-popup-title-line-height);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="error"] [data-slot="indicator"]) {
-    --_toast-indicator-background: var(--destructive);
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="success"] [data-slot="indicator"]) {
+    color: var(--cui-popup-status-success-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="warning"] [data-slot="indicator"]) {
+    color: var(--cui-popup-status-warning-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="title"]) {
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.025em;
-    text-wrap: balance;
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="info"] [data-slot="indicator"]) {
+    color: var(--cui-popup-status-info-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-body);
-    text-wrap: pretty;
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="error"] [data-slot="indicator"]) {
+    color: var(--cui-popup-status-error-foreground);
   }
 
   :where([data-control-family="button"][data-popup-kind="toast"][data-popup-part="close"]) {
     margin-block-start: calc(var(--spacing) * -1);
     margin-inline-end: calc(var(--spacing) * -1);
   }
+}
 
-  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="viewport"]) {
-    outline-style: none;
-  }
+@property --cui-popup-status-success-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-status-warning-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-status-info-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-status-error-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
 }

package/dist/styles/recipes/popup.css

@@ -9,25 +9,46 @@
     --cui-popup-border-width: var(--control-rim-width);
     --cui-popup-shadow: var(--shadow-pop);
     --cui-popup-backdrop-filter: blur(var(--backdrop-blur-popover));
+    --cui-popup-title-foreground: var(--cui-popup-foreground);
+    --cui-popup-title-font-size: var(--text-heading-3);
+    --cui-popup-title-font-weight: var(--font-weight-semibold);
+    --cui-popup-title-line-height: var(--text-heading-3--line-height);
+    --cui-popup-title-letter-spacing: -0.025em;
+    --cui-popup-description-foreground: var(--muted-foreground);
+    --cui-popup-close-inset: calc(var(--spacing) * 3);
     --cui-popup-item-radius: var(--radius-popup-item-fit);
     --cui-popup-item-foreground: var(--foreground);
+    --cui-popup-item-font-size: var(--text-body);
+    --cui-popup-item-icon-size: 1rem;
+    --cui-popup-item-padding-block: calc(var(--spacing) * 1);
+    --cui-popup-item-padding-inline: calc(var(--padding-x) * 0.5);
+    --cui-popup-item-inset: calc(var(--spacing) * 8);
+    --cui-popup-item-min-height: max(var(--target-min), var(--control-h-xs));
     --cui-popup-item-highlight-background: var(--hover-fill);
     --cui-popup-item-highlight-foreground: var(--cui-popup-item-foreground);
     --cui-popup-item-highlight-muted-foreground: var(--muted-foreground);
-    --cui-popup-item-disabled-opacity: 0.4;
+    --cui-popup-item-highlight-shadow: inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.35);
+    --cui-popup-item-disabled-opacity: var(--disabled-opacity);
+    --cui-popup-label-padding-block: var(--cui-popup-item-padding-block);
+    --cui-popup-label-padding-inline: var(--cui-popup-item-padding-inline);
+    --cui-popup-label-font-size: var(--text-micro);
+    --cui-popup-label-font-weight: var(--font-weight-medium);
+    --cui-popup-label-letter-spacing: 0.08em;
+    --cui-popup-label-text-transform: uppercase;
     --cui-popup-separator-color: var(--border);
+    --cui-popup-separator-inset: calc(var(--popover-padding) * -1);
     --cui-popup-shortcut-foreground: var(--muted-foreground);
-    --_popup-transform-origin: var(--transform-origin);
+    --cui-popup-shortcut-font-size: var(--text-body);
+    --cui-popup-shortcut-letter-spacing: 0.02em;
     border-radius: var(--cui-popup-radius);
     background-color: var(--cui-popup-background);
     box-shadow:
       inset 0 0 0 var(--cui-popup-border-width) var(--cui-popup-border-color),
       var(--cui-popup-shadow);
     color: var(--cui-popup-foreground);
-    outline: none;
     -webkit-backdrop-filter: var(--cui-popup-backdrop-filter, none);
     backdrop-filter: var(--cui-popup-backdrop-filter, none);
-    transform-origin: var(--_popup-transform-origin);
+    transform-origin: var(--transform-origin);
   }
   :where([data-control-family="popup"][data-popup-part="surface"]:not([data-popup-static]):not([data-slot="viewport"])),
   :where([data-control-family="popup"][data-popup-part="list-surface"]) {
@@ -39,12 +60,21 @@
   :where(
     [data-control-family="popup"][data-popup-part="surface"]:not(
       :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
-    ):not([data-slot="viewport"]):where([data-starting-style], [data-ending-style])
+    ):not([data-slot="viewport"])[data-starting-style]
   ),
-  :where([data-control-family="popup"][data-popup-part="list-surface"]:where([data-starting-style], [data-ending-style])) {
+  :where([data-control-family="popup"][data-popup-part="list-surface"][data-starting-style]) {
     scale: 0.95;
     opacity: 0;
   }
+  :where(
+    [data-control-family="popup"][data-popup-part="surface"]:not(
+      :is([data-popup-kind="sheet"], [data-popup-kind="drawer"], [data-popup-kind="toast"])
+    ):not([data-slot="viewport"])[data-ending-style]
+  ),
+  :where([data-control-family="popup"][data-popup-part="list-surface"][data-ending-style]) {
+    opacity: 0;
+    transition-duration: var(--duration-fast);
+  }
   @starting-style {
     :where(
         [data-control-family="popup"][data-popup-part="surface"]:not(
@@ -59,8 +89,9 @@
   :where([data-control-family="popup"][data-popup-part="backdrop"]) {
     --cui-popup-backdrop-background: oklch(from var(--foreground) l c h / var(--overlay-opacity));
     background-color: var(--cui-popup-backdrop-background);
-    -webkit-backdrop-filter: blur(var(--backdrop-blur-overlay));
-    backdrop-filter: blur(var(--backdrop-blur-overlay));
+    --cui-popup-backdrop-blur: blur(var(--backdrop-blur-overlay));
+    -webkit-backdrop-filter: var(--cui-popup-backdrop-blur);
+    backdrop-filter: var(--cui-popup-backdrop-blur);
     transition: opacity var(--duration-base) var(--ease-emphasized);
   }
   :where(.dark [data-control-family="popup"][data-popup-part="backdrop"]) {
@@ -70,18 +101,23 @@
     opacity: 0;
   }
   :where([data-control-family="popup"][data-popup-part="list-surface"]) {
+    max-block-size: var(--available-height);
     padding: var(--popover-padding);
-  }
-  :where([data-control-family="popup"][data-popup-part="bar"]) {
-    --cui-popup-radius: var(--radius-control);
-    --cui-popup-background: var(--card);
-    --cui-popup-shadow: var(--shadow-xs);
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
   :where([data-control-family="popup"][data-popup-part="surface"][data-surface="modal"]) {
     --cui-popup-radius: var(--radius-panel);
     --cui-popup-shadow: var(--shadow-modal);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-popup-part="surface"]),
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-popup-part="surface"]) {
+    max-block-size: calc(100dvh - 24vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-popup-part="surface"]) {
     --cui-popup-radius: var(--radius-control);
     --cui-popup-background: var(--foreground);
@@ -90,76 +126,33 @@
 
   :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
     --cui-popup-radius: 0px;
-    --cui-popup-shadow: var(--shadow-modal);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="title"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="title"]) {
-    font-size: var(--text-heading-3);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.025em;
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="description"]),
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-body);
-    text-wrap: pretty;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]) {
-    font-weight: var(--font-weight-semibold);
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"]) {
-    color: var(--cui-popup-background);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"]) {
-    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="content"]),
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="header"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="footer"]),
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="footer"]) {
-    gap: calc(var(--spacing) * 2);
-    padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding: calc(var(--spacing) * 4);
+    --cui-popup-shadow: var(--shadow-overlay);
+    max-block-size: 100dvh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 1.5);
-    padding-block-end: calc(var(--spacing) * 3);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"][data-padding="default"]),
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-popup-part="surface"]),
   :where([data-control-family="popup"][data-popup-kind="hover-card"][data-popup-part="surface"]) {
-    padding: calc(var(--spacing) * 4);
+    --cui-popup-title-font-size: var(--text-body);
+    --cui-popup-title-line-height: 1.35;
+    --cui-popup-title-letter-spacing: -0.01em;
+    max-block-size: var(--available-height);
+    max-inline-size: var(--available-width);
+    overflow: auto;
+    overscroll-behavior: contain;
   }
 
   :where([data-control-family="popup"][data-popup-part="item"]) {
     gap: calc(var(--spacing) * 2);
-    min-block-size: var(--control-h-xs);
+    min-block-size: var(--cui-popup-item-min-height);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"] > svg) {
+    width: var(--cui-popup-item-icon-size);
+    height: var(--cui-popup-item-icon-size);
+    flex-shrink: 0;
+    pointer-events: none;
   }
 
   :where([data-control-family="popup"][data-popup-part="item"]),
@@ -167,15 +160,13 @@
     cursor: pointer;
     border-radius: var(--cui-popup-item-radius);
     color: var(--cui-popup-item-foreground);
-    font-size: var(--text-body);
-    outline: none;
-    padding-block: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--padding-x) * 0.5);
+    font-size: var(--cui-popup-item-font-size);
+    padding-block: var(--cui-popup-item-padding-block);
+    padding-inline: var(--cui-popup-item-padding-inline);
   }
 
   :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
-    font-size: var(--text-body);
-    transition-property: translate;
+    transition-property: background-color, color;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -186,15 +177,22 @@
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="popup"][data-popup-part="navigation-link"]:where(:hover, :focus-visible, [data-active])) {
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]:where(:focus-visible, [data-active])) {
     background-color: var(--cui-popup-item-highlight-background);
     color: var(--foreground);
   }
 
+  @media (hover: hover) {
+    :where([data-control-family="popup"][data-popup-part="navigation-link"]:hover) {
+      background-color: var(--cui-popup-item-highlight-background);
+      color: var(--foreground);
+    }
+  }
+
   :where(
     [data-control-family="popup"][data-popup-part="item"]:where(
       [data-highlighted],
-      [data-selected]:not([data-selected="false"]),
+      [data-popup-kind="command"][data-selected="true"],
       [data-popup-open]
     )
   ) {
@@ -204,27 +202,45 @@
     color: var(--cui-popup-item-highlight-foreground);
   }
 
+  :where(
+    [data-control-family="popup"][data-popup-part="item"]:where([data-highlighted], [data-popup-kind="command"][data-selected="true"]):not(
+      :focus
+    )
+  ) {
+    box-shadow: var(--cui-popup-item-highlight-shadow);
+  }
+
+  @media (forced-colors: active) {
+    :where(
+        [data-control-family="popup"][data-popup-part="item"]:where([data-highlighted], [data-popup-kind="command"][data-selected="true"])
+      ) {
+      outline: var(--focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--focus-ring-width) * -1);
+    }
+  }
+
   :where([data-control-family="popup"][data-popup-part="item"]:is([data-disabled]:not([data-disabled="false"]), [data-disabled="true"])) {
     cursor: not-allowed;
     opacity: var(--cui-popup-item-disabled-opacity);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]),
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]) {
+    color: var(--cui-field-affordance-foreground);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"]) {
     color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]),
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"]) {
     transition-property: rotate;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where(
-    [data-control-family="button"][data-popup-kind="select"][data-slot="trigger"][data-popup-open]
-      [data-control-family="popup"][data-popup-kind="select"][data-slot="icon"]
-  ),
-  :where(
-    [data-control-family="button"][data-popup-kind="navigation-menu"][data-slot="trigger"][data-popup-open]
-      :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"])
-  ) {
+  :where([data-control-family="popup"][data-popup-kind="select"][data-slot="icon"][data-popup-open]),
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="icon"][data-popup-open]) {
     rotate: 180deg;
   }
 
@@ -236,66 +252,6 @@
     border-radius: 9999px;
     background-color: currentColor;
   }
-
-  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="title"]) {
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1;
-    letter-spacing: -0.01em;
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="positioner"]) {
-    transition-property: inset-block-start, inset-inline-start, inset-block-end, inset-inline-end;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]) {
-    outline: none;
-    --_popup-transform-origin: var(--transform-origin);
-    transform-origin: var(--_popup-transform-origin);
-    transition-property: opacity, inline-size, block-size, scale;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"]:is([data-starting-style], [data-ending-style])
-  ) {
-    scale: 0.95;
-    opacity: 0;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]) {
-    transition-property: opacity, translate;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-emphasized);
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"]:is([data-starting-style], [data-ending-style])
-  ) {
-    opacity: 0;
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="left"]
-  ),
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="right"]
-  ) {
-    translate: calc(var(--spacing) * -3) 0;
-  }
-
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-starting-style][data-activation-direction="right"]
-  ),
-  :where(
-    [data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="content"][data-ending-style][data-activation-direction="left"]
-  ) {
-    translate: calc(var(--spacing) * 3) 0;
-  }
 }
 
 @property --cui-popup-radius {
@@ -343,12 +299,52 @@
   initial-value: transparent;
 }
 
+@property --cui-popup-backdrop-blur {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-popup-item-radius {
   syntax: "<length-percentage>";
   inherits: true;
   initial-value: 0px;
 }
 
+@property --cui-popup-item-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@property --cui-popup-item-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-min-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-item-highlight-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-popup-item-foreground {
   syntax: "<color>";
   inherits: true;