@human-synthesis/norns-ui 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-synthesis/norns-ui",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"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/palette-manifest.json

@@ -1,6 +1,6 @@
 {
 	"library": "@human-synthesis/norns-ui",
-	"version": "0.1.0",
+	"version": "0.2.2",
 	"counts": {
 		"components": 78,
 		"motion": 5,
@@ -372,6 +372,11 @@
 					"type": "string",
 					"required": false
 				},
+				{
+					"name": "ariaLabel",
+					"type": "string",
+					"required": false
+				},
 				{
 					"name": "class",
 					"type": "string",

package/src/styles/atoms.css

@@ -1697,3 +1697,73 @@
 	}
 	.carousel-dot-active { background-color: var(--color-bg-inverse); }
 }
+
+@layer components {
+	/* ============================================================ */
+	/* App shell — the generated +layout.svelte (spec-first apps)   */
+	/* ============================================================ */
+
+	.norns-shell {
+		@apply grid min-h-screen;
+		grid-template-columns: 15rem minmax(0, 1fr);
+	}
+	.norns-sidebar {
+		@apply sticky top-0 flex h-screen flex-col gap-4 overflow-y-auto border-r px-3 py-4;
+		border-color: var(--color-border);
+		background-color: var(--color-bg);
+	}
+	.norns-brand {
+		@apply px-2 text-sm font-semibold tracking-wide;
+		color: var(--color-fg);
+	}
+	.norns-nav {
+		@apply flex flex-col gap-0.5;
+	}
+	.norns-nav a {
+		@apply block px-2 py-1.5 text-sm no-underline;
+		color: var(--color-fg-muted);
+		border-radius: var(--ui-radius-sm);
+		transition:
+			background-color var(--ui-motion-fast) var(--ui-motion-ease),
+			color var(--ui-motion-fast) var(--ui-motion-ease);
+	}
+	.norns-nav a:hover {
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.norns-nav a:focus-visible {
+		outline: none;
+		box-shadow: var(--ui-focus-ring);
+	}
+	.norns-nav a[aria-current='page'] {
+		@apply font-medium;
+		background-color: var(--color-bg-muted);
+		color: var(--color-fg);
+	}
+	.norns-main {
+		@apply min-w-0 px-8 py-6;
+	}
+	@media (max-width: 40rem) {
+		.norns-shell {
+			grid-template-columns: 1fr;
+		}
+		.norns-sidebar {
+			@apply static h-auto flex-row items-center gap-3 border-r-0 border-b py-2;
+		}
+		.norns-nav {
+			@apply flex-1 flex-row overflow-x-auto;
+		}
+		.norns-main {
+			@apply px-4 py-4;
+		}
+	}
+
+	/* Generated page container: readable width, consistent rhythm. */
+	.norns-page {
+		@apply mx-auto flex w-full flex-col gap-6;
+		max-width: 72rem;
+	}
+	.norns-page-title {
+		@apply text-2xl font-semibold tracking-tight leading-snug;
+	}
+}

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;