entasis 0.11.0 → 0.12.0

package/dist/components/Menu/MenuMirroredIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    icon: Snippet;
+};
+declare const MenuMirroredIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuMirroredIcon = ReturnType<typeof MenuMirroredIcon>;
+export default MenuMirroredIcon;

package/dist/components/Menu/MenuRadioGroup.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { createBindableValue } from '../../utils/state.svelte.js';
+	import type { Colors, Density, Sizes } from '../../types/theme.js';
+	import { checkIcon } from '../Icons/check.js';
+	import MenuOption from '../MenuOption/MenuOption.svelte';
+	import { useMenuOptionTheme } from '../MenuOption/menuOption.theme.js';
+	import Slot from '../Slot/Slot.svelte';
+	import type { MenuRadioGroupItem, MenuRadioItem } from './menu.props.js';
+	import { useMenuTheme, type MenuThemeProps } from './menu.theme.js';
+
+	let {
+		item,
+		id,
+		density,
+		size,
+		color,
+		theme,
+		rowAttach
+	}: {
+		item: MenuRadioGroupItem;
+		/** A unique id for the group's label. */
+		id: string;
+		density: Density;
+		size: Sizes;
+		color?: Colors;
+		theme?: MenuThemeProps;
+		/** Registers each radio row with the menu's keyboard navigation. */
+		rowAttach?: Attachment<HTMLElement>;
+	} = $props();
+
+	const menuClasses = $derived(useMenuTheme(theme));
+	const optionClasses = $derived(useMenuOptionTheme(theme?.option));
+	// A `value` makes the group controlled: the parent decides what a press changes.
+	const current = createBindableValue<string | undefined>(
+		() => item.value,
+		() => {},
+		() => item.defaultValue
+	);
+
+	// Choosing the checked radio changes nothing. The consumer's `onclick` runs first, and
+	// `preventDefault()` there refuses the choice.
+	const choose = (radio: MenuRadioItem, event: MouseEvent) => {
+		radio.onclick?.(event);
+		if (event.defaultPrevented || current.value === radio.value) return;
+		current.value = radio.value;
+		item.onValueChange?.(radio.value);
+	};
+
+	const rowProps = (radio: MenuRadioItem) => {
+		/* eslint-disable @typescript-eslint/no-unused-vars -- Remove the menu fields before forwarding the rest to the row. */
+		const {
+			key: _key,
+			value: _value,
+			onclick: _onclick,
+			closeOnClick: _closeOnClick,
+			suffix: _suffix,
+			...rest
+		} = radio;
+		/* eslint-enable @typescript-eslint/no-unused-vars */
+		return rest;
+	};
+</script>
+
+<div
+	role="group"
+	aria-labelledby={item.label ? id : undefined}
+	class={menuClasses.group({ density })}
+>
+	{#if item.label}
+		<div {id} aria-hidden="true" class={menuClasses.groupLabel({ density })}>
+			<Slot render={item.label} />
+		</div>
+	{/if}
+	{#each item.items as radio (radio.key ?? radio.value)}
+		{@const checked = current.value === radio.value}
+		{#snippet suffix()}
+			<Slot render={radio.suffix} />
+			<span
+				class={optionClasses.indicator({ checked })}
+				data-checked={checked ? 'true' : 'false'}
+				aria-hidden="true"
+			>
+				{@render checkIcon()}
+			</span>
+		{/snippet}
+		<MenuOption
+			role="menuitemradio"
+			{density}
+			{size}
+			{...color ? { color } : {}}
+			{...rowProps(radio)}
+			{suffix}
+			disabled={item.disabled || radio.disabled}
+			selected={checked}
+			closeOnClick={radio.closeOnClick ?? item.closeOnClick ?? false}
+			theme={theme?.option}
+			onclick={(event) => choose(radio, event)}
+			{@attach rowAttach}
+		/>
+	{/each}
+</div>

package/dist/components/Menu/MenuRadioGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Attachment } from 'svelte/attachments';
+import type { Colors, Density, Sizes } from '../../types/theme.js';
+import type { MenuRadioGroupItem } from './menu.props.js';
+import { type MenuThemeProps } from './menu.theme.js';
+type $$ComponentProps = {
+    item: MenuRadioGroupItem;
+    /** A unique id for the group's label. */
+    id: string;
+    density: Density;
+    size: Sizes;
+    color?: Colors;
+    theme?: MenuThemeProps;
+    /** Registers each radio row with the menu's keyboard navigation. */
+    rowAttach?: Attachment<HTMLElement>;
+};
+declare const MenuRadioGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
+export default MenuRadioGroup;

package/dist/components/Menu/MenuSearchField.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Sizes } from '../../types/theme.js';
+	import { magnifyingGlassIcon } from '../Icons/magnifyingGlass.js';
+	import { useMenuTheme, type MenuThemeProps } from './menu.theme.js';
+
+	let {
+		value,
+		placeholder,
+		label,
+		size,
+		theme,
+		listId,
+		activeId,
+		input = $bindable(),
+		oninput,
+		onkeydown
+	}: {
+		value: string;
+		placeholder: string;
+		label: string;
+		size: Sizes;
+		theme?: MenuThemeProps;
+		/** The `role="menu"` element the field filters and drives. */
+		listId: string;
+		/** The id of the highlighted row, which the field names as its active descendant. */
+		activeId?: string;
+		/** The input element, for the menu to focus it. */
+		input?: HTMLInputElement | null;
+		oninput: (value: string) => void;
+		onkeydown: (event: KeyboardEvent) => void;
+	} = $props();
+
+	const classes = $derived(useMenuTheme(theme));
+</script>
+
+<div class={classes.search({ size })}>
+	{@render magnifyingGlassIcon({ class: classes.searchIcon({ size }) })}
+	<input
+		bind:this={input}
+		class={classes.searchInput({ size })}
+		type="text"
+		autocomplete="off"
+		autocorrect="off"
+		autocapitalize="off"
+		spellcheck="false"
+		aria-label={label}
+		aria-controls={listId}
+		aria-activedescendant={activeId}
+		{placeholder}
+		{value}
+		oninput={(event) => oninput(event.currentTarget.value)}
+		{onkeydown}
+	/>
+</div>

package/dist/components/Menu/MenuSearchField.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Sizes } from '../../types/theme.js';
+import { type MenuThemeProps } from './menu.theme.js';
+type $$ComponentProps = {
+    value: string;
+    placeholder: string;
+    label: string;
+    size: Sizes;
+    theme?: MenuThemeProps;
+    /** The `role="menu"` element the field filters and drives. */
+    listId: string;
+    /** The id of the highlighted row, which the field names as its active descendant. */
+    activeId?: string;
+    /** The input element, for the menu to focus it. */
+    input?: HTMLInputElement | null;
+    oninput: (value: string) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+};
+declare const MenuSearchField: import("svelte").Component<$$ComponentProps, {}, "input">;
+type MenuSearchField = ReturnType<typeof MenuSearchField>;
+export default MenuSearchField;