@boostdev/design-system-components 2.11.0 → 2.12.1

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 +22 -1
  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 +4 -4
  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
package/dist/web-components/index.js CHANGED
@@ -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";
package/dist/web-components/interaction/bds-dialog.js CHANGED
@@ -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
package/dist/web-components/interaction/bds-drawer.js CHANGED
@@ -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
package/dist/web-components/interaction/bds-dropdown-menu.js CHANGED
@@ -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
package/dist/web-components/interaction/bds-popover.js CHANGED
@@ -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
package/dist/web-components/interaction/bds-toast-provider.js CHANGED
@@ -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
package/dist/web-components/interaction/form/bds-combobox.js CHANGED
@@ -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
package/dist/web-components/ui/bds-calendar.js CHANGED
@@ -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
package/dist/web-components/ui/bds-card.js CHANGED
@@ -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.1",
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",
@@ -357,7 +357,6 @@
357
357
  "git-cliff": "^2.12.0",
358
358
  "identity-obj-proxy": "^3.0.0",
359
359
  "jsdom": "^28.1.0",
360
- "lit": "^3.3.2",
361
360
  "remark-gfm": "^4.0.1",
362
361
  "storybook": "^8.6.18",
363
362
  "storybook-addon-tag-badges": "^1.4.0",
@@ -392,7 +391,8 @@
392
391
  "dist/web-components/**/*.js"
393
392
  ],
394
393
  "dependencies": {
395
- "@oddbird/css-anchor-positioning": "^0.9.0"
394
+ "@oddbird/css-anchor-positioning": "^0.9.0",
395
+ "lit": "^3.3.2"
396
396
  },
397
397
  "packageManager": "pnpm@11.0.8"
398
398
  }
package/src/components/interaction/Command/Command.module.css CHANGED
@@ -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;
package/src/components/interaction/Dialog/Dialog.module.css CHANGED
@@ -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;
package/src/components/interaction/Drawer/Drawer.module.css CHANGED
@@ -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));
package/src/components/interaction/DropdownMenu/DropdownMenu.module.css CHANGED
@@ -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;
package/src/components/interaction/Popover/Popover.module.css CHANGED
@@ -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);
package/src/components/interaction/Toast/Toast.module.css CHANGED
@@ -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));
package/src/components/interaction/form/Combobox/Combobox.module.css CHANGED
@@ -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
  }
package/src/components/layout/Card/Card.module.css CHANGED
@@ -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));
package/src/components/ui/Calendar/Calendar.module.css CHANGED
@@ -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);
package/src/web-components/interaction/bds-dialog.ts CHANGED
@@ -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;
package/src/web-components/interaction/bds-drawer.ts CHANGED
@@ -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);
package/src/web-components/interaction/bds-dropdown-menu.ts CHANGED
@@ -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));
package/src/web-components/interaction/bds-popover.ts CHANGED
@@ -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);
package/src/web-components/interaction/bds-toast-provider.spec.ts CHANGED
@@ -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)', () => {
package/src/web-components/interaction/bds-toast-provider.ts CHANGED
@@ -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));
package/src/web-components/interaction/form/bds-combobox.ts CHANGED
@@ -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));
package/src/web-components/ui/bds-card.ts CHANGED
@@ -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;
package/src/web-components/ui/calendar-styles.ts CHANGED
@@ -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);