noph-ui 0.16.3 → 0.16.4

package/dist/chip/ChipSet.svelte

@@ -5,7 +5,7 @@
 </script>
 
 {#if children}
-	<div class={['np-chip-set', attributes.class]} role="toolbar">
+	<div class={['np-chip-set', attributes.class]} style={attributes.style} role="toolbar">
 		{@render children()}
 	</div>
 {/if}
@@ -14,9 +14,7 @@
 	.np-chip-set {
 		display: flex;
 		flex-wrap: wrap;
-		padding-top: 2px;
-		padding-bottom: 2px;
-		padding-right: 2px;
 		gap: 0.5rem;
+		align-items: center;
 	}
 </style>

package/dist/chip/FilterChip.svelte

@@ -148,6 +148,10 @@
 		color: var(--np-color-primary);
 		display: flex;
 	}
+
+	.np-filter-chip-disabled .np-chip-icon {
+		color: var(--np-color-on-surface);
+	}
 	.np-filter-chip:has(input:checked) .np-filter-chip-label,
 	.np-filter-chip-icon .np-filter-chip-label {
 		padding-left: 0.5rem;
@@ -172,7 +176,6 @@
 		inset: 0;
 		border-radius: inherit;
 		pointer-events: none;
-		background-color: var(--np-color-surface-container-low);
 	}
 	.np-filter-chip-default::before {
 		border-width: 1px;
@@ -184,9 +187,11 @@
 		background-color: var(--np-color-secondary-container);
 	}
 	.np-filter-chip-elevated {
-		border-width: 0;
 		box-shadow: var(--np-elevation-1);
 	}
+	.np-filter-chip-elevated::before {
+		background-color: var(--np-color-surface-container-low);
+	}
 	.np-filter-chip:has(input:checked) {
 		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
 	}
@@ -217,7 +222,7 @@
 
 	.np-filter-chip-disabled .np-filter-chip-label {
 		cursor: default;
-		color: var(--np-color-on-surface);
+		color: var(--np-color-on-surface) !important;
 		opacity: 0.38;
 	}
 	.np-filter-chip-disabled.np-filter-chip-elevated {
@@ -238,7 +243,7 @@
 		opacity: 0.12;
 	}
 	.np-filter-chip-disabled::before {
-		background-color: var(--np-color-on-surface);
+		background-color: var(--np-color-on-surface) !important;
 		opacity: 0.12;
 		border-width: 0;
 	}

package/dist/chip/InputChip.svelte

@@ -14,64 +14,35 @@
 		onremove,
 		name,
 		value,
-		group = $bindable(),
-		defaultSelected,
 		...attributes
 	}: InputChipProps = $props()
 
-	let chipLabel: HTMLLabelElement | undefined = $state()
-
-	$effect(() => {
-		if (group && value) {
-			selected = group.includes(value)
-		}
-	})
-
-	$effect(() => {
-		if (value && group) {
-			const index = group.indexOf(value)
-			if (selected) {
-				if (index < 0) {
-					group?.push(value)
-					group = group
-				}
-			} else {
-				if (index >= 0) {
-					group.splice(index, 1)
-					group = group
-				}
-			}
-		}
-	})
+	let chipLabel: HTMLDivElement | undefined = $state()
 </script>
 
 <div
 	{...attributes}
 	bind:this={element}
+	tabindex={disabled ? -1 : 0}
+	aria-disabled={disabled}
+	role="button"
 	class={[
-		'np-filter-chip',
-		icon ? 'np-filter-chip-icon' : '',
-		disabled ? 'np-filter-chip-disabled' : '',
+		'np-input-chip',
+		icon ? 'np-input-chip-icon' : '',
+		disabled ? 'np-input-chip-disabled' : '',
+		selected ? 'np-input-chip-selected' : '',
 		attributes.class,
 	]}
 >
-	<label bind:this={chipLabel} class="np-filter-chip-label">
+	<div bind:this={chipLabel} class={['np-input-chip-label']}>
 		{#if icon}
 			<div class="np-chip-icon">
 				{@render icon()}
 			</div>
 		{/if}
-		<div class="np-chip-label">{label}</div>
-		<input
-			type="checkbox"
-			bind:checked={selected}
-			onclick={(e) => e.preventDefault()}
-			{value}
-			{name}
-			{disabled}
-			defaultChecked={defaultSelected}
-		/>
-	</label>
+		<div class="np-chip-label">{label || value}</div>
+		<input type="hidden" {value} {name} {disabled} />
+	</div>
 	{#if !disabled}
 		<Ripple forElement={chipLabel} />
 	{/if}
@@ -98,22 +69,22 @@
 </div>
 
 <style>
-	.np-filter-chip {
+	.np-input-chip {
 		position: relative;
 		display: inline-flex;
 		align-items: center;
 		user-select: none;
-		border-radius: var(--np-filter-chip-container-shape, var(--np-shape-corner-small));
+		border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
 		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
 		--np-icon-size: 1.125rem;
 		padding-right: 2px;
 	}
-	.np-filter-chip-label input {
+	.np-input-chip-label input {
 		opacity: 0;
 		position: absolute;
 		pointer-events: none;
 	}
-	.np-filter-chip-label {
+	.np-input-chip-label {
 		cursor: pointer;
 		display: inline-flex;
 		align-items: center;
@@ -131,7 +102,7 @@
 		color: var(--np-color-primary);
 		display: flex;
 	}
-	.np-filter-chip-icon .np-filter-chip-label {
+	.np-input-chip-icon .np-input-chip-label {
 		padding-left: 0.5rem;
 	}
 	.np-chip-label {
@@ -143,31 +114,27 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.np-filter-chip::before {
+	.np-input-chip::before {
 		content: '';
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
 		pointer-events: none;
-		background-color: var(--np-color-surface-container-low);
 		border-width: 1px;
 		border-style: solid;
-		border-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
+		border-color: var(--np-input-chip-outline-color, var(--np-color-outline-variant));
 	}
-	.np-filter-chip:has(input:checked)::before {
+	.np-input-chip-selected::before {
 		border-width: 0;
 		background-color: var(--np-color-secondary-container);
 	}
-	.np-filter-chip:has(input:checked) {
+	.np-input-chip-selected {
 		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
 	}
-	.np-filter-chip:has(input:checked) .np-filter-chip-label {
+	.np-input-chip-selected .np-input-chip-label {
 		color: var(--np-color-on-secondary-container);
 	}
-	.np-filter-chip-label:focus-visible {
-		outline-width: 0;
-	}
-	.np-filter-chip:has(input:focus-visible) {
+	.np-input-chip:focus-visible {
 		outline-style: solid;
 		outline-color: var(--np-color-primary);
 		outline-width: 3px;
@@ -186,15 +153,15 @@
 		}
 	}
 
-	.np-filter-chip-disabled .np-filter-chip-label {
+	.np-input-chip-disabled .np-input-chip-label {
 		cursor: default;
 		color: var(--np-color-on-surface);
 		opacity: 0.38;
 	}
-	.np-filter-chip-disabled:has(input:checked)::before {
+	.np-input-chip-disabled.np-input-chip-selected::before {
 		opacity: 0.12;
 	}
-	.np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip::after {
+	.np-input-chip-disabled:not(.np-input-chip-selected).np-input-chip::after {
 		content: '';
 		position: absolute;
 		inset: 0;
@@ -205,9 +172,10 @@
 		border-color: var(--np-color-on-surface);
 		opacity: 0.12;
 	}
-	.np-filter-chip-disabled::before {
-		background-color: var(--np-color-on-surface);
+	.np-input-chip-disabled::before {
 		opacity: 0.12;
-		border-width: 0;
+	}
+	.np-input-chip-selected.np-input-chip-disabled::before {
+		background-color: var(--np-color-on-surface);
 	}
 </style>

package/dist/chip/InputChip.svelte.d.ts

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

package/dist/chip/types.d.ts

@@ -42,8 +42,6 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
     element?: HTMLDivElement;
     name?: string;
     value?: string;
-    group?: (string | number)[] | null;
-    defaultSelected?: boolean | null;
     onremove?: (event: MouseEvent & {
         currentTarget: EventTarget & HTMLButtonElement;
     }) => void;

package/dist/text-field/TextField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { isFirstInvalidControlInForm } from './report-validity.js'
+	import type { FocusEventHandler } from 'svelte/elements'
 	import type { TextFieldProps } from './types.ts'
 
 	let {
@@ -15,11 +16,14 @@
 		style,
 		noAsterisk = false,
 		variant = 'filled',
-		placeholder = ' ',
 		element = $bindable(),
+		populated = false,
 		inputElement = $bindable(),
 		reportValidity = $bindable(),
 		checkValidity = $bindable(),
+		children,
+		onfocus,
+		onblur,
 		...attributes
 	}: TextFieldProps = $props()
 
@@ -27,6 +31,7 @@
 	let errorTextRaw: string = $state(errorText)
 	let focusOnInvalid = $state(true)
 	let doValidity = $state(false)
+	let focused = $state(false)
 
 	reportValidity = () => {
 		if (inputElement) {
@@ -89,14 +94,26 @@
 	})
 </script>
 
-<label
+<div
 	style={(variant === 'outlined'
 		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
 		: !label?.length
-			? '--_label-text-color:var(--np-filled-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem; '
-			: '--_label-text-color:var(--np-filled-text-field-label-text-color); ') + style}
+			? '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline);--top-space:1rem;--bottom-space:1rem; '
+			: '--_label-text-color:var(--np-filled-text-field-label-text-color);--np-input-chip-outline-color:var(--np-color-outline); ' +
+				(children ? '--top-space:2rem;--bottom-space:1rem;' : '')) + style}
 	class={['text-field', attributes.class]}
 	bind:this={element}
+	role="button"
+	tabindex="-1"
+	onfocus={() => {
+		inputElement?.focus()
+	}}
+	onkeydown={(event) => {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault()
+			inputElement?.focus()
+		}
+	}}
 >
 	<div
 		class="field"
@@ -106,6 +123,8 @@
 		class:with-start={start}
 		class:with-end={end}
 		class:disabled={attributes.disabled}
+		class:populated={(value !== '' && value !== undefined && value !== null) || populated}
+		class:focused
 		class:outlined={variant === 'outlined'}
 	>
 		<div class="container-overflow">
@@ -119,7 +138,9 @@
 					<div class="outline-start"></div>
 					{#if label?.length}
 						<div class="label-wrapper">
-							<span class="label">{label}{noAsterisk || !attributes.required ? '' : '*'} </span>
+							<span class="label" aria-disabled={attributes.disabled}
+								>{label}{noAsterisk || !attributes.required ? '' : '*'}
+							</span>
 						</div>
 						<div class="outline-notch">
 							<span class="notch np-hidden" aria-hidden="true"
@@ -140,7 +161,9 @@
 					{#if variant === 'filled'}
 						<div class="label-wrapper">
 							{#if label?.length}
-								<span class="label">{label}{noAsterisk || !attributes.required ? '' : '*'} </span>
+								<span class="label" aria-disabled={attributes.disabled}
+									>{label}{noAsterisk || !attributes.required ? '' : '*'}
+								</span>
 							{/if}
 						</div>
 					{/if}
@@ -149,10 +172,17 @@
 							<textarea
 								aria-label={label}
 								{...attributes}
+								onfocus={(event) => {
+									focused = true
+									;(onfocus as FocusEventHandler<HTMLTextAreaElement>)?.(event)
+								}}
+								onblur={(event) => {
+									focused = false
+									;(onblur as FocusEventHandler<HTMLTextAreaElement>)?.(event)
+								}}
 								bind:value
 								bind:this={inputElement}
 								class="input"
-								{placeholder}
 								rows={attributes.rows || 2}
 							></textarea>
 						{:else}
@@ -162,13 +192,21 @@
 										{prefixText}
 									</span>
 								{/if}
+								{@render children?.()}
 								<input
 									aria-label={label}
 									{...attributes}
 									bind:value
 									bind:this={inputElement}
+									onfocus={(event) => {
+										focused = true
+										;(onfocus as FocusEventHandler<HTMLInputElement>)?.(event)
+									}}
+									onblur={(event) => {
+										focused = false
+										;(onblur as FocusEventHandler<HTMLInputElement>)?.(event)
+									}}
 									class="input"
-									{placeholder}
 									aria-invalid={errorRaw}
 								/>
 								{#if suffixText}
@@ -198,7 +236,7 @@
 			</div>
 		{/if}
 	</div>
-</label>
+</div>
 
 <style>
 	.active-indicator {
@@ -356,6 +394,7 @@
 		top: var(--_focus-outline-width, 3px);
 		inset-inline-start: var(--_focus-outline-width, 0);
 	}
+
 	.content * {
 		all: unset;
 		color: currentColor;
@@ -366,6 +405,17 @@
 		white-space: revert;
 	}
 
+	.input-wrapper {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+	}
+
+	.input-wrapper > * {
+		all: inherit;
+		padding: 0;
+	}
+
 	.middle {
 		align-items: stretch;
 		align-self: baseline;
@@ -376,6 +426,7 @@
 		caret-color: var(--np-color-primary);
 		overflow-x: hidden;
 		text-align: inherit;
+		flex: 1;
 
 		&::placeholder {
 			color: currentColor;
@@ -399,8 +450,7 @@
 	.no-label .content,
 	.field:has(input:focus-visible) .content,
 	.field:has(textarea:focus-visible) .content,
-	.field:has(input:not(:placeholder-shown)) .content,
-	.field:has(textarea:not(:placeholder-shown)) .content {
+	.field.populated .content {
 		opacity: 1;
 	}
 
@@ -429,18 +479,18 @@
 		margin-bottom: var(--bottom-space, 0.5rem);
 	}
 
-	.input-wrapper {
-		display: flex;
+	.content .input-wrapper .input,
+	.content .input-wrapper .prefix,
+	.content .input-wrapper .suffix {
+		margin-top: var(--top-space, 1.5rem);
+		margin-bottom: var(--bottom-space, 0.5rem);
 	}
-
-	.input-wrapper > * {
-		all: inherit;
-		padding: 0;
+	.content .input-wrapper .input {
+		min-width: 100px;
 	}
-
-	.content .input-wrapper {
-		padding-top: var(--top-space, 1.5rem);
-		padding-bottom: var(--bottom-space, 0.5rem);
+	:global(.content .input-wrapper .np-chip-set) {
+		margin-top: calc(var(--top-space, 1.5rem) - 4px);
+		margin-right: 0.5rem;
 	}
 
 	.prefix {
@@ -456,6 +506,8 @@
 		user-select: none;
 		text-wrap: nowrap;
 		width: min-content;
+		display: flex;
+		align-items: center;
 	}
 	.start {
 		color: var(--np-color-on-surface-variant);
@@ -520,21 +572,13 @@
 	.with-end .np-outline .label-wrapper {
 		margin-inline-end: 3.25rem;
 	}
-	.with-start:has(input:focus-visible:not(:placeholder-shown)) .label-wrapper,
-	.with-start:has(input:focus-visible) .label-wrapper,
-	.with-start:has(input:not(:placeholder-shown)) .label-wrapper,
-	.with-start:has(textarea:focus-visible:not(:placeholder-shown)) .label-wrapper,
-	.with-start:has(textarea:focus-visible) .label-wrapper,
-	.with-start:has(textarea:not(:placeholder-shown)) .label-wrapper {
+	.with-start.populated .with-start:has(input:focus-visible) .label-wrapper,
+	.with-start:has(textarea:focus-visible) .label-wrapper {
 		right: -2.25rem;
 	}
 
-	.with-end:has(input:focus-visible:not(:placeholder-shown)) .label-wrapper,
-	.with-end:has(input:focus-visible) .label-wrapper,
-	.with-end:has(input:not(:placeholder-shown)) .label-wrapper,
-	.with-end:has(textarea:focus-visible:not(:placeholder-shown)) .label-wrapper,
-	.with-end:has(textarea:focus-visible) .label-wrapper,
-	.with-end:has(textarea:not(:placeholder-shown)) .label-wrapper {
+	.with-end.populated .with-end:has(input:focus-visible) .label-wrapper,
+	.with-end:has(textarea:focus-visible) .label-wrapper {
 		margin-inline-end: 1rem;
 	}
 	.notch {
@@ -549,30 +593,23 @@
 		opacity: 0;
 	}
 
-	.field:has(input:not(:focus-visible):placeholder-shown) .label,
-	.field:has(textarea:not(:focus-visible):placeholder-shown) .label {
+	.field:not(.populated) .label {
 		position: absolute;
 		top: 1rem;
 		left: 0rem;
 	}
-	.field:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.field.populated .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 {
+	.field:has(textarea:focus-visible) .label {
 		font-size: 0.75rem;
 		line-height: 1rem;
 		transform-origin: top left;
 		position: absolute;
 		top: var(--floating-label-top, 0.5rem);
 	}
-	.with-start:has(input:focus-visible:not(:placeholder-shown)) .label,
+	.with-start.populated .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 {
+	.with-start:has(textarea:focus-visible) .label {
 		left: var(--floating-label-left, 0);
 	}
 	.label {
@@ -610,8 +647,7 @@
 		overflow: hidden;
 	}
 	.disabled.no-label .content,
-	.disabled:has(input:not(:placeholder-shown)) .content,
-	.disabled:has(textarea:not(:placeholder-shown)) .content {
+	.disabled.populated .content {
 		opacity: 0.38;
 	}
 	.field,
@@ -687,8 +723,7 @@
 	}
 	.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,
-	.field:has(textarea:not(:placeholder-shown)) .outline-notch::before {
+	.field.populated .outline-notch::before {
 		border-top-style: none;
 	}
 

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

@@ -13,6 +13,7 @@ interface FieldProps {
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
     inputElement?: HTMLInputElement | HTMLTextAreaElement;
+    populated?: boolean;
     reportValidity?: () => boolean;
     checkValidity?: () => boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -52,27 +52,27 @@
     "svelte": "^5.20.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.23.0",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@sveltejs/adapter-vercel": "^5.6.3",
-    "@sveltejs/kit": "^2.19.0",
+    "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.1.0",
+    "eslint-plugin-svelte": "^3.3.3",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.9",
-    "svelte": "^5.22.6",
+    "svelte": "^5.25.3",
     "svelte-check": "^4.1.5",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "vite": "^6.2.1",
-    "vitest": "^3.0.8"
+    "typescript-eslint": "^8.27.0",
+    "vite": "^6.2.2",
+    "vitest": "^3.0.9"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",