noph-ui 0.49.0 → 0.50.0

package/dist/app-bar/AppBar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppBarProps } from './types.js'
+	import type { AppBarProps } from './types.ts'
 
 	let {
 		variant = 'small',
@@ -15,9 +15,9 @@
 		...attributes
 	}: AppBarProps = $props()
 
-	const twoLine = $derived(variant === 'medium' || variant === 'large')
-	const isSearch = $derived(variant === 'search')
-	const collapses = $derived(collapsible && twoLine)
+	let twoLine = $derived(variant === 'medium' || variant === 'large')
+	let isSearch = $derived(variant === 'search')
+	let collapses = $derived(collapsible && twoLine)
 </script>
 
 {#snippet titles(inline: boolean)}

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.js'
+	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
 
 	let {
 		options = [],
@@ -28,8 +28,8 @@
 	}: AutoCompleteProps = $props()
 
 	const uid = $props.id()
-	const query = $derived(value ? `${value}`.toLocaleLowerCase() : '')
-	const filterFn = $derived(
+	let query = $derived(value ? `${value}`.toLocaleLowerCase() : '')
+	let filterFn = $derived(
 		optionsFilter ||
 			((option: AutoCompleteOption) => !query || option.label.toLocaleLowerCase().includes(query)),
 	)
@@ -121,7 +121,6 @@
 			setActive(index)
 			selectOption(option)
 		}}
-		variant="button"
 		start={option.start}
 		end={option.end}
 		supportingText={option.supportingText}

package/dist/autocomplete/types.d.ts

@@ -1,8 +1,8 @@
-import type { ItemProps } from '../list/types.js';
+import type { BaseOption } from '../shared/types.js';
 import type { TextFieldProps } from '../types.js';
-export interface AutoCompleteOption extends Pick<ItemProps, 'start' | 'end' | 'supportingText' | 'class' | 'style'> {
+export interface AutoCompleteOption extends BaseOption {
+    /** Falls back to `label`. */
     value?: string | number;
-    label: string;
 }
 export interface AutoCompleteProps extends Omit<TextFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];

package/dist/badge/Badge.svelte

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

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.js'
+	import type { ButtonProps } from './types.ts'
 
 	let {
 		variant = 'outlined',
@@ -26,9 +26,9 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled && !loading)
+	let isLink = $derived(attributes.href != null && !disabled && !loading)
 
-	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
 	const morph = pressMorph()
 

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.js'
-	import type { ButtonGroupProps } from './types.js'
+	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.ts'
+	import type { ButtonGroupProps } from './types.ts'
 
 	let {
 		variant = 'standard',

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.js'
+	import type { IconButtonProps } from './types.ts'
 
 	let {
 		variant = 'text',
@@ -26,8 +26,8 @@
 
 	const uid = $props.id()
 
-	const isLink = $derived(attributes.href != null && !disabled && !loading)
-	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	let isLink = $derived(attributes.href != null && !disabled && !loading)
+	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
 	const morph = pressMorph()
 

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.js'
+	import type { SegmentedButtonProps } from './types.ts'
 
 	let {
 		name,
@@ -24,7 +24,8 @@
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
 	{#each options as option, i (i)}
-		{@const optionLabel = option.label ?? `${name}-${i}`}
+		{let optionLabel = $derived(option.label ?? `${name}-${i}`)}
+		{let optionValue = $derived(option.value ?? optionLabel)}
 		<label class={['np-segmented-button', option.icon && 'width-icon']}>
 			<div class="check-icon-wrapper">
 				<div class="check-icon">
@@ -56,7 +57,7 @@
 						bind:group
 						{name}
 						aria-label={optionLabel}
-						value={optionLabel}
+						value={optionValue}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -67,7 +68,7 @@
 						bind:group
 						{name}
 						aria-label={optionLabel}
-						value={optionLabel}
+						value={optionValue}
 						disabled={option.disabled}
 						checked={option.selected}
 					/>
@@ -78,7 +79,7 @@
 					onclick={option.onclick}
 					{name}
 					aria-label={optionLabel}
-					value={optionLabel}
+					value={optionValue}
 					disabled={option.disabled}
 					checked={option.selected}
 				/>

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.js'
+	import type { SplitButtonProps } from './types.ts'
 
 	let {
 		label = '',

package/dist/button/types.d.ts

@@ -1,3 +1,4 @@
+import type { Issue } from '../shared/types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 export type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
@@ -40,20 +41,21 @@ export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onclick?: MouseEventHandler<ButtonElement>;
     element?: HTMLElement;
 }
+export interface SegmentedButtonOption {
+    /** Stored in `group` and submitted with the form. Falls back to `label`. */
+    value?: string | number;
+    label?: string;
+    labelIcon?: Snippet;
+    selected?: boolean;
+    disabled?: boolean | null;
+    icon?: Snippet;
+    onclick?: (event: Event) => void;
+}
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
     multiSelect?: boolean;
-    options: {
-        label?: string;
-        labelIcon?: Snippet;
-        selected?: boolean;
-        disabled?: boolean;
-        icon?: Snippet;
-        onclick?: (event: Event) => void;
-    }[];
+    options: SegmentedButtonOption[];
     group?: string | number | (string | number)[] | null;
     element?: HTMLElement;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
 }

package/dist/card/Card.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { CardProps } from './types.js'
+	import type { CardProps } from './types.ts'
 
 	let {
 		image,
+		imageAlt,
 		variant = 'outlined',
 		disabled = false,
 		element = $bindable(),
@@ -16,11 +18,18 @@
 		type,
 		...attributes
 	}: CardProps = $props()
+
+	let tag = $derived(elementTag(attributes, type))
 </script>
 
 {#snippet content()}
 	{#if image}
-		<div class="np-card-image" style="background-image: url({image})"></div>
+		<div
+			class="np-card-image"
+			style="background-image: url({image})"
+			role={imageAlt ? 'img' : undefined}
+			aria-label={imageAlt || undefined}
+		></div>
 	{/if}
 	<div class="np-card-content">
 		{#if headline}
@@ -45,12 +54,12 @@
 			<div class="np-card-action">{@render action()}</div>
 		{/if}
 	</div>
-	{#if !disabled && type !== 'text'}
+	{#if !disabled && tag !== 'div'}
 		<Ripple />
 	{/if}
 {/snippet}
 
-{#if type === 'text'}
+{#if tag === 'div'}
 	<div
 		{...attributes}
 		bind:this={element}
@@ -64,11 +73,11 @@
 	>
 		{@render content()}
 	</div>
-{:else if type === 'button'}
+{:else if tag === 'button'}
 	<button
 		{...attributes}
 		aria-disabled={disabled}
-		type="button"
+		type={buttonType(type)}
 		bind:this={element}
 		{disabled}
 		class={[
@@ -80,7 +89,7 @@
 	>
 		{@render content()}
 	</button>
-{:else if type === 'link'}
+{:else}
 	<a
 		{...attributes}
 		bind:this={element}

package/dist/card/types.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementKindProps } from '../internal/elementTag.js';
 export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
-export interface CardProps extends HTMLAttributes<CardElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+export interface CardProps extends ElementKindProps<CardElement> {
     variant?: 'elevated' | 'filled' | 'outlined';
-    disabled?: boolean | null;
     image?: string | null;
+    /** Describes `image` for assistive technology. Leave it out for a decorative image. */
+    imageAlt?: string;
     element?: HTMLElement;
     headline?: string | null;
     subhead?: string | null;
     supportingText?: string | null;
     action?: Snippet<[]>;
-    type: 'text' | 'button' | 'link';
 }

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.js'
+	import { carouselMorph, scrollTimelines } from './carouselMorph.ts'
 	import { setCarouselContext } from './context.js'
-	import type { CarouselContext, CarouselItemElement, CarouselProps } from './types.js'
+	import type { CarouselContext, CarouselItemElement, CarouselProps } from './types.ts'
 
 	let {
 		variant = 'multi-browse',
@@ -26,14 +26,14 @@
 	let snapPoints = $state<HTMLDivElement>()
 	let items = $state.raw<CarouselItemElement[]>([])
 
-	const axis = $derived(orientation ?? (variant === 'full-screen' ? 'vertical' : 'horizontal'))
-	const vertical = $derived(axis === 'vertical')
-	const snapping = $derived(snap ?? variant !== 'uncontained')
+	let axis = $derived(orientation ?? (variant === 'full-screen' ? 'vertical' : 'horizontal'))
+	let vertical = $derived(axis === 'vertical')
+	let snapping = $derived(snap ?? variant !== 'uncontained')
 
-	const keylined = $derived(variant === 'multi-browse' || variant === 'hero' ? variant : undefined)
-	const morphing = $derived(!!keylined && scrollTimelines && !reducedMotion.current)
+	let keylined = $derived(variant === 'multi-browse' || variant === 'hero' ? variant : undefined)
+	let morphing = $derived(!!keylined && scrollTimelines && !reducedMotion.current)
 
-	const cropping = $derived(variant === 'uncontained' && !reducedMotion.current)
+	let cropping = $derived(variant === 'uncontained' && !reducedMotion.current)
 
 	const collectItems: Attachment<HTMLElement> = (node) => {
 		const read = () => {
@@ -56,13 +56,13 @@
 		return () => observer.disconnect()
 	}
 
-	const morph = $derived(
+	let morph = $derived(
 		morphing && keylined
 			? carouselMorph({ variant: keylined, alignment, vertical, items, track, metrics, uid })
 			: undefined,
 	)
 
-	const arrowHandler = $derived(arrowKeyNav('.np-carousel-item', axis, { wrap: false }))
+	let arrowHandler = $derived(arrowKeyNav('.np-carousel-item', axis, { wrap: false }))
 
 	const handleKeydown = (
 		event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement },
@@ -71,7 +71,7 @@
 		if (!event.defaultPrevented) arrowHandler(event)
 	}
 
-	const places = $derived(new Map(items.map((item, index) => [item, index + 1])))
+	let places = $derived(new Map(items.map((item, index) => [item, index + 1])))
 
 	const handleFocusIn = (event: FocusEvent) => {
 		const item = (event.target as HTMLElement | null)?.closest<HTMLElement>('.np-carousel-item')

package/dist/carousel/CarouselItem.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import { pressMorph } from '../press.svelte.js'
+	import { buttonType, elementTag } from '../internal/elementTag.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { minVisibleFraction } from './carouselStrategy.js'
+	import { minVisibleFraction } from './carouselStrategy.ts'
 	import { getCarouselContext } from './context.js'
-	import type { CarouselItemElement, CarouselItemProps } from './types.js'
+	import type { CarouselItemElement, CarouselItemProps } from './types.ts'
 
 	let {
 		type,
 		label,
 		image,
+		imageAlt,
 		aspectRatio,
 		disabled = false,
 		children,
@@ -19,13 +21,15 @@
 		...attributes
 	}: CarouselItemProps = $props()
 
+	let tag = $derived(elementTag(attributes, type))
+
 	const carouselContext = getCarouselContext()
 	const press = pressMorph()
 
-	const total = $derived(carouselContext.items.length)
-	const position = $derived(element ? carouselContext.position(element) : 0)
+	let total = $derived(carouselContext.items.length)
+	let position = $derived(element ? carouselContext.position(element) : 0)
 
-	const itemStyle = $derived(
+	let itemStyle = $derived(
 		[
 			`--_visible:${minVisibleFraction(aspectRatio)}`,
 			aspectRatio != null && `--_aspect:${aspectRatio}`,
@@ -35,26 +39,31 @@
 			.join(';'),
 	)
 
-	const accessibleName = $derived(
+	let accessibleName = $derived(
 		attributes['aria-label'] ??
-			(type !== 'text' && label && position > 0
+			(tag !== 'div' && label && position > 0
 				? carouselContext.itemLabel(label, position, total)
 				: undefined),
 	)
 
-	const labelHidden = $derived(accessibleName !== undefined)
+	let labelHidden = $derived(accessibleName !== undefined)
 
 	const handlePointerdown = (
 		event: PointerEvent & { currentTarget: EventTarget & CarouselItemElement },
 	) => {
 		onpointerdown?.(event)
-		if (!disabled && type !== 'text') press.press()
+		if (!disabled && tag !== 'div') press.press()
 	}
 </script>
 
 {#snippet content()}
 	{#if image}
-		<div class="np-carousel-item-image" style="background-image: url({image})"></div>
+		<div
+			class="np-carousel-item-image"
+			style="background-image: url({image})"
+			role={imageAlt ? 'img' : undefined}
+			aria-label={imageAlt || undefined}
+		></div>
 	{/if}
 	{#if children}
 		{@render children()}
@@ -62,12 +71,12 @@
 	{#if label}
 		<span class="np-carousel-item-label" aria-hidden={labelHidden || undefined}>{label}</span>
 	{/if}
-	{#if !disabled && type !== 'text'}
+	{#if !disabled && tag !== 'div'}
 		<Ripple />
 	{/if}
 {/snippet}
 
-{#if type === 'text'}
+{#if tag === 'div'}
 	<div
 		{...attributes}
 		bind:this={element}
@@ -83,11 +92,11 @@
 	>
 		{@render content()}
 	</div>
-{:else if type === 'button'}
+{:else if tag === 'button'}
 	<button
 		{...attributes}
 		bind:this={element}
-		type="button"
+		type={buttonType(type)}
 		{disabled}
 		aria-disabled={disabled}
 		aria-label={accessibleName}
@@ -103,7 +112,7 @@
 	>
 		{@render content()}
 	</button>
-{:else if type === 'link'}
+{:else}
 	<a
 		{...attributes}
 		bind:this={element}

package/dist/carousel/carouselMorph.js

@@ -1,4 +1,4 @@
-import { arrange, itemKeyframes, morphTrack, notches } from "./carouselStrategy.js";
+import { arrange, itemKeyframes, morphTrack, notches } from './carouselStrategy.ts';
 export const scrollTimelines = typeof CSS !== 'undefined' && CSS.supports('animation-timeline', 'scroll(nearest inline)');
 const px = (value) => `${Math.round(value * 100) / 100}px`;
 const lengthOf = (value, fallback) => {

package/dist/carousel/types.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { ElementKindProps } from '../internal/elementTag.js';
+import type { HTMLAttributes } from 'svelte/elements';
 export type CarouselVariant = 'multi-browse' | 'uncontained' | 'hero' | 'full-screen';
 export type CarouselAlignment = 'start' | 'center';
 export type CarouselOrientation = 'horizontal' | 'vertical';
@@ -15,12 +16,12 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     scroller?: HTMLDivElement;
     element?: HTMLDivElement;
 }
-export interface CarouselItemProps extends HTMLAttributes<CarouselItemElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
-    type: 'text' | 'button' | 'link';
+export interface CarouselItemProps extends ElementKindProps<CarouselItemElement> {
     label?: string | null;
     image?: string | null;
+    /** Describes `image` for assistive technology. Leave it out for a decorative image. */
+    imageAlt?: string;
     aspectRatio?: number | null;
-    disabled?: boolean | null;
     children?: Snippet;
     element?: CarouselItemElement;
 }

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.js'
+	import type { CheckboxProps } from './types.ts'
 
 	let {
 		indeterminate = $bindable(),

package/dist/checkbox/types.d.ts

@@ -1,8 +1,7 @@
+import type { Issue } from '../shared/types.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
     group?: (string | number)[] | null;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
 }

package/dist/chip/AssistChip.svelte

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

package/dist/chip/ChipSet.svelte

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

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.js'
+	import type { FilterChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),

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.js'
+	import type { InputChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),

package/dist/chip/SuggestionChip.svelte

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

package/dist/chip/types.d.ts

@@ -1,3 +1,4 @@
+import type { Issue } from '../shared/types.js';
 import type { ButtonElement } from '../button/types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
@@ -16,7 +17,7 @@ export type SuggestionChipProps = Omit<AssistChipProps, 'icon'>;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | null;
     variant?: 'outlined' | 'elevated';
     label?: string;
     icon?: Snippet;
@@ -27,13 +28,11 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     group?: (string | number)[] | null;
     defaultSelected?: boolean | null;
     onremove?: MouseEventHandler<ButtonElement>;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
 }
 export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     selected?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | null;
     label?: string;
     icon?: Snippet;
     removeAriaLabel?: string;
@@ -43,9 +42,7 @@ export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     value?: string | number;
     onclick?: MouseEventHandler<HTMLButtonElement>;
     onremove?: MouseEventHandler<ButtonElement>;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
 }
 export interface ChipSetContext {
     chips: {

package/dist/date-picker/Calendar.svelte

@@ -21,7 +21,7 @@
 		today as getToday,
 	} from './dateUtils.js'
 	import { afterTwoFrames } from '../animation.js'
-	import type { CalendarProps } from './types.js'
+	import type { CalendarProps } from './types.ts'
 
 	let {
 		month,
@@ -212,13 +212,14 @@
 							{#if !inMonth && !adjacentMonthDays}
 								<td role="gridcell" class="np-calendar-cell"></td>
 							{:else}
-								{@const isSelected =
+								{let isSelected = $derived(
 									isSameDay(date, selected) ||
-									isSameDay(date, rangeStart) ||
-									isSameDay(date, rangeEnd)}
-								{@const isToday = isSameDay(date, todayValue)}
-								{@const enabled = isEnabled(date)}
-								{@const between = inRange(date)}
+										isSameDay(date, rangeStart) ||
+										isSameDay(date, rangeEnd),
+								)}
+								{let isToday = $derived(isSameDay(date, todayValue))}
+								{let enabled = $derived(isEnabled(date))}
+								{let between = $derived(inRange(date))}
 								<td
 									role="gridcell"
 									aria-selected={isSelected}

package/dist/date-picker/DatePickerDialog.svelte

@@ -32,7 +32,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import type { DatePickerDialogProps, ISODate } from './types.js'
+	import type { DatePickerDialogProps, ISODate } from './types.ts'
 
 	let {
 		value = $bindable(),