feat(ui): add FloatingToggle primitive

CHANGELOG.md

@@ -5,6 +5,14 @@ Format based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Added
+
+- `FloatingToggle`: single-cell floating card with an `aria-pressed` icon button, the on/off counterpart of the `floating` `SegmentedControl`, for placing beside `ZoomControls`.
+
+### Changed
+
+- `floatingControlCellStateClassName` in `floating-control.ts` now holds the selected/unselected cell styles shared by `SegmentedControl` and `FloatingToggle`.
+
 ## [0.23.0] - 2026-11-12
 
 ### Added

packages/ui/src/FloatingToggle.test.tsx

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FloatingToggle } from "./FloatingToggle";
+
+describe("FloatingToggle", () => {
+  it("exposes the pressed state", () => {
+    render(
+      <FloatingToggle pressed aria-label="Night mode" onPressedChange={() => {}}>
+        <span />
+      </FloatingToggle>,
+    );
+    expect(screen.getByRole("button", { name: "Night mode" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("requests the opposite state on click", () => {
+    const onPressedChange = vi.fn();
+    render(
+      <FloatingToggle pressed={false} aria-label="Night mode" onPressedChange={onPressedChange}>
+        <span />
+      </FloatingToggle>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Night mode" }));
+    expect(onPressedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not fire when disabled", () => {
+    const onPressedChange = vi.fn();
+    render(
+      <FloatingToggle pressed={false} disabled aria-label="Night mode" onPressedChange={onPressedChange}>
+        <span />
+      </FloatingToggle>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Night mode" }));
+    expect(onPressedChange).not.toHaveBeenCalled();
+  });
+});

packages/ui/src/FloatingToggle.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ReactNode } from "react";
+import { cn } from "./class-name";
+import {
+  floatingControlCardClassName,
+  floatingControlCellClassName,
+  floatingControlCellStateClassName,
+} from "./floating-control";
+
+export interface FloatingToggleProps {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  /** Icon shown in the cell. */
+  children: ReactNode;
+  "aria-label": string;
+  disabled?: boolean;
+  title?: string;
+  className?: string;
+}
+
+/**
+ * Single-cell floating card holding an on/off icon button: the toggle counterpart of the
+ * `floating` `SegmentedControl`. Unpositioned: the caller places it over its canvas.
+ */
+export function FloatingToggle({
+  pressed,
+  onPressedChange,
+  children,
+  "aria-label": ariaLabel,
+  disabled,
+  title,
+  className,
+}: FloatingToggleProps) {
+  return (
+    <div className={cn("flex w-fit", floatingControlCardClassName, className)}>
+      <button
+        type="button"
+        aria-pressed={pressed}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        title={title}
+        onClick={() => onPressedChange(!pressed)}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center rounded-md transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+          floatingControlCellClassName,
+          floatingControlCellStateClassName(pressed),
+        )}
+      >
+        {children}
+      </button>
+    </div>
+  );
+}

packages/ui/src/SegmentedControl.tsx

@@ -2,7 +2,11 @@
 
 import { ReactNode } from "react";
 import { cn } from "./class-name";
-import { floatingControlCardClassName, floatingControlCellClassName } from "./floating-control";
+import {
+  floatingControlCardClassName,
+  floatingControlCellClassName,
+  floatingControlCellStateClassName,
+} from "./floating-control";
 
 export interface SegmentedControlOption<T extends string> {
   value: T;
@@ -62,17 +66,11 @@ export function SegmentedControl<T extends string>({
               floating
                 ? cn("inline-flex items-center justify-center rounded-md", floatingControlCellClassName)
                 : "rounded px-3 py-1 text-sm [@media(pointer:coarse)]:min-h-[var(--layout-touch-target)] [@media(pointer:coarse)]:px-4",
-              selected
-                ? cn(
-                    "text-[var(--color-text)]",
-                    floating
-                      ? "bg-[var(--color-surface-muted)] ring-1 ring-inset ring-[var(--color-border)]"
-                      : "bg-[var(--color-surface)] font-medium shadow-sm",
-                  )
-                : cn(
-                    "text-[var(--color-text-muted)] enabled:hover:text-[var(--color-text)]",
-                    floating && "enabled:hover:bg-[var(--color-surface-muted)]",
-                  ),
+              floating
+                ? floatingControlCellStateClassName(selected)
+                : selected
+                  ? "bg-[var(--color-surface)] font-medium text-[var(--color-text)] shadow-sm"
+                  : "text-[var(--color-text-muted)] enabled:hover:text-[var(--color-text)]",
             )}
           >
             {option.label}

packages/ui/src/floating-control.ts

@@ -7,3 +7,10 @@ export const floatingControlCardClassName =
 
 export const floatingControlCellClassName =
   "h-8 w-8 [@media(pointer:coarse)]:h-[var(--layout-touch-target)] [@media(pointer:coarse)]:w-[var(--layout-touch-target)]";
+
+/** Selected / unselected look of a floating cell, shared by every pressed-state control. */
+export function floatingControlCellStateClassName(selected: boolean): string {
+  return selected
+    ? "text-[var(--color-text)] bg-[var(--color-surface-muted)] ring-1 ring-inset ring-[var(--color-border)]"
+    : "text-[var(--color-text-muted)] enabled:hover:text-[var(--color-text)] enabled:hover:bg-[var(--color-surface-muted)]";
+}

packages/ui/src/index.ts

@@ -6,6 +6,7 @@ export * from "./Button";
 export * from "./IconTextButton";
 export * from "./IconButton";
 export * from "./Avatar";
+export * from "./FloatingToggle";
 export * from "./SegmentedControl";
 export * from "./PanelSection";
 export * from "./ZoomControls";