noph-ui 0.43.0 → 0.44.0

package/dist/autocomplete/AutoComplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AutoCompleteProps } from './types.ts';
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "value" | "element" | "menuOpen">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "menuOpen">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/badge/Badge.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
-	let { label, ariaLabel }: { label?: string | number; ariaLabel?: string } = $props()
+	import type { BadgeProps } from './types.js'
+
+	let { label, ariaLabel, element = $bindable(), ...attributes }: BadgeProps = $props()
 </script>
 
 <div
+	{...attributes}
 	aria-hidden={ariaLabel ? undefined : 'true'}
 	role={ariaLabel ? 'status' : undefined}
 	aria-label={ariaLabel}
+	bind:this={element}
 	class={[
 		'np-badge-container',
 		label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',
+		attributes.class,
 	]}
 >
 	{#if label !== undefined}

package/dist/badge/Badge.svelte.d.ts

@@ -1,7 +1,4 @@
-type $$ComponentProps = {
-    label?: string | number;
-    ariaLabel?: string;
-};
-declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { BadgeProps } from './types.ts';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "element">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/badge/types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string | number;
+    ariaLabel?: string;
+    element?: HTMLDivElement;
+}

package/dist/badge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/button/ButtonGroup.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { MediaQuery } from 'svelte/reactivity'
-	import { expandedWidths, parseMotion } from './buttonGroup.js'
+	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
 	import type { ButtonGroupProps } from './types.js'
 
 	let {
@@ -31,9 +31,9 @@
 
 	const items = () =>
 		element
-			? (Array.from(element.children) as HTMLElement[]).filter(
-					(item) => !item.hasAttribute('popover'),
-				)
+			? (Array.from(element.children) as HTMLElement[])
+					.filter((item) => !item.hasAttribute('popover'))
+					.map(resolveItem)
 			: []
 
 	const motion = () =>

package/dist/button/IconButton.svelte

@@ -307,16 +307,34 @@
 		background-color: var(--np-filled-icon-button-container-color, var(--np-color-primary));
 	}
 	.filled.toggle {
-		--np-ripple-hover-color: var(--np-color-on-surface-variant);
-		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
-		color: var(--np-color-on-surface-variant);
-		background-color: var(--np-color-surface-container);
+		--np-ripple-hover-color: var(
+			--np-filled-icon-button-unselected-icon-color,
+			var(--np-color-on-surface-variant)
+		);
+		--np-ripple-pressed-color: var(
+			--np-filled-icon-button-unselected-icon-color,
+			var(--np-color-on-surface-variant)
+		);
+		color: var(--np-filled-icon-button-unselected-icon-color, var(--np-color-on-surface-variant));
+		background-color: var(
+			--np-filled-icon-button-unselected-container-color,
+			var(--np-color-surface-container)
+		);
 	}
 	.filled.selected {
-		--np-ripple-hover-color: var(--np-color-on-primary);
-		--np-ripple-pressed-color: var(--np-color-on-primary);
-		color: var(--np-color-on-primary);
-		background-color: var(--np-color-primary);
+		--np-ripple-hover-color: var(
+			--np-filled-icon-button-selected-icon-color,
+			var(--np-color-on-primary)
+		);
+		--np-ripple-pressed-color: var(
+			--np-filled-icon-button-selected-icon-color,
+			var(--np-color-on-primary)
+		);
+		color: var(--np-filled-icon-button-selected-icon-color, var(--np-color-on-primary));
+		background-color: var(
+			--np-filled-icon-button-selected-container-color,
+			var(--np-color-primary)
+		);
 	}
 
 	.tonal {

package/dist/button/buttonGroup.d.ts

@@ -1,3 +1,4 @@
+export declare const resolveItem: (item: HTMLElement) => HTMLElement;
 export declare const expandedWidths: (widths: number[], index: number, expandedRatio: number, compressionLimit: number) => number[];
 export declare const parseMotion: (token: string) => {
     duration: number;

package/dist/button/buttonGroup.js

@@ -1,3 +1,13 @@
+export const resolveItem = (item) => {
+    let current = item;
+    while (current.ownerDocument.defaultView?.getComputedStyle(current).display === 'contents') {
+        const child = Array.from(current.children).find((candidate) => !candidate.hasAttribute('popover'));
+        if (!child)
+            return current;
+        current = child;
+    }
+    return current;
+};
 export const expandedWidths = (widths, index, expandedRatio, compressionLimit) => {
     const next = [...widths];
     if (widths.length < 2 || index < 0 || index >= widths.length || expandedRatio <= 0)

package/dist/card/Card.svelte

@@ -66,8 +66,8 @@
 	</div>
 {:else if type === 'button'}
 	<button
-		aria-disabled={disabled}
 		{...attributes}
+		aria-disabled={disabled}
 		type="button"
 		bind:this={element}
 		{disabled}

package/dist/checkbox/Checkbox.svelte

@@ -11,6 +11,7 @@
 		issues,
 		style,
 		value,
+		'aria-invalid': ariaInvalid,
 		...attributes
 	}: CheckboxProps = $props()
 
@@ -64,7 +65,7 @@
 				bind:this={inputEl}
 				checked={groupChecked}
 				{onchange}
-				aria-invalid={hasError ? 'true' : undefined}
+				aria-invalid={hasError ? 'true' : ariaInvalid}
 				aria-checked={indeterminate ? 'mixed' : undefined}
 			/>
 		{:else}
@@ -76,7 +77,7 @@
 				bind:indeterminate
 				bind:checked
 				bind:this={inputEl}
-				aria-invalid={hasError ? 'true' : undefined}
+				aria-invalid={hasError ? 'true' : ariaInvalid}
 				aria-checked={indeterminate ? 'mixed' : undefined}
 			/>
 		{/if}

package/dist/chip/ChipSet.svelte

@@ -2,7 +2,7 @@
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { ChipSetProps } from './types.js'
 
-	let { children, chipsCount, ...attributes }: ChipSetProps = $props()
+	let { children, chipsCount, element = $bindable(), ...attributes }: ChipSetProps = $props()
 
 	const CHIP_SELECTOR = "input:not([type='hidden']), button, a[href]"
 	const attach = rovingTabindex(CHIP_SELECTOR, {
@@ -13,12 +13,13 @@
 </script>
 
 <div
+	{...attributes}
+	bind:this={element}
 	class={[
 		'np-chip-set-wrapper',
 		(chipsCount ?? 0) > 0 && 'np-chip-set-has-chips',
 		attributes.class,
 	]}
-	style={attributes.style}
 >
 	{#if children}
 		<div {@attach attach} class={['np-chip-set']} role="toolbar" tabindex="-1" {onkeydown}>

package/dist/chip/ChipSet.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ChipSetProps } from './types.ts';
-declare const ChipSet: import("svelte").Component<ChipSetProps, {}, "">;
+declare const ChipSet: import("svelte").Component<ChipSetProps, {}, "element">;
 type ChipSet = ReturnType<typeof ChipSet>;
 export default ChipSet;

package/dist/chip/FilterChip.svelte.d.ts

@@ -1,5 +1,5 @@
 import '../internal/focus-ring.css';
 import type { FilterChipProps } from './types.ts';
-declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "selected" | "group">;
+declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "group" | "selected">;
 type FilterChip = ReturnType<typeof FilterChip>;
 export default FilterChip;

package/dist/chip/types.d.ts

@@ -3,13 +3,14 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements';
 export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
     chipsCount?: number;
+    element?: HTMLDivElement;
 }
 export interface AssistChipProps extends Omit<ButtonProps, 'variant' | 'start' | 'end' | 'element'> {
     elevated?: boolean;
     disabled?: boolean;
     label?: string;
     icon?: Snippet;
-    element?: HTMLDivElement;
+    element?: HTMLElement;
 }
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;

package/dist/date-picker/DatePickerDialog.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DatePickerDialogProps } from './types.ts';
-declare const DatePickerDialog: import("svelte").Component<DatePickerDialogProps, {}, "value" | "element" | "displayMonth" | "open">;
+declare const DatePickerDialog: import("svelte").Component<DatePickerDialogProps, {}, "element" | "value" | "displayMonth" | "open">;
 type DatePickerDialog = ReturnType<typeof DatePickerDialog>;
 export default DatePickerDialog;

package/dist/date-picker/DateRangePicker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DateRangePickerProps } from './types.ts';
-declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "value" | "element" | "open">;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "element" | "value" | "open">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/date-picker/DockedDatePicker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DockedDatePickerProps } from './types.ts';
-declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {}, "value" | "element" | "displayMonth" | "open">;
+declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {}, "element" | "value" | "displayMonth" | "open">;
 type DockedDatePicker = ReturnType<typeof DockedDatePicker>;
 export default DockedDatePicker;

package/dist/date-picker/DockedDateTimePicker.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DockedDateTimePickerProps } from './types.ts';
-declare const DockedDateTimePicker: import("svelte").Component<DockedDateTimePickerProps, {}, "value" | "element" | "displayMonth" | "open">;
+declare const DockedDateTimePicker: import("svelte").Component<DockedDateTimePickerProps, {}, "element" | "value" | "displayMonth" | "open">;
 type DockedDateTimePicker = ReturnType<typeof DockedDateTimePicker>;
 export default DockedDateTimePicker;

package/dist/dialog/Dialog.svelte

@@ -59,8 +59,8 @@
 
 <div
 	bind:this={element}
-	popover="auto"
 	{...attributes}
+	popover="auto"
 	ontoggle={(event) => {
 		if (event.newState === 'open') {
 			trapFocus()

package/dist/divider/Divider.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import type { DividerProps } from './types.js'
 
-	let { variant = 'full', ...attributes }: DividerProps = $props()
+	let { variant = 'full', element = $bindable(), ...attributes }: DividerProps = $props()
 </script>
 
-<template {...attributes} role="separator" class={['np-divider', variant, attributes.class]}
+<template
+	{...attributes}
+	bind:this={element}
+	role="separator"
+	class={['np-divider', variant, attributes.class]}
 ></template>
 
 <style>

package/dist/divider/Divider.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DividerProps } from './types.ts';
-declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+declare const Divider: import("svelte").Component<DividerProps, {}, "element">;
 type Divider = ReturnType<typeof Divider>;
 export default Divider;

package/dist/divider/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface DividerProps extends Omit<HTMLAttributes<HTMLElement>, 'role'> {
     variant?: 'full' | 'inset' | 'inset-middle';
+    element?: HTMLElement;
 }

package/dist/icons/Icon.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
-	import type { HTMLAttributes } from 'svelte/elements'
+	import type { IconProps } from './types.js'
 
-	interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-		children: Snippet
-		element?: HTMLSpanElement
-	}
 	let { children, element = $bindable(), ...attributes }: IconProps = $props()
 </script>
 

package/dist/icons/Icon.svelte.d.ts

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-    children: Snippet;
-    element?: HTMLSpanElement;
-}
+import type { IconProps } from './types.ts';
 declare const Icon: import("svelte").Component<IconProps, {}, "element">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/icons/types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    children: Snippet;
+    element?: HTMLSpanElement;
+}

package/dist/icons/types.js

@@ -0,0 +1 @@
+export {};

package/dist/list/Item.svelte

@@ -13,6 +13,7 @@
 		softFocus = false,
 		lazy = false,
 		variant,
+		element = $bindable(),
 		...attributes
 	}: ItemProps = $props()
 </script>
@@ -46,6 +47,7 @@
 {#if disabled}
 	<div
 		{...attributes}
+		bind:this={element}
 		aria-disabled="true"
 		class={['np-item disabled', lazy && 'np-item-lazy', attributes.class]}
 	>
@@ -54,6 +56,7 @@
 {:else if variant === 'text' || variant === undefined}
 	<div
 		{...attributes}
+		bind:this={element}
 		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
 		{@render content()}
@@ -61,6 +64,7 @@
 {:else if variant === 'button'}
 	<button
 		{...attributes}
+		bind:this={element}
 		type={attributes.type ?? 'button'}
 		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
@@ -70,6 +74,7 @@
 {:else if variant === 'link'}
 	<a
 		{...attributes}
+		bind:this={element}
 		class={['np-item', selected && 'selected', lazy && 'np-item-lazy', attributes.class]}
 	>
 		{@render content()}

package/dist/list/Item.svelte.d.ts

@@ -1,5 +1,5 @@
 import '../internal/focus-ring.css';
 import type { ItemProps } from './types.ts';
-declare const Item: import("svelte").Component<ItemProps, {}, "">;
+declare const Item: import("svelte").Component<ItemProps, {}, "element">;
 type Item = ReturnType<typeof Item>;
 export default Item;

package/dist/list/ListItem.svelte

@@ -2,9 +2,9 @@
 	import Item from './Item.svelte'
 	import type { ListItemProps } from './types.js'
 
-	let { ...attributes }: ListItemProps = $props()
+	let { element = $bindable(), ...attributes }: ListItemProps = $props()
 </script>
 
 <li>
-	<Item {...attributes} />
+	<Item bind:element {...attributes} />
 </li>

package/dist/list/ListItem.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const ListItem: import("svelte").Component<import("./types.ts").ItemProps, {}, "">;
+declare const ListItem: import("svelte").Component<import("./types.ts").ItemProps, {}, "element">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/dist/list/types.d.ts

@@ -11,6 +11,7 @@ export interface ItemProps extends HTMLAttributes<ItemElement>, Omit<HTMLButtonA
     softFocus?: boolean;
     lazy?: boolean;
     type?: 'submit' | 'reset' | 'button' | null;
+    element?: ItemElement;
 }
 export type ListItemProps = ItemProps;
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {

package/dist/loading-indicator/LoadingIndicator.svelte

@@ -38,10 +38,15 @@
 </script>
 
 <script lang="ts">
-	let { contained = false, ...attributes }: LoadingIndicatorProps = $props()
+	let { contained = false, element = $bindable(), ...attributes }: LoadingIndicatorProps = $props()
 </script>
 
-<div {...attributes} class={['np-loading-indicator', contained && 'contained']} role="progressbar">
+<div
+	{...attributes}
+	bind:this={element}
+	class={['np-loading-indicator', contained && 'contained', attributes.class]}
+	role="progressbar"
+>
 	<svg viewBox="0 0 {VIEWBOX} {VIEWBOX}" aria-hidden="true">
 		<path class="indicator" d={FRAMES[0]}>
 			<animate

package/dist/loading-indicator/LoadingIndicator.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { LoadingIndicatorProps } from './types.ts';
-declare const LoadingIndicator: import("svelte").Component<LoadingIndicatorProps, {}, "">;
+declare const LoadingIndicator: import("svelte").Component<LoadingIndicatorProps, {}, "element">;
 type LoadingIndicator = ReturnType<typeof LoadingIndicator>;
 export default LoadingIndicator;

package/dist/loading-indicator/types.d.ts

@@ -1,4 +1,5 @@
-export interface LoadingIndicatorProps {
+import type { HTMLAttributes } from 'svelte/elements';
+export interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
     contained?: boolean;
-    'aria-label'?: string | undefined | null;
+    element?: HTMLDivElement;
 }

package/dist/menu/Menu.svelte

@@ -65,8 +65,8 @@
 
 <svelte:window bind:innerHeight onresize={refreshValues} />
 <div
-	role="menu"
 	{...attributes}
+	role="menu"
 	bind:this={element}
 	ontoggle={(event) => {
 		let { newState } = event

package/dist/menu/MenuItem.svelte

@@ -2,13 +2,13 @@
 	import Item from '../list/Item.svelte'
 	import type { MenuItemProps } from './types.js'
 
-	let { ...attributes }: MenuItemProps = $props()
+	let { element = $bindable(), ...attributes }: MenuItemProps = $props()
 
 	const isLink = $derived(attributes.href != null)
 </script>
 
 <div class="np-menu-item" role="none">
-	<Item role="menuitem" {...attributes} variant={isLink ? 'link' : 'button'} />
+	<Item role="menuitem" bind:element {...attributes} variant={isLink ? 'link' : 'button'} />
 </div>
 
 <style>

package/dist/menu/MenuItem.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MenuItemProps } from './types.ts';
-declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "element">;
 type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -9,6 +9,7 @@
 		label,
 		badgeLabelText,
 		icon,
+		element = $bindable(),
 		...attributes
 	}: NavigationDrawerItemProps = $props()
 
@@ -31,6 +32,7 @@
 {#if isLink}
 	<a
 		{...attributes}
+		bind:this={element}
 		href={attributes.href}
 		class={[
 			'np-navigation-drawer-item',
@@ -45,6 +47,7 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
+		bind:this={element}
 		class={[
 			'np-navigation-drawer-item',
 			selected && 'np-navigation-drawer-item-selected',

package/dist/navigation-drawer/NavigationDrawerItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import '../internal/focus-ring.css';
 import type { NavigationDrawerItemProps } from './types.ts';
-declare const NavigationDrawerItem: import("svelte").Component<NavigationDrawerItemProps, {}, "">;
+declare const NavigationDrawerItem: import("svelte").Component<NavigationDrawerItemProps, {}, "element">;
 type NavigationDrawerItem = ReturnType<typeof NavigationDrawerItem>;
 export default NavigationDrawerItem;

package/dist/navigation-drawer/types.d.ts

@@ -13,4 +13,5 @@ export interface NavigationDrawerItemProps extends HTMLAttributes<NavigationDraw
     selected?: boolean;
     badgeLabelText?: string;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+    element?: NavigationDrawerItemElement;
 }

package/dist/navigation-rail/NavigationRail.svelte

@@ -2,7 +2,12 @@
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { NavigationRailProps } from './types.js'
 
-	let { children, onkeydown: userKeydown, ...attributes }: NavigationRailProps = $props()
+	let {
+		children,
+		element = $bindable(),
+		onkeydown: userKeydown,
+		...attributes
+	}: NavigationRailProps = $props()
 
 	const attach = rovingTabindex('.np-navigation-action')
 	const arrowHandler = arrowKeyNav('.np-navigation-action')
@@ -16,7 +21,8 @@
 <nav
 	{...attributes}
 	{@attach attach}
-	class="navigation-rail {attributes.class}"
+	bind:this={element}
+	class={['np-navigation-rail', attributes.class]}
 	onkeydown={handleKeydown}
 >
 	{#if children}
@@ -25,7 +31,7 @@
 </nav>
 
 <style>
-	.navigation-rail {
+	.np-navigation-rail {
 		overflow-y: auto;
 		z-index: 8;
 		background-color: var(--np-color-surface);

package/dist/navigation-rail/NavigationRail.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NavigationRailProps } from './types.ts';
-declare const NavigationRail: import("svelte").Component<NavigationRailProps, {}, "">;
+declare const NavigationRail: import("svelte").Component<NavigationRailProps, {}, "element">;
 type NavigationRail = ReturnType<typeof NavigationRail>;
 export default NavigationRail;

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -4,7 +4,13 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.js'
 
-	let { selected, icon, label, ...attributes }: NavigationRailItemProps = $props()
+	let {
+		selected,
+		icon,
+		label,
+		element = $bindable(),
+		...attributes
+	}: NavigationRailItemProps = $props()
 	let touchEl: HTMLSpanElement | undefined = $state()
 
 	const isLink = $derived(attributes.href != null)
@@ -22,6 +28,7 @@
 {#if isLink}
 	<a
 		{...attributes}
+		bind:this={element}
 		href={attributes.href}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
 		aria-current={selected ? 'page' : undefined}
@@ -32,6 +39,7 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
+		bind:this={element}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
 		aria-current={selected ? 'page' : undefined}
 		tabindex={selected ? 0 : -1}

package/dist/navigation-rail/NavigationRailItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import '../internal/focus-ring.css';
 import type { NavigationRailItemProps } from './types.ts';
-declare const NavigationRailItem: import("svelte").Component<NavigationRailItemProps, {}, "">;
+declare const NavigationRailItem: import("svelte").Component<NavigationRailItemProps, {}, "element">;
 type NavigationRailItem = ReturnType<typeof NavigationRailItem>;
 export default NavigationRailItem;

package/dist/navigation-rail/types.d.ts

@@ -1,10 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-export type NavigationRailProps = HTMLAttributes<HTMLElement>;
+export interface NavigationRailProps extends HTMLAttributes<HTMLElement> {
+    element?: HTMLElement;
+}
 export type NavigationRailItemElement = HTMLButtonElement | HTMLAnchorElement;
 export interface NavigationRailItemProps extends HTMLAttributes<NavigationRailItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     icon: Snippet;
     label: string;
     selected?: boolean;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+    element?: NavigationRailItemElement;
 }

package/dist/progress/CircularProgress.svelte

@@ -9,6 +9,9 @@
 		fourColor = false,
 		track = true,
 		wavy = false,
+		element = $bindable(),
+		class: className,
+		style,
 		...attributes
 	}: CircularProgressProps = $props()
 
@@ -68,7 +71,7 @@
 	let activeStyle = $derived(`--_active:${activeLength}`)
 </script>
 
-<div class="np-container">
+<div bind:this={element} class={['np-container', className]} {style}>
 	<div
 		{...attributes}
 		class={[

package/dist/progress/CircularProgress.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CircularProgressProps } from './types.ts';
-declare const CircularProgress: import("svelte").Component<CircularProgressProps, {}, "">;
+declare const CircularProgress: import("svelte").Component<CircularProgressProps, {}, "element">;
 type CircularProgress = ReturnType<typeof CircularProgress>;
 export default CircularProgress;

package/dist/progress/LinearProgress.svelte

@@ -10,6 +10,9 @@
 		buffer = 0,
 		wavy = false,
 		track = true,
+		element = $bindable(),
+		class: className,
+		style,
 		...attributes
 	}: LinearProgressProps = $props()
 
@@ -159,7 +162,12 @@
 	let hideDots = $derived(indeterminate || !hasBuffer || bufferValue >= max || value >= max)
 </script>
 
-<div class={['np-container', wave && 'wavy']} bind:clientWidth={containerWidth}>
+<div
+	bind:this={element}
+	class={['np-container', wave && 'wavy', className]}
+	{style}
+	bind:clientWidth={containerWidth}
+>
 	<div
 		{...attributes}
 		style={trackStyles}

package/dist/progress/LinearProgress.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { LinearProgressProps } from './types.ts';
-declare const LinearProgress: import("svelte").Component<LinearProgressProps, {}, "">;
+declare const LinearProgress: import("svelte").Component<LinearProgressProps, {}, "element">;
 type LinearProgress = ReturnType<typeof LinearProgress>;
 export default LinearProgress;

package/dist/progress/types.d.ts

@@ -1,11 +1,12 @@
-export interface CircularProgressProps {
+import type { HTMLAttributes } from 'svelte/elements';
+export interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
     value?: number;
     max?: number;
     indeterminate?: boolean;
     fourColor?: boolean;
     track?: boolean;
     wavy?: boolean;
-    'aria-label'?: string | undefined | null;
+    element?: HTMLDivElement;
 }
 export interface LinearProgressProps extends CircularProgressProps {
     buffer?: number;

package/dist/select/NativeSelect.svelte

@@ -1,18 +1,7 @@
 <script lang="ts">
 	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
-	import type { HTMLSelectAttributes } from 'svelte/elements'
-	interface SelectProps extends HTMLSelectAttributes {
-		label?: string
-		noAsterisk?: boolean
-		supportingText?: string
-		issues?:
-			| {
-					message: string
-			  }[]
-			| undefined
-		variant?: 'outlined' | 'filled'
-		element?: HTMLSpanElement
-	}
+	import type { NativeSelectProps } from './types.js'
+
 	let {
 		id,
 		supportingText,
@@ -26,8 +15,11 @@
 		children,
 		oninput,
 		style,
+		element = $bindable(),
+		'aria-describedby': ariaDescribedby,
+		'aria-errormessage': ariaErrormessage,
 		...attributes
-	}: SelectProps = $props()
+	}: NativeSelectProps = $props()
 	const uid = $props.id()
 	const selectId = $derived(id ?? `select-${uid}`)
 
@@ -46,6 +38,7 @@
 		attributes.class,
 	]}
 	{style}
+	bind:this={element}
 >
 	{#if variant === 'outlined'}
 		<div class="np-select-outline">
@@ -83,10 +76,14 @@
 		{disabled}
 		{required}
 		id={selectId}
-		aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
-		aria-describedby={supportingText && !errorText ? `supporting-text-${uid}` : undefined}
 		bind:value
 		{...attributes}
+		aria-errormessage={[errorText && `supporting-text-${uid}`, ariaErrormessage]
+			.filter(Boolean)
+			.join(' ') || undefined}
+		aria-describedby={[supportingText && !errorText && `supporting-text-${uid}`, ariaDescribedby]
+			.filter(Boolean)
+			.join(' ') || undefined}
 		class="np-select"
 	>
 		{@render children?.()}

package/dist/select/NativeSelect.svelte.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLSelectAttributes } from 'svelte/elements';
-interface SelectProps extends HTMLSelectAttributes {
-    label?: string;
-    noAsterisk?: boolean;
-    supportingText?: string;
-    issues?: {
-        message: string;
-    }[] | undefined;
-    variant?: 'outlined' | 'filled';
-    element?: HTMLSpanElement;
-}
-declare const NativeSelect: import("svelte").Component<SelectProps, {}, "value">;
+import type { NativeSelectProps } from './types.ts';
+declare const NativeSelect: import("svelte").Component<NativeSelectProps, {}, "element" | "value">;
 type NativeSelect = ReturnType<typeof NativeSelect>;
 export default NativeSelect;

package/dist/select/Option.svelte

@@ -1,13 +1,7 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { Snippet } from 'svelte'
-	import type { HTMLOptionAttributes } from 'svelte/elements'
-
-	interface OptionProps extends HTMLOptionAttributes {
-		start?: Snippet
-		end?: Snippet
-	}
+	import type { OptionProps } from './types.js'
 
 	let { start, end, children, ...attributes }: OptionProps = $props()
 </script>

package/dist/select/Option.svelte.d.ts

@@ -1,10 +1,5 @@
 import '../internal/focus-ring.css';
-import type { Snippet } from 'svelte';
-import type { HTMLOptionAttributes } from 'svelte/elements';
-interface OptionProps extends HTMLOptionAttributes {
-    start?: Snippet;
-    end?: Snippet;
-}
+import type { OptionProps } from './types.ts';
 declare const Option: import("svelte").Component<OptionProps, {}, "">;
 type Option = ReturnType<typeof Option>;
 export default Option;

package/dist/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProps } from './types.ts';
-declare const Select: import("svelte").Component<SelectProps, {}, "value" | "element">;
+declare const Select: import("svelte").Component<SelectProps, {}, "element" | "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/select/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLSelectAttributes } from 'svelte/elements';
+import type { HTMLOptionAttributes, HTMLSelectAttributes } from 'svelte/elements';
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -21,3 +21,17 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autoco
     clampMenuWidth?: boolean;
     virtualThreshold?: number;
 }
+export interface NativeSelectProps extends HTMLSelectAttributes {
+    label?: string;
+    noAsterisk?: boolean;
+    supportingText?: string;
+    issues?: {
+        message: string;
+    }[] | undefined;
+    variant?: 'outlined' | 'filled';
+    element?: HTMLDivElement;
+}
+export interface OptionProps extends HTMLOptionAttributes {
+    start?: Snippet;
+    end?: Snippet;
+}

package/dist/slider/Slider.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SliderProps } from './types.ts';
-declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "element" | "inputElement" | "endValue" | "endInputElement">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "element" | "value" | "inputElement" | "endValue" | "endInputElement">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/tabs/Tabs.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TabsProps } from './types.ts';
-declare const Tabs: import("svelte").Component<TabsProps, {}, "value" | "element">;
+declare const Tabs: import("svelte").Component<TabsProps, {}, "element" | "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/text-field/TextField.svelte

@@ -24,11 +24,25 @@
 		focused = $bindable(false),
 		clientWidth = $bindable(),
 		clientHeight = $bindable(),
+		'aria-invalid': ariaInvalid,
+		'aria-describedby': ariaDescribedby,
+		'aria-errormessage': ariaErrormessage,
 		...attributes
 	}: TextFieldProps = $props()
 
 	const uid = $props.id()
 	let errorText = $derived(issues?.map((issue) => issue.message).join(', '))
+
+	// Merged rather than set before the spread, so a consumer's own aria wiring adds to the
+	// supporting-text wiring instead of silently replacing it.
+	const supportingTextId = `supporting-text-${uid}`
+	const ids = (...values: (string | undefined | null | false)[]) =>
+		values.filter(Boolean).join(' ') || undefined
+	let ariaProps = $derived({
+		'aria-invalid': errorText ? ('true' as const) : ariaInvalid,
+		'aria-errormessage': ids(errorText && supportingTextId, ariaErrormessage),
+		'aria-describedby': ids(supportingText && !errorText && supportingTextId, ariaDescribedby),
+	})
 </script>
 
 <label
@@ -101,12 +115,8 @@
 					<div class="content">
 						{#if attributes.type === 'textarea'}
 							<textarea
-								aria-invalid={errorText ? 'true' : undefined}
-								aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
-								aria-describedby={supportingText && !errorText
-									? `supporting-text-${uid}`
-									: undefined}
 								{...attributes}
+								{...ariaProps}
 								{placeholder}
 								{defaultValue}
 								bind:focused
@@ -121,14 +131,11 @@
 									</span>
 								{/if}
 								<input
-									aria-invalid={errorText ? 'true' : undefined}
-									aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
-									aria-describedby={supportingText && !errorText
-										? `supporting-text-${uid}`
-										: undefined}
 									{...attributes}
+									{...ariaProps}
 									{placeholder}
 									{defaultValue}
+									bind:focused
 									bind:value
 									bind:this={inputElement}
 									class="input"

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "value" | "element" | "inputElement" | "clientWidth" | "clientHeight" | "focused">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "inputElement" | "clientWidth" | "clientHeight" | "focused">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 export * from './autocomplete/types.ts';
+export * from './badge/types.ts';
 export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';
@@ -6,6 +7,7 @@ export * from './chip/types.ts';
 export * from './date-picker/types.ts';
 export * from './dialog/types.ts';
 export * from './divider/types.ts';
+export * from './icons/types.ts';
 export * from './list/types.ts';
 export * from './loading-indicator/types.ts';
 export * from './menu/types.ts';

package/dist/types.js

@@ -1,4 +1,5 @@
 export * from "./autocomplete/types.js";
+export * from "./badge/types.js";
 export * from "./button/types.js";
 export * from "./card/types.js";
 export * from "./checkbox/types.js";
@@ -6,6 +7,7 @@ export * from "./chip/types.js";
 export * from "./date-picker/types.js";
 export * from "./dialog/types.js";
 export * from "./divider/types.js";
+export * from "./icons/types.js";
 export * from "./list/types.js";
 export * from "./loading-indicator/types.js";
 export * from "./menu/types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {