noph-ui 0.40.1 → 0.40.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.
Files changed (5) hide show
  1. package/dist/card/Card.svelte +3 -1
  2. package/dist/select/NativeSelect.svelte +5 -8
  3. package/dist/select/Select.svelte +13 -11
  4. package/dist/text-field/TextField.svelte +8 -0
  5. package/package.json +105 -108
package/dist/card/Card.svelte CHANGED
@@ -193,6 +193,7 @@
193
193
  display: grid;
194
194
  position: relative;
195
195
  align-self: start;
196
+ flex: 1 0 auto;
196
197
  min-width: calc(100% - 32px);
197
198
  margin: 1rem;
198
199
  grid-gap: 0.5rem;
@@ -215,7 +216,8 @@
215
216
 
216
217
  .np-card-action {
217
218
  display: flex;
218
- margin-top: 1.5rem;
219
+ margin-top: auto;
220
+ padding-top: 1.5rem;
219
221
  justify-content: flex-end;
220
222
  }
221
223
 
package/dist/select/NativeSelect.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script lang="ts">
2
+ import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
2
3
  import type { HTMLSelectAttributes } from 'svelte/elements'
3
4
  interface SelectProps extends HTMLSelectAttributes {
4
5
  label?: string
@@ -64,9 +65,9 @@
64
65
  </div>
65
66
  <div class="np-select-state-layer"></div>
66
67
  {/if}
67
- <svg class="arrow" height="6" viewBox="7 10 10 5" focusable="false">
68
- <polygon stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
69
- </svg>
68
+ <span class="arrow">
69
+ <ArrowDropDownIcon />
70
+ </span>
70
71
  <select
71
72
  oninput={(event) => {
72
73
  if (
@@ -198,11 +199,7 @@
198
199
  }
199
200
 
200
201
  .arrow {
201
- padding-inline: 0.375rem;
202
- padding-block: 0.5625rem;
203
- box-sizing: border-box;
204
- width: 24px;
205
- height: 24px;
202
+ display: flex;
206
203
  fill: currentColor;
207
204
  position: absolute;
208
205
  pointer-events: none;
package/dist/select/Select.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { onFormReset } from '../form-reset.js'
3
+ import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
3
4
  import Item from '../list/Item.svelte'
4
5
  import Menu from '../menu/Menu.svelte'
5
6
  import Check from './Check.svelte'
@@ -256,10 +257,9 @@
256
257
  </script>
257
258
 
258
259
  {#snippet arrows()}
259
- <svg height="5" viewBox="7 10 10 5" focusable="false">
260
- <polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
261
- <polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
262
- </svg>
260
+ <span class="arrow">
261
+ <ArrowDropDownIcon />
262
+ </span>
263
263
  {/snippet}
264
264
 
265
265
  <div
@@ -806,16 +806,18 @@
806
806
  opacity: 1;
807
807
  }
808
808
 
809
- .field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .down,
810
- .field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .down {
809
+ .field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .arrow,
810
+ .field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .arrow {
811
811
  color: var(--np-color-primary);
812
812
  }
813
- .icon .down {
814
- transition: color 75ms linear 75ms;
813
+ .icon .arrow {
814
+ display: flex;
815
+ transition:
816
+ color 75ms linear 75ms,
817
+ rotate 150ms cubic-bezier(0.2, 0, 0, 1);
815
818
  }
816
- .icon .up {
817
- opacity: 0;
818
- transition: color 75ms linear 75ms;
819
+ .field.menu-open .icon .arrow {
820
+ rotate: 180deg;
819
821
  }
820
822
 
821
823
  .content {
package/dist/text-field/TextField.svelte CHANGED
@@ -460,6 +460,14 @@
460
460
  margin-inline-start: 1rem;
461
461
  margin-inline-end: 0.75rem;
462
462
  }
463
+ .start:has(:global(.np-icon-button)) {
464
+ margin-inline-start: 0.25rem;
465
+ margin-inline-end: 0.5rem;
466
+ }
467
+ .end:has(:global(.np-icon-button)) {
468
+ margin-inline-start: 0.5rem;
469
+ margin-inline-end: 0.25rem;
470
+ }
463
471
  .field:has(input:is(:user-invalid, [aria-invalid='true'])) .end,
464
472
  .field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .end {
465
473
  color: var(--np-color-error);
package/package.json CHANGED
@@ -1,109 +1,106 @@
1
1
  {
2
- "name": "noph-ui",
3
- "version": "0.40.1",
4
- "license": "MIT",
5
- "homepage": "https://noph.dev",
6
- "repository": {
7
- "type": "git",
8
- "url": "git+https://github.com/cnolte/noph-ui.git"
9
- },
10
- "author": {
11
- "name": "cnolte"
12
- },
13
- "imports": {
14
- "#lib": "./src/lib/index.js",
15
- "#lib/*": "./src/lib/*"
16
- },
17
- "keywords": [
18
- "svelte",
19
- "svelte 5",
20
- "material",
21
- "material 3",
22
- "expressive",
23
- "material you",
24
- "material expressive",
25
- "m3",
26
- "ui",
27
- "frontend",
28
- "design-system",
29
- "ui-library",
30
- "theming"
31
- ],
32
- "scripts": {
33
- "dev": "vite dev",
34
- "build": "vite build && npm run prepack",
35
- "preview": "vite preview",
36
- "prepare": "svelte-kit sync || echo ''",
37
- "prepack": "svelte-kit sync && svelte-package && publint",
38
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
39
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
40
- "lint": "prettier --check . && eslint .",
41
- "format": "prettier --write .",
42
- "docs:toc": "node scripts/build-toc.ts",
43
- "test:unit": "vitest",
44
- "test": "npm run test:unit -- --run && npm run test:e2e",
45
- "test:e2e": "playwright install && playwright test"
46
- },
47
- "exports": {
48
- ".": {
49
- "types": "./dist/index.d.ts",
50
- "svelte": "./dist/index.js"
51
- },
52
- "./icons": {
53
- "types": "./dist/icons/index.d.ts",
54
- "svelte": "./dist/icons/index.js"
55
- },
56
- "./types": {
57
- "types": "./dist/types.d.ts"
58
- },
59
- "./defaultTheme": {
60
- "types": "./dist/themes/defaultTheme.css.d.ts",
61
- "import": "./dist/themes/defaultTheme.css",
62
- "require": "./dist/themes/defaultTheme.css"
63
- }
64
- },
65
- "sideEffects": [
66
- "**/*.css"
67
- ],
68
- "files": [
69
- "dist",
70
- "!dist/**/*.test.*",
71
- "!dist/**/*.spec.*"
72
- ],
73
- "peerDependencies": {
74
- "svelte": "^5.40.0"
75
- },
76
- "devDependencies": {
77
- "@eslint/js": "^10.0.1",
78
- "@materialx/material-color-utilities": "^0.4.8",
79
- "@playwright/test": "^1.62.1",
80
- "@sveltejs/adapter-vercel": "7.0.0-next.6",
81
- "@sveltejs/kit": "3.0.0-next.23",
82
- "@sveltejs/package": "3.0.0-next.7",
83
- "@sveltejs/vite-plugin-svelte": "7.3.0",
84
- "@types/node": "^24",
85
- "@types/prismjs": "^1.26.6",
86
- "@vitest/browser-playwright": "^4.1.10",
87
- "eslint": "^10.8.1",
88
- "eslint-config-prettier": "^10.1.8",
89
- "eslint-plugin-svelte": "^3.22.0",
90
- "globals": "^17.9.0",
91
- "playwright": "^1.62.1",
92
- "prettier": "^3.9.6",
93
- "prettier-plugin-svelte": "^4.1.1",
94
- "prismjs": "^1.30.0",
95
- "publint": "^0.3.23",
96
- "svelte": "^5.56.8",
97
- "svelte-check": "^4.7.5",
98
- "typescript": "^6.0.3",
99
- "typescript-eslint": "^8.66.0",
100
- "valibot": "^1.4.2",
101
- "vite": "8.2.1",
102
- "vitest": "^4.1.10",
103
- "vitest-browser-svelte": "^2.1.1"
104
- },
105
- "svelte": "./dist/index.js",
106
- "types": "./dist/index.d.ts",
107
- "type": "module",
108
- "packageManager": "pnpm@11.9.0"
109
- }
2
+ "name": "noph-ui",
3
+ "version": "0.40.2",
4
+ "license": "MIT",
5
+ "homepage": "https://noph.dev",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/cnolte/noph-ui.git"
9
+ },
10
+ "author": {
11
+ "name": "cnolte"
12
+ },
13
+ "imports": {
14
+ "#lib": "./src/lib/index.js",
15
+ "#lib/*": "./src/lib/*"
16
+ },
17
+ "keywords": [
18
+ "svelte",
19
+ "svelte 5",
20
+ "material",
21
+ "material 3",
22
+ "expressive",
23
+ "material you",
24
+ "material expressive",
25
+ "m3",
26
+ "ui",
27
+ "frontend",
28
+ "design-system",
29
+ "ui-library",
30
+ "theming"
31
+ ],
32
+ "exports": {
33
+ ".": {
34
+ "types": "./dist/index.d.ts",
35
+ "svelte": "./dist/index.js"
36
+ },
37
+ "./icons": {
38
+ "types": "./dist/icons/index.d.ts",
39
+ "svelte": "./dist/icons/index.js"
40
+ },
41
+ "./types": {
42
+ "types": "./dist/types.d.ts"
43
+ },
44
+ "./defaultTheme": {
45
+ "types": "./dist/themes/defaultTheme.css.d.ts",
46
+ "import": "./dist/themes/defaultTheme.css",
47
+ "require": "./dist/themes/defaultTheme.css"
48
+ }
49
+ },
50
+ "sideEffects": [
51
+ "**/*.css"
52
+ ],
53
+ "files": [
54
+ "dist",
55
+ "!dist/**/*.test.*",
56
+ "!dist/**/*.spec.*"
57
+ ],
58
+ "peerDependencies": {
59
+ "svelte": "^5.40.0"
60
+ },
61
+ "devDependencies": {
62
+ "@eslint/js": "^10.0.1",
63
+ "@materialx/material-color-utilities": "^0.4.8",
64
+ "@playwright/test": "^1.62.1",
65
+ "@sveltejs/adapter-vercel": "7.0.0-next.6",
66
+ "@sveltejs/kit": "3.0.0-next.23",
67
+ "@sveltejs/package": "3.0.0-next.7",
68
+ "@sveltejs/vite-plugin-svelte": "7.3.0",
69
+ "@types/node": "^24",
70
+ "@types/prismjs": "^1.26.6",
71
+ "@vitest/browser-playwright": "^4.1.10",
72
+ "eslint": "^10.8.1",
73
+ "eslint-config-prettier": "^10.1.8",
74
+ "eslint-plugin-svelte": "^3.22.0",
75
+ "globals": "^17.9.0",
76
+ "playwright": "^1.62.1",
77
+ "prettier": "^3.9.6",
78
+ "prettier-plugin-svelte": "^4.1.1",
79
+ "prismjs": "^1.30.0",
80
+ "publint": "^0.3.23",
81
+ "svelte": "^5.56.8",
82
+ "svelte-check": "^4.7.5",
83
+ "typescript": "^6.0.3",
84
+ "typescript-eslint": "^8.66.0",
85
+ "valibot": "^1.4.2",
86
+ "vite": "8.2.1",
87
+ "vitest": "^4.1.10",
88
+ "vitest-browser-svelte": "^2.1.1"
89
+ },
90
+ "svelte": "./dist/index.js",
91
+ "types": "./dist/index.d.ts",
92
+ "type": "module",
93
+ "scripts": {
94
+ "dev": "vite dev",
95
+ "build": "vite build && npm run prepack",
96
+ "preview": "vite preview",
97
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
98
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
99
+ "lint": "prettier --check . && eslint .",
100
+ "format": "prettier --write .",
101
+ "docs:toc": "node scripts/build-toc.ts",
102
+ "test:unit": "vitest",
103
+ "test": "npm run test:unit -- --run && npm run test:e2e",
104
+ "test:e2e": "playwright install && playwright test"
105
+ }
106
+ }