noph-ui 0.44.0 → 0.45.0

package/dist/button/SegmentedButton.svelte

@@ -10,13 +10,16 @@
 		multiSelect = false,
 		element = $bindable(),
 		group = $bindable(),
+		issues,
 		...attributes
 	}: SegmentedButtonProps = $props()
+
+	let hasError = $derived(!!issues?.length)
 </script>
 
 <div
 	{...attributes}
-	class={['np-segmented-buttons', attributes.class]}
+	class={['np-segmented-buttons', hasError && 'np-error', attributes.class]}
 	bind:this={element}
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
@@ -95,6 +98,17 @@
 		overflow-x: auto;
 	}
 
+	.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);
+	}
+
+	.np-error .np-segmented-button {
+		border-inline-end-color: var(--np-color-error);
+	}
+
 	.np-segmented-button {
 		flex: 1;
 		padding: 0.5rem 1.75rem;

package/dist/button/SplitButton.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import ChevronDownIcon from '../icons/ChevronDownIcon.svelte'
+	import Menu from '../menu/Menu.svelte'
+	import Button from './Button.svelte'
+	import ButtonGroup from './ButtonGroup.svelte'
+	import type { SplitButtonProps } from './types.js'
+
+	let {
+		label = '',
+		icon,
+		menu,
+		variant = 'filled',
+		size = 's',
+		disabled = false,
+		open = $bindable(false),
+		menuLabel = 'More options',
+		onclick,
+		element = $bindable(),
+		...attributes
+	}: SplitButtonProps = $props()
+
+	const uid = $props.id()
+	const menuId = `np-split-button-menu-${uid}`
+
+	// The trailing half is the menu's invoker, so it is also the popover's implicit anchor.
+	let trigger: HTMLElement | undefined = $state()
+</script>
+
+{#snippet caret()}
+	<ChevronDownIcon />
+{/snippet}
+
+<ButtonGroup
+	{...attributes}
+	bind:element
+	variant="connected"
+	class={['np-split-button', attributes.class]}
+>
+	<Button {variant} {size} {disabled} {onclick} start={icon}>{label}</Button>
+	<!--
+		A `Button` rather than an `IconButton`, because an icon button has no `elevated` variant and
+		a split button's two halves have to match.
+	-->
+	<Button
+		{variant}
+		{size}
+		{disabled}
+		bind:element={trigger}
+		class="np-split-button-trigger"
+		command="toggle-popover"
+		commandfor={menuId}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-label={menuLabel}
+		start={caret}
+	/>
+	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false}>
+		{@render menu?.(menuId)}
+	</Menu>
+</ButtonGroup>
+
+<style>
+	/* The caret turns over while the menu is open, the way the select arrow does. */
+	:global(.np-split-button-trigger svg) {
+		transition: rotate var(--np-motion-expressive-fast-effects);
+	}
+	:global(.np-split-button-trigger[aria-expanded='true'] svg) {
+		rotate: 180deg;
+	}
+	/*
+		The trailing half only holds a caret, so it does not need a full button's width. It is
+		square rather than merely narrow, because every size sets its round corner to half its
+		height, and only on a square does that corner come out as a true circle.
+	*/
+	:global(.np-split-button > .np-split-button-trigger) {
+		--np-button-padding: 0;
+		aspect-ratio: 1;
+		justify-content: center;
+	}
+	/*
+		While the menu is open the trailing half reads as selected: its inner corner rounds out to
+		the outer one, so the half becomes a circle, and it keeps a state layer up. Overriding the
+		group's inner corner rather than `border-radius` leaves ButtonGroup's own corner rules in
+		charge of which corner is which.
+	*/
+	:global(.np-split-button > .np-split-button-trigger[aria-expanded='true']) {
+		--np-button-group-inner-corner: var(--_round-radius, var(--np-shape-corner-full));
+	}
+	:global(.np-split-button-trigger[aria-expanded='true'] .np-ripple-surface::before) {
+		opacity: var(--np-ripple-hover-opacity, 0.08);
+	}
+</style>

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

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

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,24 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     expandedRatio?: number;
     compressionLimit?: number;
     element?: HTMLElement;
-    children?: Snippet;
+}
+export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
+    /** Text of the leading action. */
+    label?: string;
+    /** Leading icon on the action half. */
+    icon?: Snippet;
+    /** Menu items for the trailing half. Rendered inside a `Menu`. */
+    menu?: Snippet<[string]>;
+    variant?: Exclude<ButtonProps['variant'], 'text'>;
+    size?: BaseButtonProps['size'];
+    disabled?: boolean | null;
+    /** Bindable. Whether the menu is open. */
+    open?: boolean;
+    /** Accessible name for the trailing half, which shows only a caret. */
+    menuLabel?: string;
+    /** The action half's click handler. The trailing half opens the menu instead. */
+    onclick?: MouseEventHandler<ButtonElement>;
+    element?: HTMLElement;
 }
 export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
     name: string;
@@ -42,5 +59,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,10 @@
 	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,
+	// A grouped checkbox takes its checked state from the group, so it cannot also `bind:checked`.
+	// One controlled input covers both, with the change handler writing back whichever is in play.
+	let isChecked = $derived(
+		Array.isArray(group) && groupValue !== undefined ? group.includes(groupValue) : checked,
 	)
 
 	const onchange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -42,7 +43,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 +60,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 +93,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 +139,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 +164,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 +199,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 +232,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 +244,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 +257,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 +266,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,30 @@
 	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,
+	// A grouped chip takes its checked state from the group, so it cannot also `bind:checked`. One
+	// controlled input covers both, with the change handler writing back whichever is in play.
+	let isChecked = $derived(
+		Array.isArray(group) && value !== undefined ? group.includes(value) : selected,
 	)
 
 	const onchange = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
@@ -48,10 +53,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 +71,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 +91,7 @@
 			type="button"
 			size="xs"
 			--np-icon-button-icon-size="1.125rem"
-			aria-label={ariaLabelRemove}
+			aria-label={removeAriaLabel}
 			onclick={onremove}
 		>
 			<CloseIcon />
@@ -191,6 +187,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';