@human-synthesis/norns-ui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"description": "UI library for the Norns ecosystem — Pug + Civet components on Tailwind v4.",
 	"license": "MIT",
 	"author": "Daniel Teodoroiu (https://humansynthesis.ai)",

package/src/components/Btn.n

@@ -16,6 +16,7 @@
 		target!="{target}"
 		rel!="{rel}"
 		class!="{classes}"
+		aria-label!="{ariaLabel}"
 		aria-disabled!="{disabled || loading ? 'true' : undefined}"
 	)
 		| {@render body()}
@@ -25,6 +26,7 @@
 		class!="{classes}"
 		disabled!="{disabled || loading}"
 		onclick!="{onclick}"
+		aria-label!="{ariaLabel}"
 		aria-busy!="{loading ? 'true' : undefined}"
 	)
 		| {@render body()}
@@ -44,6 +46,9 @@
 		href
 		target
 		rel
+		// Icon-only buttons (icon set, no children) have no accessible name
+		// without this — always pass ariaLabel for those.
+		ariaLabel
 		children
 		leading
 		trailing

package/src/components/Input.n

@@ -8,6 +8,7 @@ input(
 	disabled!="{disabled}"
 	readonly!="{readonly}"
 	autocomplete!="{autocomplete}"
+	aria-label!="{ariaLabel}"
 	aria-invalid!="{hasError ? 'true' : undefined}"
 	aria-describedby!="{describedBy}"
 	class!="{classes}"
@@ -28,6 +29,9 @@ input(
 		disabled = false
 		readonly = false
 		autocomplete
+		// A control with no visible label (a toolbar search box) still needs
+		// an accessible name — a placeholder is not a label (v6 U-12).
+		ariaLabel
 		error: explicitError = false
 		class: extra = ''
 	} .= $props()

package/src/components/TagsInput.n

@@ -4,6 +4,9 @@
 			| {tag}
 			button.chip-remove(type="button" aria-label!="{`Remove ${tag}`}" onclick!="{(e) => { e.stopPropagation(); remove(i) }}")
 				Icon(name="lucide:x" size="size-3")
+	//- The draft box is NOT the form value — posting it would submit
+	//- half-typed text and drop every committed chip. `name` rides a
+	//- hidden input carrying the committed tags instead (v6 U-11).
 	input.tags-input-field(
 		bind:this!="{inputEl}"
 		bind:value!="{draft}"
@@ -12,10 +15,12 @@
 		disabled!="{disabled}"
 		onkeydown!="{onKey}"
 		onblur!="{commitOnBlur ? commit : undefined}"
-		name!="{name}"
 		id!="{resolvedId}"
+		aria-label!="{ariaLabel}"
 		aria-invalid!="{hasError ? 'true' : undefined}"
 	)
+	+if('name')
+		input(type="hidden" name!="{name}" value!="{value.join(',')}")
 
 <script>
 	import { cn } from '@human-synthesis/norns-ui/cn'
@@ -29,8 +34,10 @@
 		commitOnBlur = true
 		separators = [',', 'Enter']
 		disabled = false
+		// Form value: committed tags, comma-joined, on a hidden input.
 		name
 		id: providedId
+		ariaLabel
 		error: explicitError = false
 		class: extra = ''
 	} .= $props()

package/src/palette-manifest.json

@@ -1,6 +1,6 @@
 {
 	"library": "@human-synthesis/norns-ui",
-	"version": "0.2.0",
+	"version": "0.2.3",
 	"counts": {
 		"components": 78,
 		"motion": 5,
@@ -372,6 +372,11 @@
 					"type": "string",
 					"required": false
 				},
+				{
+					"name": "ariaLabel",
+					"type": "string",
+					"required": false
+				},
 				{
 					"name": "class",
 					"type": "string",
@@ -773,6 +778,31 @@
 					"type": "boolean",
 					"required": false
 				},
+				{
+					"name": "value",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -1850,6 +1880,47 @@
 					"type": "InputSize",
 					"required": false
 				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "placeholder",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "readonly",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "autocomplete",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "ariaLabel",
+					"type": "string",
+					"required": false,
+					"doc": "Accessible name for a control with no visible label (a placeholder is not a label)."
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -2487,6 +2558,26 @@
 					"type": "string",
 					"required": false
 				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -2588,6 +2679,26 @@
 					"type": "string | number | string[]",
 					"required": false
 				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -2943,6 +3054,31 @@
 					"type": "boolean",
 					"required": false
 				},
+				{
+					"name": "value",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -3134,13 +3270,20 @@
 				{
 					"name": "name",
 					"type": "string",
-					"required": false
+					"required": false,
+					"doc": "Form field name — rides a hidden input carrying the committed tags, comma-joined."
 				},
 				{
 					"name": "id",
 					"type": "string",
 					"required": false
 				},
+				{
+					"name": "ariaLabel",
+					"type": "string",
+					"required": false,
+					"doc": "Accessible name for the tag-entry box when there is no visible label."
+				},
 				{
 					"name": "error",
 					"type": "boolean",
@@ -3171,6 +3314,36 @@
 					"type": "number",
 					"required": false
 				},
+				{
+					"name": "name",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "id",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "placeholder",
+					"type": "string",
+					"required": false
+				},
+				{
+					"name": "required",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "disabled",
+					"type": "boolean",
+					"required": false
+				},
+				{
+					"name": "readonly",
+					"type": "boolean",
+					"required": false
+				},
 				{
 					"name": "error",
 					"type": "boolean",

package/src/types/Btn.d.ts

@@ -25,6 +25,12 @@ export type BtnProps = Omit<HTMLButtonAttributes, 'class' | 'children'> & {
 	href?: string;
 	target?: string;
 	rel?: string;
+	/**
+	 * Accessible name, rendered as `aria-label`. Required in practice for
+	 * icon-only buttons (`icon` set, no `children`), which otherwise have
+	 * no accessible name at all.
+	 */
+	ariaLabel?: string;
 	class?: string;
 	children?: Snippet;
 	leading?: Snippet;

package/src/types/Checkbox.d.ts

@@ -3,6 +3,11 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 
 export type CheckboxProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'checked'> & {
 	checked?: boolean;
+	value?: string;
+	name?: string;
+	id?: string;
+	required?: boolean;
+	disabled?: boolean;
 	error?: boolean;
 	class?: string;
 };

package/src/types/Input.d.ts

@@ -20,6 +20,15 @@ export type InputProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'size' | '
 	value?: string | number;
 	type?: InputType;
 	size?: InputSize;
+	name?: string;
+	id?: string;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	autocomplete?: string;
+	/** Accessible name for a control with no visible label (a placeholder is not a label). */
+	ariaLabel?: string;
 	/** Force the error styling regardless of the parent Field's error state. */
 	error?: boolean;
 	class?: string;

package/src/types/Radio.d.ts

@@ -5,6 +5,10 @@ export type RadioProps = Omit<HTMLInputAttributes, 'class' | 'type'> & {
 	/** Two-way bound shared group value — pass `bind:group={selected}` from parent. */
 	group?: string;
 	value?: string;
+	name?: string;
+	id?: string;
+	required?: boolean;
+	disabled?: boolean;
 	error?: boolean;
 	class?: string;
 };

package/src/types/Select.d.ts

@@ -3,6 +3,10 @@ import type { HTMLSelectAttributes } from 'svelte/elements';
 
 export type SelectProps = Omit<HTMLSelectAttributes, 'class' | 'value' | 'children'> & {
 	value?: string | number | string[];
+	name?: string;
+	id?: string;
+	required?: boolean;
+	disabled?: boolean;
 	error?: boolean;
 	class?: string;
 	/** `<option>` children. Pass via Pug body. */

package/src/types/Switch.d.ts

@@ -3,6 +3,11 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 
 export type SwitchProps = Omit<HTMLInputAttributes, 'class' | 'type' | 'checked' | 'role'> & {
 	checked?: boolean;
+	value?: string;
+	name?: string;
+	id?: string;
+	required?: boolean;
+	disabled?: boolean;
 	error?: boolean;
 	class?: string;
 };

package/src/types/TagsInput.d.ts

@@ -7,8 +7,11 @@ export type TagsInputProps = {
 	commitOnBlur?: boolean;
 	separators?: string[];
 	disabled?: boolean;
+	/** Form field name — rides a hidden input carrying the committed tags, comma-joined. */
 	name?: string;
 	id?: string;
+	/** Accessible name for the tag-entry box when there is no visible label. */
+	ariaLabel?: string;
 	error?: boolean;
 	class?: string;
 };

package/src/types/Textarea.d.ts

@@ -4,6 +4,12 @@ import type { HTMLTextareaAttributes } from 'svelte/elements';
 export type TextareaProps = Omit<HTMLTextareaAttributes, 'class' | 'value' | 'rows'> & {
 	value?: string;
 	rows?: number;
+	name?: string;
+	id?: string;
+	placeholder?: string;
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
 	error?: boolean;
 	class?: string;
 };