@dorsk/tsumikit 0.34.0 → 0.35.0

package/dist/components/molecules/Menu.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	// Dropdown menu: a Popover whose panel is a WAI-ARIA `menu`. Items are
+	// Dropdown menu: a Popover whose panel carries the WAI-ARIA `menu` role. Items are
 	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
@@ -112,13 +112,15 @@
 	{hitArea}
 	{disabled}
 	{gap}
+	role="menu"
+	haspopup="menu"
 	{onclose}
 	onopen={() => {
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}
 >
-	<div bind:this={listEl} role="menu" aria-label={label} class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
+	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button
 				type="button"

package/dist/components/molecules/Popover.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	// Floating panel built on the native Popover API. The platform gives us the
 	// top layer (no z-index races, renders above dialogs/sticky headers), light
-	// dismiss (click-outside), Escape-to-close and correct focus/`aria-expanded`
-	// wiring between the invoker and the panel — all declaratively via the
-	// `popovertarget` / `popover` attributes. We add only smart placement:
-	// position the panel against its trigger and flip into the viewport when it
-	// would overflow. (CSS anchor positioning would replace the JS here once it
+	// dismiss (click-outside), Escape-to-close and focus wiring between the
+	// invoker and the panel — declaratively via the `popovertarget` / `popover`
+	// attributes. We add explicit `aria-expanded` / `aria-haspopup` on the
+	// trigger (the implicit popover semantics are not exposed uniformly by
+	// assistive tech), the panel role, and smart placement: position the panel
+	// against its trigger and flip into the viewport when it would overflow. (CSS anchor positioning would replace the JS here once it
 	// ships beyond Chromium; the popover semantics above are the hard part and
 	// are broadly supported today.)
 	import { tick, type Snippet } from 'svelte';
@@ -15,6 +16,8 @@
 	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
 	type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 	type TriggerSize = 'sm' | 'md' | 'lg';
+	type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
+	type HasPopup = 'menu' | 'dialog' | 'listbox' | true;
 
 	let {
 		placement = 'bottom-start',
@@ -32,6 +35,8 @@
 		block = false,
 		hitArea = 'auto',
 		disabled = false,
+		role = 'dialog',
+		haspopup = 'dialog',
 		onopen,
 		onclose
 	}: {
@@ -63,6 +68,10 @@
 		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		disabled?: boolean;
+		/** ARIA role of the panel. */
+		role?: PanelRole;
+		/** `aria-haspopup` announced on the trigger. */
+		haspopup?: HasPopup;
 		onopen?: () => void;
 		onclose?: () => void;
 	} = $props();
@@ -78,6 +87,7 @@
 	// reopening is instant. The panel element itself always renders — the native
 	// `popovertarget` wiring needs its id present in the DOM at all times.
 	let opened = $state(false);
+	let open = $state(false);
 
 	function reposition() {
 		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
@@ -87,6 +97,7 @@
 		if (e.newState === 'open') {
 			const firstOpen = !opened;
 			opened = true;
+			open = true;
 			// On the first open the content snippet mounts this tick; measure the
 			// panel only once it has, so placement accounts for its real size.
 			if (firstOpen) await tick();
@@ -95,6 +106,7 @@
 			addEventListener('resize', reposition);
 			onopen?.();
 		} else {
+			open = false;
 			removeEventListener('scroll', reposition, true);
 			removeEventListener('resize', reposition);
 			onclose?.();
@@ -126,6 +138,8 @@
 	class:trigger-tone-danger={tone === 'danger'}
 	popovertarget={id}
 	aria-label={label}
+	aria-haspopup={haspopup}
+	aria-expanded={open}
 	{disabled}
 >
 	{@render trigger()}
@@ -136,7 +150,7 @@
 	{id}
 	popover="auto"
 	class="pop-panel"
-	role="group"
+	{role}
 	aria-label={label}
 	ontoggle={onToggle}
 >

package/dist/components/molecules/Popover.svelte.d.ts

@@ -3,6 +3,8 @@ type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
 type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 type TriggerSize = 'sm' | 'md' | 'lg';
+type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
+type HasPopup = 'menu' | 'dialog' | 'listbox' | true;
 type $$ComponentProps = {
     placement?: Placement;
     gap?: number;
@@ -32,6 +34,10 @@ type $$ComponentProps = {
     /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     disabled?: boolean;
+    /** ARIA role of the panel. */
+    role?: PanelRole;
+    /** `aria-haspopup` announced on the trigger. */
+    haspopup?: HasPopup;
     onopen?: () => void;
     onclose?: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",