noph-ui 0.9.13 → 0.9.15

package/dist/button/SegmentedButton.svelte

@@ -8,6 +8,7 @@
 		options,
 		multiSelect = false,
 		element = $bindable(),
+		group = $bindable(),
 		...attributes
 	}: SegmentedButtonProps = $props()
 	let hoverState = $state(-1)
@@ -43,19 +44,37 @@
 			{#if !option.disabled}
 				<Ripple forceHover={i === hoverState} />
 			{/if}
-			<input
-				type={multiSelect ? 'checkbox' : 'radio'}
-				onclick={option.onclick}
-				onfocus={(event) => {
-					if (event) hoverState = i
-				}}
-				onblur={() => (hoverState = -1)}
-				{name}
-				aria-label={typeof option.label === 'function' ? `${name}-${i}` : option.label}
-				value={option.label}
-				disabled={option.disabled}
-				checked={option.selected}
-			/>
+			{#if multiSelect}
+				<input
+					type="checkbox"
+					onclick={option.onclick}
+					bind:group
+					onfocus={(event) => {
+						if (event) hoverState = i
+					}}
+					onblur={() => (hoverState = -1)}
+					{name}
+					aria-label={typeof option.label === 'function' ? `${name}-${i}` : option.label}
+					value={option.label}
+					disabled={option.disabled}
+					checked={option.selected}
+				/>
+			{:else}
+				<input
+					type="radio"
+					onclick={option.onclick}
+					bind:group
+					onfocus={(event) => {
+						if (event) hoverState = i
+					}}
+					onblur={() => (hoverState = -1)}
+					{name}
+					aria-label={typeof option.label === 'function' ? `${name}-${i}` : option.label}
+					value={option.label}
+					disabled={option.disabled}
+					checked={option.selected}
+				/>
+			{/if}
 		</label>
 	{/each}
 </div>

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

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

package/dist/button/types.d.ts

@@ -45,6 +45,7 @@ export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
         icon?: Snippet;
         onclick?: (event: Event) => void;
     }[];
+    group?: string | number;
     element?: HTMLElement;
 }
 export {};

package/dist/checkbox/Checkbox.svelte

@@ -6,6 +6,7 @@
 		indeterminate = $bindable(),
 		checked = $bindable(),
 		element = $bindable(),
+		group = $bindable(),
 		style,
 		...attributes
 	}: CheckboxProps = $props()
@@ -20,6 +21,7 @@
 				type="checkbox"
 				bind:indeterminate
 				bind:checked
+				bind:group
 				aria-checked={indeterminate ? 'mixed' : undefined}
 			/>
 			{#if !attributes.disabled}

package/dist/checkbox/Checkbox.svelte.d.ts

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

package/dist/checkbox/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
+    group?: string | number;
 }

package/dist/menu/Menu.svelte

@@ -127,5 +127,6 @@
 	}
 	@position-try --np-menu-position-fallback {
 		position-area: var(--np-menu-position-area-fallback, top center);
+		position-area: var(--np-menu-position-area-fallback, top center);
 	}
 </style>

package/dist/radio/Radio.svelte

@@ -6,6 +6,7 @@
 		checked,
 		defaultChecked,
 		element = $bindable(),
+		group = $bindable(),
 		style,
 		...attributes
 	}: RadioProps = $props()
@@ -14,7 +15,7 @@
 </script>
 
 <label {style} class={['np-host', attributes.class]} bind:this={element}>
-	<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />
+	<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} bind:group />
 	<div class="np-container" aria-hidden="true">
 		{#if !attributes.disabled}
 			<Ripple forElement={touchEl} class="np-radio-ripple" />

package/dist/radio/Radio.svelte.d.ts

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

package/dist/radio/types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface RadioProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
+    group?: string | number;
 }

package/dist/select/Select.svelte

@@ -31,9 +31,7 @@
 	}: SelectProps = $props()
 
 	let errorTextRaw: string = $state(errorText)
-	$effect(() => {
-		errorTextRaw = errorText
-	})
+	let errorRaw = $state(error)
 	let selectElement: HTMLSelectElement | undefined = $state()
 	let menuElement: HTMLDivElement | undefined = $state()
 	let field: HTMLDivElement | undefined = $state()
@@ -43,22 +41,22 @@
 		return options.find((option) => option.value === value)?.label || ''
 	})
 	$effect(() => {
-		if (value !== '') {
-			error = false
+		if (value !== '' && selectElement?.checkValidity()) {
+			errorRaw = error
 			errorTextRaw = errorText
 		}
 	})
 	$effect(() => {
 		if (selectElement) {
 			selectElement.form?.addEventListener('reset', () => {
-				error = false
+				errorRaw = error
 			})
 			selectElement.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
 				}
-				error = true
+				errorRaw = true
 				if (errorText === '') {
 					errorTextRaw = currentTarget.validationMessage
 				}
@@ -66,16 +64,6 @@
 					currentTarget.focus()
 				}
 			})
-
-			selectElement.addEventListener('select', (event) => {
-				const { currentTarget } = event as Event & {
-					currentTarget: HTMLSelectElement
-				}
-				if (currentTarget.checkValidity()) {
-					error = false
-					errorTextRaw = errorText
-				}
-			})
 		}
 	})
 </script>
@@ -100,7 +88,7 @@
 	<div
 		{id}
 		class="field"
-		class:error
+		class:error={errorRaw}
 		class:no-label={!label?.length}
 		class:with-start={start}
 		class:menu-open={menuOpen}
@@ -202,10 +190,10 @@
 				</div>
 			</div>
 		</div>
-		{#if supportingText || (errorTextRaw && error)}
-			<div class="supporting-text" role={error ? 'alert' : undefined}>
+		{#if supportingText || (errorTextRaw && errorRaw)}
+			<div class="supporting-text" role={errorRaw ? 'alert' : undefined}>
 				<span>
-					{error && errorTextRaw ? errorTextRaw : supportingText}
+					{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
 				</span>
 			</div>
 		{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -60,16 +60,16 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.18.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "publint": "^0.3.1",
-    "svelte": "^5.17.3",
-    "svelte-check": "^4.1.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "svelte": "^5.18.0",
+    "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.19.1",
+    "typescript-eslint": "^8.20.0",
     "vite": "^6.0.7",
     "vitest": "^2.1.8"
   },