noph-ui 0.9.14 → 0.9.16

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,53 @@
 			{#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 group}
+				{#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}
+			{:else}
+				<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}
 		</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 | null;
     element?: HTMLElement;
 }
 export {};

package/dist/checkbox/Checkbox.svelte

@@ -6,6 +6,7 @@
 		indeterminate = $bindable(),
 		checked = $bindable(),
 		element = $bindable(),
+		group = $bindable(),
 		style,
 		...attributes
 	}: CheckboxProps = $props()
@@ -14,14 +15,26 @@
 <div {style} class={['np-host', attributes.class]} bind:this={element}>
 	<div class="np-container">
 		<label class="np-input-wrapper">
-			<input
-				{...attributes}
-				class="np-input"
-				type="checkbox"
-				bind:indeterminate
-				bind:checked
-				aria-checked={indeterminate ? 'mixed' : undefined}
-			/>
+			{#if group}
+				<input
+					{...attributes}
+					class="np-input"
+					type="checkbox"
+					bind:indeterminate
+					bind:checked
+					bind:group
+					aria-checked={indeterminate ? 'mixed' : undefined}
+				/>
+			{:else}
+				<input
+					{...attributes}
+					class="np-input"
+					type="checkbox"
+					bind:indeterminate
+					bind:checked
+					aria-checked={indeterminate ? 'mixed' : undefined}
+				/>
+			{/if}
 			{#if !attributes.disabled}
 				<Ripple />
 			{/if}

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 | null;
 }

package/dist/radio/Radio.svelte

@@ -6,6 +6,7 @@
 		checked,
 		defaultChecked,
 		element = $bindable(),
+		group = $bindable(),
 		style,
 		...attributes
 	}: RadioProps = $props()
@@ -14,7 +15,12 @@
 </script>
 
 <label {style} class={['np-host', attributes.class]} bind:this={element}>
-	<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />
+	{#if group}
+		<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} bind:group />
+	{:else}
+		<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />
+	{/if}
+	<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 | null;
 }

package/package.json

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