@ctrl-ui/react 0.8.6 → 0.8.8

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

@@ -1,59 +1,208 @@
 @layer components {
-  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="content"]) {
-    outline-style: none;
+  :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"]),
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-slot="title"]),
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="title"]),
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="title"]),
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="title"]) {
+    color: var(--cui-popup-title-foreground);
+    font-size: var(--cui-popup-title-font-size);
+    font-weight: var(--cui-popup-title-font-weight);
+    line-height: var(--cui-popup-title-line-height);
+    letter-spacing: var(--cui-popup-title-letter-spacing);
+    text-wrap: balance;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="positioner"]) {
-    outline-style: none;
+  :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="drawer"][data-slot="description"]),
+  :where([data-control-family="popup"][data-popup-kind="popover"][data-slot="description"]),
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="description"]) {
+    color: var(--cui-popup-description-foreground);
+    font-size: var(--text-body);
+    text-wrap: pretty;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="link"]) {
-    text-decoration-line: none;
+  :where([data-control-family="popup"][data-slot="arrow"]) {
+    color: var(--cui-popup-background);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="menubar"][data-slot="sub-trigger-indicator"]) {
-    line-height: 1;
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="top"]) {
+    inset-block-end: -8px;
+    rotate: 180deg;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"]) {
-    text-align: left;
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="bottom"]) {
+    inset-block-start: -8px;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-starting-style]) {
-    --_popup-rich-tooltip-content-opacity: 0%;
-    opacity: var(--_popup-rich-tooltip-content-opacity);
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="left"]) {
+    right: -10px;
+    rotate: 90deg;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-ending-style]) {
-    --_popup-rich-tooltip-content-opacity: 0%;
-    opacity: var(--_popup-rich-tooltip-content-opacity);
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="right"]) {
+    left: -10px;
+    rotate: -90deg;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="inline-start"]) {
+    inset-inline-end: -10px;
+    rotate: 90deg;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="inline-end"]) {
+    inset-inline-start: -10px;
+    rotate: -90deg;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="inline-start"]:dir(rtl)) {
+    rotate: -90deg;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="inline-end"]:dir(rtl)) {
+    rotate: 90deg;
+  }
+
+  :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);
+  }
+
+  :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="hover-card"][data-popup-part="surface"]) {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)) {
+    border-radius: var(--radius-sm);
+    color: var(--foreground);
+    font-weight: var(--font-weight-medium);
+    text-decoration-line: underline;
+    text-decoration-color: var(--border);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: text-decoration-color var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="positioner"]) {
-    outline-style: none;
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a)[data-popup-open]) {
+    text-decoration-color: var(--foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]) {
-    outline-style: none;
+  @media (hover: hover) {
+    :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a):hover) {
+      text-decoration-color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="link"]) {
+    text-decoration-line: none;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="color-picker"][data-slot="positioner"]) {
-    outline-style: none;
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"]) {
+    text-align: start;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="context-menu"][data-slot="sub-trigger-indicator"]) {
-    line-height: 1;
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-starting-style]),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-ending-style]) {
+    opacity: 0;
   }
 
-  :where([data-control-family="button"][data-slot="root"][data-popup-part="close"][data-icon-only="true"]) {
+  :where([data-control-family="button"][data-popup-part="close"][data-icon-only="true"]) {
     --_popup-button-root-close-opacity: 70%;
     opacity: var(--_popup-button-root-close-opacity);
   }
 
+  :where(
+    [data-control-family="popup"][data-surface="modal"] > [data-control-family="button"][data-popup-part="close"][data-icon-only="true"]
+  ) {
+    position: absolute;
+    inset-block-start: var(--cui-popup-close-inset);
+    inset-inline-end: var(--cui-popup-close-inset);
+  }
+
+  :where(
+    [data-control-family="popup"][data-surface="modal"]:has(> [data-control-family="button"][data-popup-part="close"])
+      [data-control-family="popup"][data-slot="header"]
+  ) {
+    padding-inline-end: calc(var(--cui-popup-close-inset) + var(--control-h-xs) + var(--spacing) * 2);
+  }
+
   @media (hover: hover) {
-    :where([data-control-family="button"][data-slot="root"][data-popup-part="close"][data-icon-only="true"]:hover) {
+    :where([data-control-family="button"][data-popup-part="close"][data-icon-only="true"]:hover) {
       --_popup-button-root-close-opacity: 100%;
       opacity: var(--_popup-button-root-close-opacity);
     }
   }
 }
+
+@property --cui-popup-title-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-title-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-popup-title-line-height {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --cui-popup-title-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-close-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -1,43 +1,46 @@
 @layer components {
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"]) {
-    /* The sheet sits on the page surface, and its edge is a real border the variants size per side. */
+    /* The edge is a real border drawn only on the sides the variant exposes, so the popup's inset ring stays off. */
     --cui-popup-radius: var(--radius-panel);
     --cui-popup-background: var(--background);
     --cui-popup-foreground: var(--foreground);
-    --cui-popup-border-width: 0px;
-    --cui-popup-shadow: var(--shadow-modal);
+    --cui-popup-shadow: var(--shadow-overlay);
+    --cui-popup-backdrop-filter: none;
     --_drawer-content-closed-translate: 0 100%;
+    --_drawer-edge-inset-end: calc(var(--spacing) * 4);
     border: 0 solid var(--cui-popup-border-color);
     border-radius: 0;
+    box-shadow: var(--cui-popup-shadow);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"][data-surface-variant="card"]) {
     --cui-popup-background: var(--card);
+    --cui-popup-foreground: var(--card-foreground);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"]) {
-    border-width: 1px;
+    border-width: var(--cui-popup-border-width);
     border-radius: var(--cui-popup-radius);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="bottom"]) {
-    border-top-width: 1px;
+    border-top-width: var(--cui-popup-border-width);
     border-radius: var(--cui-popup-radius) var(--cui-popup-radius) 0 0;
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="top"]) {
-    border-bottom-width: 1px;
+    border-bottom-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: 0 -100%;
     border-radius: 0 0 var(--cui-popup-radius) var(--cui-popup-radius);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="right"]) {
-    border-left-width: 1px;
+    border-left-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: 100% 0;
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="left"]) {
-    border-right-width: 1px;
+    border-right-width: var(--cui-popup-border-width);
     --_drawer-content-closed-translate: -100% 0;
   }
 
@@ -74,72 +77,60 @@
     margin-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="scroll"]) {
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"]) {
     gap: calc(var(--spacing) * 4);
+    overscroll-behavior: contain;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="viewport"][data-variant="floating"]) {
-    padding: calc(var(--spacing) * 2);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="title"]) {
-    color: var(--foreground);
-    font-weight: var(--font-weight-semibold);
-    text-wrap: balance;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="description"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-sm);
-    text-wrap: pretty;
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="bottom"]) {
-    padding-block-end: calc(var(--spacing) * 4);
+  /* Block padding lives inside the scroller, never on the popup: the scroll edge would clip a focus ring on the first or last row. */
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]) {
+    padding-block: calc(var(--spacing) * 4);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="top"]) {
-    padding-block-start: calc(var(--spacing) * 4);
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]:last-child) {
+    padding-block-end: var(--_drawer-edge-inset-end);
   }
 
-  :where(
-    [data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"]:is(
-      [data-side="left"],
-      [data-side="right"]
-    )
-  ) {
-    padding-block: calc(var(--spacing) * 4);
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="viewport"][data-variant="floating"]) {
+    padding: calc(var(--spacing) * 2);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="footer"]) {
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 4);
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-side="bottom"]) {
+    --_drawer-edge-inset-end: max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
     gap: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 4);
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4) 0;
     --_drawer-header-text-align: center;
     text-align: var(--_drawer-header-text-align);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: 0 calc(var(--spacing) * 4) var(--_drawer-edge-inset-end);
+  }
+
   @media (width >= 40rem) {
     :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
-      --_drawer-header-text-align: left;
+      --_drawer-header-text-align: start;
       text-align: var(--_drawer-header-text-align);
     }
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 4);
-    outline-style: none;
+    --cui-popup-title-foreground: var(--foreground);
     transform: translate(var(--drawer-swipe-movement-x, 0), var(--drawer-swipe-movement-y, 0));
-    transition-property: transform, translate, scale, rotate;
+    transition-property: transform, translate, scale, rotate, filter;
     --_drawer-content-transition-duration: var(--duration-base);
     transition-duration: var(--_drawer-content-transition-duration);
     transition-timing-function: var(--ease-emphasized);
   }
 
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-nested-drawer-open]) {
+    filter: brightness(0.95);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-starting-style]),
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-ending-style]) {
     translate: var(--_drawer-content-closed-translate);

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

@@ -32,10 +32,6 @@
     gap: calc(var(--spacing) * 0.5);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="positioner"]) {
-    outline-style: none;
-  }
-
   :where([data-control-family="field"][data-field-kind="combobox"][data-slot="group"]),
   :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="group"]) {
     padding-block: calc(var(--spacing) * 1);
@@ -58,10 +54,6 @@
     color: var(--muted-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="combobox"][data-slot="positioner"]) {
-    outline-style: none;
-  }
-
   :where([data-control-family="popup"][data-popup-kind="command"][data-chrome="embedded"]) {
     border-radius: inherit;
     corner-shape: inherit;
@@ -80,7 +72,8 @@
     letter-spacing: 0.08em;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="empty"]) {
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="empty"]),
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="loading"]) {
     padding-block: calc(var(--spacing) * 6);
     text-align: center;
     font-size: var(--text-body);
@@ -100,7 +93,6 @@
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"]) {
     background: transparent;
     color: var(--foreground);
-    outline-style: none;
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"])::placeholder,
@@ -109,7 +101,7 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"]:disabled) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="group"]) {
@@ -140,33 +132,29 @@
     color: var(--muted-foreground);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="positioner"]) {
-    outline-style: none;
-  }
-
-  :where([data-control-family="popup"][data-popup-part="item"] > span:first-child) {
+  :where([data-control-family="popup"][data-slot="item-text"]) {
     gap: calc(var(--spacing) * 2);
   }
 
   :where([data-control-family="popup"][data-popup-part="label"]) {
-    padding-block: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--padding-x) * 0.5);
+    padding-block: var(--cui-popup-label-padding-block);
+    padding-inline: var(--cui-popup-label-padding-inline);
     color: var(--muted-foreground);
-    font-size: var(--text-micro);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    font-size: var(--cui-popup-label-font-size);
+    font-weight: var(--cui-popup-label-font-weight);
+    letter-spacing: var(--cui-popup-label-letter-spacing);
+    text-transform: var(--cui-popup-label-text-transform);
   }
 
   :where([data-control-family="popup"][data-popup-part="item"][data-inset]),
   :where([data-control-family="popup"][data-popup-part="label"][data-inset]),
   :where([data-control-family="popup"][data-popup-part="item"]:is([data-slot="checkbox-item"], [data-slot="radio-item"])) {
-    padding-inline-start: calc(var(--spacing) * 8);
+    padding-inline-start: var(--cui-popup-item-inset);
   }
 
   :where([data-control-family="popup"][data-popup-part="separator"]) {
     margin-block: calc(var(--spacing) * 1);
-    margin-inline: calc(var(--popover-padding) * -1);
+    margin-inline: var(--cui-popup-separator-inset);
     block-size: 1px;
     background-color: var(--cui-popup-separator-color);
   }
@@ -174,24 +162,33 @@
   :where([data-control-family="popup"][data-popup-part="shortcut"]) {
     margin-inline-start: auto;
     padding-inline-start: calc(var(--spacing) * 6);
-    --_popup-shortcut-font-size: var(--text-body);
     color: var(--cui-popup-shortcut-foreground);
-    font-size: var(--_popup-shortcut-font-size);
-    letter-spacing: 0.02em;
+    font-size: var(--cui-popup-shortcut-font-size);
+    letter-spacing: var(--cui-popup-shortcut-letter-spacing);
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="shortcut"]) {
-    --_popup-shortcut-font-size: var(--text-label);
+    --cui-popup-shortcut-font-size: var(--text-label);
   }
 
   :where([data-control-family="popup"][data-slot="sub-trigger-indicator"]) {
     margin-inline-start: auto;
     padding-inline-start: calc(var(--spacing) * 4);
+    line-height: 1;
   }
 
   :where([data-control-family="popup"][data-popup-part="bar"]) {
+    --_popup-bar-item-radius: min(var(--cui-popup-item-radius), calc(var(--control-h-sm) / 2));
+    --_popup-bar-padding: calc(var(--spacing) * 1);
+    --cui-popup-radius: calc(
+      var(--_popup-bar-item-radius) +
+      clamp(0px, calc(var(--_popup-bar-item-radius) * 1000), var(--_popup-bar-padding))
+    );
+    --nest-radius: var(--_popup-bar-item-radius);
+    padding: var(--_popup-bar-padding);
     gap: calc(var(--spacing) * 0.5);
-    padding: calc(var(--spacing) * 1);
+    --cui-popup-background: var(--card);
+    --cui-popup-shadow: var(--shadow-xs);
   }
 
   :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="list"]) {
@@ -206,4 +203,117 @@
   :where([data-control-family="popup"][data-popup-part="navigation-link"][data-variant="compact"]) {
     padding-block: 0;
   }
+
+  :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"]) {
+    transform-origin: var(--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"][data-starting-style]) {
+    scale: 0.95;
+    opacity: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="popup"][data-ending-style]) {
+    opacity: 0;
+    transition-duration: var(--duration-fast);
+  }
+
+  :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-item-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-label-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-label-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-label-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-label-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-popup-label-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-label-text-transform {
+  syntax: "none | uppercase | lowercase | capitalize";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-popup-separator-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-shortcut-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-shortcut-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
 }