noph-ui 0.50.0 → 0.51.1

package/dist/app-bar/AppBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppBarProps } from './types.ts'
+	import type { AppBarProps } from './types.js'
 
 	let {
 		variant = 'small',
@@ -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/app-bar/AppBar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AppBarProps } from './types.ts';
+import type { AppBarProps } from './types.js';
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "element">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

package/dist/autocomplete/AutoComplete.svelte

@@ -3,7 +3,7 @@
 	import Menu from '../menu/Menu.svelte'
 	import VirtualList from '../select/VirtualList.svelte'
 	import TextField from '../text-field/TextField.svelte'
-	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
+	import type { AutoCompleteOption, AutoCompleteProps } from './types.js'
 
 	let {
 		options = [],

package/dist/autocomplete/AutoComplete.svelte.d.ts

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

package/dist/badge/Badge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { BadgeProps } from './types.ts'
+	import type { BadgeProps } from './types.js'
 
 	let {
 		label,

package/dist/badge/Badge.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BadgeProps } from './types.ts';
+import type { BadgeProps } from './types.js';
 declare const Badge: import("svelte").Component<BadgeProps, {}, "element">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/button/Button.svelte

@@ -5,7 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { ButtonProps } from './types.ts'
+	import type { ButtonProps } from './types.js'
 
 	let {
 		variant = 'outlined',
@@ -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/Button.svelte.d.ts

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

package/dist/button/ButtonGroup.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { reducedMotion } from '../media.js'
 	import { onMount } from 'svelte'
-	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.ts'
-	import type { ButtonGroupProps } from './types.ts'
+	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
+	import type { ButtonGroupProps } from './types.js'
 
 	let {
 		variant = 'standard',

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

@@ -1,4 +1,4 @@
-import type { ButtonGroupProps } from './types.ts';
+import type { ButtonGroupProps } from './types.js';
 declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "element">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

package/dist/button/IconButton.svelte

@@ -5,7 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
-	import type { IconButtonProps } from './types.ts'
+	import type { IconButtonProps } from './types.js'
 
 	let {
 		variant = 'text',
@@ -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/IconButton.svelte.d.ts

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

package/dist/button/SegmentedButton.svelte

@@ -2,7 +2,7 @@
 	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { SegmentedButtonProps } from './types.ts'
+	import type { SegmentedButtonProps } from './types.js'
 
 	let {
 		name,
@@ -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/SegmentedButton.svelte.d.ts

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

package/dist/button/SplitButton.svelte

@@ -3,7 +3,7 @@
 	import Menu from '../menu/Menu.svelte'
 	import Button from './Button.svelte'
 	import ButtonGroup from './ButtonGroup.svelte'
-	import type { SplitButtonProps } from './types.ts'
+	import type { SplitButtonProps } from './types.js'
 
 	let {
 		label = '',
@@ -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/button/SplitButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SplitButtonProps } from './types.ts';
+import type { SplitButtonProps } from './types.js';
 declare const SplitButton: import("svelte").Component<SplitButtonProps, {}, "element" | "open">;
 type SplitButton = ReturnType<typeof SplitButton>;
 export default SplitButton;

package/dist/card/Card.svelte

@@ -2,7 +2,7 @@
 	import '../internal/focus-ring.css'
 	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { CardProps } from './types.ts'
+	import type { CardProps } from './types.js'
 
 	let {
 		image,

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

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

package/dist/carousel/Carousel.svelte

@@ -2,9 +2,9 @@
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import { reducedMotion } from '../media.js'
 	import type { Attachment } from 'svelte/attachments'
-	import { carouselMorph, scrollTimelines } from './carouselMorph.ts'
+	import { carouselMorph, scrollTimelines } from './carouselMorph.js'
 	import { setCarouselContext } from './context.js'
-	import type { CarouselContext, CarouselItemElement, CarouselProps } from './types.ts'
+	import type { CarouselContext, CarouselItemElement, CarouselProps } from './types.js'
 
 	let {
 		variant = 'multi-browse',
@@ -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/carousel/Carousel.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CarouselProps } from './types.ts';
+import type { CarouselProps } from './types.js';
 declare const Carousel: import("svelte").Component<CarouselProps, {}, "scroller" | "element">;
 type Carousel = ReturnType<typeof Carousel>;
 export default Carousel;

package/dist/carousel/CarouselItem.svelte

@@ -3,9 +3,9 @@
 	import { pressMorph } from '../press.svelte.js'
 	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { minVisibleFraction } from './carouselStrategy.ts'
+	import { minVisibleFraction } from './carouselStrategy.js'
 	import { getCarouselContext } from './context.js'
-	import type { CarouselItemElement, CarouselItemProps } from './types.ts'
+	import type { CarouselItemElement, CarouselItemProps } from './types.js'
 
 	let {
 		type,

package/dist/carousel/CarouselItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import '../internal/focus-ring.css';
-import type { CarouselItemProps } from './types.ts';
+import type { CarouselItemProps } from './types.js';
 declare const CarouselItem: import("svelte").Component<CarouselItemProps, {}, "element">;
 type CarouselItem = ReturnType<typeof CarouselItem>;
 export default CarouselItem;

package/dist/checkbox/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { CheckboxProps } from './types.ts'
+	import type { CheckboxProps } from './types.js'
 
 	let {
 		indeterminate = $bindable(),

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

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

package/dist/chip/AssistChip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AssistChipProps } from './types.ts'
+	import type { AssistChipProps } from './types.js'
 	import Button from '../button/Button.svelte'
 
 	let {

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

@@ -1,4 +1,4 @@
-import type { AssistChipProps } from './types.ts';
+import type { AssistChipProps } from './types.js';
 declare const AssistChip: import("svelte").Component<AssistChipProps, {}, "element">;
 type AssistChip = ReturnType<typeof AssistChip>;
 export default AssistChip;

package/dist/chip/ChipSet.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
-	import type { ChipSetProps } from './types.ts'
+	import type { ChipSetProps } from './types.js'
 
 	let { children, element = $bindable(), ...attributes }: ChipSetProps = $props()
 

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

@@ -1,4 +1,4 @@
-import type { ChipSetProps } from './types.ts';
+import type { ChipSetProps } from './types.js';
 declare const ChipSet: import("svelte").Component<ChipSetProps, {}, "element">;
 type ChipSet = ReturnType<typeof ChipSet>;
 export default ChipSet;

package/dist/chip/FilterChip.svelte

@@ -4,7 +4,7 @@
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FilterChipProps } from './types.ts'
+	import type { FilterChipProps } from './types.js'
 
 	let {
 		selected = $bindable(),

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

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

package/dist/chip/InputChip.svelte

@@ -3,7 +3,7 @@
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { InputChipProps } from './types.ts'
+	import type { InputChipProps } from './types.js'
 
 	let {
 		selected = $bindable(),

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

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