@ctrl-ui/react 0.8.7 → 0.8.8

package/dist/styles/recipes/markdown.css

@@ -6,12 +6,15 @@
     --cui-markdown-inline-code-background: color-mix(in oklab, var(--foreground) 8%, transparent);
     --cui-markdown-inline-code-foreground: var(--foreground);
     --cui-markdown-inline-code-radius: 0.25rem;
-    --cui-markdown-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
+    --cui-markdown-image-outline-color: var(--image-outline);
     --cui-markdown-link-foreground: var(--primary-text);
     --cui-markdown-table-cell-border-color: var(--border);
     --cui-markdown-table-header-background: var(--muted);
+    --cui-markdown-font-size: var(--text-body);
+    --cui-markdown-line-height: var(--leading-relaxed);
     color: var(--cui-markdown-foreground);
-    font-size: var(--text-label);
+    font-size: var(--cui-markdown-font-size);
+    overflow-wrap: break-word;
   }
 
   :where([data-control-family="markdown"][data-slot="root"] img[data-streamdown="image"]) {
@@ -25,6 +28,7 @@
     border-style: solid;
     border-width: 1px;
     border-color: var(--cui-markdown-table-cell-border-color);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="markdown"][data-slot="table-header"]) {
@@ -34,13 +38,13 @@
     border-width: 1px;
     border-color: var(--border);
     background-color: var(--cui-markdown-table-header-background);
-    text-align: left;
+    text-align: start;
     font-weight: var(--font-weight-semibold);
   }
 
   :where([data-control-family="markdown"][data-slot="table"]) {
     border-collapse: collapse;
-    font-size: var(--text-label);
+    font-size: var(--cui-markdown-font-size);
   }
 
   :where([data-control-family="markdown"][data-slot="emphasis"]) {
@@ -61,8 +65,8 @@
     margin-block: calc(var(--spacing) * 4);
     padding-inline-start: calc(var(--spacing) * 4);
     border-color: var(--cui-markdown-blockquote-border-color);
-    border-left-style: solid;
-    border-left-width: 2px;
+    border-inline-start-style: solid;
+    border-inline-start-width: 2px;
     color: var(--cui-markdown-blockquote-foreground);
     font-style: italic;
   }
@@ -73,6 +77,7 @@
     --_markdown-link-decoration: underline;
     text-decoration-line: var(--_markdown-link-decoration);
     text-underline-offset: 2px;
+    overflow-wrap: anywhere;
   }
 
   @media (hover: hover) {
@@ -83,41 +88,56 @@
   }
 
   :where([data-control-family="markdown"][data-slot="list-item"]) {
-    line-height: calc(var(--spacing) * 7);
+    line-height: var(--cui-markdown-line-height);
   }
 
   :where([data-control-family="markdown"][data-slot="paragraph"]) {
     margin-block: calc(var(--spacing) * 3);
-    line-height: calc(var(--spacing) * 7);
+    line-height: var(--cui-markdown-line-height);
     text-wrap: pretty;
   }
 
-  :where([data-control-family="markdown"][data-slot="h3"]) {
-    margin-block: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--text-base);
-    line-height: var(--text-base--line-height);
+  :where(
+    [data-control-family="markdown"]:is(
+      [data-slot="h1"],
+      [data-slot="h2"],
+      [data-slot="h3"],
+      [data-slot="h4"],
+      [data-slot="h5"],
+      [data-slot="h6"]
+    )
+  ) {
     color: var(--foreground);
     text-wrap: balance;
     scroll-margin-block-start: calc(var(--spacing) * 6);
   }
 
-  :where([data-control-family="markdown"][data-slot="h2"]) {
+  :where([data-control-family="markdown"]:is([data-slot="h3"], [data-slot="h4"], [data-slot="h5"], [data-slot="h6"])) {
+    margin-block: calc(var(--spacing) * 5) calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="markdown"]:is([data-slot="h4"], [data-slot="h5"], [data-slot="h6"])) {
     font-weight: var(--font-weight-semibold);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg--line-height);
-    color: var(--foreground);
-    text-wrap: balance;
-    scroll-margin-block-start: calc(var(--spacing) * 6);
+    font-size: var(--text-body);
+    line-height: var(--leading-tight);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h3"]) {
+    font-weight: var(--text-heading-4--font-weight);
+    font-size: var(--text-heading-4);
+    line-height: var(--text-heading-4--line-height);
+  }
+
+  :where([data-control-family="markdown"][data-slot="h2"]) {
+    font-weight: var(--text-heading-3--font-weight);
+    font-size: var(--text-heading-3);
+    line-height: var(--text-heading-3--line-height);
   }
 
   :where([data-control-family="markdown"][data-slot="h1"]) {
-    font-weight: var(--font-weight-semibold);
-    font-size: var(--text-xl);
-    line-height: var(--text-xl--line-height);
-    color: var(--foreground);
-    text-wrap: balance;
-    scroll-margin-block-start: calc(var(--spacing) * 6);
+    font-weight: var(--text-heading-2--font-weight);
+    font-size: var(--text-heading-2);
+    line-height: var(--text-heading-2--line-height);
   }
 
   :where([data-control-family="markdown"][data-slot="h1"]),
@@ -125,7 +145,16 @@
     margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
   }
 
-  :where([data-control-family="markdown"]:is([data-slot="h1"], [data-slot="h2"], [data-slot="h3"]):first-child) {
+  :where(
+    [data-control-family="markdown"]:is(
+      [data-slot="h1"],
+      [data-slot="h2"],
+      [data-slot="h3"],
+      [data-slot="h4"],
+      [data-slot="h5"],
+      [data-slot="h6"]
+    ):first-child
+  ) {
     margin-block-start: 0;
   }
 
@@ -158,6 +187,7 @@
     background-color: var(--cui-markdown-inline-code-background);
     font-family: var(--font-mono);
     font-size: 0.9em;
+    overflow-wrap: anywhere;
     color: var(--cui-markdown-inline-code-foreground);
   }
 }
@@ -221,3 +251,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-markdown-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-markdown-line-height {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1.5;
+}

package/dist/styles/recipes/morphing-panel.css

@@ -22,22 +22,22 @@
     --cui-morphing-panel-shadow: var(--shadow-pop);
   }
 
-  :where([data-control-ui="morphing-panel"][data-slot="trigger"]) {
+  :where([data-control-family="morphing-panel"][data-slot="trigger"]) {
     inline-size: 100%;
     block-size: 100%;
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 4);
     border-radius: inherit;
-    outline: none;
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
     color: currentColor;
     font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
-    transition-property: top, right, width, height, border-radius, padding, color, box-shadow;
+    transition-property: top, inset-inline-end, width, height, border-radius, padding, color, box-shadow;
     transition-duration: var(--duration-slow);
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"]) {
+  :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"]) {
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
     padding: 0;
@@ -45,25 +45,25 @@
   }
 
   @media (pointer: coarse) {
-    :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"]) {
+    :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"]) {
       inline-size: calc(var(--spacing) * 11);
       block-size: calc(var(--spacing) * 11);
     }
   }
 
   @media (hover: hover) {
-    :where([data-control-ui="morphing-panel"][data-slot="trigger"]:hover) {
+    :where([data-control-family="morphing-panel"][data-slot="trigger"]:hover) {
       background-color: var(--cui-morphing-panel-trigger-hover-background);
     }
   }
 
-  :where([data-control-ui="morphing-panel"][data-slot="trigger"] > svg) {
+  :where([data-control-family="morphing-panel"][data-slot="trigger"] > svg) {
     transition-property: rotate;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"] > svg) {
+  :where([data-control-family="morphing-panel"][data-slot="trigger"][data-state="open"] > svg) {
     rotate: 45deg;
   }
 

package/dist/styles/recipes/page-layout.css

@@ -12,6 +12,7 @@
     --cui-page-layout-sticky-gap: 0px;
     --cui-page-layout-background: var(--canvas);
     --cui-page-layout-sticky-header-background: oklch(from var(--cui-page-layout-background) l c h / 0.85);
+    --cui-page-layout-sticky-header-backdrop-filter: blur(12px);
     background: var(--cui-page-layout-background);
 
     /* Header and body both read this, so they stop at the same right edge. */
@@ -72,12 +73,14 @@
     font-weight: var(--text-heading-1--font-weight);
     letter-spacing: var(--text-heading-1--letter-spacing);
     color: var(--foreground);
+    text-wrap: balance;
   }
 
   :where([data-control-family="page-layout"][data-slot="description"]) {
     grid-area: description;
     font-size: var(--text-body);
     color: var(--muted-foreground);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="page-layout"][data-slot="actions"]) {
@@ -98,17 +101,25 @@
 
   :where([data-control-family="page-layout"][data-slot="header"][data-variant="sticky"]) {
     position: sticky;
-    top: var(--cui-page-layout-sticky-gap);
+    inset-block-start: var(--cui-page-layout-sticky-gap);
     z-index: 20;
     background: var(--cui-page-layout-sticky-header-background);
-    -webkit-backdrop-filter: blur(12px);
-    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: var(--cui-page-layout-sticky-header-backdrop-filter);
+    backdrop-filter: var(--cui-page-layout-sticky-header-backdrop-filter);
+  }
+
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where([data-control-family="page-layout"][data-slot="header"][data-variant="sticky"]) {
+      background: var(--cui-page-layout-background);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
   }
 
   /* Zero height: the band hangs over the body instead of displacing it. */
   :where([data-control-family="page-layout"][data-slot="header"][data-variant="floating"]) {
     position: sticky;
-    top: var(--cui-page-layout-sticky-gap);
+    inset-block-start: var(--cui-page-layout-sticky-gap);
     z-index: 20;
     align-items: start;
     height: 0;
@@ -132,10 +143,6 @@
     padding-inline: 0;
   }
 
-  :where([data-control-family="page-layout"][data-slot="aside"]) {
-    display: none;
-  }
-
   @media (width >= 80rem) {
     :where([data-control-family="page-layout"][data-slot="body"][data-aside]),
     :where(
@@ -153,10 +160,6 @@
     :where([data-control-family="page-layout"][data-slot="body"][data-aside]) {
       grid-template-columns: minmax(0, var(--cui-page-layout-article-size)) var(--cui-page-layout-aside-size);
     }
-
-    :where([data-control-family="page-layout"][data-slot="aside"]) {
-      display: block;
-    }
   }
 }
 
@@ -235,3 +238,8 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-page-layout-sticky-header-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/pagination.css

@@ -2,7 +2,7 @@
   :where([data-control-family="pagination"][data-slot="root"]) {
     --cui-pagination-link-radius: var(--radius-control);
     --cui-pagination-link-background: transparent;
-    --cui-pagination-link-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-pagination-link-hover-background: var(--hover-fill);
     --cui-pagination-link-foreground: var(--foreground);
     --cui-pagination-link-shadow: none;
   }
@@ -21,7 +21,6 @@
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
     font-variant-numeric: tabular-nums;
-    outline: none;
   }
 
   :where([data-control-family="pagination"][data-slot="link"][data-active="true"]) {
@@ -31,13 +30,13 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="pagination"][data-slot="link"]:hover) {
+    :where([data-control-family="pagination"][data-slot="link"]:hover:not([aria-disabled="true"])) {
       background: var(--cui-pagination-link-hover-background);
     }
   }
 
   :where([data-control-family="pagination"][data-slot="link"][aria-disabled="true"]) {
-    opacity: 0.45;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="pagination"][data-slot="link"]:has(> svg:first-child)) {
@@ -63,7 +62,7 @@
       inset: 50% 50%;
       translate: -50% -50%;
       inline-size: 100%;
-      block-size: max(100%, 44px);
+      block-size: max(100%, var(--touch-target));
     }
   }
 }

package/dist/styles/recipes/phone-input.css

@@ -1,18 +1,23 @@
 @layer components {
   :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="root"]) {
     --cui-phone-input-country-border-color: var(--border);
-    --cui-phone-input-country-border-width: 1px;
+    --cui-phone-input-country-border-width: var(--control-rim-width);
     --cui-phone-input-trigger-hover-background: oklch(from var(--foreground) l c h / 0.06);
     --cui-phone-input-trigger-focus-background: oklch(from var(--foreground) l c h / 0.06);
     --cui-phone-input-metadata-foreground: var(--muted-foreground);
     --cui-phone-input-chevron-foreground: var(--muted-foreground);
   }
+
+  :where([data-control-family="phone-input"][data-slot="root"]) {
+    --cui-phone-input-metadata-foreground: var(--muted-foreground);
+  }
+
   :where([data-control-family="field"][data-phone-input-country]) {
     border-inline-end: var(--cui-phone-input-country-border-width) solid var(--cui-phone-input-country-border-color);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="phone-input"][data-slot="country-trigger"]:hover) {
+    :where([data-control-family="phone-input"][data-slot="country-trigger"]:hover:not(:disabled)) {
       background-color: var(--cui-phone-input-trigger-hover-background);
     }
   }
@@ -21,10 +26,6 @@
     background-color: var(--cui-phone-input-trigger-focus-background);
   }
 
-  :where([data-control-family="phone-input"][data-slot="country-trigger"]:disabled) {
-    opacity: 0.5;
-  }
-
   :where([data-control-family="phone-input"][data-slot="flag"]) {
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 3.5);
@@ -64,10 +65,13 @@
     min-inline-size: calc(var(--spacing) * 14);
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 3);
-    outline-style: none;
   }
 
-  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]) {
+  :where(
+    [data-control-family="field"][data-field-kind="phone-input"][data-slot="root"]
+      [data-control-family="field"][data-field-kind="input-group"][data-slot="input"]
+  ) {
+    padding-inline: calc(var(--spacing) * 3);
     font-variant-numeric: tabular-nums;
   }
 }

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

@@ -1,10 +1,105 @@
 @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-slot="arrow"]) {
+    color: var(--cui-popup-background);
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="top"]) {
+    inset-block-end: -8px;
+    rotate: 180deg;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="bottom"]) {
+    inset-block-start: -8px;
+  }
+
+  :where([data-control-family="popup"][data-slot="arrow"][data-side="left"]) {
+    right: -10px;
+    rotate: 90deg;
+  }
+
+  :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)) {
@@ -19,57 +114,95 @@
     transition: text-decoration-color var(--duration-fast) var(--ease-standard);
   }
 
-  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="trigger"]:is(a):is(:hover, [data-popup-open])) {
+  :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="navigation-menu"][data-slot="link"]) {
-    text-decoration-line: 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="menubar"][data-slot="sub-trigger-indicator"]) {
-    line-height: 1;
+  :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="rich-tooltip"][data-slot="content"]) {
-    text-align: left;
-  }
-
-  :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);
+    text-align: start;
   }
 
+  :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]) {
-    --_popup-rich-tooltip-content-opacity: 0%;
-    opacity: var(--_popup-rich-tooltip-content-opacity);
-  }
-
-  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="positioner"]) {
-    outline-style: none;
+    opacity: 0;
   }
 
-  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]) {
-    outline-style: none;
+  :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-popup-kind="color-picker"][data-slot="positioner"]) {
-    outline-style: none;
+  :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-popup-kind="context-menu"][data-slot="sub-trigger-indicator"]) {
-    line-height: 1;
-  }
-
-  :where([data-control-family="button"][data-slot="root"][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"]: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;
+}