@ctrl-ui/react 0.8.2 → 0.8.4

package/dist/styles/recipes/code.css

@@ -3,14 +3,16 @@
     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);
     --cui-code-shadow: var(--shadow-sm);
     --cui-code-text-foreground: var(--code-foreground);
     --cui-code-title-foreground: var(--muted-foreground);
+    --cui-code-line-highlight-background: oklch(from var(--primary) l c h / 0.08);
   }
 
   :where([data-control-family="code"][data-slot="root"][data-chrome="standalone"]) {
-    border: 1px solid var(--cui-code-border-color);
+    border: var(--cui-code-border-width) solid var(--cui-code-border-color);
     border-radius: var(--cui-code-radius);
     background: var(--cui-code-background);
     box-shadow: var(--cui-code-shadow);
@@ -41,6 +43,10 @@
     min-block-size: calc(var(--spacing) * 5);
   }
 
+  :where([data-control-family="code"][data-slot="line"][data-highlighted]) {
+    background: var(--cui-code-line-highlight-background);
+  }
+
   :where([data-control-family="code"][data-slot="line"] > code) {
     padding-inline-end: calc(var(--spacing) * 4);
   }
@@ -55,14 +61,6 @@
     font-family: var(--font-mono);
   }
 
-  :where([data-control-family="button"][data-code-floating="true"]) {
-    background: oklch(from var(--background) l c h / 0.85);
-    box-shadow:
-      inset 0 0 0 1px var(--border),
-      var(--shadow-sm);
-    backdrop-filter: blur(var(--backdrop-blur-popover));
-  }
-
   :where([data-control-family="code"][data-slot="grid"]) {
     padding-block: calc(var(--spacing) * 3);
     color: var(--cui-code-text-foreground);
@@ -77,18 +75,30 @@
     font-size: var(--text-micro);
   }
 
-  :where([data-control-family="button"][data-code-copy="true"]) {
-    inline-size: calc(var(--spacing) * 7);
-    block-size: calc(var(--spacing) * 7);
-    padding: 0;
+  :where([data-control-family="code"][data-slot="editor"]) {
+    min-block-size: 160px;
+    max-block-size: 520px;
+    padding-block: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    border-width: 0px;
+    outline: none;
+    background: transparent;
+    color: var(--cui-code-text-foreground);
+    font-size: var(--text-label);
+    font-family: var(--font-mono);
   }
 
-  :where([data-control-family="code"][data-slot="floating-frame"]) {
-    padding-block-start: calc(var(--spacing) * 6);
+  :where([data-control-family="code"][data-slot="root"][data-density="compact"] [data-slot="editor"]) {
+    min-block-size: 0;
+    max-block-size: 320px;
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-micro);
   }
 
-  :where([data-control-family="code"][data-slot="floating-frame"][data-density="compact"]) {
-    padding-block-start: calc(var(--spacing) * 7);
+  :where([data-control-family="button"][data-code-copy="true"]) {
+    inline-size: calc(var(--spacing) * 7);
+    block-size: calc(var(--spacing) * 7);
+    padding: 0;
   }
 
   :where([data-control-family="code"][data-slot="gutter"]) {
@@ -118,6 +128,12 @@
   initial-value: transparent;
 }
 
+@property --cui-code-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-code-shadow {
   syntax: "*";
   inherits: true;
@@ -134,3 +150,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-code-line-highlight-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/collapsible.css

@@ -1,9 +1,6 @@
 @layer components {
   :where([data-control-family="collapsible"][data-slot="trigger"]) {
     outline: none;
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="collapsible"][data-slot="trigger"] > svg) {

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

@@ -6,8 +6,7 @@
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
     border-radius: var(--cui-color-picker-trigger-radius);
     outline-style: none;
-    transition-property:
-      color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
     box-shadow: var(--cui-color-picker-trigger-shadow);

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

@@ -53,10 +53,6 @@
     --_color-picker-swatch-add-foreground: var(--muted-foreground);
     color: var(--_color-picker-swatch-add-foreground);
     outline-style: none;
-    transition-property:
-      color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--ease-standard);
-    transition-duration: var(--duration-fast);
   }
 
   @media (hover: hover) {

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

@@ -5,10 +5,11 @@
     --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);
+    --cui-dockable-panel-border-width: 1px;
     --cui-dockable-panel-shadow: var(--shadow-pop);
     --cui-dockable-panel-drop-zone-active-background: oklch(from var(--primary) l c h / 0.12);
     --cui-dockable-panel-drop-zone-active-border-color: oklch(from var(--primary) l c h / 0.55);
-    border: 1px solid var(--cui-dockable-panel-border-color);
+    border: var(--cui-dockable-panel-border-width) solid var(--cui-dockable-panel-border-color);
     border-radius: var(--cui-dockable-panel-radius);
     outline: none;
     background-color: var(--cui-dockable-panel-background);
@@ -88,6 +89,12 @@
   initial-value: transparent;
 }
 
+@property --cui-dockable-panel-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-dockable-panel-shadow {
   syntax: "*";
   inherits: true;

package/dist/styles/recipes/dropzone.css

@@ -3,13 +3,14 @@
     --cui-dropzone-surface-radius: var(--radius-panel);
     --cui-dropzone-surface-foreground: var(--foreground);
     --cui-dropzone-surface-border-color: var(--border);
+    --cui-dropzone-surface-border-width: 1px;
     --cui-dropzone-accept-border-color: var(--primary);
     --cui-dropzone-reject-border-color: var(--destructive);
     --cui-dropzone-overlay-background: oklch(from var(--card) l c h / 0.95);
   }
   :where([data-control-family="dropzone"][data-slot="trigger"]),
   :where([data-control-family="dropzone"][data-slot="overlay"]) {
-    border: 1px dashed var(--cui-dropzone-surface-border-color);
+    border: var(--cui-dropzone-surface-border-width) dashed var(--cui-dropzone-surface-border-color);
     border-radius: var(--cui-dropzone-surface-radius);
     color: var(--cui-dropzone-surface-foreground);
   }
@@ -21,7 +22,7 @@
     background-color: var(--card);
     text-align: center;
     outline-style: none;
-    transition-property: background-color, border-color, color, opacity, box-shadow;
+    transition-property: border-color, color, opacity, box-shadow;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -130,6 +131,12 @@
   initial-value: transparent;
 }
 
+@property --cui-dropzone-surface-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-dropzone-accept-border-color {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/empty.css

@@ -3,52 +3,75 @@
     --cui-empty-radius: var(--radius-lg);
     --cui-empty-background: transparent;
     --cui-empty-border-color: transparent;
-    --cui-empty-border-width: 0px;
+    --cui-empty-border-width: 1px;
     --cui-empty-border-style: solid;
     --cui-empty-media-radius: var(--radius-lg);
     --cui-empty-media-background: var(--muted);
+    --cui-empty-shadow: none;
+    --cui-empty-foreground: var(--foreground);
+    --cui-empty-description-foreground: var(--muted-foreground);
+    --cui-empty-media-foreground: var(--muted-foreground);
+    --cui-empty-padding: calc(var(--spacing) * 6);
+    --cui-empty-gap: calc(var(--spacing) * 6);
+    --cui-empty-header-gap: calc(var(--spacing) * 2);
+    --cui-empty-content-gap: calc(var(--spacing) * 2);
+    --cui-empty-content-size: 24rem;
+    --cui-empty-media-size: calc(var(--spacing) * 10);
+    --cui-empty-media-icon-size: calc(var(--spacing) * 5);
+    --cui-empty-font-size: var(--text-sm);
+    --cui-empty-title-font-weight: var(--font-weight-medium);
     border: var(--cui-empty-border-width) var(--cui-empty-border-style) var(--cui-empty-border-color);
     border-radius: var(--cui-empty-radius);
     background: var(--cui-empty-background);
-    box-shadow: none;
-    color: var(--foreground);
+    box-shadow: var(--cui-empty-shadow);
+    color: var(--cui-empty-foreground);
     text-align: center;
     text-wrap: balance;
-    gap: calc(var(--spacing) * 6);
-    padding: calc(var(--spacing) * 6);
+    gap: var(--cui-empty-gap);
+    padding: var(--cui-empty-padding);
+    overflow-wrap: anywhere;
   }
 
   :where([data-control-family="empty"][data-slot="media"]) {
-    margin-block-end: calc(var(--spacing) * 2);
-    inline-size: calc(var(--spacing) * 10);
-    block-size: calc(var(--spacing) * 10);
+    inline-size: var(--cui-empty-media-size);
+    block-size: var(--cui-empty-media-size);
     border-radius: var(--cui-empty-media-radius);
     background: var(--cui-empty-media-background);
-    color: var(--muted-foreground);
+    color: var(--cui-empty-media-foreground);
+  }
+
+  :where([data-control-family="empty"][data-slot="media"] > svg) {
+    inline-size: var(--cui-empty-media-icon-size);
+    block-size: var(--cui-empty-media-icon-size);
+  }
+
+  :where([data-control-family="empty"][data-slot="header"]),
+  :where([data-control-family="empty"][data-slot="content"]) {
+    max-inline-size: min(100%, var(--cui-empty-content-size));
   }
 
   :where([data-control-family="empty"][data-slot="content"]) {
-    gap: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
+    gap: var(--cui-empty-content-gap);
+    font-size: var(--cui-empty-font-size);
     line-height: var(--text-sm--line-height);
     text-wrap: balance;
   }
 
   :where([data-control-family="empty"][data-slot="description"]) {
-    font-size: var(--text-sm);
+    font-size: var(--cui-empty-font-size);
     line-height: var(--leading-relaxed);
-    color: var(--muted-foreground);
+    color: var(--cui-empty-description-foreground);
   }
 
   :where([data-control-family="empty"][data-slot="title"]) {
-    font-size: var(--text-sm);
+    font-size: var(--cui-empty-font-size);
     line-height: var(--text-sm--line-height);
-    font-weight: var(--font-weight-medium);
-    color: var(--foreground);
+    font-weight: var(--cui-empty-title-font-weight);
+    color: var(--cui-empty-foreground);
   }
 
   :where([data-control-family="empty"][data-slot="header"]) {
-    gap: calc(var(--spacing) * 2);
+    gap: var(--cui-empty-header-gap);
     text-align: center;
   }
 }
@@ -94,3 +117,81 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-empty-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-empty-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-empty-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-empty-media-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-empty-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-header-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-content-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-content-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-media-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-media-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-empty-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}

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

@@ -3,6 +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-foreground: var(--destructive-text);
     --cui-environment-variables-meta-foreground: var(--muted-foreground);
     --cui-environment-variables-title-foreground: var(--foreground);
@@ -91,7 +92,7 @@
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
     background: var(--cui-environment-variables-message-background);
-    border-block: 1px solid var(--cui-environment-variables-message-border-color);
+    border-block: var(--cui-environment-variables-message-border-width) solid var(--cui-environment-variables-message-border-color);
     color: var(--cui-environment-variables-message-foreground);
     font-size: var(--text-caption);
   }
@@ -171,3 +172,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-environment-variables-message-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -26,9 +26,6 @@
   :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="clear"]) {
     border-radius: var(--radius-control);
     outline: none;
-    transition-property: color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -36,6 +33,7 @@
     :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) {
+      background: var(--hover-fill);
       color: var(--foreground);
     }
   }
@@ -70,9 +68,6 @@
   :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;
-    transition-property: color, background-color;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="decrement"]:active),

package/dist/styles/recipes/field.css

@@ -26,7 +26,7 @@
       [data-control-family="field"][data-field-kind="combobox"]
     )
   ) {
-    transition-property: color, background-color, border-color, box-shadow, opacity, backdrop-filter;
+    transition-property: color, border-color, box-shadow, opacity, backdrop-filter;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
@@ -59,10 +59,10 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="field"][data-field-kind="autocomplete"]:hover),
-    :where([data-control-family="field"][data-field-kind="combobox"]:hover),
-    :where([data-control-family="field"][data-field-kind="native-select"]:hover),
-    :where([data-control-family="field"][data-field-kind="number-field"]: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);
     }
   }
@@ -102,6 +102,10 @@
     appearance: none;
   }
 
+  :where([data-control-family="field"][data-field-kind="native-select"][data-slot="icon"]) {
+    right: calc(var(--padding-x) * 0.6);
+  }
+
   :where([data-control-family="field"][data-field-kind="number-field"][data-slot="drag-icon"]) {
     color: var(--foreground);
   }

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

@@ -6,10 +6,12 @@
   :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-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);
     --cui-gradient-editor-stop-border-color: oklch(1 0 0);
+    --cui-gradient-editor-stop-border-width: 2px;
     --cui-gradient-editor-stop-radius: 9999px;
     --cui-gradient-editor-stop-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
     --cui-gradient-editor-track-radius: 9999px;
@@ -30,7 +32,7 @@
   :where([data-control-family="gradient-editor"][data-slot="stop"]) {
     inline-size: calc(var(--spacing) * 5);
     block-size: calc(var(--spacing) * 5);
-    border: 2px solid var(--cui-gradient-editor-stop-border-color);
+    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;
@@ -40,13 +42,10 @@
   :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
     inline-size: calc(var(--spacing) * 7);
     block-size: calc(var(--spacing) * 7);
-    border: 1px dashed var(--cui-gradient-editor-add-border-color);
+    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;
-    transition:
-      border-color var(--duration-fast) var(--ease-standard),
-      color var(--duration-fast) var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -91,6 +90,12 @@
   initial-value: transparent;
 }
 
+@property --cui-gradient-editor-stop-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-gradient-editor-stop-shadow {
   syntax: "*";
   inherits: true;
@@ -107,3 +112,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-gradient-editor-add-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -4,18 +4,17 @@
     --cui-inline-attachment-hover-shadow: var(--shadow-md);
     --cui-inline-attachment-radius: var(--radius-scene);
     --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);
     --cui-inline-attachment-content-background: oklch(from var(--background) l c h / 0.85);
     --cui-inline-attachment-content-foreground: var(--foreground);
     --cui-inline-attachment-content-radius: var(--radius-control);
     --cui-inline-attachment-content-shadow: var(--shadow-sm);
-    --_inline-attachment-media-hover-scale: 1.02;
     border-radius: var(--cui-inline-attachment-radius);
     background: var(--cui-inline-attachment-background);
     box-shadow:
       inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
       var(--cui-inline-attachment-shadow);
-    transition: box-shadow var(--duration-fast) var(--ease-standard);
     text-align: left;
   }
 
@@ -33,14 +32,14 @@
     }
   }
 
-  :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
-    transition: scale var(--duration-slow) var(--ease-standard);
+  :where([data-control-family="inline-attachment"][data-slot="image"]) {
+    border-radius: inherit;
   }
 
-  @media (hover: hover) {
-    :where([data-control-family="inline-attachment"][data-slot="root"]:hover [data-slot="media-image"]) {
-      scale: var(--_inline-attachment-media-hover-scale);
-    }
+  :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
+    border-radius: inherit;
+    outline: 1px solid var(--cui-inline-attachment-image-outline-color);
+    outline-offset: -1px;
   }
 
   :where([data-control-family="inline-attachment"][data-slot="document"]) {
@@ -180,3 +179,9 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-inline-attachment-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -6,6 +6,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-foreground: var(--muted-foreground);
     --cui-inline-citation-trigger-hover-background: var(--muted);
     --cui-inline-citation-trigger-hover-foreground: var(--foreground);
@@ -17,16 +18,13 @@
     max-inline-size: calc(var(--spacing) * 52);
     gap: calc(var(--spacing) * 1.5);
     padding-inline: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    border: 1px solid var(--cui-inline-citation-trigger-border-color);
+    border: var(--cui-inline-citation-trigger-border-width) solid var(--cui-inline-citation-trigger-border-color);
     border-radius: var(--cui-inline-citation-trigger-radius);
     background: var(--cui-inline-citation-trigger-background);
     color: var(--cui-inline-citation-trigger-foreground);
     font-size: var(--text-caption);
     font-weight: var(--font-weight-normal);
     outline-style: none;
-    transition-property: background-color, color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -143,6 +141,12 @@
   initial-value: transparent;
 }
 
+@property --cui-inline-citation-trigger-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-inline-citation-trigger-hover-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/item.css

@@ -13,7 +13,7 @@
     background: var(--_item-background);
     box-shadow: none;
     color: var(--foreground);
-    transition-property: background-color, box-shadow, color, outline-color, scale;
+    transition-property: scale;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
     gap: calc(var(--spacing) * 3);

package/dist/styles/recipes/kbd.css

@@ -20,6 +20,14 @@
     font-weight: var(--font-weight-medium);
   }
 
+  :where([data-control-family="kbd"][data-slot="root"][data-variant="ghost"]) {
+    min-inline-size: 0;
+    padding-inline: 0;
+    --cui-kbd-background: transparent;
+    --cui-kbd-border-color: transparent;
+    --cui-kbd-shadow: 0 0 transparent;
+  }
+
   :where([data-control-family="kbd"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }