@human-synthesis/norns-ui 0.2.2 → 0.2.4

package/package.json

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

package/src/components/DataTable.n

@@ -14,14 +14,14 @@
 						+if('!col.sortable')
 							| {col.label ?? col.key}
 		tbody
-			+if('rows.length === 0')
+			+if('list.length === 0')
 				tr.data-table-empty
 					td(colspan!="{columns.length}")
 						+if('empty')
 							| {@render empty()}
 						+if('!empty')
 							| {emptyMessage}
-			+each('rows as row, i')
+			+each('list as row, i')
 				tr(onclick!="{onrowclick ? () => onrowclick(row, i) : undefined}" class!="{onrowclick ? 'data-table-row-clickable' : ''}")
 					+each('columns as col')
 						td(class!="{col.cellClass ?? ''}")
@@ -36,7 +36,8 @@
 
 	{
 		columns = []
-		rows = []
+		rows = undefined
+		data = undefined
 		striped = false
 		dense = false
 		stickyHeader = false
@@ -49,6 +50,10 @@
 		class: extra = ''
 	} .= $props()
 
+	// the spec generator binds queries to `data` (the palette-wide channel);
+	// hand-written callers keep `rows` — either works, `rows` wins
+	list := rows ?? data ?? []
+
 	wrapClasses := cn
 		'data-table-root'
 		striped && 'data-table-striped'

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.2",
+	"version": "0.2.3",
 	"counts": {
 		"components": 78,
 		"motion": 5,
@@ -778,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",
@@ -1019,6 +1044,12 @@
 					"type": "Record<string, unknown>[]",
 					"required": false
 				},
+				{
+					"name": "data",
+					"type": "Record<string, unknown>[]",
+					"required": false,
+					"doc": "Alias for `rows` — the prop a generated Page binds a Query result to."
+				},
 				{
 					"name": "striped",
 					"type": "boolean",
@@ -1855,6 +1886,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",
@@ -2492,6 +2564,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",
@@ -2593,6 +2685,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",
@@ -2948,6 +3060,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",
@@ -3139,13 +3276,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",
@@ -3176,6 +3320,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/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/DataTable.d.ts

@@ -12,6 +12,8 @@ export type DataTableColumn = {
 export type DataTableProps = {
 	columns?: DataTableColumn[];
 	rows?: Record<string, unknown>[];
+	/** Alias for `rows` — the prop a generated Page binds a Query result to. */
+	data?: Record<string, unknown>[];
 	striped?: boolean;
 	dense?: boolean;
 	stickyHeader?: boolean;

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;
 };