noph-ui 0.32.8 → 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 (4) hide show
  1. package/dist/chip/AssistChip.svelte +8 -8
  2. package/dist/chip/FilterChip.svelte +53 -7
  3. package/dist/chip/InputChip.svelte +11 -3
  4. package/package.json +1 -1
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,6 +23,16 @@
23
23
  }: FilterChipProps = $props()
24
24
 
25
25
  let chipLabel: HTMLLabelElement | undefined = $state()
26
+ let pressed = $state(false)
27
+
28
+ const handlePointerDown = () => {
29
+ if (disabled) return
30
+ pressed = true
31
+ }
32
+
33
+ const handlePointerUp = () => {
34
+ pressed = false
35
+ }
26
36
 
27
37
  $effect(() => {
28
38
  if (!group || !value) return
@@ -46,10 +56,17 @@
46
56
  icon ? 'np-filter-chip-icon' : '',
47
57
  removable ? 'np-filter-chip-removable' : '',
48
58
  disabled ? 'np-filter-chip-disabled' : '',
59
+ pressed && 'np-filter-chip-pressed',
49
60
  attributes.class,
50
61
  ]}
51
62
  >
52
- <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
+ >
53
70
  {#if icon}
54
71
  <div class="np-chip-icon">
55
72
  {@render icon()}
@@ -94,7 +111,9 @@
94
111
  border-radius: var(--np-filter-chip-container-shape, var(--np-shape-corner-small));
95
112
  --np-icon-button-icon-color: var(--np-color-on-surface-variant);
96
113
  --np-icon-size: 1.125rem;
114
+ --np-ripple-pressed-opacity: 0.1;
97
115
  min-width: 0;
116
+ transition: box-shadow 150ms linear;
98
117
  }
99
118
  .np-filter-chip-label input {
100
119
  opacity: 0;
@@ -113,12 +132,24 @@
113
132
  z-index: 1;
114
133
  padding-inline: 1rem;
115
134
  overflow: hidden;
135
+ transition: padding 200ms ease;
116
136
  }
117
137
  .np-chip-icon-checked {
118
- 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;
119
146
  }
120
147
  .np-filter-chip:has(input:checked) .np-chip-icon-checked {
121
- display: flex;
148
+ width: 18px;
149
+ margin-inline-end: 0;
150
+ }
151
+ .np-filter-chip-icon .np-chip-icon-checked {
152
+ transition: none;
122
153
  }
123
154
  .np-filter-chip:has(input:checked) .np-chip-icon {
124
155
  display: none;
@@ -145,6 +176,7 @@
145
176
  line-height: 1.25rem;
146
177
  font-size: 0.875rem;
147
178
  font-weight: 500;
179
+ letter-spacing: 0.006rem;
148
180
  white-space: pre;
149
181
  overflow: hidden;
150
182
  text-overflow: ellipsis;
@@ -155,6 +187,9 @@
155
187
  inset: 0;
156
188
  border-radius: inherit;
157
189
  pointer-events: none;
190
+ transition:
191
+ background-color 150ms linear,
192
+ outline-color 150ms linear;
158
193
  }
159
194
  .np-filter-chip-default::before {
160
195
  outline-style: solid;
@@ -163,7 +198,7 @@
163
198
  outline-offset: -1px;
164
199
  }
165
200
  .np-filter-chip:has(input:checked)::before {
166
- outline-style: none;
201
+ outline-color: transparent;
167
202
  background-color: var(--np-color-secondary-container);
168
203
  }
169
204
  .np-filter-chip-elevated {
@@ -172,6 +207,20 @@
172
207
  .np-filter-chip-elevated::before {
173
208
  background-color: var(--np-color-surface-container-low);
174
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
+ }
175
224
  .np-filter-chip:has(input:checked) {
176
225
  --np-icon-button-icon-color: var(--np-color-on-secondary-container);
177
226
  }
@@ -208,9 +257,6 @@
208
257
  .np-filter-chip-disabled.np-filter-chip-elevated {
209
258
  box-shadow: none;
210
259
  }
211
- .np-filter-chip-disabled:has(input:checked)::before {
212
- opacity: 0.12;
213
- }
214
260
  .np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
215
261
  content: '';
216
262
  position: absolute;
package/dist/chip/InputChip.svelte CHANGED
@@ -67,6 +67,7 @@
67
67
  border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
68
68
  --np-icon-button-icon-color: var(--np-color-on-surface-variant);
69
69
  --np-icon-size: 1.125rem;
70
+ --np-ripple-pressed-opacity: 0.1;
70
71
  padding-inline-end: 1px;
71
72
  min-width: 0;
72
73
  }
@@ -85,13 +86,16 @@
85
86
  fill: currentColor;
86
87
  gap: 0.5rem;
87
88
  z-index: 1;
88
- padding-inline-start: 1rem;
89
+ padding-inline-start: 0.75rem;
89
90
  overflow: hidden;
90
91
  }
91
92
  .np-chip-icon {
92
- color: var(--np-color-primary);
93
+ color: var(--np-color-on-surface-variant);
93
94
  display: flex;
94
95
  }
96
+ .np-input-chip-selected .np-chip-icon {
97
+ color: var(--np-color-primary);
98
+ }
95
99
  .np-input-chip-icon .np-input-chip-label {
96
100
  padding-inline-start: 0.5rem;
97
101
  }
@@ -99,6 +103,7 @@
99
103
  line-height: 1.25rem;
100
104
  font-size: 0.875rem;
101
105
  font-weight: 500;
106
+ letter-spacing: 0.006rem;
102
107
  padding-inline-end: 1px;
103
108
  white-space: pre;
104
109
  overflow: hidden;
@@ -114,9 +119,12 @@
114
119
  outline-color: var(--np-input-chip-outline-color, var(--np-color-outline-variant));
115
120
  outline-width: 1px;
116
121
  outline-offset: -1px;
122
+ transition:
123
+ background-color 150ms linear,
124
+ outline-color 150ms linear;
117
125
  }
118
126
  .np-input-chip-selected::before {
119
- outline-style: none;
127
+ outline-color: transparent;
120
128
  background-color: var(--np-color-secondary-container);
121
129
  }
122
130
  .np-input-chip-selected {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.32.8",
3
+ "version": "0.32.9",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {