noph-ui 0.7.6 → 0.7.8

package/README.md

@@ -56,12 +56,12 @@ Beta (No breaking changes expected)
 
 - Buttons
 - Cards
-- Checkbox (Docs missing)
+- Checkbox
 - Divider
 - Icon buttons
 - Lists (Docs missing)
 - Progress indicators
-- Radio (Docs missing)
+- Radio
 - Ripple
 - Segmented buttons
 - Snackbar

package/dist/checkbox/Checkbox.svelte

@@ -5,11 +5,13 @@
 	let {
 		indeterminate = $bindable(),
 		checked = $bindable(),
+		element = $bindable(),
+		style,
 		...attributes
 	}: CheckboxProps = $props()
 </script>
 
-<div class="np-host">
+<div {style} class={['np-host', attributes.class]} bind:this={element}>
 	<div class="np-container">
 		<label class="np-input-wrapper">
 			<input
@@ -130,7 +132,7 @@
 		visibility: hidden;
 	}
 	.np-background {
-		background-color: var(--np-color-primary);
+		background-color: var(--np-checkbox-selected-container-color, var(--np-color-primary));
 	}
 	.np-background,
 	.np-icon {

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

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

package/dist/checkbox/types.d.ts

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

package/dist/radio/Radio.svelte

@@ -2,12 +2,12 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { RadioProps } from './types.ts'
 
-	let { ...attributes }: RadioProps = $props()
+	let { element = $bindable(), style, ...attributes }: RadioProps = $props()
 
 	let touchEl: HTMLSpanElement | undefined = $state()
 </script>
 
-<label class="np-host">
+<label {style} class={['np-host', attributes.class]} bind:this={element}>
 	<input {...attributes} type="radio" class="np-input" />
 	<div class="np-container" aria-hidden="true">
 		{#if !attributes.disabled}
@@ -43,8 +43,8 @@
 		position: relative;
 		display: inline-flex;
 		vertical-align: top;
-		width: 20px;
-		height: 20px;
+		width: var(--np-radio-icon-size, 20px);
+		height: var(--np-radio-icon-size, 20px);
 		cursor: pointer;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		outline: none;

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

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

package/dist/radio/types.d.ts

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

package/dist/snackbar/Snackbar.svelte

@@ -70,21 +70,26 @@
 			>
 		{/if}
 		{#if icon}
-			<IconButton
-				--np-icon-button-icon-color="var(--np-snackbar-text-color, var(--np-color-inverse-on-surface))"
-				--np-icon-button-container-shape="0"
-				--np-icon-button-container-height={buttonHeight}
-				--np-icon-button-container-width="2.5rem"
-				aria-label="Close"
-				onclick={onIconClick}
-			>
-				{@render icon()}</IconButton
-			>
+			<div class="np-snackbar-icon-container">
+				<IconButton
+					--np-icon-button-icon-color="var(--np-snackbar-text-color, var(--np-color-inverse-on-surface))"
+					--np-icon-button-container-shape="0"
+					--np-icon-button-container-height={buttonHeight}
+					--np-icon-button-container-width="2.5rem"
+					aria-label="Close"
+					onclick={onIconClick}
+				>
+					{@render icon()}</IconButton
+				>
+			</div>
 		{/if}
 	</div>
 </div>
 
 <style>
+	.np-snackbar-icon-container {
+		width: 2.75rem;
+	}
 	.np-snackbar-supporting-text {
 		font-weight: 400;
 	}

package/dist/text-field/TextField.svelte

@@ -65,7 +65,7 @@
 		: !label?.length
 			? '--top-space:1rem;--bottom-space:1rem;'
 			: '') + style}
-	class="text-field"
+	class={['text-field', attributes.class]}
 	bind:this={element}
 >
 	<div
@@ -112,11 +112,11 @@
 					<div class="content">
 						{#if attributes.type === 'textarea'}
 							<textarea
+								aria-label={label}
 								{...attributes}
 								bind:value
 								bind:this={textElement}
 								class="input"
-								aria-label={label}
 								{placeholder}
 								rows={attributes.rows || 2}
 							></textarea>
@@ -128,12 +128,12 @@
 									</span>
 								{/if}
 								<input
+									aria-label={label}
 									{...attributes}
 									bind:value
 									bind:this={textElement}
 									class="input"
 									{placeholder}
-									aria-label={label}
 									aria-invalid={error}
 								/>
 								{#if suffixText}

package/dist/text-field/types.d.ts

@@ -13,10 +13,10 @@ interface FieldProps {
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
 }
-export interface InputFieldProps extends Omit<HTMLInputAttributes, 'class'>, FieldProps {
+export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
 }
-export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'>, FieldProps {
+export interface TextAreaFieldProps extends HTMLTextareaAttributes, FieldProps {
     type: 'textarea';
 }
 export type TextFieldProps = InputFieldProps | TextAreaFieldProps;

package/package.json

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