contain-css-svelte 1.4.3 → 1.6.0

package/dist/controls/GroupedRadioItem.svelte

@@ -0,0 +1,551 @@
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+import Tooltip from "../overlays/Tooltip.svelte";
+/**
+ * One segment of a single-select `GroupedToggle` row -- the exclusive-
+ * choice sibling of `GroupedToggleItem`. Visually identical (same CSS
+ * classes), but a different behavioural contract: exactly one segment in
+ * the row is ever checked, and that's the ARIA "radiogroup" pattern, not a
+ * row of independent buttons -- which means real roving-tabindex keyboard
+ * support (Left/Right moves *and changes* the selection; only the checked
+ * segment is a normal Tab stop), not just different styling. That's the
+ * reason this is its own component rather than a mode flag on
+ * `GroupedToggleItem`: the keyboard contract is genuinely different, and a
+ * flag that silently swaps it would be easy to get wrong.
+ *
+ * Wrap these in `<GroupedToggle role="radiogroup">` -- `GroupedToggle`
+ * itself carries no selection logic (same as `TabBar`), so the `role`
+ * override is what tells assistive tech this row is exclusive-choice.
+ */
+const GROUPED_RADIO_ITEM_VARS = [...COLOR_VARS, ...TYPOGRAPHY_VARS];
+let { checked = false, value = undefined, group = $bindable(undefined), disabled = false, disabledReason = "", children, class: className, onclick, ...restProps } = $props();
+const useGroup = $derived(group !== undefined && value !== undefined);
+const isChecked = $derived(useGroup ? group === value : checked);
+const showTooltip = $derived(disabled && disabledReason.length > 0);
+/** See GroupedToggleItem's identical flag: a native `disabled` button can
+ *  never be focused, which would make a `disabledReason` tooltip --
+ *  documented above as shown "on hover/focus" -- unreachable by keyboard.
+ *  `aria-disabled` keeps it a real Tab stop instead; `handleClick` and
+ *  `handleKeydown` do the disabled-guarding the native attribute would
+ *  otherwise have done. */
+const useAriaDisabled = $derived(showTooltip);
+function handleClick(event) {
+    if (disabled)
+        return;
+    if (useGroup)
+        group = value;
+    onclick?.(event);
+}
+const el = $derived(elementProps(restProps, "grouped-toggle-item", [
+    ...GROUPED_RADIO_ITEM_VARS,
+    "padding",
+    "width",
+    "height",
+    "checkedBg",
+    "checkedFg",
+]));
+let ref = $state();
+/**
+ * Roving tabindex + arrow-key selection, per the WAI-ARIA radiogroup
+ * pattern: the group is one Tab stop (only the checked segment has
+ * tabindex 0), and arrow keys both move focus *and* pick the new segment --
+ * unlike a checkbox row, where arrow keys do nothing special and every
+ * segment is its own Tab stop.
+ *
+ * This walks DOM siblings rather than coordinating through Svelte state:
+ * `GroupedToggle` carries no selection state, so there's nothing here to
+ * subscribe to -- finding the next `[role="radio"]` sibling and clicking it
+ * reuses the exact same `onclick` the consumer already wires for pointer
+ * selection, rather than inventing a second code path for keyboard
+ * selection.
+ */
+function handleKeydown(event) {
+    const forward = event.key === "ArrowRight" || event.key === "ArrowDown";
+    const backward = event.key === "ArrowLeft" || event.key === "ArrowUp";
+    const home = event.key === "Home";
+    const end = event.key === "End";
+    if (!forward && !backward && !home && !end)
+        return;
+    if (!ref)
+        return;
+    event.preventDefault();
+    const groupEl = ref.closest('[role="radiogroup"]');
+    if (!groupEl)
+        return;
+    // Only truly-native-disabled segments (no `disabledReason`, so nothing
+    // to explain) are excluded from arrow-key travel -- an `aria-disabled`
+    // segment stays reachable so its tooltip is actually discoverable by
+    // keyboard, same as GroupedToggleItem. `handleClick`'s `if (disabled)
+    // return` already stops arrow-navigating onto one from selecting it.
+    const radios = Array.from(groupEl.querySelectorAll('[role="radio"]:not(:disabled)'));
+    if (radios.length === 0)
+        return;
+    let nextIndex;
+    if (home) {
+        nextIndex = 0;
+    }
+    else if (end) {
+        nextIndex = radios.length - 1;
+    }
+    else {
+        const index = radios.indexOf(ref);
+        if (index === -1)
+            return;
+        nextIndex = forward
+            ? (index + 1) % radios.length
+            : (index - 1 + radios.length) % radios.length;
+    }
+    radios[nextIndex].focus();
+    radios[nextIndex].click();
+}
+/**
+ * Which segment owns the group's single Tab stop. Normally that's whichever
+ * enabled segment is checked -- but if the checked value is disabled (or
+ * nothing is checked yet), roving tabindex has to fall back to SOME enabled
+ * segment, or the whole group becomes unreachable by Tab. Per the WAI-ARIA
+ * radiogroup pattern, that fallback is the first enabled segment.
+ *
+ * This can't be a pure `$derived` of this item's own props: "is any enabled
+ * sibling checked" isn't something this component has a reactive reference
+ * to (`GroupedToggle` carries no shared selection state, same reasoning as
+ * `handleKeydown` above), so it's recomputed from the live DOM whenever
+ * this item's own checked/disabled state -- or, via the shared `group`
+ * bindable, a sibling's -- changes.
+ */
+let isTabStop = $state(false);
+$effect(() => {
+    isChecked;
+    disabled;
+    group;
+    if (!ref)
+        return;
+    const groupEl = ref.closest('[role="radiogroup"]');
+    if (!groupEl) {
+        isTabStop = isChecked && !disabled;
+        return;
+    }
+    const radios = Array.from(groupEl.querySelectorAll('[role="radio"]'));
+    const enabled = radios.filter((radio) => !radio.disabled && radio.getAttribute("aria-disabled") !== "true");
+    const anEnabledSiblingIsChecked = enabled.some((radio) => radio.getAttribute("aria-checked") === "true");
+    isTabStop = anEnabledSiblingIsChecked
+        ? isChecked && !disabled
+        : enabled[0] === ref;
+});
+</script>
+
+{#snippet radioButton()}
+  <button
+    bind:this={ref}
+    type="button"
+    class={["grouped-toggle-item", className]}
+    class:checked={isChecked}
+    disabled={disabled && !useAriaDisabled}
+    aria-disabled={useAriaDisabled ? "true" : undefined}
+    role="radio"
+    aria-checked={isChecked}
+    tabindex={isTabStop ? 0 : -1}
+    onclick={handleClick}
+    onkeydown={handleKeydown}
+    {...el}
+  >
+    {@render children?.()}
+  </button>
+{/snippet}
+
+{#if showTooltip}
+  <Tooltip tooltipText={disabledReason}>
+    {@render radioButton()}
+  </Tooltip>
+{:else}
+  {@render radioButton()}
+{/if}
+
+<style>/* Per-level heading (h1-h6) box/typography properties, resolved to PRIVATE,
+   inheriting custom properties (--_h1-color, --_h2-font-size, etc) rather than
+   assigned directly to a matched h1-h6 selector. Nothing in this file matches
+   an actual heading element anymore -- see typography-context.css (vars/), which
+   is the single, global, :where()-scoped rule that actually reads these vars
+   and applies them to real elements. That split is what lets a component
+   nested arbitrarily deep (through <article>, <Tile>, whatever) still get the
+   nearest ancestor's heading styling: these are ordinary inherited custom
+   properties, so DOM proximity decides which component's values apply, not
+   selector specificity or stylesheet order. See AGENTS-INTERNAL.md. */
+/* All six heading levels' context vars in one call -- what every
+   "typography container" component (Container, Card, Tile, TextLayout, ...)
+   includes on itself once, alongside the shared --_heading-* vars below. */
+/* Shared prose-measure group: p, blockquote, dl, ul, ol. li/dt/dd don't get
+   their own vars -- they're never wider than their ul/ol/dl parent's own
+   max-width box, so they're already bounded for free by ordinary block
+   layout, not by anything selector-based reaching them individually. */
+/* p specifically also gets the fuller typography-props-bare treatment
+   (paragraph-prefixed), which -- same as in the original selector-based
+   version -- is declared/consumed AFTER the shared prose vars above, so it
+   wins for whichever properties both groups set. */
+/* The first paragraph in a typography context (p:first-of-type, or a p right
+   after a heading) gets its own, slightly different treatment -- larger lede
+   text, no top margin. Structural matching (:first-of-type, `h1 + p`) still
+   has to happen where the real element is, in the global consumer rule; only
+   the VALUES move to context vars here. */
+/* Text reset for an overlay's root element: a tooltip, popover menu or dialog
+   that sits in the DOM wherever its trigger was placed.
+
+   The top layer changes how an element paints and where it is positioned, not
+   what it inherits. A popover declared inside a `white-space: nowrap` table
+   cell is nowrap too, and one inside a bold, uppercase, centred header is
+   bold, uppercase and centred -- styles that belong to the trigger's context,
+   not to the overlay. typography-props() doesn't stop that: its chains end in
+   `unset`, which for an inherited property means "take the parent's value".
+
+   So this re-declares every inherited text property with a real default at
+   the end of the same variable chain. The vars still win (--tooltip-*, then
+   the category, then the global), and custom properties still inherit --
+   that is how theming reaches an overlay -- but when nothing is set, the
+   overlay gets its own defaults instead of its host's.
+
+   INCLUDE IT AFTER typography-props() / typography-container-props() in the
+   same rule: it has to beat their `unset` fallbacks by source order.
+
+   Deliberately left inheriting:
+   - direction, writing-mode: the document's script direction is the
+     overlay's too.
+   - visibility: a hidden subtree should not be able to show an overlay.
+   - font-family: every theme defines --font-family at :root, and there is no
+     neutral value to fall back to that would beat "the page's font". */
+/* Logical, not top/bottom/left/right: margin-block/margin-inline already take
+   one value (both sides equal) or two (start end), so there is no separate
+   "which side" prop to remember and no 4-value shorthand order to get wrong.
+   Defaults to 0 on purpose -- unlike padding-props above, a margin that
+   appeared by default on every consumer would be a silent layout change the
+   day this mixin got added to a new component. Callers opt in with an actual
+   value. (Container does not use this mixin: it wants --gap/auto as its
+   defaults, which do not fit the "0 unless asked" contract here.) */
+/* The width at or below which a Sidebar swaps its grab-bar rail for the sheet
+   affordance -- a floating button that opens a panel over the content.
+
+   Page has to agree with Sidebar about this, because Page is what floats the
+   aside out of flow and reserves the strip of padding the sheet button sits
+   in. They used to disagree: Sidebar switched at 512px and Page at 600px,
+   which left a band between 513 and 600 where Page had already lifted the
+   aside out of the layout while the Sidebar inside it was still showing a
+   rail -- a grab bar floating on top of the content, which is the affordance
+   we deliberately avoid everywhere else.
+
+   One definition, used by both, so they cannot drift again. */
+/* The "small" size tier: a component whose container is this wide or less
+   is on a phone, or in a pane about that narrow, and sizes itself for it.
+
+   The convention, shared by every component that has a size worth changing
+   there (Card started it; Tile, GridLayout, Bar and Container follow):
+
+     --{component}-{property}-small
+
+   applies inside a small container. What wins there, in order:
+     1. the `-small` variable, if you set it;
+     2. otherwise the regular variable, if you set it -- a size you chose on
+        purpose is not overridden behind your back;
+     3. otherwise the component's own small default, which for most
+        properties is simply its regular default.
+
+   Container queries can't read a custom property, so the breakpoint itself
+   is fixed here rather than themeable. 600px matches Card and SplitPane,
+   which already switched there. (The Sidebar's rail-to-sheet switch,
+   above, is a separate, layout-chrome decision and keeps its own value.) */
+/* Styles for the small tier: the nearest container is narrow, OR the
+   viewport is.
+
+   The container query is the real answer -- a Tile in a 400px pane on a
+   desktop is small. But a container query only matches inside an ancestor
+   that *is* a container, and a component dropped straight into a page (no
+   Page, no Container around it) has none, so on a phone it would never
+   find out. The viewport query covers that: a narrow viewport means every
+   container in it is narrow too, so the two never disagree in the
+   direction that matters.
+
+   An element never queries itself, so on a component that is its own
+   container (Tile, Bar) this asks about the space it was given. */
+/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+/* Same visual language as GroupedToggleItem -- these sit in the same
+   GroupedToggle row and should be indistinguishable by eye; only the
+   role/keyboard contract differs. Duplicated rather than shared via a
+   common class, matching this library's existing pattern of each
+   component owning its own scoped styles (see Checkbox vs Toggle). */
+.grouped-toggle-item {
+  --link-bg: var(--grouped-toggle-item-link-bg, var(--control-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--grouped-toggle-item-link-fg, var(--control-link-fg, var(--secondary-link-fg, inherit)));
+  --_bg-mix-color: var(--grouped-toggle-item-bg-mix-color, var(--control-bg-mix-color, var(--secondary-bg-mix-color, var(--bg-mix-color, transparent))));
+  --_bg-mix-amount: var(--grouped-toggle-item-bg-mix-amount, var(--control-bg-mix-amount, var(--secondary-bg-mix-amount, var(--bg-mix-amount, 0%))));
+  --_fg-mix-color: var(--grouped-toggle-item-fg-mix-color, var(--control-fg-mix-color, var(--secondary-fg-mix-color, var(--fg-mix-color, transparent))));
+  --_fg-mix-amount: var(--grouped-toggle-item-fg-mix-amount, var(--control-fg-mix-amount, var(--secondary-fg-mix-amount, var(--fg-mix-amount, 0%))));
+  --_bg-base: var(--grouped-toggle-item-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
+  --_fg-base: var(--grouped-toggle-item-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(
+    in srgb,
+    var(--_fg-base),
+    var(--_fg-mix-color) var(--_fg-mix-amount)
+  );
+  --muted-color: var(--muted-color-override, var(--_background-color));
+  --primary-text-fg: var(
+    --primary-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--primary-color)
+        var(--primary-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --secondary-text-fg: var(
+    --secondary-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--secondary-color)
+        var(--secondary-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --info-text-fg: var(
+    --info-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--info-color)
+        var(--info-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --success-text-fg: var(
+    --success-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--success-color)
+        var(--success-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --warning-text-fg: var(
+    --warning-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--warning-color)
+        var(--warning-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --danger-text-fg: var(
+    --danger-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--danger-color)
+        var(--danger-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --muted-text-fg: var(
+    --muted-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--muted-color)
+        var(--muted-text-amount, var(--text-amount, 50%))
+    )
+  );
+  background-color: var(--_background-color);
+  color: var(--_color);
+  font-family: var(--grouped-toggle-item-font-family, var(--control-font-family, inherit));
+  text-transform: var(--grouped-toggle-item-text-transform, var(--control-text-transform, inherit));
+  text-decoration: var(--grouped-toggle-item-text-decoration, var(--control-text-decoration, inherit));
+  --_font-size: var(--grouped-toggle-item-font-size, var(--control-font-size, inherit));
+  font-size: var(--_font-size);
+  font-weight: var(--grouped-toggle-item-font-weight, var(--control-font-weight, inherit));
+  line-height: var(--grouped-toggle-item-line-height, var(--control-line-height, inherit));
+  letter-spacing: var(--grouped-toggle-item-letter-spacing, var(--control-letter-spacing, inherit));
+  text-indent: var(--grouped-toggle-item-indent, var(--control-indent, inherit));
+  font-variant: var(--grouped-toggle-item-font-variant, var(--control-font-variant, inherit));
+  text-align: var(--grouped-toggle-item-text-align, var(--control-text-align, inherit));
+  cursor: var(--grouped-toggle-item-cursor, var(--clickable-cursor, var(--cursor, pointer)));
+  /* `.grouped-toggle` clips overflow (same reason TabBar does for
+     TabItem), so the standard outer `focusable()` ring gets cut off,
+     worst on the rounded first/last segments -- an inset ring stays
+     inside the clip instead. */
+}
+
+.grouped-toggle-item:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-inset-outline-offset, -3px);
+}
+
+.grouped-toggle-item {
+  border: none;
+  border-inline-start: var(--grouped-toggle-divider, var(--grouped-toggle-item-divider, var(--divider, 1px solid var(--border-color, rgba(127, 127, 127, 0.4)))));
+  margin: 0;
+  padding: var(--grouped-toggle-item-padding, var(--padding, 0.35em 0.75em));
+  min-width: 2em;
+  /* `auto` basis, not `0%` -- see GroupedToggleItem's identical rule: only
+     shares out extra space once the row is wider than its segments' own
+     content, so labels of different lengths keep their natural
+     proportions in the ordinary (unstretched) case. */
+  flex: 1 1 auto;
+  transition: filter var(--grouped-toggle-item-transition, var(--clickable-transition, var(--control-transition, var(--120ms ease-transition, var(--transition, 300ms))))), background-color var(--grouped-toggle-item-transition, var(--clickable-transition, var(--control-transition, var(--120ms ease-transition, var(--transition, 300ms))))), border-color var(--grouped-toggle-item-transition, var(--clickable-transition, var(--control-transition, var(--120ms ease-transition, var(--transition, 300ms))))), box-shadow var(--grouped-toggle-item-transition, var(--clickable-transition, var(--control-transition, var(--120ms ease-transition, var(--transition, 300ms))))), transform var(--grouped-toggle-item-transition, var(--clickable-transition, var(--control-transition, var(--120ms ease-transition, var(--transition, 300ms)))));
+}
+
+/* A disabled segment with a `disabledReason` wraps in <Tooltip>, which
+   inserts not one but TWO boxless (display: contents) layers between this
+   button and GroupedToggle in the DOM -- `.tooltip-wrapper` and, inside
+   it, `.tooltip-target`. See GroupedToggleItem's identical rule for why
+   every branch requires `.grouped-toggle` itself as the ancestor whose
+   first/last-ness is actually being tested, drilling through both
+   wrapper layers, rather than bare `:first-child`/`:last-child` on the
+   button -- a wrapped item is always the only child of its own
+   tooltip-target, so an unscoped selector would match it regardless of
+   its true row position. */
+:global(.grouped-toggle) > .grouped-toggle-item:first-child,
+:global(.grouped-toggle) > :global(.tooltip-wrapper):first-child > :global(.tooltip-target) > .grouped-toggle-item {
+  border-inline-start: none;
+}
+
+/* Rounded on the item itself -- see GroupedToggleItem's identical rule for
+   why relying solely on the parent's overflow:hidden clip isn't enough. */
+:global(.grouped-toggle) > .grouped-toggle-item:first-child,
+:global(.grouped-toggle) > :global(.tooltip-wrapper):first-child > :global(.tooltip-target) > .grouped-toggle-item {
+  border-start-start-radius: var(--grouped-toggle-border-radius, var(--border-radius, var(--border-radius, 4px)));
+  border-end-start-radius: var(--grouped-toggle-border-radius, var(--border-radius, var(--border-radius, 4px)));
+}
+
+:global(.grouped-toggle) > .grouped-toggle-item:last-child,
+:global(.grouped-toggle) > :global(.tooltip-wrapper):last-child > :global(.tooltip-target) > .grouped-toggle-item {
+  border-start-end-radius: var(--grouped-toggle-border-radius, var(--border-radius, var(--border-radius, 4px)));
+  border-end-end-radius: var(--grouped-toggle-border-radius, var(--border-radius, var(--border-radius, 4px)));
+}
+
+.grouped-toggle-item:hover:not(:disabled):not([aria-disabled=true]) {
+  filter: var(--grouped-toggle-item-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
+  transform: var(--grouped-toggle-item-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
+  color: var(--_color);
+  background-color: color-mix(in oklab, var(--_background-color) var(--hover-base-color-percentage, 90%), var(--hover-color-mix, var(--_color, white)) calc(100% - var(--hover-base-color-percentage, 90%)));
+  box-shadow: var(--grouped-toggle-item-hover-box-shadow, var(--clickable-hover-box-shadow, var(--hover-box-shadow, var(--_box-shadow, none))));
+}
+
+.grouped-toggle-item:active:not(:disabled):not([aria-disabled=true]) {
+  filter: var(--grouped-toggle-item-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
+  transform: var(--grouped-toggle-item-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
+  background-color: color-mix(in oklab, var(--_background-color) var(--active-base-color-percentage, 90%), var(--active-color-mix, black) calc(100% - var(--active-base-color-percentage, 90%)));
+  box-shadow: var(--grouped-toggle-item-active-box-shadow, var(--clickable-active-box-shadow, var(--active-box-shadow, var(--_box-shadow, none))));
+}
+
+/* Tinted toward the selection accent rather than the plain neutral ring
+   GroupedToggleItem uses -- arrow-key roving only ever lands on ONE
+   segment at a time here, so the ring doubles as "this is the choice
+   you're navigating," not just "this element has focus" the way an
+   independent toggle's ring does. `--primary-bg` has to come BEFORE the
+   generic `--focus-color` in the fallback chain, not after -- every theme
+   in this library sets `--focus-color` globally, so putting it first (as
+   `var-with-fallbacks` would, threading one base var through prefixes)
+   makes it win outright and this ring would end up identical to
+   GroupedToggleItem's. `--grouped-radio-item-focus-color` stays
+   overridable like every other color here; it just defaults to the accent
+   instead of the generic focus color. */
+.grouped-toggle-item:focus-visible {
+  outline-color: var(--grouped-radio-item-focus-color, var(--primary-bg, var(--focus-color, -webkit-focus-ring-color)));
+}
+
+.grouped-toggle-item.checked {
+  --link-bg: var(--grouped-toggle-item-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--grouped-toggle-item-link-bg, inherit))));
+  --link-fg: var(--grouped-toggle-item-checked-link-fg, var(--toggle-on-link-fg, var(--primary-link-fg, var(--grouped-toggle-item-link-fg, inherit))));
+  --_bg-mix-color: var(--grouped-toggle-item-checked-bg-mix-color, var(--toggle-on-bg-mix-color, var(--primary-bg-mix-color, var(--grouped-toggle-item-bg-mix-color, var(--bg-mix-color, transparent)))));
+  --_bg-mix-amount: var(--grouped-toggle-item-checked-bg-mix-amount, var(--toggle-on-bg-mix-amount, var(--primary-bg-mix-amount, var(--grouped-toggle-item-bg-mix-amount, var(--bg-mix-amount, 0%)))));
+  --_fg-mix-color: var(--grouped-toggle-item-checked-fg-mix-color, var(--toggle-on-fg-mix-color, var(--primary-fg-mix-color, var(--grouped-toggle-item-fg-mix-color, var(--fg-mix-color, transparent)))));
+  --_fg-mix-amount: var(--grouped-toggle-item-checked-fg-mix-amount, var(--toggle-on-fg-mix-amount, var(--primary-fg-mix-amount, var(--grouped-toggle-item-fg-mix-amount, var(--fg-mix-amount, 0%)))));
+  --_bg-base: var(--grouped-toggle-item-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--grouped-toggle-item-bg, var(--bg, unset)))));
+  --_fg-base: var(--grouped-toggle-item-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--grouped-toggle-item-fg, var(--fg, unset)))));
+  --_background-color: color-mix(
+    in srgb,
+    var(--_bg-base),
+    var(--_bg-mix-color) var(--_bg-mix-amount)
+  );
+  --_color: color-mix(
+    in srgb,
+    var(--_fg-base),
+    var(--_fg-mix-color) var(--_fg-mix-amount)
+  );
+  --muted-color: var(--muted-color-override, var(--_background-color));
+  --primary-text-fg: var(
+    --primary-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--primary-color)
+        var(--primary-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --secondary-text-fg: var(
+    --secondary-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--secondary-color)
+        var(--secondary-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --info-text-fg: var(
+    --info-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--info-color)
+        var(--info-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --success-text-fg: var(
+    --success-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--success-color)
+        var(--success-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --warning-text-fg: var(
+    --warning-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--warning-color)
+        var(--warning-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --danger-text-fg: var(
+    --danger-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--danger-color)
+        var(--danger-text-amount, var(--text-amount, 50%))
+    )
+  );
+  --muted-text-fg: var(
+    --muted-text-fg-override,
+    color-mix(
+      in srgb,
+      var(--_color),
+      var(--muted-color)
+        var(--muted-text-amount, var(--text-amount, 50%))
+    )
+  );
+  background-color: var(--_background-color);
+  color: var(--_color);
+}
+
+.grouped-toggle-item:disabled,
+.grouped-toggle-item[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: var(--grouped-toggle-item-disabled-opacity, 0.5);
+}</style>

package/dist/controls/GroupedRadioItem.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const GroupedRadioItem: import("svelte").Component<ContainProps<HTMLButtonAttributes, {
+    /**
+     * Two ways to drive this, matching `Checkbox`'s own `group`/`value`
+     * pair exactly -- just singular instead of an array, which is the
+     * whole difference between a radio and a checkbox:
+     *
+     * 1. **`bind:group` + `value`** (preferred): every item in the row
+     *    binds to the *same* `group` variable; this one computes its own
+     *    `checked` as `group === value` and clicking it sets
+     *    `group = value` directly. One variable for the whole row, no
+     *    manual comparison to write.
+     * 2. **Explicit `checked` + `onclick`**: for when the "selected" fact
+     *    lives somewhere this component shouldn't own (e.g. it's derived
+     *    from a prop one level up). Deliberately NOT `bind:checked` the way
+     *    `GroupedToggleItem` is -- a single radio's checked-ness is
+     *    relational ("am I the one that matches"), not an independent
+     *    fact, so bindable here would let two siblings each think they're
+     *    independently true with nothing enforcing exclusivity. Same
+     *    reasoning as `TabItem`'s `active`.
+     */
+    checked?: boolean;
+    value?: unknown;
+    group?: unknown;
+    disabled?: boolean;
+    disabledReason?: string;
+    children?: Snippet;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]> & {
+    checkedBg?: string | null;
+    checkedFg?: string | null;
+}, "tabindex" | "role" | "aria-checked" | "onkeydown" | "type">, {}, "group">;
+type GroupedRadioItem = ReturnType<typeof GroupedRadioItem>;
+export default GroupedRadioItem;