noph-ui 0.40.2 → 0.40.3

package/dist/button/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
@@ -285,18 +286,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.text {
 		--np-ripple-hover-color: var(--np-text-button-label-text-color, var(--np-color-primary));

package/dist/button/Button.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { ButtonProps } from './types.ts';
 declare const Button: import("svelte").Component<ButtonProps, {}, "element" | "selected">;
 type Button = ReturnType<typeof Button>;

package/dist/button/IconButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
@@ -290,18 +291,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.text {
 		--np-ripple-hover-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));

package/dist/button/IconButton.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { IconButtonProps } from './types.ts';
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "element" | "selected">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/button/SegmentedButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { SegmentedButtonProps } from './types.js'
@@ -109,7 +110,7 @@
 		align-items: center;
 		border-inline-end: 1px solid var(--np-color-outline);
 		position: relative;
-		transition: all 0.15s linear;
+		transition: all var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button-icon-label {
 		display: inline-flex;
@@ -142,7 +143,7 @@
 		inset: 0;
 		z-index: -1;
 		opacity: 0;
-		transition: opacity 0.15s linear;
+		transition: opacity var(--np-motion-expressive-fast-effects);
 		background-color: var(--np-color-secondary-container);
 	}
 	.width-icon,
@@ -160,7 +161,7 @@
 		width: 0;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width 0.3s ease;
+		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.check-icon svg) {
 		display: block;
@@ -168,14 +169,14 @@
 	.check-icon-wrapper {
 		width: 0;
 		overflow: hidden;
-		transition: width 0.15s linear;
+		transition: width var(--np-motion-expressive-fast-effects);
 	}
 	.alternate-icon {
 		display: flex;
 		width: 1.5rem;
 		overflow: hidden;
 		fill: currentColor;
-		transition: width 0.3s ease;
+		transition: width var(--np-motion-expressive-slow-effects);
 	}
 	:global(.alternate-icon svg) {
 		display: block;
@@ -186,8 +187,8 @@
 		width: 2rem;
 		overflow: hidden;
 		transition:
-			width 0.15s linear,
-			opacity 0.15s linear;
+			width var(--np-motion-expressive-fast-effects),
+			opacity var(--np-motion-expressive-fast-effects);
 	}
 	.np-segmented-button:has(input:checked) :global(.alternate-icon-wrapper) {
 		width: 0;
@@ -212,20 +213,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/button/SegmentedButton.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { SegmentedButtonProps } from './types.ts';
 declare const SegmentedButton: import("svelte").Component<SegmentedButtonProps, {}, "element" | "group">;
 type SegmentedButton = ReturnType<typeof SegmentedButton>;

package/dist/card/Card.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { CardProps } from './types.js'
 
@@ -158,18 +159,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.np-card-disabled {
 		opacity: 0.38;

package/dist/card/Card.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { CardProps } from './types.ts';
 declare const Card: import("svelte").Component<CardProps, {}, "element">;
 type Card = ReturnType<typeof Card>;

package/dist/checkbox/Checkbox.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { CheckboxProps } from './types.js'
 
@@ -128,18 +129,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 	.np-outline,
 	.np-background,

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { CheckboxProps } from './types.ts';
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;

package/dist/chip/FilterChip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
@@ -237,18 +238,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-filter-chip-disabled .np-filter-chip-label {

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

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

package/dist/chip/InputChip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
@@ -149,18 +150,7 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	.np-input-chip-disabled .np-input-chip-label {

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { InputChipProps } from './types.ts';
 declare const InputChip: import("svelte").Component<InputChipProps, {}, "element" | "selected" | "actionElement">;
 type InputChip = ReturnType<typeof InputChip>;

package/dist/dialog/Dialog.svelte

@@ -156,9 +156,9 @@
 
 	.np-animate[popover] {
 		transition:
-			opacity 0.25s ease,
-			display 0.25s allow-discrete,
-			overlay 0.25s allow-discrete;
+			opacity var(--np-motion-expressive-slow-effects),
+			display var(--np-motion-expressive-slow-effects) allow-discrete,
+			overlay var(--np-motion-expressive-slow-effects) allow-discrete;
 		opacity: 0;
 	}
 	.np-animate[popover]:popover-open {

package/dist/internal/focus-ring.css

@@ -0,0 +1,26 @@
+@keyframes focusAnimation {
+	0% {
+		outline-width: 3px;
+	}
+	50% {
+		outline-width: 6px;
+	}
+	100% {
+		outline-width: 3px;
+	}
+}
+
+@keyframes focusAnimationInset {
+	0% {
+		outline-offset: -3px;
+		outline-width: 3px;
+	}
+	50% {
+		outline-offset: -6px;
+		outline-width: 6px;
+	}
+	100% {
+		outline-offset: -3px;
+		outline-width: 3px;
+	}
+}

package/dist/list/Item.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { ItemProps } from './types.js'
 
@@ -150,21 +151,7 @@
 		outline-width: 3px;
 		outline-offset: -3px;
 		border-radius: var(--np-shape-corner-extra-small);
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 
 	div.np-item {

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

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

package/dist/menu/Menu.svelte

@@ -112,7 +112,7 @@
 
 	.np-menu-container:popover-open {
 		opacity: 1;
-		animation: fadeIn 0.2s linear;
+		animation: fadeIn var(--np-motion-expressive-default-effects);
 	}
 	@keyframes fadeIn {
 		0% {

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -110,13 +110,13 @@
 
 	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
-		transition: transform var(--np-motion-expressive-slow-effects);
+		transition: transform var(--np-motion-standard-slow-spatial);
 	}
 
 	.np-navigation-drawer-container[popover] {
 		transition:
-			overlay 0.3s allow-discrete,
-			display 0.3s allow-discrete;
+			overlay var(--np-motion-standard-slow-spatial) allow-discrete,
+			display var(--np-motion-standard-slow-spatial) allow-discrete;
 	}
 
 	.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
@@ -139,7 +139,7 @@
 		position: fixed;
 		background-color: var(--np-color-scrim);
 		opacity: 0;
-		transition: opacity 0.25s ease;
+		transition: opacity var(--np-motion-expressive-slow-effects);
 	}
 	.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
 		opacity: 0.32;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationDrawerItemProps } from './types.js'
@@ -103,21 +104,7 @@
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-drawer-item:focus-visible {
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 	.np-navigation-drawer-item-icon {

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

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

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.js'
@@ -60,18 +61,7 @@
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-action:focus-visible {
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-width: 3px;
-		}
-		50% {
-			outline-width: 6px;
-		}
-		100% {
-			outline-width: 3px;
+			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 	.np-navigation-action-icon {

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

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

package/dist/progress/CircularProgress.svelte

@@ -298,6 +298,11 @@
 		animation-duration: 6000ms, calc(4 * 1333ms);
 	}
 
+	.four-color .spinner-track {
+		animation-name: cp-track-sweep, four-color-track;
+		animation-duration: 6000ms, calc(4 * 1333ms);
+	}
+
 	@media (forced-colors: active) {
 		.active-track {
 			stroke: CanvasText;
@@ -328,4 +333,25 @@
 			stroke: var(--np-color-primary);
 		}
 	}
+	@keyframes four-color-track {
+		0%,
+		15% {
+			stroke: var(--np-color-primary-container);
+		}
+		25%,
+		40% {
+			stroke: var(--np-color-primary);
+		}
+		50%,
+		65% {
+			stroke: var(--np-color-tertiary-container);
+		}
+		75%,
+		90% {
+			stroke: var(--np-color-tertiary);
+		}
+		100% {
+			stroke: var(--np-color-primary-container);
+		}
+	}
 </style>

package/dist/progress/LinearProgress.svelte

@@ -378,6 +378,10 @@
 		border-radius: var(--np-linear-progress-track-shape, var(--np-shape-corner-full));
 	}
 
+	.indeterminate.four-color .np-lp-track {
+		animation: four-color-track calc(1750ms * 4) linear infinite;
+	}
+
 	.np-lp-track.ahead {
 		left: min(calc(var(--np-lp-h1) + var(--np-linear-progress-track-gap, 0.25rem)), 100%);
 		right: 0;
@@ -572,6 +576,38 @@
 		}
 	}
 
+	@keyframes four-color-track {
+		0% {
+			background: var(--np-color-primary-container);
+		}
+
+		15% {
+			background: var(--np-color-primary-container);
+		}
+		25% {
+			background: var(--np-color-primary);
+		}
+		40% {
+			background: var(--np-color-primary);
+		}
+
+		50% {
+			background: var(--np-color-tertiary-container);
+		}
+		65% {
+			background: var(--np-color-tertiary-container);
+		}
+		75% {
+			background: var(--np-color-tertiary);
+		}
+		90% {
+			background: var(--np-color-tertiary);
+		}
+		100% {
+			background: var(--np-color-primary-container);
+		}
+	}
+
 	@media (forced-colors: active) {
 		.np-container {
 			outline: 1px solid CanvasText;

package/dist/radio/Radio.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { RadioProps } from './types.js'
 
@@ -127,17 +128,6 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

package/dist/radio/Radio.svelte.d.ts

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { RadioProps } from './types.ts';
 declare const Radio: import("svelte").Component<RadioProps, {}, "element" | "group">;
 type Radio = ReturnType<typeof Radio>;

package/dist/ripple/Ripple.svelte

@@ -339,7 +339,7 @@
 				transparent 100%
 			);
 			transform-origin: center center;
-			transition: opacity 375ms linear;
+			transition: opacity var(--np-motion-expressive-slow-effects);
 		}
 	}
 
@@ -351,6 +351,6 @@
 
 	.np-ripple-pressed::after {
 		opacity: var(--np-ripple-pressed-opacity, 0.1);
-		transition-duration: 105ms;
+		transition: opacity var(--np-motion-expressive-fast-effects);
 	}
 </style>

package/dist/select/Option.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { Snippet } from 'svelte'
 	import type { HTMLOptionAttributes } from 'svelte/elements'
@@ -58,22 +59,7 @@
 			outline-width: 3px;
 			outline-offset: -3px;
 			border-radius: var(--np-shape-corner-extra-small);
-			animation: focusAnimation 0.3s ease forwards;
-		}
-	}
-
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
+			animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 		}
 	}
 </style>

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { Snippet } from 'svelte';
 import type { HTMLOptionAttributes } from 'svelte/elements';
 interface OptionProps extends HTMLOptionAttributes {

package/dist/select/Select.svelte

@@ -806,15 +806,9 @@
 		opacity: 1;
 	}
 
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .arrow,
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .arrow {
-		color: var(--np-color-primary);
-	}
 	.icon .arrow {
 		display: flex;
-		transition:
-			color 75ms linear 75ms,
-			rotate 150ms cubic-bezier(0.2, 0, 0, 1);
+		transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1);
 	}
 	.field.menu-open .icon .arrow {
 		rotate: 180deg;

package/dist/switch/Switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { SwitchProps } from './types.js'
 
@@ -193,17 +194,6 @@
 		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;
-		}
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

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

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

package/dist/tabs/Tab.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { tick } from 'svelte'
@@ -226,20 +227,6 @@
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;
 		outline-offset: -3px;
-		animation: focusAnimation 0.3s ease forwards;
-	}
-	@keyframes focusAnimation {
-		0% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
-		50% {
-			outline-offset: -6px;
-			outline-width: 6px;
-		}
-		100% {
-			outline-offset: -3px;
-			outline-width: 3px;
-		}
+		animation: focusAnimationInset var(--np-motion-expressive-slow-effects) forwards;
 	}
 </style>

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { TabProps } from './types.ts';
 declare const Tab: import("svelte").Component<TabProps, {}, "element">;
 type Tab = ReturnType<typeof Tab>;

package/package.json

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