@human-synthesis/norns-ui 0.0.5 → 0.0.7

package/src/styles/tokens.css

@@ -145,6 +145,31 @@
 	--ui-h-sm: 1.75rem; /* 28px */
 	--ui-h-md: 2.25rem; /* 36px */
 	--ui-h-lg: 2.75rem; /* 44px */
+
+	/* Square icon-button sizes (close buttons, nav arrows, chevron triggers).
+	 * Distinct from full button heights above. */
+	--ui-icon-btn-sm: 1.5rem;  /* 24px */
+	--ui-icon-btn-md: 1.75rem; /* 28px */
+	--ui-icon-btn-lg: 2.25rem; /* 36px */
+
+	/* Motion timings — shared so animations feel coordinated. */
+	--ui-motion-fast: 150ms;
+	--ui-motion-med: 200ms;
+	--ui-motion-slow: 300ms;
+	--ui-motion-ease: cubic-bezier(0.2, 0, 0, 1);
+
+	/* Elevation — the only shadow vocabulary in the library.
+	 * elev-1: subtle (cards, hover-lifts)
+	 * elev-2: floating menus, popovers, tooltips
+	 * elev-3: dialogs, sheets
+	 */
+	--ui-elev-1: 0 1px 2px oklch(0% 0 0 / 0.06), 0 1px 3px oklch(0% 0 0 / 0.04);
+	--ui-elev-2: 0 4px 12px -2px oklch(0% 0 0 / 0.08), 0 2px 4px -1px oklch(0% 0 0 / 0.04);
+	--ui-elev-3: 0 16px 32px -8px oklch(0% 0 0 / 0.18), 0 4px 8px -4px oklch(0% 0 0 / 0.06);
+
+	/* Single canonical focus indicator. 2px halo on the surface color + 2px
+	 * ring color outside it, so the ring stays visible on any background. */
+	--ui-focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ring);
 }
 
 /* === Dark theme ===
@@ -173,6 +198,14 @@
 	/* Ring brightens slightly so it stays visible on dark surfaces */
 	--color-ring: var(--color-primary-400);
 
+	/* Dark-mode elevation — true-black shadow on dark bg disappears, so we
+	 * lean on darker shadow + the existing border to convey depth. */
+	--ui-elev-1: 0 1px 2px oklch(0% 0 0 / 0.4);
+	--ui-elev-2: 0 4px 12px -2px oklch(0% 0 0 / 0.5), 0 2px 4px -1px oklch(0% 0 0 / 0.3);
+	--ui-elev-3: 0 16px 32px -8px oklch(0% 0 0 / 0.6), 0 4px 8px -4px oklch(0% 0 0 / 0.4);
+
+	--ui-focus-ring: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-ring);
+
 	/* Feedback — flip to deep tinted bg + light fg */
 	--color-success-bg: oklch(28% 0.05 152);
 	--color-success-fg: var(--color-success-200);

package/src/types/Collapsible.d.ts

@@ -5,6 +5,7 @@ export type CollapsibleProps = {
 	title?: string;
 	trigger?: Snippet;
 	children?: Snippet;
+	onopenchange?: (open: boolean) => void;
 	class?: string;
 };
 

package/src/types/ContextMenu.d.ts

@@ -5,7 +5,12 @@ export type ContextMenuItem = {
 	icon?: string;
 	separator?: boolean;
 	disabled?: boolean;
-	onSelect?: (event: Event) => void;
+	onSelect?: () => void;
+	/**
+	 * NOTE: nested submenus are not supported in 0.0.6+ (the property is
+	 * accepted but children are ignored). Re-introduce when the upstream
+	 * design needs them.
+	 */
 	children?: ContextMenuItem[];
 };
 

package/src/types/DatePicker.d.ts

@@ -3,11 +3,16 @@ import type { Component } from 'svelte';
 export type DatePickerProps = {
 	/** ISO date string (YYYY-MM-DD). Bindable. */
 	value?: string;
+	/** Whether the popover is open. Bindable. */
+	open?: boolean;
 	min?: string;
 	max?: string;
+	placeholder?: string;
 	disabled?: boolean;
-	readonly?: boolean;
-	required?: boolean;
+	/** Close the popover automatically once a date is picked (default true). */
+	closeOnSelect?: boolean;
+	/** aria-label override; defaults to "Pick a date". */
+	label?: string;
 	name?: string;
 	id?: string;
 	error?: boolean;

package/src/types/DateRangePicker.d.ts

@@ -4,12 +4,12 @@ export type DateRange = { start: string; end: string };
 
 export type DateRangePickerProps = {
 	value?: DateRange;
+	/** Whether the popover is open. Bindable. */
+	open?: boolean;
 	min?: string;
 	max?: string;
+	placeholder?: string;
 	disabled?: boolean;
-	required?: boolean;
-	/** Form name. The two inputs serialize as `${name}_start` and `${name}_end`. */
-	name?: string;
 	class?: string;
 };
 

package/src/types/Dialog.d.ts

@@ -5,6 +5,10 @@ export type DialogProps = {
 	title?: string;
 	description?: string;
 	hideClose?: boolean;
+	/** Close on overlay click and Escape. Default true. */
+	dismissable?: boolean;
+	/** Used as `aria-label` on the dialog when no `title` is provided. */
+	ariaLabel?: string;
 	trigger?: Snippet;
 	actions?: Snippet;
 	children?: Snippet;

package/src/types/Dropdown.d.ts

@@ -2,9 +2,10 @@ import type { Component, Snippet } from 'svelte';
 
 export type DropdownItem = {
 	label?: string;
+	icon?: string;
 	separator?: boolean;
 	disabled?: boolean;
-	onSelect?: (event: Event) => void;
+	onSelect?: () => void;
 };
 
 export type DropdownProps = {

package/src/types/MultiSelect.d.ts

@@ -7,6 +7,9 @@ export type MultiSelectProps = {
 	open?: boolean;
 	placeholder?: string;
 	disabled?: boolean;
+	name?: string;
+	id?: string;
+	error?: boolean;
 };
 
 declare const MultiSelect: Component<MultiSelectProps>;

package/src/types/ScrollArea.d.ts

@@ -1,7 +1,7 @@
 import type { Component, Snippet } from 'svelte';
 
 export type ScrollAreaProps = {
-	type?: 'hover' | 'auto' | 'scroll' | 'always';
+	/** Allow horizontal scrolling instead of just vertical. */
 	horizontal?: boolean;
 	children?: Snippet;
 	class?: string;

package/src/types/Sheet.d.ts

@@ -4,10 +4,13 @@ export type SheetSide = 'top' | 'right' | 'bottom' | 'left';
 
 export type SheetProps = {
 	open?: boolean;
+	/** `'left'` was previously the default for the now-removed `<Drawer>`. */
 	side?: SheetSide;
 	title?: string;
 	description?: string;
 	hideClose?: boolean;
+	dismissable?: boolean;
+	ariaLabel?: string;
 	trigger?: Snippet;
 	actions?: Snippet;
 	children?: Snippet;

package/src/types/Tabs.d.ts

@@ -10,6 +10,8 @@ export type TabsItem = {
 export type TabsProps = {
 	value?: string;
 	items?: TabsItem[];
+	/** ARIA label for the tablist. Default 'Tabs'. */
+	label?: string;
 	class?: string;
 };
 

package/src/types/ToggleButton.d.ts

@@ -4,7 +4,8 @@ export type ToggleButtonProps = {
 	pressed?: boolean;
 	disabled?: boolean;
 	icon?: string;
-	variant?: 'default' | 'outline';
+	/** Any `.btn-*` variant. The toggle visual state is controlled by `data-pressed`. */
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
 	size?: 'sm' | 'md' | 'lg';
 	onpressedchange?: (pressed: boolean) => void;
 	children?: Snippet;

package/src/types/ToggleButtonGroup.d.ts

@@ -10,9 +10,10 @@ export type ToggleGroupItem = {
 
 export type ToggleButtonGroupProps = {
 	items?: ToggleGroupItem[];
-	value?: string | string[];
+	value?: string | string[] | undefined;
 	multiple?: boolean;
 	disabled?: boolean;
+	label?: string;
 	class?: string;
 };
 

package/src/types/Tooltip.d.ts

@@ -3,8 +3,11 @@ import type { Component, Snippet } from 'svelte';
 export type TooltipProps = {
 	content?: string;
 	side?: 'top' | 'right' | 'bottom' | 'left';
+	align?: 'start' | 'center' | 'end';
 	sideOffset?: number;
 	delay?: number;
+	/** Wider, surface-elevated styling for tooltips with markup/multiline content. */
+	rich?: boolean;
 	trigger?: Snippet;
 	children?: Snippet;
 	triggerClass?: string;

package/src/components/Drawer.n

@@ -1,49 +0,0 @@
-DialogRoot(bind:open)
-	+if('trigger')
-		DialogTrigger(class!="{triggerClass ?? undefined}")
-			| {@render trigger()}
-	DialogPortal
-		DialogOverlay.dialog-overlay
-		DialogContent(class!="{contentClasses}" data-side!="{side}")
-			+if('title')
-				DialogTitle.dialog-title
-					| {title}
-			+if('description')
-				DialogDescription.dialog-description
-					| {description}
-			+if('children')
-				.sheet-body
-					| {@render children()}
-			+if('!hideClose')
-				DialogClose.dialog-close(aria-label="Close")
-					| ✕
-
-<script>
-	import { Dialog } from 'bits-ui'
-	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: DialogRoot
-		Trigger: DialogTrigger
-		Portal: DialogPortal
-		Overlay: DialogOverlay
-		Content: DialogContent
-		Title: DialogTitle
-		Description: DialogDescription
-		Close: DialogClose
-	} := Dialog
-
-	{
-		open = $bindable(false)
-		side = 'left'
-		title
-		description
-		hideClose = false
-		trigger
-		children
-		triggerClass
-		class: extra = ''
-	} .= $props()
-
-	contentClasses := cn 'sheet-content', `sheet-${side}`, extra
-</script>

package/src/components/PreviewCard.n

@@ -1,30 +0,0 @@
-LinkPreviewRoot(openDelay!="{openDelay}")
-	LinkPreviewTrigger(href!="{href}" class!="{triggerClass ?? ''}")
-		| {@render trigger?.()}
-	LinkPreviewContent.popover-content(side!="{side}" align!="{align}" sideOffset!="{sideOffset}" class!="{contentClass}")
-		| {@render children?.()}
-
-<script>
-	import { LinkPreview } from 'bits-ui'
-	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Root: LinkPreviewRoot
-		Trigger: LinkPreviewTrigger
-		Content: LinkPreviewContent
-	} := LinkPreview
-
-	{
-		href
-		side = 'top'
-		align = 'center'
-		sideOffset = 8
-		openDelay = 700
-		trigger
-		children
-		triggerClass
-		class: extra = ''
-	} := $props()
-
-	contentClass := cn 'w-72 p-3', extra
-</script>

package/src/components/RichTooltip.n

@@ -1,33 +0,0 @@
-TooltipProvider(delayDuration!="{openDelay}")
-	TooltipRoot
-		TooltipTrigger(class!="{triggerClass ?? ''}")
-			| {@render trigger?.()}
-		TooltipPortal
-			TooltipContent.popover-content(side!="{side}" align!="{align}" sideOffset!="{sideOffset}" class!="{contentClass}")
-				| {@render children?.()}
-
-<script>
-	import { Tooltip } from 'bits-ui'
-	import { cn } from '@human-synthesis/norns-ui/cn'
-
-	{
-		Provider: TooltipProvider
-		Root: TooltipRoot
-		Trigger: TooltipTrigger
-		Portal: TooltipPortal
-		Content: TooltipContent
-	} := Tooltip
-
-	{
-		side = 'top'
-		align = 'center'
-		sideOffset = 6
-		openDelay = 300
-		trigger
-		children
-		triggerClass
-		class: extra = ''
-	} := $props()
-
-	contentClass := cn 'max-w-xs p-3 text-sm', extra
-</script>

package/src/types/Drawer.d.ts

@@ -1,18 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-
-export type DrawerSide = 'left' | 'right';
-
-export type DrawerProps = {
-	open?: boolean;
-	side?: DrawerSide;
-	title?: string;
-	description?: string;
-	hideClose?: boolean;
-	trigger?: Snippet;
-	children?: Snippet;
-	triggerClass?: string;
-	class?: string;
-};
-
-declare const Drawer: Component<DrawerProps>;
-export default Drawer;

package/src/types/PreviewCard.d.ts

@@ -1,16 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-
-export type PreviewCardProps = {
-	href?: string;
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	align?: 'start' | 'center' | 'end';
-	sideOffset?: number;
-	openDelay?: number;
-	trigger?: Snippet;
-	children?: Snippet;
-	triggerClass?: string;
-	class?: string;
-};
-
-declare const PreviewCard: Component<PreviewCardProps>;
-export default PreviewCard;

package/src/types/RichTooltip.d.ts

@@ -1,16 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-
-export type RichTooltipProps = {
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	align?: 'start' | 'center' | 'end';
-	sideOffset?: number;
-	openDelay?: number;
-	closeDelay?: number;
-	trigger?: Snippet;
-	children?: Snippet;
-	triggerClass?: string;
-	class?: string;
-};
-
-declare const RichTooltip: Component<RichTooltipProps>;
-export default RichTooltip;