noph-ui 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
{#snippet content()}
|
|
60
60
|
{#if !disabled}
|
|
61
61
|
<Ripple forElement={touchEl} />
|
|
62
|
+
<span class="np-touch" bind:this={touchEl}></span>
|
|
62
63
|
{/if}
|
|
63
64
|
{#if selectedIcon && selectedState}
|
|
64
65
|
{@render selectedIcon()}
|
|
@@ -84,7 +85,6 @@
|
|
|
84
85
|
: ''} {attributes.class}"
|
|
85
86
|
>
|
|
86
87
|
{@render content()}
|
|
87
|
-
<span class="np-touch" bind:this={touchEl}></span>
|
|
88
88
|
</button>
|
|
89
89
|
{:else if isLink(attributes)}
|
|
90
90
|
<a
|
package/dist/menu/Menu.svelte
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
interface MenuProps extends HTMLAttributes<HTMLDivElement> {
|
|
7
7
|
children: Snippet
|
|
8
|
-
anchor
|
|
8
|
+
anchor?: HTMLElement | undefined
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
let { anchor, children, ...attributes }: MenuProps = $props()
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
let scrollY = $state(0)
|
|
18
18
|
let scrollX = $state(0)
|
|
19
19
|
let popoverElement: HTMLDivElement | undefined = $state()
|
|
20
|
-
let anchorId =
|
|
21
|
-
|
|
20
|
+
let anchorId = anchor?.style.getPropertyValue('anchor-name')
|
|
22
21
|
const refreshValues = () => {
|
|
23
22
|
if (popoverElement && anchor && !('anchorName' in document.documentElement.style)) {
|
|
24
23
|
const anchorRect = anchor.getBoundingClientRect()
|
|
@@ -52,9 +51,10 @@
|
|
|
52
51
|
},
|
|
53
52
|
{ passive: true },
|
|
54
53
|
)
|
|
55
|
-
} else {
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
} else if (!anchorId) {
|
|
55
|
+
const generatedId = `--${generateUUIDv4()}`
|
|
56
|
+
popoverElement.style.setProperty('position-anchor', generatedId)
|
|
57
|
+
anchor.style.setProperty('anchor-name', generatedId)
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
})
|
|
@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
|
|
|
2
2
|
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
3
|
declare const Menu: import("svelte").Component<HTMLAttributes<HTMLDivElement> & {
|
|
4
4
|
children: Snippet;
|
|
5
|
-
anchor
|
|
5
|
+
anchor?: HTMLElement | undefined;
|
|
6
6
|
}, {}, "">;
|
|
7
7
|
type Menu = ReturnType<typeof Menu>;
|
|
8
8
|
export default Menu;
|
package/dist/radio/Radio.svelte
CHANGED
|
@@ -50,6 +50,26 @@
|
|
|
50
50
|
outline: none;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.np-host:has(input:focus-visible) .np-container {
|
|
54
|
+
outline-style: solid;
|
|
55
|
+
outline-color: var(--np-color-primary);
|
|
56
|
+
outline-width: 3px;
|
|
57
|
+
outline-offset: 12px;
|
|
58
|
+
border-radius: 50%;
|
|
59
|
+
animation: focusAnimation 0.3s ease forwards;
|
|
60
|
+
}
|
|
61
|
+
@keyframes focusAnimation {
|
|
62
|
+
0% {
|
|
63
|
+
outline-width: 3px;
|
|
64
|
+
}
|
|
65
|
+
50% {
|
|
66
|
+
outline-width: 6px;
|
|
67
|
+
}
|
|
68
|
+
100% {
|
|
69
|
+
outline-width: 3px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
53
73
|
.np-host:has(input:disabled) {
|
|
54
74
|
cursor: default;
|
|
55
75
|
}
|
package/package.json
CHANGED
|
@@ -1,90 +1,89 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
2
|
+
"name": "noph-ui",
|
|
3
|
+
"version": "0.3.2",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"homepage": "https://noph.dev",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/cnolte/noph-ui"
|
|
9
|
+
},
|
|
10
|
+
"author": {
|
|
11
|
+
"name": "cnolte"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"svelte",
|
|
15
|
+
"svelte 5",
|
|
16
|
+
"material",
|
|
17
|
+
"material 3",
|
|
18
|
+
"material you",
|
|
19
|
+
"m3",
|
|
20
|
+
"ui",
|
|
21
|
+
"frontend",
|
|
22
|
+
"design-system",
|
|
23
|
+
"ui-library",
|
|
24
|
+
"theming"
|
|
25
|
+
],
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"svelte": "./dist/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./icons": {
|
|
32
|
+
"types": "./dist/icons/index.d.ts",
|
|
33
|
+
"svelte": "./dist/icons/index.js"
|
|
34
|
+
},
|
|
35
|
+
"./defaultTheme": {
|
|
36
|
+
"import": "./dist/themes/defaultTheme.css",
|
|
37
|
+
"require": "./dist/themes/defaultTheme.css"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"sideEffects": [
|
|
41
|
+
"**/*.css"
|
|
42
|
+
],
|
|
43
|
+
"files": [
|
|
44
|
+
"dist",
|
|
45
|
+
"!dist/**/*.test.*",
|
|
46
|
+
"!dist/**/*.spec.*"
|
|
47
|
+
],
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"svelte": "^5.0.0"
|
|
50
|
+
},
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@material/material-color-utilities": "^0.3.0",
|
|
53
|
+
"@playwright/test": "^1.49.1",
|
|
54
|
+
"@sveltejs/adapter-vercel": "^5.5.2",
|
|
55
|
+
"@sveltejs/kit": "^2.12.1",
|
|
56
|
+
"@sveltejs/package": "^2.3.7",
|
|
57
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.2",
|
|
58
|
+
"@types/eslint": "^9.6.1",
|
|
59
|
+
"eslint": "^9.17.0",
|
|
60
|
+
"eslint-config-prettier": "^9.1.0",
|
|
61
|
+
"eslint-plugin-svelte": "^2.46.1",
|
|
62
|
+
"globals": "^15.13.0",
|
|
63
|
+
"prettier": "^3.4.2",
|
|
64
|
+
"prettier-plugin-svelte": "^3.3.2",
|
|
65
|
+
"publint": "^0.2.12",
|
|
66
|
+
"svelte": "^5.14.1",
|
|
67
|
+
"svelte-check": "^4.1.1",
|
|
68
|
+
"typescript": "^5.7.2",
|
|
69
|
+
"typescript-eslint": "^8.18.1",
|
|
70
|
+
"vite": "^6.0.3",
|
|
71
|
+
"vitest": "^2.1.8"
|
|
72
|
+
},
|
|
73
|
+
"svelte": "./dist/index.js",
|
|
74
|
+
"types": "./dist/index.d.ts",
|
|
75
|
+
"type": "module",
|
|
76
|
+
"scripts": {
|
|
77
|
+
"dev": "vite dev",
|
|
78
|
+
"build": "vite build && npm run package",
|
|
79
|
+
"preview": "vite preview",
|
|
80
|
+
"package": "svelte-kit sync && svelte-package && publint",
|
|
81
|
+
"test": "npm run test:integration && npm run test:unit",
|
|
82
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
83
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
84
|
+
"lint": "prettier --check . && eslint .",
|
|
85
|
+
"format": "prettier --write .",
|
|
86
|
+
"test:integration": "playwright test",
|
|
87
|
+
"test:unit": "vitest"
|
|
88
|
+
}
|
|
89
|
+
}
|