noph-ui 0.32.8 → 0.33.0

package/dist/button/Button.svelte

@@ -168,9 +168,9 @@
 		text-decoration: none;
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 		transition:
-			background-color 150ms linear,
-			border-radius 100ms linear,
-			box-shadow 150ms linear;
+			background-color var(--np-motion-expressive-default-effects),
+			border-radius var(--np-motion-expressive-default-effects),
+			box-shadow var(--np-motion-expressive-default-effects);
 	}
 	.xs {
 		font-size: 0.875rem;

package/dist/button/IconButton.svelte

@@ -143,8 +143,8 @@
 		justify-content: center;
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 		transition:
-			background-color 150ms linear,
-			border-radius 100ms linear;
+			background-color var(--np-motion-expressive-default-effects),
+			border-radius var(--np-motion-expressive-default-effects);
 	}
 
 	:global(.np-icon-button svg) {

package/dist/chip/AssistChip.svelte

@@ -15,22 +15,22 @@
 <Button
 	size="xs"
 	shape="square"
-	--np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
-	--np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
+	--np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
 	--np-outlined-button-outline-color="var(--np-assist-chip-outline-color, var(--np-color-outline-variant))"
 	--np-button-icon-size="1.125rem"
-	--np-button-padding="0.5rem 1rem"
+	--np-button-padding={icon ? '0.5rem 1rem' : '1rem'}
 	--np-button-gap="0.5rem"
 	--np-button-shape="0.5rem"
-	--np-button-icon-color="var(--np-color-primary)"
-	--np-outlined-button-container-color="var(--np-color-surface-container-low)"
+	--np-button-icon-color={disabled
+		? 'color-mix(in srgb, var(--np-color-on-surface) 38%, transparent)'
+		: 'var(--np-color-primary)'}
+	style="letter-spacing: 0.006rem"
 	bind:element
 	variant={elevated ? 'elevated' : 'outlined'}
 	{disabled}
 	{...attributes}
+	start={icon}
 >
-	{#snippet start()}
-		{@render icon?.()}
-	{/snippet}
 	{label}
 </Button>

package/dist/chip/FilterChip.svelte

@@ -23,6 +23,16 @@
 	}: FilterChipProps = $props()
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
+	let pressed = $state(false)
+
+	const handlePointerDown = () => {
+		if (disabled) return
+		pressed = true
+	}
+
+	const handlePointerUp = () => {
+		pressed = false
+	}
 
 	$effect(() => {
 		if (!group || !value) return
@@ -46,10 +56,17 @@
 		icon ? 'np-filter-chip-icon' : '',
 		removable ? 'np-filter-chip-removable' : '',
 		disabled ? 'np-filter-chip-disabled' : '',
+		pressed && 'np-filter-chip-pressed',
 		attributes.class,
 	]}
 >
-	<label bind:this={chipLabel} class="np-filter-chip-label">
+	<label
+		bind:this={chipLabel}
+		class="np-filter-chip-label"
+		onpointerdown={handlePointerDown}
+		onpointerup={handlePointerUp}
+		onpointerleave={handlePointerUp}
+	>
 		{#if icon}
 			<div class="np-chip-icon">
 				{@render icon()}
@@ -94,7 +111,9 @@
 		border-radius: var(--np-filter-chip-container-shape, var(--np-shape-corner-small));
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
+		--np-ripple-pressed-opacity: 0.1;
 		min-width: 0;
+		transition: box-shadow var(--np-motion-expressive-slow-effects);
 	}
 	.np-filter-chip-label input {
 		opacity: 0;
@@ -113,12 +132,24 @@
 		z-index: 1;
 		padding-inline: 1rem;
 		overflow: hidden;
+		transition: padding var(--np-motion-expressive-default-effects);
 	}
 	.np-chip-icon-checked {
-		display: none;
+		display: flex;
+		width: 0;
+		min-width: 0;
+		margin-inline-end: -0.5rem;
+		overflow: hidden;
+		transition:
+			width var(--np-motion-expressive-default-effects),
+			margin var(--np-motion-expressive-default-effects);
 	}
 	.np-filter-chip:has(input:checked) .np-chip-icon-checked {
-		display: flex;
+		width: 18px;
+		margin-inline-end: 0;
+	}
+	.np-filter-chip-icon .np-chip-icon-checked {
+		transition: none;
 	}
 	.np-filter-chip:has(input:checked) .np-chip-icon {
 		display: none;
@@ -145,6 +176,7 @@
 		line-height: 1.25rem;
 		font-size: 0.875rem;
 		font-weight: 500;
+		letter-spacing: 0.006rem;
 		white-space: pre;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -155,6 +187,9 @@
 		inset: 0;
 		border-radius: inherit;
 		pointer-events: none;
+		transition:
+			background-color 150ms linear,
+			outline-color 150ms linear;
 	}
 	.np-filter-chip-default::before {
 		outline-style: solid;
@@ -163,7 +198,7 @@
 		outline-offset: -1px;
 	}
 	.np-filter-chip:has(input:checked)::before {
-		outline-style: none;
+		outline-color: transparent;
 		background-color: var(--np-color-secondary-container);
 	}
 	.np-filter-chip-elevated {
@@ -172,6 +207,20 @@
 	.np-filter-chip-elevated::before {
 		background-color: var(--np-color-surface-container-low);
 	}
+	@media (hover: hover) {
+		.np-filter-chip-elevated:not(.np-filter-chip-disabled):hover {
+			box-shadow: var(--np-elevation-2);
+		}
+		.np-filter-chip-default:not(.np-filter-chip-disabled):has(input:checked):hover {
+			box-shadow: var(--np-elevation-1);
+		}
+	}
+	.np-filter-chip-elevated:not(.np-filter-chip-disabled).np-filter-chip-pressed {
+		box-shadow: var(--np-elevation-1);
+	}
+	.np-filter-chip-default:not(.np-filter-chip-disabled):has(input:checked).np-filter-chip-pressed {
+		box-shadow: none;
+	}
 	.np-filter-chip:has(input:checked) {
 		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
 	}
@@ -208,9 +257,6 @@
 	.np-filter-chip-disabled.np-filter-chip-elevated {
 		box-shadow: none;
 	}
-	.np-filter-chip-disabled:has(input:checked)::before {
-		opacity: 0.12;
-	}
 	.np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
 		content: '';
 		position: absolute;

package/dist/chip/InputChip.svelte

@@ -67,6 +67,7 @@
 		border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
+		--np-ripple-pressed-opacity: 0.1;
 		padding-inline-end: 1px;
 		min-width: 0;
 	}
@@ -85,13 +86,16 @@
 		fill: currentColor;
 		gap: 0.5rem;
 		z-index: 1;
-		padding-inline-start: 1rem;
+		padding-inline-start: 0.75rem;
 		overflow: hidden;
 	}
 	.np-chip-icon {
-		color: var(--np-color-primary);
+		color: var(--np-color-on-surface-variant);
 		display: flex;
 	}
+	.np-input-chip-selected .np-chip-icon {
+		color: var(--np-color-primary);
+	}
 	.np-input-chip-icon .np-input-chip-label {
 		padding-inline-start: 0.5rem;
 	}
@@ -99,6 +103,7 @@
 		line-height: 1.25rem;
 		font-size: 0.875rem;
 		font-weight: 500;
+		letter-spacing: 0.006rem;
 		padding-inline-end: 1px;
 		white-space: pre;
 		overflow: hidden;
@@ -114,9 +119,12 @@
 		outline-color: var(--np-input-chip-outline-color, var(--np-color-outline-variant));
 		outline-width: 1px;
 		outline-offset: -1px;
+		transition:
+			background-color 150ms linear,
+			outline-color 150ms linear;
 	}
 	.np-input-chip-selected::before {
-		outline-style: none;
+		outline-color: transparent;
 		background-color: var(--np-color-secondary-container);
 	}
 	.np-input-chip-selected {

package/dist/index.d.ts

@@ -13,7 +13,6 @@ export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
-export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';

package/dist/index.js

@@ -13,7 +13,6 @@ export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
-export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -64,13 +64,13 @@
 
 	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
-		transition: transform 0.25s ease;
+		transition: transform var(--np-motion-expressive-slow-effects);
 	}
 
 	.np-navigation-drawer-container[popover] {
 		transition:
-			overlay 0.25s allow-discrete,
-			display 0.25s allow-discrete;
+			overlay 0.3s allow-discrete,
+			display 0.3s allow-discrete;
 	}
 
 	.np-navigation-drawer-container:popover-open .np-navigation-wrapper {

package/dist/snackbar/Snackbar.svelte

@@ -123,13 +123,13 @@
 		transition:
 			overlay 0.2s allow-discrete,
 			display 0.2s allow-discrete,
-			opacity 0.2s linear;
+			opacity var(--np-motion-expressive-default-effects);
 		opacity: 0;
 	}
 
 	.np-snackbar:popover-open {
 		opacity: 1;
-		animation: slideIn 0.2s linear;
+		animation: slideIn var(--np-motion-expressive-default-spatial);
 	}
 
 	@keyframes slideIn {

package/dist/switch/Switch.svelte

@@ -98,8 +98,8 @@
 		height: 1rem;
 		margin: 0.5rem;
 		transition:
-			transform 0.2s,
-			background-color 0.2s;
+			transform var(--np-motion-expressive-fast-spatial),
+			background-color var(--np-motion-expressive-default-effects);
 		background-color: var(--np-comp-switch-unselected-handle-color, var(--np-color-outline));
 		border-radius: var(--np-comp-switch-handle-shape, var(--np-shape-corner-full));
 	}
@@ -114,7 +114,7 @@
 		height: var(--np-comp-switch-state-layer-size, 2.5rem);
 		margin-block-start: -0.25rem;
 		margin-inline-start: -0.25rem;
-		transition: transform 0.2s;
+		transition: var(--np-motion-expressive-fast-spatial);
 		border-radius: var(--np-comp-switch-state-layer-shape, var(--np-shape-corner-full));
 	}
 

package/dist/tabs/Tab.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
-	import type { TabProps } from './types.ts'
 	import Badge from '../badge/Badge.svelte'
+	import Ripple from '../ripple/Ripple.svelte'
+	import { onMount, tick } from 'svelte'
 	import { getTabsContext } from './context.js'
+	import type { TabProps } from './types.ts'
 
 	let {
 		children,
@@ -22,20 +22,17 @@
 	const tabsContext = getTabsContext()
 	let fallbackIndicator = $state(false)
 
-	const handleClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
-		tabsContext.value = value
-		if (onclick) {
-			onclick(event)
-		}
-	}
-	const handleKeyDown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
-		if (event.key === 'Enter' || event.key === ' ') {
-			tabsContext.value = value
-		}
-		if (onkeydown) {
-			onkeydown(event)
+	$effect(() => {
+		if (tabsContext.value === value) {
+			tabsContext.indicatorValue = value
 		}
+	})
+
+	const setIndicatorValue = async () => {
+		await tick()
+		tabsContext.indicatorValue = value
 	}
+
 	onMount(() => {
 		if (!('anchorName' in document.documentElement.style)) {
 			fallbackIndicator = true
@@ -69,11 +66,15 @@
 				{@render children?.()}
 			{/if}
 			{#if tabsContext.variant === 'primary'}
-				<div class="np-indicator"></div>
+				<div
+					class={['np-indicator', tabsContext.indicatorValue === value && 'np-indicator-anchor']}
+				></div>
 			{/if}
 		</div>
 		{#if tabsContext.variant === 'secondary'}
-			<div class="np-indicator"></div>
+			<div
+				class={['np-indicator', tabsContext.indicatorValue === value && 'np-indicator-anchor']}
+			></div>
 		{/if}
 	</div>
 	<div class="focus-area"></div>
@@ -112,8 +113,18 @@
 			tabsContext.variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}
-		onclick={handleClick}
-		onkeydown={handleKeyDown}
+		onclick={(event) => {
+			tabsContext.value = value
+			setIndicatorValue()
+			onclick?.(event)
+		}}
+		onkeydown={(event) => {
+			if (event.key === 'Enter' || event.key === ' ') {
+				tabsContext.value = value
+				setIndicatorValue()
+			}
+			onkeydown?.(event)
+		}}
 	>
 		{@render content()}
 	</button>

package/dist/tabs/Tabs.svelte

@@ -11,13 +11,11 @@
 		...attributes
 	}: TabsProps = $props()
 
-	let uid = $props.id()
-
 	// svelte-ignore state_referenced_locally
 	let tabsContext = $state<TabsContext>({
 		value,
+		indicatorValue: value,
 		variant,
-		id: uid,
 	})
 	$effect(() => {
 		value = tabsContext.value
@@ -29,6 +27,10 @@
 	})
 	setTabsContext(tabsContext)
 
+	const secondaryStyle = $derived(
+		tabsContext.variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : '',
+	)
+
 	const handleKeydown = (
 		event: KeyboardEvent & {
 			currentTarget: EventTarget & HTMLDivElement
@@ -47,11 +49,7 @@
 	}
 </script>
 
-<nav
-	{...attributes}
-	bind:this={element}
-	style={tabsContext.variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : ''}
->
+<nav {...attributes} bind:this={element} style={secondaryStyle}>
 	<div
 		class={['np-tabs']}
 		role="tablist"
@@ -65,7 +63,7 @@
 </nav>
 
 <style>
-	:global(.np-tabs .np-tab-content-active .np-indicator) {
+	:global(.np-tabs .np-indicator-anchor) {
 		anchor-name: --np-tab-indicator;
 	}
 	.np-tabs {
@@ -92,7 +90,7 @@
 			border-start-start-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 			border-start-end-radius: var(--np-indicator-radius, var(--np-shape-corner-full));
 			position-anchor: --np-tab-indicator;
-			transition: cubic-bezier(0.33, 1, 0.68, 1) 0.3s;
+			transition: var(--np-motion-expressive-fast-spatial);
 		}
 	}
 </style>

package/dist/tabs/types.d.ts

@@ -16,6 +16,6 @@ export interface TabsProps extends HTMLAttributes<HTMLElement> {
 }
 export interface TabsContext {
     value: string | number;
+    indicatorValue: string | number;
     variant: 'primary' | 'secondary';
-    id: string;
 }

package/dist/text-field/TextField.svelte

@@ -171,7 +171,7 @@
 	}
 	.active-indicator::after {
 		opacity: 0;
-		transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+		transition: opacity var(--np-motion-expressive-fast-effects);
 	}
 	.active-indicator::before,
 	.active-indicator::after {
@@ -572,9 +572,7 @@
 		inset-inline-start: var(--floating-label-inline-start, 0);
 	}
 	.label {
-		transition-property: all;
-		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: 150ms;
+		transition: all var(--np-motion-expressive-fast-effects);
 		box-sizing: border-box;
 		color: var(--np-color-on-surface-variant);
 		overflow: hidden;
@@ -737,7 +735,7 @@
 	.outline-end::after,
 	.outline-notch::after {
 		opacity: 0;
-		transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
+		transition: opacity var(--np-motion-expressive-fast-effects);
 	}
 	.field:has(input:focus-visible) .outline-start::after,
 	.field:has(input:focus-visible) .outline-end::after,

package/dist/themes/defaultTheme.css

@@ -63,6 +63,27 @@
 	--np-elevation-3:
 		rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
 		rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+
+	/* Motion: Expressive spatial */
+	--np-motion-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);
+	--np-motion-expressive-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);
+	--np-motion-expressive-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);
+
+	/* Motion: Expressive effects */
+	--np-motion-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
+	--np-motion-expressive-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
+	--np-motion-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);
+
+	/* Motion: Standard spatial */
+	--np-motion-standard-fast-spatial: 350ms cubic-bezier(0.27, 1.06, 0.18, 1);
+	--np-motion-standard-default-spatial: 500ms cubic-bezier(0.27, 1.06, 0.18, 1);
+	--np-motion-standard-slow-spatial: 750ms cubic-bezier(0.27, 1.06, 0.18, 1);
+
+	/* Motion: Standard effects */
+	--np-motion-standard-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
+	--np-motion-standard-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
+	--np-motion-standard-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);
+
 	--np-shape-corner-full: 9999px;
 	--np-shape-corner-extra-small: 0.25rem;
 	--np-shape-corner-small: 0.5rem;

package/dist/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { TooltipProps } from './types.ts'
-	import { MediaQuery } from 'svelte/reactivity'
 	import { on } from 'svelte/events'
+	import { MediaQuery } from 'svelte/reactivity'
+	import type { TooltipProps } from './types.ts'
 
 	let {
 		children,
@@ -127,7 +127,7 @@
 	}
 	.np-tooltip:popover-open {
 		opacity: 1;
-		animation: scaleIn 0.3s ease;
+		animation: scaleIn var(--np-motion-expressive-fast-spatial);
 	}
 
 	@keyframes scaleIn {

package/dist/types.d.ts

@@ -13,7 +13,6 @@ export * from './progress/types.ts';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
 export * from './select/types.ts';
-export * from './slider/types.ts';
 export * from './snackbar/types.ts';
 export * from './switch/types.ts';
 export * from './text-field/types.ts';

package/dist/types.js

@@ -13,7 +13,6 @@ export * from './progress/types.ts';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
 export * from './select/types.ts';
-export * from './slider/types.ts';
 export * from './snackbar/types.ts';
 export * from './switch/types.ts';
 export * from './text-field/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.32.8",
+	"version": "0.33.0",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -83,7 +83,7 @@
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.5.1",
 		"publint": "^0.3.18",
-		"svelte": "^5.55.0",
+		"svelte": "^5.55.1",
 		"svelte-check": "^4.4.5",
 		"typescript": "^6.0.2",
 		"typescript-eslint": "^8.57.2",

package/dist/slider/Slider.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { SliderProps } from './types.ts'
-
-	let {
-		type = 'standard',
-		orientation = 'horizontal',
-		size = 'sm',
-		stops = false,
-		value = $bindable(0),
-		min = 0,
-		max = 100,
-		step = 1,
-		element = $bindable(),
-		inputElement = $bindable(),
-		...attributes
-	}: SliderProps = $props()
-</script>
-
-<input class={[orientation]} bind:this={inputElement} type="range" />
-
-<style>
-	.vertical {
-		writing-mode: vertical-lr;
-		direction: rtl;
-	}
-</style>

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

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

package/dist/slider/index.d.ts

@@ -1 +0,0 @@
-export { default as Slider } from './Slider.svelte';

package/dist/slider/index.js

@@ -1 +0,0 @@
-export { default as Slider } from './Slider.svelte';

package/dist/slider/types.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLInputAttributes } from 'svelte/elements';
-export interface SliderProps extends Omit<HTMLInputAttributes, 'type' | 'role' | 'checked' | 'indeterminate' | 'size'> {
-    type?: 'standard' | 'centered' | 'range';
-    orientation?: 'horizontal' | 'vertical';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    stops?: boolean;
-    insetIcon?: Snippet;
-    inputElement?: HTMLInputElement;
-    element?: HTMLDivElement;
-}

package/dist/slider/types.js

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