@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/choice.css

@@ -4,18 +4,16 @@
     inline-size: calc(var(--spacing) * 4);
     block-size: calc(var(--spacing) * 4);
     --cui-choice-radius: var(--radius-sm);
-    --cui-choice-shadow: var(--shadow-sm);
-    --cui-choice-border-color: var(--border);
+    --cui-choice-shadow: inset 0 0 0 var(--cui-choice-border-width) var(--cui-choice-border-color), var(--shadow-sm);
+    --cui-choice-border-color: var(--control-boundary);
+    --cui-choice-border-width: var(--control-rim-width);
     --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),
-      var(--cui-choice-shadow);
+    box-shadow: var(--cui-choice-shadow);
     color: currentColor;
-    outline: none;
     transition-property: background-color, color;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
@@ -23,12 +21,17 @@
 
   :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"]) {
     --cui-choice-radius: 9999px;
-    outline-style: none;
   }
 
-  :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]:hover),
-  :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"]:hover) {
-    --cui-choice-border-color: oklch(from var(--foreground) l c h / 0.25);
+  @media (hover: hover) {
+    :where(
+        [data-control-family="choice"]:is(
+          [data-choice-kind="checkbox"][data-slot="root"],
+          [data-choice-kind="radio-group"][data-slot="item"]
+        ):hover:not([data-disabled], [data-readonly])
+      ) {
+      --cui-choice-border-color: color-mix(in oklch, var(--control-boundary), var(--foreground) 35%);
+    }
   }
 
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]:is([data-checked], [data-indeterminate])),
@@ -40,15 +43,14 @@
 
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"][data-disabled]),
   :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"][data-disabled]) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"][data-invalid]),
   :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),
-      var(--shadow-sm),
+      var(--cui-choice-shadow),
       0 0 0 1px var(--destructive);
   }
 
@@ -79,19 +81,15 @@
     color: currentcolor;
   }
 
-  :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"]) {
-    outline-style: none;
-  }
-
   @media (pointer: coarse) {
     :where([data-control-family="choice"][data-choice-kind="checkbox"][data-slot="root"])::after,
     :where([data-control-family="choice"][data-choice-kind="radio-group"][data-slot="item"])::after {
       content: "";
       position: absolute;
-      inset: 50% 50%;
+      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));
     }
   }
 }
@@ -108,6 +106,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,11 +1,17 @@
 @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);
+    --cui-code-diff-border-width: var(--control-rim-width);
+    --_code-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-corner-inset))
+    );
+    --_code-nest-radius: max(0px, calc(var(--cui-code-diff-radius) - var(--cui-code-diff-border-width) - var(--_code-corner-inset)));
     --cui-code-diff-shadow: var(--shadow-sm);
+    --cui-code-diff-header-background: var(--diff-gutter-bg);
+    --cui-code-diff-header-border-color: var(--border);
     --cui-code-diff-foreground: var(--code-foreground);
     --cui-code-diff-add-background: var(--diff-add-line);
     --cui-code-diff-del-background: var(--diff-del-line);
@@ -22,19 +28,17 @@
   }
 
   :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);
+    border-block-end-color: var(--cui-code-diff-header-border-color);
+    background: var(--cui-code-diff-header-background);
   }
 
   :where([data-control-family="code-diff"][data-slot="file-header"]) {
     min-block-size: calc(var(--spacing) * 9);
+    gap: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
   }
 
   :where([data-control-family="code-diff"][data-slot="actions"]) {
@@ -73,16 +77,16 @@
   }
 
   :where([data-control-family="code-diff"][data-slot="line"][data-indicators="bars"][data-line-type="add"]) {
-    border-left: 2px solid var(--diff-add-fg);
+    border-inline-start: 2px solid var(--diff-add-fg);
   }
 
   :where([data-control-family="code-diff"][data-slot="line"][data-indicators="bars"][data-line-type="del"]) {
-    border-left: 2px solid var(--diff-del-fg);
+    border-inline-start: 2px solid var(--diff-del-fg);
   }
 
   :where([data-control-family="code-diff"][data-slot="line"][data-side="left"]),
   :where([data-control-family="code-diff"][data-slot="empty-half"][data-side="left"]) {
-    border-right: 1px solid oklch(from var(--border) l c h / 0.6);
+    border-inline-end: 1px solid oklch(from var(--border) l c h / 0.6);
   }
 
   :where([data-control-family="code-diff"][data-slot="empty-half"]) {
@@ -102,13 +106,8 @@
     padding-inline: calc(var(--spacing) * 1.5);
   }
 
-  :where([data-control-family="code-diff"][data-slot="gutter"]) {
-    min-inline-size: calc(var(--spacing) * 11);
-    padding-inline: calc(var(--spacing) * 2);
-    color: var(--diff-context-fg);
-    opacity: 0.7;
-    text-align: right;
-    font-variant-numeric: tabular-nums;
+  :where([data-control-family="code-diff"][data-slot="revealed-row"]) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
   :where([data-control-family="code-diff"][data-slot="gutter"][data-line-type="add"]) {
@@ -151,18 +150,32 @@
   }
 
   :where([data-control-family="code-diff"][data-slot="expand-button"]) {
+    position: relative;
+    min-block-size: var(--target-min);
     padding-inline: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 0.5);
     border-radius: var(--cui-code-diff-expand-button-radius);
     background: var(--cui-code-diff-expand-button-background);
     box-shadow: var(--cui-code-diff-expand-button-shadow);
     color: var(--cui-code-diff-expand-button-foreground);
-    outline-style: none;
   }
 
-  :where([data-control-family="code-diff"][data-slot="expand-button"]:hover) {
-    background: var(--cui-code-diff-expand-button-hover-background);
-    color: var(--cui-code-diff-expand-button-hover-foreground);
+  @media (hover: hover) {
+    :where([data-control-family="code-diff"][data-slot="expand-button"]:hover) {
+      background: var(--cui-code-diff-expand-button-hover-background);
+      color: var(--cui-code-diff-expand-button-hover-foreground);
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="code-diff"][data-slot="expand-button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
+    }
   }
 
   :where([data-control-family="code-diff"][data-slot="title"]) {
@@ -210,6 +223,18 @@
   initial-value: 0px;
 }
 
+@property --cui-code-diff-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-code-diff-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-code-diff-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/code.css

@@ -1,11 +1,13 @@
 @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);
+    --cui-code-border-width: var(--control-rim-width);
+    --_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)));
+    --_code-nest-radius: max(0px, calc(var(--cui-code-radius) - var(--cui-code-border-width) - var(--_code-corner-inset)));
     --cui-code-shadow: var(--shadow-sm);
+    --cui-code-header-background: transparent;
     --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);
@@ -19,19 +21,37 @@
   }
 
   :where([data-control-family="code"][data-slot="root"][data-chrome="embedded"]) {
-    margin-block: 0;
     border: 0;
     border-radius: 0;
     background: transparent;
     box-shadow: none;
   }
 
-  :where([data-control-family="code"][data-slot="header"]) {
+  :where(:is([data-control-family="code"], [data-control-family="code-diff"])[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);
-    border-bottom: 1px solid var(--border);
+    padding-block: var(--_code-corner-inset);
+    padding-inline: calc(var(--spacing) * 3) var(--_code-corner-inset);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+  }
+
+  :where([data-control-family="code"][data-slot="header"]) {
+    border-block-end-color: var(--border);
+    background: var(--cui-code-header-background);
+  }
+
+  :where(
+    :is([data-control-family="code"][data-slot="floating-frame"], [data-control-family="code-diff"][data-slot="root"])
+      > [data-control-family="button"][data-code-floating="true"]
+  ) {
+    --nest-radius: var(--_code-nest-radius);
+    inset-block-start: var(--_code-corner-inset);
+    inset-inline-end: var(--_code-corner-inset);
+  }
+
+  :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="actions"]) {
+    --nest-radius: var(--_code-nest-radius);
   }
 
   :where([data-control-family="code"][data-slot="actions"]) {
@@ -101,36 +121,36 @@
     padding: 0;
   }
 
-  :where([data-control-family="code"][data-slot="gutter"]) {
-    min-inline-size: calc(var(--spacing) * 14);
-    padding-inline: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
-    color: oklch(from var(--muted-foreground) l c h / 0.6);
+  :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="gutter"]) {
+    min-inline-size: calc(var(--spacing) * 11);
+    padding-inline: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
+    color: oklch(from var(--muted-foreground) l c h / 0.7);
     text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
   @media (pointer: coarse) {
     :where([data-control-family="code"][data-slot="editor"]) {
-      font-size: max(16px, var(--text-label));
+      font-size: max(var(--text-input-min), var(--text-label));
     }
 
-    :where([data-control-family="code"][data-slot="header"]) {
-      min-block-size: 44px;
+    :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="header"]) {
+      min-block-size: var(--touch-target);
     }
 
-    :where([data-control-family="code"][data-slot="actions"] [data-control-family="button"]),
+    :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="actions"] [data-control-family="button"]),
     :where([data-control-family="button"][data-code-copy="true"]) {
       position: relative;
     }
 
-    :where([data-control-family="code"][data-slot="actions"] [data-control-family="button"])::after,
+    :where(:is([data-control-family="code"], [data-control-family="code-diff"])[data-slot="actions"] [data-control-family="button"])::after,
     :where([data-control-family="button"][data-code-copy="true"])::after {
       content: "";
       position: absolute;
       inset: 50% 50%;
       translate: -50% -50%;
       inline-size: 100%;
-      block-size: max(100%, 44px);
+      block-size: max(100%, var(--touch-target));
     }
   }
 }
@@ -181,3 +201,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-code-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/collapsible.css

@@ -1,9 +1,39 @@
 @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"]) {
-    outline: none;
+    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;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="collapsible"][data-slot="trigger"]:focus-visible) {
+    background: var(--cui-collapsible-trigger-hover-background);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="collapsible"][data-slot="trigger"]:not(:disabled, [data-disabled]):hover) {
+      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 +52,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-details.css

@@ -5,7 +5,6 @@
 
   :where([data-control-family="color-picker"][data-slot="trigger"]) {
     border-radius: var(--cui-color-picker-trigger-radius);
-    outline-style: none;
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
@@ -13,15 +12,15 @@
   }
 
   :where([data-control-family="color-picker"][data-slot="trigger"]:disabled) {
-    opacity: 50%;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="color-picker"][data-slot="area"][data-disabled="true"]) {
-    opacity: 50%;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="color-picker"][data-slot="wheel"][data-disabled="true"]) {
-    opacity: 50%;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="color-picker"][data-slot="area-saturation"]) {

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

@@ -30,7 +30,7 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="color-picker"][data-slot="contrast-fix"]:hover) {
+    :where([data-control-family="color-picker"][data-slot="contrast-fix"]:hover:not(:disabled)) {
       background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
     }
   }
@@ -52,11 +52,10 @@
     border-color: var(--_color-picker-swatch-add-border-color);
     --_color-picker-swatch-add-foreground: var(--muted-foreground);
     color: var(--_color-picker-swatch-add-foreground);
-    outline-style: none;
   }
 
   @media (hover: hover) {
-    :where([data-control-family="color-picker"][data-slot="swatch-add"]:hover) {
+    :where([data-control-family="color-picker"][data-slot="swatch-add"]:hover:not(:disabled)) {
       --_color-picker-swatch-add-border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
       border-color: var(--_color-picker-swatch-add-border-color);
       --_color-picker-swatch-add-foreground: var(--foreground);
@@ -66,9 +65,7 @@
 
   :where([data-control-family="color-picker"][data-slot="swatch"]) {
     border-radius: var(--cui-color-picker-swatch-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: box-shadow, scale;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
     --_color-picker-swatch-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
@@ -80,6 +77,10 @@
     box-shadow: var(--_color-picker-swatch-shadow);
   }
 
+  :where([data-control-family="color-picker"]:is([data-slot="swatch"], [data-slot="swatch-add"], [data-slot="contrast-fix"]):disabled) {
+    opacity: var(--disabled-opacity);
+  }
+
   :where([data-control-family="color-picker"][data-slot="swatches-label"]) {
     font-size: var(--text-micro);
     color: var(--muted-foreground);
@@ -94,9 +95,9 @@
     text-align: center;
   }
 
-  :where([data-control-family="color-picker"][data-slot="input"]) {
+  :where([data-control-family="color-picker"][data-slot="input"] > [data-control-family="field"]) {
+    --cui-field-font-size: var(--text-caption);
     font-family: var(--font-mono);
-    font-size: var(--text-caption);
   }
 }
 

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"]),
@@ -60,7 +70,6 @@
   :where([data-control-family="color-picker"][data-slot="hue"]),
   :where([data-control-family="color-picker"][data-slot="alpha"]) {
     block-size: calc(var(--spacing) * 4);
-    --_color-picker-slider-thumb-outline: none;
     --_color-picker-slider-thumb-scale: 1;
     --_color-picker-slider-thumb-transition-property: scale;
   }
@@ -73,7 +82,6 @@
     border-color: var(--color-white);
     background: var(--cui-color-picker-slider-thumb-background);
     box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.35);
-    outline-style: var(--_color-picker-slider-thumb-outline);
     transition-property: var(--_color-picker-slider-thumb-transition-property);
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
@@ -85,6 +93,17 @@
     --_color-picker-slider-thumb-scale: 110% 110%;
   }
 
+  @media (pointer: coarse) {
+    :where([data-control-family="color-picker"]:is([data-slot="hue-thumb"], [data-slot="alpha-thumb"], [data-slot="swatch-add"]))::after {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--touch-target));
+      block-size: max(100%, var(--touch-target));
+    }
+  }
+
   :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
     border-radius: calc(infinity * 1px);
     border-style: solid;
@@ -122,7 +141,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/context.css

@@ -61,7 +61,7 @@
   }
 
   :where([data-control-family="context"][data-slot="title"]) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
     text-wrap: balance;
   }
@@ -74,7 +74,7 @@
 
   :where([data-control-family="context"][data-slot="summary"]) {
     gap: calc(var(--spacing) * 3);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-variant-numeric: tabular-nums;
   }
 
@@ -169,7 +169,7 @@
   }
 
   :where([data-control-family="context"][data-slot="legend-label"]) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
   }
 
   :where([data-control-family="context"]:is([data-slot="legend-description"], [data-slot="legend-value"])) {

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

@@ -1,17 +1,20 @@
 @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);
-    --cui-dockable-panel-border-width: 1px;
+    --cui-dockable-panel-border-width: var(--control-rim-width);
     --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: 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);
     color: var(--cui-dockable-panel-foreground);
     box-shadow: var(--cui-dockable-panel-shadow);
@@ -22,16 +25,24 @@
   }
 
   :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);
   }
 
   :where([data-control-family="dockable-panel"][data-slot="drag-handle"]) {
     padding-inline: calc(var(--spacing) * 2);
     border-radius: var(--radius-control);
-    text-align: left;
+    text-align: start;
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="drag-button"]) {
+    border-radius: inherit;
   }
 
   :where([data-control-family="dockable-panel"][data-slot="actions"]) {
@@ -44,7 +55,7 @@
 
   :where([data-control-family="dockable-panel"][data-slot="title"]) {
     color: var(--foreground);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-semibold);
   }