@f-ewald/components 1.0.2 → 1.1.0

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 (111) hide show
  1. package/README.md +4 -1
  2. package/custom-elements.json +7 -7
  3. package/dist/address-autocomplete.d.ts.map +1 -1
  4. package/dist/address-autocomplete.js +3 -1
  5. package/dist/address-autocomplete.js.map +1 -1
  6. package/dist/autocomplete-input.d.ts.map +1 -1
  7. package/dist/autocomplete-input.js +3 -1
  8. package/dist/autocomplete-input.js.map +1 -1
  9. package/dist/calendar-month.d.ts.map +1 -1
  10. package/dist/calendar-month.js +9 -8
  11. package/dist/calendar-month.js.map +1 -1
  12. package/dist/chat-message.d.ts.map +1 -1
  13. package/dist/chat-message.js +15 -5
  14. package/dist/chat-message.js.map +1 -1
  15. package/dist/confirm-dialog.d.ts.map +1 -1
  16. package/dist/confirm-dialog.js +24 -6
  17. package/dist/confirm-dialog.js.map +1 -1
  18. package/dist/copy-link-button.d.ts.map +1 -1
  19. package/dist/copy-link-button.js +4 -2
  20. package/dist/copy-link-button.js.map +1 -1
  21. package/dist/data-table.js +1 -1
  22. package/dist/data-table.js.map +1 -1
  23. package/dist/distribution-chart.d.ts +2 -2
  24. package/dist/distribution-chart.js +4 -4
  25. package/dist/distribution-chart.js.map +1 -1
  26. package/dist/dropdown-button.d.ts.map +1 -1
  27. package/dist/dropdown-button.js +13 -2
  28. package/dist/dropdown-button.js.map +1 -1
  29. package/dist/form-select.d.ts.map +1 -1
  30. package/dist/form-select.js +32 -8
  31. package/dist/form-select.js.map +1 -1
  32. package/dist/frame-box.js +3 -3
  33. package/dist/frame-box.js.map +1 -1
  34. package/dist/icon-button.d.ts +1 -1
  35. package/dist/icon-button.js +1 -1
  36. package/dist/icon-button.js.map +1 -1
  37. package/dist/kbd-hint.js +1 -1
  38. package/dist/kbd-hint.js.map +1 -1
  39. package/dist/map-circle.js +2 -2
  40. package/dist/map-circle.js.map +1 -1
  41. package/dist/map-pin.js +2 -2
  42. package/dist/map-pin.js.map +1 -1
  43. package/dist/percent-bar-chart.js +1 -1
  44. package/dist/percent-bar-chart.js.map +1 -1
  45. package/dist/photo-gallery.d.ts.map +1 -1
  46. package/dist/photo-gallery.js +33 -9
  47. package/dist/photo-gallery.js.map +1 -1
  48. package/dist/popover-panel.d.ts.map +1 -1
  49. package/dist/popover-panel.js +7 -4
  50. package/dist/popover-panel.js.map +1 -1
  51. package/dist/radio-cards.d.ts.map +1 -1
  52. package/dist/radio-cards.js +4 -3
  53. package/dist/radio-cards.js.map +1 -1
  54. package/dist/radio-pills.d.ts.map +1 -1
  55. package/dist/radio-pills.js +7 -4
  56. package/dist/radio-pills.js.map +1 -1
  57. package/dist/reveal-button.d.ts.map +1 -1
  58. package/dist/reveal-button.js +4 -1
  59. package/dist/reveal-button.js.map +1 -1
  60. package/dist/slide-panel.d.ts.map +1 -1
  61. package/dist/slide-panel.js +8 -5
  62. package/dist/slide-panel.js.map +1 -1
  63. package/dist/stat-meter.js +5 -5
  64. package/dist/stat-meter.js.map +1 -1
  65. package/dist/status-pill.js +2 -2
  66. package/dist/status-pill.js.map +1 -1
  67. package/dist/tile-grid.js +1 -1
  68. package/dist/tile-grid.js.map +1 -1
  69. package/dist/toast-notification.d.ts.map +1 -1
  70. package/dist/toast-notification.js +10 -5
  71. package/dist/toast-notification.js.map +1 -1
  72. package/dist/tokens.css +10 -0
  73. package/dist/tokens.d.ts.map +1 -1
  74. package/dist/tokens.js +15 -2
  75. package/dist/tokens.js.map +1 -1
  76. package/dist/ui-button.d.ts.map +1 -1
  77. package/dist/ui-button.js +3 -1
  78. package/dist/ui-button.js.map +1 -1
  79. package/dist/user-avatar.js +1 -1
  80. package/dist/user-avatar.js.map +1 -1
  81. package/dist/weight-bar-chart.js +2 -2
  82. package/dist/weight-bar-chart.js.map +1 -1
  83. package/docs/address-autocomplete.md +1 -0
  84. package/docs/autocomplete-input.md +1 -0
  85. package/docs/calendar-month.md +6 -1
  86. package/docs/chat-message.md +2 -0
  87. package/docs/confirm-dialog.md +3 -0
  88. package/docs/data-table.md +1 -0
  89. package/docs/design-language.md +68 -40
  90. package/docs/distribution-chart.md +3 -2
  91. package/docs/dropdown-button.md +2 -0
  92. package/docs/form-select.md +2 -0
  93. package/docs/frame-box.md +3 -1
  94. package/docs/icon-button.md +1 -1
  95. package/docs/kbd-hint.md +1 -0
  96. package/docs/map-circle.md +2 -0
  97. package/docs/map-pin.md +2 -0
  98. package/docs/photo-gallery.md +1 -0
  99. package/docs/popover-panel.md +3 -1
  100. package/docs/radio-cards.md +2 -0
  101. package/docs/radio-pills.md +1 -0
  102. package/docs/reveal-button.md +3 -1
  103. package/docs/slide-panel.md +3 -1
  104. package/docs/stat-meter.md +3 -0
  105. package/docs/status-pill.md +1 -0
  106. package/docs/toast-notification.md +2 -0
  107. package/docs/ui-button.md +2 -0
  108. package/docs/user-avatar.md +1 -0
  109. package/docs/weight-bar-chart.md +0 -1
  110. package/llms.txt +27 -27
  111. package/package.json +1 -3
package/llms.txt CHANGED
@@ -35,7 +35,7 @@ Import: `import "@f-ewald/components/address-autocomplete.js";`
35
35
 
36
36
  Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `types` (attribute `types`) : string, default "address"; `endpoint` (attribute `endpoint`) : string, default "https://api.mapbox.com/search/geocode/v6/forward"; `accessToken` (attribute `access-token`) : string, default ""; `bbox` (attribute `bbox`) : string, default ""; `proximity` (attribute `proximity`) : string, default ""; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `suggestions` (JS property only) : AddressSuggestion[] | null, default null; `selectedSuggestion` (JS property only) : AddressSuggestion | null, default —
37
37
  Events: `address-select`
38
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
38
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
39
39
 
40
40
  Example:
41
41
  ```html
@@ -85,7 +85,7 @@ Import: `import "@f-ewald/components/autocomplete-input.js";`
85
85
 
86
86
  Properties: `value` (attribute `value`) : string, default ""; `placeholder` (attribute `placeholder`) : string, default ""; `required` (attribute `required`) : boolean, default false; `disabled` (attribute `disabled`) : boolean, default false; `endpoint` (attribute `endpoint`) : string, default ""; `queryParam` (attribute `query-param`) : string, default "q"; `debounce` (attribute `debounce`) : number, default 300; `minLength` (attribute `min-length`) : number, default 3; `options` (JS property only) : AutocompleteOption[] | null, default null; `selectedOption` (JS property only) : AutocompleteOption | null, default —
87
87
  Events: `option-select`
88
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
88
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
89
89
 
90
90
  Example:
91
91
  ```html
@@ -153,7 +153,7 @@ Import: `import "@f-ewald/components/calendar-month.js";`
153
153
 
154
154
  Properties: `year` (attribute `year`) : number, default —; `month` (attribute `month`) : number, default 1
155
155
  Events: none
156
- CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-hover-overlay`, `--ui-info`, `--ui-primary`, `--ui-radius-sm`, `--ui-success`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
156
+ CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-lg`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-font-weight-bold`, `--ui-font-weight-medium`, `--ui-font-weight-regular`, `--ui-font-weight-semibold`, `--ui-hover-overlay`, `--ui-info`, `--ui-line-height-tight`, `--ui-primary`, `--ui-radius-sm`, `--ui-success`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
157
157
 
158
158
  Example:
159
159
  ```html
@@ -213,7 +213,7 @@ Import: `import "@f-ewald/components/chat-message.js";`
213
213
 
214
214
  Properties: `role` (attribute `role`) : ChatMessageRole, default "agent"; `variant` (attribute `variant`) : ChatMessageVariant, default "normal"; `author` (attribute `author`) : string, default ""; `timestamp` (attribute `timestamp`) : string | null, default null; `summary` (attribute `summary`) : string, default ""; `collapsible` (attribute `collapsible`) : boolean, default false; `collapsed` (attribute `collapsed`) : boolean, default false
215
215
  Events: `toggle`
216
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-mono`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
216
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-mono`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-line-height-normal`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
217
217
 
218
218
  Example:
219
219
  ```html
@@ -238,7 +238,7 @@ Import: `import "@f-ewald/components/confirm-dialog.js";`
238
238
 
239
239
  Properties: `open` (attribute `open`) : boolean, default false; `confirmLabel` (attribute `confirm-label`) : string, default "Delete"; `cancelLabel` (attribute `cancel-label`) : string, default "Cancel"; `danger` (attribute `danger`) : boolean, default true; `busy` (attribute `busy`) : boolean, default false; `error` (attribute `error`) : string | null, default null
240
240
  Events: `confirm`, `cancel`
241
- CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
241
+ CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
242
242
 
243
243
  Example:
244
244
  ```html
@@ -281,7 +281,7 @@ Import: `import "@f-ewald/components/data-table.js";`
281
281
 
282
282
  Properties: `columns` (JS property only) : DataTableColumn[], default []; `rows` (JS property only) : unknown[], default []; `rowKey` (JS property only) : (row: unknown, index: number) => string | number, default —; `renderCell` (JS property only) : (row: unknown, key: string) => unknown, default —; `rowHref` (JS property only) : ((row: unknown) => string | null) | null, default null; `rowLabel` (JS property only) : ((row: unknown) => string) | null, default null
283
283
  Events: none
284
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
284
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
285
285
 
286
286
  Example:
287
287
  ```html
@@ -326,15 +326,15 @@ markers. The SVG viewBox is kept in sync with the element's pixel width via
326
326
  ResizeObserver so that font sizes and stroke widths are always in real pixels
327
327
  regardless of container width.
328
328
 
329
- Pass `fontSize` to control all text size (default 11). Pass a single
329
+ Pass `fontSize` to control all text size (default 10). Pass a single
330
330
  `{label:'', value}` for a single-value display or multiple
331
331
  `{label:'A'|'B'|...}` entries to compare several values.
332
332
 
333
333
  Import: `import "@f-ewald/components/distribution-chart.js";`
334
334
 
335
- Properties: `metric` (attribute `metric`) : string, default ""; `values` (JS property only) : DistributionValue[], default []; `markerColors` (JS property only) : string[], default ["#4f46e5", "#d97706", "#0d9488", "#e11d48"]; `fontSize` (attribute `font-size`) : number, default 11
335
+ Properties: `metric` (attribute `metric`) : string, default ""; `values` (JS property only) : DistributionValue[], default []; `markerColors` (JS property only) : string[], default ["#4f46e5", "#d97706", "#0d9488", "#e11d48"]; `fontSize` (attribute `font-size`) : number, default 10
336
336
  Events: none
337
- CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text-muted`
337
+ CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-size-xs`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text-muted`
338
338
 
339
339
  Example:
340
340
  ```html
@@ -355,7 +355,7 @@ Import: `import "@f-ewald/components/dropdown-button.js";`
355
355
 
356
356
  Properties: `label` (attribute `label`) : string, default ""; `options` (JS property only) : DropdownOption[], default []; `disabled` (attribute `disabled`) : boolean, default false
357
357
  Events: `select`
358
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
358
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
359
359
 
360
360
  Example:
361
361
  ```html
@@ -415,7 +415,7 @@ Import: `import "@f-ewald/components/form-select.js";`
415
415
 
416
416
  Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false; `searchable` (attribute `searchable`) : boolean, default false
417
417
  Events: `change`
418
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
418
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-line-height-tight`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
419
419
 
420
420
  Example:
421
421
  ```html
@@ -447,7 +447,7 @@ Import: `import "@f-ewald/components/frame-box.js";`
447
447
 
448
448
  Properties: `label` (attribute `label`) : string, default ""
449
449
  Events: none
450
- CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-xs`, `--ui-radius-sm`, `--ui-surface`, `--ui-text-muted`
450
+ CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-xs`, `--ui-font-weight-semibold`, `--ui-radius`, `--ui-surface`, `--ui-text-muted`, `--ui-tracking-wide`
451
451
 
452
452
  Example:
453
453
  ```html
@@ -533,7 +533,7 @@ Import: `import "@f-ewald/components/kbd-hint.js";`
533
533
 
534
534
  Properties: `keys` (attribute `keys`) : string, default ""; `platform` (attribute `platform`) : KbdPlatform, default "auto"
535
535
  Events: none
536
- CSS custom properties: `--ui-font-mono`, `--ui-font-size-xs`, `--ui-radius-sm`
536
+ CSS custom properties: `--ui-font-mono`, `--ui-font-size-xs`, `--ui-line-height-glyph`, `--ui-radius-sm`
537
537
 
538
538
  Example:
539
539
  ```html
@@ -574,7 +574,7 @@ Import: `import "@f-ewald/components/map-circle.js";`
574
574
 
575
575
  Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 18; `ringWidth` (attribute `ring-width`) : number, default 4; `highlighted` (attribute `highlighted`) : boolean, default false
576
576
  Events: none
577
- CSS custom properties: `--ui-font`
577
+ CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
578
578
 
579
579
  Example:
580
580
  ```html
@@ -594,7 +594,7 @@ Import: `import "@f-ewald/components/map-pin.js";`
594
594
 
595
595
  Properties: `color` (attribute `color`) : string, default "#4f46e5"; `size` (attribute `size`) : number, default 32; `highlighted` (attribute `highlighted`) : boolean, default false
596
596
  Events: none
597
- CSS custom properties: `--ui-font`
597
+ CSS custom properties: `--ui-font`, `--ui-font-weight-bold`, `--ui-line-height-glyph`
598
598
 
599
599
  Example:
600
600
  ```html
@@ -633,7 +633,7 @@ Import: `import "@f-ewald/components/photo-gallery.js";`
633
633
 
634
634
  Properties: `currentIndex` (attribute `current-index`) : number, default 0; `delay` (attribute `delay`) : number, default 0; `showControls` (attribute `show-controls`) : boolean, default true; `showCounter` (attribute `show-counter`) : boolean, default false; `showIndicators` (attribute `show-indicators`) : boolean, default false; `showAutoplayControl` (attribute `show-autoplay-control`) : boolean, default true; `paused` (attribute `paused`) : boolean, default false; `aspectRatio` (attribute `aspect-ratio`) : string, default "16 / 9"; `objectFit` (attribute `object-fit`) : PhotoGalleryObjectFit, default "cover"
635
635
  Events: `slide-change`
636
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
636
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
637
637
 
638
638
  Example:
639
639
  ```html
@@ -673,7 +673,7 @@ Import: `import "@f-ewald/components/popover-panel.js";`
673
673
 
674
674
  Properties: `open` (attribute `open`) : boolean, default false; `heading` (attribute `heading`) : string, default ""; `centered` (attribute `centered`) : boolean, default false
675
675
  Events: `panel-close`
676
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-overlay`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
676
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-lg`, `--ui-font-weight-semibold`, `--ui-line-height-tight`, `--ui-overlay`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
677
677
 
678
678
  Example:
679
679
  ```html
@@ -726,7 +726,7 @@ Import: `import "@f-ewald/components/radio-cards.js";`
726
726
 
727
727
  Properties: `options` (JS property only) : RadioCardOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
728
728
  Events: `change`
729
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
729
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-regular`, `--ui-font-weight-semibold`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
730
730
 
731
731
  Example:
732
732
  ```html
@@ -754,7 +754,7 @@ Import: `import "@f-ewald/components/radio-pills.js";`
754
754
 
755
755
  Properties: `options` (JS property only) : RadioPillOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
756
756
  Events: `change`
757
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-surface-muted`, `--ui-text`
757
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-line-height-tight`, `--ui-primary`, `--ui-surface-muted`, `--ui-text`
758
758
 
759
759
  Example:
760
760
  ```html
@@ -797,7 +797,7 @@ Import: `import "@f-ewald/components/reveal-button.js";`
797
797
 
798
798
  Properties: `label` (attribute `label`) : string, default "Reveal hidden content"; `disabled` (attribute `disabled`) : boolean, default false
799
799
  Events: none
800
- CSS custom properties: `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`
800
+ CSS custom properties: `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`
801
801
 
802
802
  Example:
803
803
  ```html
@@ -834,7 +834,7 @@ Import: `import "@f-ewald/components/slide-panel.js";`
834
834
 
835
835
  Properties: `open` (attribute `open`) : boolean, default false; `heading` (attribute `heading`) : string, default ""
836
836
  Events: `panel-close`
837
- CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
837
+ CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-lg`, `--ui-font-weight-semibold`, `--ui-line-height-tight`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
838
838
 
839
839
  Example:
840
840
  ```html
@@ -854,7 +854,7 @@ Import: `import "@f-ewald/components/stat-meter.js";`
854
854
 
855
855
  Properties: `label` (attribute `label`) : string, default ""; `percent` (attribute `percent`) : number | null, default null; `color` (attribute `color`) : string, default ""
856
856
  Events: none
857
- CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-success`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
857
+ CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-font-weight-semibold`, `--ui-success`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`, `--ui-tracking-wide`
858
858
 
859
859
  Example:
860
860
  ```html
@@ -873,7 +873,7 @@ Import: `import "@f-ewald/components/status-pill.js";`
873
873
 
874
874
  Properties: `label` (attribute `label`) : string, default ""; `color` (attribute `color`) : StatusPillColor, default "neutral"; `spinner` (attribute `spinner`) : boolean, default false
875
875
  Events: none
876
- CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-info`, `--ui-primary`, `--ui-success`, `--ui-text-muted`, `--ui-warning`
876
+ CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-info`, `--ui-primary`, `--ui-success`, `--ui-text-muted`, `--ui-warning`
877
877
 
878
878
  Example:
879
879
  ```html
@@ -932,7 +932,7 @@ Import: `import "@f-ewald/components/toast-notification.js";`
932
932
 
933
933
  Properties: none
934
934
  Events: none
935
- CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-hover-overlay`, `--ui-info`, `--ui-on-accent`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`
935
+ CSS custom properties: `--ui-danger`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-hover-overlay`, `--ui-info`, `--ui-line-height-glyph`, `--ui-line-height-normal`, `--ui-on-accent`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-success`, `--ui-text`
936
936
 
937
937
  Example:
938
938
  ```html
@@ -962,7 +962,7 @@ Import: `import "@f-ewald/components/ui-button.js";`
962
962
 
963
963
  Properties: `variant` (attribute `variant`) : ButtonVariant, default "primary"; `href` (attribute `href`) : string | null, default null; `type` (attribute `type`) : "button" | "submit" | "reset", default "button"; `disabled` (attribute `disabled`) : boolean, default false; `busy` (attribute `busy`) : boolean, default false
964
964
  Events: none
965
- CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
965
+ CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-danger-hover`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-text`, `--ui-text-muted`
966
966
 
967
967
  Example:
968
968
  ```html
@@ -986,7 +986,7 @@ Import: `import "@f-ewald/components/user-avatar.js";`
986
986
 
987
987
  Properties: `src` (attribute `src`) : string | null, default null; `name` (attribute `name`) : string | null, default null; `size` (attribute `size`) : string | number, default 32
988
988
  Events: none
989
- CSS custom properties: `--ui-font`, `--ui-on-accent`, `--ui-primary`
989
+ CSS custom properties: `--ui-font`, `--ui-font-weight-semibold`, `--ui-on-accent`, `--ui-primary`
990
990
 
991
991
  Example:
992
992
  ```html
@@ -1006,7 +1006,7 @@ Import: `import "@f-ewald/components/weight-bar-chart.js";`
1006
1006
 
1007
1007
  Properties: `items` (JS property only) : WeightBarItem[], default []
1008
1008
  Events: none
1009
- CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
1009
+ CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
1010
1010
 
1011
1011
  Example:
1012
1012
  ```html
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@f-ewald/components",
3
3
  "private": false,
4
- "version": "1.0.2",
4
+ "version": "1.1.0",
5
5
  "description": "A collection of universally usable web components for various tasks.",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
@@ -46,8 +46,6 @@
46
46
  "mcp": "node dist/mcp-server.js",
47
47
  "test": "playwright test",
48
48
  "test:design": "playwright test --config playwright.design.config.ts",
49
- "test:visual": "playwright test --config playwright.visual.config.ts",
50
- "test:visual:update": "playwright test --config playwright.visual.config.ts --update-snapshots",
51
49
  "test:site": "playwright test --config playwright.site.config.ts",
52
50
  "prepublishOnly": "npm run build && npm run docs && npm run test"
53
51
  },