@boostdev/design-system-components 2.11.0 → 2.12.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 (44) hide show
  1. package/AGENTS.md +21 -0
  2. package/README.md +7 -0
  3. package/dist/client.cjs +52 -52
  4. package/dist/client.css +602 -602
  5. package/dist/client.js +52 -52
  6. package/dist/index.cjs +52 -52
  7. package/dist/index.css +602 -602
  8. package/dist/index.js +52 -52
  9. package/dist/web-components/{chunk-JUPCZVVW.js → chunk-FUQEFHRC.js} +1 -1
  10. package/dist/web-components/{chunk-BTCMJQKB.js → chunk-HRD3NOA3.js} +1 -1
  11. package/dist/web-components/{chunk-NIN3JO6Q.js → chunk-IDSM74LM.js} +1 -1
  12. package/dist/web-components/{chunk-47AT5KZD.js → chunk-J3HVUIUH.js} +1 -1
  13. package/dist/web-components/{chunk-QEF2IRID.js → chunk-PLWCDDP6.js} +1 -1
  14. package/dist/web-components/{chunk-DV5T43ZC.js → chunk-QKWXCBTH.js} +1 -1
  15. package/dist/web-components/{chunk-UO7ROSHD.js → chunk-X7PS7GSN.js} +1 -1
  16. package/dist/web-components/{chunk-U3YZE6R6.js → chunk-Z7XTADXX.js} +1 -1
  17. package/dist/web-components/index.js +8 -8
  18. package/dist/web-components/interaction/bds-dialog.js +1 -1
  19. package/dist/web-components/interaction/bds-drawer.js +1 -1
  20. package/dist/web-components/interaction/bds-dropdown-menu.js +1 -1
  21. package/dist/web-components/interaction/bds-popover.js +1 -1
  22. package/dist/web-components/interaction/bds-toast-provider.js +1 -1
  23. package/dist/web-components/interaction/form/bds-combobox.js +1 -1
  24. package/dist/web-components/ui/bds-calendar.js +1 -1
  25. package/dist/web-components/ui/bds-card.js +1 -1
  26. package/package.json +2 -2
  27. package/src/components/interaction/Command/Command.module.css +1 -1
  28. package/src/components/interaction/Dialog/Dialog.module.css +1 -1
  29. package/src/components/interaction/Drawer/Drawer.module.css +1 -1
  30. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +1 -1
  31. package/src/components/interaction/Popover/Popover.module.css +1 -1
  32. package/src/components/interaction/Toast/Toast.module.css +1 -1
  33. package/src/components/interaction/form/Combobox/Combobox.module.css +1 -1
  34. package/src/components/layout/Card/Card.module.css +1 -1
  35. package/src/components/ui/Calendar/Calendar.module.css +1 -1
  36. package/src/web-components/interaction/bds-dialog.ts +1 -1
  37. package/src/web-components/interaction/bds-drawer.ts +1 -1
  38. package/src/web-components/interaction/bds-dropdown-menu.ts +1 -1
  39. package/src/web-components/interaction/bds-popover.ts +1 -1
  40. package/src/web-components/interaction/bds-toast-provider.spec.ts +1 -1
  41. package/src/web-components/interaction/bds-toast-provider.ts +1 -1
  42. package/src/web-components/interaction/form/bds-combobox.ts +1 -1
  43. package/src/web-components/ui/bds-card.ts +1 -1
  44. package/src/web-components/ui/calendar-styles.ts +1 -1
@@ -30,7 +30,7 @@ import {
30
30
  } from "./chunk-VANAKB6D.js";
31
31
  import {
32
32
  BdsCombobox
33
- } from "./chunk-47AT5KZD.js";
33
+ } from "./chunk-J3HVUIUH.js";
34
34
  import {
35
35
  BdsFieldGroup
36
36
  } from "./chunk-SEO2F5KJ.js";
@@ -51,7 +51,7 @@ import {
51
51
  } from "./chunk-QZAIRJ75.js";
52
52
  import {
53
53
  BdsPopover
54
- } from "./chunk-QEF2IRID.js";
54
+ } from "./chunk-PLWCDDP6.js";
55
55
  import {
56
56
  BdsSkipLink
57
57
  } from "./chunk-66M6ETWD.js";
@@ -66,7 +66,7 @@ import {
66
66
  } from "./chunk-F3ZDNHZZ.js";
67
67
  import {
68
68
  BdsToastProvider
69
- } from "./chunk-BTCMJQKB.js";
69
+ } from "./chunk-HRD3NOA3.js";
70
70
  import {
71
71
  BdsTooltip
72
72
  } from "./chunk-M3ECULRH.js";
@@ -87,13 +87,13 @@ import {
87
87
  } from "./chunk-HGFCJXOQ.js";
88
88
  import {
89
89
  BdsDialog
90
- } from "./chunk-U3YZE6R6.js";
90
+ } from "./chunk-Z7XTADXX.js";
91
91
  import {
92
92
  BdsDrawer
93
- } from "./chunk-JUPCZVVW.js";
93
+ } from "./chunk-FUQEFHRC.js";
94
94
  import {
95
95
  BdsDropdownMenu
96
- } from "./chunk-NIN3JO6Q.js";
96
+ } from "./chunk-IDSM74LM.js";
97
97
  import {
98
98
  BdsPagination
99
99
  } from "./chunk-TMWXRHGF.js";
@@ -133,10 +133,10 @@ import {
133
133
  parseISO,
134
134
  sortRange,
135
135
  toISO
136
- } from "./chunk-UO7ROSHD.js";
136
+ } from "./chunk-X7PS7GSN.js";
137
137
  import {
138
138
  BdsCard
139
- } from "./chunk-DV5T43ZC.js";
139
+ } from "./chunk-QKWXCBTH.js";
140
140
  import {
141
141
  BdsCarousel
142
142
  } from "./chunk-OY74D4X6.js";
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsDialog
3
- } from "../chunk-U3YZE6R6.js";
3
+ } from "../chunk-Z7XTADXX.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsDialog
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsDrawer
3
- } from "../chunk-JUPCZVVW.js";
3
+ } from "../chunk-FUQEFHRC.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsDrawer
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsDropdownMenu
3
- } from "../chunk-NIN3JO6Q.js";
3
+ } from "../chunk-IDSM74LM.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsDropdownMenu
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsPopover
3
- } from "../chunk-QEF2IRID.js";
3
+ } from "../chunk-PLWCDDP6.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsPopover
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsToastProvider
3
- } from "../chunk-BTCMJQKB.js";
3
+ } from "../chunk-HRD3NOA3.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsToastProvider
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsCombobox
3
- } from "../../chunk-47AT5KZD.js";
3
+ } from "../../chunk-J3HVUIUH.js";
4
4
  import "../../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsCombobox
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsCalendar
3
- } from "../chunk-UO7ROSHD.js";
3
+ } from "../chunk-X7PS7GSN.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsCalendar
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BdsCard
3
- } from "../chunk-DV5T43ZC.js";
3
+ } from "../chunk-QKWXCBTH.js";
4
4
  import "../chunk-LGEZYFUU.js";
5
5
  export {
6
6
  BdsCard
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@boostdev/design-system-components",
3
- "version": "2.11.0",
3
+ "version": "2.12.0",
4
4
  "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
5
5
  "keywords": [
6
6
  "React",
@@ -338,7 +338,7 @@
338
338
  "changelog:unreleased": "pnpm exec git-cliff --unreleased"
339
339
  },
340
340
  "devDependencies": {
341
- "@boostdev/design-system-foundation": "^2.1.0",
341
+ "@boostdev/design-system-foundation": "^2.2.0",
342
342
  "@boostdev/design-system-react-native": "0.2.0",
343
343
  "@modelcontextprotocol/sdk": "^1.27.0",
344
344
  "@storybook/addon-docs": "8.6.14",
@@ -18,7 +18,7 @@
18
18
  .palette {
19
19
  display: flex;
20
20
  flex-direction: column;
21
- background-color: var(--command_color, var(--bds-color_bg));
21
+ background-color: var(--command_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
22
22
  color: var(--command_on-color, var(--bds-color_on-bg));
23
23
  overflow: hidden;
24
24
  max-block-size: 70vh;
@@ -9,7 +9,7 @@
9
9
  flex-direction: column;
10
10
  border-radius: var(--dialog_radius, var(--bdc-outline_radius));
11
11
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
12
- background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
12
+ background-color: var(--dialog_color ,var(--bds-color_bg--strong, var(--bds-color_grey--subtle)));
13
13
  color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
14
14
  padding: var(--bds-space_l);
15
15
  max-inline-size: 90svw;
@@ -11,7 +11,7 @@
11
11
  padding: 0;
12
12
  display: flex;
13
13
  flex-direction: column;
14
- background-color: var(--drawer_color, var(--bds-color_bg));
14
+ background-color: var(--drawer_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
15
15
  color: var(--drawer_on-color, var(--bds-color_on-bg));
16
16
  border: none;
17
17
  box-shadow: var(--drawer_shadow, var(--bds-shadow_xl));
@@ -15,7 +15,7 @@
15
15
  --bdc-outline_radius: var(--bds-border_radius--s);
16
16
 
17
17
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
18
- background-color: var(--dropdown_color, var(--bds-color_bg));
18
+ background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
19
19
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
20
20
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
21
21
  list-style: none;
@@ -26,7 +26,7 @@
26
26
  --bdc-outline_radius: var(--bds-border_radius--s);
27
27
 
28
28
  border-radius: var(--popover_radius, var(--bdc-outline_radius));
29
- background-color: var(--popover_color, var(--bds-color_bg));
29
+ background-color: var(--popover_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
30
30
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
31
31
  color: var(--popover_on-color, var(--bds-color_on-bg));
32
32
  font-size: var(--bds-font_size--body);
@@ -19,7 +19,7 @@
19
19
 
20
20
  /* Layered cascade: public overrides (--toast_color, --toast_on-color) win
21
21
  over per-variant defaults. Variants write to the inner --toast_*--variant slot. */
22
- background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
22
+ background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
23
23
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
24
24
  border-radius: var(--toast_radius, var(--bds-border_radius--s));
25
25
  box-shadow: var(--toast_shadow, var(--bds-shadow_s));
@@ -76,7 +76,7 @@
76
76
  --bdc-outline_radius: var(--bds-border_radius--s);
77
77
 
78
78
  border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
79
- background-color: var(--combobox_listbox-bg, var(--combobox_color_bg, var(--bds-color_bg)));
79
+ background-color: var(--combobox_listbox-bg, var(--combobox_color_bg, var(--bds-color_bg--strong, var(--bds-color_bg))));
80
80
  color: var(--combobox_on-color, var(--bds-color_on-bg));
81
81
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
82
82
  }
@@ -1,6 +1,6 @@
1
1
  @layer boostdev.component {
2
2
  .card {
3
- background-color: var(--card_color, var(--bds-color_bg));
3
+ background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
4
4
  color: var(--card_on-color, var(--bds-color_on-bg));
5
5
  border-radius: var(--card_radius, var(--bds-border_radius--m));
6
6
  transition: var(--card_transition, var(--bds-animation_transition));
@@ -3,7 +3,7 @@
3
3
  display: inline-block;
4
4
  inline-size: fit-content;
5
5
  max-inline-size: 100%;
6
- background-color: var(--bds-color_bg);
6
+ background-color: var(--bds-color_bg--strong, var(--bds-color_bg));
7
7
  border: var(--calendar_border, none);
8
8
  --bdc_color: var(--bds-color_bg--subtle);
9
9
  --bdc-outline_radius: var(--bds-border_radius--m);
@@ -54,7 +54,7 @@ export class BdsDialog extends LitElement {
54
54
  flex-direction: column;
55
55
  border-radius: var(--dialog_radius, var(--bdc-outline_radius));
56
56
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
57
- background-color: var(--dialog_color, var(--bds-color_grey--subtle));
57
+ background-color: var(--dialog_color, var(--bds-color_bg--strong, var(--bds-color_grey--subtle)));
58
58
  color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
59
59
  padding: var(--bds-space_l);
60
60
  max-inline-size: 90svw;
@@ -58,7 +58,7 @@ export class BdsDrawer extends LitElement {
58
58
  padding: 0;
59
59
  display: flex;
60
60
  flex-direction: column;
61
- background-color: var(--drawer_color, var(--bds-color_bg));
61
+ background-color: var(--drawer_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
62
62
  color: var(--drawer_on-color, var(--bds-color_on-bg));
63
63
  border: none;
64
64
  box-shadow: var(--bds-shadow_xl);
@@ -59,7 +59,7 @@ export class BdsDropdownMenu extends LitElement {
59
59
  --bdc-outline_radius: var(--bds-border_radius--s);
60
60
 
61
61
  border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
62
- background-color: var(--dropdown_color, var(--bds-color_bg));
62
+ background-color: var(--dropdown_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
63
63
  color: var(--dropdown_on-color, var(--bds-color_on-bg));
64
64
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
65
65
  var(--dropdown_shadow, var(--bds-shadow_m));
@@ -74,7 +74,7 @@ export class BdsPopover extends LitElement {
74
74
  --bdc_color: currentcolor;
75
75
  --bdc-outline_radius: var(--bds-border_radius--s);
76
76
  border-radius: var(--popover_radius, var(--bdc-outline_radius));
77
- background-color: var(--popover_color, var(--bds-color_bg));
77
+ background-color: var(--popover_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
78
78
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
79
79
  color: var(--popover_on-color, var(--bds-color_on-bg));
80
80
  font-size: var(--bds-font_size--body);
@@ -145,7 +145,7 @@ describe('bds-toast-provider', () => {
145
145
  // wins the cascade (element-level declarations otherwise beat inherited values).
146
146
  expect(cssText).toMatch(/\.toast\.--variant_error\s*{[^}]*--toast_color--variant:\s*var\(--toast_color--error, var\(--bds-color_error\)\)/);
147
147
  expect(cssText).not.toMatch(/\.toast\.--variant_error\s*{[^}]*--toast_color:\s*var\(--bds-color_error\)/);
148
- expect(cssText).toMatch(/background-color:\s*var\(--toast_color,\s*var\(--toast_color--variant,\s*var\(--bds-color_bg\)\)\);/);
148
+ expect(cssText).toMatch(/background-color:\s*var\(--toast_color,\s*var\(--toast_color--variant,\s*var\(--bds-color_bg--strong,\s*var\(--bds-color_bg\)\)\)\);/);
149
149
  });
150
150
 
151
151
  it('close button expands its hit area to >=44px via the ::after pseudo-element (touch target)', () => {
@@ -70,7 +70,7 @@ export class BdsToastProvider extends LitElement {
70
70
  padding: var(--bds-space_m) var(--bds-space_l);
71
71
  /* Layered cascade: public overrides (--toast_color, --toast_on-color) win
72
72
  over per-variant defaults. Variants write to the inner --toast_*--variant slot. */
73
- background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg)));
73
+ background-color: var(--toast_color, var(--toast_color--variant, var(--bds-color_bg--strong, var(--bds-color_bg))));
74
74
  color: var(--toast_on-color, var(--toast_on-color--variant, var(--bds-color_on-bg)));
75
75
  border-radius: var(--toast_radius, var(--bds-border_radius--s));
76
76
  box-shadow: var(--toast_shadow, var(--bds-shadow_s));
@@ -135,7 +135,7 @@ export class BdsCombobox extends LitElement {
135
135
  --bdc-outline_radius: var(--bds-border_radius--s);
136
136
 
137
137
  border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
138
- background-color: var(--combobox_color_bg, var(--bds-color_bg));
138
+ background-color: var(--combobox_color_bg, var(--bds-color_bg--strong, var(--bds-color_bg)));
139
139
  color: var(--combobox_on-color, var(--bds-color_on-bg));
140
140
  box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
141
141
  z-index: var(--combobox_z-index, var(--bds-z-index_dropdown));
@@ -49,7 +49,7 @@ export class BdsCard extends LitElement {
49
49
  }
50
50
 
51
51
  .card {
52
- background-color: var(--card_color, var(--bds-color_bg));
52
+ background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
53
53
  color: var(--card_on-color, var(--bds-color_on-bg));
54
54
  border-radius: var(--bds-border_radius--m);
55
55
  transition: all 0.3s ease;
@@ -12,7 +12,7 @@ export const calendarStyles = css`
12
12
  :host([disabled]) { opacity: 0.5; pointer-events: none; }
13
13
 
14
14
  .calendar {
15
- background-color: var(--bds-color_bg);
15
+ background-color: var(--bds-color_bg--strong, var(--bds-color_bg));
16
16
  border: var(--calendar_border, none);
17
17
  --bdc_color: var(--bds-color_bg--subtle);
18
18
  --bdc-outline_radius: var(--bds-border_radius--m);