noph-ui 0.50.0 → 0.51.0

package/dist/app-bar/AppBar.svelte

@@ -36,7 +36,7 @@
 		'np-app-bar',
 		`np-app-bar-${variant}`,
 		collapses && 'np-app-bar-collapsible',
-		collapses && scroller === 'nearest' && 'np-app-bar-scroller-nearest',
+		scroller === 'nearest' && 'np-app-bar-scroller-nearest',
 		attributes.class,
 	]}
 >
@@ -75,6 +75,11 @@
 		background-color: var(--np-app-bar-container-color, var(--np-color-surface));
 		color: var(--np-color-on-surface);
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
+		--_timeline: scroll(root block);
+		--_fill-range: 0 var(--np-app-bar-fill-distance, 0.5rem);
+	}
+	.np-app-bar-scroller-nearest {
+		--_timeline: scroll(nearest block);
 	}
 
 	.np-app-bar:has(:global(.np-search-expanded)) {
@@ -110,21 +115,18 @@
 	}
 
 	.np-app-bar-subtitle {
-		font-size: 0.875rem;
-		line-height: 1.25rem;
+		font-size: var(--_subtitle-size);
+		line-height: var(--_subtitle-line-height);
 		font-weight: 500;
 		color: var(--np-app-bar-subtitle-color, var(--np-color-on-surface-variant));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	.np-app-bar-titles-inline .np-app-bar-headline {
-		font-size: 1.375rem;
-	}
 
 	.np-app-bar-headline {
 		font-size: var(--_headline-size);
-		line-height: 1.2;
+		line-height: var(--_headline-line-height);
 		font-weight: 400;
 		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
 		overflow: hidden;
@@ -132,10 +134,22 @@
 		white-space: nowrap;
 		min-width: 0;
 	}
+	.np-app-bar-second-row .np-app-bar-headline {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		white-space: normal;
+		overflow-wrap: anywhere;
+	}
 
 	.np-app-bar-small,
-	.np-app-bar-search {
+	.np-app-bar-search,
+	.np-app-bar-inline {
 		--_headline-size: 1.375rem;
+		--_headline-line-height: 1.75rem;
+		--_subtitle-size: 0.75rem;
+		--_subtitle-line-height: 1rem;
 	}
 
 	.np-app-bar-search-field {
@@ -145,17 +159,26 @@
 		align-items: center;
 		padding-inline: 0.25rem;
 	}
+	.np-app-bar-search-field :global(.np-search:not(.np-search-expanded) .np-search-bar) {
+		background-color: var(--np-search-container-color, var(--np-color-surface-container));
+	}
 	.np-app-bar-small .np-app-bar-titles {
 		padding-inline-start: 0.75rem;
 		flex: 1;
 	}
 
 	.np-app-bar-medium {
-		--_headline-size: 1.5rem;
+		--_headline-size: 1.75rem;
+		--_headline-line-height: 2.25rem;
+		--_subtitle-size: 0.875rem;
+		--_subtitle-line-height: 1.25rem;
 		--_second-row-height: 3rem;
 	}
 	.np-app-bar-large {
-		--_headline-size: 1.75rem;
+		--_headline-size: 2.25rem;
+		--_headline-line-height: 2.75rem;
+		--_subtitle-size: 1rem;
+		--_subtitle-line-height: 1.5rem;
 		--_second-row-height: 5.5rem;
 	}
 
@@ -170,18 +193,15 @@
 		padding-block-end: 1rem;
 		overflow: hidden;
 	}
+	.np-app-bar-medium .np-app-bar-second-row {
+		padding-block-end: 0.75rem;
+	}
 
 	.np-app-bar-inline {
-		font-size: 1.375rem;
-		line-height: 1.2;
-		font-weight: 400;
-		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
 		padding-inline-start: 0.75rem;
 		flex: 1;
 		min-width: 0;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 		opacity: 0;
 	}
 
@@ -189,23 +209,45 @@
 		:global(html:has(.np-app-bar-collapsible)) {
 			overflow-anchor: none;
 		}
-		:global(:has(.np-app-bar-scroller-nearest)) {
+		:global(:has(.np-app-bar-collapsible.np-app-bar-scroller-nearest)) {
 			overflow-anchor: none;
 		}
 
+		.np-app-bar {
+			animation: np-app-bar-fill linear both;
+			animation-timeline: var(--_timeline);
+			animation-range: var(--_fill-range);
+		}
+		.np-app-bar-search-field :global(.np-search:not(.np-search-expanded) .np-search-bar) {
+			animation: np-app-bar-search-fill linear both;
+			animation-timeline: var(--_timeline);
+			animation-range: var(--_fill-range);
+		}
+
 		.np-app-bar-collapsible .np-app-bar-second-row {
 			animation: np-app-bar-collapse linear both;
-			animation-timeline: scroll(root block);
+			animation-timeline: var(--_timeline);
 			animation-range: 0 var(--_second-row-height);
 		}
 		.np-app-bar-collapsible .np-app-bar-inline {
 			animation: np-app-bar-reveal linear both;
-			animation-timeline: scroll(root block);
+			animation-timeline: var(--_timeline);
 			animation-range: 0 var(--_second-row-height);
 		}
-		.np-app-bar-scroller-nearest .np-app-bar-second-row,
-		.np-app-bar-scroller-nearest .np-app-bar-inline {
-			animation-timeline: scroll(nearest block);
+	}
+
+	@keyframes np-app-bar-fill {
+		to {
+			background-color: var(
+				--np-app-bar-scrolled-container-color,
+				var(--np-color-surface-container)
+			);
+		}
+	}
+
+	@keyframes np-app-bar-search-fill {
+		to {
+			background-color: var(--np-search-container-color, var(--np-color-surface-container-highest));
 		}
 	}
 

package/dist/button/Button.svelte

@@ -149,6 +149,9 @@
 		opacity: 0;
 	}
 	.np-button {
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		box-sizing: border-box;
 		font: inherit;
 		background-color: transparent;
@@ -279,14 +282,9 @@
 		}
 	}
 	.text {
-		--np-ripple-hover-color: var(--np-text-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-text-button-label-text-color, var(--np-color-primary));
 		color: var(--np-text-button-label-text-color, var(--np-color-primary));
 	}
 	.filled {
-		--np-ripple-hover-opacity: 0.12;
-		--np-ripple-hover-color: var(--np-color-surface);
-		--np-ripple-pressed-color: var(--np-color-surface);
 		color: var(--np-filled-button-label-text-color, var(--np-color-on-primary));
 		background-color: var(--np-filled-button-container-color, var(--np-color-primary));
 	}
@@ -312,8 +310,6 @@
 	}
 
 	.tonal {
-		--np-ripple-hover-color: var(--np-tonal-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-tonal-button-label-text-color, var(--np-color-primary));
 		color: var(--np-tonal-button-label-text-color, var(--np-color-on-secondary-container));
 		background-color: var(--np-tonal-button-container-color, var(--np-color-secondary-container));
 	}
@@ -336,8 +332,6 @@
 	}
 
 	.elevated {
-		--np-ripple-hover-color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
 		color: var(--np-elevated-button-label-text-color, var(--np-color-primary));
 		background-color: var(
 			--np-elevated-button-container-color,
@@ -364,9 +358,7 @@
 			--np-outlined-button-outline-color,
 			var(--np-color-outline-variant)
 		);
-		--np-ripple-hover-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
-		--np-ripple-pressed-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
-		color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
+		color: var(--np-outlined-button-label-text-color, var(--np-color-on-surface-variant));
 	}
 
 	.outlined:not(.selected)::after,

package/dist/button/IconButton.svelte

@@ -123,6 +123,9 @@
 
 <style>
 	.np-icon-button {
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		font: inherit;
 		box-sizing: border-box;
 		-webkit-tap-highlight-color: transparent;
@@ -281,30 +284,16 @@
 		}
 	}
 	.text {
-		--np-ripple-hover-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
-		--np-ripple-pressed-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 		color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 	}
 	.text.selected {
-		--np-ripple-hover-color: var(--np-color-primary);
-		--np-ripple-pressed-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
 	.filled {
-		--np-ripple-hover-color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
-		--np-ripple-pressed-color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
 		color: var(--np-filled-icon-button-icon-color, var(--np-color-on-primary));
 		background-color: var(--np-filled-icon-button-container-color, var(--np-color-primary));
 	}
 	.filled.toggle {
-		--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,
@@ -312,14 +301,6 @@
 		);
 	}
 	.filled.selected {
-		--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,
@@ -328,14 +309,6 @@
 	}
 
 	.tonal {
-		--np-ripple-hover-color: var(
-			--np-tonal-icon-button-icon-color,
-			var(--np-color-on-secondary-container)
-		);
-		--np-ripple-pressed-color: var(
-			--np-tonal-icon-button-icon-color,
-			var(--np-color-on-secondary-container)
-		);
 		color: var(--np-tonal-icon-button-icon-color, var(--np-color-on-secondary-container));
 		background-color: var(
 			--np-tonal-icon-button-container-color,
@@ -343,14 +316,10 @@
 		);
 	}
 	.tonal.toggle {
-		--np-ripple-hover-color: var(--np-color-on-secondary-container);
-		--np-ripple-pressed-color: var(--np-color-on-secondary-container);
 		color: var(--np-color-on-secondary-container);
 		background-color: var(--np-color-secondary-container);
 	}
 	.tonal.selected {
-		--np-ripple-hover-color: var(--np-color-on-secondary);
-		--np-ripple-pressed-color: var(--np-color-on-secondary);
 		color: var(--np-color-on-secondary);
 		background-color: var(--np-color-secondary);
 	}
@@ -360,8 +329,6 @@
 			--np-outlined-icon-button-outline-color,
 			var(--np-color-outline-variant)
 		);
-		--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);
 	}
 
@@ -376,8 +343,6 @@
 	}
 
 	.outlined.selected {
-		--np-ripple-hover-color: var(--np-color-on-surface-variant);
-		--np-ripple-pressed-color: var(--np-color-on-surface-variant);
 		color: var(--np-color-inverse-on-surface);
 		background-color: var(--np-color-inverse-surface);
 	}

package/dist/button/SegmentedButton.svelte

@@ -90,8 +90,9 @@
 
 <style>
 	.np-segmented-buttons {
-		--np-ripple-hover-color: var(--np-color-primary);
-		--np-ripple-pressed-color: var(--np-color-primary);
+		/* State layers take the content color of each variant and state. */
+		--np-ripple-hover-color: currentColor;
+		--np-ripple-pressed-color: currentColor;
 		display: grid;
 		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline);
@@ -100,8 +101,6 @@
 	}
 
 	.np-segmented-buttons.np-error {
-		--np-ripple-hover-color: var(--np-color-error);
-		--np-ripple-pressed-color: var(--np-color-error);
 		border-color: var(--np-color-error);
 		color: var(--np-color-error);
 	}

package/dist/button/SplitButton.svelte

@@ -49,7 +49,7 @@
 		aria-label={menuLabel}
 		start={caret}
 	/>
-	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false}>
+	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false} style="--np-menu-margin: 4px">
 		{@render menu?.(menuId)}
 	</Menu>
 </ButtonGroup>

package/dist/carousel/Carousel.svelte

@@ -195,6 +195,10 @@
 		padding-block: var(--_cross);
 	}
 
+	.np-carousel-uncontained.np-carousel-horizontal .np-carousel-track {
+		padding-inline-end: 0;
+	}
+
 	.np-carousel-vertical .np-carousel-track {
 		flex-direction: column;
 		padding-block: var(--_pad);
@@ -208,7 +212,7 @@
 
 	.np-carousel-full-screen {
 		--np-carousel-padding: 0px;
-		--_gap: 0px;
+		--_gap: var(--np-carousel-item-spacing, 1rem);
 		--_cross: 0px;
 		--np-carousel-item-container-shape: 0px;
 		--np-carousel-snap-stop: always;

package/dist/chip/SuggestionChip.svelte

@@ -12,8 +12,8 @@
 </script>
 
 <Button
-	--np-elevated-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface))"
-	--np-outlined-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface))"
+	--np-elevated-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-outlined-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
 	--np-outlined-button-outline-color="var(--np-suggestion-chip-outline-color, var(--np-color-outline-variant))"
 	--np-button-padding="1rem"
 	--np-button-shape="0.5rem"

package/dist/date-picker/DatePickerDialog.svelte

@@ -400,6 +400,7 @@
 
 	.np-date-picker-dialog-headline {
 		margin: 0;
+		color: var(--np-color-on-surface);
 		font-size: 2rem;
 		line-height: 2.5rem;
 		font-weight: 400;

package/dist/date-picker/DateRangePicker.svelte

@@ -297,7 +297,7 @@
 		--np-dialog-elevation: none;
 		--np-dialog-container-color: var(
 			--np-date-range-picker-container-color,
-			var(--np-color-surface)
+			var(--np-color-surface-container-high)
 		);
 		--np-dialog-container-shape: var(
 			--np-date-range-picker-container-shape,
@@ -368,6 +368,7 @@
 
 	.np-date-range-picker-headline {
 		margin: 0;
+		color: var(--np-color-on-surface);
 		display: flex;
 		gap: 0.5rem;
 		font-size: 1.375rem;
@@ -419,10 +420,6 @@
 			--np-dialog-inset: 2rem 1rem;
 			--np-dialog-max-height: calc(100dvh - 3rem);
 			--np-dialog-elevation: var(--np-elevation-3);
-			--np-dialog-container-color: var(
-				--np-date-range-picker-container-color,
-				var(--np-color-surface-container-high)
-			);
 			--np-dialog-container-shape: var(
 				--np-date-range-picker-container-shape,
 				var(--np-shape-corner-extra-large)

package/dist/dialog/Dialog.svelte

@@ -40,14 +40,12 @@
 <dialog
 	bind:this={element}
 	{...attributes}
-	tabindex="-1"
 	closedby="any"
 	aria-labelledby={ariaLabelledby ?? (headline ? `${uid}-dialog-headline` : undefined)}
 	aria-describedby={supportingText ? `${uid}-dialog-supporting-text` : undefined}
 	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
 	ontoggle={(event) => {
 		open = event.newState === 'open'
-		if (event.newState === 'open') element?.focus()
 		ontoggle?.(event)
 	}}
 	onclick={(event) => {
@@ -114,7 +112,7 @@
 
 	.np-dialog {
 		border: 0;
-		background-color: var(--np-dialog-container-color, var(--np-color-surface));
+		background-color: var(--np-dialog-container-color, var(--np-color-surface-container-high));
 		color: var(--np-color-on-surface);
 		padding: var(--np-dialog-padding, 1.5rem);
 		border-radius: var(--np-dialog-container-shape, var(--np-shape-corner-extra-large));
@@ -129,6 +127,7 @@
 
 	.np-dialog-scroller {
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		display: flex;
 		flex: 1 1 0%;
 		flex-direction: column;

package/dist/fab/ExtendedFab.svelte

@@ -228,11 +228,7 @@
 
 	@media (hover: hover) {
 		.np-extended-fab:not(:disabled):hover {
-			background-color: color-mix(
-				in srgb,
-				var(--np-fab-icon-color, var(--_icon-color)) 8%,
-				var(--np-fab-container-color, var(--_container-color))
-			);
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-4));
 		}
 		.np-fab-lowered:not(:disabled):hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));

package/dist/fab/Fab.svelte

@@ -184,12 +184,7 @@
 
 	@media (hover: hover) {
 		.np-fab:not(:disabled):hover {
-			box-shadow: var(--np-fab-elevation, var(--np-elevation-3));
-			background-color: color-mix(
-				in srgb,
-				var(--np-fab-icon-color, var(--_icon-color)) 8%,
-				var(--np-fab-container-color, var(--_container-color))
-			);
+			box-shadow: var(--np-fab-elevation, var(--np-elevation-4));
 		}
 		.np-fab-lowered:not(:disabled):hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));

package/dist/fab/FabMenu.svelte

@@ -158,7 +158,7 @@
 		background: none;
 		flex-direction: column;
 		align-items: flex-end;
-		gap: 0.5rem;
+		gap: 0.25rem;
 		overflow: visible;
 	}
 
@@ -168,22 +168,22 @@
 
 	.np-fab-menu-block-start .np-fab-menu-list {
 		position-area: block-start;
-		margin-block-end: 0.75rem;
+		margin-block-end: 0.5rem;
 		flex-direction: column-reverse;
 	}
 	.np-fab-menu-block-end .np-fab-menu-list {
 		position-area: block-end;
-		margin-block-start: 0.75rem;
+		margin-block-start: 0.5rem;
 	}
 	.np-fab-menu-inline-start .np-fab-menu-list {
 		position-area: inline-start;
-		margin-inline-end: 0.75rem;
+		margin-inline-end: 0.5rem;
 		flex-direction: row-reverse;
 		align-items: center;
 	}
 	.np-fab-menu-inline-end .np-fab-menu-list {
 		position-area: inline-end;
-		margin-inline-start: 0.75rem;
+		margin-inline-start: 0.5rem;
 		flex-direction: row;
 		align-items: center;
 	}

package/dist/list/Item.svelte

@@ -209,4 +209,7 @@
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 		background-color: color-mix(in srgb, var(--np-color-on-surface) 10%, transparent);
 	}
+	.np-item.disabled .np-item-supporting-text {
+		color: inherit;
+	}
 </style>

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -133,13 +133,12 @@
 		font-weight: var(--np-navigation-bar-item-font-weight, 500);
 		color: var(--np-color-on-surface-variant);
 		max-width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		text-align: center;
+		overflow-wrap: anywhere;
 	}
 	.np-navigation-bar-item-selected .np-navigation-bar-item-label {
 		font-weight: var(--np-navigation-bar-item-selected-font-weight, 500);
-		color: var(--np-color-on-surface);
+		color: var(--np-color-secondary);
 	}
 
 	.np-navigation-bar-item-label-selected .np-navigation-bar-item-label {

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -152,7 +152,6 @@
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 		font-weight: 500;
-		padding-inline-end: 0.5rem;
 		color: var(--np-color-on-surface-variant);
 	}
 </style>

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -133,7 +133,7 @@
 
 	.np-navigation-action-selected .np-navigation-action-label {
 		font-weight: var(--np-navigation-rail-item-selected-font-weight, 500);
-		color: var(--np-color-on-surface);
+		color: var(--np-color-secondary);
 	}
 	.np-touch {
 		height: 56px;

package/dist/progress/CircularProgress.svelte

@@ -119,6 +119,7 @@
 
 <style>
 	.np-container {
+		--_stroke: var(--np-circular-progress-active-indicator-width, 8.3333);
 		all: unset;
 		display: inline-flex;
 		vertical-align: middle;
@@ -155,7 +156,7 @@
 	}
 	circle,
 	.wave {
-		stroke-width: calc(var(--np-circular-progress-active-indicator-width, 8.3333) * 1%);
+		stroke-width: calc(var(--_stroke) * 1%);
 		stroke-dasharray: 100;
 		fill: transparent;
 	}
@@ -163,16 +164,21 @@
 	circle {
 		cx: 50%;
 		cy: 50%;
-		r: calc(50% * (1 - var(--np-circular-progress-active-indicator-width, 8.3333) / 100));
+		r: calc(50% * (1 - var(--_stroke) / 100));
 		transform-box: view-box;
 		transform-origin: 50% 50%;
 	}
 
 	.progress {
-		--_stroke: var(--np-circular-progress-active-indicator-width, 8.3333);
 		--_gap: calc((0.1 + var(--_stroke) / 100) / (3.14159265 * (1 - var(--_stroke) / 100)) * 100);
 	}
 
+	/* The flat ring is drawn 40dp wide inside the 48dp box, so the width is scaled to stay a
+	   percentage of the full indicator size. */
+	.progress:not(.wavy) {
+		--_stroke: calc(var(--np-circular-progress-active-indicator-width, 8.3333) * 1.2);
+	}
+
 	.wavy .track {
 		r: calc(50% * (1 - var(--_stroke) / 100 - 0.0666667));
 	}

package/dist/progress/LinearProgress.svelte

@@ -217,7 +217,7 @@
 		border-radius: var(--np-linear-progress-track-shape, var(--np-shape-corner-full));
 		display: flex;
 		position: relative;
-		min-width: 80px;
+		min-width: 40px;
 		height: var(--np-linear-progress-track-height, 0.25rem);
 		content-visibility: auto;
 		contain: strict;

package/dist/radio/Radio.svelte

@@ -26,7 +26,7 @@
 	{#if !attributes.disabled}
 		<Ripple forElement={inputEl} class="np-radio-ripple" />
 	{/if}
-	<svg class="np-radio-icon" viewBox="0 0 20 20">
+	<svg aria-hidden="true" class="np-radio-icon" viewBox="0 0 20 20">
 		<mask id="{uid}-mask">
 			<rect width="100%" height="100%" fill="white" />
 			<circle cx="10" cy="10" r="8" fill="black" />

package/dist/select/NativeSelect.svelte

@@ -18,6 +18,7 @@
 		element = $bindable(),
 		'aria-describedby': ariaDescribedby,
 		'aria-errormessage': ariaErrormessage,
+		'aria-invalid': ariaInvalid,
 		...attributes
 	}: NativeSelectProps = $props()
 	const uid = $props.id()
@@ -78,6 +79,7 @@
 		id={selectId}
 		bind:value
 		{...attributes}
+		aria-invalid={errorText ? 'true' : ariaInvalid}
 		aria-errormessage={[errorText && `supporting-text-${uid}`, ariaErrormessage]
 			.filter(Boolean)
 			.join(' ') || undefined}

package/dist/select/Select.svelte

@@ -32,10 +32,16 @@
 		multiple,
 		virtualThreshold = 300,
 		clampMenuWidth = false,
+		'aria-invalid': ariaInvalid,
+		'aria-describedby': ariaDescribedby,
+		'aria-errormessage': ariaErrormessage,
 		...attributes
 	}: SelectProps = $props()
 
 	const uid = $props.id()
+	const supportingTextId = `supporting-text-${uid}`
+	const ids = (...values: (string | undefined | null | false)[]) =>
+		values.filter(Boolean).join(' ') || undefined
 	$effect(() => {
 		if (value === undefined) {
 			if (multiple) {
@@ -59,6 +65,11 @@
 	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
 
 	let errorText = $derived(issues?.map((i) => i.message).join(', '))
+	let ariaProps = $derived({
+		'aria-invalid': errorText ? ('true' as const) : ariaInvalid,
+		'aria-errormessage': ids(errorText && supportingTextId, ariaErrormessage),
+		'aria-describedby': ids(supportingText && !errorText && supportingTextId, ariaDescribedby),
+	})
 	let selectElement = $state<HTMLSelectElement>()
 	let menuElement = $state<HTMLDivElement>()
 	let anchorElement = $state<HTMLDivElement>()
@@ -309,6 +320,7 @@
 		aria-label={attributes['aria-label'] || label}
 		aria-disabled={disabled}
 		aria-activedescendant={activeDescendantId}
+		{...ariaProps}
 		data-testid={attributes['data-testid']}
 		bind:this={field}
 		autofocus={disabled ? false : autofocus}
@@ -408,7 +420,6 @@
 						{#if multiple}
 							<select
 								tabindex="-1"
-								aria-invalid={attributes['aria-invalid']}
 								{disabled}
 								{required}
 								{name}
@@ -429,7 +440,6 @@
 						{:else}
 							<select
 								tabindex="-1"
-								aria-invalid={attributes['aria-invalid']}
 								{disabled}
 								{required}
 								{name}
@@ -464,7 +474,7 @@
 			</div>
 		</div>
 		{#if supportingText || errorText}
-			<div class="supporting-text" role={errorText ? 'alert' : undefined}>
+			<div id={supportingTextId} class="supporting-text" role={errorText ? 'alert' : undefined}>
 				<span>
 					{errorText ?? supportingText}
 				</span>
@@ -580,10 +590,10 @@
 		border-bottom-color: var(--np-color-primary);
 		border-bottom-width: 3px;
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .active-indicator::before {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .active-indicator::before {
 		border-bottom-color: var(--np-color-error);
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .active-indicator::after {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .active-indicator::after {
 		border-bottom-color: var(--np-color-error);
 	}
 	.disabled .active-indicator::before {
@@ -681,7 +691,7 @@
 		justify-content: space-between;
 		padding: 0.25rem 1rem 0;
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .supporting-text {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .supporting-text {
 		color: var(--np-color-error);
 	}
 	.disabled .supporting-text {
@@ -810,8 +820,7 @@
 		margin-inline-start: 1rem;
 		margin-inline-end: 0.75rem;
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .start,
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .end {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .end {
 		color: var(--np-color-error);
 	}
 	.disabled .start,
@@ -928,15 +937,13 @@
 	.field:focus .label {
 		color: var(--np-color-primary);
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .label,
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])).menu-open .label,
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])):focus .label {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .label,
+	.field:is([aria-invalid='true'], :has(select:user-invalid)).menu-open .label,
+	.field:is([aria-invalid='true'], :has(select:user-invalid)):focus .label {
 		color: var(--np-color-error);
 	}
 	.disabled .label {
 		color: var(--np-color-on-surface);
-	}
-	.disabled {
 		opacity: 0.38;
 	}
 	.resizable:not(.disabled) .np-container {
@@ -1079,16 +1086,28 @@
 		z-index: 1;
 	}
 
+	.field:not(.disabled, .menu-open, :focus):hover .np-outline {
+		border-color: var(--np-color-on-surface);
+		color: var(--np-color-on-surface);
+	}
 	.field.menu-open .np-outline,
 	.field:focus .np-outline {
 		border-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .np-outline,
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])).menu-open .np-outline,
-	.field:has(select:is(:user-invalid, [aria-invalid='true'])):focus .np-outline {
+	.field:is([aria-invalid='true'], :has(select:user-invalid)) .np-outline,
+	.field:is([aria-invalid='true'], :has(select:user-invalid)).menu-open .np-outline,
+	.field:is([aria-invalid='true'], :has(select:user-invalid)):focus .np-outline {
 		border-color: var(--np-color-error);
 	}
+	.field:is([aria-invalid='true'], :has(select:user-invalid)):not(
+			.disabled,
+			.menu-open,
+			:focus
+		):hover
+		.np-outline {
+		border-color: var(--np-color-on-error-container);
+	}
 	.disabled .np-outline {
 		border-color: var(--np-color-on-surface);
 		color: var(--np-color-on-surface);

package/dist/sheet/Sheet.svelte

@@ -108,6 +108,8 @@
 		max-height: var(--np-sheet-size, 50dvh);
 	}
 	.np-sheet-bottom {
+		max-width: var(--np-sheet-max-width, 40rem);
+		margin-inline: auto;
 		inset-block-end: 0;
 		inset-block-start: auto;
 		border-start-start-radius: var(--np-sheet-shape, var(--np-shape-corner-extra-large));
@@ -139,21 +141,26 @@
 		border-start-start-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
 		border-end-start-radius: var(--np-sheet-shape, var(--np-shape-corner-large));
 	}
+	.np-sheet-start:not(.np-sheet-modal),
+	.np-sheet-end:not(.np-sheet-modal) {
+		background-color: var(--np-sheet-container-color, var(--np-color-surface));
+		border-radius: var(--np-sheet-shape, 0);
+	}
 
 	.np-sheet-handle {
 		flex: none;
 		width: 2rem;
 		height: 0.25rem;
-		margin: 1rem auto 0;
+		margin: 1.375rem auto;
 		border-radius: var(--np-shape-corner-full);
-		background-color: var(--np-sheet-handle-color, var(--np-color-outline-variant));
+		background-color: var(--np-sheet-handle-color, var(--np-color-on-surface-variant));
 	}
 
 	.np-sheet-header {
 		flex: none;
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.75rem;
 		padding: 1rem 1.5rem 0;
 	}
 	.np-sheet-headline {
@@ -163,6 +170,10 @@
 		line-height: 2rem;
 		font-weight: 400;
 	}
+	.np-sheet-start .np-sheet-headline,
+	.np-sheet-end .np-sheet-headline {
+		color: var(--np-color-on-surface-variant);
+	}
 	.np-sheet-action {
 		flex: none;
 		display: flex;
@@ -171,6 +182,7 @@
 	.np-sheet-content {
 		flex: 1;
 		min-height: 0;
+		overflow-x: hidden;
 		overflow-y: auto;
 		overscroll-behavior: contain;
 		padding: 1rem 1.5rem 1.5rem;

package/dist/slider/Slider.svelte

@@ -391,6 +391,7 @@
 	}
 	.np-slider.np-size-m {
 		--_size-track-height: 2.5rem;
+		--_size-handle-height: 3.25rem;
 		--_size-corner: 0.75rem;
 	}
 	.np-slider.np-size-l {
@@ -614,9 +615,9 @@
 		flex: none;
 		writing-mode: horizontal-tb;
 		direction: ltr;
-		min-inline-size: 2rem;
+		min-inline-size: 3rem;
 		box-sizing: border-box;
-		padding: 0.375rem 0.625rem;
+		padding: 0.75rem 1rem;
 		border-radius: var(--np-shape-corner-full);
 		background: var(--np-slider-label-container-color, var(--np-color-inverse-surface));
 		color: var(--np-slider-label-text-color, var(--np-color-inverse-on-surface));

package/dist/snackbar/Snackbar.svelte

@@ -48,7 +48,7 @@
 	{popover}
 	class={['np-snackbar', attributes.class]}
 	bind:this={element}
-	role="alert"
+	role="status"
 	aria-labelledby="np-snackbar-label-{uid}"
 	onpointerenter={() => (hovered = true)}
 	onpointerleave={() => (hovered = false)}
@@ -103,9 +103,12 @@
 		padding: 0.875rem 1rem;
 	}
 	.np-snackbar-label {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		text-wrap: nowrap;
+		overflow-wrap: anywhere;
 	}
 	.np-snackbar-inner {
 		display: flex;

package/dist/switch/Switch.svelte

@@ -30,7 +30,7 @@
 	<div class="np-track"></div>
 	<div class={['np-handle', icons === 'both' && 'both-icons']}>
 		{#if icons}
-			<svg class="np-switch-icon np-icon-selected" viewBox="0 0 24 24">
+			<svg aria-hidden="true" class="np-switch-icon np-icon-selected" viewBox="0 0 24 24">
 				<path
 					d="M20 6L9 17l-5-5"
 					fill="none"
@@ -42,7 +42,7 @@
 			</svg>
 		{/if}
 		{#if icons === 'both'}
-			<svg class="np-switch-icon np-icon-unselected" viewBox="0 0 24 24">
+			<svg aria-hidden="true" class="np-switch-icon np-icon-unselected" viewBox="0 0 24 24">
 				<path
 					fill="currentColor"
 					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
@@ -75,6 +75,7 @@
 
 <style>
 	.np-switch {
+		--_travel: 1.25rem;
 		position: relative;
 		width: 3.25rem;
 		height: 2rem;
@@ -104,6 +105,10 @@
 		outline-offset: -0.125rem;
 	}
 
+	.np-switch:dir(rtl) {
+		--_travel: -1.25rem;
+	}
+
 	.np-handle {
 		position: absolute;
 		color: var(--np-color-surface-container-highest);
@@ -132,7 +137,7 @@
 	}
 
 	.np-switch:has(input:checked) .np-state-layer {
-		transform: translateX(1.25rem);
+		transform: translateX(var(--_travel));
 	}
 
 	.np-switch input {
@@ -160,11 +165,11 @@
 	}
 
 	.np-switch:not(.np-disabled):has(input:checked:active) .np-handle {
-		transform: translateX(1.25rem) scale(1.75);
+		transform: translateX(var(--_travel)) scale(1.75);
 	}
 
 	.np-switch:has(input:checked) .np-handle {
-		transform: translateX(1.25rem) scale(1.5);
+		transform: translateX(var(--_travel)) scale(1.5);
 		color: var(--np-switch-selected-icon-color, var(--np-color-primary));
 		background-color: var(--np-switch-selected-handle-color, var(--np-color-on-primary));
 	}
@@ -196,7 +201,7 @@
 	}
 
 	.np-error:has(input:checked) .np-switch-icon {
-		fill: var(--np-color-error);
+		color: var(--np-color-error);
 	}
 
 	.np-error {

package/dist/tabs/Tab.svelte

@@ -166,7 +166,7 @@
 		font-weight: 500;
 		gap: 0.5rem;
 		text-wrap: nowrap;
-		min-width: 1.5rem;
+		min-width: calc(1.5rem + 2 * var(--_indicator-gap, 2px));
 	}
 	.np-tab-label-badge {
 		margin-inline-end: 4px;

package/dist/themes/defaultTheme.css

@@ -57,6 +57,7 @@
 	--np-elevation-1: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;
 	--np-elevation-2: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 2px;
 	--np-elevation-3: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px, rgba(0, 0, 0, 0.15) 0px 4px 8px 3px;
+	--np-elevation-4: rgba(0, 0, 0, 0.3) 0px 2px 3px 0px, rgba(0, 0, 0, 0.15) 0px 6px 10px 4px;
 
 	/* Motion: Expressive spatial */
 	--np-motion-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);

package/dist/time-picker/PeriodSelector.svelte

@@ -60,7 +60,7 @@
 	.np-period-selector.vertical {
 		flex-direction: column;
 		width: 3.25rem;
-		height: 5rem;
+		height: var(--np-time-picker-period-selector-height, 5rem);
 		flex: none;
 	}
 
@@ -100,10 +100,7 @@
 		font-size: 1rem;
 		line-height: 1.5rem;
 		font-weight: 500;
-		color: var(
-			--np-time-picker-period-selector-unselected-label-color,
-			var(--np-color-on-surface-variant)
-		);
+		color: var(--np-time-picker-period-selector-unselected-label-color, var(--np-color-on-surface));
 	}
 
 	.np-period-option.selected {

package/dist/time-picker/TimePickerPanel.svelte

@@ -40,6 +40,8 @@
 
 	// A 24-hour dial has no period selector, so its fields take the room that frees up.
 	let fieldWidth = $derived(!hour12 && !horizontal ? '7.125rem' : '6rem')
+	// The period selector matches the 72dp input fields in input mode.
+	let periodHeight = $derived(mode === 'input' ? '4.5rem' : '5rem')
 
 	// Bounds can put a whole half of the day out of reach, and then that half cannot be chosen.
 	let amReachable = $derived([...Array(12).keys()].some((hour) => state.hourReachable(hour)))
@@ -54,7 +56,7 @@
 <div
 	{...attributes}
 	class={['np-time-picker', horizontal && 'np-horizontal', attributes.class]}
-	style="--np-time-picker-time-selector-container-width: {fieldWidth}"
+	style="--np-time-picker-time-selector-container-width: {fieldWidth}; --np-time-picker-period-selector-height: {periodHeight}"
 >
 	{#if headline}
 		<div id={headlineId} class="np-time-picker-headline">{headline}</div>

package/dist/toolbar/Toolbar.svelte

@@ -46,7 +46,9 @@
 	.np-toolbar {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		box-sizing: border-box;
+		min-height: 4rem;
 		gap: var(--np-toolbar-gap, 0.25rem);
 		color: var(--np-toolbar-color, var(--np-color-on-surface));
 		--np-icon-button-icon-color: var(--np-toolbar-color, var(--np-color-on-surface-variant));
@@ -54,6 +56,8 @@
 
 	.np-toolbar-vertical {
 		flex-direction: column;
+		min-height: 0;
+		min-width: 4rem;
 		--np-tooltip-position-area: inline-end;
 		--np-tooltip-justify-self: auto;
 		--np-tooltip-align-self: anchor-center;
@@ -68,17 +72,13 @@
 
 	.np-toolbar-docked {
 		width: 100%;
-		min-height: 4rem;
-		justify-content: center;
-		padding-inline: 0.5rem;
+		padding-inline: 1rem;
 		background-color: var(--np-toolbar-container-color, var(--np-color-surface-container));
 		padding-block-end: max(0px, env(safe-area-inset-bottom));
 	}
 	.np-toolbar-docked.np-toolbar-vertical {
 		width: auto;
 		height: 100%;
-		min-height: 0;
-		min-width: 4rem;
 		padding-block: 0.5rem;
 		padding-inline: 0;
 	}
@@ -106,10 +106,10 @@
 		margin-block: auto;
 	}
 	.np-toolbar-start {
-		inset-inline-start: var(--np-toolbar-inset, 1rem);
+		inset-inline-start: var(--np-toolbar-inset, 1.5rem);
 	}
 	.np-toolbar-end {
-		inset-inline-end: var(--np-toolbar-inset, 1rem);
+		inset-inline-end: var(--np-toolbar-inset, 1.5rem);
 		margin-inline-start: auto;
 	}
 

package/dist/tooltip/RichTooltip.svelte

@@ -91,7 +91,7 @@
 		padding-block: 0.75rem 1rem;
 	}
 	.np-rich-tooltip-with-actions[popover] {
-		padding-bottom: 0.5rem;
+		padding-block: 0.75rem 0.5rem;
 	}
 	.np-rich-tooltip-subhead {
 		margin-bottom: 0.25rem;

package/package.json

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