noph-ui 0.9.15 → 0.9.16

package/dist/button/SegmentedButton.svelte

@@ -44,26 +44,42 @@
 			{#if !option.disabled}
 				<Ripple forceHover={i === hoverState} />
 			{/if}
-			{#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}
-				/>
+			{#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="radio"
+					type={multiSelect ? 'checkbox' : 'radio'}
 					onclick={option.onclick}
-					bind:group
 					onfocus={(event) => {
 						if (event) hoverState = i
 					}}

package/dist/button/types.d.ts

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

package/dist/checkbox/Checkbox.svelte

@@ -15,15 +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
-				bind:group
-				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/types.d.ts

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

package/dist/radio/Radio.svelte

@@ -15,6 +15,11 @@
 </script>
 
 <label {style} class={['np-host', attributes.class]} bind:this={element}>
+	{#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}

package/dist/radio/types.d.ts

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

package/package.json

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