noph-ui 0.12.15 → 0.12.17

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.
@@ -21,7 +21,7 @@
21
21
  style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
22
22
  >
23
23
  {#each options as option, i}
24
- <label class="np-segmented-button" class:width-icon={option.icon}>
24
+ <label class={['np-segmented-button', option.icon && 'width-icon']}>
25
25
  <div class="check-icon-wrapper">
26
26
  <div class="check-icon">
27
27
  <CheckIcon />
@@ -144,6 +144,7 @@
144
144
  justify-self: var(--np-menu-justify-self, anchor-center);
145
145
  position-area: var(--np-menu-position-area, bottom center);
146
146
  position-try: normal flip-block;
147
+ z-index: 1000;
147
148
  }
148
149
 
149
150
  .np-menu-container:popover-open {
@@ -33,16 +33,22 @@
33
33
  {#if isButton(attributes)}
34
34
  <button
35
35
  {...attributes as HTMLButtonAttributes}
36
- class:np-navigation-drawer-item-selected={selected}
37
- class="np-navigation-drawer-item {attributes.class}"
36
+ class={[
37
+ 'np-navigation-drawer-item',
38
+ selected && 'np-navigation-drawer-item-selected',
39
+ attributes.class,
40
+ ]}
38
41
  >
39
42
  {@render content()}
40
43
  </button>
41
44
  {:else if isLink(attributes)}
42
45
  <a
43
46
  {...attributes}
44
- class:np-navigation-drawer-item-selected={selected}
45
- class="np-navigation-drawer-item {attributes.class}"
47
+ class={[
48
+ 'np-navigation-drawer-item',
49
+ selected && 'np-navigation-drawer-item-selected',
50
+ attributes.class,
51
+ ]}
46
52
  >
47
53
  {@render content()}
48
54
  </a>
@@ -26,16 +26,14 @@
26
26
  {#if isButton(attributes)}
27
27
  <button
28
28
  {...attributes as HTMLButtonAttributes}
29
- class:np-navigation-action-selected={selected}
30
- class="np-navigation-action {attributes.class}"
29
+ class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
31
30
  >
32
31
  {@render content()}
33
32
  </button>
34
33
  {:else if isLink(attributes)}
35
34
  <a
36
35
  {...attributes}
37
- class:np-navigation-action-selected={selected}
38
- class="np-navigation-action {attributes.class}"
36
+ class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
39
37
  >
40
38
  {@render content()}
41
39
  </a>
@@ -15,10 +15,8 @@
15
15
 
16
16
  <div class="np-container" bind:this={element}>
17
17
  <div
18
- class:four-color={fourColor}
19
- class:indeterminate
20
18
  {...attributes}
21
- class="progress"
19
+ class={['progress', indeterminate && 'indeterminate', fourColor && 'four-color']}
22
20
  role="progressbar"
23
21
  aria-valuemin="0"
24
22
  aria-valuemax={max}
@@ -25,10 +25,8 @@
25
25
 
26
26
  <div class="np-container" bind:this={element}>
27
27
  <div
28
- class:four-color={fourColor}
29
- class:indeterminate
30
28
  {...attributes}
31
- class="progress"
29
+ class={['progress', indeterminate && 'indeterminate', fourColor && 'four-color']}
32
30
  role="progressbar"
33
31
  aria-valuemin="0"
34
32
  aria-valuemax={max}
@@ -95,8 +95,12 @@
95
95
  bind:clientWidth
96
96
  autofocus={disabled ? false : autofocus}
97
97
  onclick={(event) => {
98
- event.preventDefault()
99
- menuElement?.showPopover()
98
+ const target = event.target as HTMLElement
99
+ const link = target.closest('a[href]')
100
+ if (!link) {
101
+ event.preventDefault()
102
+ menuElement?.showPopover()
103
+ }
100
104
  }}
101
105
  onkeydown={(event) => {
102
106
  if (event.key === 'Tab') {
@@ -55,11 +55,14 @@
55
55
  --np-color-tertiary-fixed-dim: light-dark(#eab2ff, #eab2ff);
56
56
  --np-color-tertiary-palette-key-color: light-dark(#d29be8, #d29be8);
57
57
 
58
- --np-elevation-1: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
58
+ --np-elevation-1:
59
+ rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
59
60
  rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
60
- --np-elevation-2: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
61
+ --np-elevation-2:
62
+ rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
61
63
  rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
62
- --np-elevation-3: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
64
+ --np-elevation-3:
65
+ rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
63
66
  rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
64
67
  --np-shape-corner-full: 9999px;
65
68
  --np-shape-corner-extra-small: 0.25rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.12.15",
3
+ "version": "0.12.17",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -54,23 +54,23 @@
54
54
  "devDependencies": {
55
55
  "@material/material-color-utilities": "^0.3.0",
56
56
  "@playwright/test": "^1.50.1",
57
- "@sveltejs/adapter-vercel": "^5.6.2",
57
+ "@sveltejs/adapter-vercel": "^5.6.3",
58
58
  "@sveltejs/kit": "^2.17.2",
59
59
  "@sveltejs/package": "^2.3.10",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
- "eslint": "^9.20.1",
62
+ "eslint": "^9.21.0",
63
63
  "eslint-config-prettier": "^10.0.1",
64
64
  "eslint-plugin-svelte": "^2.46.1",
65
- "globals": "^15.15.0",
66
- "prettier": "^3.5.1",
65
+ "globals": "^16.0.0",
66
+ "prettier": "^3.5.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
- "publint": "^0.3.5",
69
- "svelte": "^5.20.2",
68
+ "publint": "^0.3.6",
69
+ "svelte": "^5.20.4",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
72
  "typescript-eslint": "^8.24.1",
73
- "vite": "^6.1.0",
73
+ "vite": "^6.1.1",
74
74
  "vitest": "^3.0.6"
75
75
  },
76
76
  "svelte": "./dist/index.js",