@ctrl-ui/react 0.8.7 → 0.8.8

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

@@ -3,7 +3,7 @@
     --cui-environment-variables-error-foreground: var(--destructive-text);
     --cui-environment-variables-message-background: oklch(from var(--destructive) l c h / 0.05);
     --cui-environment-variables-message-border-color: oklch(from var(--destructive) l c h / 0.4);
-    --cui-environment-variables-message-border-width: 1px;
+    --cui-environment-variables-message-border-width: var(--control-rim-width);
     --cui-environment-variables-message-foreground: var(--destructive-text);
     --cui-environment-variables-meta-foreground: var(--muted-foreground);
     --cui-environment-variables-title-foreground: var(--foreground);
@@ -75,12 +75,9 @@
     color: var(--foreground);
   }
 
-  :where([data-control-family="environment-variables"]:is([data-slot="key-input"], [data-slot="value-input"])) {
-    font-size: var(--text-caption);
-  }
-
-  :where([data-control-family="environment-variables"][data-slot="value-group"][data-invalid="true"]) {
-    box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.7);
+  :where([data-control-family="environment-variables"][data-slot="row"] [data-control-family="field"][data-control="true"]) {
+    --cui-field-font-size: var(--text-caption);
+    font-family: var(--font-mono);
   }
 
   :where([data-control-family="environment-variables"][data-slot="field-error"]) {
@@ -114,18 +111,10 @@
     text-align: center;
   }
 
-  :where([data-control-family="environment-variables"][data-slot="value-input"]) {
-    font-family: var(--font-mono);
-  }
-
   :where([data-control-family="environment-variables"][data-slot="field-label"]) {
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="environment-variables"][data-slot="key-input"]) {
-    font-family: var(--font-mono);
-  }
-
   :where([data-control-family="environment-variables"][data-slot="column-labels"]) {
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 1);

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

@@ -1,33 +1,41 @@
 @layer components {
   :where([data-control-family="field"][data-field-kind="input-group"][data-slot="addon"]),
-  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]),
-  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]),
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]),
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]),
-  :where([data-control-family="field"][data-field-kind="native-select"][data-slot="icon"]) {
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]) {
     color: var(--muted-foreground);
   }
 
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]),
+  :where([data-control-family="field"][data-field-kind="number-field"]:is([data-slot="decrement"], [data-slot="increment"])) {
+    background-color: var(--cui-field-affordance-background);
+    box-shadow: var(--cui-field-affordance-shadow);
+    color: var(--cui-field-affordance-foreground);
+  }
+
   :where([data-control-family="field"][data-slot="root"][data-control="true"]:is(button, a)) {
     cursor: pointer;
     color: var(--muted-foreground);
     text-align: start;
   }
 
-  :where([data-control-family="field"][data-slot="root"][data-control="true"]:is(button, a):hover) {
-    color: var(--foreground);
+  @media (hover: hover) {
+    :where(
+        [data-control-family="field"][data-slot="root"][data-control="true"]:is(button, a):hover:not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        )
+      ) {
+      color: var(--foreground);
+    }
   }
 
   :where([data-control-family="field"][data-field-kind="input-group"][data-slot="input"]),
-  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]),
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"]) {
-    outline: none;
     background: transparent;
     color: var(--foreground);
   }
 
   :where([data-control-family="field"][data-field-kind="input-group"][data-slot="input"])::placeholder,
-  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"])::placeholder,
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"])::placeholder {
     color: var(--muted-foreground);
   }
@@ -35,14 +43,17 @@
   :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]),
   :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]) {
     border-radius: var(--radius-control);
-    outline: none;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]:hover),
-    :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]:hover),
-    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:hover),
-    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:hover) {
+    :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]:hover:not(:disabled, [data-disabled])),
+    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:hover:not(:disabled, [data-disabled])),
+    :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:hover:not(:disabled, [data-disabled])) {
+      background-color: var(--cui-field-affordance-hover-background);
+      color: var(--foreground);
+    }
+
+    :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]:hover:not(:disabled, [data-disabled])) {
       background: var(--hover-fill);
       color: var(--foreground);
     }
@@ -51,7 +62,7 @@
   :where([data-control-family="field"][data-field-kind="combobox"][data-slot="trigger"]:disabled),
   :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.45;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="field"][data-field-kind="combobox"][data-slot="icon"]) {
@@ -75,13 +86,8 @@
     border-inline-start: 1px solid var(--border);
   }
 
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]),
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]) {
-    outline: none;
-  }
-
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:active),
-  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:active) {
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:active:not(:disabled, [data-disabled])),
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="increment"]:active:not(:disabled, [data-disabled])) {
     background: oklch(from var(--foreground) l c h / 0.06);
   }
 
@@ -172,7 +178,7 @@
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="label"][data-disabled]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="field"][data-field-kind="field"][data-slot="description"]) {

package/dist/styles/recipes/field.css

@@ -3,18 +3,22 @@
     gap: calc(var(--spacing) * 1.5);
     --cui-field-radius: var(--radius-control);
     --cui-field-background: var(--control-fill);
+    --cui-field-hover-background: var(--hover-fill);
+    --cui-field-affordance-background: transparent;
+    --cui-field-affordance-shadow: 0 0 transparent;
+    --cui-field-affordance-foreground: var(--muted-foreground);
+    --cui-field-affordance-hover-background: var(--hover-fill);
     --cui-field-foreground: var(--foreground);
     --cui-field-border-color: var(--control-rim);
     --cui-field-border-width: var(--control-rim-width);
     --cui-field-shadow: var(--shadow-inset);
     --cui-field-backdrop-filter: blur(0px);
-    --cui-field-focus-border-color: var(--border);
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
     --cui-field-height: var(--control-h-md);
     --cui-field-padding-inline: var(--padding-x);
     --cui-field-font-size: var(--text-body);
     border: var(--cui-field-border-width) solid var(--cui-field-border-color);
     border-radius: var(--nest-radius, var(--cui-field-radius));
-    outline: none;
     background: var(--cui-field-background);
     box-shadow: var(--cui-field-shadow);
     color: var(--cui-field-foreground);
@@ -64,12 +68,16 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="field"][data-control="true"][data-field-kind="autocomplete"]:hover),
-    :where([data-control-family="field"][data-control="true"][data-field-kind="combobox"]:hover),
-    :where([data-control-family="field"][data-control="true"][data-field-kind="native-select"]:hover),
-    :where([data-control-family="field"][data-control="true"][data-field-kind="select"]:hover),
-    :where([data-control-family="field"][data-control="true"][data-field-kind="number-field"]:hover) {
-      background: var(--hover-fill);
+    :where(
+        [data-control-family="field"][data-control="true"]:is(
+          [data-field-kind="autocomplete"],
+          [data-field-kind="combobox"],
+          [data-field-kind="native-select"],
+          [data-field-kind="select"],
+          [data-field-kind="number-field"]
+        ):hover:not(:disabled, [data-disabled], [aria-disabled="true"])
+      ) {
+      background: var(--cui-field-hover-background);
     }
 
     :where(
@@ -84,11 +92,8 @@
       ) {
       background: var(--cui-field-background);
     }
-
-    :where([data-control-family="field"][data-control="true"]:is(:focus-visible, :focus-within)) {
-      border-color: var(--cui-field-focus-border-color);
-    }
   }
+
   :where([data-control-family="field"][data-control="true"][data-invalid]),
   :where([data-control-family="field"][data-control="true"][aria-invalid="true"]) {
     box-shadow:
@@ -99,7 +104,7 @@
   :where([data-control-family="field"][data-control="true"]:disabled),
   :where([data-control-family="field"][data-control="true"][data-disabled]) {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
   :where([data-control-family="field"][data-field-kind="select"][data-slot="trigger"]) {
     cursor: pointer;
@@ -124,8 +129,20 @@
     appearance: none;
   }
 
+  :where(div[data-control-family="field"][data-field-kind="native-select"]),
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="input-group"]) {
+    --cui-field-affordance-background: transparent;
+    --cui-field-affordance-shadow: 0 0 transparent;
+    --cui-field-affordance-hover-background: var(--hover-fill);
+    --cui-field-affordance-foreground: var(--muted-foreground);
+    --cui-field-font-size: var(--text-body);
+  }
+
   :where([data-control-family="field"][data-field-kind="native-select"][data-slot="icon"]) {
-    right: calc(var(--padding-x) * 0.6);
+    inset-inline-end: calc(var(--padding-x) * 0.6);
+    background-color: var(--cui-field-affordance-background);
+    box-shadow: var(--cui-field-affordance-shadow);
+    color: var(--cui-field-affordance-foreground);
   }
 
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="drag-icon"]) {
@@ -191,13 +208,9 @@
     padding-inline: calc(var(--spacing) * 2);
   }
 
-  :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));
+    :where([data-control-family="field"]:is(input, textarea, select)) {
+      font-size: max(var(--text-input-min), var(--cui-field-font-size));
     }
   }
 }
@@ -213,6 +226,34 @@
   inherits: true;
 }
 
+@property --cui-field-hover-background {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-affordance-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-affordance-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-affordance-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: currentcolor;
+}
+
+@property --cui-field-affordance-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-field-foreground {
   syntax: "<color>";
   inherits: true;
@@ -241,12 +282,6 @@
   inherits: true;
 }
 
-@property --cui-field-focus-border-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-field-height {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/filter-bar.css

@@ -10,13 +10,17 @@
     --cui-filter-bar-padding-inline: calc(var(--spacing) * 2);
     --cui-filter-bar-font-size: var(--text-label);
     --cui-filter-bar-hover-background: var(--hover-fill);
-    --cui-filter-bar-focus-ring-color: var(--ring);
+    --filter-bar-inline-sign: 1;
     gap: var(--cui-filter-bar-gap);
     border: 0;
     padding: 0;
     margin: 0;
   }
 
+  :where([data-control-family="filter-bar"][data-slot="root"]:dir(rtl)) {
+    --filter-bar-inline-sign: -1;
+  }
+
   :where([data-control-family="filter-bar"][data-slot="chip"]) {
     border: var(--cui-filter-bar-border-width) solid var(--cui-filter-bar-border-color);
     border-radius: var(--cui-filter-bar-radius);
@@ -38,19 +42,21 @@
     color: inherit;
     font-size: inherit;
     gap: calc(var(--spacing) * 1.5);
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
   :where([data-control-family="filter-bar"][data-slot="chip"] > :not(:first-child)) {
     border-inline-start: var(--cui-filter-bar-border-width) solid var(--cui-filter-bar-border-color);
   }
 
-  :where([data-control-family="filter-bar"]:is([data-slot="segment"], [data-slot="remove"]):focus-visible) {
-    outline: 2px solid var(--cui-filter-bar-focus-ring-color);
-    outline-offset: -2px;
-  }
-
   @media (hover: hover) {
-    :where([data-control-family="filter-bar"]:is([data-slot="segment"], [data-slot="remove"]):enabled:hover) {
+    :where(
+        [data-control-family="filter-bar"]:is([data-slot="segment"], [data-slot="remove"]):not(
+          :disabled,
+          [data-disabled],
+          [aria-disabled="true"]
+        ):hover
+      ) {
       background: var(--cui-filter-bar-hover-background);
     }
   }
@@ -62,7 +68,7 @@
 
   :where([data-control-family="filter-bar"][data-slot="exit"]) {
     pointer-events: none;
-    transform-origin: left center;
+    transform-origin: calc(50% - 50% * var(--filter-bar-inline-sign)) center;
     animation: cui-filter-chip-exit var(--duration-fast) var(--ease-standard) forwards;
   }
 
@@ -71,28 +77,14 @@
   }
 
   :where([data-control-family="filter-bar"][data-disabled]) {
-    opacity: 0.5;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where([data-control-family="filter-bar"]),
-    :where([data-control-family="filter-bar"] *) {
-      animation: none;
-      transition: none;
-    }
-  }
-
-  :where([data-motion="reduced"] [data-control-family="filter-bar"]),
-  :where([data-motion="reduced"] [data-control-family="filter-bar"] *) {
-    animation: none;
-    transition: none;
+    opacity: var(--disabled-opacity);
   }
 }
 
 @keyframes cui-filter-segment-enter {
   from {
     opacity: 0;
-    translate: -4px 0;
+    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
   }
   to {
     opacity: 1;
@@ -103,7 +95,8 @@
 @keyframes cui-filter-chip-exit {
   to {
     opacity: 0;
-    transform: translateX(-4px) scale(0.97);
+    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
+    scale: 0.97;
   }
 }
 
@@ -166,9 +159,3 @@
   inherits: true;
   initial-value: transparent;
 }
-
-@property --cui-filter-bar-focus-ring-color {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}

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

@@ -6,7 +6,7 @@
   :where([data-control-family="gradient-editor"][data-slot="root"]) {
     gap: calc(var(--spacing) * 3);
     --cui-gradient-editor-add-border-color: var(--border);
-    --cui-gradient-editor-add-border-width: 1px;
+    --cui-gradient-editor-add-border-width: var(--control-rim-width);
     --cui-gradient-editor-add-radius: 9999px;
     --cui-gradient-editor-preview-radius: var(--radius-field);
     --cui-gradient-editor-preview-ring-color: oklch(from var(--border) l c h / 0.6);
@@ -37,7 +37,6 @@
     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);
-    outline: none;
     transition: scale var(--duration-fast) var(--ease-standard);
   }
 
@@ -47,11 +46,10 @@
     border: var(--cui-gradient-editor-add-border-width) dashed var(--cui-gradient-editor-add-border-color);
     border-radius: var(--cui-gradient-editor-add-radius);
     color: var(--muted-foreground);
-    outline: none;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="gradient-editor"][data-slot="stop-add"]:hover) {
+    :where([data-control-family="gradient-editor"][data-slot="stop-add"]:hover:not(:disabled)) {
       border-color: oklch(from var(--foreground) l c h / 0.4);
       color: var(--foreground);
     }
@@ -61,6 +59,15 @@
     scale: 115% 115%;
   }
 
+  :where([data-control-family="gradient-editor"][data-slot="stop"])::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="gradient-editor"][data-slot="stop-add"]) {
       position: relative;
@@ -69,10 +76,14 @@
     :where([data-control-family="gradient-editor"][data-slot="stop-add"])::after {
       content: "";
       position: absolute;
-      inset: 50% 50%;
+      inset: 50%;
       translate: -50% -50%;
-      inline-size: max(100%, 44px);
-      block-size: max(100%, 44px);
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
+    }
+
+    :where([data-control-family="gradient-editor"][data-slot="stop"])::after {
+      block-size: max(100%, var(--touch-target));
     }
   }
 }

package/dist/styles/recipes/infinite-canvas.css

@@ -27,7 +27,6 @@
     background-color: var(--cui-infinite-canvas-background);
     background-image: radial-gradient(circle at center, var(--cui-infinite-canvas-grid-dot-color) 1px, transparent 1px);
     box-shadow: 0 0 0 1px var(--cui-infinite-canvas-border-color);
-    outline-style: none;
   }
 
   :where([data-control-family="infinite-canvas"][data-slot="root"][data-easing]) {

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

@@ -9,7 +9,7 @@
       calc(var(--cui-inline-attachment-padding) + var(--_inline-attachment-content-line-height) / 2 + var(--spacing))
     );
     --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-image-outline-color: var(--image-outline);
     --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);
@@ -26,7 +26,7 @@
     box-shadow:
       inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
       var(--cui-inline-attachment-shadow);
-    text-align: left;
+    text-align: start;
     transition-property: box-shadow;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
@@ -45,7 +45,7 @@
         var(--cui-inline-attachment-hover-shadow);
     }
 
-    :where([data-control-family="inline-attachment"][data-slot="root"]:disabled:hover) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:is(:disabled, [aria-disabled="true"]):hover) {
       box-shadow:
         inset 0 0 0 var(--control-rim-width) var(--cui-inline-attachment-ring-color),
         var(--cui-inline-attachment-shadow);

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"]) {