@joewinke/jatui 0.36.2 → 0.37.0

package/dist/actions/floating.js

@@ -132,10 +132,20 @@ export function floating(node, options) {
         }
     }
     startAutoUpdate();
-    // Animate in after first position has been applied (next microtask)
+    // Animate in after first position has been applied (next microtask).
+    // The end value is `none`, NOT `translateY(0)`: a non-none inline transform
+    // makes this element the CONTAINING BLOCK for any descendant
+    // `position: fixed` popover — a nested ContextMenu submenu is rendered
+    // inside this panel — silently re-anchoring that popover's viewport
+    // coordinates to this element (MOS jatui-fjch2: a submenu rendered on top
+    // of its parent menu). `none` still interpolates from translateY(2px)
+    // through the identity matrix, so the entrance animation is visually
+    // identical, and once it completes the element no longer creates a
+    // containing block. (opacity < 1 only creates a stacking context, not a
+    // containing block, so it is safe to keep.)
     requestAnimationFrame(() => {
         node.style.opacity = '1';
-        node.style.transform = 'translateY(0)';
+        node.style.transform = 'none';
     });
     // Defer outside-pointer listeners to avoid catching the opening event itself
     const listenerTimer = setTimeout(() => {

package/dist/components/Button.svelte

@@ -187,6 +187,14 @@
 {/if}
 
 <style>
+	/* ── Flat by default ──────────────────────────────────────────
+	   DaisyUI v5 gives colored variants (primary, error, …) a drop shadow
+	   through --btn-shadow. jatui buttons are flat. Only the variable is
+	   cleared, so a consumer `shadow-*` utility still applies when wanted. */
+	.jatui-btn {
+		--btn-shadow: 0 0 0 0 transparent;
+	}
+
 	/* ── Press Squish ─────────────────────────────────────────────
 	   Quick down on :active, spring back on release. Transform-only.
 	   Local @media guard — motion.css is the backstop but not guaranteed. */

package/dist/components/ContextMenu.svelte

@@ -68,9 +68,19 @@
 		 * menus; the component sets this to `false` when it recursively renders
 		 * itself as a nested submenu so that arrow-navigating over a parent item
 		 * with a submenu doesn't yank keyboard focus out of the parent row.
-		 * ArrowRight from the parent explicitly focuses into the submenu.
+		 * The initial programmatic autofocus does NOT open a submenu that
+		 * happens to live on the first item — a submenu opens on hover, click,
+		 * Enter/Space or ArrowRight only. ArrowRight from the parent explicitly
+		 * focuses into the submenu.
 		 */
 		autoFocus?: boolean;
+		/**
+		 * Floating-ui placement for this menu panel. Top-level menus anchor at
+		 * the cursor and open 'bottom-start'; a nested submenu passes
+		 * 'left-start' when it must flip to the parent's LEFT edge because
+		 * there is no room to the right of it.
+		 */
+		placement?: 'bottom-start' | 'left-start';
 		/**
 		 * Called when an action item (not a submenu owner) is chosen, before
 		 * this menu closes. A nested submenu uses it to close the WHOLE menu
@@ -89,6 +99,7 @@
 		class: className = '',
 		onClose,
 		autoFocus = true,
+		placement: placementProp = 'bottom-start',
 		onItemSelected
 	}: Props = $props();
 
@@ -97,6 +108,15 @@
 	let submenuIndex = $state<number | null>(null);
 	let submenuX = $state(0);
 	let submenuY = $state(0);
+	// 'bottom-start' when the submenu opens to the right of the parent item,
+	// 'left-start' when it must flip to the parent's LEFT edge (viewport edge).
+	let submenuPlacement = $state<'bottom-start' | 'left-start'>('bottom-start');
+
+	// Suppresses the 'onfocus' open-submenu side effect DURING the menu's
+	// own initial programmatic autofocus, so a first item that happens to
+	// own a submenu does not instantly open it before any user interaction
+	// (the submenu still opens on hover, click, Enter/Space or ArrowRight).
+	let suppressFocusOpen = false;
 
 	/**
 	 * Unique id for THIS menu panel. The roving-focus queries below target
@@ -127,8 +147,20 @@
 
 	function openSubmenuAt(el: HTMLElement, index: number) {
 		const rect = el.getBoundingClientRect();
-		submenuX = rect.right;
+		// The submenu panel is `min-w-[200px]`. When there is no room to the
+		// right of the parent item (viewport edge), anchor the submenu at the
+		// parent's LEFT edge with placement 'left-start' so the two menus
+		// never overlap.
+		const SUBMENU_WIDTH = 200;
+		let nextPlacement: 'bottom-start' | 'left-start' = 'bottom-start';
+		let anchorX = rect.right;
+		if (rect.right + SUBMENU_WIDTH > window.innerWidth) {
+			anchorX = rect.left;
+			nextPlacement = 'left-start';
+		}
+		submenuX = anchorX;
 		submenuY = rect.top;
+		submenuPlacement = nextPlacement;
 		submenuIndex = index;
 	}
 
@@ -335,7 +367,11 @@
 	$effect(() => {
 		if (open && menuEl && autoFocus) {
 			requestAnimationFrame(() => {
+				// .focus() dispatches the focus event synchronously, so the
+				// guard brackets this call exactly.
+				suppressFocusOpen = true;
 				menuItemButtons()[0]?.focus();
+				suppressFocusOpen = false;
 			});
 		}
 	});
@@ -354,7 +390,7 @@
 		data-context-menu={menuId}
 		class="min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
 		style="z-index: {zIndex};"
-		use:floating={{ anchor, placement: 'bottom-start', flip: true, shift: true, offset: 2, onDismiss: close }}
+		use:floating={{ anchor, placement: placementProp, flip: true, shift: true, offset: 2, onDismiss: close }}
 		onkeydown={handleKeydown}
 	>
 		{#if header}
@@ -388,6 +424,10 @@
 					onclick={(e) => handleItemClick(item, i, e)}
 					onpointerenter={(e) => handleItemPointerEnter(item, i, e)}
 					onfocus={(e) => {
+						// A programmatic autofocus (the initial focus when the menu
+						// opens) must NOT open the submenu — only user gestures
+						// (hover, click, Enter/Space, ArrowRight) do.
+						if (suppressFocusOpen) return;
 						if (item.submenu?.length && !item.disabled) {
 							openSubmenuAt(e.currentTarget as HTMLElement, i);
 						} else {
@@ -427,6 +467,7 @@
 				open={true}
 				x={submenuX}
 				y={submenuY}
+				placement={submenuPlacement}
 				items={items[submenuIndex].submenu ?? []}
 				zIndex={zIndex + 1}
 				autoFocus={false}

package/dist/components/ContextMenu.svelte.d.ts

@@ -21,9 +21,19 @@ interface Props {
      * menus; the component sets this to `false` when it recursively renders
      * itself as a nested submenu so that arrow-navigating over a parent item
      * with a submenu doesn't yank keyboard focus out of the parent row.
-     * ArrowRight from the parent explicitly focuses into the submenu.
+     * The initial programmatic autofocus does NOT open a submenu that
+     * happens to live on the first item — a submenu opens on hover, click,
+     * Enter/Space or ArrowRight only. ArrowRight from the parent explicitly
+     * focuses into the submenu.
      */
     autoFocus?: boolean;
+    /**
+     * Floating-ui placement for this menu panel. Top-level menus anchor at
+     * the cursor and open 'bottom-start'; a nested submenu passes
+     * 'left-start' when it must flip to the parent's LEFT edge because
+     * there is no room to the right of it.
+     */
+    placement?: 'bottom-start' | 'left-start';
     /**
      * Called when an action item (not a submenu owner) is chosen, before
      * this menu closes. A nested submenu uses it to close the WHOLE menu

package/dist/components/TextInput.svelte

@@ -7,8 +7,35 @@
 	 * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
 	 */
 
-	interface Props {
-		label: string;
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	/**
+	 * Any other native attribute (aria-label, aria-labelledby, data-*, title,
+	 * list, inputmode, step, min, max, event handlers…) passes straight through
+	 * to the <input>. `label` is optional: a compact input with no visible label
+	 * must pass `aria-label` (or `aria-labelledby`) to get an accessible name.
+	 */
+	interface Props
+		extends Omit<
+			HTMLInputAttributes,
+			| 'value'
+			| 'type'
+			| 'size'
+			| 'class'
+			| 'id'
+			| 'name'
+			| 'autocomplete'
+			| 'placeholder'
+			| 'required'
+			| 'disabled'
+			| 'readonly'
+			| 'maxlength'
+			| 'minlength'
+			| 'pattern'
+			| 'children'
+		> {
+		/** Visible label. Omit it only with `aria-label` / `aria-labelledby`. */
+		label?: string;
 		value?: string;
 		placeholder?: string;
 		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
@@ -54,7 +81,8 @@
 		class: className = '',
 		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
 		name = '',
-		autocomplete = ''
+		autocomplete = '',
+		...rest
 	}: Props = $props();
 
 	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
@@ -97,7 +125,7 @@
 </script>
 
 <div class="form-control w-full" class:jatui-float-wrap={floatingLabel}>
-	{#if !floatingLabel}
+	{#if label && !floatingLabel}
 		<label for={id} class="label">
 			<span class="text-[0.8125rem] font-medium text-base-content/85">
 				{label}
@@ -110,6 +138,7 @@
 
 	<div class:jatui-float-field={floatingLabel}>
 		<input
+			{...rest}
 			bind:this={inputEl}
 			{id}
 			{name}
@@ -124,12 +153,16 @@
 			autocomplete={autocomplete as AutoFill}
 			bind:value
 			class={inputClass}
-			aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
+			aria-describedby={error
+				? `${id}-error`
+				: helpText
+					? `${id}-help`
+					: rest['aria-describedby']}
 			aria-invalid={error ? 'true' : 'false'}
 			onanimationend={() => inputEl?.classList.remove('jatui-input-shake')}
 		/>
 
-		{#if floatingLabel}
+		{#if label && floatingLabel}
 			<label for={id} class="jatui-float-label">
 				{label}
 				{#if required}

package/dist/components/TextInput.svelte.d.ts

@@ -1,12 +1,20 @@
 /**
- * TextInput Component
- *
- * Labeled text input with validation, error state, help text, and character count.
- * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
- * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
+     * TextInput Component
+     *
+     * Labeled text input with validation, error state, help text, and character count.
+     * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
+     * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
+     */
+import type { HTMLInputAttributes } from 'svelte/elements';
+/**
+ * Any other native attribute (aria-label, aria-labelledby, data-*, title,
+ * list, inputmode, step, min, max, event handlers…) passes straight through
+ * to the <input>. `label` is optional: a compact input with no visible label
+ * must pass `aria-label` (or `aria-labelledby`) to get an accessible name.
  */
-interface Props {
-    label: string;
+interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'size' | 'class' | 'id' | 'name' | 'autocomplete' | 'placeholder' | 'required' | 'disabled' | 'readonly' | 'maxlength' | 'minlength' | 'pattern' | 'children'> {
+    /** Visible label. Omit it only with `aria-label` / `aria-labelledby`. */
+    label?: string;
     value?: string;
     placeholder?: string;
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';

package/dist/components/basic/Checkbox.svelte

@@ -1,5 +1,20 @@
 <script lang="ts">
-	interface Props {
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	/**
+	 * Any other native attribute (aria-label, aria-describedby, data-*, title,
+	 * required, form…) passes straight through to the <input>. Without a visible
+	 * `label`, pass `aria-label` so the checkbox has an accessible name.
+	 *
+	 * The click target is always at least 24×24px (WCAG 2.5.8), even at
+	 * size xs/sm: the input sits in a <label> box with a 24px minimum, and a
+	 * click anywhere in that box toggles it.
+	 */
+	interface Props
+		extends Omit<
+			HTMLInputAttributes,
+			'type' | 'checked' | 'size' | 'disabled' | 'name' | 'id' | 'onchange' | 'class' | 'children'
+		> {
 		checked?: boolean;
 		label?: string;
 		size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -22,7 +37,8 @@
 		name,
 		id,
 		onchange,
-		class: className = ''
+		class: className = '',
+		...rest
 	}: Props = $props();
 
 	const sizeClass = $derived({ xs: 'checkbox-xs', sm: 'checkbox-sm', md: '', lg: 'checkbox-lg' }[size]);
@@ -57,8 +73,9 @@
 </script>
 
 {#if label}
-	<label class="flex cursor-pointer items-center gap-2" for={inputId}>
+	<label class="jatui-checkbox-target jatui-checkbox-row" for={inputId}>
 		<input
+			{...rest}
 			bind:this={inputEl}
 			type="checkbox"
 			{name}
@@ -71,15 +88,36 @@
 		<span class="label-text">{label}</span>
 	</label>
 {:else}
-	<input
-		bind:this={inputEl}
-		type="checkbox"
-		{name}
-		{id}
-		class={inputClass}
-		checked={checked}
-		{disabled}
-		onchange={handleChange}
-		aria-label={label}
-	/>
+	<label class="jatui-checkbox-target jatui-checkbox-bare">
+		<input
+			{...rest}
+			bind:this={inputEl}
+			type="checkbox"
+			{name}
+			{id}
+			class={inputClass}
+			checked={checked}
+			{disabled}
+			onchange={handleChange}
+		/>
+	</label>
 {/if}
+
+<style>
+	/* 24px minimum target (WCAG 2.5.8). The visual checkbox keeps its size. */
+	.jatui-checkbox-target {
+		min-height: 1.5rem;
+		align-items: center;
+		cursor: pointer;
+	}
+	.jatui-checkbox-row {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.jatui-checkbox-bare {
+		display: inline-flex;
+		justify-content: center;
+		min-width: 1.5rem;
+		vertical-align: middle;
+	}
+</style>

package/dist/components/basic/Checkbox.svelte.d.ts

@@ -1,4 +1,14 @@
-interface Props {
+import type { HTMLInputAttributes } from 'svelte/elements';
+/**
+ * Any other native attribute (aria-label, aria-describedby, data-*, title,
+ * required, form…) passes straight through to the <input>. Without a visible
+ * `label`, pass `aria-label` so the checkbox has an accessible name.
+ *
+ * The click target is always at least 24×24px (WCAG 2.5.8), even at
+ * size xs/sm: the input sits in a <label> box with a 24px minimum, and a
+ * click anywhere in that box toggles it.
+ */
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | 'size' | 'disabled' | 'name' | 'id' | 'onchange' | 'class' | 'children'> {
     checked?: boolean;
     label?: string;
     size?: 'xs' | 'sm' | 'md' | 'lg';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.36.2",
+  "version": "0.37.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",