@rio-m3e/core 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,3 +1,36 @@
+/**
+ * The attributes of one part of a component's markup, in HTML form: names as HTML spells them
+ * (`class`, `aria-pressed`, `data-size`) and string values, with `undefined` leaving an attribute
+ * out. Each component's `parts` returns one of these per part. See "Core output" in
+ * `docs/conventions.md`.
+ */
+export type PartAttrs = Record<string, string | undefined>;
+/**
+ * One node of a component's skeleton: the markup an adapter renders, part by part. Adapters
+ * render it their own way; contract tests check what they rendered against it. Each component
+ * exports its skeleton (`buttonSkeleton`, `switchSkeleton`, ...).
+ *
+ * `Part` narrows the names to the component's parts, so a typo fails the build. `When` lists the
+ * decisions the skeleton may use; leave it out when every part always renders. Skeletons are
+ * shared objects, so everything is read-only.
+ */
+export interface PartNode<Part extends string = string, When extends string = never> {
+  /** The part, named as in the component's `parts`. */
+  readonly part: Part;
+  /** The element the part is, as `tagName` in lower case. */
+  readonly tag: keyof HTMLElementTagNameMap;
+  /**
+   * The component API's decision that says whether the part renders, such as `'showsIcon'`.
+   * Without it, the part always renders.
+   */
+  readonly when?: When;
+  /**
+   * Content from the app (slots, children) goes inside. The content itself isn't checked against
+   * the skeleton; where a component picks between contents, its contract test checks the pick.
+   */
+  readonly content?: true;
+  readonly children?: readonly PartNode<Part, When>[];
+}
 export declare const BUTTON_VARIANTS: readonly ["filled", "tonal", "outlined", "elevated", "text"];
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
 /** M3E button sizes. `small` is the default. */
@@ -28,6 +61,11 @@ export interface ButtonProps {
   softDisabled?: boolean;
   /** Defaults to `'button'`, so a button inside a form doesn't submit it by accident. */
   type?: 'button' | 'submit' | 'reset';
+  /**
+   * Identifies the button inside a button group that keeps a selection. Such a group makes the
+   * button a toggle and decides whether it is selected.
+   */
+  value?: ButtonGroupValue;
 }
 export declare const buttonDefaults: {
   variant: "filled";
@@ -39,20 +77,121 @@ export declare const buttonDefaults: {
   softDisabled: false;
   type: "button";
 };
+/** What the adapter has to put in the button, which only the adapter can see. */
+export interface ButtonContent {
+  /** Whether there is a leading icon. */
+  icon: boolean;
+}
 export interface ButtonOptions {
   /** Returns the current prop values. The adapter owns the state. */
   props: () => ButtonProps;
+  /** Returns what content the adapter has. Without it, the button has no icon. */
+  content?: () => ButtonContent;
   /** Called for a click that isn't blocked. */
   onClick: (event: MouseEvent) => void;
-  /** Called after an unblocked click on a toggle button, with the new value. */
-  onSelectedChange: (selected: boolean) => void;
+  /** Called after an unblocked click on a toggle button, with the requested value. */
+  onChange: (selected: boolean) => void;
 }
+/**
+ * The button's markup, part by part. `buttonSkeleton` says how the adapter nests them.
+ */
+export interface ButtonParts {
+  root: () => PartAttrs;
+  /** Extends small buttons to the 48px target. */
+  touch: () => PartAttrs;
+  icon: () => PartAttrs;
+  label: () => PartAttrs;
+}
+/** How the adapter renders the button's parts. The icon holds the leading icon. */
+export declare const buttonSkeleton: PartNode<keyof ButtonParts, 'showsIcon'>;
 export interface ButtonApi {
-  rootAttrs: () => Record<string, string | undefined>;
+  parts: ButtonParts;
+  /** Whether to render the icon part. */
+  showsIcon: () => boolean;
   /** Attach to the root element's `click`. */
   handleClick: (event: MouseEvent) => void;
 }
 export declare function createButton(options: ButtonOptions): ButtonApi;
+/**
+ * M3E button group variants. A standard group spaces its buttons and lets a pressed button push
+ * its neighbors; a connected group joins them with 2px gaps and shared corners, and fills the
+ * width it is given.
+ */
+export declare const BUTTON_GROUP_VARIANTS: readonly ["standard", "connected"];
+export type ButtonGroupVariant = (typeof BUTTON_GROUP_VARIANTS)[number];
+/** Whether the group's buttons can be selected: none, one at a time, or any number. */
+export declare const BUTTON_GROUP_SELECTIONS: readonly ["none", "single", "multiple"];
+export type ButtonGroupSelection = (typeof BUTTON_GROUP_SELECTIONS)[number];
+/** Identifies a button inside a selecting group, through its `value` prop. */
+export type ButtonGroupValue = string | number;
+/** The selected value for `single` (or `undefined`), or the selected values for `multiple`. */
+export type ButtonGroupSelected = ButtonGroupValue | ButtonGroupValue[] | undefined;
+export interface ButtonGroupProps {
+  /** Defaults to `'standard'`. */
+  variant?: ButtonGroupVariant;
+  /** The size of every button in the group that doesn't set its own. Defaults to `'small'`. */
+  size?: ButtonSize;
+  /** The shape of every button in the group that doesn't set its own. Defaults to `'round'`. */
+  shape?: ButtonShape;
+  /**
+   * Turns buttons that have a `value` into toggle buttons whose selection the group keeps.
+   * Defaults to `'none'`, where every button acts on its own.
+   */
+  selection?: ButtonGroupSelection;
+  /** With a selection, keeps at least one button selected: the last one can't be turned off. */
+  required?: boolean;
+  /** The selected value (`single`) or values (`multiple`). */
+  selected?: ButtonGroupSelected;
+}
+export declare const buttonGroupDefaults: {
+  variant: "standard";
+  size: "small";
+  shape: "round";
+  selection: "none";
+  required: false;
+};
+export interface ButtonGroupOptions {
+  /** Returns the current prop values. The adapter owns the state. */
+  props: () => ButtonGroupProps;
+  /** Called with the requested selection. Adapters wire it to v-model, a callback prop, and so on. */
+  onChange: (selected: ButtonGroupSelected) => void;
+}
+/**
+ * The button group's markup. `buttonGroupSkeleton` says how the adapter renders it.
+ */
+export interface ButtonGroupParts {
+  root: () => PartAttrs;
+}
+/** How the adapter renders the button group: one root, with the buttons as its direct children. */
+export declare const buttonGroupSkeleton: PartNode<keyof ButtonGroupParts>;
+export interface ButtonGroupApi {
+  parts: ButtonGroupParts;
+  /** The size for buttons that don't set their own, with the default filled in. */
+  size: () => ButtonSize;
+  /** The shape for buttons that don't set their own, with the default filled in. */
+  shape: () => ButtonShape;
+  /** The selection mode, with the default filled in. */
+  selection: () => ButtonGroupSelection;
+  /** Whether the button with this value is selected. */
+  isSelected: (value: ButtonGroupValue) => boolean;
+  /**
+   * Requests turning the button with this value on or off. The group applies its selection rules:
+   * a single selection turns the previous button off, and `required` keeps the last one on.
+   */
+  select: (value: ButtonGroupValue, selected: boolean) => void;
+}
+export declare function createButtonGroup(options: ButtonGroupOptions): ButtonGroupApi;
+export interface ButtonGroupInteractionOptions {
+  /**
+   * How much wider a pressed button gets, as a share of its width. Each neighbor gives up at most
+   * the same share of its own width. Defaults to 0.15, the spec's 15%.
+   */
+  pressedWidthRatio?: number;
+}
+export interface ButtonGroupHandle {
+  detach(): void;
+}
+export declare function attachButtonGroup(root: HTMLElement, options?: ButtonGroupInteractionOptions): ButtonGroupHandle;
 export declare const ICON_BUTTON_VARIANTS: readonly ["filled", "tonal", "outlined", "standard"];
 export type IconButtonVariant = (typeof ICON_BUTTON_VARIANTS)[number];
 /** M3E icon button widths. `default` makes a square (or circle) as wide as it is tall. */
@@ -82,6 +221,8 @@ export interface IconButtonProps {
   softDisabled?: boolean;
   /** Defaults to `'button'`, so it doesn't submit a form by accident. */
   type?: 'button' | 'submit' | 'reset';
+  /** Identifies the button inside a button group that keeps a selection, as on the button. */
+  value?: ButtonGroupValue;
 }
 export declare const iconButtonDefaults: {
   variant: "filled";
@@ -94,15 +235,43 @@ export declare const iconButtonDefaults: {
   softDisabled: false;
   type: "button";
 };
+/** What the adapter has to put in the icon button, which only the adapter can see. */
+export interface IconButtonContent {
+  /** Whether there is an icon for the selected state. */
+  selectedIcon: boolean;
+}
 export interface IconButtonOptions {
   /** Returns the current prop values. The adapter owns the state. */
   props: () => IconButtonProps;
+  /** Returns what content the adapter has. Without it, there is no selected icon. */
+  content?: () => IconButtonContent;
   /** Called for a click that isn't blocked. */
   onClick: (event: MouseEvent) => void;
-  /** Called after an unblocked click on a toggle button, with the new value. */
-  onSelectedChange: (selected: boolean) => void;
+  /** Called after an unblocked click on a toggle button, with the requested value. */
+  onChange: (selected: boolean) => void;
+}
+/**
+ * The icon button's markup, part by part. `iconButtonSkeleton` says how the adapter nests them.
+ */
+export interface IconButtonParts {
+  root: () => PartAttrs;
+  /** Extends small icon buttons to the 48px target. */
+  touch: () => PartAttrs;
+  icon: () => PartAttrs;
 }
-export declare function createIconButton(options: IconButtonOptions): ButtonApi;
+/**
+ * How the adapter renders the icon button's parts. The icon holds the selected icon when
+ * `showsSelectedIcon()`, otherwise the default one.
+ */
+export declare const iconButtonSkeleton: PartNode<keyof IconButtonParts>;
+export interface IconButtonApi {
+  parts: IconButtonParts;
+  /** Whether the icon part shows the selected icon instead of the default one. */
+  showsSelectedIcon: () => boolean;
+  /** Attach to the root element's `click`. */
+  handleClick: (event: MouseEvent) => void;
+}
+export declare function createIconButton(options: IconButtonOptions): IconButtonApi;
 export interface DragInfo {
   /** Distance from where the press started, in px. */
   dx: number;
@@ -147,22 +316,21 @@ export declare function attachRipple(element: HTMLElement, options?: RippleOptio
 export interface ShapeMorphOptions {
   /** The motion token whose spring drives the morph. Defaults to `'fast-spatial'`. */
   token?: string;
-  /** Attributes whose changes can move the target. Defaults to Rio's state attributes. */
-  watch?: string[];
 }
 export interface ShapeMorphHandle {
   detach(): void;
 }
 export declare function attachShapeMorph(element: HTMLElement, options?: ShapeMorphOptions): ShapeMorphHandle;
 export interface SpringPropertyOptions {
-  /** A registered <length> custom property that holds the target for the current state. */
+  /**
+   * A registered custom property that holds the target for the current state: a <length>, read
+   * in px, or an <angle>, read in deg. The stylesheet has to transition it (see above).
+   */
   target: string;
-  /** Writes the animated value in px, or clears it with `undefined` at rest. */
+  /** Writes the animated value (px or deg), or clears it with `undefined` at rest. */
   apply: (value: number | undefined) => void;
   /** The motion token whose spring drives the value. Defaults to `'fast-spatial'`. */
   token?: string;
-  /** Attributes whose changes can move the target. Defaults to Rio's state attributes. */
-  watch?: string[];
 }
 export interface SpringPropertyHandle {
   /** The current animated value. */
@@ -173,8 +341,6 @@ export interface SpringPropertyHandle {
   release(velocity?: number): void;
   detach(): void;
 }
-/** The data attributes Rio's components use for state. */
-export declare const STATE_ATTRIBUTES: string[];
 export declare function attachSpringProperty(element: HTMLElement, options: SpringPropertyOptions): SpringPropertyHandle;
 export interface SpringParams {
   /** 1 settles without overshoot; lower values bounce, higher values approach more slowly. */
@@ -220,6 +386,11 @@ export interface Spring {
 }
 /** A spring that animates a single number with `requestAnimationFrame`. */
 export declare function createSpring(options: SpringOptions): Spring;
+/**
+ * Whether the user asked for reduced motion. Spatial springs should jump straight to their target
+ * (or be skipped) when it is on; see `docs/foundations.md`, section 3.
+ */
+export declare function prefersReducedMotion(): boolean;
 /**
  * Reads a motion token's spring from CSS variables on an element, for example
  * `--rio-motion-fast-spatial-damping` and `-stiffness`. Reading them from the element, rather than
@@ -227,11 +398,104 @@ export declare function createSpring(options: SpringOptions): Spring;
  * Returns `undefined` when the theme doesn't define them.
  */
 export declare function readSpringParams(element: Element, token: string): SpringParams | undefined;
+export interface SplitButtonMenuIconHandle {
+  detach(): void;
+}
+/** Attach to the trailing button. */
+export declare function attachSplitButtonMenuIcon(trailing: HTMLElement): SplitButtonMenuIconHandle;
+/** Split button colors: the button's, without text. */
+export declare const SPLIT_BUTTON_VARIANTS: readonly ["filled", "tonal", "outlined", "elevated"];
+export type SplitButtonVariant = (typeof SPLIT_BUTTON_VARIANTS)[number];
+/** What the trailing button opens, for `aria-haspopup`. */
+export type SplitButtonPopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+export interface SplitButtonProps {
+  /**
+   * Names the trailing button. It should say that more choices for the leading action are there,
+   * such as "More watch options" next to "Watch later".
+   */
+  menuLabel: string;
+  /**
+   * Names the leading button when it has no label text, only an icon. Ignored when there is label
+   * text, so the visible label stays the name (WCAG 2.5.3).
+   */
+  label?: string;
+  /** Defaults to `'filled'`. */
+  variant?: SplitButtonVariant;
+  /** Defaults to `'small'`. */
+  size?: ButtonSize;
+  /** Whether what the trailing button opens is open. */
+  open?: boolean;
+  /** What the trailing button opens. Defaults to `'menu'`. */
+  popup?: SplitButtonPopup;
+  /** Native disabled, on both buttons: not focusable and not pressable. The spec's behavior. */
+  disabled?: boolean;
+  /** Disabled but still focusable, on both buttons, as on the button. Deviates from the spec. */
+  softDisabled?: boolean;
+  /** The leading button's type. Defaults to `'button'`; the trailing button is always `'button'`. */
+  type?: 'button' | 'submit' | 'reset';
+}
+export declare const splitButtonDefaults: {
+  variant: "filled";
+  size: "small";
+  open: false;
+  popup: "menu";
+  disabled: false;
+  softDisabled: false;
+  type: "button";
+};
+/** What the adapter has to put in the leading button, which only the adapter can see. */
+export interface SplitButtonContent {
+  /** Whether there is a leading icon. */
+  icon: boolean;
+  /** Whether there is label text. */
+  label: boolean;
+}
+export interface SplitButtonOptions {
+  /** Returns the current prop values. The adapter owns the state. */
+  props: () => SplitButtonProps;
+  /** Returns what content the adapter has. Without it, the leading button has only a label. */
+  content?: () => SplitButtonContent;
+  /** Called for a click on the leading button that isn't blocked. */
+  onClick: (event: MouseEvent) => void;
+  /** Called with the requested `open` when the trailing button is clicked and isn't blocked. */
+  onChange: (open: boolean) => void;
+}
+/** The split button's markup, part by part. `splitButtonSkeleton` says how the adapter nests them. */
+export interface SplitButtonParts {
+  root: () => PartAttrs;
+  /** The main action, a button with an icon, label text, or both. */
+  leading: () => PartAttrs;
+  /** The button that opens the menu. */
+  trailing: () => PartAttrs;
+  /** Extends each button to the 48px target. Both buttons have one. */
+  touch: () => PartAttrs;
+  icon: () => PartAttrs;
+  label: () => PartAttrs;
+  /** Holds the expand icon, which turns when the menu opens. */
+  menuIcon: () => PartAttrs;
+}
+/**
+ * How the adapter renders the split button's parts. The icon and the label hold the leading
+ * button's content; the menu icon holds the expand icon the app provides.
+ */
+export declare const splitButtonSkeleton: PartNode<keyof SplitButtonParts, 'showsIcon' | 'showsLabel'>;
+export interface SplitButtonApi {
+  parts: SplitButtonParts;
+  /** Whether to render the icon part. */
+  showsIcon: () => boolean;
+  /** Whether to render the label part. */
+  showsLabel: () => boolean;
+  /** Attach to the leading button's `click`. */
+  handleLeadingClick: (event: MouseEvent) => void;
+  /** Attach to the trailing button's `click`. */
+  handleTrailingClick: (event: MouseEvent) => void;
+}
+export declare function createSplitButton(options: SplitButtonOptions): SplitButtonApi;
 export interface SwitchHandleOptions {
   /** Returns whether the switch is on. */
   selected: () => boolean;
   /** Called when a drag ends on the other side. */
-  onSelectedChange: (selected: boolean) => void;
+  onChange: (selected: boolean) => void;
 }
 export interface SwitchHandleHandle {
   detach(): void;
@@ -254,14 +518,44 @@ export declare const switchDefaults: {
   disabled: false;
   softDisabled: false;
 };
+/** What the adapter has to put in the switch, which only the adapter can see. */
+export interface SwitchContent {
+  /** Whether there is an icon for the handle while the switch is on. */
+  selectedIcon: boolean;
+  /** Whether there is an icon for the handle while the switch is off. */
+  unselectedIcon: boolean;
+}
 export interface SwitchOptions {
   /** Returns the current prop values. The adapter owns the state. */
   props: () => SwitchProps;
-  /** Called with the requested value. Adapters wire it to v-model, onChange, and so on. */
-  onSelectedChange: (selected: boolean) => void;
+  /** Returns what content the adapter has. Without it, the handle has no icons. */
+  content?: () => SwitchContent;
+  /** Called with the requested value. Adapters wire it to v-model, a callback prop, and so on. */
+  onChange: (selected: boolean) => void;
 }
+/**
+ * The switch's markup, part by part. `switchSkeleton` says how the adapter nests them.
+ */
+export interface SwitchParts {
+  root: () => PartAttrs;
+  /** Extends the 32px track to the 48px target. */
+  touch: () => PartAttrs;
+  state: () => PartAttrs;
+  handle: () => PartAttrs;
+  icon: () => PartAttrs;
+}
+/**
+ * How the adapter renders the switch's parts. The state part is the circle where the state layer
+ * and the ripple draw. The icon holds the selected icon when `showsSelectedIcon()`, otherwise the
+ * unselected one.
+ */
+export declare const switchSkeleton: PartNode<keyof SwitchParts, 'showsIcon'>;
 export interface SwitchApi {
-  rootAttrs: () => Record<string, string | undefined>;
+  parts: SwitchParts;
+  /** Whether the handle shows an icon in the current state, which also makes it bigger. */
+  showsIcon: () => boolean;
+  /** Whether the icon part shows the selected icon: the switch is on and has one. */
+  showsSelectedIcon: () => boolean;
   /** Attach to the root element's `click`. */
   handleClick: (event: MouseEvent) => void;
 }

package/dist/index.js

@@ -1,3 +1,295 @@
+// src/utils/object.ts
+/**
+* A copy without the properties that are explicitly `undefined`, so spreading it over defaults
+* keeps the defaults: `{ ...defaults, ...omitUndefined(props) }`.
+*/
+function omitUndefined(object) {
+	return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== void 0));
+}
+// src/button-group/button-group.ts
+/**
+* M3E button group variants. A standard group spaces its buttons and lets a pressed button push
+* its neighbors; a connected group joins them with 2px gaps and shared corners, and fills the
+* width it is given.
+*/
+const BUTTON_GROUP_VARIANTS = ["standard", "connected"];
+/** Whether the group's buttons can be selected: none, one at a time, or any number. */
+const BUTTON_GROUP_SELECTIONS = [
+	"none",
+	"single",
+	"multiple"
+];
+const buttonGroupDefaults = {
+	variant: "standard",
+	size: "small",
+	shape: "round",
+	selection: "none",
+	required: false
+};
+/** How the adapter renders the button group: one root, with the buttons as its direct children. */
+const buttonGroupSkeleton = {
+	part: "root",
+	tag: "div",
+	content: true
+};
+const valuesOf = (selected) => selected === void 0 ? [] : Array.isArray(selected) ? selected : [selected];
+function createButtonGroup(options) {
+	const props = () => ({
+		...buttonGroupDefaults,
+		...omitUndefined(options.props())
+	});
+	const isSelected = (value) => {
+		const p = props();
+		return p.selection !== "none" && valuesOf(p.selected).includes(value);
+	};
+	return {
+		parts: { root() {
+			const p = props();
+			return {
+				class: "rio-button-group",
+				role: "group",
+				"data-variant": p.variant,
+				"data-size": p.size,
+				"data-shape": p.shape
+			};
+		} },
+		size: () => props().size,
+		shape: () => props().shape,
+		selection: () => props().selection,
+		isSelected,
+		select(value, selected) {
+			const p = props();
+			if (p.selection === "none" || isSelected(value) === selected) return;
+			const current = valuesOf(p.selected);
+			if (!selected && p.required && current.length === 1) return;
+			if (p.selection === "single") options.onChange(selected ? value : void 0);
+			else options.onChange(selected ? [...current, value] : current.filter((other) => other !== value));
+		}
+	};
+}
+// src/primitives/spring/spring.ts
+/**
+* Where a spring is `t` seconds after it starts at `from` with `velocity`, heading to `to`.
+*/
+function solveSpring({ dampingRatio: zeta, stiffness }, from, to, velocity, t) {
+	const w0 = Math.sqrt(stiffness);
+	const x0 = from - to;
+	const v0 = velocity;
+	if (Math.abs(zeta - 1) < 1e-6) {
+		const b = v0 + w0 * x0;
+		const decay = Math.exp(-w0 * t);
+		return {
+			value: to + (x0 + b * t) * decay,
+			velocity: (b - w0 * (x0 + b * t)) * decay
+		};
+	}
+	if (zeta < 1) {
+		const a = zeta * w0;
+		const wd = w0 * Math.sqrt(1 - zeta * zeta);
+		const b = (v0 + a * x0) / wd;
+		const decay = Math.exp(-a * t);
+		const cos = Math.cos(wd * t);
+		const sin = Math.sin(wd * t);
+		return {
+			value: to + decay * (x0 * cos + b * sin),
+			velocity: decay * ((wd * b - a * x0) * cos - (a * b + wd * x0) * sin)
+		};
+	}
+	const root = w0 * Math.sqrt(zeta * zeta - 1);
+	const r1 = -zeta * w0 + root;
+	const r2 = -zeta * w0 - root;
+	const c2 = (v0 - r1 * x0) / (r2 - r1);
+	const c1 = x0 - c2;
+	const e1 = Math.exp(r1 * t);
+	const e2 = Math.exp(r2 * t);
+	return {
+		value: to + c1 * e1 + c2 * e2,
+		velocity: r1 * c1 * e1 + r2 * c2 * e2
+	};
+}
+const now = () => performance.now() / 1e3;
+/** A spring that animates a single number with `requestAnimationFrame`. */
+function createSpring(options) {
+	const precision = options.precision ?? .01;
+	let from = options.value;
+	let target = options.value;
+	let startVelocity = 0;
+	let params;
+	let startedAt = 0;
+	let frame;
+	const state = () => params && frame !== void 0 ? solveSpring(params, from, target, startVelocity, now() - startedAt) : {
+		value: target,
+		velocity: 0
+	};
+	const settle = () => {
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		frame = void 0;
+		from = target;
+		startVelocity = 0;
+		options.onUpdate(target);
+		options.onRest?.();
+	};
+	const tick = () => {
+		const { value, velocity } = state();
+		if (Math.abs(value - target) < precision && Math.abs(velocity) < precision * 10) {
+			settle();
+			return;
+		}
+		options.onUpdate(value);
+		frame = requestAnimationFrame(tick);
+	};
+	return {
+		get value() {
+			return state().value;
+		},
+		get velocity() {
+			return state().velocity;
+		},
+		get target() {
+			return target;
+		},
+		get moving() {
+			return frame !== void 0;
+		},
+		to(next, nextParams, velocity) {
+			const current = state();
+			from = current.value;
+			startVelocity = velocity ?? current.velocity;
+			target = next;
+			params = nextParams;
+			startedAt = now();
+			if (frame === void 0) frame = requestAnimationFrame(tick);
+		},
+		jump(value) {
+			target = value;
+			settle();
+		},
+		stop() {
+			const { value } = state();
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			frame = void 0;
+			from = target = value;
+			startVelocity = 0;
+		}
+	};
+}
+/**
+* Whether the user asked for reduced motion. Spatial springs should jump straight to their target
+* (or be skipped) when it is on; see `docs/foundations.md`, section 3.
+*/
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* Reads a motion token's spring from CSS variables on an element, for example
+* `--rio-motion-fast-spatial-damping` and `-stiffness`. Reading them from the element, rather than
+* from the tokens package, lets a subtree that swaps motion schemes change its springs too.
+* Returns `undefined` when the theme doesn't define them.
+*/
+function readSpringParams(element, token) {
+	const style = getComputedStyle(element);
+	const dampingRatio = parseFloat(style.getPropertyValue(`--rio-motion-${token}-damping`));
+	const stiffness = parseFloat(style.getPropertyValue(`--rio-motion-${token}-stiffness`));
+	return Number.isFinite(dampingRatio) && Number.isFinite(stiffness) ? {
+		dampingRatio,
+		stiffness
+	} : void 0;
+}
+// src/button-group/interaction.ts
+const PRESSED_WIDTH_RATIO = .15;
+function attachButtonGroup(root, options = {}) {
+	const ratio = options.pressedWidthRatio ?? PRESSED_WIDTH_RATIO;
+	const items = () => [...root.children].filter((el) => el instanceof HTMLElement);
+	const onKeydown = (event) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const focusable = items().filter((el) => !el.matches(":disabled") && el.tabIndex >= 0);
+		const index = focusable.findIndex((el) => el.contains(document.activeElement));
+		if (index === -1) return;
+		const next = focusable[index + (event.key === "ArrowRight" !== (getComputedStyle(root).direction === "rtl") ? 1 : -1)];
+		if (!next) return;
+		event.preventDefault();
+		next.focus();
+	};
+	root.addEventListener("keydown", onKeydown);
+	const springs = /* @__PURE__ */ new Map();
+	const natural = /* @__PURE__ */ new Map();
+	const setWidth = (el, value) => value === void 0 ? el.style.removeProperty("inline-size") : el.style.setProperty("inline-size", `${value}px`);
+	const springOf = (el) => {
+		let spring = springs.get(el);
+		if (!spring) {
+			spring = createSpring({
+				value: natural.get(el),
+				onUpdate: (value) => setWidth(el, value),
+				onRest: () => {
+					if (springs.get(el)?.target === natural.get(el)) setWidth(el, void 0);
+				}
+			});
+			springs.set(el, spring);
+		}
+		return spring;
+	};
+	/**
+	* A button's own width, without the width a spring wrote on it. The inline width comes off and
+	* goes back within the same task, so it never shows.
+	*/
+	const measure = (el) => {
+		const inline = el.style.inlineSize;
+		el.style.removeProperty("inline-size");
+		const width = el.getBoundingClientRect().width;
+		el.style.setProperty("inline-size", inline);
+		return width;
+	};
+	/** Sets every button's target width. `instant` skips the springs, for changes of size. */
+	const layout = (instant = false) => {
+		const all = items();
+		for (const el of all) natural.set(el, measure(el));
+		const targets = new Map(all.map((el) => [el, natural.get(el)]));
+		const pressed = all.findIndex((el) => el.hasAttribute("data-pressed"));
+		const standard = root.getAttribute("data-variant") !== "connected";
+		if (pressed !== -1 && standard && !prefersReducedMotion()) {
+			const growth = natural.get(all[pressed]) * ratio;
+			const neighbors = [all[pressed - 1], all[pressed + 1]].filter((el) => el !== void 0);
+			let gained = 0;
+			for (const el of neighbors) {
+				const width = natural.get(el);
+				const given = Math.min(growth / neighbors.length, width * ratio);
+				targets.set(el, width - given);
+				gained += given;
+			}
+			targets.set(all[pressed], natural.get(all[pressed]) + gained);
+		}
+		const params = readSpringParams(root, "fast-spatial");
+		for (const [el, target] of targets) {
+			const spring = springOf(el);
+			if (!el.style.inlineSize && spring.value !== natural.get(el)) spring.jump(natural.get(el));
+			if (spring.target === target) continue;
+			if (params && !instant && !prefersReducedMotion()) spring.to(target, params);
+			else spring.jump(target);
+		}
+	};
+	const observer = new MutationObserver((mutations) => {
+		const own = mutations.filter((m) => m.target.parentElement === root);
+		if (own.length > 0) layout(own.some((m) => m.attributeName !== "data-pressed"));
+	});
+	observer.observe(root, {
+		subtree: true,
+		attributes: true,
+		attributeFilter: [
+			"data-pressed",
+			"data-size",
+			"data-width"
+		]
+	});
+	return { detach() {
+		root.removeEventListener("keydown", onKeydown);
+		observer.disconnect();
+		for (const [el, spring] of springs) {
+			spring.stop();
+			setWidth(el, void 0);
+		}
+	} };
+}
 // src/button/button.ts
 const BUTTON_VARIANTS = [
 	"filled",
@@ -24,28 +316,63 @@ const buttonDefaults = {
 	softDisabled: false,
 	type: "button"
 };
+/** How the adapter renders the button's parts. The icon holds the leading icon. */
+const buttonSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [
+		{
+			part: "touch",
+			tag: "span"
+		},
+		{
+			part: "icon",
+			tag: "span",
+			when: "showsIcon",
+			content: true
+		},
+		{
+			part: "label",
+			tag: "span",
+			content: true
+		}
+	]
+};
 const isToggle = (p) => !!p.toggle && p.variant !== "text";
 /** Defaults under the given props, skipping props that are explicitly `undefined`. */
 const resolve = (props) => ({
 	...buttonDefaults,
-	...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== void 0))
+	...omitUndefined(props)
 });
 function createButton(options) {
 	return {
-		rootAttrs() {
-			const p = resolve(options.props());
-			const toggle = isToggle(p);
-			return {
-				type: p.type,
-				disabled: p.disabled ? "" : void 0,
-				"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
-				"aria-pressed": toggle ? String(p.selected) : void 0,
-				"data-variant": p.variant,
-				"data-size": p.size,
-				"data-shape": p.shape,
-				"data-selected": toggle ? String(p.selected) : void 0
-			};
+		parts: {
+			root() {
+				const p = resolve(options.props());
+				const toggle = isToggle(p);
+				return {
+					class: "rio-button rio-state-layer rio-focus-ring",
+					type: p.type,
+					disabled: p.disabled ? "" : void 0,
+					"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
+					"aria-pressed": toggle ? String(p.selected) : void 0,
+					"data-variant": p.variant,
+					"data-size": p.size,
+					"data-shape": p.shape,
+					"data-selected": toggle ? String(p.selected) : void 0
+				};
+			},
+			touch: () => ({
+				class: "rio-button__touch",
+				"aria-hidden": "true"
+			}),
+			icon: () => ({
+				class: "rio-button__icon",
+				"aria-hidden": "true"
+			}),
+			label: () => ({ class: "rio-button__label" })
 		},
+		showsIcon: () => !!options.content?.().icon,
 		handleClick(event) {
 			const p = options.props();
 			if (p.disabled || p.softDisabled) {
@@ -53,7 +380,7 @@ function createButton(options) {
 				return;
 			}
 			options.onClick(event);
-			if (isToggle(p)) options.onSelectedChange(!p.selected);
+			if (isToggle(p)) options.onChange(!p.selected);
 		}
 	};
 }
@@ -81,23 +408,50 @@ const iconButtonDefaults = {
 	softDisabled: false,
 	type: "button"
 };
+/**
+* How the adapter renders the icon button's parts. The icon holds the selected icon when
+* `showsSelectedIcon()`, otherwise the default one.
+*/
+const iconButtonSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [{
+		part: "touch",
+		tag: "span"
+	}, {
+		part: "icon",
+		tag: "span",
+		content: true
+	}]
+};
 function createIconButton(options) {
 	const button = createButton({
-		...options,
 		props: () => ({
 			...options.props(),
 			variant: options.props().variant
-		})
+		}),
+		onClick: options.onClick,
+		onChange: options.onChange
 	});
 	return {
-		rootAttrs() {
+		parts: {
+			root() {
+				const p = options.props();
+				const root = button.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-icon-button`,
+					"aria-label": p.label,
+					"data-width": p.width ?? iconButtonDefaults.width,
+					"data-variant": p.variant ?? iconButtonDefaults.variant
+				};
+			},
+			touch: button.parts.touch,
+			icon: button.parts.icon
+		},
+		showsSelectedIcon() {
 			const p = options.props();
-			return {
-				...button.rootAttrs(),
-				"aria-label": p.label,
-				"data-width": p.width ?? iconButtonDefaults.width,
-				"data-variant": p.variant ?? iconButtonDefaults.variant
-			};
+			return !!(p.toggle && p.selected && options.content?.().selectedIcon);
 		},
 		handleClick: button.handleClick
 	};
@@ -219,7 +573,7 @@ const PADDING = 10;
 const SOFT_EDGE_RATIO = .35;
 const SOFT_EDGE_MINIMUM = 75;
 const isDisabled = (el) => el.matches(":disabled, [aria-disabled=\"true\"]");
-const reducedMotion$1 = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 const setPressed = (els, pressed) => {
 	for (const el of els) if (pressed) el.dataset.pressed = "";
 	else delete el.dataset.pressed;
@@ -264,7 +618,7 @@ function attachRipple(element, options = {}) {
 		animation?.cancel();
 		animation = surface.animate([frame(from, radius.from), frame(to, radius.to)], {
 			pseudoElement: "::after",
-			duration: reducedMotion$1() ? 0 : GROW_MS,
+			duration: reducedMotion() ? 0 : GROW_MS,
 			easing: GROW_EASING,
 			fill: "forwards"
 		});
@@ -337,138 +691,13 @@ function attachRipple(element, options = {}) {
 		element.removeEventListener("click", onClick);
 	} };
 }
-// src/primitives/spring/spring.ts
-/**
-* Where a spring is `t` seconds after it starts at `from` with `velocity`, heading to `to`.
-*/
-function solveSpring({ dampingRatio: zeta, stiffness }, from, to, velocity, t) {
-	const w0 = Math.sqrt(stiffness);
-	const x0 = from - to;
-	const v0 = velocity;
-	if (Math.abs(zeta - 1) < 1e-6) {
-		const b = v0 + w0 * x0;
-		const decay = Math.exp(-w0 * t);
-		return {
-			value: to + (x0 + b * t) * decay,
-			velocity: (b - w0 * (x0 + b * t)) * decay
-		};
-	}
-	if (zeta < 1) {
-		const a = zeta * w0;
-		const wd = w0 * Math.sqrt(1 - zeta * zeta);
-		const b = (v0 + a * x0) / wd;
-		const decay = Math.exp(-a * t);
-		const cos = Math.cos(wd * t);
-		const sin = Math.sin(wd * t);
-		return {
-			value: to + decay * (x0 * cos + b * sin),
-			velocity: decay * ((wd * b - a * x0) * cos - (a * b + wd * x0) * sin)
-		};
-	}
-	const root = w0 * Math.sqrt(zeta * zeta - 1);
-	const r1 = -zeta * w0 + root;
-	const r2 = -zeta * w0 - root;
-	const c2 = (v0 - r1 * x0) / (r2 - r1);
-	const c1 = x0 - c2;
-	const e1 = Math.exp(r1 * t);
-	const e2 = Math.exp(r2 * t);
-	return {
-		value: to + c1 * e1 + c2 * e2,
-		velocity: r1 * c1 * e1 + r2 * c2 * e2
-	};
-}
-const now = () => performance.now() / 1e3;
-/** A spring that animates a single number with `requestAnimationFrame`. */
-function createSpring(options) {
-	const precision = options.precision ?? .01;
-	let from = options.value;
-	let target = options.value;
-	let startVelocity = 0;
-	let params;
-	let startedAt = 0;
-	let frame;
-	const state = () => params && frame !== void 0 ? solveSpring(params, from, target, startVelocity, now() - startedAt) : {
-		value: target,
-		velocity: 0
-	};
-	const settle = () => {
-		if (frame !== void 0) cancelAnimationFrame(frame);
-		frame = void 0;
-		from = target;
-		startVelocity = 0;
-		options.onUpdate(target);
-		options.onRest?.();
-	};
-	const tick = () => {
-		const { value, velocity } = state();
-		if (Math.abs(value - target) < precision && Math.abs(velocity) < precision * 10) {
-			settle();
-			return;
-		}
-		options.onUpdate(value);
-		frame = requestAnimationFrame(tick);
-	};
-	return {
-		get value() {
-			return state().value;
-		},
-		get velocity() {
-			return state().velocity;
-		},
-		get target() {
-			return target;
-		},
-		get moving() {
-			return frame !== void 0;
-		},
-		to(next, nextParams, velocity) {
-			const current = state();
-			from = current.value;
-			startVelocity = velocity ?? current.velocity;
-			target = next;
-			params = nextParams;
-			startedAt = now();
-			if (frame === void 0) frame = requestAnimationFrame(tick);
-		},
-		jump(value) {
-			target = value;
-			settle();
-		},
-		stop() {
-			const { value } = state();
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			frame = void 0;
-			from = target = value;
-			startVelocity = 0;
-		}
-	};
-}
-/**
-* Reads a motion token's spring from CSS variables on an element, for example
-* `--rio-motion-fast-spatial-damping` and `-stiffness`. Reading them from the element, rather than
-* from the tokens package, lets a subtree that swaps motion schemes change its springs too.
-* Returns `undefined` when the theme doesn't define them.
-*/
-function readSpringParams(element, token) {
-	const style = getComputedStyle(element);
-	const dampingRatio = parseFloat(style.getPropertyValue(`--rio-motion-${token}-damping`));
-	const stiffness = parseFloat(style.getPropertyValue(`--rio-motion-${token}-stiffness`));
-	return Number.isFinite(dampingRatio) && Number.isFinite(stiffness) ? {
-		dampingRatio,
-		stiffness
-	} : void 0;
-}
 // src/primitives/spring-property/spring-property.ts
-/** The data attributes Rio's components use for state. */
-const STATE_ATTRIBUTES = [
-	"data-pressed",
-	"data-dragging",
-	"data-selected",
-	"data-shape",
-	"data-size",
-	"data-icon"
+/** The transition events that report a change of the target. */
+const EVENTS = [
+	"transitionrun",
+	"transitionend",
+	"transitioncancel"
 ];
-const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 function attachSpringProperty(element, options) {
 	const token = options.token ?? "fast-spatial";
 	const read = () => parseFloat(getComputedStyle(element).getPropertyValue(options.target));
@@ -485,16 +714,20 @@ function attachSpringProperty(element, options) {
 		const target = read();
 		if (!Number.isFinite(target)) return;
 		const params = readSpringParams(element, token);
-		if (!params || reducedMotion()) spring.jump(target);
+		if (!params || prefersReducedMotion()) spring.jump(target);
 		else spring.to(target, params, velocity);
 	};
-	const observer = new MutationObserver(() => {
+	const onTransition = (event) => {
+		if (event.target !== element || event.propertyName !== options.target) return;
 		if (!held && read() !== spring.target) go();
+	};
+	for (const type of EVENTS) element.addEventListener(type, onTransition);
+	const resync = new ResizeObserver(() => {
+		if (held || spring.moving) return;
+		const now = read();
+		if (Number.isFinite(now) && now !== spring.target) spring.jump(now);
 	});
-	observer.observe(element, {
-		attributes: true,
-		attributeFilter: options.watch ?? STATE_ATTRIBUTES
-	});
+	resync.observe(element);
 	return {
 		get value() {
 			return spring.value;
@@ -508,25 +741,182 @@ function attachSpringProperty(element, options) {
 			go(velocity);
 		},
 		detach() {
-			observer.disconnect();
+			for (const type of EVENTS) element.removeEventListener(type, onTransition);
+			resync.disconnect();
 			spring.stop();
 			options.apply(void 0);
 		}
 	};
 }
 // src/primitives/shape-morph/shape-morph.ts
+const CORNERS = {
+	start: ["border-start-start-radius", "border-end-start-radius"],
+	end: ["border-start-end-radius", "border-end-end-radius"]
+};
 function attachShapeMorph(element, options = {}) {
-	const radius = attachSpringProperty(element, {
-		...options,
-		target: "--rio-shape-morph-target",
-		apply: (value) => value === void 0 ? element.style.removeProperty("border-radius") : element.style.setProperty("border-radius", `${value}px`)
-	});
 	element.dataset.shapeMorph = "";
+	const springs = ["start", "end"].map((side) => attachSpringProperty(element, {
+		...options,
+		target: `--rio-shape-morph-${side}-target`,
+		apply: (value) => {
+			for (const corner of CORNERS[side]) if (value === void 0) element.style.removeProperty(corner);
+			else element.style.setProperty(corner, `${value}px`);
+		}
+	}));
 	return { detach() {
-		radius.detach();
+		for (const spring of springs) spring.detach();
 		delete element.dataset.shapeMorph;
 	} };
 }
+// src/split-button/menu-icon.ts
+const inlineVar$1 = (el, name, unit) => (value) => value === void 0 ? el.style.removeProperty(name) : el.style.setProperty(name, `${value}${unit}`);
+/** Attach to the trailing button. */
+function attachSplitButtonMenuIcon(trailing) {
+	const token = "standard-fast-spatial";
+	const turn = attachSpringProperty(trailing, {
+		target: "--rio-split-button-menu-turn-target",
+		token,
+		apply: inlineVar$1(trailing, "--_menu-turn", "deg")
+	});
+	const shift = attachSpringProperty(trailing, {
+		target: "--rio-split-button-menu-shift-target",
+		token,
+		apply: inlineVar$1(trailing, "--_menu-shift", "px")
+	});
+	return { detach() {
+		turn.detach();
+		shift.detach();
+	} };
+}
+// src/split-button/split-button.ts
+/** Split button colors: the button's, without text. */
+const SPLIT_BUTTON_VARIANTS = [
+	"filled",
+	"tonal",
+	"outlined",
+	"elevated"
+];
+const splitButtonDefaults = {
+	variant: "filled",
+	size: "small",
+	open: false,
+	popup: "menu",
+	disabled: false,
+	softDisabled: false,
+	type: "button"
+};
+/**
+* How the adapter renders the split button's parts. The icon and the label hold the leading
+* button's content; the menu icon holds the expand icon the app provides.
+*/
+const splitButtonSkeleton = {
+	part: "root",
+	tag: "div",
+	children: [{
+		part: "leading",
+		tag: "button",
+		children: [
+			{
+				part: "touch",
+				tag: "span"
+			},
+			{
+				part: "icon",
+				tag: "span",
+				when: "showsIcon",
+				content: true
+			},
+			{
+				part: "label",
+				tag: "span",
+				when: "showsLabel",
+				content: true
+			}
+		]
+	}, {
+		part: "trailing",
+		tag: "button",
+		children: [{
+			part: "touch",
+			tag: "span"
+		}, {
+			part: "menuIcon",
+			tag: "span",
+			content: true
+		}]
+	}]
+};
+function createSplitButton(options) {
+	const props = () => ({
+		...splitButtonDefaults,
+		...omitUndefined(options.props())
+	});
+	const content = () => options.content?.() ?? {
+		icon: false,
+		label: true
+	};
+	const shared = () => {
+		const p = props();
+		return {
+			variant: p.variant,
+			size: p.size,
+			disabled: p.disabled,
+			softDisabled: p.softDisabled
+		};
+	};
+	const leading = createButton({
+		props: () => ({
+			...shared(),
+			type: props().type
+		}),
+		onClick: options.onClick,
+		onChange: () => {}
+	});
+	const trailing = createButton({
+		props: () => ({
+			...shared(),
+			type: "button"
+		}),
+		onClick: () => options.onChange(!props().open),
+		onChange: () => {}
+	});
+	return {
+		parts: {
+			root: () => ({ class: "rio-split-button" }),
+			leading() {
+				const root = leading.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-split-button__leading`,
+					"aria-label": content().label ? void 0 : props().label
+				};
+			},
+			trailing() {
+				const p = props();
+				const root = trailing.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-split-button__trailing`,
+					"aria-label": p.menuLabel,
+					"aria-haspopup": p.popup,
+					"aria-expanded": String(p.open),
+					"data-open": p.open ? "" : void 0
+				};
+			},
+			touch: leading.parts.touch,
+			icon: leading.parts.icon,
+			label: leading.parts.label,
+			menuIcon: () => ({
+				class: "rio-split-button__menu-icon",
+				"aria-hidden": "true"
+			})
+		},
+		showsIcon: () => content().icon,
+		showsLabel: () => content().label,
+		handleLeadingClick: leading.handleClick,
+		handleTrailingClick: trailing.handleClick
+	};
+}
 // src/switch/handle.ts
 /** A release faster than this (px/s) picks the side it's heading to, wherever the handle is. */
 const FLING_VELOCITY = 300;
@@ -559,7 +949,7 @@ function attachSwitchHandle(root, options) {
 		onEnd({ velocityX }) {
 			const velocity = direction * velocityX;
 			const next = Math.abs(velocity) > FLING_VELOCITY ? velocity > 0 : x.value > (off + on) / 2;
-			if (next !== options.selected()) options.onSelectedChange(next);
+			if (next !== options.selected()) options.onChange(next);
 			x.release(velocity);
 		},
 		onCancel() {
@@ -578,28 +968,80 @@ const switchDefaults = {
 	disabled: false,
 	softDisabled: false
 };
+/**
+* How the adapter renders the switch's parts. The state part is the circle where the state layer
+* and the ripple draw. The icon holds the selected icon when `showsSelectedIcon()`, otherwise the
+* unselected one.
+*/
+const switchSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [
+		{
+			part: "touch",
+			tag: "span"
+		},
+		{
+			part: "state",
+			tag: "span"
+		},
+		{
+			part: "handle",
+			tag: "span",
+			children: [{
+				part: "icon",
+				tag: "span",
+				when: "showsIcon",
+				content: true
+			}]
+		}
+	]
+};
 function createSwitch(options) {
+	const showsIcon = () => {
+		const content = options.content?.();
+		return !!(options.props().selected ? content?.selectedIcon : content?.unselectedIcon);
+	};
 	return {
-		rootAttrs() {
-			const p = options.props();
-			const selected = String(!!p.selected);
-			return {
-				type: "button",
-				role: "switch",
-				"aria-checked": selected,
-				disabled: p.disabled ? "" : void 0,
-				"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
-				"data-selected": selected
-			};
+		parts: {
+			root() {
+				const p = options.props();
+				const selected = String(!!p.selected);
+				return {
+					class: "rio-switch rio-focus-ring",
+					type: "button",
+					role: "switch",
+					"aria-checked": selected,
+					disabled: p.disabled ? "" : void 0,
+					"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
+					"data-selected": selected,
+					"data-icon": showsIcon() ? "" : void 0
+				};
+			},
+			touch: () => ({
+				class: "rio-switch__touch",
+				"aria-hidden": "true"
+			}),
+			state: () => ({
+				class: "rio-switch__state",
+				"aria-hidden": "true"
+			}),
+			handle: () => ({
+				class: "rio-switch__handle",
+				"aria-hidden": "true"
+			}),
+			icon: () => ({ class: "rio-switch__icon" })
 		},
+		showsIcon,
+		showsSelectedIcon: () => !!(options.props().selected && options.content?.().selectedIcon),
 		handleClick(event) {
 			const p = options.props();
 			if (p.disabled || p.softDisabled) {
 				event.preventDefault();
 				return;
 			}
-			options.onSelectedChange(!p.selected);
+			options.onChange(!p.selected);
 		}
 	};
 }
-export { BUTTON_SIZES, BUTTON_VARIANTS, ICON_BUTTON_VARIANTS, ICON_BUTTON_WIDTHS, STATE_ATTRIBUTES, attachDrag, attachRipple, attachShapeMorph, attachSpringProperty, attachSwitchHandle, buttonDefaults, createButton, createIconButton, createSpring, createSwitch, iconButtonDefaults, readSpringParams, solveSpring, switchDefaults };
+export { BUTTON_GROUP_SELECTIONS, BUTTON_GROUP_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, ICON_BUTTON_VARIANTS, ICON_BUTTON_WIDTHS, SPLIT_BUTTON_VARIANTS, attachButtonGroup, attachDrag, attachRipple, attachShapeMorph, attachSplitButtonMenuIcon, attachSpringProperty, attachSwitchHandle, buttonDefaults, buttonGroupDefaults, buttonGroupSkeleton, buttonSkeleton, createButton, createButtonGroup, createIconButton, createSplitButton, createSpring, createSwitch, iconButtonDefaults, iconButtonSkeleton, prefersReducedMotion, readSpringParams, solveSpring, splitButtonDefaults, splitButtonSkeleton, switchDefaults, switchSkeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rio-m3e/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Framework-agnostic state, props and behaviors for Rio",
   "license": "Apache-2.0",
   "author": "LegenLee",