@ctrl-ui/react 0.8.7 → 0.8.9

package/dist/styles/recipes/button.css

@@ -1,27 +1,23 @@
 @layer components {
+  :where([data-control-family="button"][data-size="xs"])::after {
+    content: "";
+    position: absolute;
+    inset: 50%;
+    translate: -50% -50%;
+    inline-size: max(100%, var(--target-min));
+    block-size: max(100%, var(--target-min));
+  }
+
   @media (pointer: coarse) {
-    :where([data-control-family="button"][data-size="xs"]) {
-      position: relative;
+    :where([data-control-family="button"][data-size="xs"])::after {
+      block-size: max(100%, var(--touch-target));
     }
 
-    :where([data-control-family="button"][data-size="xs"])::after {
-      content: "";
-      position: absolute;
-      inset: 50% 50%;
-      translate: -50% -50%;
-      inline-size: 100%;
-      block-size: max(100%, 44px);
+    :where([data-control-family="button"][data-size="xs"][data-icon-only="true"])::after {
+      inline-size: max(100%, var(--touch-target));
     }
   }
 
-  :where(
-    [data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]
-      > [data-control-family="button"][data-popup-part="close"][data-icon-only="true"]
-  ) {
-    position: absolute;
-    top: 12px;
-    right: 12px;
-  }
   :where([data-control-family="button"][data-control="true"]) {
     --cui-button-radius: var(--radius-control);
     --cui-button-gap: calc(var(--spacing) * 1.5);
@@ -34,9 +30,10 @@
     --cui-button-background-image: none;
     --cui-button-foreground: var(--muted-foreground);
     --cui-button-hover-background: var(--hover-fill);
+    --cui-button-hover-background-image: var(--cui-button-background-image);
     --cui-button-hover-foreground: var(--foreground);
     --cui-button-press-background: var(--cui-button-hover-background);
-    --cui-button-press-scale: 0.98;
+    --cui-button-press-scale: 0.96;
     --cui-button-active-background: var(--active-fill);
     --cui-button-active-foreground: var(--foreground);
     --cui-button-active-hover-background: var(--cui-button-active-background);
@@ -54,13 +51,14 @@
     color: var(--cui-button-foreground);
     cursor: pointer;
     font-weight: var(--font-weight-medium);
-    outline: none;
     transition-property: scale, translate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
   }
 
+  /* Every slot, not just root: callers override data-slot, and an unpositioned xs ::after hit area spans the nearest positioned ancestor. */
   :where([data-control-family="button"]) {
+    position: relative;
     gap: var(--cui-button-gap);
   }
 
@@ -133,7 +131,7 @@
   :where([data-control-family="button"][data-variant="solid"]) {
     --cui-button-background: var(--primary);
     --cui-button-foreground: var(--primary-foreground);
-    --cui-button-hover-background: oklch(from var(--primary) l c h / 0.9);
+    --cui-button-hover-background: color-mix(in oklch, var(--primary) 90%, var(--foreground));
     --cui-button-hover-foreground: var(--primary-foreground);
     --cui-button-shadow: var(--shadow-sm);
     --cui-button-active-background: var(--cui-button-background);
@@ -165,7 +163,7 @@
   :where([data-control-family="button"][data-tone="danger"][data-variant="solid"]) {
     --cui-button-background: var(--destructive);
     --cui-button-foreground: var(--destructive-foreground);
-    --cui-button-hover-background: oklch(from var(--destructive) l c h / 0.9);
+    --cui-button-hover-background: oklch(from var(--destructive) calc(l - 0.05) c h);
     --cui-button-hover-foreground: var(--destructive-foreground);
     --cui-button-active-background: var(--cui-button-background);
     --cui-button-active-foreground: var(--cui-button-foreground);
@@ -181,68 +179,6 @@
     --cui-button-radius: 9999px;
   }
 
-  @media (hover: hover) {
-    :where([data-control-family="button"][data-control="true"]:hover) {
-      background-color: var(--cui-button-hover-background);
-      box-shadow: var(--cui-button-hover-shadow);
-      color: var(--cui-button-hover-foreground);
-    }
-  }
-
-  :where([data-control-family="button"][data-popup-open]) {
-    background-color: var(--cui-button-open-background);
-    color: var(--cui-button-open-foreground);
-    box-shadow: var(--cui-button-open-shadow);
-  }
-
-  :where([data-control-family="button"][data-active="true"]) {
-    background-color: var(--cui-button-active-background);
-    box-shadow: var(--cui-button-active-shadow);
-    color: var(--cui-button-active-foreground);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="button"][data-active="true"]:hover) {
-      background-color: var(--cui-button-active-hover-background);
-      color: var(--cui-button-active-foreground);
-    }
-  }
-
-  @scope ([data-track="hover"]) to ([data-track]) {
-    @media (hover: hover) {
-      :where(
-          [data-track="hover"] [data-control-family="button"][data-track-item]:hover:not([data-active="true"], [data-popup-open], :active)
-        ) {
-        background-color: var(--cui-button-background);
-        box-shadow: var(--cui-button-shadow);
-      }
-
-      :where(
-          [data-track="hover"] [data-control-family="button"][data-track-item][data-active="true"]:hover:not([data-popup-open], :active)
-        ) {
-        background-color: var(--cui-button-active-background);
-      }
-    }
-  }
-
-  @scope ([data-track="slide"]) to ([data-track]) {
-    :where([data-track="slide"] [data-control-family="button"][data-track-item]:not([data-popup-open], :active)) {
-      background-color: var(--cui-button-background);
-      box-shadow: var(--cui-button-shadow);
-    }
-  }
-
-  :where([data-control-family="button"][data-control="true"]:active) {
-    background-color: var(--cui-button-press-background);
-    box-shadow: var(--cui-button-press-shadow);
-    scale: var(--cui-button-press-scale);
-  }
-
-  :where([data-control-family="button"]:is(:disabled, [data-disabled], [aria-disabled="true"])) {
-    cursor: not-allowed;
-    opacity: 0.45;
-  }
-
   :where([data-control-family="button"][data-button-kind="model-switcher"][data-slot="value"]) {
     gap: calc(var(--spacing) * 1.5);
   }
@@ -305,6 +241,11 @@
   inherits: true;
 }
 
+@property --cui-button-hover-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-button-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/calendar.css

@@ -10,9 +10,9 @@
 
   :where([data-control-family="calendar"][data-slot="caption-label"]) {
     color: var(--foreground);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
-    line-height: var(--text-sm--line-height, 1.25rem);
+    line-height: 1.4;
   }
 
   :where([data-control-family="calendar"][data-slot="months"]) {
@@ -31,7 +31,7 @@
   :where([data-control-family="calendar"][data-slot="weekday"]) {
     padding-block-end: calc(var(--spacing) * 1.5);
     color: var(--muted-foreground);
-    font-size: 0.72rem;
+    font-size: var(--text-caption);
     font-weight: var(--font-weight-normal);
   }
 
@@ -39,44 +39,38 @@
     inline-size: calc(var(--spacing) * 8);
     block-size: calc(var(--spacing) * 8);
     border-radius: var(--radius-control);
-    outline: none;
     color: var(--muted-foreground);
   }
 
+  :where([data-control-family="calendar"]:is([data-slot="nav-button"], [data-slot="day"]):is(:disabled, [aria-disabled="true"])) {
+    opacity: var(--disabled-opacity);
+  }
+
   @media (hover: hover) {
-    :where([data-control-family="calendar"][data-slot="nav-button"]:hover) {
+    :where([data-control-family="calendar"][data-slot="nav-button"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: var(--accent);
       color: var(--accent-foreground);
     }
   }
 
-  :where([data-control-family="calendar"][data-slot="nav-button"]:disabled) {
-    opacity: 0.4;
-  }
-
   :where([data-control-family="calendar"][data-slot="day"]) {
     block-size: calc(var(--spacing) * 9);
     min-inline-size: calc(var(--spacing) * 9);
     border-radius: var(--cui-calendar-day-radius);
-    outline: none;
     color: var(--foreground);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-normal);
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="calendar"][data-slot="day"]:hover) {
+    :where([data-control-family="calendar"][data-slot="day"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: var(--accent);
       color: var(--accent-foreground);
     }
   }
 
-  :where([data-control-family="calendar"][data-slot="day"]:disabled) {
-    opacity: 0.4;
-  }
-
   :where([data-control-family="calendar"][data-slot="day"][data-today]) {
     background-color: var(--cui-calendar-today-background);
     color: var(--accent-foreground);
@@ -97,13 +91,13 @@
   }
 
   :where([data-control-family="calendar"][data-slot="day"][data-range-start]) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   :where([data-control-family="calendar"][data-slot="day"][data-range-end]) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 
   :where([data-control-family="calendar"][data-slot="day-cell"]) {
@@ -117,8 +111,8 @@
 
   @media (pointer: coarse) {
     :where([data-control-family="calendar"][data-slot="day"]) {
-      min-inline-size: 44px;
-      min-block-size: 44px;
+      min-inline-size: var(--touch-target);
+      min-block-size: var(--touch-target);
     }
 
     :where([data-control-family="calendar"][data-slot="nav-button"]) {
@@ -131,7 +125,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/card.css

@@ -3,7 +3,7 @@
     --cui-card-radius: var(--radius-lg);
     --cui-card-background: var(--card);
     --cui-card-border-color: var(--border);
-    --cui-card-border-width: 1px;
+    --cui-card-border-width: var(--control-rim-width);
     --cui-card-shadow: var(--shadow-sm);
     --cui-card-backdrop-filter: none;
     border: var(--cui-card-border-width) solid var(--cui-card-border-color);
@@ -47,7 +47,7 @@
 
   :where([data-control-family="card"][data-slot="title"]) {
     font-weight: var(--font-weight-semibold);
-    line-height: 1;
+    line-height: var(--leading-tight);
     text-wrap: balance;
   }
 

package/dist/styles/recipes/chat-composer-attachment.css

@@ -8,14 +8,14 @@
     --cui-chat-composer-attachment-border-color: var(--control-rim);
     --cui-chat-composer-attachment-height: calc(var(--spacing) * 14);
     --cui-chat-composer-attachment-radius: var(--radius-popover);
-    --cui-chat-composer-attachment-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
+    --cui-chat-composer-attachment-image-outline-color: var(--image-outline);
     --cui-chat-composer-attachment-shadow:
       inset 0 0 0 var(--control-rim-width) var(--cui-chat-composer-attachment-border-color), var(--shadow-sm);
     --cui-chat-composer-attachment-backdrop-filter: blur(var(--backdrop-blur-popover));
     --cui-chat-composer-attachment-progress-background: transparent;
     --cui-chat-composer-attachment-progress-foreground: oklch(from var(--background) l c h / var(--overlay-opacity));
     block-size: var(--cui-chat-composer-attachment-height);
-    text-align: left;
+    text-align: start;
     border-radius: var(--cui-chat-composer-attachment-radius);
     background: var(--cui-chat-composer-attachment-background);
     box-shadow: var(--cui-chat-composer-attachment-shadow);
@@ -129,7 +129,13 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="button"][data-chat-composer-attachment-remove="true"]:hover) {
+    :where(
+        [data-control-family="button"][data-chat-composer-attachment-remove="true"]:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        ):hover
+      ) {
       --cui-button-hover-background: oklch(from var(--foreground) l c h / 0.85);
       --cui-button-hover-foreground: var(--background);
     }

package/dist/styles/recipes/chat-composer.css

@@ -32,13 +32,9 @@
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where(
-    [data-control-family="chat-composer"][data-slot="shell"][data-keyboard-navigation]:has(
-      :is(textarea, [contenteditable="true"]):focus-visible
-    )
-  ) {
+  :where([data-control-family="chat-composer"][data-slot="shell"]:has(:is(textarea, [contenteditable="true"]):focus-visible)) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
+    outline-offset: calc(var(--focus-ring-width) * -1);
   }
 
   :where([data-control-family="chat-composer"][data-slot="shell"] [data-control-family="dropzone"][data-slot="overlay"]) {
@@ -52,7 +48,7 @@
 
   :where([data-control-family="chat-composer"]:is([data-slot="textarea"], [data-slot="fallback"], [data-slot="placeholder"])),
   :where([data-control-family="chat-composer"][data-slot="editor"] .ProseMirror) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     line-height: calc(var(--spacing) * 6);
   }
 
@@ -61,6 +57,7 @@
     border: 0;
     background: transparent;
     color: var(--cui-chat-composer-input-foreground);
+    --focus-ring-width: 0px;
     outline: none;
   }
 
@@ -71,12 +68,12 @@
   }
 
   :where([data-control-family="chat-composer"][data-slot="textarea"]:disabled) {
-    opacity: 0.6;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="chat-composer"][data-slot="editor"] [aria-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="chat-composer"][data-slot="toolbar"]) {
@@ -129,7 +126,7 @@
   @media (pointer: coarse) {
     :where([data-control-family="chat-composer"]:is([data-slot="textarea"], [data-slot="fallback"], [data-slot="placeholder"])),
     :where([data-control-family="chat-composer"][data-slot="editor"] .ProseMirror) {
-      font-size: max(16px, var(--text-sm));
+      font-size: max(var(--text-input-min), var(--text-body));
     }
   }
 }

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

@@ -32,6 +32,36 @@
     border-radius: var(--cui-chat-layout-radius);
   }
 
+  :where([data-control-family="chat-layout"][data-slot="header"]) {
+    padding-block: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    border-block-end: var(--cui-chat-layout-border-width) solid var(--cui-chat-layout-border-color);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="header"] > :not([data-control-family="chat-layout"])) {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="title"]) {
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--leading-tight);
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="description"]) {
+    margin-block-start: calc(var(--spacing) * 0.5);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="actions"]) {
+    gap: calc(var(--spacing) * 1);
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
     gap: calc(var(--spacing) * 8);
     padding-block: calc(var(--spacing) * 6);
@@ -44,6 +74,11 @@
     }
   }
 
+  :where([data-control-family="chat-layout"][data-slot="thread-content"]:has(> [data-control-family="chat-message"][data-layout="flat"])) {
+    gap: 0;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   :where([data-control-family="chat-layout"][data-slot="turn"]) {
     gap: var(--cui-chat-layout-turn-gap);
   }

package/dist/styles/recipes/chat-message-social.css

@@ -0,0 +1,123 @@
+@layer components {
+  :where([data-control-family="chat-message"][data-slot="root"][data-kind="typing"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: calc(var(--spacing) * 5);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"][data-continuation]) {
+    padding-block-start: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="avatar"][data-continuation]) {
+    margin-block-start: 0;
+    block-size: calc(var(--spacing) * 5);
+    border-color: transparent;
+    background: transparent;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="avatar"] [data-slot="time"]) {
+    font-size: 0.625rem;
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"]:hover > [data-slot="avatar"] [data-slot="time"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="row"]:focus-within > [data-slot="avatar"] [data-slot="time"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 1);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"][data-state="error"]) {
+    color: var(--destructive);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reactions"]) {
+    margin-block-start: calc(var(--spacing) * 1.5);
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where(
+    [data-control-family="chat-message"]:is(
+      [data-slot="header"],
+      [data-slot="footer"],
+      [data-slot="reactions"]
+    )[data-layout="bubble"][data-role="user"]
+  ) {
+    justify-content: flex-end;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="footer"][data-layout="flat"]) {
+    padding-inline: 0;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction"]) {
+    gap: calc(var(--spacing) * 1);
+    block-size: calc(var(--spacing) * 6);
+    padding-inline: calc(var(--spacing) * 2);
+    border: var(--cui-chat-message-reaction-border-width) solid var(--cui-chat-message-reaction-border-color);
+    border-radius: var(--cui-chat-message-reaction-radius);
+    background: var(--cui-chat-message-reaction-background);
+    font-size: var(--text-caption);
+    font-weight: 500;
+    color: var(--muted-foreground);
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction"][data-pressed]) {
+    border-color: var(--cui-chat-message-reaction-pressed-border-color);
+    background: var(--cui-chat-message-reaction-pressed-background);
+    color: var(--foreground);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="reaction"][aria-pressed]:hover) {
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reaction-emoji"]) {
+    font-size: var(--text-body);
+    line-height: 1;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="reply-summary"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+    transition-property: background-color, color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="reply-summary"]:hover) {
+      background-color: var(--cui-chat-message-row-hover-background);
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="chat-message"][data-slot="replies"]) {
+    margin-block-start: calc(var(--spacing) * 2);
+    padding-inline-start: calc(var(--spacing) * 3);
+    border-inline-start: 2px solid var(--border);
+  }
+}