noph-ui 0.32.7 → 0.32.9

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 (8) hide show
  1. package/dist/badge/Badge.svelte +1 -0
  2. package/dist/card/Card.svelte +8 -12
  3. package/dist/chip/AssistChip.svelte +8 -8
  4. package/dist/chip/FilterChip.svelte +60 -25
  5. package/dist/chip/InputChip.svelte +11 -14
  6. package/dist/dialog/Dialog.svelte +1 -1
  7. package/dist/navigation-rail/NavigationRailItem.svelte +2 -0
  8. package/package.json +10 -10
package/dist/badge/Badge.svelte CHANGED
@@ -3,6 +3,7 @@
3
3
  </script>
4
4
 
5
5
  <div
6
+ aria-hidden="true"
6
7
  class={[
7
8
  'np-badge-container',
8
9
  label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',
package/dist/card/Card.svelte CHANGED
@@ -21,16 +21,15 @@
21
21
  let focused = $state(false)
22
22
 
23
23
  $effect(() => {
24
- if (disabled && element) {
25
- // eslint-disable-next-line no-undef
26
- const formElements: NodeListOf<
27
- HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
28
- > = element.querySelectorAll('input, button, select, textarea')
24
+ if (!element) return
25
+ // eslint-disable-next-line no-undef
26
+ const formElements: NodeListOf<
27
+ HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
28
+ > = element.querySelectorAll('input, button, select, textarea')
29
29
 
30
- formElements.forEach((element) => {
31
- element.disabled = disabled
32
- })
33
- }
30
+ formElements.forEach((el) => {
31
+ el.disabled = disabled
32
+ })
34
33
  })
35
34
  </script>
36
35
 
@@ -167,7 +166,6 @@
167
166
  }
168
167
  .np-card-container {
169
168
  font: inherit;
170
- box-sizing: border-box;
171
169
  text-align: start;
172
170
  display: inline-flex;
173
171
  flex-direction: column;
@@ -210,10 +208,8 @@
210
208
  width: 100%;
211
209
  height: 200px;
212
210
  overflow: hidden;
213
- justify-content: center;
214
211
  background-size: cover;
215
212
  background-position: 50%;
216
- align-items: center;
217
213
  border-radius: var(--border-radius);
218
214
  }
219
215
  .np-card-content {
package/dist/chip/AssistChip.svelte CHANGED
@@ -15,22 +15,22 @@
15
15
  <Button
16
16
  size="xs"
17
17
  shape="square"
18
- --np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
19
- --np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
18
+ --np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
19
+ --np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface))"
20
20
  --np-outlined-button-outline-color="var(--np-assist-chip-outline-color, var(--np-color-outline-variant))"
21
21
  --np-button-icon-size="1.125rem"
22
- --np-button-padding="0.5rem 1rem"
22
+ --np-button-padding={icon ? '0.5rem 1rem' : '1rem'}
23
23
  --np-button-gap="0.5rem"
24
24
  --np-button-shape="0.5rem"
25
- --np-button-icon-color="var(--np-color-primary)"
26
- --np-outlined-button-container-color="var(--np-color-surface-container-low)"
25
+ --np-button-icon-color={disabled
26
+ ? 'color-mix(in srgb, var(--np-color-on-surface) 38%, transparent)'
27
+ : 'var(--np-color-primary)'}
28
+ style="letter-spacing: 0.006rem"
27
29
  bind:element
28
30
  variant={elevated ? 'elevated' : 'outlined'}
29
31
  {disabled}
30
32
  {...attributes}
33
+ start={icon}
31
34
  >
32
- {#snippet start()}
33
- {@render icon?.()}
34
- {/snippet}
35
35
  {label}
36
36
  </Button>
package/dist/chip/FilterChip.svelte CHANGED
@@ -23,27 +23,26 @@
23
23
  }: FilterChipProps = $props()
24
24
 
25
25
  let chipLabel: HTMLLabelElement | undefined = $state()
26
+ let pressed = $state(false)
26
27
 
27
- $effect(() => {
28
- if (group && value) {
29
- selected = group.includes(value)
30
- }
31
- })
28
+ const handlePointerDown = () => {
29
+ if (disabled) return
30
+ pressed = true
31
+ }
32
+
33
+ const handlePointerUp = () => {
34
+ pressed = false
35
+ }
32
36
 
33
37
  $effect(() => {
34
- if (value && group) {
35
- const index = group.indexOf(value)
36
- if (selected) {
37
- if (index < 0) {
38
- group?.push(value)
39
- group = group
40
- }
41
- } else {
42
- if (index >= 0) {
43
- group.splice(index, 1)
44
- group = group
45
- }
46
- }
38
+ if (!group || !value) return
39
+ const included = group.includes(value)
40
+ if (selected && !included) {
41
+ group = [...group, value]
42
+ } else if (!selected && included) {
43
+ group = group.filter((v) => v !== value)
44
+ } else if (included !== selected) {
45
+ selected = included
47
46
  }
48
47
  })
49
48
  </script>
@@ -57,10 +56,17 @@
57
56
  icon ? 'np-filter-chip-icon' : '',
58
57
  removable ? 'np-filter-chip-removable' : '',
59
58
  disabled ? 'np-filter-chip-disabled' : '',
59
+ pressed && 'np-filter-chip-pressed',
60
60
  attributes.class,
61
61
  ]}
62
62
  >
63
- <label bind:this={chipLabel} class="np-filter-chip-label">
63
+ <label
64
+ bind:this={chipLabel}
65
+ class="np-filter-chip-label"
66
+ onpointerdown={handlePointerDown}
67
+ onpointerup={handlePointerUp}
68
+ onpointerleave={handlePointerUp}
69
+ >
64
70
  {#if icon}
65
71
  <div class="np-chip-icon">
66
72
  {@render icon()}
@@ -105,7 +111,9 @@
105
111
  border-radius: var(--np-filter-chip-container-shape, var(--np-shape-corner-small));
106
112
  --np-icon-button-icon-color: var(--np-color-on-surface-variant);
107
113
  --np-icon-size: 1.125rem;
114
+ --np-ripple-pressed-opacity: 0.1;
108
115
  min-width: 0;
116
+ transition: box-shadow 150ms linear;
109
117
  }
110
118
  .np-filter-chip-label input {
111
119
  opacity: 0;
@@ -124,12 +132,24 @@
124
132
  z-index: 1;
125
133
  padding-inline: 1rem;
126
134
  overflow: hidden;
135
+ transition: padding 200ms ease;
127
136
  }
128
137
  .np-chip-icon-checked {
129
- display: none;
138
+ display: flex;
139
+ width: 0;
140
+ min-width: 0;
141
+ margin-inline-end: -0.5rem;
142
+ overflow: hidden;
143
+ transition:
144
+ width 200ms ease,
145
+ margin 200ms ease;
130
146
  }
131
147
  .np-filter-chip:has(input:checked) .np-chip-icon-checked {
132
- display: flex;
148
+ width: 18px;
149
+ margin-inline-end: 0;
150
+ }
151
+ .np-filter-chip-icon .np-chip-icon-checked {
152
+ transition: none;
133
153
  }
134
154
  .np-filter-chip:has(input:checked) .np-chip-icon {
135
155
  display: none;
@@ -156,6 +176,7 @@
156
176
  line-height: 1.25rem;
157
177
  font-size: 0.875rem;
158
178
  font-weight: 500;
179
+ letter-spacing: 0.006rem;
159
180
  white-space: pre;
160
181
  overflow: hidden;
161
182
  text-overflow: ellipsis;
@@ -166,6 +187,9 @@
166
187
  inset: 0;
167
188
  border-radius: inherit;
168
189
  pointer-events: none;
190
+ transition:
191
+ background-color 150ms linear,
192
+ outline-color 150ms linear;
169
193
  }
170
194
  .np-filter-chip-default::before {
171
195
  outline-style: solid;
@@ -174,7 +198,7 @@
174
198
  outline-offset: -1px;
175
199
  }
176
200
  .np-filter-chip:has(input:checked)::before {
177
- outline-style: none;
201
+ outline-color: transparent;
178
202
  background-color: var(--np-color-secondary-container);
179
203
  }
180
204
  .np-filter-chip-elevated {
@@ -183,6 +207,20 @@
183
207
  .np-filter-chip-elevated::before {
184
208
  background-color: var(--np-color-surface-container-low);
185
209
  }
210
+ @media (hover: hover) {
211
+ .np-filter-chip-elevated:not(.np-filter-chip-disabled):hover {
212
+ box-shadow: var(--np-elevation-2);
213
+ }
214
+ .np-filter-chip-default:not(.np-filter-chip-disabled):has(input:checked):hover {
215
+ box-shadow: var(--np-elevation-1);
216
+ }
217
+ }
218
+ .np-filter-chip-elevated:not(.np-filter-chip-disabled).np-filter-chip-pressed {
219
+ box-shadow: var(--np-elevation-1);
220
+ }
221
+ .np-filter-chip-default:not(.np-filter-chip-disabled):has(input:checked).np-filter-chip-pressed {
222
+ box-shadow: none;
223
+ }
186
224
  .np-filter-chip:has(input:checked) {
187
225
  --np-icon-button-icon-color: var(--np-color-on-secondary-container);
188
226
  }
@@ -219,9 +257,6 @@
219
257
  .np-filter-chip-disabled.np-filter-chip-elevated {
220
258
  box-shadow: none;
221
259
  }
222
- .np-filter-chip-disabled:has(input:checked)::before {
223
- opacity: 0.12;
224
- }
225
260
  .np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
226
261
  content: '';
227
262
  position: absolute;
package/dist/chip/InputChip.svelte CHANGED
@@ -59,17 +59,6 @@
59
59
  </div>
60
60
 
61
61
  <style>
62
- .np-skeleton {
63
- height: 2rem;
64
- line-height: 1.25rem;
65
- font-size: 0.875rem;
66
- font-weight: 500;
67
- opacity: 0;
68
- display: flex;
69
- align-items: center;
70
- padding-inline-start: 1rem;
71
- padding-inline-end: 2rem;
72
- }
73
62
  .np-input-chip {
74
63
  position: relative;
75
64
  display: inline-flex;
@@ -78,6 +67,7 @@
78
67
  border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
79
68
  --np-icon-button-icon-color: var(--np-color-on-surface-variant);
80
69
  --np-icon-size: 1.125rem;
70
+ --np-ripple-pressed-opacity: 0.1;
81
71
  padding-inline-end: 1px;
82
72
  min-width: 0;
83
73
  }
@@ -96,13 +86,16 @@
96
86
  fill: currentColor;
97
87
  gap: 0.5rem;
98
88
  z-index: 1;
99
- padding-inline-start: 1rem;
89
+ padding-inline-start: 0.75rem;
100
90
  overflow: hidden;
101
91
  }
102
92
  .np-chip-icon {
103
- color: var(--np-color-primary);
93
+ color: var(--np-color-on-surface-variant);
104
94
  display: flex;
105
95
  }
96
+ .np-input-chip-selected .np-chip-icon {
97
+ color: var(--np-color-primary);
98
+ }
106
99
  .np-input-chip-icon .np-input-chip-label {
107
100
  padding-inline-start: 0.5rem;
108
101
  }
@@ -110,6 +103,7 @@
110
103
  line-height: 1.25rem;
111
104
  font-size: 0.875rem;
112
105
  font-weight: 500;
106
+ letter-spacing: 0.006rem;
113
107
  padding-inline-end: 1px;
114
108
  white-space: pre;
115
109
  overflow: hidden;
@@ -125,9 +119,12 @@
125
119
  outline-color: var(--np-input-chip-outline-color, var(--np-color-outline-variant));
126
120
  outline-width: 1px;
127
121
  outline-offset: -1px;
122
+ transition:
123
+ background-color 150ms linear,
124
+ outline-color 150ms linear;
128
125
  }
129
126
  .np-input-chip-selected::before {
130
- outline-style: none;
127
+ outline-color: transparent;
131
128
  background-color: var(--np-color-secondary-container);
132
129
  }
133
130
  .np-input-chip-selected {
package/dist/dialog/Dialog.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  role="dialog"
46
46
  aria-modal="true"
47
47
  aria-labelledby="{uid}-dialog-headline"
48
- aria-describedby="{uid}-dialog-supporting-text"
48
+ aria-describedby={supportingText ? '{uid}-dialog-supporting-text' : undefined}
49
49
  >
50
50
  {#if icon}
51
51
  <div class="np-dialog-icon">
package/dist/navigation-rail/NavigationRailItem.svelte CHANGED
@@ -20,6 +20,7 @@
20
20
  <a
21
21
  {...attributes}
22
22
  class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
23
+ aria-current={selected ? 'page' : undefined}
23
24
  >
24
25
  {@render content()}
25
26
  </a>
@@ -27,6 +28,7 @@
27
28
  <button
28
29
  {...attributes as HTMLButtonAttributes}
29
30
  class={['np-navigation-action', selected && 'np-navigation-action-selected', attributes.class]}
31
+ aria-pressed={selected ? 'true' : undefined}
30
32
  >
31
33
  {@render content()}
32
34
  </button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.32.7",
3
+ "version": "0.32.9",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -72,23 +72,23 @@
72
72
  "@materialx/material-color-utilities": "^0.4.8",
73
73
  "@playwright/test": "^1.58.2",
74
74
  "@sveltejs/adapter-auto": "^7.0.1",
75
- "@sveltejs/kit": "^2.53.4",
75
+ "@sveltejs/kit": "^2.55.0",
76
76
  "@sveltejs/package": "^2.5.7",
77
77
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
78
78
  "@types/eslint": "^9.6.1",
79
- "eslint": "^10.0.2",
79
+ "eslint": "^10.1.0",
80
80
  "eslint-config-prettier": "^10.1.8",
81
- "eslint-plugin-svelte": "^3.15.0",
81
+ "eslint-plugin-svelte": "^3.16.0",
82
82
  "globals": "^17.4.0",
83
83
  "prettier": "^3.8.1",
84
84
  "prettier-plugin-svelte": "^3.5.1",
85
85
  "publint": "^0.3.18",
86
- "svelte": "^5.53.7",
87
- "svelte-check": "^4.4.4",
88
- "typescript": "^5.9.3",
89
- "typescript-eslint": "^8.56.1",
90
- "vite": "8.0.0-beta.16",
91
- "vitest": "^4.0.18"
86
+ "svelte": "^5.55.0",
87
+ "svelte-check": "^4.4.5",
88
+ "typescript": "^6.0.2",
89
+ "typescript-eslint": "^8.57.2",
90
+ "vite": "8.0.3",
91
+ "vitest": "^4.1.2"
92
92
  },
93
93
  "svelte": "./dist/index.js",
94
94
  "types": "./dist/index.d.ts",