noph-ui 0.12.3 → 0.12.4

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/README.md +2 -2
  2. package/dist/select/Select.svelte +28 -7
  3. package/dist/text-field/TextField.svelte +34 -13
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -65,7 +65,7 @@ Beta (No breaking changes expected)
65
65
  - Ripple
66
66
  - Segmented buttons
67
67
  - Snackbar
68
- - Text fields (Theming missing)
68
+ - Text fields
69
69
 
70
70
  In progress (Breaking changes expected)
71
71
 
@@ -75,7 +75,7 @@ In progress (Breaking changes expected)
75
75
  - Navigation Drawer (Docs missing)
76
76
  - Navigation Rail (Badge is missing + Docs missing)
77
77
  - Tooltips (Positioning missing)
78
- - Select (iOS issues)
78
+ - Select (iOS issues + Docs missing)
79
79
 
80
80
  Pending
81
81
 
package/dist/select/Select.svelte CHANGED
@@ -204,6 +204,9 @@
204
204
  --np-menu-position-area-fallback="top span-right"
205
205
  --np-menu-position-area="bottom span-right"
206
206
  --np-menu-margin="2px 0"
207
+ --np-menu-container-shape={variant === 'outlined'
208
+ ? 'var(--np-outlined-select-text-field-container-shape)'
209
+ : 'var(--np-filled-select-text-field-container-shape)'}
207
210
  anchor={element}
208
211
  ontoggle={({ newState }) => {
209
212
  if (newState === 'open') {
@@ -293,7 +296,7 @@
293
296
  }
294
297
  .background {
295
298
  background: var(
296
- --np-text-field-filled-background-color,
299
+ --np-filled-select-text-field-container-color,
297
300
  var(--np-color-surface-container-highest)
298
301
  );
299
302
  }
@@ -319,14 +322,32 @@
319
322
  position: relative;
320
323
  }
321
324
  .outlined .container-overflow {
322
- border-start-start-radius: var(--np-shape-corner-extra-small);
323
- border-start-end-radius: var(--np-shape-corner-extra-small);
324
- border-end-end-radius: var(--np-shape-corner-extra-small);
325
- border-end-start-radius: var(--np-shape-corner-extra-small);
325
+ border-start-start-radius: var(
326
+ --np-outlined-select-text-field-container-shape,
327
+ var(--np-shape-corner-extra-small)
328
+ );
329
+ border-start-end-radius: var(
330
+ --np-outlined-select-text-field-container-shape,
331
+ var(--np-shape-corner-extra-small)
332
+ );
333
+ border-end-end-radius: var(
334
+ --np-outlined-select-text-field-container-shape,
335
+ var(--np-shape-corner-extra-small)
336
+ );
337
+ border-end-start-radius: var(
338
+ --np-outlined-select-text-field-container-shape,
339
+ var(--np-shape-corner-extra-small)
340
+ );
326
341
  }
327
342
  .container-overflow {
328
- border-start-start-radius: var(--np-shape-corner-extra-small);
329
- border-start-end-radius: var(--np-shape-corner-extra-small);
343
+ border-start-start-radius: var(
344
+ --np-filled-select-text-field-container-shape,
345
+ var(--np-shape-corner-extra-small)
346
+ );
347
+ border-start-end-radius: var(
348
+ --np-filled-select-text-field-container-shape,
349
+ var(--np-shape-corner-extra-small)
350
+ );
330
351
  border-end-end-radius: var(--np-shape-corner-none);
331
352
  border-end-start-radius: var(--np-shape-corner-none);
332
353
  display: flex;
package/dist/text-field/TextField.svelte CHANGED
@@ -63,10 +63,10 @@
63
63
 
64
64
  <label
65
65
  style={(variant === 'outlined'
66
- ? '--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
66
+ ? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
67
67
  : !label?.length
68
- ? '--top-space:1rem;--bottom-space:1rem;'
69
- : '') + style}
68
+ ? '--_label-text-color:var(--np-filled-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem; '
69
+ : '--_label-text-color:var(--np-filled-text-field-label-text-color); ') + style}
70
70
  class={['text-field', attributes.class]}
71
71
  bind:this={element}
72
72
  >
@@ -197,7 +197,10 @@
197
197
  width: 100%;
198
198
  }
199
199
  .active-indicator::after {
200
- border-bottom-color: var(--np-color-primary);
200
+ border-bottom-color: var(
201
+ --np-filled-text-field-focus-active-indicator-color,
202
+ var(--np-color-primary)
203
+ );
201
204
  border-bottom-width: 3px;
202
205
  }
203
206
  .error .active-indicator::before {
@@ -213,7 +216,7 @@
213
216
  }
214
217
  .background {
215
218
  background: var(
216
- --np-text-field-filled-background-color,
219
+ --np-filled-text-field-container-color,
217
220
  var(--np-color-surface-container-highest)
218
221
  );
219
222
  }
@@ -239,14 +242,32 @@
239
242
  position: relative;
240
243
  }
241
244
  .outlined .container-overflow {
242
- border-start-start-radius: var(--np-shape-corner-extra-small);
243
- border-start-end-radius: var(--np-shape-corner-extra-small);
244
- border-end-end-radius: var(--np-shape-corner-extra-small);
245
- border-end-start-radius: var(--np-shape-corner-extra-small);
245
+ border-start-start-radius: var(
246
+ --np-outlined-text-field-container-shape,
247
+ var(--np-shape-corner-extra-small)
248
+ );
249
+ border-start-end-radius: var(
250
+ --np-outlined-text-field-container-shape,
251
+ var(--np-shape-corner-extra-small)
252
+ );
253
+ border-end-end-radius: var(
254
+ --np-outlined-text-field-container-shape,
255
+ var(--np-shape-corner-extra-small)
256
+ );
257
+ border-end-start-radius: var(
258
+ --np-outlined-text-field-container-shape,
259
+ var(--np-shape-corner-extra-small)
260
+ );
246
261
  }
247
262
  .container-overflow {
248
- border-start-start-radius: var(--np-shape-corner-extra-small);
249
- border-start-end-radius: var(--np-shape-corner-extra-small);
263
+ border-start-start-radius: var(
264
+ --np-filled-text-field-container-shape,
265
+ var(--np-shape-corner-extra-small)
266
+ );
267
+ border-start-end-radius: var(
268
+ --np-filled-text-field-container-shape,
269
+ var(--np-shape-corner-extra-small)
270
+ );
250
271
  border-end-end-radius: var(--np-shape-corner-none);
251
272
  border-end-start-radius: var(--np-shape-corner-none);
252
273
  display: flex;
@@ -543,7 +564,7 @@
543
564
  }
544
565
  .field:has(input:focus-visible) .label,
545
566
  .field:has(textarea:focus-visible) .label {
546
- color: var(--np-color-primary);
567
+ color: var(--_label-text-color, var(--np-color-primary));
547
568
  }
548
569
  .error .label,
549
570
  .error:has(input:focus-visible) .label,
@@ -698,7 +719,7 @@
698
719
 
699
720
  .field:has(input:focus-visible) .np-outline,
700
721
  .field:has(textarea:focus-visible) .np-outline {
701
- border-color: var(--np-color-primary);
722
+ border-color: var(--np-outlined-text-field-focus-outline-color, var(--np-color-primary));
702
723
  color: var(--np-color-primary);
703
724
  }
704
725
  .error .np-outline,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.12.3",
3
+ "version": "0.12.4",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {