@joewinke/jatui 0.36.3 → 0.37.0

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/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.3",
+  "version": "0.37.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",