noph-ui 0.11.5 → 0.11.7

package/dist/card/Card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FocusEventHandler } from 'svelte/elements'
 	import type { CardProps } from './types.ts'
 
 	let {
@@ -13,8 +12,6 @@
 		supportingText,
 		action,
 		children,
-		onblur,
-		onfocus,
 		...attributes
 	}: CardProps = $props()
 
@@ -71,12 +68,6 @@
 		{...attributes}
 		bind:this={element}
 		aria-disabled={disabled}
-		onfocus={(event) => {
-			;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
-		}}
-		onblur={(event) => {
-			;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
-		}}
 		class={[
 			'np-card-container',
 			`np-card-${variant}`,
@@ -91,14 +82,7 @@
 		aria-disabled={disabled}
 		{...attributes}
 		bind:this={element}
-		onfocus={(event) => {
-			focused = true
-			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
-		}}
+		bind:focused
 		{disabled}
 		class={[
 			'np-card-container',
@@ -116,14 +100,7 @@
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
 		role="link"
-		onfocus={(event) => {
-			focused = true
-			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
-		}}
+		bind:focused
 		class={[
 			'np-card-container',
 			`np-card-${variant}`,

package/dist/chip/FilterChip.svelte

@@ -15,12 +15,13 @@
 		element = $bindable(),
 		ariaLabelRemove = 'Remove',
 		remove,
-		select,
-		deselect,
+		name,
+		value,
+		group = $bindable(),
 		...attributes
 	}: FilterChipProps = $props()
 
-	let chipBtn: HTMLButtonElement | undefined = $state()
+	let chipLabel: HTMLLabelElement | undefined = $state()
 </script>
 
 <div
@@ -36,20 +37,7 @@
 		attributes.class,
 	]}
 >
-	<button
-		bind:this={chipBtn}
-		class="np-filter-chip-btn"
-		{disabled}
-		onclick={() => {
-			if (element === undefined) return
-			if (selected) {
-				deselect?.(element)
-			} else {
-				select?.(element)
-			}
-			selected = !selected
-		}}
-	>
+	<label bind:this={chipLabel} class="np-filter-chip-label">
 		{#if icon && !selected}
 			<div class="np-chip-icon">
 				{@render icon()}
@@ -59,9 +47,14 @@
 			<CheckIcon width={18} height={18} />
 		{/if}
 		<div class="np-chip-label">{label}</div>
-	</button>
+		{#if group !== undefined}
+			<input type="checkbox" bind:checked={selected} {value} {name} {disabled} bind:group />
+		{:else}
+			<input type="checkbox" bind:checked={selected} {value} {name} {disabled} />
+		{/if}
+	</label>
 	{#if !disabled}
-		<Ripple forElement={chipBtn} />
+		<Ripple forElement={chipLabel} />
 	{/if}
 	{#if removable}
 		<IconButton
@@ -92,16 +85,15 @@
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
 	}
-	.np-filter-chip-btn {
-		box-sizing: border-box;
-		font-family: inherit;
-		background-color: transparent;
-		border-width: 0;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	.np-filter-chip-label input {
+		opacity: 0;
+		position: absolute;
+		pointer-events: none;
+	}
+	.np-filter-chip-label {
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
-		padding: 0;
 		height: 2rem;
 		color: var(--np-color-on-surface-variant);
 		fill: currentColor;
@@ -114,13 +106,13 @@
 		color: var(--np-color-primary);
 		display: flex;
 	}
-	.np-filter-chip-icon .np-filter-chip-btn {
+	.np-filter-chip-icon .np-filter-chip-label {
 		padding-left: 0.5rem;
 	}
 	.np-filter-chip-removable {
 		padding-right: 2px;
 	}
-	.np-filter-chip-removable .np-filter-chip-btn {
+	.np-filter-chip-removable .np-filter-chip-label {
 		padding-right: 2px;
 	}
 	.np-chip-label {
@@ -152,13 +144,13 @@
 	.np-filter-chip-selected {
 		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
 	}
-	.np-filter-chip-selected .np-filter-chip-btn {
+	.np-filter-chip-selected .np-filter-chip-label {
 		color: var(--np-color-on-secondary-container);
 	}
-	.np-filter-chip-btn:focus-visible {
+	.np-filter-chip-label:focus-visible {
 		outline-width: 0;
 	}
-	.np-filter-chip:has(.np-filter-chip-btn:focus-visible) {
+	.np-filter-chip:has(input:focus-visible) {
 		outline-style: solid;
 		outline-color: var(--np-color-primary);
 		outline-width: 3px;
@@ -177,7 +169,7 @@
 		}
 	}
 
-	.np-filter-chip-disabled .np-filter-chip-btn {
+	.np-filter-chip-disabled .np-filter-chip-label {
 		cursor: default;
 		color: var(--np-color-on-surface);
 		opacity: 0.38;

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

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

package/dist/chip/types.d.ts

@@ -9,7 +9,8 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     icon?: Snippet;
     ariaLabelRemove?: string;
     element?: HTMLDivElement;
+    name?: string;
+    value?: string;
+    group?: string | number | null;
     remove?: (chip: HTMLDivElement) => void;
-    select?: (chip: HTMLDivElement) => void;
-    deselect?: (chip: HTMLDivElement) => void;
 }

package/dist/list/Item.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FocusEventHandler } from 'svelte/elements'
 	import type { ItemProps } from './types.ts'
 
 	let {
@@ -9,8 +8,6 @@
 		end,
 		children,
 		supportingText,
-		onblur,
-		onfocus,
 		disabled = false,
 		...attributes
 	}: ItemProps = $props()
@@ -43,9 +40,6 @@
 			{@render end()}
 		</div>
 	{/if}
-	{#if !disabled && !(attributes.variant === 'text' || attributes.variant === undefined)}
-		<Ripple forceHover={focused} />
-	{/if}
 {/snippet}
 
 {#if disabled}
@@ -53,47 +47,29 @@
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'text' || attributes.variant === undefined}
-	<div
-		{...attributes}
-		onfocus={(event) => {
-			;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
-		}}
-		onblur={(event) => {
-			;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
-		}}
-		class={['np-item', selected && 'selected', attributes.class]}
-	>
+	<div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'button'}
 	<button
 		{...attributes}
-		onfocus={(event) => {
-			focused = true
-			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
-		}}
+		bind:focused
 		class={['np-item', selected && 'selected', attributes.class]}
 		bind:this={element}
-		>{@render content()}
+	>
+		{@render content()}
+		<Ripple forceHover={focused} />
 	</button>
 {:else if attributes.variant === 'link'}
 	<a
 		{...attributes}
-		onfocus={(event) => {
-			focused = true
-			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
-		}}
-		onblur={(event) => {
-			focused = false
-			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
-		}}
+		bind:focused
 		class={['np-item', selected && 'selected', attributes.class]}
-		bind:this={element}>{@render content()}</a
+		bind:this={element}
 	>
+		{@render content()}
+		<Ripple forceHover={focused} />
+	</a>
 {/if}
 
 <style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -49,7 +49,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.16.0"
+    "svelte": "^5.19.4"
   },
   "devDependencies": {
     "@material/material-color-utilities": "^0.3.0",
@@ -66,7 +66,7 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "svelte": "^5.19.4",
+    "svelte": "^5.19.5",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",