noph-ui 0.2.3 → 0.2.5

package/dist/button/Button.svelte

@@ -266,7 +266,7 @@
 	}
 
 	:global(.np-button .button-icon) {
-		--_icon-size: calc((var(--button-height) - 0.5rem) / 2);
+		--_icon-size: calc((var(--button-height) - 0.375rem) / 2);
 		--_icon-color: inherit;
 	}
 
@@ -275,7 +275,7 @@
 		display: block;
 	}
 	:global(.np-button .button-icon svg) {
-		width: calc((var(--button-height) - 0.5rem) / 2);
-		height: calc((var(--button-height) - 0.5rem) / 2);
+		width: calc((var(--button-height) - 0.375rem) / 2);
+		height: calc((var(--button-height) - 0.375rem) / 2);
 	}
 </style>

package/dist/button/IconButton.svelte

@@ -34,6 +34,7 @@
 
 	let tooltipId = $state(title ? generateUUIDv4() : '')
 	let selectedState = $state(!toggle || selected)
+	let touchEl: HTMLSpanElement | undefined = $state()
 
 	const isButton = (
 		obj: HTMLAnchorAttributes | HTMLButtonAttributes,
@@ -57,7 +58,7 @@
 
 {#snippet content()}
 	{#if !disabled}
-		<Ripple />
+		<Ripple forElement={touchEl} />
 	{/if}
 	{#if selectedIcon && selectedState}
 		{@render selectedIcon()}
@@ -79,10 +80,11 @@
 			: ''}{selectedState
 			? (variant === 'outlined' || variant === 'text') && !toggle
 				? ''
-				: 'selected'
+				: ' selected'
 			: ''} {attributes.class}"
 	>
 		{@render content()}
+		<span class="np-touch" bind:this={touchEl}></span>
 	</button>
 {:else if isLink(attributes)}
 	<a
@@ -93,7 +95,7 @@
 		class="np-icon-button enabled {variant} {selectedState
 			? (variant === 'outlined' || variant === 'text') && !toggle
 				? ''
-				: 'selected'
+				: ' selected'
 			: ''} {attributes.class}"
 	>
 		{@render content()}
@@ -114,7 +116,6 @@
 		display: flex;
 		padding: 0;
 		user-select: none;
-		overflow: hidden;
 		text-decoration: none;
 		align-items: center;
 		justify-content: center;
@@ -264,4 +265,9 @@
 		color: var(--np-color-inverse-on-surface);
 		background-color: var(--np-color-inverse-surface);
 	}
+	.np-touch {
+		position: absolute;
+		height: max(48px, 100%);
+		width: max(48px, 100%);
+	}
 </style>

package/dist/icons/Icon.svelte

@@ -2,41 +2,43 @@
 	let { children } = $props()
 </script>
 
-<span class="material-symbols-outlined">{@render children()}</span>
+<svelte:head>
+	<style>
+		.np-icon {
+			font-family: 'Material Symbols Outlined';
+			font-weight: normal;
+			font-style: normal;
+			font-size: 24px;
+			line-height: 1;
+			letter-spacing: normal;
+			text-transform: none;
+			display: inline-block;
+			white-space: nowrap;
+			word-wrap: normal;
+			direction: ltr;
+			font-feature-settings: 'liga';
+			-webkit-font-feature-settings: 'liga';
+			-webkit-font-smoothing: antialiased;
+		}
+		.np-icon {
+			font-variation-settings:
+				'FILL' 0,
+				'wght' 400,
+				'GRAD' 0,
+				'opsz' 24;
+		}
+		:where(.button-icon) .np-icon {
+			display: inline-flex;
+			fill: currentColor;
+			color: var(--_icon-color);
+			font-size: var(--_icon-size);
+			inline-size: var(--_icon-size);
+			block-size: var(--_icon-size);
+			flex-shrink: 0;
+			writing-mode: horizontal-tb;
+			position: relative;
+		}
+	</style>
+</svelte:head>
 
-<style>
-	:global(.material-symbols-outlined) {
-		font-family: 'Material Symbols Outlined';
-		font-weight: normal;
-		font-style: normal;
-		font-size: 24px;
-		line-height: 1;
-		letter-spacing: normal;
-		text-transform: none;
-		display: inline-block;
-		white-space: nowrap;
-		word-wrap: normal;
-		direction: ltr;
-		font-feature-settings: 'liga';
-		-webkit-font-feature-settings: 'liga';
-		-webkit-font-smoothing: antialiased;
-	}
-	.material-symbols-outlined {
-		font-variation-settings:
-			'FILL' 0,
-			'wght' 400,
-			'GRAD' 0,
-			'opsz' 24;
-	}
-	:global(:where(.button-icon) .material-symbols-outlined) {
-		display: inline-flex;
-		fill: currentColor;
-		color: var(--_icon-color);
-		font-size: var(--_icon-size);
-		inline-size: var(--_icon-size);
-		block-size: var(--_icon-size);
-		flex-shrink: 0;
-		writing-mode: horizontal-tb;
-		position: relative;
-	}
-</style>
+<span class="np-icon">{@render children()}</span>

package/dist/ripple/Ripple.svelte

@@ -4,8 +4,14 @@
 	interface RippleProps extends HTMLAttributes<HTMLDivElement> {
 		forceHover?: boolean
 		element?: HTMLDivElement
+		forElement?: HTMLElement
 	}
-	let { forceHover = false, element = $bindable(), ...attributes }: RippleProps = $props()
+	let {
+		forceHover = false,
+		element = $bindable(),
+		forElement,
+		...attributes
+	}: RippleProps = $props()
 	let pressed = $state(false)
 	let hovered = $state(false)
 
@@ -257,16 +263,32 @@
 		endPressAnimation()
 	}
 
+	const addEvents = (el: HTMLElement) => {
+		el.removeEventListener('click', handleClick)
+		el.removeEventListener('contextmenu', handleContextmenu)
+		el.removeEventListener('pointercancel', handlePointercancel)
+		el.removeEventListener('pointerdown', handlePointerdown)
+		el.removeEventListener('pointerenter', handlePointerenter)
+		el.removeEventListener('pointerleave', handlePointerleave)
+		el.removeEventListener('pointerup', handlePointerup)
+
+		el.addEventListener('click', handleClick)
+		el.addEventListener('contextmenu', handleContextmenu)
+		el.addEventListener('pointercancel', handlePointercancel)
+		el.addEventListener('pointerdown', handlePointerdown)
+		el.addEventListener('pointerenter', handlePointerenter)
+		el.addEventListener('pointerleave', handlePointerleave)
+		el.addEventListener('pointerup', handlePointerup)
+	}
+
 	$effect(() => {
 		const forcedColors = window?.matchMedia('(forced-colors: active)')
-		if (!forcedColors.matches && element) {
-			element.addEventListener('click', handleClick)
-			element.addEventListener('contextmenu', handleContextmenu)
-			element.addEventListener('pointercancel', handlePointercancel)
-			element.addEventListener('pointerdown', handlePointerdown)
-			element.addEventListener('pointerenter', handlePointerenter)
-			element.addEventListener('pointerleave', handlePointerleave)
-			element.addEventListener('pointerup', handlePointerup)
+		if (!forcedColors.matches && forElement) {
+			addEvents(forElement)
+		} else {
+			if (!forcedColors.matches && element) {
+				addEvents(element)
+			}
 		}
 	})
 </script>

package/dist/ripple/Ripple.svelte.d.ts

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 declare const Ripple: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
     forceHover?: boolean;
     element?: HTMLDivElement;
+    forElement?: HTMLElement;
 }, {}, "element">;
 type Ripple = ReturnType<typeof Ripple>;
 export default Ripple;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "noph-ui",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {
@@ -64,20 +64,20 @@
 	},
 	"devDependencies": {
 		"@material/material-color-utilities": "^0.3.0",
-		"@playwright/test": "^1.49.0",
-		"@sveltejs/adapter-vercel": "^5.5.1",
-		"@sveltejs/kit": "^2.9.1",
+		"@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.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@types/eslint": "^9.6.1",
-		"eslint": "^9.16.0",
+		"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.10.0",
+		"svelte": "^5.14.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.18.0",