@ctrl-ui/react 0.8.5 → 0.8.7

package/dist/styles/recipes/choice.css

@@ -6,13 +6,14 @@
     --cui-choice-radius: var(--radius-sm);
     --cui-choice-shadow: var(--shadow-sm);
     --cui-choice-border-color: var(--border);
+    --cui-choice-border-width: 1px;
     --cui-choice-checked-background: var(--primary);
     --cui-choice-checked-border-color: var(--primary);
-    --_choice-background: oklch(from var(--card) l c h / 0.72);
+    --_choice-background: var(--control-fill);
     border-radius: var(--cui-choice-radius);
     background: var(--_choice-background);
     box-shadow:
-      inset 0 0 0 1px var(--cui-choice-border-color),
+      inset 0 0 0 var(--cui-choice-border-width) var(--cui-choice-border-color),
       var(--cui-choice-shadow);
     color: currentColor;
     outline: none;
@@ -47,7 +48,7 @@
   :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"][data-invalid]) {
     --cui-choice-border-color: var(--destructive);
     box-shadow:
-      inset 0 0 0 1px var(--cui-choice-border-color),
+      inset 0 0 0 var(--cui-choice-border-width) var(--cui-choice-border-color),
       var(--shadow-sm),
       0 0 0 1px var(--destructive);
   }
@@ -108,6 +109,12 @@
   initial-value: transparent;
 }
 
+@property --cui-choice-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}
+
 @property --cui-choice-checked-background {
   syntax: "<color>";
   inherits: true;

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

@@ -1,10 +1,13 @@
 @layer components {
   :where([data-control-family="code-diff"][data-slot="root"]) {
-    margin-block: calc(var(--spacing) * 4);
     --cui-code-diff-background: var(--background);
     --cui-code-diff-border-color: var(--border);
     --cui-code-diff-border-width: 1px;
-    --cui-code-diff-radius: var(--radius-panel);
+    --_code-diff-corner-inset: calc(var(--spacing) * 1.5);
+    --cui-code-diff-radius: min(
+      var(--radius-panel),
+      calc(var(--control-h-xs) / 2 + var(--cui-code-diff-border-width) + var(--_code-diff-corner-inset))
+    );
     --cui-code-diff-shadow: var(--shadow-sm);
     --cui-code-diff-foreground: var(--code-foreground);
     --cui-code-diff-add-background: var(--diff-add-line);
@@ -23,21 +26,30 @@
 
   :where([data-control-family="code-diff"]:is([data-slot="header"], [data-slot="file-header"])) {
     gap: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 3);
     border-bottom: 1px solid var(--border);
     background: var(--diff-gutter-bg);
   }
 
   :where([data-control-family="code-diff"][data-slot="header"]) {
     min-block-size: calc(var(--spacing) * 10);
+    padding-block: var(--_code-diff-corner-inset);
+    padding-inline: calc(var(--spacing) * 3) var(--_code-diff-corner-inset);
   }
 
   :where([data-control-family="code-diff"][data-slot="file-header"]) {
     min-block-size: calc(var(--spacing) * 9);
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="code-diff"][data-slot="root"] > [data-control-family="button"][data-code-floating="true"]) {
+    --nest-radius: max(0px, calc(var(--cui-code-diff-radius) - var(--cui-code-diff-border-width) - var(--_code-diff-corner-inset)));
+    inset-block-start: var(--_code-diff-corner-inset);
+    inset-inline-end: var(--_code-diff-corner-inset);
   }
 
   :where([data-control-family="code-diff"][data-slot="actions"]) {
+    --nest-radius: max(0px, calc(var(--cui-code-diff-radius) - var(--cui-code-diff-border-width) - var(--_code-diff-corner-inset)));
     gap: calc(var(--spacing) * 2);
   }
 

package/dist/styles/recipes/code.css

@@ -1,10 +1,10 @@
 @layer components {
   :where([data-control-family="code"][data-slot="root"]) {
-    margin-block: calc(var(--spacing) * 4);
     --cui-code-background: var(--background);
     --cui-code-border-color: var(--control-rim);
     --cui-code-border-width: 1px;
-    --cui-code-radius: var(--radius-panel);
+    --_code-corner-inset: calc(var(--spacing) * 1.5);
+    --cui-code-radius: min(var(--radius-panel), calc(var(--control-h-xs) / 2 + var(--cui-code-border-width) + var(--_code-corner-inset)));
     --cui-code-shadow: var(--shadow-sm);
     --cui-code-text-foreground: var(--code-foreground);
     --cui-code-title-foreground: var(--muted-foreground);
@@ -19,7 +19,6 @@
   }
 
   :where([data-control-family="code"][data-slot="root"][data-chrome="embedded"]) {
-    margin-block: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
@@ -29,12 +28,19 @@
   :where([data-control-family="code"][data-slot="header"]) {
     min-block-size: calc(var(--spacing) * 10);
     gap: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 1.5);
-    padding-inline: calc(var(--spacing) * 3);
+    padding-block: var(--_code-corner-inset);
+    padding-inline: calc(var(--spacing) * 3) var(--_code-corner-inset);
     border-bottom: 1px solid var(--border);
   }
 
+  :where([data-control-family="code"][data-slot="floating-frame"] > [data-control-family="button"][data-code-floating="true"]) {
+    --nest-radius: max(0px, calc(var(--cui-code-radius) - var(--cui-code-border-width) - var(--_code-corner-inset)));
+    inset-block-start: var(--_code-corner-inset);
+    inset-inline-end: var(--_code-corner-inset);
+  }
+
   :where([data-control-family="code"][data-slot="actions"]) {
+    --nest-radius: max(0px, calc(var(--cui-code-radius) - var(--cui-code-border-width) - var(--_code-corner-inset)));
     gap: calc(var(--spacing) * 1);
     margin-inline-start: auto;
   }

package/dist/styles/recipes/collapsible.css

@@ -1,9 +1,34 @@
 @layer components {
+  :where([data-control-family="collapsible"][data-slot="root"]) {
+    --cui-collapsible-trigger-radius: var(--radius-control);
+    --cui-collapsible-trigger-hover-background: var(--hover-fill);
+  }
+
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
+    display: flex;
+    width: 100%;
+    min-height: var(--control-h-sm);
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--cui-collapsible-trigger-radius);
+    padding-inline: calc(var(--spacing) * 2);
+    color: var(--foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    text-align: start;
     outline: none;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="collapsible"][data-slot="trigger"]:is(:hover, :focus-visible)) {
+    background: var(--cui-collapsible-trigger-hover-background);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"] > svg) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex-shrink: 0;
+    color: var(--muted-foreground);
     transition: rotate var(--duration-base) var(--ease-standard);
   }
 
@@ -22,3 +47,15 @@
     rotate: 90deg;
   }
 }
+
+@property --cui-collapsible-trigger-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-collapsible-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/color-picker.css

@@ -4,10 +4,20 @@
     block-size: calc(var(--spacing) * 8);
   }
 
+  :where(
+    [data-control-family="field"][data-field-kind="input-group"][data-slot="addon"]
+      > [data-control-family="color-picker"][data-slot="trigger"]
+  ) {
+    inline-size: calc(var(--cui-field-height) * 0.5);
+    block-size: calc(var(--cui-field-height) * 0.5);
+  }
+
   :where([data-control-family="popup"][data-popup-kind="color-picker"][data-popup-part="surface"]) {
+    --_color-picker-surface-padding: calc(var(--spacing) * 3);
+    --_color-picker-area-radius-cap: max(var(--radius-sm), calc(var(--cui-popup-radius) - var(--_color-picker-surface-padding)));
     inline-size: calc(var(--spacing) * 64);
     gap: calc(var(--spacing) * 3);
-    padding: calc(var(--spacing) * 3);
+    padding: var(--_color-picker-surface-padding);
   }
 
   :where([data-control-family="color-picker"][data-slot="hue-track"]),
@@ -122,7 +132,7 @@
 
   :where([data-control-family="color-picker"][data-slot="area"]) {
     block-size: calc(var(--spacing) * 40);
-    border-radius: var(--cui-color-picker-area-radius);
+    border-radius: min(var(--cui-color-picker-area-radius), var(--_color-picker-area-radius-cap, 9999px));
     box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
     --_color-picker-area-thumb-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
   }

package/dist/styles/recipes/dockable-panel.css

@@ -1,7 +1,11 @@
 @layer components {
   :where([data-control-family="dockable-panel"][data-slot="root"]),
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-dockable-panel-root]) {
-    --cui-dockable-panel-radius: var(--radius-panel);
+    --_dockable-panel-header-inset: calc(var(--spacing) * 1.5);
+    --cui-dockable-panel-radius: min(
+      var(--radius-panel),
+      calc(var(--control-h-sm) / 2 + var(--_dockable-panel-header-inset) + var(--cui-dockable-panel-border-width))
+    );
     --cui-dockable-panel-background: var(--card);
     --cui-dockable-panel-foreground: var(--card-foreground);
     --cui-dockable-panel-border-color: oklch(from var(--border) l c h / 0.8);
@@ -22,9 +26,13 @@
   }
 
   :where([data-control-family="dockable-panel"][data-slot="header"]) {
-    min-block-size: calc(var(--spacing) * 11);
+    --nest-radius: max(
+      0px,
+      calc(var(--cui-dockable-panel-radius) - var(--cui-dockable-panel-border-width) - var(--_dockable-panel-header-inset))
+    );
+    min-block-size: calc(var(--control-h-sm) + var(--_dockable-panel-header-inset) * 2);
     gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: var(--_dockable-panel-header-inset);
     border-block-end: 1px solid oklch(from var(--border) l c h / 0.7);
   }
 

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

@@ -8,6 +8,16 @@
     color: var(--muted-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);
+  }
+
   :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"]) {
@@ -80,6 +90,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));

package/dist/styles/recipes/field.css

@@ -2,7 +2,7 @@
   :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-foreground: var(--foreground);
     --cui-field-border-color: var(--control-rim);
     --cui-field-border-width: var(--control-rim-width);
@@ -13,7 +13,7 @@
     --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);
+    border-radius: var(--nest-radius, var(--cui-field-radius));
     outline: none;
     background: var(--cui-field-background);
     box-shadow: var(--cui-field-shadow);
@@ -58,19 +58,37 @@
     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="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(: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"]: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:
@@ -83,6 +101,10 @@
     cursor: not-allowed;
     opacity: 0.5;
   }
+  :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"]) {
     text-align: center;

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

@@ -0,0 +1,174 @@
+@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);
+    --cui-filter-bar-focus-ring-color: var(--ring);
+    gap: var(--cui-filter-bar-gap);
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  :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);
+  }
+
+  :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) {
+      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: left 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: 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;
+  }
+}
+
+@keyframes cui-filter-segment-enter {
+  from {
+    opacity: 0;
+    translate: -4px 0;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes cui-filter-chip-exit {
+  to {
+    opacity: 0;
+    transform: translateX(-4px) 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;
+}
+
+@property --cui-filter-bar-focus-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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);
@@ -15,9 +30,24 @@
     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 +84,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,7 +3,11 @@
     --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-shadow: var(--shadow-sm);
@@ -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);
   }