noph-ui 0.2.9 → 0.3.2

package/dist/button/Button.svelte

@@ -264,6 +264,7 @@
 	.button-icon {
 		display: inline-flex;
 		align-items: center;
+		pointer-events: none;
 	}
 
 	:global(.np-button .button-icon) {

package/dist/button/IconButton.svelte

@@ -59,6 +59,7 @@
 {#snippet content()}
 	{#if !disabled}
 		<Ripple forElement={touchEl} />
+		<span class="np-touch" bind:this={touchEl}></span>
 	{/if}
 	{#if selectedIcon && selectedState}
 		{@render selectedIcon()}
@@ -84,7 +85,6 @@
 			: ''} {attributes.class}"
 	>
 		{@render content()}
-		<span class="np-touch" bind:this={touchEl}></span>
 	</button>
 {:else if isLink(attributes)}
 	<a

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/menu/Menu.svelte

@@ -5,7 +5,7 @@
 
 	interface MenuProps extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet
-		anchor: HTMLElement | undefined
+		anchor?: HTMLElement | undefined
 	}
 
 	let { anchor, children, ...attributes }: MenuProps = $props()
@@ -17,8 +17,7 @@
 	let scrollY = $state(0)
 	let scrollX = $state(0)
 	let popoverElement: HTMLDivElement | undefined = $state()
-	let anchorId = `--${generateUUIDv4()}`
-
+	let anchorId = anchor?.style.getPropertyValue('anchor-name')
 	const refreshValues = () => {
 		if (popoverElement && anchor && !('anchorName' in document.documentElement.style)) {
 			const anchorRect = anchor.getBoundingClientRect()
@@ -52,9 +51,10 @@
 					},
 					{ passive: true },
 				)
-			} else {
-				popoverElement.style.setProperty('position-anchor', anchorId)
-				anchor.style.setProperty('anchor-name', anchorId)
+			} else if (!anchorId) {
+				const generatedId = `--${generateUUIDv4()}`
+				popoverElement.style.setProperty('position-anchor', generatedId)
+				anchor.style.setProperty('anchor-name', generatedId)
 			}
 		}
 	})

package/dist/menu/Menu.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare const Menu: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
     children: Snippet;
-    anchor: HTMLElement | undefined;
+    anchor?: HTMLElement | undefined;
 }, {}, "">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/radio/Radio.svelte

@@ -1,30 +1,118 @@
 <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:focus-visible) .np-container {
+		outline-style: solid;
+		outline-color: var(--np-color-primary);
+		outline-width: 3px;
+		outline-offset: 12px;
+		border-radius: 50%;
+		animation: focusAnimation 0.3s ease forwards;
+	}
+	@keyframes focusAnimation {
+		0% {
+			outline-width: 3px;
+		}
+		50% {
+			outline-width: 6px;
+		}
+		100% {
+			outline-width: 3px;
+		}
+	}
+
+	.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/ripple/Ripple.svelte

@@ -345,6 +345,7 @@
 		}
 	}
 
+	.np-ripple-surface:hover:before,
 	.np-ripple-hovered::before {
 		background-color: var(--np-ripple-hover-color, var(--np-color-on-surface));
 		opacity: var(--np-ripple-hover-opacity, 0.08);

package/dist/text-field/TextField.svelte

@@ -12,6 +12,7 @@
 		start,
 		end,
 		label,
+		style,
 		noAsterisk = false,
 		variant = 'filled',
 		placeholder = ' ',
@@ -57,11 +58,11 @@
 <!-- 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) {

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,90 +1,89 @@
 {
-	"name": "noph-ui",
-	"version": "0.2.9",
-	"license": "MIT",
-	"homepage": "https://noph.dev",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/cnolte/noph-ui"
-	},
-	"author": {
-		"name": "cnolte"
-	},
-	"keywords": [
-		"svelte",
-		"svelte 5",
-		"material",
-		"material 3",
-		"material you",
-		"m3",
-		"ui",
-		"frontend",
-		"design-system",
-		"ui-library",
-		"theming"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./icons": {
-			"types": "./dist/icons/index.d.ts",
-			"svelte": "./dist/icons/index.js"
-		},
-		"./defaultTheme": {
-			"import": "./dist/themes/defaultTheme.css",
-			"require": "./dist/themes/defaultTheme.css"
-		}
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@material/material-color-utilities": "^0.3.0",
-		"@playwright/test": "^1.49.1",
-		"@sveltejs/adapter-vercel": "^5.5.2",
-		"@sveltejs/kit": "^2.11.1",
-		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
-		"@types/eslint": "^9.6.1",
-		"eslint": "^9.17.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.13.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"publint": "^0.2.12",
-		"svelte": "^5.14.0",
-		"svelte-check": "^4.1.1",
-		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.0",
-		"vite": "^6.0.3",
-		"vitest": "^2.1.8"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
-}
+  "name": "noph-ui",
+  "version": "0.3.2",
+  "license": "MIT",
+  "homepage": "https://noph.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cnolte/noph-ui"
+  },
+  "author": {
+    "name": "cnolte"
+  },
+  "keywords": [
+    "svelte",
+    "svelte 5",
+    "material",
+    "material 3",
+    "material you",
+    "m3",
+    "ui",
+    "frontend",
+    "design-system",
+    "ui-library",
+    "theming"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "svelte": "./dist/icons/index.js"
+    },
+    "./defaultTheme": {
+      "import": "./dist/themes/defaultTheme.css",
+      "require": "./dist/themes/defaultTheme.css"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-vercel": "^5.5.2",
+    "@sveltejs/kit": "^2.12.1",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.2",
+    "@types/eslint": "^9.6.1",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.2",
+    "publint": "^0.2.12",
+    "svelte": "^5.14.1",
+    "svelte-check": "^4.1.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  }
+}