noph-ui 0.11.2 → 0.11.4

package/dist/card/Card.svelte

@@ -22,6 +22,7 @@
 
 	$effect(() => {
 		if (disabled && element) {
+			// eslint-disable-next-line no-undef
 			const formElements: NodeListOf<
 				HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
 			> = element.querySelectorAll('input, button, select, textarea')

package/dist/chip/ChipSet.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	let { children }: { children?: Snippet } = $props()
+</script>
+
+{#if children}
+	<div class="np-chip-set" role="toolbar">
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.np-chip-set {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const ChipSet: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipSet = ReturnType<typeof ChipSet>;
+export default ChipSet;

package/dist/chip/FilterChip.svelte

@@ -12,7 +12,11 @@
 		disabled = false,
 		label = '',
 		icon,
+		element = $bindable(),
 		ariaLabelRemove = 'Remove',
+		remove,
+		select,
+		deselect,
 		...attributes
 	}: FilterChipProps = $props()
 
@@ -21,6 +25,7 @@
 
 <div
 	{...attributes}
+	bind:this={element}
 	class={[
 		'np-filter-chip',
 		elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
@@ -36,7 +41,12 @@
 		class="np-filter-chip-btn"
 		{disabled}
 		onclick={() => {
-			console.log('click')
+			if (element === undefined) return
+			if (selected) {
+				deselect?.(element)
+			} else {
+				select?.(element)
+			}
 			selected = !selected
 		}}
 	>
@@ -58,8 +68,11 @@
 			--np-icon-button-container-width="1.75rem"
 			--np-icon-button-icon-size="1.125rem"
 			aria-label={ariaLabelRemove}
-			onclick={(event: Event) => {
-				event.stopPropagation()
+			onclick={() => {
+				if (element === undefined) {
+					return
+				}
+				remove?.(element)
 			}}
 		>
 			<CloseIcon />

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

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

package/dist/chip/index.d.ts

@@ -1 +1,2 @@
 export { default as FilterChip } from './FilterChip.svelte';
+export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/index.js

@@ -1 +1,2 @@
 export { default as FilterChip } from './FilterChip.svelte';
+export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/types.d.ts

@@ -8,4 +8,8 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     icon?: Snippet;
     ariaLabelRemove?: string;
+    element?: HTMLDivElement;
+    remove?: (chip: HTMLDivElement) => void;
+    select?: (chip: HTMLDivElement) => void;
+    deselect?: (chip: HTMLDivElement) => void;
 }

package/dist/icons/Icon.svelte

@@ -47,6 +47,6 @@
 	</style>
 </svelte:head>
 
-<span {...attributes} class={['np-icon', attributes.class]} bind:this={element}
+<span {...attributes} class={['np-icon', 'notranslate', attributes.class]} bind:this={element}
 	>{@render children()}</span
 >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.11.2",
+  "version": "0.11.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {