@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/inline-citation.css

@@ -8,7 +8,7 @@
     --cui-inline-citation-quote-radius: var(--radius-control);
     --cui-inline-citation-trigger-background: oklch(from var(--muted) l c h / 0.55);
     --cui-inline-citation-trigger-border-color: var(--border);
-    --cui-inline-citation-trigger-border-width: 1px;
+    --cui-inline-citation-trigger-border-width: var(--control-rim-width);
     --cui-inline-citation-trigger-foreground: var(--muted-foreground);
     --cui-inline-citation-trigger-hover-background: var(--muted);
     --cui-inline-citation-trigger-hover-foreground: var(--foreground);
@@ -52,7 +52,7 @@
       inset: 50% 50%;
       translate: -50% -50%;
       inline-size: 100%;
-      block-size: max(100%, 44px);
+      block-size: max(100%, var(--touch-target));
     }
   }
 
@@ -68,7 +68,7 @@
     min-block-size: calc(var(--spacing) * 10);
     gap: calc(var(--spacing) * 1);
     padding-inline: calc(var(--spacing) * 2);
-    border-bottom: var(--control-rim-width) solid var(--border);
+    border-block-end: var(--control-rim-width) solid var(--border);
     background: var(--cui-inline-citation-navigation-background);
   }
 
@@ -109,10 +109,16 @@
     outline-style: none;
   }
 
-  :where([data-control-family="inline-citation"][data-slot="source-title"]:is(:hover, :focus-visible)) {
+  :where([data-control-family="inline-citation"][data-slot="source-title"]:focus-visible) {
     text-decoration-line: underline;
   }
 
+  @media (hover: hover) {
+    :where([data-control-family="inline-citation"][data-slot="source-title"]:hover) {
+      text-decoration-line: underline;
+    }
+  }
+
   :where([data-control-family="inline-citation"][data-slot="source-external-icon"]) {
     margin-block-start: calc(var(--spacing) * 0.5);
     inline-size: calc(var(--spacing) * 3.5);

package/dist/styles/recipes/item.css

@@ -35,20 +35,34 @@
 
   :where([data-control-family="item"][data-slot="root"][data-variant="outline"]) {
     --_item-border-color: var(--border);
-    --cui-item-border-width: 1px;
+    --cui-item-border-width: var(--control-rim-width);
   }
 
   :where([data-control-family="item"][data-slot="root"][data-variant="muted"]) {
     --_item-background: oklch(from var(--muted) l c h / 0.5);
   }
 
-  :where([data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):hover) {
-    outline-color: var(--cui-item-hover-border-color);
-    background: var(--cui-item-hover-background);
-    box-shadow: none;
+  @media (hover: hover) {
+    :where(
+        [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        ):hover
+      ) {
+      outline-color: var(--cui-item-hover-border-color);
+      background: var(--cui-item-hover-background);
+      box-shadow: none;
+    }
   }
 
-  :where([data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):active) {
+  :where(
+    [data-control-family="item"][data-slot="root"]:is(a, button, [href], [role="button"]):not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled="true"]
+    ):active
+  ) {
     scale: var(--cui-item-active-scale);
   }
 
@@ -58,7 +72,7 @@
   }
 
   :where([data-control-family="item"][data-slot="description"]) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     line-height: var(--leading-relaxed);
     color: var(--muted-foreground);
     text-wrap: pretty;
@@ -66,9 +80,9 @@
 
   :where([data-control-family="item"][data-slot="title"]) {
     gap: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
-    line-height: 1;
+    line-height: var(--leading-tight);
     color: var(--foreground);
     text-wrap: balance;
   }

package/dist/styles/recipes/markdown-block.css

@@ -4,10 +4,10 @@
     --cui-markdown-block-radius: var(--radius-panel);
     --cui-markdown-block-background: var(--background);
     --cui-markdown-block-border-color: var(--border);
-    --cui-markdown-block-border-width: 1px;
+    --cui-markdown-block-border-width: var(--control-rim-width);
     --cui-markdown-block-shadow: var(--shadow-sm);
     --cui-markdown-block-header-border-color: var(--border);
-    --cui-markdown-block-header-border-width: 1px;
+    --cui-markdown-block-header-border-width: var(--control-rim-width);
     --cui-markdown-block-icon-background: oklch(from var(--foreground) l c h / 0.08);
     background: var(--cui-markdown-block-background);
     border: var(--cui-markdown-block-border-width) solid var(--cui-markdown-block-border-color);
@@ -19,18 +19,19 @@
     gap: calc(var(--spacing) * 3);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2);
-    border-bottom: var(--cui-markdown-block-header-border-width) solid var(--cui-markdown-block-header-border-color);
+    border-block-end: var(--cui-markdown-block-header-border-width) solid var(--cui-markdown-block-header-border-color);
   }
 
   :where([data-control-family="markdown-block"][data-slot="title"]) {
     gap: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
     text-wrap: balance;
   }
 
   :where([data-control-family="markdown-block"][data-slot="content"]) {
     padding: calc(var(--spacing) * 4);
+    overflow-wrap: break-word;
   }
 
   :where([data-control-family="markdown-block"][data-slot="title-icon"]) {

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

@@ -10,6 +10,10 @@
     --cui-page-layout-header-column-gap: calc(var(--spacing) * 4);
     --cui-page-layout-header-row-gap: calc(var(--spacing) * 2);
     --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. */
     --cui-page-layout-size: calc(var(--cui-page-layout-article-size) + var(--cui-page-layout-padding-inline) * 2);
@@ -69,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"]) {
@@ -95,14 +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: 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;
@@ -126,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(
@@ -147,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;
-    }
   }
 }
 
@@ -217,3 +226,20 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-page-layout-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-page-layout-sticky-header-background {
+  syntax: "<color>";
+  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,23 +21,22 @@
       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"]) {
-    --cui-pagination-link-background: oklch(from var(--card) l c h / 0.72);
+    --cui-pagination-link-background: var(--control-fill);
     --_pagination-link-border-color: var(--border);
     --cui-pagination-link-shadow: var(--shadow-sm);
   }
 
   @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;
   }
 }