noph-ui 0.44.0 → 0.45.1

package/dist/button/index.d.ts

@@ -2,3 +2,4 @@ export { default as Button } from './Button.svelte';
 export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as SegmentedButton } from './SegmentedButton.svelte';
+export { default as SplitButton } from './SplitButton.svelte';

package/dist/button/index.js

@@ -2,3 +2,4 @@ export { default as Button } from './Button.svelte';
 export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as IconButton } from './IconButton.svelte';
 export { default as SegmentedButton } from './SegmentedButton.svelte';
+export { default as SplitButton } from './SplitButton.svelte';

package/dist/button/types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 export type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
-interface BaseButtonProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+export interface BaseButtonProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     element?: HTMLElement;
     disabled?: boolean | null;
     loading?: boolean;
@@ -27,7 +27,18 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     expandedRatio?: number;
     compressionLimit?: number;
     element?: HTMLElement;
-    children?: Snippet;
+}
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
+    label?: string;
+    icon?: Snippet;
+    menu?: Snippet<[string]>;
+    variant?: Exclude<ButtonProps['variant'], 'text'>;
+    size?: BaseButtonProps['size'];
+    disabled?: boolean | null;
+    open?: boolean;
+    menuLabel?: string;
+    onclick?: MouseEventHandler<ButtonElement>;
+    element?: HTMLElement;
 }
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
@@ -42,5 +53,7 @@ export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     group?: string | number | (string | number)[] | null;
     element?: HTMLElement;
+    issues?: {
+        message: string;
+    }[];
 }
-export {};

package/dist/card/types.d.ts

@@ -3,7 +3,7 @@ import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from
 export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
 export interface CardProps extends HTMLAttributes<CardElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     variant?: 'elevated' | 'filled' | 'outlined';
-    disabled?: boolean;
+    disabled?: boolean | null;
     image?: string | null;
     element?: HTMLElement;
     headline?: string | null;

package/dist/checkbox/Checkbox.svelte

@@ -21,9 +21,8 @@
 	let groupValue = $derived(
 		typeof value === 'string' || typeof value === 'number' ? value : undefined,
 	)
-	let grouped = $derived(Array.isArray(group) && groupValue !== undefined)
-	let groupChecked = $derived(
-		Array.isArray(group) && groupValue !== undefined ? group.includes(groupValue) : false,
+	let isChecked = $derived(
+		Array.isArray(group) && groupValue !== undefined ? group.includes(groupValue) : checked,
 	)
 
 	const onchange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -42,7 +41,11 @@
 
 <div
 	{style}
-	class={['np-container', hasError && !attributes.disabled && 'np-error', attributes.class]}
+	class={[
+		'np-checkbox-container',
+		hasError && !attributes.disabled && 'np-error',
+		attributes.class,
+	]}
 	bind:this={element}
 >
 	<div class="np-outline"></div>
@@ -55,37 +58,23 @@
 		{#if !attributes.disabled}
 			<Ripple forElement={inputEl} />
 		{/if}
-		{#if grouped}
-			<input
-				{...attributes}
-				{value}
-				class="np-input"
-				type="checkbox"
-				bind:indeterminate
-				bind:this={inputEl}
-				checked={groupChecked}
-				{onchange}
-				aria-invalid={hasError ? 'true' : ariaInvalid}
-				aria-checked={indeterminate ? 'mixed' : undefined}
-			/>
-		{:else}
-			<input
-				{...attributes}
-				{value}
-				class="np-input"
-				type="checkbox"
-				bind:indeterminate
-				bind:checked
-				bind:this={inputEl}
-				aria-invalid={hasError ? 'true' : ariaInvalid}
-				aria-checked={indeterminate ? 'mixed' : undefined}
-			/>
-		{/if}
+		<input
+			{...attributes}
+			{value}
+			class="np-input"
+			type="checkbox"
+			bind:indeterminate
+			bind:this={inputEl}
+			checked={isChecked}
+			{onchange}
+			aria-invalid={hasError ? 'true' : ariaInvalid}
+			aria-checked={indeterminate ? 'mixed' : undefined}
+		/>
 	</div>
 </div>
 
 <style>
-	.np-container {
+	.np-checkbox-container {
 		border-radius: var(--np-checkbox-container-shape, 2px);
 		display: inline-flex;
 		place-content: center;
@@ -102,7 +91,7 @@
 	:global(label) {
 		-webkit-tap-highlight-color: transparent;
 	}
-	.np-container:has(input:disabled) {
+	.np-checkbox-container:has(input:disabled) {
 		cursor: default;
 	}
 	.np-input {
@@ -148,18 +137,18 @@
 		border-width: 2px;
 		box-sizing: border-box;
 	}
-	.np-container:focus-within .np-outline,
-	.np-container:hover .np-outline {
+	.np-checkbox-container:focus-within .np-outline,
+	.np-checkbox-container:hover .np-outline {
 		border-color: var(--np-color-on-surface);
 		border-width: 2px;
 	}
-	.np-container:has(input:disabled) .np-outline {
+	.np-checkbox-container:has(input:disabled) .np-outline {
 		border-color: var(--np-color-on-surface);
 		border-width: 2px;
 		opacity: 0.38;
 	}
-	.np-container:has(input:disabled:checked) .np-outline,
-	.np-container:has(input:disabled:indeterminate) .np-outline {
+	.np-checkbox-container:has(input:disabled:checked) .np-outline,
+	.np-checkbox-container:has(input:disabled:indeterminate) .np-outline {
 		visibility: hidden;
 	}
 	.np-background {
@@ -173,17 +162,17 @@
 		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15), linear;
 		transform: scale(0.6);
 	}
-	.np-container:has(input:indeterminate) .np-background,
-	.np-container:has(input:checked) .np-background,
-	.np-container:has(input:indeterminate) .np-icon,
-	.np-container:has(input:checked) .np-icon {
+	.np-checkbox-container:has(input:indeterminate) .np-background,
+	.np-checkbox-container:has(input:checked) .np-background,
+	.np-checkbox-container:has(input:indeterminate) .np-icon,
+	.np-checkbox-container:has(input:checked) .np-icon {
 		opacity: 1;
 		transition-duration: 350ms, 50ms;
 		transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1), linear;
 		transform: scale(1);
 	}
-	.np-container:has(input:disabled:checked) .np-background,
-	.np-container:has(input:disabled:indeterminate) .np-background {
+	.np-checkbox-container:has(input:disabled:checked) .np-background,
+	.np-checkbox-container:has(input:disabled:indeterminate) .np-background {
 		background: var(--np-color-on-surface);
 		opacity: 0.38;
 	}
@@ -208,23 +197,23 @@
 		height: 18px;
 		width: 18px;
 	}
-	.np-container:has(input:disabled) .np-icon {
+	.np-checkbox-container:has(input:disabled) .np-icon {
 		fill: var(--np-color-surface);
 	}
-	.np-container:has(input:checked) .mark.short,
-	.np-container:has(input:not(:checked):not(:indeterminate)) .mark.short {
+	.np-checkbox-container:has(input:checked) .mark.short,
+	.np-checkbox-container:has(input:not(:checked):not(:indeterminate)) .mark.short {
 		height: 5.6568542495px;
 	}
-	.np-container:has(input:indeterminate) .mark,
-	.np-container:has(input:checked) .mark {
+	.np-checkbox-container:has(input:indeterminate) .mark,
+	.np-checkbox-container:has(input:checked) .mark {
 		transition-property: none;
 	}
-	.np-container:has(input:checked) .mark,
-	.np-container:has(input:not(:checked):not(:indeterminate)) .mark {
+	.np-checkbox-container:has(input:checked) .mark,
+	.np-checkbox-container:has(input:not(:checked):not(:indeterminate)) .mark {
 		transform: scaleY(-1) translate(7px, -14px) rotate(45deg);
 	}
-	.np-container:has(input:indeterminate) .mark,
-	.np-container:has(input:checked) .mark {
+	.np-checkbox-container:has(input:indeterminate) .mark,
+	.np-checkbox-container:has(input:checked) .mark {
 		animation-duration: 350ms;
 		animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
 		transition-duration: 350ms;
@@ -241,11 +230,11 @@
 		transition-duration: 150ms;
 		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
 	}
-	.np-container:has(input:checked) .mark.long {
+	.np-checkbox-container:has(input:checked) .mark.long {
 		animation-name: prev-unselected-to-checked;
 	}
-	.np-container:has(input:checked) .mark.long,
-	.np-container:has(input:not(:checked):not(:indeterminate)) .mark.long {
+	.np-checkbox-container:has(input:checked) .mark.long,
+	.np-checkbox-container:has(input:not(:checked):not(:indeterminate)) .mark.long {
 		width: 11.313708499px;
 	}
 	.mark.long {
@@ -253,7 +242,7 @@
 		transition-property: transform, width;
 		width: 10px;
 	}
-	.np-container:has(input:indeterminate) .mark {
+	.np-checkbox-container:has(input:indeterminate) .mark {
 		transform: scaleY(-1) translate(4px, -10px) rotate(0deg);
 	}
 	@keyframes prev-unselected-to-checked {
@@ -266,7 +255,7 @@
 			background-color: CanvasText;
 		}
 
-		.np-container:has(input:disabled:checked) .np-background {
+		.np-checkbox-container:has(input:disabled:checked) .np-background {
 			background-color: GrayText;
 			opacity: 1;
 		}
@@ -275,7 +264,7 @@
 			border-color: CanvasText;
 		}
 
-		.np-container:has(input:disabled) .np-outline {
+		.np-checkbox-container:has(input:disabled) .np-outline {
 			border-color: GrayText;
 			opacity: 1;
 		}

package/dist/chip/AssistChip.svelte

@@ -3,7 +3,7 @@
 	import Button from '../button/Button.svelte'
 
 	let {
-		elevated = false,
+		variant = 'outlined',
 		disabled = false,
 		label = '',
 		icon,
@@ -13,8 +13,6 @@
 </script>
 
 <Button
-	size="xs"
-	shape="square"
 	--np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
 	--np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
 	--np-outlined-button-outline-color="var(--np-assist-chip-outline-color, var(--np-color-outline-variant))"
@@ -27,9 +25,11 @@
 		: 'var(--np-color-primary)'}
 	style="letter-spacing: 0.006rem"
 	bind:element
-	variant={elevated ? 'elevated' : 'outlined'}
-	{disabled}
 	{...attributes}
+	size="xs"
+	shape="square"
+	{variant}
+	{disabled}
 	start={icon}
 >
 	{label}

package/dist/chip/ChipSet.svelte

@@ -2,7 +2,7 @@
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import type { ChipSetProps } from './types.js'
 
-	let { children, chipsCount, element = $bindable(), ...attributes }: ChipSetProps = $props()
+	let { children, element = $bindable(), ...attributes }: ChipSetProps = $props()
 
 	const CHIP_SELECTOR = "input:not([type='hidden']), button, a[href]"
 	const attach = rovingTabindex(CHIP_SELECTOR, {
@@ -12,15 +12,7 @@
 	const onkeydown = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
 </script>
 
-<div
-	{...attributes}
-	bind:this={element}
-	class={[
-		'np-chip-set-wrapper',
-		(chipsCount ?? 0) > 0 && 'np-chip-set-has-chips',
-		attributes.class,
-	]}
->
+<div {...attributes} bind:this={element} class={['np-chip-set-wrapper', attributes.class]}>
 	{#if children}
 		<div {@attach attach} class={['np-chip-set']} role="toolbar" tabindex="-1" {onkeydown}>
 			{@render children()}
@@ -34,7 +26,7 @@
 		padding: 0.5rem;
 		margin: -0.5rem;
 	}
-	.np-chip-set-has-chips {
+	.np-chip-set-wrapper:has(.np-chip-set > :global(*)) {
 		margin-inline-end: 0;
 	}
 	.np-chip-set {

package/dist/chip/FilterChip.svelte

@@ -9,25 +9,28 @@
 	let {
 		selected = $bindable(),
 		removable = false,
-		elevated = false,
+		variant = 'outlined',
 		disabled = false,
 		label = '',
 		icon,
 		element = $bindable(),
-		ariaLabelRemove = 'Remove',
+		removeAriaLabel = 'Remove',
 		onremove,
 		name,
 		value,
 		group = $bindable(),
 		defaultSelected,
+		issues,
+		'aria-invalid': ariaInvalid,
 		...attributes
 	}: FilterChipProps = $props()
 
+	let hasError = $derived(!!issues?.length)
+
 	let chipLabel: HTMLLabelElement | undefined = $state()
 
-	let grouped = $derived(Array.isArray(group) && value !== undefined)
-	let groupChecked = $derived(
-		Array.isArray(group) && value !== undefined ? group.includes(value) : false,
+	let isChecked = $derived(
+		Array.isArray(group) && value !== undefined ? group.includes(value) : selected,
 	)
 
 	const onchange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -48,10 +51,11 @@
 	bind:this={element}
 	class={[
 		'np-filter-chip',
-		elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
+		variant === 'elevated' ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
 		icon ? 'np-filter-chip-icon' : '',
 		removable ? 'np-filter-chip-removable' : '',
 		disabled ? 'np-filter-chip-disabled' : '',
+		hasError && !disabled && 'np-chip-error',
 		attributes.class,
 	]}
 >
@@ -65,26 +69,16 @@
 			<CheckIcon width={18} height={18} />
 		</div>
 		<div class="np-chip-label">{label}</div>
-		{#if grouped}
-			<input
-				type="checkbox"
-				checked={groupChecked}
-				{onchange}
-				{value}
-				{name}
-				{disabled}
-				defaultChecked={defaultSelected}
-			/>
-		{:else}
-			<input
-				type="checkbox"
-				bind:checked={selected}
-				{value}
-				{name}
-				{disabled}
-				defaultChecked={defaultSelected}
-			/>
-		{/if}
+		<input
+			type="checkbox"
+			checked={isChecked}
+			{onchange}
+			{value}
+			{name}
+			{disabled}
+			defaultChecked={defaultSelected}
+			aria-invalid={hasError ? 'true' : ariaInvalid}
+		/>
 	</label>
 	{#if !disabled}
 		<Ripple forElement={chipLabel} />
@@ -95,7 +89,7 @@
 			type="button"
 			size="xs"
 			--np-icon-button-icon-size="1.125rem"
-			aria-label={ariaLabelRemove}
+			aria-label={removeAriaLabel}
 			onclick={onremove}
 		>
 			<CloseIcon />
@@ -191,6 +185,18 @@
 		outline-width: 1px;
 		outline-offset: -1px;
 	}
+	.np-chip-error {
+		--np-filter-chip-outline-color: var(--np-color-error);
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+		color: var(--np-color-error);
+	}
+	.np-chip-error:has(input:checked)::before {
+		background-color: var(--np-color-error-container);
+	}
+	.np-chip-error:has(input:checked) {
+		color: var(--np-color-on-error-container);
+	}
 	.np-filter-chip:has(input:checked)::before {
 		outline-color: transparent;
 		background-color: var(--np-color-secondary-container);

package/dist/chip/InputChip.svelte

@@ -12,13 +12,16 @@
 		icon,
 		element = $bindable(),
 		actionElement = $bindable(),
-		ariaLabelRemove = 'Remove',
+		removeAriaLabel = 'Remove',
 		onclick,
 		onremove,
 		name,
 		value,
+		issues,
 		...attributes
 	}: InputChipProps = $props()
+
+	let hasError = $derived(!!issues?.length)
 </script>
 
 <div
@@ -30,6 +33,7 @@
 		icon ? 'np-input-chip-icon' : '',
 		disabled ? 'np-input-chip-disabled' : '',
 		selected ? 'np-input-chip-selected' : '',
+		hasError && !disabled && 'np-chip-error',
 		attributes.class,
 	]}
 >
@@ -57,7 +61,7 @@
 		type="button"
 		size="xs"
 		--np-icon-button-icon-size="1.125rem"
-		aria-label={ariaLabelRemove}
+		aria-label={removeAriaLabel}
 		onclick={onremove}
 	>
 		<CloseIcon />
@@ -77,6 +81,13 @@
 		padding-inline-end: 1px;
 		min-width: 0;
 	}
+	.np-chip-error {
+		--np-input-chip-outline-color: var(--np-color-error);
+		--np-icon-button-icon-color: var(--np-color-error);
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+		color: var(--np-color-error);
+	}
 	.np-input-chip-label {
 		appearance: none;
 		background: none;

package/dist/chip/SuggestionChip.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Button from '../button/Button.svelte'
+	import type { SuggestionChipProps } from './types.js'
+
+	let {
+		variant = 'outlined',
+		disabled = false,
+		label = '',
+		element = $bindable(),
+		...attributes
+	}: SuggestionChipProps = $props()
+</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-outlined-button-outline-color="var(--np-suggestion-chip-outline-color, var(--np-color-outline-variant))"
+	--np-button-padding="1rem"
+	--np-button-shape="0.5rem"
+	style="letter-spacing: 0.006rem"
+	bind:element
+	{...attributes}
+	size="xs"
+	shape="square"
+	{variant}
+	{disabled}
+>
+	{label}
+</Button>

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

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

package/dist/chip/index.d.ts

@@ -1,4 +1,5 @@
 export { default as FilterChip } from './FilterChip.svelte';
 export { default as AssistChip } from './AssistChip.svelte';
 export { default as InputChip } from './InputChip.svelte';
+export { default as SuggestionChip } from './SuggestionChip.svelte';
 export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/index.js

@@ -1,4 +1,5 @@
 export { default as FilterChip } from './FilterChip.svelte';
 export { default as AssistChip } from './AssistChip.svelte';
 export { default as InputChip } from './InputChip.svelte';
+export { default as SuggestionChip } from './SuggestionChip.svelte';
 export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/types.d.ts

@@ -1,44 +1,51 @@
-import type { ButtonElement, ButtonProps } from '../button/types.js';
+import type { ButtonElement } from '../button/types.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
-    chipsCount?: number;
     element?: HTMLDivElement;
 }
-export interface AssistChipProps extends Omit<ButtonProps, 'variant' | 'start' | 'end' | 'element'> {
-    elevated?: boolean;
-    disabled?: boolean;
+export interface AssistChipProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    variant?: 'outlined' | 'elevated';
+    disabled?: boolean | null;
     label?: string;
     icon?: Snippet;
     element?: HTMLElement;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
+export type SuggestionChipProps = Omit<AssistChipProps, 'icon'>;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
     disabled?: boolean;
-    elevated?: boolean;
+    variant?: 'outlined' | 'elevated';
     label?: string;
     icon?: Snippet;
-    ariaLabelRemove?: string;
+    removeAriaLabel?: string;
     element?: HTMLDivElement;
     name?: string;
     value?: string;
     group?: (string | number)[] | null;
     defaultSelected?: boolean | null;
     onremove?: MouseEventHandler<ButtonElement>;
+    issues?: {
+        message: string;
+    }[];
 }
 export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     selected?: boolean;
     disabled?: boolean;
     label?: string;
     icon?: Snippet;
-    ariaLabelRemove?: string;
+    removeAriaLabel?: string;
     element?: HTMLDivElement;
     actionElement?: HTMLButtonElement;
     name?: string;
     value?: string | number;
     onclick?: MouseEventHandler<HTMLButtonElement>;
     onremove?: MouseEventHandler<ButtonElement>;
+    issues?: {
+        message: string;
+    }[];
 }
 export interface ChipSetContext {
     chips: {

package/dist/date-picker/Calendar.svelte

@@ -20,7 +20,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import { afterTwoFrames } from './enterAnimation.js'
+	import { afterTwoFrames } from '../animation.js'
 	import type { CalendarProps } from './types.js'
 
 	let {