noph-ui 0.32.9 → 0.33.1

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/FilterChip.svelte

@@ -113,7 +113,7 @@
 		--np-icon-size: 1.125rem;
 		--np-ripple-pressed-opacity: 0.1;
 		min-width: 0;
-		transition: box-shadow 150ms linear;
+		transition: box-shadow var(--np-motion-expressive-slow-effects);
 	}
 	.np-filter-chip-label input {
 		opacity: 0;
@@ -132,7 +132,7 @@
 		z-index: 1;
 		padding-inline: 1rem;
 		overflow: hidden;
-		transition: padding 200ms ease;
+		transition: padding var(--np-motion-expressive-default-effects);
 	}
 	.np-chip-icon-checked {
 		display: flex;
@@ -141,8 +141,8 @@
 		margin-inline-end: -0.5rem;
 		overflow: hidden;
 		transition:
-			width 200ms ease,
-			margin 200ms ease;
+			width var(--np-motion-expressive-default-effects),
+			margin var(--np-motion-expressive-default-effects);
 	}
 	.np-filter-chip:has(input:checked) .np-chip-icon-checked {
 		width: 18px;

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/keyboard-nav.d.ts

@@ -0,0 +1,8 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const rovingTabindex: (itemSelector: string, options?: {
+    currentAttr?: string;
+    currentValue?: string;
+}) => Attachment<HTMLElement>;
+export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal") => (event: KeyboardEvent & {
+    currentTarget: EventTarget & HTMLElement;
+}) => void;

package/dist/keyboard-nav.js

@@ -0,0 +1,69 @@
+export const rovingTabindex = (itemSelector, options = {}) => {
+    const { currentAttr = 'aria-current', currentValue = 'page' } = options;
+    return (node) => {
+        const getItems = () => Array.from(node.querySelectorAll(itemSelector));
+        const setTabstop = (target) => {
+            for (const i of getItems()) {
+                const wanted = i === target ? 0 : -1;
+                if (i.tabIndex !== wanted)
+                    i.tabIndex = wanted;
+            }
+        };
+        const sync = () => {
+            const items = getItems();
+            if (items.length === 0)
+                return;
+            const focused = node.querySelector(`${itemSelector}:focus`);
+            const current = items.find((i) => i.getAttribute(currentAttr) === currentValue);
+            setTabstop(focused ?? current ?? items[0]);
+        };
+        const onFocusIn = (event) => {
+            const target = event.target.closest(itemSelector);
+            if (!target || !node.contains(target) || target.tabIndex === 0)
+                return;
+            setTabstop(target);
+        };
+        sync();
+        node.addEventListener('focusin', onFocusIn);
+        const observer = new MutationObserver(sync);
+        observer.observe(node, {
+            attributes: true,
+            attributeFilter: [currentAttr],
+            subtree: true,
+            childList: true,
+        });
+        return () => {
+            node.removeEventListener('focusin', onFocusIn);
+            observer.disconnect();
+        };
+    };
+};
+export const arrowKeyNav = (itemSelector, orientation = 'vertical') => (event) => {
+    const [prev, next] = orientation === 'vertical'
+        ? ['ArrowUp', 'ArrowDown']
+        : ['ArrowLeft', 'ArrowRight'];
+    const { key } = event;
+    if (key !== prev && key !== next && key !== 'Home' && key !== 'End')
+        return;
+    const items = Array.from(event.currentTarget.querySelectorAll(itemSelector));
+    if (items.length === 0)
+        return;
+    const focused = event.currentTarget.querySelector(`${itemSelector}:focus`);
+    if (!focused)
+        return;
+    const currentIndex = items.indexOf(focused);
+    let target;
+    if (key === 'Home') {
+        target = items[0];
+    }
+    else if (key === 'End') {
+        target = items[items.length - 1];
+    }
+    else {
+        const delta = key === next ? 1 : -1;
+        const index = currentIndex + delta;
+        target = index < 0 ? items[items.length - 1] : index >= items.length ? items[0] : items[index];
+    }
+    target.focus();
+    event.preventDefault();
+};

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.ts'
 	import type { NavigationDrawerProps } from './types.ts'
 	let {
 		modal = false,
@@ -7,12 +8,22 @@
 		direction = 'ltr',
 		popover,
 		children,
+		onkeydown: userKeydown,
 		...attributes
 	}: NavigationDrawerProps = $props()
+
+	const attach = rovingTabindex('.np-navigation-drawer-item')
+	const arrowHandler = arrowKeyNav('.np-navigation-drawer-item')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
 </script>
 
 <nav
 	{...attributes}
+	{@attach attach}
 	bind:this={element}
 	popover={modal ? popover || 'auto' : undefined}
 	style="--np-navigation-drawer-start: {direction === 'ltr'
@@ -24,6 +35,7 @@
 		backdrop && 'np-navigation-drawer-backdrop',
 		attributes.class,
 	]}
+	onkeydown={handleKeydown}
 >
 	{#if backdrop}
 		<div
@@ -64,13 +76,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/navigation-drawer/NavigationDrawerItem.svelte

@@ -28,12 +28,14 @@
 {#if 'href' in attributes}
 	<a
 		{...attributes}
+		href={attributes.href}
 		class={[
 			'np-navigation-drawer-item',
 			selected && 'np-navigation-drawer-item-selected',
 			attributes.class,
 		]}
 		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</a>
@@ -46,7 +48,8 @@
 			attributes.class,
 		]}
 		type="button"
-		aria-pressed={selected ? 'true' : undefined}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</button>
@@ -97,7 +100,11 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-item:focus-visible {
+			animation: focusAnimation 0.3s ease forwards;
+		}
 	}
 	@keyframes focusAnimation {
 		0% {

package/dist/navigation-rail/NavigationRail.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.ts'
 	import type { NavigationRailProps } from './types.ts'
 
-	let { children, ...attributes }: NavigationRailProps = $props()
+	let { children, onkeydown: userKeydown, ...attributes }: NavigationRailProps = $props()
+
+	const attach = rovingTabindex('.np-navigation-action')
+	const arrowHandler = arrowKeyNav('.np-navigation-action')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
 </script>
 
-<nav {...attributes} class="navigation-rail {attributes.class}">
+<nav
+	{...attributes}
+	{@attach attach}
+	class="navigation-rail {attributes.class}"
+	onkeydown={handleKeydown}
+>
 	{#if children}
 		{@render children()}
 	{/if}

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -19,8 +19,10 @@
 {#if 'href' in attributes}
 	<a
 		{...attributes}
+		href={attributes.href}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
 		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</a>
@@ -28,7 +30,8 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
-		aria-pressed={selected ? 'true' : undefined}
+		aria-current={selected ? 'page' : undefined}
+		tabindex={selected ? 0 : -1}
 	>
 		{@render content()}
 	</button>
@@ -54,7 +57,11 @@
 		outline-width: 3px;
 		outline-offset: 2px;
 		border-radius: 1rem;
-		animation: focusAnimation 0.3s ease forwards;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-action:focus-visible {
+			animation: focusAnimation 0.3s ease forwards;
+		}
 	}
 	@keyframes focusAnimation {
 		0% {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.ts'
 	import { setTabsContext } from './context.js'
 	import type { TabsContext, TabsProps } from './types.ts'
 
@@ -11,13 +12,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,35 +28,22 @@
 	})
 	setTabsContext(tabsContext)
 
-	const handleKeydown = (
-		event: KeyboardEvent & {
-			currentTarget: EventTarget & HTMLDivElement
-		},
-	) => {
-		const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('.np-tab'))
-		if (tabs && tabs.length > 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
-			const focusedTab = event.currentTarget.querySelector<HTMLElement>('.np-tab:focus')
-			const currentIndex = focusedTab ? tabs.indexOf(focusedTab) : 0
-			const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)
-			const newTab =
-				index < 0 ? tabs[tabs.length - 1] : index >= tabs.length ? tabs[0] : tabs[index]
-			newTab.focus()
-			event.preventDefault()
-		}
-	}
+	const secondaryStyle = $derived(
+		tabsContext.variant === 'secondary' ? '--np-indicator-radius: 0;--_indicator-gap: 0' : '',
+	)
+
+	const attach = rovingTabindex('.np-tab', { currentAttr: 'aria-selected', currentValue: 'true' })
+	const onkeydown = arrowKeyNav('.np-tab', 'horizontal')
 </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
+		{@attach attach}
 		class={['np-tabs']}
 		role="tablist"
 		aria-orientation="horizontal"
 		tabindex="-1"
-		onkeydown={handleKeydown}
+		{onkeydown}
 	>
 		{@render children?.()}
 	</div>
@@ -65,7 +51,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 +78,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.9",
+	"version": "0.33.1",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -70,25 +70,25 @@
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
 		"@materialx/material-color-utilities": "^0.4.8",
-		"@playwright/test": "^1.58.2",
+		"@playwright/test": "^1.59.1",
 		"@sveltejs/adapter-auto": "^7.0.1",
-		"@sveltejs/kit": "^2.55.0",
+		"@sveltejs/kit": "^2.57.1",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@types/eslint": "^9.6.1",
-		"eslint": "^10.1.0",
+		"eslint": "^10.2.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.16.0",
-		"globals": "^17.4.0",
-		"prettier": "^3.8.1",
+		"eslint-plugin-svelte": "^3.17.1",
+		"globals": "^17.5.0",
+		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^3.5.1",
 		"publint": "^0.3.18",
-		"svelte": "^5.55.0",
-		"svelte-check": "^4.4.5",
-		"typescript": "^6.0.2",
-		"typescript-eslint": "^8.57.2",
-		"vite": "8.0.3",
-		"vitest": "^4.1.2"
+		"svelte": "^5.55.4",
+		"svelte-check": "^4.4.6",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.59.0",
+		"vite": "8.0.10",
+		"vitest": "^4.1.5"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",

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 {};