@ctrl-ui/react 0.8.4 → 0.8.6

package/dist/styles/recipes/activity.css

@@ -1,10 +1,11 @@
 @layer components {
   :where([data-control-family="activity"][data-slot="root"]) {
-    margin-block: calc(var(--spacing) * 1);
     --cui-activity-row-foreground: var(--muted-foreground);
     --cui-activity-trigger-hover-background: oklch(from var(--muted) l c h / 0.45);
     --cui-activity-trigger-radius: var(--radius-control);
     --cui-activity-code-background: oklch(from var(--muted) l c h / 0.5);
+    --cui-activity-code-radius: var(--radius-control);
+    margin-block: calc(var(--spacing) * 1);
     font-size: var(--text-body);
   }
 
@@ -36,6 +37,11 @@
     inline-size: calc(var(--spacing) * 3.5);
     block-size: calc(var(--spacing) * 3.5);
     color: oklch(from var(--muted-foreground) l c h / 0.75);
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="activity"][data-slot="trigger"][data-state="open"] [data-slot="chevron"]) {
+    rotate: 90deg;
   }
 
   :where([data-control-family="activity"][data-slot="icon"]) {
@@ -59,7 +65,7 @@
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="running"] [data-slot="icon"][data-status-icon] svg) {
-    animation: spin var(--duration-slow) linear infinite;
+    animation: activity-spin calc(var(--duration-slow) * 2) linear infinite;
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="error"] [data-slot="icon"]) {
@@ -99,9 +105,30 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);
     background: var(--cui-activity-code-background);
-    border-radius: var(--radius-control);
+    border-radius: var(--cui-activity-code-radius);
     font-size: var(--text-caption);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="activity"][data-slot="trigger"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="activity"][data-slot="trigger"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+}
+
+@keyframes activity-spin {
+  to {
+    rotate: 360deg;
+  }
 }
 
 @property --cui-activity-row-foreground {
@@ -127,3 +154,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-activity-code-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/alert.css

@@ -44,6 +44,7 @@
     color: var(--cui-alert-description-foreground);
     font-size: var(--cui-alert-font-size);
     line-height: var(--text-sm--line-height);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="alert"][data-slot="description"] p) {
@@ -53,6 +54,7 @@
   :where([data-control-family="alert"][data-slot="title"]) {
     font-weight: var(--cui-alert-title-font-weight);
     letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
   }
 
   :where([data-control-family="alert"][data-slot="root"] > svg) {

package/dist/styles/recipes/audio-visualizer.css

@@ -2,6 +2,7 @@
   :where([data-control-family="audio-visualizer"][data-variant]) {
     --cui-audio-visualizer-radius: var(--radius-control);
     --cui-audio-visualizer-bar-background: oklch(from var(--primary) l c h / 0.8);
+    --cui-audio-visualizer-bar-radius: var(--radius-control);
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
   }
@@ -47,7 +48,7 @@
 
   :where([data-control-family="audio-visualizer"][data-slot="bar"]) {
     background: var(--cui-audio-visualizer-bar-background);
-    border-radius: var(--radius-control);
+    border-radius: var(--cui-audio-visualizer-bar-radius);
     opacity: var(--_audio-visualizer-level-opacity);
     transition:
       clip-path var(--duration-base) var(--ease-standard),
@@ -71,6 +72,12 @@
   initial-value: 0px;
 }
 
+@property --cui-audio-visualizer-bar-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-audio-visualizer-bar-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/button-group.css

@@ -83,6 +83,14 @@
   :where([data-control-family="button-group"][data-slot="root"] > [data-active="true"]:focus-within) {
     z-index: 3;
   }
+
+  @media (pointer: coarse) {
+    :where(
+        [data-control-family="button-group"][data-slot="root"][data-orientation="vertical"] [data-control-family="button"][data-size="xs"]
+      )::after {
+      block-size: 100%;
+    }
+  }
 }
 
 @property --cui-button-group-text-radius {

package/dist/styles/recipes/button.css

@@ -1,4 +1,19 @@
 @layer components {
+  @media (pointer: coarse) {
+    :where([data-control-family="button"][data-size="xs"]) {
+      position: relative;
+    }
+
+    :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="popup"][data-popup-kind="dialog"][data-slot="content"]
       > [data-control-family="button"][data-popup-part="close"][data-icon-only="true"]

package/dist/styles/recipes/calendar.css

@@ -63,6 +63,7 @@
     font-size: var(--text-sm);
     font-weight: var(--font-weight-normal);
     line-height: 1;
+    font-variant-numeric: tabular-nums;
   }
 
   @media (hover: hover) {
@@ -113,6 +114,26 @@
     margin-block-start: calc(var(--spacing) * 1);
     border-collapse: collapse;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="calendar"][data-slot="day"]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
+    }
+
+    :where([data-control-family="calendar"][data-slot="nav-button"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="calendar"][data-slot="nav-button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-calendar-day-radius {

package/dist/styles/recipes/card.css

@@ -48,11 +48,13 @@
   :where([data-control-family="card"][data-slot="title"]) {
     font-weight: var(--font-weight-semibold);
     line-height: 1;
+    text-wrap: balance;
   }
 
   :where([data-control-family="card"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
   }
 }
 

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

@@ -1,7 +1,12 @@
 @layer components {
+  :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:
@@ -9,7 +14,7 @@
     --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: calc(var(--spacing) * 14);
+    block-size: var(--cui-chat-composer-attachment-height);
     text-align: left;
     border-radius: var(--cui-chat-composer-attachment-radius);
     background: var(--cui-chat-composer-attachment-background);
@@ -22,7 +27,20 @@
 
   :where([data-control-family="chat-composer-attachment"][data-slot="list"]) {
     gap: calc(var(--spacing) * 2);
-    padding: 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"]) {
@@ -93,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"]) {
@@ -134,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;

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

@@ -5,12 +5,13 @@
     --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: 1px;
+    --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-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);
@@ -109,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 {
@@ -187,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

@@ -3,8 +3,9 @@
     --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: 1px;
+    --cui-chat-layout-border-width: var(--control-rim-width);
     --cui-chat-layout-shadow: var(--shadow-md);
+    --cui-chat-layout-scroll-button-gap: calc(var(--spacing) * 3);
     background: var(--cui-chat-layout-background);
   }
 
@@ -35,6 +36,23 @@
     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="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;
+    transition-property: opacity, scale, visibility;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="chat-layout"][data-slot="scroll-anchor"][data-hidden]) {
+    opacity: 0;
+    scale: 0.9;
+    visibility: hidden;
+  }
 }
 
 @property --cui-chat-layout-radius {
@@ -65,3 +83,9 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-chat-layout-scroll-button-gap {
+  syntax: "<length>";
+  inherits: true;
+  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);
@@ -70,9 +121,12 @@
     margin-block-start: calc(var(--spacing) * 1);
     gap: calc(var(--spacing) * 1);
     opacity: 1;
+    transition-property: opacity;
+    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;
     }
@@ -92,6 +146,7 @@
     padding-inline: calc(var(--spacing) * 1);
     font-size: var(--text-caption);
     color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
   }
 }
 
@@ -164,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

@@ -82,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 {

package/dist/styles/recipes/code-diff.css

@@ -167,6 +167,7 @@
 
   :where([data-control-family="code-diff"][data-slot="title"]) {
     font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="code-diff"][data-slot="file-title"]) {

package/dist/styles/recipes/code.css

@@ -108,6 +108,31 @@
     text-align: right;
     font-variant-numeric: tabular-nums;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="code"][data-slot="editor"]) {
+      font-size: max(16px, var(--text-label));
+    }
+
+    :where([data-control-family="code"][data-slot="header"]) {
+      min-block-size: 44px;
+    }
+
+    :where([data-control-family="code"][data-slot="actions"] [data-control-family="button"]),
+    :where([data-control-family="button"][data-code-copy="true"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="code"][data-slot="actions"] [data-control-family="button"])::after,
+    :where([data-control-family="button"][data-code-copy="true"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-code-radius {

package/dist/styles/recipes/context.css

@@ -2,12 +2,15 @@
   :where([data-control-family="context"][data-slot="root"]),
   :where([data-control-family="context"][data-slot="content"]) {
     --cui-context-graph-radius: 9999px;
+    --cui-context-legend-indicator-radius: 9999px;
     --cui-context-limit-marker-color: var(--destructive-text);
     --cui-context-overage-fill: oklch(from var(--destructive-text) l c h / 0.22);
     --cui-context-track-fill: var(--muted);
+    --cui-context-segment-cache-fill: oklch(from var(--muted-foreground) l c h / 0.55);
     --cui-context-segment-message-fill: oklch(from var(--primary) l c h / 0.65);
     --cui-context-segment-reasoning-fill: oklch(from var(--foreground) l c h / 0.5);
     --cui-context-segment-source-fill: oklch(from var(--accent-foreground) l c h / 0.65);
+    --cui-context-segment-system-fill: oklch(from var(--foreground) l c h / 0.75);
     --cui-context-segment-tool-fill: var(--primary);
   }
 
@@ -34,19 +37,7 @@
   }
 
   :where([data-control-family="context"][data-slot="trigger-label"]) {
-    max-inline-size: 0;
-    opacity: 0;
-    transition-property: max-width, opacity;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where(
-    [data-context-trigger-button="true"]:is(:hover, :focus-visible, [data-popup-open])
-      [data-control-family="context"][data-slot="trigger-label"]
-  ) {
-    max-inline-size: calc(var(--spacing) * 32);
-    opacity: 1;
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="context"][data-slot="content-grid"]) {
@@ -72,16 +63,19 @@
   :where([data-control-family="context"][data-slot="title"]) {
     font-size: var(--text-sm);
     font-weight: var(--font-weight-medium);
+    text-wrap: balance;
   }
 
   :where([data-control-family="context"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-caption);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="context"][data-slot="summary"]) {
     gap: calc(var(--spacing) * 3);
     font-size: var(--text-sm);
+    font-variant-numeric: tabular-nums;
   }
 
   :where([data-control-family="context"][data-slot="summary-value"]) {
@@ -103,7 +97,7 @@
   }
 
   :where([data-control-family="context"][data-slot="segment"][data-kind="system"]) {
-    fill: oklch(from var(--foreground) l c h / 0.75);
+    fill: var(--cui-context-segment-system-fill);
   }
 
   :where([data-control-family="context"][data-slot="segment"][data-kind="tool"]) {
@@ -123,7 +117,7 @@
   }
 
   :where([data-control-family="context"][data-slot="segment"][data-kind="cache"]) {
-    fill: oklch(from var(--muted-foreground) l c h / 0.55);
+    fill: var(--cui-context-segment-cache-fill);
   }
 
   :where([data-control-family="context"][data-slot="overage"]) {
@@ -138,12 +132,12 @@
     margin-block-start: calc(var(--spacing) * 1);
     inline-size: calc(var(--spacing) * 2.5);
     block-size: calc(var(--spacing) * 2.5);
-    border-radius: 9999px;
+    border-radius: var(--cui-context-legend-indicator-radius);
     background: var(--border);
   }
 
   :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="system"]) {
-    background: oklch(from var(--foreground) l c h / 0.75);
+    background: var(--cui-context-segment-system-fill);
   }
 
   :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="tool"]) {
@@ -163,7 +157,7 @@
   }
 
   :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="cache"]) {
-    background: oklch(from var(--muted-foreground) l c h / 0.55);
+    background: var(--cui-context-segment-cache-fill);
   }
 
   :where([data-control-family="context"][data-slot="legend-item"][data-tone="available"] [data-slot="legend-indicator"]) {
@@ -194,6 +188,24 @@
   initial-value: 0px;
 }
 
+@property --cui-context-legend-indicator-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-context-segment-system-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-segment-cache-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-context-track-fill {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/dynamic-notification-input.css

@@ -26,4 +26,10 @@
   :where([data-control-family="button"][data-dynamic-notification-close="true"]:hover) {
     color: inherit;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="dynamic-notification"][data-slot="reply-input"]) {
+      font-size: max(16px, var(--text-body));
+    }
+  }
 }

package/dist/styles/recipes/dynamic-notification.css

@@ -144,6 +144,7 @@
     opacity: 0.55;
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tracking-wide);
+    text-wrap: balance;
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="message"]) {