noph-ui 0.30.12 → 0.31.0

package/README.md

@@ -66,6 +66,7 @@ Beta (No breaking changes expected)
 - Segmented buttons
 - Select
 - Snackbar
+- Switch
 - Text fields
 - Tabs
 

package/dist/button/Button.svelte

@@ -156,7 +156,7 @@
 		font: inherit;
 		background-color: transparent;
 		border-width: 0;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		position: relative;
 		cursor: pointer;
 		display: inline-flex;

package/dist/button/IconButton.svelte

@@ -131,7 +131,7 @@
 	.np-icon-button {
 		font: inherit;
 		box-sizing: border-box;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		background-color: transparent;
 		border-width: 0;
 		position: relative;

package/dist/button/SegmentedButton.svelte

@@ -113,7 +113,7 @@
 		cursor: pointer;
 		font-size: 0.875rem;
 		font-weight: 500;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		white-space: nowrap;
 		user-select: none;
 		display: flex;

package/dist/card/Card.svelte

@@ -176,7 +176,7 @@
 		box-sizing: border-box;
 		color: var(--np-color-on-surface);
 		text-decoration: none;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		border-radius: var(--border-radius);
 		background-color: var(--background-color);
 		cursor: pointer;

package/dist/checkbox/Checkbox.svelte

@@ -73,7 +73,7 @@
 		vertical-align: top;
 		width: 18px;
 		cursor: pointer;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		margin: var(--np-checkbox-margin, max(0px, (48px - 18px)/2));
 	}
 	.np-container:has(input:disabled) {

package/dist/chip/FilterChip.svelte

@@ -117,7 +117,7 @@
 		display: inline-flex;
 		align-items: center;
 		height: 2rem;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		color: var(--np-color-on-surface-variant);
 		fill: currentColor;
 		gap: 0.5rem;

package/dist/chip/InputChip.svelte

@@ -91,7 +91,7 @@
 		display: inline-flex;
 		align-items: center;
 		height: 2rem;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		color: var(--np-color-on-surface-variant);
 		fill: currentColor;
 		gap: 0.5rem;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
 export * from './snackbar/index.js';
+export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
 export * from './tooltip/index.js';

package/dist/index.js

@@ -14,6 +14,7 @@ export * from './radio/index.js';
 export * from './ripple/index.js';
 export * from './select/index.js';
 export * from './snackbar/index.js';
+export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
 export * from './tooltip/index.js';

package/dist/list/Item.svelte

@@ -162,7 +162,7 @@
 		min-height: 3rem;
 		gap: 0.75rem;
 		text-decoration: none;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		color: var(--np-item-label-text-color, var(--np-color-on-surface));
 		box-sizing: border-box;
 	}

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -20,7 +20,9 @@
 		{/if}
 	</div>
 	<div class="np-navigation-drawer-item-label">{label}</div>
-	<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
+	{#if badgeLabelText}
+		<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
+	{/if}
 {/snippet}
 
 {#if 'href' in attributes}
@@ -65,7 +67,7 @@
 		position: relative;
 		padding: 0 1rem 0 1rem;
 		border-radius: var(--np-navigation-drawer-item-container-shape, var(--np-shape-corner-full));
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		z-index: 1;
 	}
 

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -44,7 +44,7 @@
 		flex-direction: column;
 		color: var(--np-color-on-surface);
 		text-decoration: none;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 	}
 	.np-navigation-action:focus-visible {
 		outline-style: solid;

package/dist/radio/Radio.svelte

@@ -69,7 +69,7 @@
 		margin: max(0px, (40px - var(--np-radio-icon-size, 20px))/2);
 		display: inline-flex;
 		vertical-align: top;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		border-radius: var(--np-shape-corner-full);
 		place-content: center;
 		place-items: center;

package/dist/select/Check.svelte

@@ -28,7 +28,7 @@
 		vertical-align: top;
 		width: 24px;
 		padding: 3px;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		cursor: pointer;
 		box-sizing: border-box;
 	}

package/dist/switch/Switch.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { Ripple } from '../ripple/index.ts'
+	import type { SwitchProps } from './types.ts'
+
+	let {
+		selected = $bindable(false),
+		disabled = false,
+		element = $bindable(),
+		inputElement = $bindable(),
+		icons,
+		onkeyup,
+		...attributes
+	}: SwitchProps = $props()
+</script>
+
+<div
+	bind:this={element}
+	class={['np-switch', selected && 'np-selected', disabled && 'np-disabled', attributes.class]}
+>
+	<div class="np-track"></div>
+	<div class={['np-handle', icons === 'both' && 'both-icons']}>
+		{#if icons}
+			{#if selected}
+				<svg class="np-switch-icon" viewBox="0 0 24 24">
+					<path
+						d="M20 6L9 17l-5-5"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			{:else if icons === 'both'}
+				<svg class="np-switch-icon" 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"
+					/>
+				</svg>
+			{/if}
+		{/if}
+	</div>
+	{#if !disabled}
+		<div class="np-state-layer">
+			<Ripple forElement={inputElement} />
+		</div>
+	{/if}
+	<input
+		{...attributes}
+		onkeyup={(e) => {
+			if (e.key === 'Enter' && !disabled) {
+				e.preventDefault()
+				selected = !selected
+			}
+			onkeyup?.(e)
+		}}
+		type="checkbox"
+		role="switch"
+		bind:this={inputElement}
+		bind:checked={selected}
+		{disabled}
+	/>
+</div>
+
+<style>
+	.np-switch {
+		position: relative;
+		width: 3.25rem;
+		height: 2rem;
+		padding: 0.25rem;
+		cursor: pointer;
+		border-radius: var(--np-shape-corner-full);
+		-webkit-tap-highlight-color: transparent;
+	}
+	.np-track {
+		position: absolute;
+		width: 3.25rem;
+		height: 2rem;
+		background-color: var(
+			--np-comp-switch-unselected-track-color,
+			var(--np-color-surface-container-highest)
+		);
+		border-radius: var(--np-shape-corner-full);
+		transition:
+			background-color 0.2s,
+			outline-color 0.2s;
+		outline-width: 0.125rem;
+		outline-color: var(--np-comp-switch-unselected-track-outline-color, var(--np-color-outline));
+		outline-style: solid;
+		outline-offset: -0.125rem;
+	}
+
+	.np-handle {
+		position: absolute;
+		color: var(--np-color-surface-container-highest);
+		width: 1rem;
+		height: 1rem;
+		margin: 0.5rem;
+		transition:
+			transform 0.2s,
+			background-color 0.2s;
+		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));
+	}
+
+	.np-handle.both-icons {
+		transform: scale(1.5);
+	}
+
+	.np-state-layer {
+		position: relative;
+		width: var(--np-comp-switch-state-layer-size, 2.5rem);
+		height: var(--np-comp-switch-state-layer-size, 2.5rem);
+		margin-block-start: -0.25rem;
+		margin-inline-start: -0.25rem;
+		transition: transform 0.2s;
+		border-radius: var(--np-comp-switch-state-layer-shape, var(--np-shape-corner-full));
+	}
+
+	.np-selected .np-state-layer {
+		transform: translateX(1.25rem);
+	}
+
+	.np-switch input {
+		border-radius: var(--np-shape-corner-full);
+		opacity: 0;
+		position: absolute;
+		cursor: inherit;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+
+	.np-switch-icon {
+		transform: scale(0.6666667);
+	}
+
+	.np-switch:not(.np-disabled):has(input:not(:checked):active) .np-handle {
+		transform: scale(1.75);
+	}
+
+	.np-switch:not(.np-disabled):has(input:checked:active) .np-handle {
+		transform: translateX(1.25rem) scale(1.75);
+	}
+
+	.np-selected .np-handle {
+		transform: translateX(1.25rem) scale(1.5);
+		color: var(--np-color-primary);
+		background-color: var(--np-comp-switch-selected-handle-color, var(--np-color-on-primary));
+	}
+
+	.np-disabled .np-handle {
+		opacity: var(--np-comp-switch-disabled-unselected-handle-opacity, 0.38);
+	}
+
+	.np-selected.np-disabled .np-handle {
+		opacity: var(--np-comp-switch-disabled-selected-handle-opacity, 1);
+		background-color: var(--np-comp-switch-selected-handle-color, var(--np-color-surface));
+	}
+
+	.np-selected .np-track {
+		background-color: var(--np-comp-switch-selected-track-color, var(--np-color-primary));
+		outline-color: transparent;
+	}
+
+	.np-disabled .np-track {
+		opacity: var(--np-comp-switch-disabled-track-opacity, 0.12);
+		background-color: var(
+			--np-comp-switch-disabled-unselected-track-color,
+			var(--np-color-surface-container-highest)
+		);
+	}
+
+	.np-selected.np-disabled .np-track {
+		background-color: var(
+			--np-comp-switch-disabled-selected-track-color,
+			var(--np-color-on-surface)
+		);
+	}
+
+	.np-disabled {
+		cursor: default;
+	}
+
+	.np-switch:has(input:focus-visible) {
+		outline-style: solid;
+		outline-color: var(--np-color-secondary);
+		outline-width: 3px;
+		outline-offset: -2px;
+		animation: focusAnimation 0.3s ease forwards;
+	}
+	@keyframes focusAnimation {
+		0% {
+			outline-width: 3px;
+		}
+		50% {
+			outline-width: 6px;
+		}
+		100% {
+			outline-width: 3px;
+		}
+	}
+</style>

package/dist/switch/Switch.svelte.d.ts

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

package/dist/switch/index.d.ts

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

package/dist/switch/index.js

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

package/dist/switch/types.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export interface SwitchProps extends Omit<HTMLInputAttributes, 'type' | 'role' | 'checked' | 'indeterminate'> {
+    selected?: boolean;
+    disabled?: boolean;
+    icons?: 'selected' | 'both';
+    inputElement?: HTMLInputElement;
+    element?: HTMLDivElement;
+}

package/dist/switch/types.js

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

package/dist/tabs/Tab.svelte

@@ -125,7 +125,7 @@
 		font: inherit;
 		background-color: transparent;
 		border-width: 0;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		-webkit-tap-highlight-color: transparent;
 		display: flex;
 		align-items: center;
 		justify-content: center;

package/dist/text-field/TextField.svelte

@@ -776,9 +776,10 @@
 		border-color: var(--np-color-error);
 	}
 
-	.error:hover .np-outline,
-	.error:has(input:focus-visible):hover .np-outline,
-	.error:has(textarea:focus-visible):hover .np-outline {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])):hover .np-outline,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])):hover .np-outline,
+	.field:has(input:is(:user-invalid, [aria-invalid='true']):focus-visible):hover .np-outline,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true']):focus-visible):hover .np-outline {
 		border-color: var(--np-color-on-error-container);
 	}
 

package/dist/themes/defaultTheme.css

@@ -1,60 +1,59 @@
 :root {
 	color-scheme: light dark;
-	--np-color-background: light-dark(#f7fafe, #101417);
-	--np-color-error: light-dark(#ba1a1a, #ffb4ab);
-	--np-color-error-container: light-dark(#ffdad6, #93000a);
-	--np-color-inverse-on-surface: light-dark(#eef1f5, #2d3134);
-	--np-color-inverse-primary: light-dark(#7dd0ff, #00658b);
-	--np-color-inverse-surface: light-dark(#2d3134, #e0e3e7);
+	--np-color-background: light-dark(#f7fafe, #0b0f12);
+	--np-color-error: light-dark(#bb1b1b, #ff7164);
+	--np-color-error-container: light-dark(#fe4e44, #ac0c12);
+	--np-color-inverse-on-surface: light-dark(#9a9da1, #515559);
+	--np-color-inverse-primary: light-dark(#75ceff, #00668c);
+	--np-color-inverse-surface: light-dark(#0b0f12, #f7fafe);
 	--np-color-neutral-palette-key-color: light-dark(#73777b, #73777b);
 	--np-color-neutral-variant-palette-key-color: light-dark(#6f787f, #6f787f);
-	--np-color-on-background: light-dark(#181c1f, #e0e3e7);
-	--np-color-on-error: light-dark(#ffffff, #690005);
-	--np-color-on-error-container: light-dark(#93000a, #ffdad6);
-	--np-color-on-primary: light-dark(#ffffff, #00344a);
-	--np-color-on-primary-container: light-dark(#004863, #004863);
-	--np-color-on-primary-fixed: light-dark(#001e2c, #001e2c);
-	--np-color-on-primary-fixed-variant: light-dark(#004c69, #004c69);
-	--np-color-on-secondary: light-dark(#ffffff, #133444);
-	--np-color-on-secondary-container: light-dark(#4a687b, #9dbdd1);
-	--np-color-on-secondary-fixed: light-dark(#001e2c, #001e2c);
-	--np-color-on-secondary-fixed-variant: light-dark(#2c4a5c, #2c4a5c);
-	--np-color-on-surface: light-dark(#181c1f, #e0e3e7);
-	--np-color-on-surface-variant: light-dark(#3f484e, #bec8cf);
-	--np-color-on-tertiary: light-dark(#ffffff, #491a5f);
-	--np-color-on-tertiary-container: light-dark(#5d2e73, #5d2e73);
-	--np-color-on-tertiary-fixed: light-dark(#310048, #310048);
-	--np-color-on-tertiary-fixed-variant: light-dark(#623377, #623377);
-	--np-color-outline: light-dark(#6f787f, #899299);
-	--np-color-outline-variant: light-dark(#bec8cf, #3f484e);
-	--np-color-primary: light-dark(#00658b, #8ad4ff);
-	--np-color-primary-container: light-dark(#5fb9e9, #5fb9e9);
-	--np-color-primary-fixed: light-dark(#c4e7ff, #c4e7ff);
-	--np-color-primary-fixed-dim: light-dark(#7dd0ff, #7dd0ff);
+	--np-color-on-background: light-dark(#2f3336, #e3e6ea);
+	--np-color-on-error: light-dark(#fff7f6, #4a0002);
+	--np-color-on-error-container: light-dark(#570003, #ffb8b0);
+	--np-color-on-primary: light-dark(#f4f9ff, #00435d);
+	--np-color-on-primary-container: light-dark(#00435d, #002637);
+	--np-color-on-primary-fixed: light-dark(#002e41, #002e41);
+	--np-color-on-primary-fixed-variant: light-dark(#004d6a, #004d6a);
+	--np-color-on-secondary: light-dark(#f4f9ff, #254455);
+	--np-color-on-secondary-container: light-dark(#375567, #a4c4d9);
+	--np-color-on-secondary-fixed: light-dark(#244354, #244354);
+	--np-color-on-secondary-fixed-variant: light-dark(#415f71, #415f71);
+	--np-color-on-surface: light-dark(#2f3336, #e3e6ea);
+	--np-color-on-surface-variant: light-dark(#5b5f63, #a8abaf);
+	--np-color-on-tertiary: light-dark(#fff7fc, #623378);
+	--np-color-on-tertiary-container: light-dark(#582a6e, #582a6e);
+	--np-color-on-tertiary-fixed: light-dark(#421358, #421358);
+	--np-color-on-tertiary-fixed-variant: light-dark(#623378, #623378);
+	--np-color-outline: light-dark(#777b7f, #727679);
+	--np-color-outline-variant: light-dark(#afb2b6, #44484c);
+	--np-color-primary: light-dark(#00668c, #75ceff);
+	--np-color-primary-container: light-dark(#75ceff, #4eaad9);
+	--np-color-primary-fixed: light-dark(#75ceff, #75ceff);
+	--np-color-primary-fixed-dim: light-dark(#66c0f0, #66c0f0);
 	--np-color-primary-palette-key-color: light-dark(#0980ad, #0980ad);
 	--np-color-scrim: light-dark(#000000, #000000);
-	--np-color-secondary: light-dark(#446274, #abcbe0);
-	--np-color-secondary-container: light-dark(#c7e7fd, #2e4d5e);
+	--np-color-secondary: light-dark(#456375, #abcbe0);
+	--np-color-secondary-container: light-dark(#c7e7fd, #203f50);
 	--np-color-secondary-fixed: light-dark(#c7e7fd, #c7e7fd);
-	--np-color-secondary-fixed-dim: light-dark(#abcbe0, #abcbe0);
+	--np-color-secondary-fixed-dim: light-dark(#b9d9ee, #b9d9ee);
 	--np-color-secondary-palette-key-color: light-dark(#5d7b8e, #5d7b8e);
 	--np-color-shadow: light-dark(#000000, #000000);
-	--np-color-surface: light-dark(#f7fafe, #101417);
-	--np-color-surface-bright: light-dark(#f7fafe, #363a3d);
-	--np-color-surface-container: light-dark(#ebeef2, #1c2023);
-	--np-color-surface-container-high: light-dark(#e5e8ec, #262a2e);
-	--np-color-surface-container-highest: light-dark(#e0e3e7, #313538);
-	--np-color-surface-container-low: light-dark(#f1f4f8, #181c1f);
-	--np-color-surface-container-lowest: light-dark(#ffffff, #0b0f12);
-	--np-color-surface-dim: light-dark(#d7dade, #101417);
-	--np-color-surface-tint: light-dark(#00658b, #7dd0ff);
-	--np-color-surface-variant: light-dark(#dae4ec, #3f484e);
-	--np-color-tertiary: light-dark(#7b4b91, #ecb8ff);
-	--np-color-tertiary-container: light-dark(#d29be8, #d29be8);
-	--np-color-tertiary-fixed: light-dark(#f7d8ff, #f7d8ff);
-	--np-color-tertiary-fixed-dim: light-dark(#eab2ff, #eab2ff);
+	--np-color-surface: light-dark(#f7fafe, #0b0f12);
+	--np-color-surface-bright: light-dark(#f7fafe, #282d30);
+	--np-color-surface-container: light-dark(#ebeef2, #161a1d);
+	--np-color-surface-container-high: light-dark(#e5e8ec, #1c2023);
+	--np-color-surface-container-highest: light-dark(#e0e3e7, #222629);
+	--np-color-surface-container-low: light-dark(#f1f4f8, #101417);
+	--np-color-surface-container-lowest: light-dark(#ffffff, #000000);
+	--np-color-surface-dim: light-dark(#d7dade, #0b0f12);
+	--np-color-surface-tint: light-dark(#00668c, #75ceff);
+	--np-color-surface-variant: light-dark(#e0e3e7, #222629);
+	--np-color-tertiary: light-dark(#7c4b92, #efc2ff);
+	--np-color-tertiary-container: light-dark(#e8affe, #e8affe);
+	--np-color-tertiary-fixed: light-dark(#e8affe, #e8affe);
+	--np-color-tertiary-fixed-dim: light-dark(#d9a2ef, #d9a2ef);
 	--np-color-tertiary-palette-key-color: light-dark(#d29be8, #d29be8);
-
 	--np-elevation-1:
 		rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
 		rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;

package/dist/types.d.ts

@@ -1,19 +1,20 @@
-export * from './autocomplete/types.js';
+export * from './autocomplete/types.ts';
 export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';
 export * from './chip/types.ts';
-export * from './dialog/types.js';
-export * from './divider/types.js';
+export * from './dialog/types.ts';
+export * from './divider/types.ts';
 export * from './list/types.ts';
 export * from './menu/types.ts';
 export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';
-export * from './progress/types.js';
+export * from './progress/types.ts';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
-export * from './select/types.js';
+export * from './select/types.ts';
 export * from './snackbar/types.ts';
+export * from './switch/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';
 export * from './tabs/types.ts';

package/dist/types.js

@@ -1,19 +1,20 @@
-export * from './autocomplete/types.js';
+export * from './autocomplete/types.ts';
 export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';
 export * from './chip/types.ts';
-export * from './dialog/types.js';
-export * from './divider/types.js';
+export * from './dialog/types.ts';
+export * from './divider/types.ts';
 export * from './list/types.ts';
 export * from './menu/types.ts';
 export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';
-export * from './progress/types.js';
+export * from './progress/types.ts';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
-export * from './select/types.js';
+export * from './select/types.ts';
 export * from './snackbar/types.ts';
+export * from './switch/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';
 export * from './tabs/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.30.12",
+	"version": "0.31.0",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -69,7 +69,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.39.2",
-		"@material/material-color-utilities": "^0.3.0",
+		"@materialx/material-color-utilities": "^0.4.8",
 		"@playwright/test": "^1.57.0",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/kit": "^2.49.2",
@@ -81,14 +81,14 @@
 		"eslint-plugin-svelte": "^3.13.1",
 		"globals": "^16.5.0",
 		"prettier": "^3.7.4",
-		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-svelte": "^3.4.1",
 		"publint": "^0.3.16",
-		"svelte": "^5.46.0",
-		"svelte-check": "^4.3.4",
+		"svelte": "^5.46.1",
+		"svelte-check": "^4.3.5",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.49.0",
-		"vite": "^7.2.7",
-		"vitest": "^4.0.15"
+		"typescript-eslint": "^8.50.1",
+		"vite": "^7.3.0",
+		"vitest": "^4.0.16"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",