sheer-ui 0.1.0 → 0.3.0

package/src/lib/components/toggle-group/toggle-group.svelte.ts

@@ -1,20 +1,25 @@
 import { createContext } from 'svelte';
-import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues, attachRef } from '../../internal/tools/index.js';
-import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
-import { kbd } from '../../internal/kbd.js';
+import { type ReadableBox, type ReadableBoxedValues, type WritableBox, attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
 import type { Orientation } from '../../internal/index.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
 import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
-import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+import {
+	type SelectionGroup,
+	type SelectionItemOpts,
+	type SelectionType,
+	SelectionItemState,
+	SelectionValue,
+} from '../../internal/selection.svelte.js';
 
 export const toggleGroupAttrs = createBitsAttrs({
 	component: 'toggle-group',
 	parts: ['root', 'item'],
 });
 
-const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroup>();
+const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroupRootState>();
 
-interface ToggleGroupBaseStateOpts
+interface ToggleGroupRootStateOpts
 	extends
 		WithRefOpts,
 		ReadableBoxedValues<{
@@ -22,16 +27,31 @@ interface ToggleGroupBaseStateOpts
 			rovingFocus: boolean;
 			loop: boolean;
 			orientation: Orientation;
-		}> {}
+		}> {
+	type: SelectionType;
+	value: WritableBox<string | string[]>;
+}
 
-abstract class ToggleGroupBaseState {
-	readonly opts: ToggleGroupBaseStateOpts;
+export class ToggleGroupRootState implements SelectionGroup {
+	static create(opts: ToggleGroupRootStateOpts) {
+		return setToggleGroupRoot(new ToggleGroupRootState(opts));
+	}
+	readonly opts: ToggleGroupRootStateOpts;
+	readonly selection: SelectionValue;
+	readonly disabled: ReadableBox<boolean>;
+	readonly orientation: ReadableBox<Orientation>;
+	readonly rovingFocus: ReadableBox<boolean>;
 	readonly rovingFocusGroup: RovingFocusGroup;
+	readonly selectionTakesTabStop = true;
 	readonly attachment: RefAttachment;
 
-	constructor(opts: ToggleGroupBaseStateOpts) {
+	constructor(opts: ToggleGroupRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.selection = new SelectionValue(opts.type, opts.value);
+		this.disabled = opts.disabled;
+		this.orientation = opts.orientation;
+		this.rovingFocus = opts.rovingFocus;
+		this.attachment = attachRef(opts.ref);
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateAttr: toggleGroupAttrs.item,
 			rootNode: opts.ref,
@@ -53,183 +73,6 @@ abstract class ToggleGroupBaseState {
 	);
 }
 
-interface ToggleGroupSingleStateOpts
-	extends
-		ToggleGroupBaseStateOpts,
-		WritableBoxedValues<{
-			value: string;
-		}> {}
-
-class ToggleGroupSingleState extends ToggleGroupBaseState {
-	override readonly opts: ToggleGroupSingleStateOpts;
-	isMulti = false;
-	readonly anyPressed = $derived.by(() => this.opts.value.current !== '');
-
-	constructor(opts: ToggleGroupSingleStateOpts) {
-		super(opts);
-		this.opts = opts;
-	}
-
-	includesItem(item: string) {
-		return this.opts.value.current === item;
-	}
-
-	toggleItem(item: string, id: string) {
-		if (this.includesItem(item)) {
-			this.opts.value.current = '';
-		} else {
-			this.opts.value.current = item;
-			this.rovingFocusGroup.setCurrentTabStopId(id);
-		}
-	}
-}
-
-//
-// MULTIPLE
-//
-
-interface ToggleGroupMultipleStateOpts
-	extends
-		ToggleGroupBaseStateOpts,
-		WritableBoxedValues<{
-			value: string[];
-		}> {}
-
-class ToggleGroupMultipleState extends ToggleGroupBaseState {
-	override readonly opts: ToggleGroupMultipleStateOpts;
-	isMulti = true;
-	readonly anyPressed = $derived.by(() => this.opts.value.current.length > 0);
-
-	constructor(opts: ToggleGroupMultipleStateOpts) {
-		super(opts);
-
-		this.opts = opts;
-	}
-
-	includesItem(item: string) {
-		return this.opts.value.current.includes(item);
-	}
-
-	toggleItem(item: string, id: string) {
-		if (this.includesItem(item)) {
-			this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
-		} else {
-			this.opts.value.current = [...this.opts.value.current, item];
-			this.rovingFocusGroup.setCurrentTabStopId(id);
-		}
-	}
-}
-
-type ToggleGroup = ToggleGroupSingleState | ToggleGroupMultipleState;
-
-interface ToggleGroupRootOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-			rovingFocus: boolean;
-			loop: boolean;
-			orientation: Orientation;
-		}> {
-	type: 'single' | 'multiple';
-	value: WritableBox<string> | WritableBox<string[]>;
-}
-
-export class ToggleGroupRootState {
-	static create(opts: ToggleGroupRootOpts): ToggleGroup {
-		const { type, ...rest } = opts;
-		const rootState =
-			type === 'single'
-				? new ToggleGroupSingleState(rest as ToggleGroupSingleStateOpts)
-				: new ToggleGroupMultipleState(rest as ToggleGroupMultipleStateOpts);
-		return setToggleGroupRoot(rootState);
-	}
+export function createToggleGroupItem(opts: SelectionItemOpts) {
+	return new SelectionItemState(opts, getToggleGroupRoot());
 }
-
-interface ToggleGroupItemStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-			disabled: boolean;
-		}> {}
-
-export class ToggleGroupItemState {
-	static create(opts: ToggleGroupItemStateOpts) {
-		return new ToggleGroupItemState(opts, getToggleGroupRoot());
-	}
-	readonly opts: ToggleGroupItemStateOpts;
-	readonly root: ToggleGroup;
-	readonly rovingItem: RovingFocusItem;
-	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
-	readonly isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
-
-	readonly #ariaChecked = $derived.by(() => {
-		return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
-	});
-
-	readonly #ariaPressed = $derived.by(() => {
-		return this.root.isMulti ? boolToStr(this.isPressed) : undefined;
-	});
-
-	constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup) {
-		this.opts = opts;
-		this.root = root;
-		this.rovingItem = new RovingFocusItem({
-			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
-			enabled: this.root.opts.rovingFocus,
-		});
-
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	#toggleItem() {
-		if (this.#isDisabled) return;
-		this.root.toggleItem(this.opts.value.current, this.opts.id.current);
-	}
-
-	onclick(_: BitsMouseEvent) {
-		if (this.#isDisabled) return;
-		this.root.toggleItem(this.opts.value.current, this.opts.id.current);
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.#isDisabled) return;
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			e.preventDefault();
-			this.#toggleItem();
-			return;
-		}
-		if (!this.root.opts.rovingFocus.current) return;
-
-		this.rovingItem.handleKeydown(e);
-	}
-
-	readonly snippetProps = $derived.by(() => ({
-		pressed: this.isPressed,
-	}));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: this.root.isMulti ? undefined : 'radio',
-				'data-orientation': this.root.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
-				'data-state': getToggleItemDataState(this.isPressed),
-				'data-value': this.opts.value.current,
-				'aria-pressed': this.#ariaPressed,
-				'aria-checked': this.#ariaChecked,
-				disabled: boolToTrueOrUndef(this.#isDisabled),
-				[toggleGroupAttrs.item]: '',
-				//
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				...this.rovingItem.props,
-			}) as const,
-	);
-}
-
-const getToggleItemDataState = (condition: boolean) => condition ? 'on' : 'off';

package/src/lib/components/toolbar/components/toolbar-group-item.svelte

@@ -2,7 +2,7 @@
 	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToolbarGroupItemProps } from '../types.js';
-	import { ToolbarGroupItemState } from '../toolbar.svelte.js';
+	import { createToolbarGroupItem } from '../toolbar.svelte.js';
 	import { createId } from '../../../internal/create-id.js';
 	import { toggleVariants, type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
 
@@ -24,7 +24,7 @@
 		size?: ToggleSize;
 	} = $props();
 
-	const groupItemState = ToolbarGroupItemState.create({
+	const groupItemState = createToolbarGroupItem({
 		id: boxWith(() => id),
 		value: boxWith(() => value),
 		disabled: boxWith(() => disabled ?? false),
@@ -48,9 +48,9 @@
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, pressed: groupItemState.isPressed })}
+	{@render child({ props: mergedProps, ...groupItemState.snippetProps })}
 {:else}
 	<button {...mergedProps}>
-		{@render children?.({ pressed: groupItemState.isPressed })}
+		{@render children?.(groupItemState.snippetProps)}
 	</button>
 {/if}

package/src/lib/components/toolbar/components/toolbar-group.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { type WritableBox, boxWith } from '../../../internal/tools/index.js';
+	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { emptySelection } from '../../../internal/selection.svelte.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { ToolbarGroupProps } from '../types.js';
 	import { ToolbarGroupState } from '../toolbar.svelte.js';
@@ -20,37 +21,29 @@
 		...restProps
 	}: ToolbarGroupProps = $props();
 
-	// Mode is construction-static: ToolbarGroupState chooses a single/multiple class once.
+	// Mode is construction-static: the selection stays single or multiple for the group's life.
 	const valueType = untrack(() => type);
 
-	function getDefaultValue(): string | string[] {
-		return valueType === 'single' ? '' : [];
-	}
-
-	function handleDefaultValue() {
-		if (value !== undefined) return;
-		value = getDefaultValue();
-	}
-
-	function getValue() {
-		return value ?? getDefaultValue();
-	}
-
-	// SSR
-	handleDefaultValue();
+	// The group owns a mode-specific controlled value.
+	repairBindable(
+		() => value,
+		() => {
+			if (value === undefined) value = emptySelection(valueType);
+		},
+	);
 
 	const groupState = ToolbarGroupState.create({
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled),
 		type: valueType,
 		value: boxWith(
-			() => getValue(),
+			() => value ?? emptySelection(valueType),
 			(v) => {
 				value = v;
-				// @ts-expect-error - we know
-				onValueChange(v);
+				// oxlint-disable-next-line no-explicit-any
+				onValueChange(v as any);
 			},
-		) as WritableBox<string> | WritableBox<string[]>,
+		),
 		ref: boxWith(
 			() => ref,
 			(v) => (ref = v),

package/src/lib/components/toolbar/toolbar.svelte.ts

@@ -1,11 +1,17 @@
 import { createContext } from 'svelte';
-import { type WritableBox, type WritableBoxedValues, type ReadableBoxedValues, attachRef } from '../../internal/tools/index.js';
-import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
-import { kbd } from '../../internal/kbd.js';
+import { type ReadableBox, type ReadableBoxedValues, type WritableBox, attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
 import type { Orientation } from '../../internal/index.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsKeyboardEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
 import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
 import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+import {
+	type SelectionGroup,
+	type SelectionItemOpts,
+	type SelectionType,
+	SelectionItemState,
+	SelectionValue,
+} from '../../internal/selection.svelte.js';
 
 export const toolbarAttrs = createBitsAttrs({
 	component: 'toolbar',
@@ -13,7 +19,7 @@ export const toolbarAttrs = createBitsAttrs({
 });
 
 const [getToolbarRoot, setToolbarRoot] = createContext<ToolbarRootState>();
-const [getToolbarGroup, setToolbarGroup] = createContext<ToolbarGroup>();
+const [getToolbarGroup, setToolbarGroup] = createContext<ToolbarGroupState>();
 interface ToolbarRootStateOpts
 	extends
 		WithRefOpts,
@@ -54,21 +60,38 @@ export class ToolbarRootState {
 	);
 }
 
-interface ToolbarGroupBaseStateOpts
+interface ToolbarGroupStateOpts
 	extends
 		WithRefOpts,
 		ReadableBoxedValues<{
 			disabled: boolean;
-		}> {}
+		}> {
+	type: SelectionType;
+	value: WritableBox<string | string[]>;
+}
 
-abstract class ToolbarGroupBaseState {
-	readonly opts: ToolbarGroupBaseStateOpts;
+/** A selection group inside the toolbar: its items rove with the toolbar's other items. */
+export class ToolbarGroupState implements SelectionGroup {
+	static create(opts: ToolbarGroupStateOpts) {
+		return setToolbarGroup(new ToolbarGroupState(opts, getToolbarRoot()));
+	}
+	readonly opts: ToolbarGroupStateOpts;
 	readonly root: ToolbarRootState;
+	readonly selection: SelectionValue;
+	readonly disabled: ReadableBox<boolean>;
+	readonly orientation: ReadableBox<Orientation>;
+	readonly rovingFocusGroup: RovingFocusGroup;
+	readonly selectionTakesTabStop = false;
+	readonly extraItemAttrs = { [toolbarAttrs['group-item']]: '' } as const;
 	readonly attachment: RefAttachment;
 
-	constructor(opts: ToolbarGroupBaseStateOpts, root: ToolbarRootState) {
+	constructor(opts: ToolbarGroupStateOpts, root: ToolbarRootState) {
 		this.opts = opts;
 		this.root = root;
+		this.selection = new SelectionValue(opts.type, opts.value);
+		this.disabled = opts.disabled;
+		this.orientation = root.opts.orientation;
+		this.rovingFocusGroup = root.rovingFocusGroup;
 		this.attachment = attachRef(this.opts.ref);
 	}
 
@@ -85,184 +108,8 @@ abstract class ToolbarGroupBaseState {
 	);
 }
 
-interface ToolbarGroupSingleStateOpts
-	extends
-		ToolbarGroupBaseStateOpts,
-		WritableBoxedValues<{
-			value: string;
-		}> {}
-
-class ToolbarGroupSingleState extends ToolbarGroupBaseState {
-	override readonly opts: ToolbarGroupSingleStateOpts;
-	override readonly root: ToolbarRootState;
-	readonly isMulti = false as const;
-	readonly anyPressed = $derived.by(() => this.opts.value.current !== '');
-
-	constructor(opts: ToolbarGroupSingleStateOpts, root: ToolbarRootState) {
-		super(opts, root);
-
-		this.opts = opts;
-		this.root = root;
-	}
-
-	includesItem(item: string) {
-		return this.opts.value.current === item;
-	}
-
-	toggleItem(item: string) {
-		if (this.includesItem(item)) {
-			this.opts.value.current = '';
-		} else {
-			this.opts.value.current = item;
-		}
-	}
-}
-
-interface ToolbarGroupMultipleStateOpts
-	extends
-		ToolbarGroupBaseStateOpts,
-		WritableBoxedValues<{
-			value: string[];
-		}> {}
-
-class ToolbarGroupMultipleState extends ToolbarGroupBaseState {
-	override readonly opts: ToolbarGroupMultipleStateOpts;
-	override readonly root: ToolbarRootState;
-	readonly isMulti = true as const;
-	readonly anyPressed = $derived.by(() => this.opts.value.current.length > 0);
-
-	constructor(opts: ToolbarGroupMultipleStateOpts, root: ToolbarRootState) {
-		super(opts, root);
-
-		this.opts = opts;
-		this.root = root;
-	}
-
-	includesItem(item: string) {
-		return this.opts.value.current.includes(item);
-	}
-
-	toggleItem(item: string) {
-		if (this.includesItem(item)) {
-			this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
-		} else {
-			this.opts.value.current = [...this.opts.value.current, item];
-		}
-	}
-}
-
-type ToolbarGroup = ToolbarGroupSingleState | ToolbarGroupMultipleState;
-
-interface ToolbarGroupRootOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}> {
-	type: 'single' | 'multiple';
-	value: WritableBox<string> | WritableBox<string[]>;
-}
-
-export class ToolbarGroupState {
-	static create(opts: ToolbarGroupRootOpts): ToolbarGroup {
-		const { type, ...rest } = opts;
-		const rootState = getToolbarRoot();
-		const groupState =
-			type === 'single'
-				? new ToolbarGroupSingleState(rest as ToolbarGroupSingleStateOpts, rootState)
-				: new ToolbarGroupMultipleState(rest as ToolbarGroupMultipleStateOpts, rootState);
-
-		return setToolbarGroup(groupState);
-	}
-}
-
-//
-// ITEM
-//
-
-interface ToolbarGroupItemStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-			disabled: boolean;
-		}> {}
-
-export class ToolbarGroupItemState {
-	static create(opts: ToolbarGroupItemStateOpts) {
-		const group = getToolbarGroup();
-		return new ToolbarGroupItemState(opts, group, group.root);
-	}
-	readonly opts: ToolbarGroupItemStateOpts;
-	readonly group: ToolbarGroup;
-	readonly root: ToolbarRootState;
-	readonly rovingItem: RovingFocusItem;
-	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.group.opts.disabled.current);
-
-	constructor(opts: ToolbarGroupItemStateOpts, group: ToolbarGroup, root: ToolbarRootState) {
-		this.opts = opts;
-		this.group = group;
-		this.root = root;
-		this.rovingItem = new RovingFocusItem({
-			group: this.root.rovingFocusGroup,
-			ref: this.opts.ref,
-		});
-
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	#toggleItem() {
-		if (this.#isDisabled) return;
-		this.group.toggleItem(this.opts.value.current);
-	}
-
-	onclick(_: BitsMouseEvent) {
-		if (this.#isDisabled) return;
-		this.#toggleItem();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.#isDisabled) return;
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			e.preventDefault();
-			this.#toggleItem();
-			return;
-		}
-
-		this.rovingItem.handleKeydown(e);
-	}
-
-	readonly isPressed = $derived.by(() => this.group.includesItem(this.opts.value.current));
-
-	readonly #ariaChecked = $derived.by(() => {
-		return this.group.isMulti ? undefined : getAriaChecked(this.isPressed, false);
-	});
-
-	readonly #ariaPressed = $derived.by(() => {
-		return this.group.isMulti ? boolToStr(this.isPressed) : undefined;
-	});
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: this.group.isMulti ? undefined : 'radio',
-				'data-orientation': this.root.opts.orientation.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
-				'data-state': getToggleItemDataState(this.isPressed),
-				'data-value': this.opts.value.current,
-				'aria-pressed': this.#ariaPressed,
-				'aria-checked': this.#ariaChecked,
-				[toolbarAttrs.item]: '',
-				[toolbarAttrs['group-item']]: '',
-				disabled: boolToTrueOrUndef(this.#isDisabled),
-				//
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				...this.rovingItem.props,
-			}) as const,
-	);
+export function createToolbarGroupItem(opts: SelectionItemOpts) {
+	return new SelectionItemState(opts, getToolbarGroup());
 }
 
 interface ToolbarLinkStateOpts extends WithRefOpts {}
@@ -365,9 +212,3 @@ export class ToolbarButtonState {
 			}) as const,
 	);
 }
-
-//
-// HELPERS
-//
-
-const getToggleItemDataState = (condition: boolean) => condition ? 'on' : 'off';

package/src/lib/internal/roving-focus-group.ts

@@ -55,9 +55,12 @@ type RovingFocusGroupOptions = (
 export class RovingFocusGroup {
 	readonly #opts: RovingFocusGroupOptions;
 	readonly #currentTabStopId = simpleBox<string | null>(null);
+	/** What a candidate of an attribute-marked group stamps on itself; empty for the other kinds. */
+	readonly candidateAttrs: Record<string, ''>;
 
 	constructor(opts: RovingFocusGroupOptions) {
 		this.#opts = opts;
+		this.candidateAttrs = opts.candidateAttr ? { [opts.candidateAttr]: '' } : {};
 	}
 
 	getCandidateNodes() {