@marianmeres/stuic 3.172.0 → 3.174.0

package/dist/attachments/resizable.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ResizableOptions } from "./resizable.js";
+import { type ResizableWidthOptions } from "../actions/resizable-width.svelte.js";
+declare const Resizable: import("svelte").Component<{
+    options?: ResizableOptions;
+    action?: ResizableWidthOptions | undefined;
+    external?: boolean;
+    vertical?: boolean;
+}, {}, "">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/attachments/resizable.js

@@ -0,0 +1,295 @@
+import { getId } from "../utils/get-id.js";
+import { localStorageState, sessionStorageState, } from "../utils/persistent-state.svelte.js";
+import { twMerge } from "../utils/tw-merge.js";
+const DEFAULT_LABEL = "Resize";
+/**
+ * Makes an element's width (`axis: "x"`) or height (`axis: "y"`) resizable by dragging
+ * its edge. The handle is a keyboard-operable ARIA window splitter (`role="separator"`,
+ * focusable, `aria-valuenow` in `units`): arrow keys along the axis move it by `step`
+ * (×10 with Shift), Home / End go to `min` / `max`, Enter (like double-click) resets.
+ * Pointer Events with capture cover mouse, touch and pen in one code path.
+ *
+ * By default a thin handle strip with a grip is appended inside the element on the
+ * resized edge (the element becomes `position: relative`); pass `handle` to drive an
+ * element of your own (a sibling separator, say) instead. The size can be persisted
+ * under `key`. `min` / `max` clamp every path (drag, keys, `api.set()`).
+ *
+ * A factory: call it with the options (or a function returning them — reactive reads
+ * inside re-run the attachment) and attach the result.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { resizable } from "@marianmeres/stuic";
+ * </script>
+ *
+ * <!-- side by side: the first flex child gets a draggable width -->
+ * <div class="flex">
+ *   <aside {@attach resizable({ initial: 300, min: 200, max: 600, key: "sidebar" })}>…</aside>
+ *   <main class="flex-1">…</main>
+ * </div>
+ *
+ * <!-- stacked: a draggable height, in % of the (definite-height) parent -->
+ * <div class="flex flex-col h-96">
+ *   <div {@attach resizable({ axis: "y", units: "%", initial: 40, max: 80 })}>…</div>
+ *   <div class="flex-1">…</div>
+ * </div>
+ * ```
+ *
+ * @param options - {@link ResizableOptions}, or a function returning them
+ */
+export function resizable(options = {}) {
+    return (el) => setup(el, typeof options === "function" ? options() : options);
+}
+// internals //////////////////////////////////////////////////////////////////////////
+const HANDLE_CLS_COMMON = [
+    "group",
+    "absolute",
+    "bg-black/20 hover:bg-black/30",
+    "dark:bg-white/10 dark:hover:bg-white/20",
+    "transition-colors duration-200",
+    "touch-none",
+    "focus-visible:outline-2 focus-visible:outline-(--stuic-color-ring)",
+];
+const HANDLE_CLS_X = [...HANDLE_CLS_COMMON, "top-0 bottom-0 w-[1px] cursor-col-resize"];
+const HANDLE_CLS_Y = [...HANDLE_CLS_COMMON, "left-0 right-0 h-[1px] cursor-row-resize"];
+const GRIP_CLS_COMMON = [
+    "absolute",
+    "rounded border border-black/20 dark:border-white/20",
+    "bg-gray-300 group-hover:bg-gray-400",
+    "dark:bg-gray-600 dark:group-hover:bg-gray-500",
+    "transition-colors duration-200",
+    "touch-none",
+];
+const GRIP_CLS_X = [
+    ...GRIP_CLS_COMMON,
+    "h-[20px] w-[9px] -translate-x-[4px] top-1/2 -translate-y-1/2 cursor-col-resize",
+];
+const GRIP_CLS_Y = [
+    ...GRIP_CLS_COMMON,
+    "w-[20px] h-[9px] -translate-y-[4px] left-1/2 -translate-x-1/2 cursor-row-resize",
+];
+function create_handle(el, isX, reverse, handleClass, handleDragClass) {
+    const handle = document.createElement("div");
+    handle.setAttribute("data-handle", "true");
+    const grip = document.createElement("div");
+    grip.classList.add(...twMerge((isX ? GRIP_CLS_X : GRIP_CLS_Y).join(" "), handleDragClass).split(" "));
+    handle.appendChild(grip);
+    const edge = isX ? (reverse ? "left-0" : "right-0") : reverse ? "top-0" : "bottom-0";
+    handle.classList.add(...twMerge((isX ? HANDLE_CLS_X : HANDLE_CLS_Y).join(" "), edge, handleClass).split(" "));
+    el.appendChild(handle);
+    return handle;
+}
+function setup(el, options) {
+    const { enabled = true, axis = "x", initial = 0, min = 0, max = 0, units = "px", reverse = false, key, storage = "session", step = units === "%" ? 1 : 10, label = DEFAULT_LABEL, resetTo = initial, handle: providedHandle, handleClass = "", handleDragClass = "", onResize, onInit, debug, } = options;
+    const _debug = (...args) => debug?.("[resizable]", ...args);
+    _debug("setup", options);
+    if (!enabled)
+        return;
+    const container = el.parentElement;
+    if (!container)
+        return;
+    const isX = axis === "x";
+    const dim = isX ? "width" : "height";
+    // storage: a stored size wins over `initial`
+    const stored = key
+        ? (storage === "local" ? localStorageState : sessionStorageState)(`resizable-${dim}-${key}`, initial)
+        : null;
+    // handle /////////////////////////////////////////////////////////////////////////
+    const handle = providedHandle ?? create_handle(el, isX, reverse, handleClass, handleDragClass);
+    // what a provided handle looked like before, so the cleanup can restore it
+    const prevAttrs = new Map();
+    const set_attr = (name, value) => {
+        if (!prevAttrs.has(name))
+            prevAttrs.set(name, handle.getAttribute(name));
+        handle.setAttribute(name, value);
+    };
+    const prevPosition = el.style.position;
+    const prevTouchAction = handle.style.touchAction;
+    if (!providedHandle)
+        el.style.position = "relative"; // the created handle is absolute
+    handle.style.touchAction = "none"; // no scrolling / zooming mid-drag
+    const assignedId = el.id ? null : (el.id = getId("stuic-resizable-"));
+    set_attr("role", "separator");
+    set_attr("tabindex", "0");
+    set_attr("aria-orientation", isX ? "vertical" : "horizontal");
+    set_attr("aria-label", label);
+    set_attr("aria-controls", el.id);
+    // sizing /////////////////////////////////////////////////////////////////////////
+    const measure = () => (isX ? container.offsetWidth : container.offsetHeight);
+    const current_px = () => parseFloat(getComputedStyle(el)[dim]) || 0;
+    // px -> units; with no measurable container (hidden) a % size is left as it is
+    const to_units = (px, cs) => units === "%" ? (cs > 0 ? (px / cs) * 100 : current) : px;
+    const clamp = (value) => {
+        const before = value;
+        if (min)
+            value = Math.max(min, value);
+        if (max)
+            value = Math.min(max, value);
+        if (before !== value)
+            _debug("clamped", before, "->", value, units);
+        return value;
+    };
+    let current = 0; // last applied size, in units
+    function update_aria(cs) {
+        set_attr("aria-valuemin", `${min || 0}`);
+        set_attr("aria-valuemax", `${max || (units === "%" ? 100 : Math.round(cs))}`);
+        set_attr("aria-valuenow", `${Math.round(current)}`);
+        set_attr("aria-valuetext", `${Math.round(current)}${units}`);
+    }
+    function commit(size, cs) {
+        size = clamp(units === "%" ? Math.min(100, size) : size);
+        el.style[dim] = `${size}${units}`;
+        current = size;
+        _debug("applied", size, units);
+        update_aria(cs);
+        const info = { size, units, axis, container: cs };
+        onResize?.(info);
+        if (stored)
+            stored.current = size;
+        return info;
+    }
+    /** Applies a size given in `units` — needs no container measurement, so it also works while hidden. */
+    function apply(size) {
+        commit(size, measure());
+    }
+    /** Applies a size given in px (a drag), against the container as measured when it started. */
+    function apply_px(px, cs) {
+        commit(to_units(px, cs), cs);
+    }
+    function reset() {
+        if (resetTo)
+            apply(resetTo);
+    }
+    // pointer ////////////////////////////////////////////////////////////////////////
+    let dragging = false;
+    let pointerId = -1;
+    let startCoord = 0;
+    let startPx = 0;
+    let containerSize = 0;
+    function on_pointerdown(e) {
+        if (e.button !== 0 && e.pointerType === "mouse")
+            return;
+        dragging = true;
+        pointerId = e.pointerId;
+        startCoord = isX ? e.clientX : e.clientY;
+        startPx = current_px();
+        containerSize = measure();
+        try {
+            handle.setPointerCapture(e.pointerId);
+        }
+        catch {
+            /* capture is best-effort (synthetic pointers have no id to capture) */
+        }
+        document.body.style.cursor = isX ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        handle.setAttribute("data-resizing", "");
+    }
+    function on_pointermove(e) {
+        if (!dragging || e.pointerId !== pointerId)
+            return;
+        e.preventDefault();
+        const delta = (isX ? e.clientX : e.clientY) - startCoord;
+        apply_px(reverse ? startPx - delta : startPx + delta, containerSize);
+    }
+    function on_pointerup(e) {
+        if (!dragging || e.pointerId !== pointerId)
+            return;
+        stop();
+    }
+    function stop() {
+        if (!dragging)
+            return;
+        dragging = false;
+        try {
+            handle.releasePointerCapture(pointerId);
+        }
+        catch {
+            /* noop */
+        }
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        handle.removeAttribute("data-resizing");
+    }
+    // keyboard ///////////////////////////////////////////////////////////////////////
+    function on_keydown(e) {
+        const amount = e.shiftKey ? step * 10 : step;
+        // delta along the screen direction (+ = right / down), like a pointer drag
+        let delta;
+        if (e.key === (isX ? "ArrowRight" : "ArrowDown"))
+            delta = amount;
+        else if (e.key === (isX ? "ArrowLeft" : "ArrowUp"))
+            delta = -amount;
+        else if (e.key === "Home")
+            delta = NaN;
+        else if (e.key === "End")
+            delta = NaN;
+        else if (e.key === "Enter")
+            delta = NaN;
+        else
+            return;
+        e.preventDefault();
+        if (e.key === "Home")
+            return apply(min || 0);
+        if (e.key === "End")
+            return apply(max || (units === "%" ? 100 : measure()));
+        if (e.key === "Enter")
+            return reset();
+        apply(current + (reverse ? -delta : delta));
+    }
+    function on_dblclick() {
+        reset();
+    }
+    function on_selectstart(e) {
+        e.preventDefault();
+    }
+    // go /////////////////////////////////////////////////////////////////////////////
+    const startSize = stored ? (stored.current ?? initial) : initial;
+    if (startSize) {
+        apply(startSize);
+    }
+    else {
+        const cs = measure();
+        current = to_units(current_px(), cs);
+        update_aria(cs);
+    }
+    handle.addEventListener("pointerdown", on_pointerdown);
+    handle.addEventListener("pointermove", on_pointermove);
+    handle.addEventListener("pointerup", on_pointerup);
+    handle.addEventListener("pointercancel", on_pointerup);
+    handle.addEventListener("keydown", on_keydown);
+    handle.addEventListener("dblclick", on_dblclick);
+    handle.addEventListener("selectstart", on_selectstart);
+    onInit?.({
+        get current() {
+            return current;
+        },
+        set: apply,
+        reset,
+    });
+    return () => {
+        stop();
+        handle.removeEventListener("pointerdown", on_pointerdown);
+        handle.removeEventListener("pointermove", on_pointermove);
+        handle.removeEventListener("pointerup", on_pointerup);
+        handle.removeEventListener("pointercancel", on_pointerup);
+        handle.removeEventListener("keydown", on_keydown);
+        handle.removeEventListener("dblclick", on_dblclick);
+        handle.removeEventListener("selectstart", on_selectstart);
+        if (providedHandle) {
+            for (const [name, value] of prevAttrs) {
+                if (value === null)
+                    handle.removeAttribute(name);
+                else
+                    handle.setAttribute(name, value);
+            }
+            handle.style.touchAction = prevTouchAction;
+        }
+        else {
+            handle.remove();
+            el.style.position = prevPosition;
+        }
+        if (assignedId && el.id === assignedId)
+            el.removeAttribute("id");
+    };
+}

package/dist/components/Button/README.md

@@ -174,16 +174,17 @@ Notes:
 
 ### Component Tokens
 
-| Variable                       | Default                | Description         |
-| ------------------------------ | ---------------------- | ------------------- |
-| `--stuic-button-radius`        | `--radius-md`          | Border radius       |
-| `--stuic-button-font-family`   | `--font-sans`          | Font family         |
-| `--stuic-button-font-weight`   | `--font-weight-medium` | Font weight         |
-| `--stuic-button-transition`    | `100ms`                | Transition duration |
-| `--stuic-button-ring-width`    | `3px`                  | Focus ring width    |
-| `--stuic-button-ring-color`    | `--stuic-color-ring`   | Focus ring color    |
-| `--stuic-button-raised-offset` | `2px`                  | 3D effect offset    |
-| `--stuic-button-raised-color`  | `rgb(0 0 0 / 0.8)`     | 3D shadow color     |
+| Variable                       | Default                        | Description         |
+| ------------------------------ | ------------------------------ | ------------------- |
+| `--stuic-button-radius`        | `--stuic-radius-button`        | Border radius       |
+| `--stuic-button-border-width`  | `--stuic-border-width-button`  | Border width        |
+| `--stuic-button-font-family`   | `--font-sans`                  | Font family         |
+| `--stuic-button-font-weight`   | `--font-weight-medium`         | Font weight         |
+| `--stuic-button-transition`    | `--stuic-transition` (`150ms`) | Transition duration |
+| `--stuic-button-ring-width`    | `3px`                          | Focus ring width    |
+| `--stuic-button-ring-color`    | `--stuic-color-ring`           | Focus ring color    |
+| `--stuic-button-raised-offset` | `2px`                          | 3D effect offset    |
+| `--stuic-button-raised-color`  | `rgb(0 0 0 / 0.8)`             | 3D shadow color     |
 
 ### Size Tokens
 

package/dist/components/ButtonGroupRadio/README.md

@@ -129,34 +129,63 @@ disable the whole group instead, use the top-level `disabled` prop.
 
 ## CSS Variables
 
+All tokens below are **declared** in the component's `:root`. That means a `:root` override
+or a `style` prop override both work, but the `var(--token, <fallback>)` fallbacks visible in
+`index.css` never fire — the defaults are the `:root` values listed here.
+
 ### Component Tokens
 
-| Variable                                 | Default                   | Description                             |
-| ---------------------------------------- | ------------------------- | --------------------------------------- |
-| `--stuic-button-group-radius`            | `var(--radius-md)`        | Border radius for container and buttons |
-| `--stuic-button-group-padding`           | `0.375rem`                | Container padding                       |
-| `--stuic-button-group-gap`               | `0.25rem`                 | Gap between buttons                     |
-| `--stuic-button-group-border-width`      | `1px`                     | Container border width                  |
-| `--stuic-button-group-transition`        | `150ms`                   | Transition duration                     |
-| `--stuic-button-group-ring-width`        | `3px`                     | Focus ring width                        |
-| `--stuic-button-group-ring-color`        | `var(--stuic-color-ring)` | Focus ring color                        |
-| `--stuic-button-group-button-padding-x`  | `0.75rem`                 | Button horizontal padding               |
-| `--stuic-button-group-button-padding-y`  | `0.5rem`                  | Button vertical padding                 |
-| `--stuic-button-group-button-min-height` | `2.75rem`                 | Button min height (44px touch target)   |
+| Variable                                 | Default                   | Description                                    |
+| ---------------------------------------- | ------------------------- | ---------------------------------------------- |
+| `--stuic-button-group-radius`            | `9999px`                  | Border radius for container and buttons (pill) |
+| `--stuic-button-group-padding-x`         | `4px`                     | Container horizontal padding                   |
+| `--stuic-button-group-padding-y`         | `3px`                     | Container vertical padding                     |
+| `--stuic-button-group-gap`               | `0.25rem`                 | Gap between buttons                            |
+| `--stuic-button-group-border-width`      | `1px`                     | Container border width                         |
+| `--stuic-button-group-ring-width`        | `4px`                     | Focus ring width                               |
+| `--stuic-button-group-ring-color`        | `var(--stuic-color-ring)` | Focus ring color                               |
+| `--stuic-button-group-button-padding-x`  | `0.75rem`                 | Button horizontal padding                      |
+| `--stuic-button-group-button-padding-y`  | `0.375rem`                | Button vertical padding                        |
+| `--stuic-button-group-button-min-height` | `2.25rem`                 | Button min height (36px)                       |
+| `--stuic-button-group-transition`        | `var(--stuic-transition)` | Transition duration (not declared — fallback)  |
+
+`--stuic-button-group-transition` is the one exception: it is _not_ declared, so it resolves
+through its usage-site fallback to `--stuic-transition`.
 
 ### Color Tokens
 
-| Variable                                      | Default                                 | Description                      |
-| --------------------------------------------- | --------------------------------------- | -------------------------------- |
-| `--stuic-button-group-bg`                     | `var(--stuic-color-surface)`            | Container background             |
-| `--stuic-button-group-text`                   | `var(--stuic-color-foreground)`         | Container text color             |
-| `--stuic-button-group-border`                 | `var(--stuic-color-border)`             | Container border color           |
-| `--stuic-button-group-button-bg`              | `transparent`                           | Inactive button background       |
-| `--stuic-button-group-button-text`            | `var(--stuic-color-foreground)`         | Inactive button text             |
-| `--stuic-button-group-button-bg-hover`        | `var(--stuic-color-muted)`              | Inactive button hover background |
-| `--stuic-button-group-button-bg-active`       | `var(--stuic-color-primary)`            | Active button background         |
-| `--stuic-button-group-button-text-active`     | `var(--stuic-color-primary-foreground)` | Active button text               |
-| `--stuic-button-group-button-bg-active-hover` | `var(--stuic-color-primary-hover)`      | Active button hover background   |
+| Variable                                        | Default                                   | Description                      |
+| ----------------------------------------------- | ----------------------------------------- | -------------------------------- |
+| `--stuic-button-group-bg`                       | `var(--stuic-color-muted)`                | Container background             |
+| `--stuic-button-group-text`                     | `var(--stuic-color-muted-foreground)`     | Container text color             |
+| `--stuic-button-group-border`                   | `var(--stuic-input-border)`               | Container border color           |
+| `--stuic-button-group-border-focus`             | `var(--stuic-color-primary)`              | Container border on focus-within |
+| `--stuic-button-group-button-bg`                | `transparent`                             | Inactive button background       |
+| `--stuic-button-group-button-text`              | `var(--stuic-color-muted-foreground)`     | Inactive button text             |
+| `--stuic-button-group-button-bg-hover`          | `transparent`                             | Inactive button hover background |
+| `--stuic-button-group-button-text-hover`        | `var(--stuic-color-foreground)`           | Inactive button hover text       |
+| `--stuic-button-group-button-bg-active`         | `var(--stuic-color-surface-1)`            | Active button background         |
+| `--stuic-button-group-button-text-active`       | `var(--stuic-color-surface-1-foreground)` | Active button text               |
+| `--stuic-button-group-button-bg-active-hover`   | `var(--stuic-color-surface-1)`            | Active button hover background   |
+| `--stuic-button-group-button-text-active-hover` | `var(--stuic-color-surface-1-foreground)` | Active button hover text         |
+
+### Size Variants
+
+`size` sets `data-size` on the container, which re-declares a subset of the tokens above.
+`md` is the `:root` default; `sm` and `lg` override these:
+
+| Token                                    | `sm`       | `md` (default) | `lg`       |
+| ---------------------------------------- | ---------- | -------------- | ---------- |
+| `--stuic-button-group-padding-x`         | `3px`      | `4px`          | `8px`      |
+| `--stuic-button-group-padding-y`         | `2px`      | `3px`          | `6px`      |
+| `--stuic-button-group-gap`               | `0.125rem` | `0.25rem`      | `0.375rem` |
+| `--stuic-button-group-button-padding-x`  | `0.5rem`   | `0.75rem`      | `1rem`     |
+| `--stuic-button-group-button-padding-y`  | `0.375rem` | `0.375rem`     | `0.625rem` |
+| `--stuic-button-group-button-min-height` | `2.25rem`  | `2.25rem`      | `3rem`     |
+| overall height                           | 42px       | 44px           | 62px       |
+
+Because the size variants declare these on the container itself, they beat the inherited
+`:root` values — but an inline `style` on the same element still wins over both.
 
 ### Customization Examples
 

package/dist/components/ButtonGroupRadio/index.css

@@ -78,7 +78,9 @@
 	   ============================================================================ */
 
 	.stuic-button-group[data-size="sm"] {
-		--stuic-button-group-padding: 0.25rem;
+		/* overall height = 36px + 2×2px + 2×1px = 42px */
+		--stuic-button-group-padding-x: 3px;
+		--stuic-button-group-padding-y: 2px;
 		--stuic-button-group-gap: 0.125rem;
 		--stuic-button-group-button-padding-x: 0.5rem;
 		--stuic-button-group-button-padding-y: 0.375rem;
@@ -86,7 +88,9 @@
 	}
 
 	.stuic-button-group[data-size="lg"] {
-		--stuic-button-group-padding: 0.5rem;
+		/* overall height = 48px + 2×6px + 2×1px = 62px */
+		--stuic-button-group-padding-x: 8px;
+		--stuic-button-group-padding-y: 6px;
 		--stuic-button-group-gap: 0.375rem;
 		--stuic-button-group-button-padding-x: 1rem;
 		--stuic-button-group-button-padding-y: 0.625rem;

package/dist/components/PricingTable/PricingTable.svelte

@@ -177,6 +177,11 @@
 	let _classTiers = $derived(
 		unstyled ? classTiersProp : twMerge("stuic-pricing-table-tiers", classTiersProp)
 	);
+	// The toggle's pill look lives in index.css behind --stuic-pricing-table-toggle-*
+	// tokens (an inline declaration here would outrank any :root override).
+	let _classToggle = $derived(
+		unstyled ? classToggleProp : twMerge("stuic-pricing-table-toggle", classToggleProp)
+	);
 </script>
 
 <div bind:this={el} class={_class} {style} {...rest}>
@@ -195,20 +200,9 @@
 				onButtonClick={(i) => {
 					billingPeriod = i === 0 ? "monthly" : "annual";
 				}}
-				class={classToggleProp}
-				style="
-					width: auto;
-					--stuic-button-group-radius: 9999px;
-					--stuic-button-group-padding: 0.25rem;
-					--stuic-button-group-bg: var(--stuic-color-muted);
-					--stuic-button-group-border-width: 0;
-					--stuic-button-group-button-bg-active: var(--stuic-color-background);
-					--stuic-button-group-button-text-active: var(--stuic-color-foreground);
-					--stuic-button-group-button-bg-active-hover: var(--stuic-color-background);
-					--stuic-button-group-button-text-active-hover: var(--stuic-color-foreground);
-					{styleToggle ?? ''}
-				"
-				classButtonActive="shadow"
+				class={_classToggle}
+				style={styleToggle}
+				classButtonActive={unstyled ? undefined : "shadow"}
 			/>
 		{/if}
 	{/if}

package/dist/components/PricingTable/README.md

@@ -161,12 +161,35 @@ A data-driven pricing tiers component for displaying plan comparisons with featu
 
 ### Toggle
 
-| Variable                                    | Default          | Description              |
-| ------------------------------------------- | ---------------- | ------------------------ |
-| `--stuic-pricing-table-toggle-bg`           | muted            | Toggle track background  |
-| `--stuic-pricing-table-toggle-bg-active`    | background       | Active option background |
-| `--stuic-pricing-table-toggle-color`        | muted-foreground | Option text color        |
-| `--stuic-pricing-table-toggle-color-active` | foreground       | Active option text color |
+The billing toggle is an internal `ButtonGroupRadio`. Its pill look is expressed through the
+tokens below, so a theme can reach it from `:root` like any other part of the component:
+
+```css
+:root {
+	/* square toggle to match a flat theme */
+	--stuic-pricing-table-toggle-radius: var(--stuic-radius-button);
+}
+```
+
+| Variable                                          | Default          | Description                                 |
+| ------------------------------------------------- | ---------------- | ------------------------------------------- |
+| `--stuic-pricing-table-toggle-radius`             | `9999px`         | Track and option border radius              |
+| `--stuic-pricing-table-toggle-bg`                 | muted            | Toggle track background                     |
+| `--stuic-pricing-table-toggle-border-width`       | `0`              | Toggle track border width                   |
+| `--stuic-pricing-table-toggle-padding-x`          | `0.25rem`        | Track horizontal padding around the options |
+| `--stuic-pricing-table-toggle-padding-y`          | `0.25rem`        | Track vertical padding around the options   |
+| `--stuic-pricing-table-toggle-color`              | muted-foreground | Inactive option text color                  |
+| `--stuic-pricing-table-toggle-color-hover`        | foreground       | Inactive option text color on hover         |
+| `--stuic-pricing-table-toggle-bg-active`          | background       | Active option background                    |
+| `--stuic-pricing-table-toggle-color-active`       | foreground       | Active option text color                    |
+| `--stuic-pricing-table-toggle-bg-active-hover`    | `-bg-active`     | Active option background on hover           |
+| `--stuic-pricing-table-toggle-color-active-hover` | `-color-active`  | Active option text color on hover           |
+
+For anything these do not cover, `styleToggle` sets inline styles on the group (including raw
+`--stuic-button-group-*` tokens) and wins over all of the above; `classToggle` adds classes.
+Note that `--stuic-button-group-*` set at `:root` does **not** reach the pricing toggle for the
+properties listed above — the component declares them on the element, so use the
+`--stuic-pricing-table-toggle-*` tokens instead.
 
 ### Typography
 

package/dist/components/PricingTable/index.css

@@ -17,6 +17,60 @@
 		width: 100%;
 	}
 
+	/* ============================================================================
+	   BILLING TOGGLE (an internal ButtonGroupRadio)
+
+	   The opinionated pill look lives here rather than in the component's inline
+	   `style` attribute, because an inline custom property declaration outranks any
+	   `:root` declaration for that element and its subtree -- which made the toggle
+	   the one part of this component a theme could not reach. Each value is a
+	   never-declared `--stuic-pricing-table-toggle-*` component token, so
+	   `:root { --stuic-pricing-table-toggle-radius: 0; }` works like every other
+	   token here. `styleToggle` still wins over all of it (inline).
+	   ============================================================================ */
+
+	.stuic-pricing-table-toggle {
+		/* hug the options instead of spanning the row (the group defaults to 100%) */
+		width: auto;
+
+		--stuic-button-group-radius: var(--stuic-pricing-table-toggle-radius, 9999px);
+		--stuic-button-group-padding-x: var(--stuic-pricing-table-toggle-padding-x, 0.25rem);
+		--stuic-button-group-padding-y: var(--stuic-pricing-table-toggle-padding-y, 0.25rem);
+		--stuic-button-group-bg: var(
+			--stuic-pricing-table-toggle-bg,
+			var(--stuic-color-muted)
+		);
+		--stuic-button-group-border-width: var(--stuic-pricing-table-toggle-border-width, 0);
+
+		/* Inactive option */
+		--stuic-button-group-button-text: var(
+			--stuic-pricing-table-toggle-color,
+			var(--stuic-color-muted-foreground)
+		);
+		--stuic-button-group-button-text-hover: var(
+			--stuic-pricing-table-toggle-color-hover,
+			var(--stuic-color-foreground)
+		);
+
+		/* Active option (hover falls back to the resting value = no hover shift) */
+		--stuic-button-group-button-bg-active: var(
+			--stuic-pricing-table-toggle-bg-active,
+			var(--stuic-color-background)
+		);
+		--stuic-button-group-button-text-active: var(
+			--stuic-pricing-table-toggle-color-active,
+			var(--stuic-color-foreground)
+		);
+		--stuic-button-group-button-bg-active-hover: var(
+			--stuic-pricing-table-toggle-bg-active-hover,
+			var(--stuic-pricing-table-toggle-bg-active, var(--stuic-color-background))
+		);
+		--stuic-button-group-button-text-active-hover: var(
+			--stuic-pricing-table-toggle-color-active-hover,
+			var(--stuic-pricing-table-toggle-color-active, var(--stuic-color-foreground))
+		);
+	}
+
 	/* ============================================================================
 	   TIERS GRID
 	   ============================================================================ */