alus-ui-mcp 0.3.1 → 0.3.2

package/dist/index.js

@@ -5175,6 +5175,7 @@ var BUNDLED_DATA = {
 		mergeAttrs
 	} from '$utils/a11y/index.js';
 	import Portal from '../../utility/portal/Portal.svelte';
+	import VisuallyHidden from '../../utility/visually-hidden/VisuallyHidden.svelte';
 
 	interface Props {
 		options: AutoCompleteOption<T>[];
@@ -5186,6 +5187,7 @@ var BUNDLED_DATA = {
 		required?: boolean;
 		minLength?: number;
 		maxResults?: number;
+		noResultsText?: string;
 		filter?: (option: AutoCompleteOption<T>, query: string) => boolean;
 		class?: string;
 		inputClass?: string;
@@ -5212,6 +5214,7 @@ var BUNDLED_DATA = {
 		required = false,
 		minLength = 0,
 		maxResults = 50,
+		noResultsText = 'No results',
 		filter,
 		class: className = '',
 		inputClass = '',
@@ -5369,6 +5372,10 @@ var BUNDLED_DATA = {
 </script>
 
 <div class={className}>
+	<!-- Live region announces empty/no-results state to screen readers -->
+	<VisuallyHidden as="div" role="status" aria-live="polite" aria-atomic={true}>
+		{#if showEmpty}{noResultsText}{/if}
+	</VisuallyHidden>
 	<input
 		type="text"
 		role="combobox"
@@ -5379,6 +5386,7 @@ var BUNDLED_DATA = {
 		{placeholder}
 		{value}
 		aria-autocomplete="list"
+		aria-owns={listId}
 		class={inputClass}
 		oninput={onInputEvent}
 		onkeydown={onKeydown}
@@ -5422,7 +5430,7 @@ var BUNDLED_DATA = {
 						{#if empty}
 							{@render empty({ query: value })}
 						{:else}
-							No results.
+							{noResultsText}
 						{/if}
 					</li>
 				{/if}
@@ -6060,7 +6068,8 @@ var BUNDLED_DATA = {
 		mergeAttrs(
 			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
 			interactiveStateAttrs({
-				disabled
+				disabled,
+				checked: indeterminate ? 'mixed' : undefined
 			}),
 			validationAttrs({
 				invalid: ariaInvalid === 'false' ? false : ariaInvalid === 'true' ? true : ariaInvalid,
@@ -6135,6 +6144,8 @@ var BUNDLED_DATA = {
 		swatchClass?: string;
 		'aria-label'?: string;
 		'aria-labelledby'?: string;
+		swatchesLabel?: string;
+		nativeInputLabel?: string;
 		onChange?: (value: string) => void;
 	}
 
@@ -6151,6 +6162,8 @@ var BUNDLED_DATA = {
 		swatchClass = '',
 		'aria-label': ariaLabel = 'Color',
 		'aria-labelledby': ariaLabelledby,
+		swatchesLabel = 'Color swatches',
+		nativeInputLabel = 'Color',
 		onChange
 	}: Props = $props();
 
@@ -6234,7 +6247,7 @@ var BUNDLED_DATA = {
 	{#if showNative}
 		<input
 			type="color"
-			aria-label={\`\${ariaLabel} picker\`}
+			aria-label={nativeInputLabel}
 			{disabled}
 			{value}
 			class={nativeClass}
@@ -6258,7 +6271,7 @@ var BUNDLED_DATA = {
 			class={swatchesClass}
 			role="listbox"
 			tabindex="-1"
-			aria-label="Color swatches"
+			aria-label={swatchesLabel}
 			bind:this={swatchListEl}
 			onkeydown={onSwatchKeydown}
 		>
@@ -7010,6 +7023,8 @@ var BUNDLED_DATA = {
 		files?: FileList | null;
 		accept?: string;
 		multiple?: boolean;
+		capture?: 'user' | 'environment';
+		webkitdirectory?: boolean;
 		disabled?: boolean;
 		required?: boolean;
 		name?: string;
@@ -7028,6 +7043,8 @@ var BUNDLED_DATA = {
 		files = $bindable(null),
 		accept,
 		multiple = false,
+		capture,
+		webkitdirectory,
 		disabled = false,
 		required = false,
 		name,
@@ -7069,6 +7086,8 @@ var BUNDLED_DATA = {
 		{name}
 		{accept}
 		{multiple}
+		{capture}
+		{webkitdirectory}
 		{disabled}
 		{required}
 		class="sr-only"
@@ -7084,6 +7103,8 @@ var BUNDLED_DATA = {
 		{name}
 		{accept}
 		{multiple}
+		{capture}
+		{webkitdirectory}
 		{disabled}
 		{required}
 		class={className}
@@ -7274,6 +7295,10 @@ var BUNDLED_DATA = {
 		'aria-required'?: AriaBoolean;
 		'aria-errormessage'?: string;
 		tabindex?: number;
+		autofocus?: boolean;
+		spellcheck?: boolean;
+		enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+		list?: string;
 	}
 
 	let {
@@ -7306,7 +7331,11 @@ var BUNDLED_DATA = {
 		'aria-invalid': ariaInvalid,
 		'aria-required': ariaRequired,
 		'aria-errormessage': ariaErrormessage,
-		tabindex
+		tabindex,
+		autofocus,
+		spellcheck,
+		enterkeyhint,
+		list
 	}: Props = $props();
 
 	// Build ARIA attributes using reusable utilities
@@ -7324,6 +7353,7 @@ var BUNDLED_DATA = {
 	);
 </script>
 
+<!-- svelte-ignore a11y_autofocus -->
 <input
 	{type}
 	{placeholder}
@@ -7349,6 +7379,10 @@ var BUNDLED_DATA = {
 	{onkeydown}
 	{onkeyup}
 	{tabindex}
+	{autofocus}
+	{spellcheck}
+	{enterkeyhint}
+	{list}
 	{...ariaAttrs}
 />
 `,
@@ -7480,6 +7514,7 @@ var BUNDLED_DATA = {
 		'aria-errormessage'?: string;
 		oninput?: (event: Event) => void;
 		onchange?: (value: number | null) => void;
+		autofocus?: boolean;
 	}
 
 	let {
@@ -7504,7 +7539,8 @@ var BUNDLED_DATA = {
 		'aria-invalid': ariaInvalid,
 		'aria-errormessage': ariaErrormessage,
 		oninput,
-		onchange
+		onchange,
+		autofocus
 	}: Props = $props();
 
 	let ariaAttrs: Record<string, string> = $derived(
@@ -7554,6 +7590,7 @@ var BUNDLED_DATA = {
 		>
 			\u2212
 		</button>
+		<!-- svelte-ignore a11y_autofocus -->
 		<input
 			type="number"
 			{id}
@@ -7565,6 +7602,8 @@ var BUNDLED_DATA = {
 			{readonly}
 			{required}
 			{placeholder}
+			inputmode="numeric"
+			{autofocus}
 			value={value ?? ''}
 			class={inputClass}
 			oninput={handleInput}
@@ -8062,7 +8101,7 @@ var BUNDLED_DATA = {
 	let highlighted = $state<unknown>(undefined);
 	let triggerEl = $state<HTMLElement | null>(null);
 	let contentEl = $state<HTMLElement | null>(null);
-	let opts = $state<SelectOptionEntry[]>([]);
+	let opts: SelectOptionEntry[] = [];
 
 	const triggerId = generateCounterId('select-trigger');
 	const contentId = generateCounterId('select-content');
@@ -8145,7 +8184,7 @@ var BUNDLED_DATA = {
 
 {#if children}{@render children()}{/if}
 `,
-        "SelectContent.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';\n	import { getSelectContext } from './Select.svelte';\n	import Portal from '../../utility/portal/Portal.svelte';\n\n	interface Props {\n		children?: import('svelte').Snippet;\n		class?: string;\n		placement?: 'top' | 'bottom' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';\n		offset?: number;\n		sameWidth?: boolean;\n	}\n\n	let {\n		children,\n		class: className = '',\n		placement = 'bottom-start',\n		offset: offsetPx = 4,\n		sameWidth = true\n	}: Props = $props();\n\n	const ctx = getSelectContext();\n\n	const contentRef: Attachment<HTMLDivElement> = (node) => {\n		ctx.setContentEl(node);\n\n		const trigger = ctx.triggerEl.current;\n		let cleanupAutoUpdate: (() => void) | undefined;\n\n		if (trigger) {\n			cleanupAutoUpdate = autoUpdate(trigger, node, async () => {\n				const { x, y } = await computePosition(trigger, node, {\n					placement,\n					strategy: 'fixed',\n					middleware: [\n						offset(offsetPx),\n						flip(),\n						shift({ padding: 8 }),\n						size({\n							apply({ rects, elements }) {\n								if (sameWidth) {\n									Object.assign(elements.floating.style, {\n										minWidth: `${rects.reference.width}px`\n									});\n								}\n							}\n						})\n					]\n				});\n				Object.assign(node.style, {\n					left: `${x}px`,\n					top: `${y}px`\n				});\n			});\n		}\n\n		function onPointerDown(e: PointerEvent) {\n			const t = e.target as Node;\n			if (node.contains(t) || ctx.triggerEl.current?.contains(t)) return;\n			ctx.setOpen(false);\n		}\n\n		document.addEventListener('pointerdown', onPointerDown, true);\n\n		queueMicrotask(() => node.focus());\n\n		return () => {\n			cleanupAutoUpdate?.();\n			document.removeEventListener('pointerdown', onPointerDown, true);\n			ctx.setContentEl(null);\n			ctx.triggerEl.current?.focus();\n		};\n	};\n\n	function move(dir: 1 | -1) {\n		const opts = ctx.options().filter((o) => !o.disabled);\n		if (opts.length === 0) return;\n		const cur = opts.findIndex((o) => o.value === ctx.highlighted());\n		let next: number;\n		if (cur === -1) next = dir === 1 ? 0 : opts.length - 1;\n		else next = (cur + dir + opts.length) % opts.length;\n		ctx.setHighlighted(opts[next].value);\n		opts[next].el.scrollIntoView({ block: 'nearest' });\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		switch (e.key) {\n			case 'ArrowDown':\n				e.preventDefault();\n				move(1);\n				break;\n			case 'ArrowUp':\n				e.preventDefault();\n				move(-1);\n				break;\n			case 'Home': {\n				e.preventDefault();\n				const opts = ctx.options().filter((o) => !o.disabled);\n				if (opts[0]) {\n					ctx.setHighlighted(opts[0].value);\n					opts[0].el.scrollIntoView({ block: 'nearest' });\n				}\n				break;\n			}\n			case 'End': {\n				e.preventDefault();\n				const opts = ctx.options().filter((o) => !o.disabled);\n				const last = opts.at(-1);\n				if (last) {\n					ctx.setHighlighted(last.value);\n					last.el.scrollIntoView({ block: 'nearest' });\n				}\n				break;\n			}\n			case 'Enter':\n			case ' ': {\n				e.preventDefault();\n				const h = ctx.highlighted();\n				if (h !== undefined) ctx.toggleValue(h);\n				break;\n			}\n			case 'Escape':\n				e.preventDefault();\n				ctx.setOpen(false);\n				break;\n			case 'Tab':\n				ctx.setOpen(false);\n				break;\n		}\n	}\n\n	let activeId = $derived.by(() => {\n		const opts = ctx.options();\n		const found = opts.find((o) => o.value === ctx.highlighted());\n		return found?.el.id;\n	});\n</script>\n\n{#if ctx.open()}\n	<Portal>\n		<div\n			id={ctx.contentId}\n			role=\"listbox\"\n			tabindex=\"-1\"\n			aria-labelledby={ctx.labelId() ?? ctx.triggerId}\n			aria-multiselectable={ctx.multiple() ? true : undefined}\n			aria-activedescendant={activeId}\n			class={className}\n			style=\"position:fixed; top:0; left:0;\"\n			onkeydown={onKeydown}\n			{@attach contentRef}\n		>\n			{#if children}{@render children()}{/if}\n		</div>\n	</Portal>\n{/if}\n",
+        "SelectContent.svelte": "<script lang=\"ts\">\n	import type { Attachment } from 'svelte/attachments';\n	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';\n	import { getSelectContext } from './Select.svelte';\n	import Portal from '../../utility/portal/Portal.svelte';\n\n	interface Props {\n		children?: import('svelte').Snippet;\n		class?: string;\n		placement?: 'top' | 'bottom' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';\n		offset?: number;\n		sameWidth?: boolean;\n	}\n\n	let {\n		children,\n		class: className = '',\n		placement = 'bottom-start',\n		offset: offsetPx = 4,\n		sameWidth = true\n	}: Props = $props();\n\n	const ctx = getSelectContext();\n\n	const contentRef: Attachment<HTMLDivElement> = (node) => {\n		ctx.setContentEl(node);\n\n		const trigger = ctx.triggerEl.current;\n		let cleanupAutoUpdate: (() => void) | undefined;\n\n		if (trigger) {\n			cleanupAutoUpdate = autoUpdate(trigger, node, async () => {\n				const { x, y } = await computePosition(trigger, node, {\n					placement,\n					strategy: 'fixed',\n					middleware: [\n						offset(offsetPx),\n						flip(),\n						shift({ padding: 8 }),\n						size({\n							apply({ rects, elements }) {\n								if (sameWidth) {\n									Object.assign(elements.floating.style, {\n										minWidth: `${rects.reference.width}px`\n									});\n								}\n							}\n						})\n					]\n				});\n				Object.assign(node.style, {\n					left: `${x}px`,\n					top: `${y}px`\n				});\n			});\n		}\n\n		function onPointerDown(e: PointerEvent) {\n			const t = e.target as Node;\n			if (node.contains(t) || ctx.triggerEl.current?.contains(t)) return;\n			ctx.setOpen(false);\n		}\n\n		document.addEventListener('pointerdown', onPointerDown, true);\n\n		queueMicrotask(() => node.focus());\n\n		return () => {\n			cleanupAutoUpdate?.();\n			document.removeEventListener('pointerdown', onPointerDown, true);\n			ctx.setContentEl(null);\n			ctx.triggerEl.current?.focus();\n		};\n	};\n\n	function move(dir: 1 | -1) {\n		const opts = ctx.options().filter((o) => !o.disabled);\n		if (opts.length === 0) return;\n		const cur = opts.findIndex((o) => o.value === ctx.highlighted());\n		let next: number;\n		if (cur === -1) next = dir === 1 ? 0 : opts.length - 1;\n		else next = (cur + dir + opts.length) % opts.length;\n		ctx.setHighlighted(opts[next].value);\n		opts[next].el.scrollIntoView({ block: 'nearest' });\n	}\n\n	function onKeydown(e: KeyboardEvent) {\n		// type-ahead: first-char match, wraps from current position\n		const char = e.key.length === 1 ? e.key.toLowerCase() : '';\n		if (char) {\n			e.preventDefault();\n			const opts = ctx.options().filter((o) => !o.disabled);\n			const cur = opts.findIndex((o) => o.value === ctx.highlighted());\n			const after = [...opts.slice(cur + 1), ...opts.slice(0, cur + 1)];\n			const match = after.find((o) => o.el.textContent?.trim().toLowerCase().startsWith(char));\n			if (match) {\n				ctx.setHighlighted(match.value);\n				match.el.scrollIntoView({ block: 'nearest' });\n			}\n			return;\n		}\n\n		switch (e.key) {\n			case 'ArrowDown':\n				e.preventDefault();\n				move(1);\n				break;\n			case 'ArrowUp':\n				e.preventDefault();\n				move(-1);\n				break;\n			case 'Home': {\n				e.preventDefault();\n				const opts = ctx.options().filter((o) => !o.disabled);\n				if (opts[0]) {\n					ctx.setHighlighted(opts[0].value);\n					opts[0].el.scrollIntoView({ block: 'nearest' });\n				}\n				break;\n			}\n			case 'End': {\n				e.preventDefault();\n				const opts = ctx.options().filter((o) => !o.disabled);\n				const last = opts.at(-1);\n				if (last) {\n					ctx.setHighlighted(last.value);\n					last.el.scrollIntoView({ block: 'nearest' });\n				}\n				break;\n			}\n			case 'Enter':\n			case ' ': {\n				e.preventDefault();\n				const h = ctx.highlighted();\n				if (h !== undefined) ctx.toggleValue(h);\n				break;\n			}\n			case 'Escape':\n				e.preventDefault();\n				ctx.setOpen(false);\n				break;\n			case 'Tab':\n				ctx.setOpen(false);\n				break;\n		}\n	}\n\n	let activeId = $derived.by(() => {\n		const opts = ctx.options();\n		const found = opts.find((o) => o.value === ctx.highlighted());\n		return found?.el.id;\n	});\n</script>\n\n{#if ctx.open()}\n	<Portal>\n		<div\n			id={ctx.contentId}\n			role=\"listbox\"\n			tabindex=\"-1\"\n			aria-labelledby={ctx.labelId() ?? ctx.triggerId}\n			aria-multiselectable={ctx.multiple() ? true : undefined}\n			aria-activedescendant={activeId}\n			class={className}\n			style=\"position:fixed; top:0; left:0;\"\n			onkeydown={onKeydown}\n			{@attach contentRef}\n		>\n			{#if children}{@render children()}{/if}\n		</div>\n	</Portal>\n{/if}\n",
         "SelectOption.svelte": `<script lang="ts">
 	import type { Attachment } from 'svelte/attachments';
 	import { generateCounterId } from '$utils/a11y/id.js';
@@ -8310,6 +8349,7 @@ var BUNDLED_DATA = {
 		'aria-valuetext'?: string;
 		oninput?: (event: Event) => void;
 		onchange?: (event: Event) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
 	}
 
 	let {
@@ -8328,9 +8368,12 @@ var BUNDLED_DATA = {
 		'aria-describedby': ariaDescribedby,
 		'aria-valuetext': ariaValuetext,
 		oninput,
-		onchange
+		onchange,
+		onkeydown
 	}: Props = $props();
 
+	let pageStep = $derived(Math.max(1, Math.round((max - min) / 10)));
+
 	let ariaAttrs: Record<string, string> = $derived(
 		mergeAttrs(
 			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
@@ -8345,6 +8388,17 @@ var BUNDLED_DATA = {
 			})
 		)
 	);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'PageUp') {
+			e.preventDefault();
+			value = Math.min(max, value + pageStep);
+		} else if (e.key === 'PageDown') {
+			e.preventDefault();
+			value = Math.max(min, value - pageStep);
+		}
+		onkeydown?.(e);
+	}
 </script>
 
 <input
@@ -8360,6 +8414,7 @@ var BUNDLED_DATA = {
 	class={className}
 	{oninput}
 	{onchange}
+	onkeydown={handleKeydown}
 	{...ariaAttrs}
 />
 `,
@@ -8462,7 +8517,7 @@ var BUNDLED_DATA = {
       "category": "form",
       "slug": "textarea",
       "files": {
-        "Textarea.svelte": "<script lang=\"ts\">\n	import { labelAttrs, validationAttrs, mergeAttrs } from '$utils/a11y/index.js';\n	import type { AriaBoolean } from '$types/index.js';\n\n	interface Props {\n		value?: string;\n		placeholder?: string;\n		class?: string;\n		disabled?: boolean;\n		readonly?: boolean;\n		required?: boolean;\n		name?: string;\n		id?: string;\n		rows?: number;\n		cols?: number;\n		minlength?: number;\n		maxlength?: number;\n		wrap?: 'hard' | 'soft' | 'off';\n		autocomplete?: 'on' | 'off';\n		resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n		oninput?: (event: Event) => void;\n		onchange?: (event: Event) => void;\n		onfocus?: (event: FocusEvent) => void;\n		onblur?: (event: FocusEvent) => void;\n		onkeydown?: (event: KeyboardEvent) => void;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		'aria-describedby'?: string;\n		'aria-invalid'?: AriaBoolean;\n		'aria-required'?: AriaBoolean;\n		'aria-errormessage'?: string;\n		tabindex?: number;\n	}\n\n	let {\n		value = $bindable(''),\n		placeholder = '',\n		class: className = '',\n		disabled = false,\n		readonly = false,\n		required = false,\n		name,\n		id,\n		rows,\n		cols,\n		minlength,\n		maxlength,\n		wrap,\n		autocomplete,\n		resize,\n		oninput,\n		onchange,\n		onfocus,\n		onblur,\n		onkeydown,\n		'aria-label': ariaLabel,\n		'aria-labelledby': ariaLabelledby,\n		'aria-describedby': ariaDescribedby,\n		'aria-invalid': ariaInvalid,\n		'aria-required': ariaRequired,\n		'aria-errormessage': ariaErrormessage,\n		tabindex\n	}: Props = $props();\n\n	let ariaAttrs: Record<string, string> = $derived(\n		mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),\n			validationAttrs({\n				invalid: ariaInvalid === 'false' ? false : ariaInvalid === 'true' ? true : ariaInvalid,\n				required:\n					(ariaRequired === 'false' ? false : ariaRequired === 'true' ? true : ariaRequired) ??\n					required,\n				errormessage: ariaErrormessage\n			})\n		)\n	);\n\n	let style = $derived(resize ? `resize:${resize};` : undefined);\n</script>\n\n<textarea\n	bind:value\n	{placeholder}\n	{disabled}\n	{readonly}\n	{required}\n	{name}\n	{id}\n	{rows}\n	{cols}\n	{minlength}\n	{maxlength}\n	{wrap}\n	{autocomplete}\n	{style}\n	class={className}\n	{oninput}\n	{onchange}\n	{onfocus}\n	{onblur}\n	{onkeydown}\n	{tabindex}\n	{...ariaAttrs}\n></textarea>\n",
+        "Textarea.svelte": "<script lang=\"ts\">\n	import { labelAttrs, validationAttrs, mergeAttrs } from '$utils/a11y/index.js';\n	import type { AriaBoolean } from '$types/index.js';\n\n	interface Props {\n		value?: string;\n		placeholder?: string;\n		class?: string;\n		disabled?: boolean;\n		readonly?: boolean;\n		required?: boolean;\n		name?: string;\n		id?: string;\n		rows?: number;\n		cols?: number;\n		minlength?: number;\n		maxlength?: number;\n		wrap?: 'hard' | 'soft' | 'off';\n		autocomplete?: 'on' | 'off';\n		resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n		oninput?: (event: Event) => void;\n		onchange?: (event: Event) => void;\n		onfocus?: (event: FocusEvent) => void;\n		onblur?: (event: FocusEvent) => void;\n		onkeydown?: (event: KeyboardEvent) => void;\n		'aria-label'?: string;\n		'aria-labelledby'?: string;\n		'aria-describedby'?: string;\n		'aria-invalid'?: AriaBoolean;\n		'aria-required'?: AriaBoolean;\n		'aria-errormessage'?: string;\n		tabindex?: number;\n		autofocus?: boolean;\n		spellcheck?: boolean;\n		enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n	}\n\n	let {\n		value = $bindable(''),\n		placeholder = '',\n		class: className = '',\n		disabled = false,\n		readonly = false,\n		required = false,\n		name,\n		id,\n		rows,\n		cols,\n		minlength,\n		maxlength,\n		wrap,\n		autocomplete,\n		resize,\n		oninput,\n		onchange,\n		onfocus,\n		onblur,\n		onkeydown,\n		'aria-label': ariaLabel,\n		'aria-labelledby': ariaLabelledby,\n		'aria-describedby': ariaDescribedby,\n		'aria-invalid': ariaInvalid,\n		'aria-required': ariaRequired,\n		'aria-errormessage': ariaErrormessage,\n		tabindex,\n		autofocus,\n		spellcheck,\n		enterkeyhint\n	}: Props = $props();\n\n	let ariaAttrs: Record<string, string> = $derived(\n		mergeAttrs(\n			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),\n			validationAttrs({\n				invalid: ariaInvalid === 'false' ? false : ariaInvalid === 'true' ? true : ariaInvalid,\n				required:\n					(ariaRequired === 'false' ? false : ariaRequired === 'true' ? true : ariaRequired) ??\n					required,\n				errormessage: ariaErrormessage\n			})\n		)\n	);\n\n	let style = $derived(resize ? `resize:${resize};` : undefined);\n</script>\n\n<!-- svelte-ignore a11y_autofocus -->\n<textarea\n	bind:value\n	{placeholder}\n	{disabled}\n	{readonly}\n	{required}\n	{name}\n	{id}\n	{rows}\n	{cols}\n	{minlength}\n	{maxlength}\n	{wrap}\n	{autocomplete}\n	{style}\n	class={className}\n	{oninput}\n	{onchange}\n	{onfocus}\n	{onblur}\n	{onkeydown}\n	{tabindex}\n	{autofocus}\n	{spellcheck}\n	{enterkeyhint}\n	{...ariaAttrs}\n></textarea>\n",
         "index.ts": "export { default as Textarea } from './Textarea.svelte';\n"
       }
     },
@@ -8993,9 +9048,9 @@ var BUNDLED_DATA = {
 	let { children, class: className = '' }: Props = $props();
 </script>
 
-<li class={className} aria-hidden="true" role="presentation">
+<span aria-hidden="true" class={className}>
 	{#if children}{@render children()}{:else}/{/if}
-</li>
+</span>
 `,
         "index.ts": "export { default as Breadcrumb } from './Breadcrumb.svelte';\nexport { default as BreadcrumbItem } from './BreadcrumbItem.svelte';\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';\n"
       }
@@ -9642,9 +9697,18 @@ var BUNDLED_DATA = {
 		class?: string;
 		disabled?: boolean;
 		onSelect?: () => void;
+		role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+		checked?: boolean;
 	}
 
-	let { children, class: className = '', disabled = false, onSelect }: Props = $props();
+	let {
+		children,
+		class: className = '',
+		disabled = false,
+		onSelect,
+		role = 'menuitem',
+		checked
+	}: Props = $props();
 
 	const ctx = getMenuContext();
 
@@ -9681,10 +9745,17 @@ var BUNDLED_DATA = {
 			activate();
 		}
 	}
+
+	const ariaAttrs = $derived(
+		interactiveStateAttrs({
+			disabled,
+			checked: role === 'menuitemcheckbox' || role === 'menuitemradio' ? checked : undefined
+		})
+	);
 </script>
 
 <div
-	role="menuitem"
+	{role}
 	tabindex="-1"
 	data-highlighted={highlighted || undefined}
 	data-disabled={disabled || undefined}
@@ -9692,7 +9763,7 @@ var BUNDLED_DATA = {
 	onclick={activate}
 	onpointerenter={onPointerEnter}
 	onkeydown={onKeydown}
-	{...interactiveStateAttrs({ disabled })}
+	{...ariaAttrs}
 	{@attach itemRef}
 >
 	{#if children}{@render children({ highlighted })}{/if}
@@ -9819,6 +9890,7 @@ var BUNDLED_DATA = {
 					next: () => void;
 					canPrev: boolean;
 					canNext: boolean;
+					isCurrentPage: (p: number) => boolean;
 				}
 			]
 		>;
@@ -9888,7 +9960,17 @@ var BUNDLED_DATA = {
 
 <nav class={className} aria-label={ariaLabel}>
 	{#if children}
-		{@render children({ page, totalPages, pages, goto, prev, next, canPrev, canNext })}
+		{@render children({
+			page,
+			totalPages,
+			pages,
+			goto,
+			prev,
+			next,
+			canPrev,
+			canNext,
+			isCurrentPage: (p) => p === page
+		})}
 	{/if}
 </nav>
 `,
@@ -9965,7 +10047,12 @@ var BUNDLED_DATA = {
 	let ariaAttrs: Record<string, string> = $derived(
 		mergeAttrs(
 			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
-			widgetAttrs({ orientation })
+			widgetAttrs({
+				orientation,
+				valuenow: current + 1,
+				valuemin: 1,
+				valuemax: total
+			})
 		)
 	);
 </script>
@@ -10436,6 +10523,7 @@ var BUNDLED_DATA = {
 	<div
 		{role}
 		aria-live={role === 'alert' ? 'assertive' : 'polite'}
+		aria-atomic="true"
 		data-variant={variant}
 		class={className}
 		{...ariaAttrs}
@@ -10868,7 +10956,7 @@ var BUNDLED_DATA = {
 		class: className = '',
 		indicatorClass = '',
 		id,
-		'aria-label': ariaLabel,
+		'aria-label': ariaLabel = 'Progress',
 		'aria-labelledby': ariaLabelledby,
 		'aria-describedby': ariaDescribedby
 	}: Props = $props();
@@ -11682,6 +11770,7 @@ var BUNDLED_DATA = {
 `,
         "CarouselSlides.svelte": `<script lang="ts">
 	import { getCarouselContext } from './Carousel.svelte';
+	import { VisuallyHidden } from '$components/utility/visually-hidden/index.js';
 
 	interface Props {
 		children?: import('svelte').Snippet;
@@ -11693,6 +11782,12 @@ var BUNDLED_DATA = {
 	const ctx = getCarouselContext();
 </script>
 
+<VisuallyHidden as="div">
+	<span aria-live="polite" aria-atomic="true">
+		Slide {ctx.index() + 1} of {ctx.count()}
+	</span>
+</VisuallyHidden>
+
 <div id={ctx.slidesId} class={className} aria-live={live} aria-atomic="false">
 	{#if children}{@render children()}{/if}
 </div>
@@ -12284,6 +12379,19 @@ var BUNDLED_DATA = {
 	const expanded = $derived(ctx.isExpanded(id));
 	const selected = $derived(ctx.isSelected(id));
 	let itemEl = $state<HTMLLIElement | null>(null);
+	let setsize = $state(1);
+	let posinset = $state(1);
+
+	$effect(() => {
+		if (!itemEl) return;
+		const parent = itemEl.parentElement;
+		if (!parent) return;
+		const siblings = Array.from(parent.children).filter(
+			(c) => c.getAttribute('role') === 'treeitem'
+		);
+		setsize = siblings.length;
+		posinset = siblings.indexOf(itemEl) + 1;
+	});
 
 	function onClick(e: MouseEvent) {
 		if (disabled) return;
@@ -12321,7 +12429,7 @@ var BUNDLED_DATA = {
 			selected: selected || undefined,
 			disabled
 		}),
-		widgetAttrs({ level })
+		widgetAttrs({ level, setsize, posinset })
 	)}
 >
 	{#if label}{@render label({ expanded, selected })}{/if}
@@ -28346,7 +28454,7 @@ sum(1, 2);\`;
 </main>
 `
   },
-  generated_at: "2026-05-31T14:52:05.218Z"
+  generated_at: "2026-06-20T14:48:51.850Z"
 };
 
 // ../mcp-server/src/lib/fs.ts

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "alus-ui-mcp",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "MCP stdio server for the alus-ui Svelte 5 component library — gives LLMs direct access to component source, demos, exports, and utilities",
 	"license": "MIT",
 	"type": "module",