noph-ui 0.49.0 → 0.51.0

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')
@@ -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/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',
@@ -12,8 +12,8 @@
 </script>
 
 <Button
-	--np-elevated-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface))"
-	--np-outlined-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface))"
+	--np-elevated-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-outlined-button-label-text-color="var(--np-suggestion-chip-label-text-color, var(--np-color-on-surface-variant))"
 	--np-outlined-button-outline-color="var(--np-suggestion-chip-outline-color, var(--np-color-outline-variant))"
 	--np-button-padding="1rem"
 	--np-button-shape="0.5rem"

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(),
@@ -400,6 +400,7 @@
 
 	.np-date-picker-dialog-headline {
 		margin: 0;
+		color: var(--np-color-on-surface);
 		font-size: 2rem;
 		line-height: 2.5rem;
 		font-weight: 400;

package/dist/date-picker/DateRangePicker.svelte

@@ -22,7 +22,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import type { DateRange, DateRangePickerProps } from './types.js'
+	import type { DateRange, DateRangePickerProps } from './types.ts'
 
 	let {
 		value = $bindable({}),
@@ -297,7 +297,7 @@
 		--np-dialog-elevation: none;
 		--np-dialog-container-color: var(
 			--np-date-range-picker-container-color,
-			var(--np-color-surface)
+			var(--np-color-surface-container-high)
 		);
 		--np-dialog-container-shape: var(
 			--np-date-range-picker-container-shape,
@@ -368,6 +368,7 @@
 
 	.np-date-range-picker-headline {
 		margin: 0;
+		color: var(--np-color-on-surface);
 		display: flex;
 		gap: 0.5rem;
 		font-size: 1.375rem;
@@ -419,10 +420,6 @@
 			--np-dialog-inset: 2rem 1rem;
 			--np-dialog-max-height: calc(100dvh - 3rem);
 			--np-dialog-elevation: var(--np-elevation-3);
-			--np-dialog-container-color: var(
-				--np-date-range-picker-container-color,
-				var(--np-color-surface-container-high)
-			);
 			--np-dialog-container-shape: var(
 				--np-date-range-picker-container-shape,
 				var(--np-shape-corner-extra-large)

package/dist/date-picker/DockedDatePicker.svelte

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

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -44,7 +44,7 @@
 		uses12HourClock,
 		withMinutes,
 	} from './dateUtils.js'
-	import type { DockedDateTimePickerProps, ISODate } from './types.js'
+	import type { DockedDateTimePickerProps, ISODate } from './types.ts'
 
 	let {
 		value = $bindable(),

package/dist/date-picker/SelectionList.svelte

@@ -3,7 +3,7 @@
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { revealSelected, tabStop } from './optionList.js'
-	import type { TimeColumnProps } from './types.js'
+	import type { TimeColumnProps } from './internalTypes.ts'
 
 	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
@@ -21,7 +21,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each options as option (option.value)}
-		{@const selected = option.value === value}
+		{let selected = $derived(option.value === value)}
 		<button
 			{@attach selected && reveal}
 			type="button"

package/dist/date-picker/SelectionList.svelte.d.ts

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

package/dist/date-picker/TimeColumn.svelte

@@ -2,7 +2,7 @@
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { revealSelected, tabStop } from './optionList.js'
-	import type { TimeColumnProps } from './types.js'
+	import type { TimeColumnProps } from './internalTypes.ts'
 
 	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
@@ -20,7 +20,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each options as option (option.value)}
-		{@const selected = option.value === value}
+		{let selected = $derived(option.value === value)}
 		<button
 			{@attach selected && reveal}
 			type="button"

package/dist/date-picker/TimeColumn.svelte.d.ts

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

package/dist/date-picker/YearGrid.svelte

@@ -84,7 +84,7 @@
 	onkeydown={handleKeydown}
 >
 	{#each years as { year, disabled } (year)}
-		{@const selected = year === value}
+		{let selected = $derived(year === value)}
 		<button
 			{@attach selected && scrollIntoGrid}
 			type="button"

package/dist/date-picker/internalTypes.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimeOption } from './types.ts';
+export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
+    options: TimeOption[];
+    value?: number;
+    onselect?: (value: number) => void;
+}

package/dist/date-picker/internalTypes.js

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

package/dist/date-picker/types.d.ts

@@ -1,6 +1,8 @@
+import type { Issue } from '../shared/types.js';
 import type { Snippet } from 'svelte';
+import type { DockedFieldProps } from '../internal/fieldTypes.js';
 import type { TextFieldElement } from '../text-field/types.js';
-import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
 export type ISODate = string;
 export type ISODateTime = string;
 export interface DateRange {
@@ -27,26 +29,13 @@ interface MonthStepperLabelProps {
     nextMonthLabel?: string;
     previousMonthLabel?: string;
 }
-export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
-    value?: ISODate | number | null;
+interface DockedDateFieldProps extends DockedFieldProps {
     displayMonth?: ISODate;
-    open?: boolean;
-    element?: HTMLSpanElement;
-    name?: string;
-    form?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    variant?: 'outlined' | 'filled';
-    issues?: {
-        message: string;
-    }[];
+}
+export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps, DockedDateFieldProps {
+    value?: ISODate | number | null;
     defaultValue?: ISODate | number | null;
     type?: 'date';
-    noAsterisk?: boolean;
-    autocomplete?: HTMLInputAttributes['autocomplete'];
-    label?: string;
-    supportingText?: string;
     nextYearLabel?: string;
     previousYearLabel?: string;
     selectMonthLabel?: string;
@@ -55,28 +44,12 @@ export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElem
     invalidDateMessage?: string;
     onchange?: (value: ISODate | undefined) => void;
 }
-export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps {
+export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps, DockedDateFieldProps {
     value?: ISODateTime | number | null;
-    displayMonth?: ISODate;
-    open?: boolean;
-    element?: HTMLSpanElement;
+    defaultValue?: ISODateTime | number | null;
     min?: ISODate | ISODateTime;
     max?: ISODate | ISODateTime;
-    name?: string;
-    form?: string;
-    required?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    variant?: 'outlined' | 'filled';
-    issues?: {
-        message: string;
-    }[];
-    defaultValue?: ISODateTime | number | null;
     type?: 'datetime-local';
-    noAsterisk?: boolean;
-    autocomplete?: HTMLInputAttributes['autocomplete'];
-    label?: string;
-    supportingText?: string;
     minuteStep?: number;
     hour12?: boolean;
     defaultTime?: string;
@@ -96,11 +69,6 @@ export interface TimeOption {
     label: string;
     disabled?: boolean;
 }
-export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
-    options: TimeOption[];
-    value?: number;
-    onselect?: (value: number) => void;
-}
 export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
     value?: ISODate | null;
     displayMonth?: ISODate;
@@ -113,9 +81,7 @@ export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogEle
     modeToggle?: boolean;
     label?: string;
     supportingText?: string;
-    issues?: {
-        message: string;
-    }[];
+    issues?: Issue[];
     selectYearLabel?: string;
     calendarModeLabel?: string;
     inputModeLabel?: string;

package/dist/dialog/Dialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
 	import { syncOpenEffect } from '../popover.svelte.js'
-	import type { DialogProps } from './types.js'
+	import type { DialogProps } from './types.ts'
 
 	let {
 		element = $bindable(),
@@ -40,14 +40,12 @@
 <dialog
 	bind:this={element}
 	{...attributes}
-	tabindex="-1"
 	closedby="any"
 	aria-labelledby={ariaLabelledby ?? (headline ? `${uid}-dialog-headline` : undefined)}
 	aria-describedby={supportingText ? `${uid}-dialog-supporting-text` : undefined}
 	class={['np-dialog-container', !quick && 'np-animate', attributes.class]}
 	ontoggle={(event) => {
 		open = event.newState === 'open'
-		if (event.newState === 'open') element?.focus()
 		ontoggle?.(event)
 	}}
 	onclick={(event) => {
@@ -114,7 +112,7 @@
 
 	.np-dialog {
 		border: 0;
-		background-color: var(--np-dialog-container-color, var(--np-color-surface));
+		background-color: var(--np-dialog-container-color, var(--np-color-surface-container-high));
 		color: var(--np-color-on-surface);
 		padding: var(--np-dialog-padding, 1.5rem);
 		border-radius: var(--np-dialog-container-shape, var(--np-shape-corner-extra-large));
@@ -129,6 +127,7 @@
 
 	.np-dialog-scroller {
 		overflow-y: auto;
+		overscroll-behavior: contain;
 		display: flex;
 		flex: 1 1 0%;
 		flex-direction: column;