@ctrl-ui/react 0.8.0 → 0.8.2

package/dist/styles/recipes/sidebar-menu.css

@@ -0,0 +1,156 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="group-label"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    color: var(--cui-sidebar-group-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    outline: none;
+    transition-property: margin, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]),
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    gap: calc(var(--spacing) * 1.5);
+    block-size: var(--control-h-md);
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    padding-inline: var(--padding-x);
+    font-size: var(--text-body);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+    outline: none;
+    transition-property: width, height, padding, color, background-color, box-shadow;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover),
+    :where([data-control-family="sidebar"][data-slot="menu-action"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-hover-background);
+      color: var(--cui-sidebar-menu-button-hover-foreground);
+      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-active-background);
+      color: var(--cui-sidebar-menu-button-active-foreground);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:active, [data-popup-open])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    background-color: var(--cui-sidebar-menu-button-active-background);
+    color: var(--cui-sidebar-menu-button-active-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
+    background-color: var(--background);
+    box-shadow: 0 0 0 1px var(--sidebar-border);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
+    }
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-indicator="slide"]
+      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+  ) {
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:disabled, [aria-disabled="true"])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group-content"]) {
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    padding: 0;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-sm) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-lg) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:focus-visible) {
+    outline: 2px solid var(--sidebar-ring);
+    outline-offset: 2px;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-show-on-hover]) {
+      opacity: 0;
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-item"]:is(:hover, :focus-within) [data-slot="menu-action"]),
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-popup-open]) {
+      opacity: 1;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
+      inset-inline-end: 0;
+      inset-block-start: max(22px, calc(var(--control-h-md) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-sm) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-lg) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+      padding-inline-end: calc(var(--spacing) * 12);
+    }
+  }
+}

package/dist/styles/recipes/sidebar.css

@@ -134,90 +134,46 @@
     gap: calc(var(--spacing) * 1);
   }
 
-  :where([data-control-family="sidebar"][data-slot="group-label"]) {
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    color: var(--cui-sidebar-group-label-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    outline: none;
-    transition-property: margin, opacity;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
+  :where([data-control-family="sidebar"][data-slot="menu"][data-submenu]) {
+    margin-block: calc(var(--spacing) * 1);
+    margin-inline-start: calc(var(--spacing) * 3);
+    padding-inline-start: calc(var(--spacing) * 2);
+    border-inline-start: 1px solid var(--sidebar-border);
+    width: auto;
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
-    gap: calc(var(--spacing) * 1.5);
-    block-size: var(--control-h-md);
-    border-radius: var(--cui-sidebar-menu-button-radius);
-    padding-inline: var(--padding-x);
-    font-size: var(--text-body);
-    background-color: transparent;
-    color: var(--cui-sidebar-menu-button-foreground);
-    outline: none;
-    transition-property: width, height, padding, color, background-color, box-shadow;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
+  :where([data-control-family="sidebar"]:is([data-slot="group-label"], [data-slot="menu-button"])[aria-expanded] > [data-slot="chevron"]) {
+    margin-inline-start: auto;
+    transition: rotate var(--duration-base) var(--ease-standard);
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
-    block-size: var(--control-h-sm);
-    padding-inline: calc(var(--padding-x) * 0.75);
-    font-size: var(--text-label);
+  :where([data-control-family="sidebar"][aria-expanded="true"] > [data-slot="chevron"]) {
+    rotate: 90deg;
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
-    gap: calc(var(--spacing) * 2);
-    block-size: var(--control-h-lg);
-    padding-inline: calc(var(--padding-x) * 1.25);
+  :where([data-control-family="sidebar"][data-slot="group-label"][aria-expanded]) {
+    cursor: pointer;
+    width: 100%;
+    text-align: start;
   }
 
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-hover-background);
-      color: var(--cui-sidebar-menu-button-hover-foreground);
-      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
-    }
-
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-active-background);
-      color: var(--cui-sidebar-menu-button-active-foreground);
+  @media (pointer: coarse) {
+    :where([data-control-family="sidebar"]:is([data-slot="menu-button"], [data-slot="group-label"][aria-expanded])) {
+      min-block-size: 44px;
     }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    background-color: var(--cui-sidebar-menu-button-active-background);
-    color: var(--cui-sidebar-menu-button-active-foreground);
-    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    font-weight: var(--font-weight-medium);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
-    background-color: var(--background);
-    box-shadow: 0 0 0 1px var(--sidebar-border);
-  }
 
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
-      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
+    :where([data-control-family="button"][data-sidebar-trigger]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
     }
   }
 
-  :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
-  ) {
-    background-color: transparent;
+  :where([data-control-family="sidebar"][data-slot="menu"]:is([data-indicator="hover"], [data-indicator="slide"])) {
+    gap: 0;
   }
 
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
-    opacity: 0.5;
+  :where([data-control-family="sidebar"][data-slot="menu-track"] > [data-control-family="track-highlight"]) {
+    --cui-track-highlight-radius: var(--cui-sidebar-menu-button-radius);
   }
 
   :where([data-control-family="sidebar"][data-slot="root"][data-side="right"] [data-control-family="sidebar"][data-slot="gap"]) {

package/dist/styles/recipes/table-of-contents.css

@@ -1,6 +1,5 @@
 @layer components {
   :where([data-control-family="table-of-contents"][data-slot="root"]) {
-    --cui-track-highlight-transition-duration: var(--duration-base);
     --cui-table-of-contents-rail-background: oklch(from var(--border) l c h / 0.6);
     --cui-table-of-contents-highlight-radius: var(--radius-md);
     --cui-table-of-contents-highlight-background: oklch(from var(--foreground) l c h / 0.04);
@@ -71,6 +70,7 @@
   }
 
   :where([data-control-family="table-of-contents"][data-slot="root"] [data-control-family="track-highlight"][data-slot="root"]) {
+    --cui-track-highlight-transition-duration: var(--duration-base);
     --cui-track-highlight-radius: var(--cui-table-of-contents-highlight-radius);
     --cui-track-highlight-background: var(--cui-table-of-contents-highlight-background);
     --cui-track-highlight-ring-color: transparent;

package/dist/styles/recipes/track-highlight.css

@@ -4,7 +4,7 @@
     --_track-highlight-opacity: 0;
     border-radius: var(--cui-track-highlight-radius);
     opacity: var(--_track-highlight-opacity);
-    transition-property: top, left, right, bottom, opacity, background-color, box-shadow;
+    transition-property: top, left, right, bottom, width, height, opacity, background-color, box-shadow;
     transition-duration: var(--cui-track-highlight-transition-duration);
     transition-timing-function: var(--ease-emphasized);
   }
@@ -22,7 +22,8 @@
       var(--cui-track-highlight-shadow);
   }
 
-  :where([data-control-family="track-highlight"][data-slot="root"][data-hover]) {
+  :where([data-control-family="track-highlight"][data-slot="root"][data-hover]),
+  :where([data-track="hover"] > [data-control-family="track-highlight"][data-slot="root"]) {
     --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
     --cui-track-highlight-ring-color: transparent;
     --cui-track-highlight-shadow: none;
@@ -36,6 +37,129 @@
   :where([data-control-family="track-highlight"][data-slot="hover"][data-visible]) {
     --_track-highlight-opacity: 1;
   }
+
+  :where(
+    [data-track="hover"]:is([data-control-family="button-group"], [data-control-family="button"][data-slot="group"])
+      > [data-control-family="track-highlight"]
+  ) {
+    --cui-track-highlight-hover-background: oklch(from var(--foreground) l c h / 0.06);
+  }
+
+  :where([data-track]:has(> [data-control-family="button"][data-track-item]) > [data-control-family="track-highlight"]),
+  :where(
+    [data-track]:is(
+        [data-control-family="button-group"],
+        [data-control-family="button"][data-slot="group"],
+        [data-control-family="checkbox-group"]
+      )
+      > [data-control-family="track-highlight"]
+  ) {
+    --cui-track-highlight-radius: var(--radius-control);
+  }
+
+  @supports ((anchor-name: --cui-track) and (anchor-scope: --cui-track)) {
+    :where([data-track]:has(> [data-control-family="track-highlight"])) {
+      anchor-scope: --cui-track-active, --cui-track-hover, --cui-track-focus;
+      --_track-anchor: --cui-track-active;
+      --_track-display: none;
+    }
+
+    :where(
+        [data-track="slide"]:has(> [data-control-family="track-highlight"]):has(
+          [data-track-item][data-active="true"]:not(:disabled, [aria-disabled="true"], [data-disabled])
+        )
+      ) {
+      --_track-display: block;
+    }
+
+    :where([data-track="hover"]:has(> [data-control-family="track-highlight"])) {
+      --_track-anchor: --cui-track-idle;
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"])
+          [data-track-item][data-active="true"]:not(:disabled, [aria-disabled="true"], [data-disabled])
+      ) {
+      anchor-name: --cui-track-active;
+    }
+
+    :where([data-track] > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])) {
+      display: var(--_track-display);
+      position-anchor: var(--_track-anchor);
+      top: anchor(top, 0px);
+      width: anchor-size(width, 0px);
+      height: anchor-size(height, 0px);
+      left: anchor(left, 0px);
+      --_track-highlight-opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    @media (hover: hover) {
+      :where(
+          [data-track]:has(> [data-control-family="track-highlight"])
+            [data-track-item]:hover:not(:disabled, [aria-disabled="true"], [data-disabled], :has([role="checkbox"][data-disabled]))
+        ) {
+        anchor-name: --cui-track-hover;
+      }
+
+      :where(
+          [data-track]:has(> [data-control-family="track-highlight"]):has(
+            [data-track-item]:hover:not(:disabled, [aria-disabled="true"], [data-disabled])
+          ):not(:has([data-track-item]:hover [role="checkbox"][data-disabled])):not(:has([data-track] [data-track-item]:hover))
+        ) {
+        --_track-anchor: --cui-track-hover;
+        --_track-display: block;
+      }
+
+      :where(
+          [data-track="slide"]:has(
+              [data-track-item]:hover:not([data-active="true"], :disabled, [aria-disabled="true"], [data-disabled])
+            ):not(:has(:focus-visible, [data-track] [data-track-item]:hover))
+            > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
+        ) {
+        --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+        --cui-track-highlight-ring-color: transparent;
+        --cui-track-highlight-shadow: none;
+      }
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"])
+          [data-track-item]:is(:focus-visible, :has(:focus-visible)):not(
+            :disabled,
+            [aria-disabled="true"],
+            [data-disabled],
+            :has([role="checkbox"][data-disabled])
+          )
+      ) {
+      anchor-name: --cui-track-focus;
+    }
+
+    :where(
+        [data-track]:has(> [data-control-family="track-highlight"]):has(
+          [data-track-item]:focus-visible,
+          [data-track-item] :focus-visible
+        ):not(:has([data-track] :focus-visible))
+      ) {
+      --_track-anchor: --cui-track-focus;
+      --_track-display: block;
+    }
+
+    :where(
+        [data-track="slide"]:has(
+            [data-track-item]:not([data-active="true"]):focus-visible,
+            [data-track-item]:not([data-active="true"]) :focus-visible
+          ):not(:has([data-track] :focus-visible))
+          > [data-control-family="track-highlight"][data-positioning="anchor"]:not([data-measured])
+      ) {
+      --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+      --cui-track-highlight-ring-color: transparent;
+      --cui-track-highlight-shadow: none;
+    }
+  }
 }
 
 @property --cui-track-highlight-radius {

package/dist/styles/recipes/tree.css

@@ -15,6 +15,10 @@
     outline: none;
   }
 
+  :where([data-control-family="tree"][data-slot="root"] > [data-control-family="track-highlight"]) {
+    --cui-track-highlight-radius: var(--cui-tree-item-trigger-radius);
+  }
+
   :where([data-control-family="tree"][data-slot="item-trigger"]) {
     gap: calc(var(--spacing) * 1.5);
     padding-block: calc(var(--spacing) * 1);

package/dist/ui/button-group.d.ts

@@ -1,3 +1,4 @@
+import { HoverIndicator } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonGroupKnobStyle } from "../knob-contracts/button-group-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
@@ -9,6 +10,7 @@ type ButtonGroupTextProps = Omit<ComponentProps<"div"> & {
 };
 type ButtonGroupProps = ComponentProps<"div"> & {
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 } & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
@@ -17,7 +19,7 @@ type ButtonGroupSeparatorProps = Omit<ComponentProps<"div"> & {
 }, "style"> & {
   style?: CSSProperties & ButtonGroupKnobStyle;
 };
-declare function ButtonGroup({ orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+declare function ButtonGroup({ orientation, indicator, className, children, ...props }: ButtonGroupProps): import("react").JSX.Element;
 declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
 declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/button-group.js

@@ -1,23 +1,26 @@
+"use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { skinIndicator } from "../skin.js";
+import { ButtonTrackContext, buttonTrackStructureClasses } from "./button.js";
+import { TrackHighlight } from "../extensions/track-highlight.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button-group.tsx
-const buttonGroupVariant = cva("inline-flex w-fit items-stretch [&>*]:relative [&>*:focus-within:not([data-active=true])]:z-[1] [&>*[data-active=true]]:z-[2] [&>*[data-active=true]:focus-within]:z-[3]", {
-	variants: { orientation: {
-		horizontal: "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
-		vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
-	} },
-	defaultVariants: { orientation: "horizontal" }
-});
-function ButtonGroup({ orientation = "horizontal", className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-control-ui": "button-group",
-		"data-control-family": "button-group",
-		"data-slot": "root",
-		"data-orientation": orientation,
-		className: cn(buttonGroupVariant({ orientation }), className),
-		...props
+function ButtonGroup({ orientation = "horizontal", indicator, className, children, ...props }) {
+	const resolvedIndicator = indicator ?? skinIndicator("button-group") ?? "none";
+	const tracksHover = resolvedIndicator === "hover";
+	return /* @__PURE__ */ jsx(ButtonTrackContext, {
+		value: tracksHover,
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"data-control-ui": "button-group",
+			"data-control-family": "button-group",
+			"data-slot": "root",
+			"data-orientation": orientation,
+			"data-track": resolvedIndicator,
+			className: cn(buttonTrackStructureClasses, "inline-flex w-fit items-stretch data-[orientation=vertical]:flex-col", className),
+			...props,
+			children: [children, tracksHover ? /* @__PURE__ */ jsx(TrackHighlight, { className: "z-0" }) : null]
+		})
 	});
 }
 function ButtonGroupText({ size = "sm", className, ...props }) {

package/dist/ui/button.d.ts

@@ -6,6 +6,7 @@ import { CSSProperties, ComponentProps } from "react";
 type ButtonVariant = ControlVariant;
 type ButtonSize = ControlSize;
 type ButtonTone = ControlTone;
+declare const ButtonTrackContext: import("react").Context<boolean>;
 declare const buttonShapes: readonly ["default", "circle"];
 type ButtonShape = (typeof buttonShapes)[number];
 type ButtonAppearanceProps = {
@@ -28,9 +29,10 @@ type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
 };
 type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
 declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+declare const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
 declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
 //#endregion
-export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses };
+export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonTrackContext, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/button.js

@@ -1,12 +1,15 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { skinAdornment } from "../skin.js";
+import { createContext, useContext } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
+const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];
 const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+const buttonTrackStructureClasses = "data-[track=hover]:relative data-[track=hover]:isolate [&_[data-track-item]]:[isolation:auto]";
 const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
 function ButtonContent({ children }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -17,15 +20,16 @@ function ButtonContent({ children }) {
 		children
 	});
 }
-/** The content wrapper only earns its node when a skin layer sits behind it and needs stacking above it. */
 function ButtonBody({ layer, wrap = true, children }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [layer, wrap && layer ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
+	const wrapsContent = useContext(ButtonTrackContext) || wrap && Boolean(layer);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [layer, wrapsContent ? /* @__PURE__ */ jsx(ButtonContent, { children }) : children] });
 }
 function Button({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", type = "button", disabled, render, nativeButton, className, children, ...props }) {
 	const layer = skinAdornment("button", "layer", {
 		variant,
 		tone
 	});
+	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Button$1, {
 		type: nativeButton === false ? void 0 : type,
 		disabled,
@@ -33,6 +37,7 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 		"data-control-family": "button",
 		"data-slot": "root",
 		"data-control": "true",
+		"data-track-item": tracksHover ? "" : void 0,
 		"data-active": active ? "true" : void 0,
 		"data-icon-only": iconOnly ? "true" : void 0,
 		"data-shape": shape,
@@ -51,10 +56,12 @@ function Button({ variant = "quiet", size = "sm", tone = "neutral", active = fal
 	});
 }
 function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", render, className, children, ...props }) {
+	const tracksHover = useContext(ButtonTrackContext);
 	return useRender({
 		defaultTagName: "a",
 		render,
 		props: {
+			"data-track-item": tracksHover ? "" : void 0,
 			...props,
 			"data-control-ui": "button",
 			"data-control-family": "button",
@@ -78,7 +85,9 @@ function ButtonLink({ variant = "quiet", size = "sm", tone = "neutral", active =
 	});
 }
 function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active = false, iconOnly = false, shape = "default", className, children, ...props }) {
+	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx("label", {
+		"data-track-item": tracksHover ? "" : void 0,
 		...props,
 		"data-control-ui": "button",
 		"data-control-family": "button",
@@ -101,4 +110,4 @@ function ButtonLabel({ variant = "quiet", size = "sm", tone = "neutral", active
 	});
 }
 //#endregion
-export { Button, ButtonLabel, ButtonLink, buttonContentClasses, buttonShapes, buttonStructureClasses };
+export { Button, ButtonLabel, ButtonLink, ButtonTrackContext, buttonContentClasses, buttonShapes, buttonStructureClasses, buttonTrackStructureClasses };

package/dist/ui/checkbox-group.d.ts

@@ -1,11 +1,13 @@
-import { ControlledMultiChoice } from "../control-props.js";
+import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ComponentProps } from "react";
 //#region src/ui/checkbox-group.d.ts
 type CheckboxGroupProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice & {
   allValues?: string[];
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
+  indicator?: HoverIndicator;
 };
-declare function CheckboxGroup({ className, orientation, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+declare function CheckboxGroup({ className, orientation, indicator, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+declare function CheckboxGroupItem({ className, htmlFor, children, ...props }: ComponentProps<"label">): import("react").JSX.Element;
 //#endregion
-export { CheckboxGroup, CheckboxGroupProps };
+export { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps };