@boostdev/design-system-components 1.2.2 → 1.2.3

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 (32) hide show
  1. package/AGENTS.md +5 -0
  2. package/README.md +21 -4
  3. package/dist/client.cjs +50 -50
  4. package/dist/client.css +506 -503
  5. package/dist/client.js +50 -50
  6. package/dist/index.cjs +50 -50
  7. package/dist/index.css +506 -503
  8. package/dist/index.js +50 -50
  9. package/package.json +3 -3
  10. package/src/components/interaction/Button/Button.module.css +1 -4
  11. package/src/components/interaction/Dialog/Dialog.module.css +1 -1
  12. package/src/components/interaction/Drawer/Drawer.module.css +1 -1
  13. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +4 -0
  14. package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +4 -4
  15. package/src/components/interaction/form/Combobox/Combobox.module.css +1 -1
  16. package/src/components/interaction/form/FormInput/FormInput.module.css +1 -1
  17. package/src/components/interaction/form/NumberInput/NumberInput.module.css +1 -1
  18. package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css +5 -5
  19. package/src/components/interaction/form/Select/Select.module.css +1 -1
  20. package/src/components/interaction/form/Slider/Slider.module.css +4 -4
  21. package/src/components/interaction/form/Switch/Switch.module.css +3 -3
  22. package/src/components/layout/IconWrapper/IconWrapper.module.css +1 -1
  23. package/src/components/ui/Alert/Alert.module.css +1 -1
  24. package/src/components/ui/Avatar/Avatar.module.css +1 -1
  25. package/src/components/ui/Badge/Badge.module.css +1 -1
  26. package/src/components/ui/Calendar/Calendar.module.css +2 -2
  27. package/src/components/ui/Carousel/Carousel.module.css +1 -1
  28. package/src/components/ui/Loading/Loading.module.css +1 -1
  29. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +1 -1
  30. package/src/components/ui/Pagination/Pagination.module.css +5 -1
  31. package/src/components/ui/Progress/Progress.module.css +2 -2
  32. package/src/components/ui/Tooltip/Tooltip.module.css +1 -1
package/src/components/interaction/form/FormInput/FormInput.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  padding: var(--bds-space_s);
13
13
  border: var(--input_border, none);
14
14
  --bdc_color: currentcolor;
15
- --bdc-outline_radius: var(--bds-border_radius--xs);
15
+ --bdc-outline_radius: var(--bds-border_radius--full);
16
16
 
17
17
  border-radius: var(--input_radius, var(--bdc-outline_radius));
18
18
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));
package/src/components/interaction/form/NumberInput/NumberInput.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  align-items: stretch;
10
10
  border: var(--numberInput_border, none);
11
11
  --bdc_color: currentcolor;
12
- --bdc-outline_radius: var(--bds-border_radius--xs);
12
+ --bdc-outline_radius: var(--bds-border_radius--full);
13
13
 
14
14
  --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
15
15
 
package/src/components/interaction/form/SegmentedControl/SegmentedControl.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  grid-auto-columns: 1fr;
7
7
  padding: var(--bds-space_xxxs);
8
8
  background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
9
- border-radius: var(--control_radius, var(--bds-border_radius--m));
9
+ border-radius: var(--control_radius, var(--bds-border_radius--full));
10
10
  gap: 0;
11
11
  }
12
12
 
@@ -16,7 +16,7 @@
16
16
  inset-block: var(--bds-space_xxxs);
17
17
  inset-inline-start: var(--bds-space_xxxs);
18
18
  inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
19
- border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
19
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
20
20
  background-color: var(--control_thumb-bg, var(--bds-color_interactive));
21
21
  box-shadow: var(--bds-shadow_s);
22
22
  pointer-events: none;
@@ -30,7 +30,7 @@
30
30
  inset-block: var(--bds-space_xxxs);
31
31
  inset-inline-start: var(--bds-space_xxxs);
32
32
  inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
33
- border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
33
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
34
34
  pointer-events: none;
35
35
  z-index: 2;
36
36
  display: none;
@@ -46,7 +46,7 @@
46
46
  align-items: center;
47
47
  justify-content: center;
48
48
  cursor: pointer;
49
- border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
49
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
50
50
  padding: var(--bds-space_xs) var(--bds-space_m);
51
51
  font-size: var(--bds-font_size--body);
52
52
  font-family: var(--bds-font_family--body);
@@ -66,7 +66,7 @@
66
66
  .item:focus-visible {
67
67
  outline: var(--bds-outline_default);
68
68
  outline-offset: calc(var(--bds-outline_offset) * -1);
69
- border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
69
+ border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
70
70
  }
71
71
 
72
72
  .item.--active {
package/src/components/interaction/form/Select/Select.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  padding-inline-end: var(--bds-space_xxl);
20
20
  border: var(--select_border, none);
21
21
  --bdc_color: currentcolor;
22
- --bdc-outline_radius: var(--bds-border_radius--xs);
22
+ --bdc-outline_radius: var(--bds-border_radius--full);
23
23
 
24
24
  border-radius: var(--select_radius, var(--bdc-outline_radius));
25
25
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));
package/src/components/interaction/form/Slider/Slider.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  appearance: none;
27
27
  inline-size: 100%;
28
28
  block-size: var(--slider_track-height);
29
- border-radius: 999px;
29
+ border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
30
30
  background: linear-gradient(
31
31
  to right,
32
32
  var(--slider_color-active, var(--bdc-color_active)) 0%,
@@ -41,7 +41,7 @@
41
41
  .slider:focus-visible {
42
42
  outline: var(--bds-outline_default);
43
43
  outline-offset: var(--bds-outline_offset);
44
- border-radius: 999px;
44
+ border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
45
45
  }
46
46
 
47
47
  .slider:disabled {
@@ -54,7 +54,7 @@
54
54
  appearance: none;
55
55
  inline-size: var(--slider_thumb-size);
56
56
  block-size: var(--slider_thumb-size);
57
- border-radius: 50%;
57
+ border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
58
58
  background-color: var(--slider_color-active, var(--bdc-color_active));
59
59
  box-shadow: var(--bds-shadow_s);
60
60
  transition: var(--bds-animation_transition);
@@ -66,7 +66,7 @@
66
66
  inline-size: var(--slider_thumb-size);
67
67
  block-size: var(--slider_thumb-size);
68
68
  border: none;
69
- border-radius: 50%;
69
+ border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
70
70
  background-color: var(--slider_color-active, var(--bdc-color_active));
71
71
  box-shadow: var(--bds-shadow_s);
72
72
  cursor: pointer;
package/src/components/interaction/form/Switch/Switch.module.css CHANGED
@@ -52,7 +52,7 @@
52
52
  align-items: center;
53
53
  inline-size: var(--switch_track-width);
54
54
  block-size: var(--switch_track-height);
55
- border-radius: 999px;
55
+ border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
56
56
  background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
57
57
  padding-inline: var(--switch_track-pad);
58
58
  pointer-events: none;
@@ -69,7 +69,7 @@
69
69
  display: block;
70
70
  inline-size: var(--switch_thumb-size);
71
71
  block-size: var(--switch_thumb-size);
72
- border-radius: 50%;
72
+ border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
73
73
  background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
74
74
  box-shadow: var(--bds-shadow_s);
75
75
  transition: var(--bds-animation_transition);
@@ -97,7 +97,7 @@
97
97
  .switch:focus-visible + .track {
98
98
  outline: var(--bds-outline_default);
99
99
  outline-offset: var(--bds-outline_offset);
100
- border-radius: 999px;
100
+ border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
101
101
  }
102
102
 
103
103
  /* Disabled state */
package/src/components/layout/IconWrapper/IconWrapper.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  inline-size: 2em;
4
4
  block-size: 2em;
5
5
  font-size: 3em;
6
- border-radius: 50%;
6
+ border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
7
7
  display: flex;
8
8
  align-items: center;
9
9
  justify-content: center;
package/src/components/ui/Alert/Alert.module.css CHANGED
@@ -65,7 +65,7 @@
65
65
  color: currentcolor;
66
66
  transition: var(--bds-animation_transition);
67
67
  border: var(--alert_dismiss-border, none);
68
- border-radius: 50%;
68
+ border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
69
69
  --bdc_color: currentcolor;
70
70
 
71
71
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
package/src/components/ui/Avatar/Avatar.module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  justify-content: center;
6
6
  width: var(--avatar_size, 3em);
7
7
  height: var(--avatar_size, 3em);
8
- border-radius: 50%;
8
+ border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
9
9
  overflow: hidden;
10
10
  flex-shrink: 0;
11
11
  }
package/src/components/ui/Badge/Badge.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  padding: var(--bds-space_xxs) var(--bds-space_xs);
7
- border-radius: var(--badge_radius, 2em);
7
+ border-radius: var(--badge_radius, var(--bds-border_radius--full));
8
8
  font-size: var(--badge_font-size, var(--bds-font_size--body--s));
9
9
  font-weight: var(--bds-font_weight--semibold);
10
10
  line-height: 1;
package/src/components/ui/Calendar/Calendar.module.css CHANGED
@@ -33,7 +33,7 @@
33
33
  justify-content: center;
34
34
  inline-size: 2rem;
35
35
  block-size: 2rem;
36
- border-radius: 50%;
36
+ border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
37
37
  cursor: pointer;
38
38
  color: var(--bds-color_on-bg);
39
39
  transition: var(--bds-animation_transition);
@@ -80,7 +80,7 @@
80
80
  justify-content: center;
81
81
  inline-size: 100%;
82
82
  aspect-ratio: 1;
83
- border-radius: 50%;
83
+ border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
84
84
  font-size: var(--bds-font_size--body--s);
85
85
  color: var(--bds-color_on-bg);
86
86
  cursor: pointer;
package/src/components/ui/Carousel/Carousel.module.css CHANGED
@@ -32,7 +32,7 @@
32
32
  justify-content: center;
33
33
  inline-size: 2.5rem;
34
34
  block-size: 2.5rem;
35
- border-radius: 50%;
35
+ border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
36
36
  background-color: var(--bds-color_bg);
37
37
  color: var(--bds-color_on-bg);
38
38
 
package/src/components/ui/Loading/Loading.module.css CHANGED
@@ -10,7 +10,7 @@
10
10
  block-size: 2.5em;
11
11
  border: 4px solid var(--bds-color_bg);
12
12
  border-block-start: 4px solid var(--bds-color_interactive);
13
- border-radius: 50%;
13
+ border-radius: var(--loading_radius, var(--bds-border_radius--circle));
14
14
  animation: spin 1s linear infinite;
15
15
  }
16
16
 
package/src/components/ui/NotificationBanner/NotificationBanner.module.css CHANGED
@@ -52,7 +52,7 @@
52
52
  flex-shrink: 0;
53
53
  cursor: pointer;
54
54
  color: currentcolor;
55
- border-radius: 50%;
55
+ border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
56
56
  border: var(--banner_dismiss-border, none);
57
57
  transition: var(--bds-animation_transition);
58
58
  --bdc_color: currentcolor;
package/src/components/ui/Pagination/Pagination.module.css CHANGED
@@ -13,6 +13,10 @@
13
13
  padding: 0;
14
14
  }
15
15
 
16
+ .list li {
17
+ list-style: none;
18
+ }
19
+
16
20
  .button {
17
21
  all: unset;
18
22
  display: inline-flex;
@@ -21,7 +25,7 @@
21
25
  min-inline-size: 2.25rem;
22
26
  block-size: 2.25rem;
23
27
  padding-inline: var(--bds-space_xs);
24
- border-radius: var(--bds-border_radius--xs);
28
+ border-radius: var(--pagination_radius, var(--bds-border_radius--full));
25
29
  background-color: var(--btn_bg, transparent);
26
30
 
27
31
  --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));
package/src/components/ui/Progress/Progress.module.css CHANGED
@@ -22,7 +22,7 @@
22
22
  inline-size: 100%;
23
23
  block-size: var(--progress_height, var(--bds-space_xs));
24
24
  background-color: var(--bds-color_bg--subtle);
25
- border-radius: 999px;
25
+ border-radius: var(--progress_radius, var(--bds-border_radius--full));
26
26
  overflow: hidden;
27
27
  }
28
28
 
@@ -33,7 +33,7 @@
33
33
  .fill {
34
34
  block-size: 100%;
35
35
  background-color: var(--progress_color-active, var(--bdc-color_active));
36
- border-radius: 999px;
36
+ border-radius: var(--progress_radius, var(--bds-border_radius--full));
37
37
  transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
38
38
  }
39
39
 
package/src/components/ui/Tooltip/Tooltip.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  position: absolute;
10
10
  z-index: var(--bds-z-index_popover);
11
11
  padding: var(--bds-space_xxs) var(--bds-space_xs);
12
- border-radius: var(--bds-border_radius--xs);
12
+ border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
13
13
  background-color: var(--tooltip_bg, var(--bds-color_on-bg));
14
14
  color: var(--tooltip_text, var(--bds-color_bg));
15
15
  font-size: var(--bds-font_size--body--s);