@ctrl-ui/react 0.8.0

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

@@ -0,0 +1,61 @@
+@layer components {
+  :where([data-control-family="color-picker"][data-slot="trigger-color"]) {
+    border-radius: inherit;
+  }
+
+  :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-timing-function: var(--ease-standard);
+    transition-duration: var(--duration-fast);
+    box-shadow: var(--cui-color-picker-trigger-shadow);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="trigger"]:disabled) {
+    opacity: 50%;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="area"][data-disabled="true"]) {
+    opacity: 50%;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="wheel"][data-disabled="true"]) {
+    opacity: 50%;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="area-saturation"]) {
+    background-image: linear-gradient(to right in srgb, var(--color-white), transparent);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="area-brightness"]) {
+    background-image: linear-gradient(to top in srgb, var(--color-black), transparent);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-level"][data-passing="true"]) {
+    background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
+    --_color-picker-contrast-level-foreground: var(--foreground);
+    color: var(--_color-picker-contrast-level-foreground);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-level"]:not([data-passing="true"])) {
+    --_color-picker-contrast-level-foreground: var(--muted-foreground);
+    color: var(--_color-picker-contrast-level-foreground);
+    text-decoration-line: line-through;
+    text-decoration-thickness: 1px;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-ratio"]) {
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(
+    [data-control-family="color-picker"][data-slot="wheel"][data-dragging] [data-control-family="color-picker"][data-slot="wheel-thumb"]
+  ),
+  :where(
+    [data-control-family="color-picker"][data-slot="area"][data-dragging] [data-control-family="color-picker"][data-slot="area-thumb"]
+  ) {
+    scale: 110% 110%;
+  }
+}

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

@@ -0,0 +1,117 @@
+@layer components {
+  :where([data-control-family="color-picker"][data-slot="output-value"]) {
+    font-family: var(--font-mono);
+    font-size: var(--text-caption);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="output-swatch"]) {
+    inline-size: calc(var(--spacing) * 6);
+    block-size: calc(var(--spacing) * 6);
+    border-radius: var(--cui-color-picker-output-swatch-radius);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-level"]) {
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-fix"]) {
+    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--foreground);
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 2px;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="color-picker"][data-slot="contrast-fix"]:hover) {
+      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
+    }
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast-ratio"]) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="contrast"]) {
+    gap: calc(var(--spacing) * 1.5);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    border-style: dashed;
+    --_color-picker-swatch-add-border-color: var(--border);
+    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;
+    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) {
+    :where([data-control-family="color-picker"][data-slot="swatch-add"]:hover) {
+      --_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);
+      color: var(--_color-picker-swatch-add-foreground);
+    }
+  }
+
+  :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-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);
+    box-shadow: var(--_color-picker-swatch-shadow);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="swatch"][data-selected="true"]) {
+    --_color-picker-swatch-shadow: inset 0 0 0 2px var(--foreground);
+    box-shadow: var(--_color-picker-swatch-shadow);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="swatches-label"]) {
+    font-size: var(--text-micro);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="channel-label"]) {
+    font-size: var(--text-micro);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="channel"]) {
+    text-align: center;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="input"]) {
+    font-family: var(--font-mono);
+    font-size: var(--text-caption);
+  }
+}
+
+@property --cui-color-picker-output-swatch-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-color-picker-swatch-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}

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

@@ -0,0 +1,158 @@
+@layer components {
+  :where([data-control-family="color-picker"][data-slot="trigger"]) {
+    inline-size: calc(var(--spacing) * 8);
+    block-size: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="color-picker"][data-popup-part="surface"]) {
+    inline-size: calc(var(--spacing) * 64);
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="hue-track"]),
+  :where([data-control-family="color-picker"][data-slot="alpha-track"]) {
+    block-size: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="hue-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="alpha-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="area-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="swatch"]),
+  :where([data-control-family="color-picker"][data-slot="swatch-add"]) {
+    inline-size: calc(var(--spacing) * 6);
+    block-size: calc(var(--spacing) * 6);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="swatches-group"]),
+  :where([data-control-family="color-picker"][data-slot="swatches"]) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="channels"]) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="channel"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="trigger"]),
+  :where([data-control-family="color-picker"][data-slot="area"]),
+  :where([data-control-family="color-picker"][data-slot="hue"]),
+  :where([data-control-family="color-picker"][data-slot="alpha"]),
+  :where([data-control-family="color-picker"][data-slot="wheel"]),
+  :where([data-control-family="color-picker"][data-slot="swatch"]),
+  :where([data-control-family="color-picker"][data-slot="output"]) {
+    --cui-color-picker-area-radius: var(--radius-field);
+    --cui-color-picker-output-swatch-radius: var(--radius-md);
+    --cui-color-picker-slider-thumb-background: transparent;
+    --cui-color-picker-slider-thumb-radius: calc(infinity * 1px);
+    --cui-color-picker-swatch-radius: var(--radius-md);
+    --cui-color-picker-trigger-radius: var(--radius-control);
+    --cui-color-picker-trigger-shadow: inset 0 0 0 1px var(--border);
+  }
+  :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;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="hue-thumb"]),
+  :where([data-control-family="color-picker"][data-slot="alpha-thumb"]) {
+    border-radius: var(--cui-color-picker-slider-thumb-radius);
+    border-width: 2px;
+    border-style: solid;
+    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);
+    scale: var(--_color-picker-slider-thumb-scale);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="hue-thumb"][data-dragging]),
+  :where([data-control-family="color-picker"][data-slot="alpha-thumb"][data-dragging]) {
+    --_color-picker-slider-thumb-scale: 110% 110%;
+  }
+
+  :where([data-control-family="color-picker"][data-slot="wheel-thumb"]) {
+    border-radius: calc(infinity * 1px);
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--color-white);
+    box-shadow: var(--_color-picker-wheel-thumb-shadow);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="wheel"]) {
+    border-radius: calc(infinity * 1px);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent);
+    --_color-picker-wheel-thumb-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="alpha-track"]) {
+    border-radius: calc(infinity * 1px);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 50%, transparent);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="hue-track"]) {
+    border-radius: calc(infinity * 1px);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 50%, transparent);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="area-thumb"]) {
+    border-radius: calc(infinity * 1px);
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--color-white);
+    transition-property: box-shadow;
+    transition-timing-function: var(--ease-standard);
+    transition-duration: var(--duration-fast);
+    box-shadow: var(--_color-picker-area-thumb-shadow);
+  }
+
+  :where([data-control-family="color-picker"][data-slot="area"]) {
+    block-size: calc(var(--spacing) * 40);
+    border-radius: var(--cui-color-picker-area-radius);
+    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);
+  }
+}
+
+@property --cui-color-picker-area-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-color-picker-trigger-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-color-picker-trigger-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-color-picker-slider-thumb-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-color-picker-slider-thumb-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/context.css

@@ -0,0 +1,237 @@
+@layer components {
+  :where([data-control-family="context"][data-slot="root"]),
+  :where([data-control-family="context"][data-slot="content"]) {
+    --cui-context-graph-radius: 9999px;
+    --cui-context-limit-marker-color: var(--destructive-text);
+    --cui-context-overage-fill: oklch(from var(--destructive-text) l c h / 0.22);
+    --cui-context-track-fill: var(--muted);
+    --cui-context-segment-message-fill: oklch(from var(--primary) l c h / 0.65);
+    --cui-context-segment-reasoning-fill: oklch(from var(--foreground) l c h / 0.5);
+    --cui-context-segment-source-fill: oklch(from var(--accent-foreground) l c h / 0.65);
+    --cui-context-segment-tool-fill: var(--primary);
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-indicator"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    fill: none;
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-track"]) {
+    stroke: oklch(from var(--border) l c h / 0.7);
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-track"][data-status="unavailable"]) {
+    stroke: var(--muted);
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-value"]) {
+    stroke: var(--primary);
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-value"][data-status="over-limit"]) {
+    stroke: var(--destructive-text);
+  }
+
+  :where([data-control-family="context"][data-slot="trigger-label"]) {
+    max-inline-size: 0;
+    opacity: 0;
+    transition-property: max-width, opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where(
+    [data-context-trigger-button="true"]:is(:hover, :focus-visible, [data-popup-open])
+      [data-control-family="context"][data-slot="trigger-label"]
+  ) {
+    max-inline-size: calc(var(--spacing) * 32);
+    opacity: 1;
+  }
+
+  :where([data-control-family="context"][data-slot="content-grid"]) {
+    gap: calc(var(--spacing) * 4);
+    padding: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="context"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 4);
+    padding-block-end: 0;
+  }
+
+  :where([data-control-family="context"][data-slot="legend-item"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-item"] > div) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="context"][data-slot="title"]) {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="context"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="context"][data-slot="summary"]) {
+    gap: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+  }
+
+  :where([data-control-family="context"][data-slot="summary-value"]) {
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="context"][data-slot="graph"]) {
+    block-size: calc(var(--spacing) * 2.5);
+    border-radius: var(--cui-context-graph-radius);
+  }
+
+  :where([data-control-family="context"][data-slot="track"]) {
+    fill: var(--cui-context-track-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"]) {
+    fill: var(--border);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="system"]) {
+    fill: oklch(from var(--foreground) l c h / 0.75);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="tool"]) {
+    fill: var(--cui-context-segment-tool-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="message"]) {
+    fill: var(--cui-context-segment-message-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="source"]) {
+    fill: var(--cui-context-segment-source-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="reasoning"]) {
+    fill: var(--cui-context-segment-reasoning-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="segment"][data-kind="cache"]) {
+    fill: oklch(from var(--muted-foreground) l c h / 0.55);
+  }
+
+  :where([data-control-family="context"][data-slot="overage"]) {
+    fill: var(--cui-context-overage-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="limit-marker"]) {
+    stroke: var(--cui-context-limit-marker-color);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    inline-size: calc(var(--spacing) * 2.5);
+    block-size: calc(var(--spacing) * 2.5);
+    border-radius: 9999px;
+    background: var(--border);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="system"]) {
+    background: oklch(from var(--foreground) l c h / 0.75);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="tool"]) {
+    background: var(--cui-context-segment-tool-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="message"]) {
+    background: var(--cui-context-segment-message-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="source"]) {
+    background: var(--cui-context-segment-source-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="reasoning"]) {
+    background: var(--cui-context-segment-reasoning-fill);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-indicator"][data-kind="cache"]) {
+    background: oklch(from var(--muted-foreground) l c h / 0.55);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-item"][data-tone="available"] [data-slot="legend-indicator"]) {
+    background: var(--muted);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-item"][data-tone="over-limit"] [data-slot="legend-indicator"]) {
+    background: var(--destructive-text);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-label"]) {
+    font-size: var(--text-sm);
+  }
+
+  :where([data-control-family="context"]:is([data-slot="legend-description"], [data-slot="legend-value"])) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="context"][data-slot="legend-value"]) {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@property --cui-context-graph-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-context-track-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-segment-tool-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-segment-message-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-segment-source-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-segment-reasoning-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-overage-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-context-limit-marker-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -0,0 +1,106 @@
+@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);
+    --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-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-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);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="root"][data-dragging]) {
+    box-shadow: var(--shadow-modal);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="header"]) {
+    min-block-size: calc(var(--spacing) * 11);
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    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;
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="actions"]) {
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="content"][data-padding="default"]) {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="title"]) {
+    color: var(--foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="drop-zone"]) {
+    border-radius: var(--radius-panel);
+    background-color: oklch(from var(--background) l c h / 0.12);
+    box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.2);
+    transition-property: background-color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="dockable-panel"][data-slot="drop-zone"][data-active]) {
+    background-color: var(--cui-dockable-panel-drop-zone-active-background);
+    box-shadow:
+      var(--shadow-sm),
+      0 0 0 1px var(--cui-dockable-panel-drop-zone-active-border-color);
+  }
+}
+
+@property --cui-dockable-panel-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-dockable-panel-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dockable-panel-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dockable-panel-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dockable-panel-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-dockable-panel-drop-zone-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-dockable-panel-drop-zone-active-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}