@ctrl-ui/react 0.8.7 → 0.8.9

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

@@ -79,6 +79,7 @@
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"]) {
     gap: calc(var(--spacing) * 4);
+    overscroll-behavior: contain;
   }
 
   /* Block padding lives inside the scroller, never on the popup: the scroll edge would clip a focus ring on the first or last row. */
@@ -94,18 +95,6 @@
     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-side="bottom"]) {
     --_drawer-edge-inset-end: max(calc(var(--spacing) * 4), env(safe-area-inset-bottom));
   }
@@ -124,13 +113,13 @@
 
   @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"]) {
-    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, filter;
     --_drawer-content-transition-duration: var(--duration-base);

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-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,19 +162,19 @@
   :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"]) {
@@ -215,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;
 }

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;
 }