@ctrl-ui/react 0.8.4 → 0.8.5

package/dist/styles/recipes/environment-variables.css

@@ -53,6 +53,7 @@
     color: var(--cui-environment-variables-title-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-semibold);
+    text-wrap: balance;
   }
 
   :where(

package/dist/styles/recipes/field-parts.css

@@ -100,6 +100,7 @@
     color: var(--foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
+    text-wrap: balance;
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="label"]) {
@@ -115,6 +116,7 @@
   :where([data-control-family="field"][data-field-kind="field"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-caption);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="error"]) {

package/dist/styles/recipes/field.css

@@ -172,6 +172,12 @@
   :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]) {
     padding-inline: calc(var(--spacing) * 3);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="field"]:is(input, textarea)) {
+      font-size: max(16px, var(--cui-field-font-size));
+    }
+  }
 }
 
 @property --cui-field-radius {

package/dist/styles/recipes/gradient-editor.css

@@ -24,6 +24,7 @@
 
   :where([data-control-family="gradient-editor"][data-slot="track"]) {
     block-size: calc(var(--spacing) * 6);
+    touch-action: pan-y;
     border: 0;
     border-radius: var(--cui-gradient-editor-track-radius);
     box-shadow: inset 0 0 0 1px oklch(from var(--border) l c h / 0.6);
@@ -32,6 +33,7 @@
   :where([data-control-family="gradient-editor"][data-slot="stop"]) {
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
+    touch-action: pan-y;
     border: var(--cui-gradient-editor-stop-border-width) solid var(--cui-gradient-editor-stop-border-color);
     border-radius: var(--cui-gradient-editor-stop-radius);
     box-shadow: var(--cui-gradient-editor-stop-shadow);
@@ -58,6 +60,21 @@
   :where([data-control-family="gradient-editor"][data-slot="stop"][data-selected="true"]) {
     scale: 115% 115%;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="gradient-editor"][data-slot="stop-add"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-gradient-editor-preview-radius {

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

@@ -1,33 +1,49 @@
 @layer components {
   :where([data-control-family="inline-attachment"][data-slot="root"]) {
-    --cui-inline-attachment-background: var(--muted);
+    --cui-inline-attachment-background: var(--card);
     --cui-inline-attachment-hover-shadow: var(--shadow-md);
-    --cui-inline-attachment-radius: var(--radius-scene);
+    --cui-inline-attachment-padding: calc(var(--spacing) * 3);
+    --cui-inline-attachment-radius: var(--radius-field);
     --cui-inline-attachment-ring-color: var(--border);
     --cui-inline-attachment-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
     --cui-inline-attachment-shadow: var(--shadow-sm);
     --cui-inline-attachment-content-background: oklch(from var(--background) l c h / 0.85);
     --cui-inline-attachment-content-foreground: var(--foreground);
-    --cui-inline-attachment-content-radius: var(--radius-control);
+    --cui-inline-attachment-content-radius: max(
+      var(--radius-sm),
+      calc(var(--cui-inline-attachment-radius) - var(--cui-inline-attachment-padding))
+    );
     --cui-inline-attachment-content-shadow: var(--shadow-sm);
+    --cui-inline-attachment-document-padding: calc(var(--spacing) * 5);
+    --cui-inline-attachment-document-background: var(--muted);
+    --cui-inline-attachment-document-background-image: none;
     border-radius: var(--cui-inline-attachment-radius);
     background: var(--cui-inline-attachment-background);
     box-shadow:
-      inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+      inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
       var(--cui-inline-attachment-shadow);
     text-align: left;
+    transition-property: box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="root"]:focus-visible) {
+    box-shadow:
+      inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
+      var(--cui-inline-attachment-hover-shadow);
   }
 
   @media (hover: hover) {
     :where([data-control-family="inline-attachment"][data-slot="root"]:hover) {
       box-shadow:
-        inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+        inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
         var(--cui-inline-attachment-hover-shadow);
     }
 
     :where([data-control-family="inline-attachment"][data-slot="root"]:disabled:hover) {
       box-shadow:
-        inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+        inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
         var(--cui-inline-attachment-shadow);
     }
   }
@@ -38,21 +54,22 @@
 
   :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
     border-radius: inherit;
-    outline: 1px solid var(--cui-inline-attachment-image-outline-color);
-    outline-offset: -1px;
+    outline: var(--control-rim-width) solid var(--cui-inline-attachment-image-outline-color);
+    outline-offset: calc(var(--control-rim-width) * -1);
   }
 
   :where([data-control-family="inline-attachment"][data-slot="document"]) {
-    padding: calc(var(--spacing) * 5);
-    background: linear-gradient(135deg in srgb, var(--color-slate-50) 0%, var(--color-zinc-100) 46%, var(--color-stone-200) 100%);
+    padding: var(--cui-inline-attachment-document-padding);
+    background: var(--cui-inline-attachment-document-background);
+    background-image: var(--cui-inline-attachment-document-background-image);
   }
 
   :where([data-control-family="inline-attachment"][data-slot="document-sheet"]) {
     padding: calc(var(--spacing) * 4);
-    border-radius: 1rem;
+    border-radius: max(0px, calc(var(--cui-inline-attachment-radius) - var(--cui-inline-attachment-document-padding)));
     background: oklch(from var(--card) l c h / 0.78);
     box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.1),
+      inset 0 0 0 var(--control-rim-width) oklch(from var(--foreground) l c h / 0.1),
       var(--shadow-sm);
   }
 
@@ -94,11 +111,13 @@
     margin-block-start: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 9);
     inline-size: calc(var(--spacing) * 24);
-    border: 1px dashed oklch(from var(--foreground) l c h / 0.18);
-    border-radius: 0.75rem;
+    border: var(--control-rim-width) dashed oklch(from var(--foreground) l c h / 0.18);
+    border-radius: var(--radius-control);
   }
 
   :where([data-control-family="inline-attachment"][data-slot="content"]) {
+    inset-inline: var(--cui-inline-attachment-padding);
+    inset-block-end: var(--cui-inline-attachment-padding);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 1);
     border-radius: var(--cui-inline-attachment-content-radius);
@@ -112,6 +131,7 @@
 
   :where([data-control-family="inline-attachment"][data-slot="description"]) {
     font-size: var(--text-micro);
+    font-variant-numeric: tabular-nums;
     opacity: 0.65;
   }
 
@@ -147,6 +167,29 @@
   initial-value: transparent;
 }
 
+@property --cui-inline-attachment-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-inline-attachment-document-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-inline-attachment-document-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-attachment-document-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-inline-attachment-shadow {
   syntax: "*";
   inherits: true;

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

@@ -1,6 +1,8 @@
 @layer components {
   :where([data-control-family="inline-citation"][data-slot="root"]),
   :where([data-control-ui="inline-citation"][data-slot="content"]) {
+    --cui-inline-citation-favicon-background: var(--muted);
+    --cui-inline-citation-favicon-radius: 9999px;
     --cui-inline-citation-navigation-background: oklch(from var(--muted) l c h / 0.45);
     --cui-inline-citation-quote-background: oklch(from var(--muted) l c h / 0.55);
     --cui-inline-citation-quote-radius: var(--radius-control);
@@ -34,19 +36,39 @@
     }
   }
 
+  :where([data-control-family="inline-citation"][data-slot="trigger"]:focus-visible) {
+    background: var(--cui-inline-citation-trigger-hover-background);
+    color: var(--cui-inline-citation-trigger-hover-foreground);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="inline-citation"][data-slot="trigger"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="inline-citation"][data-slot="trigger"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+
   :where([data-control-ui="inline-citation"][data-slot="favicon"]) {
     inline-size: calc(var(--spacing) * 3.5);
     block-size: calc(var(--spacing) * 3.5);
-    border: 1px solid var(--background);
-    border-radius: 9999px;
-    background: var(--muted);
+    border: var(--control-rim-width) solid var(--background);
+    border-radius: var(--cui-inline-citation-favicon-radius);
+    background: var(--cui-inline-citation-favicon-background);
   }
 
   :where([data-control-family="inline-citation"][data-slot="navigation"]) {
     min-block-size: calc(var(--spacing) * 10);
     gap: calc(var(--spacing) * 1);
     padding-inline: calc(var(--spacing) * 2);
-    border-bottom: 1px solid var(--border);
+    border-bottom: var(--control-rim-width) solid var(--border);
     background: var(--cui-inline-citation-navigation-background);
   }
 
@@ -74,8 +96,8 @@
   :where([data-control-ui="inline-citation"][data-slot="source-favicon"]) {
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
-    border-radius: 9999px;
-    background: var(--muted);
+    border-radius: var(--cui-inline-citation-favicon-radius);
+    background: var(--cui-inline-citation-favicon-background);
   }
 
   :where([data-control-family="inline-citation"][data-slot="source-title"]) {
@@ -115,6 +137,10 @@
     padding-inline: calc(var(--spacing) * 1);
     font-variant-numeric: tabular-nums;
   }
+
+  :where([data-control-family="inline-citation"][data-slot="label"]) {
+    font-variant-numeric: tabular-nums;
+  }
 }
 
 @property --cui-inline-citation-trigger-radius {
@@ -176,3 +202,15 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-inline-citation-favicon-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-citation-favicon-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/item.css

@@ -4,7 +4,7 @@
     --cui-item-hover-background: transparent;
     --cui-item-hover-border-color: var(--_item-border-color);
     --cui-item-border-width: 0px;
-    --cui-item-active-scale: 1;
+    --cui-item-active-scale: 0.99;
     --_item-background: transparent;
     --_item-border-color: transparent;
     outline: var(--cui-item-border-width) solid var(--_item-border-color);
@@ -61,6 +61,7 @@
     font-size: var(--text-sm);
     line-height: var(--leading-relaxed);
     color: var(--muted-foreground);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="item"][data-slot="title"]) {
@@ -69,6 +70,7 @@
     font-weight: var(--font-weight-medium);
     line-height: 1;
     color: var(--foreground);
+    text-wrap: balance;
   }
 
   :where([data-control-family="item"][data-slot="media"]) {

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

@@ -26,6 +26,7 @@
     gap: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
+    text-wrap: balance;
   }
 
   :where([data-control-family="markdown-block"][data-slot="content"]) {

package/dist/styles/recipes/markdown.css

@@ -89,6 +89,7 @@
   :where([data-control-family="markdown"][data-slot="paragraph"]) {
     margin-block: calc(var(--spacing) * 3);
     line-height: calc(var(--spacing) * 7);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="markdown"][data-slot="h3"]) {
@@ -97,6 +98,8 @@
     font-size: var(--text-base);
     line-height: var(--text-base--line-height);
     color: var(--foreground);
+    text-wrap: balance;
+    scroll-margin-block-start: calc(var(--spacing) * 6);
   }
 
   :where([data-control-family="markdown"][data-slot="h2"]) {
@@ -104,6 +107,8 @@
     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);
   }
 
   :where([data-control-family="markdown"][data-slot="h1"]) {
@@ -111,6 +116,8 @@
     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);
   }
 
   :where([data-control-family="markdown"][data-slot="h1"]),

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

@@ -0,0 +1,203 @@
+@layer components {
+  :where([data-control-family="page-layout"][data-slot="root"]) {
+    --cui-page-layout-article-size: 40rem;
+    --cui-page-layout-aside-size: 11.25rem;
+    --cui-page-layout-padding-inline: calc(var(--spacing) * 5);
+    --cui-page-layout-padding-block: calc(var(--spacing) * 10) calc(var(--spacing) * 24);
+    --cui-page-layout-column-gap: calc(var(--spacing) * 5);
+    --cui-page-layout-header-gap: calc(var(--spacing) * 8);
+    --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;
+
+    /* 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);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="root"][data-width="content"]) {
+    --cui-page-layout-article-size: 48rem;
+  }
+
+  :where([data-control-family="page-layout"][data-slot="root"][data-width="wide"]) {
+    --cui-page-layout-article-size: 80rem;
+  }
+
+  :where([data-control-family="page-layout"][data-slot="root"][data-width="full"]) {
+    --cui-page-layout-size: none;
+    --cui-page-layout-padding-inline: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="header"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "title" "description" "actions";
+    align-items: center;
+    width: 100%;
+    max-width: var(--cui-page-layout-size);
+    margin-inline: auto;
+    column-gap: var(--cui-page-layout-header-column-gap);
+    row-gap: var(--cui-page-layout-header-row-gap);
+    padding-inline: var(--cui-page-layout-padding-inline);
+    padding-block-end: var(--cui-page-layout-header-gap);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="body"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    max-width: var(--cui-page-layout-size);
+    margin-inline: auto;
+    gap: var(--cui-page-layout-column-gap);
+    padding-inline: var(--cui-page-layout-padding-inline);
+    padding-block: var(--cui-page-layout-padding-block);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="title"]) {
+    grid-area: title;
+    font-size: var(--text-heading-1);
+    line-height: var(--text-heading-1--line-height);
+    font-weight: var(--text-heading-1--font-weight);
+    letter-spacing: var(--text-heading-1--letter-spacing);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="description"]) {
+    grid-area: description;
+    font-size: var(--text-body);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="page-layout"][data-slot="actions"]) {
+    grid-area: actions;
+    justify-self: start;
+  }
+
+  @media (width >= 40rem) {
+    :where([data-control-family="page-layout"][data-slot="header"]) {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: "title actions" "description actions";
+    }
+
+    :where([data-control-family="page-layout"][data-slot="actions"]) {
+      justify-self: end;
+    }
+  }
+
+  :where([data-control-family="page-layout"][data-slot="header"][data-variant="sticky"]) {
+    position: sticky;
+    top: var(--cui-page-layout-sticky-gap);
+    z-index: 20;
+  }
+
+  /* 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);
+    z-index: 20;
+    align-items: start;
+    height: 0;
+    padding-block-end: 0;
+    pointer-events: none;
+  }
+
+  :where([data-control-family="page-layout"][data-slot="header"][data-variant="floating"] > *) {
+    pointer-events: auto;
+  }
+
+  :where(
+    [data-control-family="page-layout"][data-slot="header"][data-variant="floating"]
+      [data-control-family="page-layout"][data-slot="actions"]
+  ) {
+    justify-self: end;
+  }
+
+  :where([data-control-family="page-layout"][data-slot="root"][data-width="full"] [data-control-family="page-layout"][data-slot="body"]) {
+    padding-block: 0;
+    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(
+        [data-control-family="page-layout"][data-slot="header"]:has(+ [data-control-family="page-layout"][data-slot="body"][data-aside])
+      ) {
+      --cui-page-layout-size: calc(
+        var(--cui-page-layout-article-size) +
+        var(--cui-page-layout-column-gap) +
+        var(--cui-page-layout-aside-size) +
+        var(--cui-page-layout-padding-inline) *
+        2
+      );
+    }
+
+    :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;
+    }
+  }
+}
+
+@property --cui-page-layout-article-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-aside-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-padding-block {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-page-layout-column-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-header-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-header-column-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-header-row-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-page-layout-size {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-page-layout-sticky-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/pagination.css

@@ -20,6 +20,7 @@
       inset 0 0 0 1px var(--_pagination-link-border-color),
       var(--cui-pagination-link-shadow);
     color: var(--cui-pagination-link-foreground);
+    font-variant-numeric: tabular-nums;
     outline: none;
   }
 
@@ -50,6 +51,21 @@
   :where([data-control-family="pagination"][data-slot="ellipsis"]) {
     color: var(--muted-foreground);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="pagination"][data-slot="link"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="pagination"][data-slot="link"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-pagination-link-radius {

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

@@ -85,11 +85,13 @@
   :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"]) {
@@ -150,7 +152,7 @@
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="backdrop"]) {
     transition-property: opacity;
-    transition-timing-function: var(--ease-standard);
+    transition-timing-function: var(--ease-emphasized);
     --_drawer-backdrop-transition-duration: var(--duration-base);
     transition-duration: var(--_drawer-backdrop-transition-duration);
   }

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

@@ -80,11 +80,13 @@
     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-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="button"][data-popup-kind="toast"][data-popup-part="close"]) {