noph-ui 0.2.4 → 0.2.6

package/dist/button/Button.svelte

@@ -101,6 +101,7 @@
 		font-family: inherit;
 		background-color: transparent;
 		border-width: 0;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		position: relative;
 		cursor: pointer;
 		display: inline-flex;

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()}
@@ -83,6 +84,7 @@
 			: ''} {attributes.class}"
 	>
 		{@render content()}
+		<span class="np-touch" bind:this={touchEl}></span>
 	</button>
 {:else if isLink(attributes)}
 	<a
@@ -107,6 +109,7 @@
 <style>
 	.np-icon-button {
 		box-sizing: border-box;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		background-color: transparent;
 		border-width: 0;
 		position: relative;
@@ -114,7 +117,6 @@
 		display: flex;
 		padding: 0;
 		user-select: none;
-		overflow: hidden;
 		text-decoration: none;
 		align-items: center;
 		justify-content: center;
@@ -264,4 +266,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

@@ -4,7 +4,7 @@
 
 <svelte:head>
 	<style>
-		.material-symbols-outlined {
+		.np-icon {
 			font-family: 'Material Symbols Outlined';
 			font-weight: normal;
 			font-style: normal;
@@ -20,14 +20,14 @@
 			-webkit-font-feature-settings: 'liga';
 			-webkit-font-smoothing: antialiased;
 		}
-		.material-symbols-outlined {
+		.np-icon {
 			font-variation-settings:
 				'FILL' 0,
 				'wght' 400,
 				'GRAD' 0,
 				'opsz' 24;
 		}
-		:where(.button-icon) .material-symbols-outlined {
+		:where(.button-icon) .np-icon {
 			display: inline-flex;
 			fill: currentColor;
 			color: var(--_icon-color);
@@ -41,4 +41,4 @@
 	</style>
 </svelte:head>
 
-<span class="material-symbols-outlined">{@render children()}</span>
+<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.4",
+	"version": "0.2.6",
 	"license": "MIT",
 	"homepage": "https://noph.dev",
 	"repository": {