contain-css-svelte 1.5.0 → 1.6.0

package/dist/controls/GroupedToggle.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, RADIUS_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+const GROUPED_TOGGLE_VARS = [
+    ...COLOR_VARS,
+    ...RADIUS_VARS,
+    ...TYPOGRAPHY_VARS,
+];
+let { children, class: className, role = "group", ...restProps } = $props();
+const el = $derived(elementProps(restProps, "grouped-toggle", [
+    ...GROUPED_TOGGLE_VARS,
+    "padding",
+    "width",
+    "height",
+]));
+</script>
+
+<div class={["grouped-toggle", className]} {role} {...el}>
+  {@render children?.()}
+</div>
+
+<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 */
+.grouped-toggle {
+  display: inline-flex;
+  align-items: stretch;
+  /* A grid or flex parent stretches a block-level item to fill its track
+     by default (DemoWithCode's own layout does exactly this) -- `inline-
+     flex` alone doesn't protect against that, since being a grid/flex
+     *item* is a separate question from this element's own `display`.
+     Without this, the row ends up wider than its children, which leaves
+     dead space after the last segment and strands the rounded corner out
+     past it, with the last segment itself still square. A segmented
+     control is sized to its content, like TabBar/a button group, not
+     full-bleed by default. */
+  width: fit-content;
+  border-radius: var(--grouped-toggle-border-radius, var(--border-radius, var(--border-radius, 4px)));
+  overflow: hidden;
+  border: var(--grouped-toggle-border, var(--border, 1px solid var(--border-color, rgba(127, 127, 127, 0.4))));
+}</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const GroupedToggle: import("svelte").Component<ContainProps<HTMLAttributes<HTMLDivElement>, {
+    children?: Snippet;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "borderRadius", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]>>, {}, "">;
+type GroupedToggle = ReturnType<typeof GroupedToggle>;
+export default GroupedToggle;

package/dist/controls/GroupedToggleItem.svelte

@@ -0,0 +1,452 @@
+<script lang="ts">import { elementProps } from "../util";
+import { COLOR_VARS, TYPOGRAPHY_VARS, } from "../styleProps";
+import Tooltip from "../overlays/Tooltip.svelte";
+/**
+ * One segment of a `GroupedToggle` row -- an independent boolean, not a
+ * mutually-exclusive choice. Several segments in the same row can be
+ * `checked` at once (that's the whole point: a thing can be filtered *and*
+ * grouped by at the same time), so this is built on the same semantics as
+ * `Checkbox`, not `RadioButton` -- it renders a real `aria-pressed` toggle
+ * button rather than a radio input, since there's no single form value
+ * being submitted here, just live UI state (the same reasoning a text
+ * editor's Bold/Italic/Underline toggle buttons use). For a mutually-
+ * exclusive row with the same look, use `GroupedRadioItem` instead -- the
+ * keyboard contract genuinely differs (roving-tabindex arrow-key
+ * navigation vs. each segment being its own Tab stop), so it's a separate
+ * component rather than a mode flag on this one.
+ */
+const GROUPED_TOGGLE_ITEM_VARS = [...COLOR_VARS, ...TYPOGRAPHY_VARS];
+let { checked = $bindable(false), disabled = false, disabledReason = "", children, class: className, onclick, ...restProps } = $props();
+const el = $derived(elementProps(restProps, "grouped-toggle-item", [
+    ...GROUPED_TOGGLE_ITEM_VARS,
+    "padding",
+    "width",
+    "height",
+    "checkedBg",
+    "checkedFg",
+]));
+const showTooltip = $derived(disabled && disabledReason.length > 0);
+/**
+ * A native `disabled` button can never receive focus, which would make a
+ * `disabledReason` tooltip -- documented above as shown "on hover/focus" --
+ * unreachable for keyboard users, exactly the audience an explained-disabled
+ * segment is for. So when there's a reason to show, this stays a real Tab
+ * stop with `aria-disabled` instead of `disabled`, and `handleClick` does
+ * the disabled-guarding the native attribute would otherwise have done.
+ * Plain `disabled` (no reason) keeps the native attribute -- nothing to
+ * read on focus, so there's no reason to pull it out of the Tab order.
+ */
+const useAriaDisabled = $derived(showTooltip);
+function handleClick(event) {
+    if (disabled)
+        return;
+    checked = !checked;
+    onclick?.(event);
+}
+</script>
+
+{#snippet toggleButton()}
+  <button
+    type="button"
+    class={["grouped-toggle-item", className]}
+    class:checked
+    disabled={disabled && !useAriaDisabled}
+    aria-disabled={useAriaDisabled ? "true" : undefined}
+    aria-pressed={checked}
+    onclick={handleClick}
+    {...el}
+  >
+    {@render children?.()}
+  </button>
+{/snippet}
+
+{#if showTooltip}
+  <Tooltip tooltipText={disabledReason}>
+    {@render toggleButton()}
+  </Tooltip>
+{:else}
+  {@render toggleButton()}
+{/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 */
+.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%`: a basis of 0 would force every segment to the
+     same final width regardless of label length, even in the ordinary
+     case where the row is exactly as wide as its content and there's
+     nothing extra to distribute. `auto` only starts sharing out space
+     once the row is wider than its segments' own content -- a consumer
+     overriding the width on GroupedToggle -- so "Light" and "Earthtones"
+     keep their natural proportions unless something is actually stretching
+     the row. */
+  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` -- both invisible to layout, neither invisible to
+   :first-child/:last-child, which match the real DOM tree regardless of
+   display. Every branch below requires `.grouped-toggle` itself as the
+   ancestor whose first/last-ness is actually being tested (via
+   `:global(.grouped-toggle) >`), not just 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 (e.g. a disabled *last* item would
+   wrongly lose its divider, thinking it was first). */
+: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, not just relied on via the parent's
+   `overflow: hidden` clip -- that clip only rounds whatever happens to sit
+   flush against the parent's true edge, and a parent that ends up wider
+   than its content (a grid/flex ancestor stretching it, before the
+   `width: fit-content` fix on GroupedToggle) left the last segment
+   stranded short of that edge, still square. Explicit corner radii here
+   hold regardless of how wide the parent ends up.
+   Same --grouped-toggle-border-radius GroupedToggle itself reads: custom
+   properties inherit, so a value set on the wrapper (default or
+   overridden via its `borderRadius` prop) resolves identically here. */
+: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))));
+}
+
+.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/GroupedToggleItem.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { BaseStyleProps, ContainProps } from "../types";
+import { type StyleProps } from "../styleProps";
+declare const GroupedToggleItem: import("svelte").Component<ContainProps<HTMLButtonAttributes, {
+    /** Two-way bindable, like `Toggle`/`Checkbox` -- unlike `TabItem`'s
+     *  `active`, this segment's checked-ness is its own independent fact,
+     *  not something computed by comparing against sibling state, so
+     *  `bind:checked` is the natural fit rather than a manual
+     *  `checked={} onclick={}` pair. A consumer can still pass `onclick`
+     *  for a side effect (analytics, closing a menu, ...); it fires after
+     *  the internal toggle, same order `bind:checked` + `onchange`
+     *  compose on a native input. */
+    checked?: boolean;
+    disabled?: boolean;
+    /** Shown in a tooltip on hover/focus when disabled, instead of the
+     *  segment just silently doing nothing -- e.g. "This can't be grouped
+     *  by; it has no performance bands." A disabled segment with no reason
+     *  given just stays inert, same as a native disabled control. */
+    disabledReason?: string;
+    children?: Snippet;
+}, BaseStyleProps & StyleProps<readonly ["bg", "fg", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "textTransform", "textDecoration", "fontVariant"]> & {
+    /** Override just the checked-state fill/text colour, independent of
+     *  the unchecked styling above -- this is what lets three instances
+     *  in the same row (e.g. Filter / Group / Show) each have their own
+     *  checked colour while sharing one unchecked appearance. */
+    checkedBg?: string | null;
+    checkedFg?: string | null;
+}, "aria-pressed" | "type">, {}, "checked">;
+type GroupedToggleItem = ReturnType<typeof GroupedToggleItem>;
+export default GroupedToggleItem;