@ctrl-ui/react 0.8.6 → 0.8.8

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

@@ -1,23 +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="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="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="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;
+  }
+
+  @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);
   }
@@ -25,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);
     }
@@ -41,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"]) {
@@ -65,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);
   }
 
@@ -80,6 +96,58 @@
     color: oklch(from var(--muted-foreground) l c h / 0.5);
   }
 
+  :where(
+    [data-control-family="field"][data-field-kind="number-field"][data-slot="group"]
+      > [data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-area"]
+  ) {
+    padding-inline: calc(var(--spacing) * 2);
+    color: var(--muted-foreground);
+  }
+
+  :where(
+    [data-control-family="field"][data-field-kind="number-field"][data-slot="input"]:has(
+      + [data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-area"]
+    )
+  ) {
+    padding-inline-end: 0;
+    text-align: end;
+  }
+
+  :where(
+    [data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-area"]
+      + [data-control-family="field"][data-field-kind="number-field"][data-slot="input"]
+  ) {
+    padding-inline-start: 0;
+    text-align: start;
+  }
+
+  @media (hover: hover) {
+    :where(
+        [data-control-family="field"][data-field-kind="number-field"][data-slot="group"]
+          > [data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-area"]:hover
+      ) {
+      color: var(--foreground);
+    }
+  }
+
+  :where(
+    [data-control-family="field"][data-field-kind="number-field"][data-slot="group"]:not([data-control])
+      > [data-control-family="field"][data-field-kind="number-field"][data-slot="input"]
+  ) {
+    inline-size: 6ch;
+  }
+
+  @supports (field-sizing: content) {
+    :where(
+        [data-control-family="field"][data-field-kind="number-field"][data-slot="group"]:not([data-control])
+          > [data-control-family="field"][data-field-kind="number-field"][data-slot="input"]
+      ) {
+      inline-size: auto;
+      min-inline-size: 2ch;
+      field-sizing: content;
+    }
+  }
+
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="scrub-cursor"]) {
     color: var(--foreground);
     filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.05));
@@ -110,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

@@ -2,19 +2,23 @@
   :where([data-control-family="field"][data-control="true"]) {
     gap: calc(var(--spacing) * 1.5);
     --cui-field-radius: var(--radius-control);
-    --cui-field-background: oklch(from var(--card) l c h / 0.72);
+    --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(--cui-field-radius);
-    outline: none;
+    border-radius: var(--nest-radius, var(--cui-field-radius));
     background: var(--cui-field-background);
     box-shadow: var(--cui-field-shadow);
     color: var(--cui-field-foreground);
@@ -58,17 +62,36 @@
     color: var(--muted-foreground);
   }
 
+  :where(input[type="search"][data-control-family="field"])::-webkit-search-cancel-button,
+  :where([data-control-family="field"] input[type="search"])::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
   @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="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([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"]:hover:has(
+          [data-control-family="field"]:is(
+              [data-slot="increment"],
+              [data-slot="decrement"],
+              [data-slot="trigger"],
+              [data-slot="clear"]
+            ):hover
+        )
+      ) {
+      background: var(--cui-field-background);
+    }
   }
 
   :where([data-control-family="field"][data-control="true"][data-invalid]),
@@ -81,7 +104,11 @@
   :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;
+    font-weight: var(--font-weight-medium);
   }
 
   :where([data-control-family="field"][data-field-kind="input-otp"][data-slot="slot"]) {
@@ -102,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"]) {
@@ -169,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));
     }
   }
 }
@@ -191,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;
@@ -219,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

@@ -0,0 +1,161 @@
+@layer components {
+  :where([data-control-family="filter-bar"][data-slot="root"]) {
+    --cui-filter-bar-background: var(--control-fill);
+    --cui-filter-bar-foreground: var(--foreground);
+    --cui-filter-bar-border-color: var(--control-rim);
+    --cui-filter-bar-border-width: var(--control-rim-width);
+    --cui-filter-bar-radius: var(--radius-control);
+    --cui-filter-bar-height: var(--control-h-sm);
+    --cui-filter-bar-gap: calc(var(--spacing) * 1.5);
+    --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);
+    --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);
+    background: var(--cui-filter-bar-background);
+    color: var(--cui-filter-bar-foreground);
+    block-size: var(--cui-filter-bar-height);
+    font-size: var(--cui-filter-bar-font-size);
+  }
+
+  :where([data-control-family="filter-bar"]:is([data-slot="segment"], [data-slot="remove"])) {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    max-inline-size: 16rem;
+    padding-inline: var(--cui-filter-bar-padding-inline);
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    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);
+  }
+
+  @media (hover: 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);
+    }
+  }
+
+  :where([data-control-family="filter-bar"][data-draft] [data-slot="segment"]) {
+    opacity: 1;
+    animation: cui-filter-segment-enter var(--duration-fast) var(--ease-emphasized);
+  }
+
+  :where([data-control-family="filter-bar"][data-slot="exit"]) {
+    pointer-events: none;
+    transform-origin: calc(50% - 50% * var(--filter-bar-inline-sign)) center;
+    animation: cui-filter-chip-exit var(--duration-fast) var(--ease-standard) forwards;
+  }
+
+  :where([data-control-family="filter-bar"][data-slot="exit"] [data-slot="chip"]) {
+    block-size: 100%;
+  }
+
+  :where([data-control-family="filter-bar"][data-disabled]) {
+    opacity: var(--disabled-opacity);
+  }
+}
+
+@keyframes cui-filter-segment-enter {
+  from {
+    opacity: 0;
+    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes cui-filter-chip-exit {
+  to {
+    opacity: 0;
+    translate: calc(-4px * var(--filter-bar-inline-sign)) 0;
+    scale: 0.97;
+  }
+}
+
+@property --cui-filter-bar-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-filter-bar-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-filter-bar-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-filter-bar-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-filter-bar-hover-background {
+  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

@@ -1,10 +1,25 @@
 @layer components {
   :where([data-control-family="infinite-canvas"][data-slot="root"]) {
-    --cui-infinite-canvas-radius: var(--radius-panel);
     --cui-infinite-canvas-background: var(--canvas);
     --cui-infinite-canvas-grid-dot-color: oklch(from var(--foreground) l c h / 0.16);
     --cui-infinite-canvas-border-color: var(--border);
-    --cui-infinite-canvas-controls-radius: var(--radius-control);
+    --cui-infinite-canvas-controls-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --cui-infinite-canvas-controls-padding: calc(var(--spacing) * 1);
+    --cui-infinite-canvas-controls-radius: calc(
+      var(--cui-infinite-canvas-controls-item-radius) +
+      clamp(0px, calc(var(--cui-infinite-canvas-controls-item-radius) * 1000), var(--cui-infinite-canvas-controls-padding))
+    );
+    --cui-infinite-canvas-radius: max(
+      var(--radius-panel),
+      calc(
+        var(--cui-infinite-canvas-controls-radius) +
+        clamp(0px, calc(var(--cui-infinite-canvas-controls-radius) * 1000), var(--spacing) * 2)
+      )
+    );
+    --cui-infinite-canvas-padding: max(
+      calc(var(--spacing) * 2),
+      calc(var(--cui-infinite-canvas-radius) - var(--cui-infinite-canvas-controls-radius))
+    );
     --cui-infinite-canvas-controls-background: var(--card);
     --cui-infinite-canvas-controls-border-color: var(--border);
     --cui-infinite-canvas-controls-shadow: var(--shadow-sm);
@@ -12,12 +27,26 @@
     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]) {
+    transition-property: background-position, background-size;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where(
+    [data-control-family="infinite-canvas"][data-slot="root"][data-easing] [data-control-family="infinite-canvas"][data-slot="content"]
+  ) {
+    transition: transform var(--duration-base) var(--ease-standard);
   }
 
   :where([data-control-family="infinite-canvas"][data-slot="controls"]) {
+    --nest-radius: var(--cui-infinite-canvas-controls-item-radius);
+    inset-inline-end: var(--cui-infinite-canvas-padding);
+    inset-block-end: var(--cui-infinite-canvas-padding);
     gap: calc(var(--spacing) * 0.5);
-    padding: calc(var(--spacing) * 1);
+    padding: var(--cui-infinite-canvas-controls-padding);
     border-radius: var(--cui-infinite-canvas-controls-radius);
     background-color: var(--cui-infinite-canvas-controls-background);
     box-shadow:
@@ -54,6 +83,24 @@
   initial-value: transparent;
 }
 
+@property --cui-infinite-canvas-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-infinite-canvas-controls-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-infinite-canvas-controls-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-infinite-canvas-controls-radius {
   syntax: "<length-percentage>";
   inherits: true;

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

@@ -3,9 +3,13 @@
     --cui-inline-attachment-background: var(--card);
     --cui-inline-attachment-hover-shadow: var(--shadow-md);
     --cui-inline-attachment-padding: calc(var(--spacing) * 3);
-    --cui-inline-attachment-radius: var(--radius-field);
+    --_inline-attachment-content-line-height: calc(var(--spacing) * 4);
+    --cui-inline-attachment-radius: min(
+      var(--radius-field),
+      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);
@@ -22,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);
@@ -41,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);
@@ -126,6 +130,7 @@
     box-shadow: var(--cui-inline-attachment-content-shadow);
     backdrop-filter: blur(var(--backdrop-blur-popover));
     font-size: var(--text-caption);
+    line-height: var(--_inline-attachment-content-line-height);
     font-weight: var(--font-weight-medium);
   }