noph-ui 0.3.1 → 0.4.0

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/index.d.ts

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

package/dist/list/Item.svelte

@@ -7,7 +7,7 @@
 		selected?: boolean
 		start?: Snippet
 		end?: Snippet
-		type: 'button'
+		variant: 'button'
 		supportingText?: Snippet
 	}
 	interface AnchorProps extends HTMLAnchorAttributes {
@@ -15,7 +15,7 @@
 		start?: Snippet
 		end?: Snippet
 		disabled?: boolean
-		type: 'link'
+		variant: 'link'
 		supportingText?: Snippet
 	}
 	interface TextProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,7 +23,7 @@
 		start?: Snippet
 		end?: Snippet
 		disabled?: boolean
-		type?: 'text'
+		variant?: 'text'
 		supportingText?: Snippet
 	}
 
@@ -64,7 +64,7 @@
 			{@render end()}
 		</div>
 	{/if}
-	{#if !disabled && !(attributes.type === 'text' || attributes.type === undefined)}
+	{#if !disabled && !(attributes.variant === 'text' || attributes.variant === undefined)}
 		<Ripple forceHover={focused} />
 	{/if}
 {/snippet}
@@ -73,11 +73,11 @@
 	<div aria-disabled="true" class="np-item disabled {attributes.class}">
 		{@render content()}
 	</div>
-{:else if attributes.type === 'text' || attributes.type === undefined}
+{:else if attributes.variant === 'text' || attributes.variant === undefined}
 	<div {...attributes} class="{selected ? 'selected ' : ''} np-item {attributes.class}">
 		{@render content()}
 	</div>
-{:else if attributes.type === 'button'}
+{:else if attributes.variant === 'button'}
 	<button
 		{...attributes}
 		class="{selected ? 'selected ' : ''} np-item {attributes.class}"
@@ -88,7 +88,7 @@
 			focused = false
 		}}>{@render content()}</button
 	>
-{:else if attributes.type === 'link'}
+{:else if attributes.variant === 'link'}
 	<a
 		{...attributes}
 		class="{selected ? 'selected ' : ''} np-item {attributes.class}"

package/dist/list/Item.svelte.d.ts

@@ -4,7 +4,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     selected?: boolean;
     start?: Snippet;
     end?: Snippet;
-    type: 'button';
+    variant: 'button';
     supportingText?: Snippet;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
@@ -12,7 +12,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     start?: Snippet;
     end?: Snippet;
     disabled?: boolean;
-    type: 'link';
+    variant: 'link';
     supportingText?: Snippet;
 }
 interface TextProps extends HTMLAttributes<HTMLDivElement> {
@@ -20,7 +20,7 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     start?: Snippet;
     end?: Snippet;
     disabled?: boolean;
-    type?: 'text';
+    variant?: 'text';
     supportingText?: Snippet;
 }
 type $$ComponentProps = ButtonProps | AnchorProps | TextProps;

package/dist/list/ListItem.svelte

@@ -7,7 +7,7 @@
 		selected?: boolean
 		start?: Snippet
 		end?: Snippet
-		type: 'button'
+		variant: 'button'
 		supportingText?: Snippet
 	}
 	interface AnchorProps extends HTMLAnchorAttributes {
@@ -15,7 +15,7 @@
 		start?: Snippet
 		end?: Snippet
 		disabled?: boolean
-		type: 'link'
+		variant: 'link'
 		supportingText?: Snippet
 	}
 	interface TextProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,7 +23,7 @@
 		start?: Snippet
 		end?: Snippet
 		disabled?: boolean
-		type?: 'text'
+		variant?: 'text'
 		supportingText?: Snippet
 	}
 

package/dist/list/ListItem.svelte.d.ts

@@ -4,7 +4,7 @@ interface ButtonProps extends HTMLButtonAttributes {
     selected?: boolean;
     start?: Snippet;
     end?: Snippet;
-    type: 'button';
+    variant: 'button';
     supportingText?: Snippet;
 }
 interface AnchorProps extends HTMLAnchorAttributes {
@@ -12,7 +12,7 @@ interface AnchorProps extends HTMLAnchorAttributes {
     start?: Snippet;
     end?: Snippet;
     disabled?: boolean;
-    type: 'link';
+    variant: 'link';
     supportingText?: Snippet;
 }
 interface TextProps extends HTMLAttributes<HTMLDivElement> {
@@ -20,7 +20,7 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
     start?: Snippet;
     end?: Snippet;
     disabled?: boolean;
-    type?: 'text';
+    variant?: 'text';
     supportingText?: Snippet;
 }
 type $$ComponentProps = ButtonProps | AnchorProps | TextProps;

package/dist/list/types.d.ts

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

package/dist/list/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -28,9 +28,9 @@
 
 <li class="np-menu-item" role="menuitem">
 	{#if isButton(attributes)}
-		<Item {...attributes} type="button" />
+		<Item {...attributes} variant="button" />
 	{:else}
-		<Item {...attributes} type="link" />
+		<Item {...attributes} variant="link" />
 	{/if}
 </li>
 

package/dist/radio/Radio.svelte

@@ -50,6 +50,26 @@
 		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;
 	}

package/dist/radio/index.d.ts

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

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/index.d.ts

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

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type { RadioProps } from './radio/types.ts';
+export type { CheckboxProps } from './checkbox/types.ts';
+export type { TextAreaFieldProps, TextFieldProps } from './text-field/types.ts';

package/dist/types.js

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

package/package.json

@@ -1,90 +1,92 @@
 {
-	"name": "noph-ui",
-	"version": "0.3.1",
-	"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.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"
-}
+  "name": "noph-ui",
+  "version": "0.4.0",
+  "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"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts"
+    },
+    "./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"
+  }
+}