@ctrl-ui/react 0.8.2 → 0.8.5

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

@@ -1,42 +1,56 @@
 @layer components {
-  :where([data-slot="root"][data-control-family="chat-composer-attachment"]) {
-    --cui-chat-composer-attachment-background: oklch(from var(--card) l c h / 0.92);
-    --cui-chat-composer-attachment-border-color: oklch(from var(--border) l c h / 0.8);
-    --cui-chat-composer-attachment-radius: var(--radius-field);
-    --cui-chat-composer-attachment-shadow: var(--shadow-sm);
-    --cui-chat-composer-attachment-progress-background: oklch(from var(--foreground) l c h / 0.1);
-    --cui-chat-composer-attachment-progress-foreground: var(--primary);
-    block-size: calc(var(--spacing) * 14);
+  :where([data-control-family="chat-composer-attachment"][data-slot="root"]:not([data-variant])) {
+    --cui-chat-composer-attachment-list-padding: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant]) {
+    --cui-chat-composer-attachment-background: var(--popover);
+    --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-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;
-    border: 1px solid var(--cui-chat-composer-attachment-border-color);
     border-radius: var(--cui-chat-composer-attachment-radius);
     background: var(--cui-chat-composer-attachment-background);
-    box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
-      var(--cui-chat-composer-attachment-shadow);
-    transition-property: background-color, border-color, box-shadow;
+    box-shadow: var(--cui-chat-composer-attachment-shadow);
+    backdrop-filter: var(--cui-chat-composer-attachment-backdrop-filter);
+    transition-property: background-color, box-shadow;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="list"]) {
     gap: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 3);
+    padding: var(--cui-chat-composer-attachment-list-padding);
+  }
+
+  :where(
+    [data-control-family="chat-composer"][data-slot="shell"]
+      [data-control-family="chat-composer-attachment"][data-slot="root"][data-variant]
+  ) {
+    --cui-chat-composer-attachment-radius: max(
+      var(--radius-sm),
+      min(
+        calc(var(--cui-chat-composer-attachment-height) / 2),
+        calc(var(--cui-chat-composer-shell-radius) - var(--cui-chat-composer-attachment-list-padding))
+      )
+    );
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant="preview"]) {
     inline-size: fit-content;
     max-inline-size: calc(var(--spacing) * 40);
-    padding: calc(var(--spacing) * 1);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant="file"]) {
     inline-size: calc(var(--spacing) * 64);
     max-inline-size: calc(100vw - 5rem);
-    gap: calc(var(--spacing) * 2);
-    padding: calc(var(--spacing) * 1.5);
-    padding-inline-end: calc(var(--spacing) * 8);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant="preview"] [data-slot="preview"]) {
@@ -46,29 +60,31 @@
     max-inline-size: 100%;
   }
 
-  :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant="file"] [data-slot="preview"]) {
-    inline-size: calc(var(--spacing) * 10);
-    block-size: calc(var(--spacing) * 10);
-  }
-
-  :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-state="uploading"]) {
-    border-color: oklch(from var(--primary) l c h / 0.35);
-    box-shadow:
-      inset 0 0 0 1px oklch(from var(--primary) l c h / 0.15),
-      var(--cui-chat-composer-attachment-shadow);
+  :where([data-control-family="chat-composer-attachment"][data-slot="content"]) {
+    padding-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 8);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-state="error"]) {
-    border-color: oklch(from var(--destructive) l c h / 0.45);
-    box-shadow:
-      inset 0 0 0 1px oklch(from var(--destructive) l c h / 0.2),
-      var(--cui-chat-composer-attachment-shadow);
+    --cui-chat-composer-attachment-border-color: oklch(from var(--destructive) l c h / 0.45);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="preview"]) {
-    border-radius: calc(var(--radius-field) - 0.25rem);
     background: var(--muted);
     color: var(--muted-foreground);
+    border-radius: inherit;
+  }
+
+  :where([data-control-family="chat-composer-attachment"][data-slot="preview"] > img) {
+    border-radius: inherit;
+    outline: 1px solid var(--cui-chat-composer-attachment-image-outline-color);
+    outline-offset: -1px;
+  }
+
+  :where([data-control-family="chat-composer-attachment"][data-slot="root"][data-variant="file"] [data-slot="preview"]) {
+    inline-size: calc(var(--spacing) * 14);
+    block-size: 100%;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   :where([data-control-family="chat-composer-attachment"][data-kind="pdf"] [data-slot="preview"]) {
@@ -86,18 +102,8 @@
     font-weight: var(--font-weight-semibold);
   }
 
-  :where([data-control-family="chat-composer-attachment"][data-slot="status"]) {
-    inline-size: calc(var(--spacing) * 4);
-    block-size: calc(var(--spacing) * 4);
-    border: 2px solid oklch(from var(--background) l c h / 0.75);
-    border-top-color: var(--primary);
-    border-radius: 9999px;
-    background: transparent;
-    animation: var(--animate-spin);
-  }
-
   :where([data-control-family="chat-composer-attachment"][data-slot="title"]) {
-    color: var(--foreground);
+    color: var(--popover-foreground);
     font-size: var(--text-label);
     font-weight: var(--font-weight-medium);
   }
@@ -105,6 +111,7 @@
   :where([data-control-family="chat-composer-attachment"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-caption);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="description"][data-state="error"]) {
@@ -115,29 +122,28 @@
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
     padding: 0;
-    border-radius: 9999px;
-    background: var(--foreground);
-    color: var(--background);
-    box-shadow: var(--shadow-sm);
+    --cui-button-radius: 9999px;
+    --cui-button-background: var(--foreground);
+    --cui-button-foreground: var(--background);
+    --cui-button-shadow: var(--shadow-sm);
   }
 
   @media (hover: hover) {
     :where([data-control-family="button"][data-chat-composer-attachment-remove="true"]:hover) {
-      background: oklch(from var(--foreground) l c h / 0.85);
+      --cui-button-hover-background: oklch(from var(--foreground) l c h / 0.85);
+      --cui-button-hover-foreground: var(--background);
     }
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="progress"]) {
-    block-size: calc(var(--spacing) * 1);
     background: var(--cui-chat-composer-attachment-progress-background);
   }
 
   :where([data-control-family="chat-composer-attachment"][data-slot="progress-indicator"]) {
-    border-radius: 9999px;
     background: var(--cui-chat-composer-attachment-progress-foreground);
-    transition-property: width;
+    transition-property: inline-size;
     transition-duration: var(--duration-slow);
-    transition-timing-function: var(--ease-emphasized);
+    transition-timing-function: var(--ease-standard);
   }
 }
 
@@ -147,6 +153,18 @@
   initial-value: 0px;
 }
 
+@property --cui-chat-composer-attachment-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-chat-composer-attachment-list-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-chat-composer-attachment-background {
   syntax: "<color>";
   inherits: true;
@@ -164,6 +182,11 @@
   inherits: true;
 }
 
+@property --cui-chat-composer-attachment-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}
+
 @property --cui-chat-composer-attachment-progress-background {
   syntax: "<color>";
   inherits: true;
@@ -175,3 +198,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-chat-composer-attachment-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -1,15 +1,17 @@
 @layer components {
   :where([data-control-family="chat-composer"][data-slot="root"]) {
-    --cui-chat-composer-root-background: oklch(from var(--background) l c h / 0.8);
-    --cui-chat-composer-shell-background: oklch(from var(--card) l c h / 0.78);
+    --cui-chat-composer-root-background: transparent;
+    --cui-chat-composer-shell-background: var(--card);
     --cui-chat-composer-shell-background-image: none;
     --cui-chat-composer-shell-backdrop-filter: none;
     --cui-chat-composer-shell-border-color: var(--border);
+    --cui-chat-composer-shell-border-width: var(--control-rim-width);
     --cui-chat-composer-shell-radius: var(--radius-field);
-    --cui-chat-composer-shell-shadow: var(--shadow-sm);
-    --cui-chat-composer-input-foreground: var(--foreground);
+    --cui-chat-composer-shell-shadow: var(--shadow-md);
+    --cui-chat-composer-input-foreground: var(--card-foreground);
     --cui-chat-composer-input-placeholder-foreground: var(--muted-foreground);
     --cui-chat-composer-mention-radius: var(--radius-popup-item);
+    --cui-chat-composer-mention-icon-radius: min(var(--radius-sm), calc(var(--spacing) * 1));
     --cui-chat-composer-mention-border-color: transparent;
     --cui-chat-composer-mention-border-width: 0px;
     --cui-chat-composer-mention-background: oklch(from var(--primary) l c h / 0.1);
@@ -18,33 +20,25 @@
     background: var(--cui-chat-composer-root-background);
   }
 
-  @supports (backdrop-filter: blur(1px)) {
-    :where([data-control-family="chat-composer"][data-slot="root"]) {
-      --cui-chat-composer-root-background: oklch(from var(--background) l c h / 0.7);
-      backdrop-filter: blur(var(--backdrop-blur-popover));
-    }
-  }
-
   :where([data-control-family="chat-composer"][data-slot="shell"]) {
-    border: 1px solid var(--cui-chat-composer-shell-border-color);
+    border: var(--cui-chat-composer-shell-border-width) solid var(--cui-chat-composer-shell-border-color);
     border-radius: var(--cui-chat-composer-shell-radius);
     background-color: var(--cui-chat-composer-shell-background);
     background-image: var(--cui-chat-composer-shell-background-image);
-    box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
-      var(--cui-chat-composer-shell-shadow);
+    box-shadow: var(--cui-chat-composer-shell-shadow);
     backdrop-filter: var(--cui-chat-composer-shell-backdrop-filter);
     transition-property: box-shadow, filter, translate;
     transition-duration: var(--duration-base);
     transition-timing-function: var(--ease-emphasized);
   }
 
-  :where([data-control-family="chat-composer"][data-slot="shell"][data-state="submitting"]) {
-    translate: 0 calc(var(--spacing) * -0.5);
-    filter: saturate(1.02);
-    box-shadow:
-      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
-      var(--shadow-md);
+  :where(
+    [data-control-family="chat-composer"][data-slot="shell"][data-keyboard-navigation]: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);
   }
 
   :where([data-control-family="chat-composer"][data-slot="accent"]) {
@@ -76,9 +70,15 @@
     opacity: 0.6;
   }
 
+  :where([data-control-family="chat-composer"][data-slot="editor"] [aria-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
   :where([data-control-family="chat-composer"][data-slot="toolbar"]) {
     min-block-size: calc(var(--spacing) * 10);
     gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
     padding-inline: calc(var(--spacing) * 2.5);
     padding-block-end: calc(var(--spacing) * 2);
   }
@@ -110,13 +110,20 @@
   :where([data-control-family="chat-composer"][data-slot="mention-icon"]) {
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);
-    border-radius: 3px;
+    border-radius: var(--cui-chat-composer-mention-icon-radius);
   }
 
   :where([data-control-family="chat-composer"][data-slot="mention-description"]) {
     font-size: var(--text-micro);
     color: var(--muted-foreground);
   }
+
+  @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));
+    }
+  }
 }
 
 @property --cui-chat-composer-root-background {
@@ -153,6 +160,12 @@
   initial-value: transparent;
 }
 
+@property --cui-chat-composer-shell-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-chat-composer-shell-shadow {
   syntax: "*";
   inherits: true;
@@ -182,6 +195,12 @@
   initial-value: 0px;
 }
 
+@property --cui-chat-composer-mention-icon-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-chat-composer-mention-border-color {
   syntax: "<color>";
   inherits: true;

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

@@ -1,74 +1,57 @@
 @layer components {
-  :where([data-control-family="chat-layout"][data-slot="root"]) {
+  :where([data-control-family="chat-layout"][data-slot="root"][data-chrome]) {
     --cui-chat-layout-radius: var(--radius-scene);
     --cui-chat-layout-background: var(--background);
     --cui-chat-layout-border-color: var(--border);
+    --cui-chat-layout-border-width: var(--control-rim-width);
     --cui-chat-layout-shadow: var(--shadow-md);
-    --cui-chat-layout-thought-foreground: var(--muted-foreground);
-    --cui-chat-layout-thought-hover-background: oklch(from var(--foreground) l c h / 0.04);
+    --cui-chat-layout-scroll-button-gap: calc(var(--spacing) * 3);
     background: var(--cui-chat-layout-background);
-    border: 1px solid var(--cui-chat-layout-border-color);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="root"][data-chrome="panel"]) {
+    border: var(--cui-chat-layout-border-width) solid var(--cui-chat-layout-border-color);
     border-radius: var(--cui-chat-layout-radius);
     box-shadow: var(--cui-chat-layout-shadow);
   }
 
-  :where([data-control-family="chat-layout"][data-chat-layout-kind="thread"][data-slot="root"]) {
+  :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
     gap: calc(var(--spacing) * 8);
     padding-block: calc(var(--spacing) * 6);
     padding-inline: calc(var(--spacing) * 4);
   }
 
   @media (width >= 40rem) {
-    :where([data-control-family="chat-layout"][data-chat-layout-kind="thread"][data-slot="root"]) {
+    :where([data-control-family="chat-layout"][data-slot="thread-content"]) {
       padding-inline: calc(var(--spacing) * 8);
     }
   }
 
-  :where([data-control-family="chat-layout"][data-chat-layout-kind="thought"][data-slot="root"]) {
-    margin-block: 0 calc(var(--spacing) * 2);
+  :where([data-control-family="chat-layout"][data-slot="dock"])::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--scroll-fade-size) * -1) 0 0;
+    z-index: -1;
+    pointer-events: none;
+    background: var(--cui-chat-layout-background);
+    mask-image: linear-gradient(to bottom, transparent, oklch(0 0 0 / 0.7) calc(var(--scroll-fade-size) * 3));
   }
 
-  :where([data-control-family="chat-layout"][data-slot="trigger"]) {
-    min-block-size: 0;
+  :where([data-control-family="chat-layout"][data-slot="scroll-anchor"]) {
+    position: absolute;
+    inset-block-end: calc(100% + var(--cui-chat-layout-scroll-button-gap));
+    inset-inline: 0;
+    margin-inline: auto;
     inline-size: fit-content;
-    gap: calc(var(--spacing) * 1);
-    padding-inline: calc(var(--spacing) * 1.5);
-    padding-block: calc(var(--spacing) * 1);
-    border-radius: var(--radius-control);
-    color: var(--cui-chat-layout-thought-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="chat-layout"][data-slot="trigger"]:hover) {
-      background: var(--cui-chat-layout-thought-hover-background);
-      color: var(--foreground);
-    }
-  }
-
-  :where([data-control-family="chat-layout"][data-slot="chevron"]) {
-    font-size: var(--text-sm);
-    line-height: 1;
-    transition: rotate var(--duration-base) var(--ease-emphasized);
-  }
-
-  :where([data-control-family="chat-layout"][data-slot="details"]) {
-    padding-inline: calc(var(--spacing) * 1);
-    padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
-    color: var(--muted-foreground);
-    font-size: var(--text-caption);
-    line-height: calc(var(--spacing) * 5);
-  }
-
-  :where([data-control-family="chat-layout"][data-slot="title"]) {
-    color: var(--muted-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
+    transition-property: opacity, scale, visibility;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
   }
 
-  :where([data-control-family="chat-layout"][data-slot="trigger"][data-state="open"] > span:last-child) {
-    rotate: 90deg;
+  :where([data-control-family="chat-layout"][data-slot="scroll-anchor"][data-hidden]) {
+    opacity: 0;
+    scale: 0.9;
+    visibility: hidden;
   }
 }
 
@@ -90,19 +73,19 @@
   initial-value: transparent;
 }
 
-@property --cui-chat-layout-shadow {
-  syntax: "*";
+@property --cui-chat-layout-border-width {
+  syntax: "<length>";
   inherits: true;
+  initial-value: 0px;
 }
 
-@property --cui-chat-layout-thought-foreground {
-  syntax: "<color>";
+@property --cui-chat-layout-shadow {
+  syntax: "*";
   inherits: true;
-  initial-value: transparent;
 }
 
-@property --cui-chat-layout-thought-hover-background {
-  syntax: "<color>";
+@property --cui-chat-layout-scroll-button-gap {
+  syntax: "<length>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: 0px;
 }

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

@@ -3,7 +3,7 @@
     --cui-chat-message-avatar-radius: 9999px;
     --cui-chat-message-avatar-background: var(--card);
     --cui-chat-message-avatar-border-color: var(--border);
-    --cui-chat-message-avatar-border-width: 1px;
+    --cui-chat-message-avatar-border-width: var(--control-rim-width);
     --cui-chat-message-radius: 0px;
     --cui-chat-message-corner-radius: 0px;
     --cui-chat-message-background: transparent;
@@ -12,7 +12,58 @@
     --cui-chat-message-border-color: transparent;
     --cui-chat-message-border-width: 0px;
     --cui-chat-message-shadow: none;
+    --cui-chat-message-pending-dot-color: var(--muted-foreground);
+    --cui-chat-message-pending-dot-size: calc(var(--spacing) * 1.5);
   }
+
+  :where([data-control-family="chat-message"][data-slot="pending"]) {
+    gap: var(--cui-chat-message-pending-dot-size);
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="pending"] > span) {
+    inline-size: var(--cui-chat-message-pending-dot-size);
+    block-size: var(--cui-chat-message-pending-dot-size);
+    border-radius: 9999px;
+    background: var(--cui-chat-message-pending-dot-color);
+    animation: chat-message-pending calc(var(--duration-slow) * 3) var(--ease-standard) infinite;
+  }
+
+  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(2)) {
+    animation-delay: calc(var(--duration-slow) / 2);
+  }
+
+  :where([data-control-family="chat-message"][data-slot="pending"] > span:nth-child(3)) {
+    animation-delay: var(--duration-slow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-control-family="chat-message"][data-slot="pending"] > span) {
+      animation: none;
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  :where([data-motion="reduced"] [data-control-family="chat-message"][data-slot="pending"] > span) {
+    animation: none;
+    opacity: 1;
+    scale: 1;
+  }
+
+  @keyframes chat-message-pending {
+    0%,
+    60%,
+    100% {
+      opacity: 0.3;
+      scale: 0.75;
+    }
+    30% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
   :where([data-control-family="chat-message"][data-slot="row"]) {
     gap: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 2);
@@ -27,7 +78,7 @@
   }
 
   :where([data-control-family="chat-message"][data-slot="root"]:not([data-role="user"]) [data-slot="body"]) {
-    max-inline-size: 80%;
+    max-inline-size: 100%;
     flex: 1;
   }
 
@@ -50,6 +101,7 @@
     background-image: var(--cui-chat-message-background-image);
     box-shadow: var(--cui-chat-message-shadow);
     color: var(--cui-chat-message-foreground);
+    overflow-wrap: anywhere;
     font-size: var(--text-body);
     line-height: calc(var(--spacing) * 5);
   }
@@ -68,24 +120,33 @@
   :where([data-control-family="chat-message"][data-slot="actions"]) {
     margin-block-start: calc(var(--spacing) * 1);
     gap: calc(var(--spacing) * 1);
-    opacity: 0;
+    opacity: 1;
     transition-property: opacity;
-    transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-message"][data-slot="actions"]) {
+      opacity: 0;
+    }
+
     :where([data-control-family="chat-message"][data-slot="row"]:hover [data-control-family="chat-message"][data-slot="actions"]) {
       opacity: 1;
     }
   }
 
+  :where([data-control-family="chat-message"][data-slot="root"]:focus-within [data-slot="actions"]) {
+    opacity: 1;
+  }
+
   :where([data-control-family="chat-message"][data-slot="header"]) {
     margin-block-end: calc(var(--spacing) * 1);
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 1);
     font-size: var(--text-caption);
     color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
   }
 }
 
@@ -158,3 +219,15 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-chat-message-pending-dot-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-chat-message-pending-dot-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/choice.css

@@ -4,6 +4,7 @@
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);
     --cui-choice-radius: var(--radius-sm);
+    --cui-choice-shadow: var(--shadow-sm);
     --cui-choice-border-color: var(--border);
     --cui-choice-checked-background: var(--primary);
     --cui-choice-checked-border-color: var(--primary);
@@ -12,10 +13,10 @@
     background: var(--_choice-background);
     box-shadow:
       inset 0 0 0 1px var(--cui-choice-border-color),
-      var(--shadow-sm);
+      var(--cui-choice-shadow);
     color: currentColor;
     outline: none;
-    transition-property: background-color, box-shadow, color;
+    transition-property: background-color, color;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -81,6 +82,18 @@
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]) {
     outline-style: none;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"])::after,
+    :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-choice-radius {
@@ -106,3 +119,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-choice-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}