noph-ui 0.2.7 → 0.3.1

package/dist/checkbox/Checkbox.svelte

@@ -1,43 +1,32 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { HTMLInputAttributes } from 'svelte/elements'
+	import type { CheckboxProps } from './types.ts'
 
 	let {
 		indeterminate = $bindable(),
 		checked = $bindable(),
 		...attributes
-	}: HTMLInputAttributes = $props()
-	let selected = $derived(checked || indeterminate)
+	}: CheckboxProps = $props()
 </script>
 
 <div class="np-host">
-	<div
-		class:selected
-		class="np-container"
-		class:checked
-		class:unselected={!selected}
-		class:prev-checked={!checked}
-		class:prev-unselected={selected}
-		class:indeterminate
-	>
+	<div class="np-container">
 		<label class="np-input-wrapper">
 			<input
-				{...attributes}
 				class="np-input"
 				type="checkbox"
-				{indeterminate}
+				bind:indeterminate
 				bind:checked
 				aria-checked={indeterminate ? 'mixed' : undefined}
-				onclick={() => {
-					indeterminate = false
-				}}
+				{...attributes}
 			/>
-			<Ripple />
+			{#if !attributes.disabled}
+				<Ripple />
+			{/if}
 		</label>
 
 		<div class="np-outline"></div>
 		<div class="np-background"></div>
-		{#if !attributes.disabled}{/if}
 		<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
 			<rect class="mark short" />
 			<rect class="mark long" />
@@ -60,6 +49,9 @@
 		cursor: pointer;
 		margin: max(0px, (48px - 18px)/2);
 	}
+	.np-host:has(input:disabled) {
+		cursor: default;
+	}
 	.np-container {
 		border-radius: inherit;
 		display: flex;
@@ -114,6 +106,12 @@
 	.np-background {
 		border-radius: inherit;
 	}
+	.np-outline {
+		border-color: var(--np-checkbox-outline-color, var(--np-color-on-surface-variant));
+		border-style: solid;
+		border-width: 2px;
+		box-sizing: border-box;
+	}
 	:where(:hover) .np-outline {
 		border-color: var(--np-color-on-surface);
 		border-width: 2px;
@@ -122,11 +120,14 @@
 		border-color: var(--np-color-on-surface);
 		border-width: 2px;
 	}
-	.np-outline {
-		border-color: var(--np-checkbox-outline-color, var(--np-color-on-surface-variant));
-		border-style: solid;
+	.np-container:has(input:disabled) .np-outline {
+		border-color: var(--np-color-on-surface);
 		border-width: 2px;
-		box-sizing: border-box;
+		opacity: 0.38;
+	}
+	.np-container:has(input:disabled:checked) .np-outline,
+	.np-container:has(input:disabled:indeterminate) .np-outline {
+		visibility: hidden;
 	}
 	.np-background {
 		background-color: var(--np-color-primary);
@@ -139,29 +140,42 @@
 		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15), linear;
 		transform: scale(0.6);
 	}
-	:where(.selected) :is(.np-background, .np-icon) {
+	.np-container:has(input:indeterminate) .np-background,
+	.np-container:has(input:checked) .np-background,
+	.np-container:has(input:indeterminate) .np-icon,
+	.np-container:has(input:checked) .np-icon {
 		opacity: 1;
 		transition-duration: 350ms, 50ms;
 		transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1), linear;
 		transform: scale(1);
 	}
+	.np-container:has(input:disabled:checked) .np-background,
+	.np-container:has(input:disabled:indeterminate) .np-background {
+		background: var(--np-color-on-surface);
+		opacity: 0.38;
+	}
 	.np-icon {
 		fill: var(--np-checkbox-selected-icon-color, var(--np-color-on-primary));
 		height: 18px;
 		width: 18px;
 	}
-	.checked .mark.short,
-	.prev-checked.unselected .mark.short {
+	.np-container:has(input:disabled) .np-icon {
+		fill: var(--np-color-surface);
+	}
+	.np-container:has(input:checked) .mark.short,
+	.np-container:has(input:not(:checked):not(:indeterminate)) .mark.short {
 		height: 5.6568542495px;
 	}
-	.prev-unselected .mark {
+	.np-container:has(input:indeterminate) .mark,
+	.np-container:has(input:checked) .mark {
 		transition-property: none;
 	}
-	.checked .mark,
-	.prev-checked.unselected .mark {
+	.np-container:has(input:checked) .mark,
+	.np-container:has(input:not(:checked):not(:indeterminate)) .mark {
 		transform: scaleY(-1) translate(7px, -14px) rotate(45deg);
 	}
-	.selected .mark {
+	.np-container:has(input:indeterminate) .mark,
+	.np-container:has(input:checked) .mark {
 		animation-duration: 350ms;
 		animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
 		transition-duration: 350ms;
@@ -178,11 +192,11 @@
 		transition-duration: 150ms;
 		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
 	}
-	.prev-unselected.checked .mark.long {
+	.np-container:has(input:checked) .mark.long {
 		animation-name: prev-unselected-to-checked;
 	}
-	.checked .mark.long,
-	.prev-checked.unselected .mark.long {
+	.np-container:has(input:checked) .mark.long,
+	.np-container:has(input:not(:checked):not(:indeterminate)) .mark.long {
 		width: 11.313708499px;
 	}
 	.mark.long {
@@ -190,7 +204,7 @@
 		transition-property: transform, width;
 		width: 10px;
 	}
-	.indeterminate .mark {
+	.np-container:has(input:indeterminate) .mark {
 		transform: scaleY(-1) translate(4px, -10px) rotate(0deg);
 	}
 	@keyframes prev-unselected-to-checked {

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

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

package/dist/checkbox/index.d.ts

@@ -1 +1,2 @@
 export { default as Checkbox } from './Checkbox.svelte';
+export type { CheckboxProps } from './types.ts';

package/dist/checkbox/types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type CheckboxProps = Omit<HTMLInputAttributes, 'class' | 'type'>;

package/dist/checkbox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/icons/Icon.svelte

@@ -21,11 +21,10 @@
 			-webkit-font-smoothing: antialiased;
 		}
 		.np-icon {
-			font-variation-settings:
-				'FILL' 0,
-				'wght' 400,
-				'GRAD' 0,
-				'opsz' 24;
+			transition-property: font-variation-settings;
+			transition-timing-function: ease-in;
+			transition: font-variation-settings 0.3s;
+			font-variation-settings: var(--np-icon-settings, 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24);
 		}
 		:where(.button-icon) .np-icon {
 			display: inline-flex;

package/dist/radio/Radio.svelte

@@ -1,30 +1,98 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { HTMLInputAttributes } from 'svelte/elements'
-	let { ...attributes }: HTMLInputAttributes = $props()
+	import type { RadioProps } from './types.ts'
 
-	const maskId = '1'
+	let { ...attributes }: RadioProps = $props()
+
+	let touchEl: HTMLSpanElement | undefined = $state()
 </script>
 
-<div class="host">
+<label class="np-host">
+	<input {...attributes} type="radio" class="np-input" />
 	<div class="np-container" aria-hidden="true">
 		{#if !attributes.disabled}
-			<Ripple />
+			<Ripple forElement={touchEl} class="np-radio-ripple" />
 		{/if}
-		<svg class="icon" viewBox="0 0 20 20">
-			<mask id={maskId}>
+		<svg class="np-radio-icon" viewBox="0 0 20 20">
+			<mask id="1">
 				<rect width="100%" height="100%" fill="white" />
 				<circle cx="10" cy="10" r="8" fill="black" />
 			</mask>
-			<circle class="outer circle" cx="10" cy="10" r="10" mask="url(#{maskId})" />
+			<circle class="outer circle" cx="10" cy="10" r="10" mask="url(#1)" />
 			<circle class="inner circle" cx="10" cy="10" r="5" />
 		</svg>
-		<div class="touch-target"></div>
+		<span class="np-touch" bind:this={touchEl}></span>
 	</div>
-</div>
+</label>
 
 <style>
-	.np-container {
+	:global(.np-radio-ripple) {
+		border-radius: 50% !important;
+		height: 40px;
+		inset: unset !important;
+		width: 40px;
+	}
+	.np-input {
+		opacity: 0;
+		inset: 0;
+		position: absolute;
+		cursor: inherit;
+	}
+	.np-host {
+		margin: max(0px, (48px - var(--np-radio-icon-size, 20px))/2);
 		position: relative;
+		display: inline-flex;
+		vertical-align: top;
+		width: 20px;
+		height: 20px;
+		cursor: pointer;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		outline: none;
+	}
+
+	.np-host:has(input:disabled) {
+		cursor: default;
+	}
+
+	.np-container {
+		display: flex;
+		height: 100%;
+		place-content: center;
+		place-items: center;
+		width: 100%;
+	}
+	.np-touch {
+		height: 48px;
+		position: absolute;
+		width: 48px;
+	}
+	.np-radio-icon {
+		fill: var(--np-radio-icon-color, var(--np-color-on-surface-variant));
+		inset: 0px;
+		position: absolute;
+	}
+	.np-host:has(input:checked) .np-radio-icon {
+		fill: var(--np-radio-selected-icon-color, var(--np-color-primary));
+	}
+	.np-host:has(input:disabled) .np-radio-icon {
+		fill: var(--np-color-on-surface);
+		opacity: 0.38;
+	}
+	.inner.circle {
+		opacity: 0;
+		transform-origin: center center;
+		transition: opacity 50ms linear;
+	}
+	.np-host:has(input:checked) .inner.circle {
+		animation: 300ms cubic-bezier(0.05, 0.7, 0.1, 1) 0s 1 normal none running inner-circle-grow;
+		opacity: 1;
+	}
+	@keyframes inner-circle-grow {
+		from {
+			transform: scale(0);
+		}
+		to {
+			transform: scale(1);
+		}
 	}
 </style>

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

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

package/dist/radio/index.d.ts

@@ -1 +1,2 @@
 export { default as Radio } from './Radio.svelte';
+export type { RadioProps } from './types.ts';

package/dist/radio/types.d.ts

@@ -0,0 +1,2 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type RadioProps = Omit<HTMLInputAttributes, 'class' | 'type'>;

package/dist/radio/types.js

@@ -0,0 +1 @@
+export {};

package/dist/text-field/TextField.svelte

@@ -12,11 +12,12 @@
 		start,
 		end,
 		label,
+		style,
 		noAsterisk = false,
 		variant = 'filled',
+		placeholder = ' ',
 		...attributes
 	}: TextFieldProps | TextAreaFieldProps = $props()
-	let focused = $state(false)
 
 	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)
@@ -40,15 +41,6 @@
 					currentTarget.focus()
 				}
 			})
-			contentEl.addEventListener('focus', () => {
-				if (!attributes.disabled) {
-					focused = true
-				}
-			})
-
-			contentEl.addEventListener('blur', () => {
-				focused = false
-			})
 
 			contentEl.addEventListener('change', (event) => {
 				const { currentTarget } = event as Event & {
@@ -61,31 +53,27 @@
 			})
 		}
 	})
-	let emptyValue = $derived(value === undefined || value === null || value === '')
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
-	style={variant === 'outlined'
+	style={(variant === 'outlined'
 		? '--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px'
 		: !label?.length
 			? '--top-space:1rem;--bottom-space:1rem'
-			: ''}
+			: '') + style}
 	class="text-field"
 	onclick={() => {
 		if (attributes.disabled) {
 			return
 		}
-		focused = true
 		contentEl?.focus()
 	}}
 >
 	<div
 		class="field"
-		class:populated={!emptyValue}
 		class:error
-		class:focused
 		class:resizable={attributes.type === 'textarea'}
 		class:no-label={!label?.length}
 		class:with-start={start}
@@ -121,12 +109,7 @@
 				<div class="middle">
 					<div class="label-wrapper">
 						{#if label?.length}
-							<span
-								class="label"
-								class:resting={!focused && emptyValue}
-								class:floating={focused || !emptyValue}
-								>{label}{noAsterisk || !attributes.required ? '' : '*'}
-							</span>
+							<span class="label">{label}{noAsterisk || !attributes.required ? '' : '*'} </span>
 						{/if}
 					</div>
 					<div class="content">
@@ -137,6 +120,7 @@
 								bind:this={contentEl}
 								class="input"
 								aria-label={label}
+								{placeholder}
 								rows={attributes.rows || 2}
 							></textarea>
 						{:else}
@@ -151,6 +135,7 @@
 									bind:value
 									bind:this={contentEl}
 									class="input"
+									{placeholder}
 									aria-label={label}
 									aria-invalid={error}
 								/>
@@ -191,7 +176,8 @@
 		width: 100%;
 		z-index: 1;
 	}
-	.field:has(input:focus-visible) .active-indicator::after {
+	.field:has(input:focus-visible) .active-indicator::after,
+	.field:has(textarea:focus-visible) .active-indicator::after {
 		opacity: 1;
 	}
 	.active-indicator::after {
@@ -356,7 +342,9 @@
 
 	.no-label .content,
 	.field:has(input:focus-visible) .content,
-	.populated .content {
+	.field:has(textarea:focus-visible) .content,
+	.field:has(input:not(:placeholder-shown)) .content,
+	.field:has(textarea:not(:placeholder-shown)) .content {
 		opacity: 1;
 	}
 
@@ -481,22 +469,31 @@
 	.label.np-hidden {
 		opacity: 0;
 	}
-	.label.resting {
+
+	.field:has(input:not(:focus-visible):placeholder-shown) .label,
+	.field:has(textarea:not(:focus-visible):placeholder-shown) .label {
 		position: absolute;
 		top: 1rem;
 		left: 0rem;
 	}
-
-	.label.floating {
+	.field:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.field:has(input:focus-visible) .label,
+	.field:has(input:not(:placeholder-shown)) .label,
+	.field:has(textarea:focus-visible:not(:placeholder-shown)) .label,
+	.field:has(textarea:focus-visible) .label,
+	.field:has(textarea:not(:placeholder-shown)) .label {
 		font-size: 0.75rem;
 		line-height: 1rem;
 		transform-origin: top left;
-	}
-	.label.floating {
 		position: absolute;
 		top: var(--floating-label-top, 0.5rem);
 	}
-	.with-start .label.floating {
+	.with-start:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.with-start:has(input:focus-visible) .label,
+	.with-start:has(input:not(:placeholder-shown)) .label,
+	.with-start:has(textarea:focus-visible:not(:placeholder-shown)) .label,
+	.with-start:has(textarea:focus-visible) .label,
+	.with-start:has(textarea:not(:placeholder-shown)) .label {
 		left: var(--floating-label-left, 0);
 	}
 	.label {
@@ -514,11 +511,13 @@
 		line-height: 1.5rem;
 		width: min-content;
 	}
-	.field:has(input:focus-visible) .label {
+	.field:has(input:focus-visible) .label,
+	.field:has(textarea:focus-visible) .label {
 		color: var(--np-color-primary);
 	}
 	.error .label,
-	.error:has(input:focus-visible) .label {
+	.error:has(input:focus-visible) .label,
+	.error:has(textarea:focus-visible) .label {
 		color: var(--np-color-error);
 	}
 	.disabled .label {
@@ -532,7 +531,8 @@
 		overflow: hidden;
 	}
 	.disabled.no-label .content,
-	.disabled.populated .content {
+	.disabled:has(input:not(:placeholder-shown)) .content,
+	.disabled:has(textarea:not(:placeholder-shown)) .content {
 		opacity: 0.38;
 	}
 	.field,
@@ -598,14 +598,19 @@
 		border-bottom-style: solid;
 		border-top-style: solid;
 	}
-	.outline-notch::before,
 	.outline-notch::after {
 		border-bottom-style: solid;
 		border-top-style: none;
 	}
-	.field:not(:has(input:focus-visible)):not(.populated) .outline-notch::before {
+	.outline-notch::before {
+		border-bottom-style: solid;
 		border-top-style: solid;
 	}
+	.field:has(input:focus-visible) .outline-notch::before,
+	.field:has(textarea:focus-visible) .outline-notch::before,
+	.field:has(input:not(:placeholder-shown)) .outline-notch::before {
+		border-top-style: none;
+	}
 
 	.outline-notch::before,
 	.outline-notch::after {
@@ -643,7 +648,10 @@
 	}
 	.field:has(input:focus-visible) .outline-start::after,
 	.field:has(input:focus-visible) .outline-end::after,
-	.field:has(input:focus-visible) .outline-notch::after {
+	.field:has(input:focus-visible) .outline-notch::after,
+	.field:has(textarea:focus-visible) .outline-start::after,
+	.field:has(textarea:focus-visible) .outline-end::after,
+	.field:has(textarea:focus-visible) .outline-notch::after {
 		opacity: 1;
 	}
 	.np-outline {
@@ -657,12 +665,14 @@
 		z-index: 1;
 	}
 
-	.field:has(input:focus-visible) .np-outline {
+	.field:has(input:focus-visible) .np-outline,
+	.field:has(textarea:focus-visible) .np-outline {
 		border-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
 	.error .np-outline,
-	.error:has(input:focus-visible) .np-outline {
+	.error:has(input:focus-visible) .np-outline,
+	.error:has(textarea:focus-visible) .np-outline {
 		border-color: var(--np-color-error);
 	}
 	.disabled .np-outline {

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

@@ -1 +1,2 @@
 export { default as TextField } from './TextField.svelte';
+export type { TextAreaFieldProps, TextFieldProps } from './types.ts';

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
-export interface TextFieldProps extends HTMLInputAttributes {
+export interface TextFieldProps extends Omit<HTMLInputAttributes, 'class'> {
     label?: string;
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
     supportingText?: string;
@@ -13,7 +13,7 @@ export interface TextFieldProps extends HTMLInputAttributes {
     end?: Snippet;
     noAsterisk?: boolean;
 }
-export interface TextAreaFieldProps extends HTMLTextareaAttributes {
+export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'> {
     label?: string;
     type: 'textarea';
     supportingText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.2.7",
+	"version": "0.3.1",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -66,7 +66,7 @@
 		"@material/material-color-utilities": "^0.3.0",
 		"@playwright/test": "^1.49.1",
 		"@sveltejs/adapter-vercel": "^5.5.2",
-		"@sveltejs/kit": "^2.11.1",
+		"@sveltejs/kit": "^2.12.1",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@types/eslint": "^9.6.1",
@@ -77,10 +77,10 @@
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
-		"svelte": "^5.14.0",
+		"svelte": "^5.14.1",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.0",
+		"typescript-eslint": "^8.18.1",
 		"vite": "^6.0.3",
 		"vitest": "^2.1.8"
 	},