@boostdev/design-system-components 1.0.0 → 1.0.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 (34) hide show
  1. package/AGENTS.md +7 -7
  2. package/dist/client.cjs +57 -51
  3. package/dist/client.css +542 -542
  4. package/dist/client.js +57 -51
  5. package/dist/index.cjs +57 -51
  6. package/dist/index.css +542 -542
  7. package/dist/index.js +57 -51
  8. package/package.json +3 -3
  9. package/src/components/interaction/Button/Button.mdx +6 -6
  10. package/src/components/interaction/Button/Button.module.css +2 -2
  11. package/src/components/interaction/Command/Command.module.css +7 -7
  12. package/src/components/interaction/Dialog/Dialog.module.css +7 -7
  13. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +4 -4
  14. package/src/components/interaction/Popover/Popover.module.css +4 -4
  15. package/src/components/interaction/form/Checkbox/Checkbox.module.css +5 -5
  16. package/src/components/interaction/form/Combobox/Combobox.module.css +9 -9
  17. package/src/components/interaction/form/FormInput/FormInput.module.css +5 -5
  18. package/src/components/interaction/form/NumberInput/NumberInput.module.css +5 -5
  19. package/src/components/interaction/form/NumberInput/NumberInput.tsx +7 -1
  20. package/src/components/interaction/form/Radio/Radio.module.css +5 -5
  21. package/src/components/interaction/form/Select/Select.module.css +5 -5
  22. package/src/components/interaction/form/Switch/Switch.module.css +2 -2
  23. package/src/components/interaction/form/Textarea/Textarea.module.css +5 -5
  24. package/src/components/layout/Card/Card.module.css +2 -2
  25. package/src/components/ui/Accordion/Accordion.module.css +4 -4
  26. package/src/components/ui/Alert/Alert.module.css +2 -2
  27. package/src/components/ui/Calendar/Calendar.module.css +6 -6
  28. package/src/components/ui/Carousel/Carousel.module.css +2 -2
  29. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +2 -2
  30. package/src/components/ui/Pagination/Pagination.module.css +2 -2
  31. package/src/components/ui/SkipLink/SkipLink.module.css +2 -2
  32. package/src/components/ui/Table/Table.module.css +4 -4
  33. package/src/css/bdc.css +18 -13
  34. package/src/stories/DesignSystem/Borders.mdx +11 -11
package/src/components/interaction/Dialog/Dialog.module.css CHANGED
@@ -3,12 +3,12 @@
3
3
  font-size: var(--bds-font_size--body--s);
4
4
  border: var(--dialog_border, none);
5
5
  --bdc_color: currentcolor;
6
- --bdc_radius: var(--bds-border_radius--m);
6
+ --bdc-outline_radius: var(--bds-border_radius--m);
7
7
 
8
- outline: var(--bdc_width) solid var(--bdc_color);
9
- outline-offset: var(--bdc_offset);
10
- border-radius: var(--dialog_radius, var(--bdc_radius));
11
- box-shadow: var(--dialog_shadow, var(--bdc_shadow));
8
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
9
+ outline-offset: var(--bdc-outline_offset);
10
+ border-radius: var(--dialog_radius, var(--bdc-outline_radius));
11
+ box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
12
12
  background-color: var(--dialog_color ,var(--bds-grey--subtle));
13
13
  color: var(--dialog_on-color, var(--bds-on-grey--subtle));
14
14
  padding: var(--bds-space_l);
@@ -44,8 +44,8 @@
44
44
  border: var(--dialog_close-border, none);
45
45
  --bdc_color: currentcolor;
46
46
 
47
- outline: var(--bdc_width) solid var(--bdc_color);
48
- outline-offset: var(--bdc_offset);
47
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
48
+ outline-offset: var(--bdc-outline_offset);
49
49
  cursor: pointer;
50
50
  }
51
51
 
package/src/components/interaction/DropdownMenu/DropdownMenu.module.css CHANGED
@@ -12,11 +12,11 @@
12
12
  padding: var(--bds-space_xxs) 0;
13
13
  border: var(--dropdown_border, none);
14
14
  --bdc_color: currentcolor;
15
- --bdc_radius: var(--bds-border_radius--s);
15
+ --bdc-outline_radius: var(--bds-border_radius--s);
16
16
 
17
- outline: var(--bdc_width) solid var(--bdc_color);
18
- outline-offset: var(--bdc_offset);
19
- border-radius: var(--dropdown_radius, var(--bdc_radius));
17
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
18
+ outline-offset: var(--bdc-outline_offset);
19
+ border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
20
20
  background-color: var(--dropdown_color, var(--bds-bg));
21
21
  color: var(--dropdown_on-color, var(--bds-on-bg));
22
22
  box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
package/src/components/interaction/Popover/Popover.module.css CHANGED
@@ -11,11 +11,11 @@
11
11
  padding: var(--bds-space_m);
12
12
  border: var(--popover_border, none);
13
13
  --bdc_color: currentcolor;
14
- --bdc_radius: var(--bds-border_radius--s);
14
+ --bdc-outline_radius: var(--bds-border_radius--s);
15
15
 
16
- outline: var(--bdc_width) solid var(--bdc_color);
17
- outline-offset: var(--bdc_offset);
18
- border-radius: var(--popover_radius, var(--bdc_radius));
16
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
17
+ outline-offset: var(--bdc-outline_offset);
18
+ border-radius: var(--popover_radius, var(--bdc-outline_radius));
19
19
  background-color: var(--popover_color, var(--bds-bg));
20
20
  box-shadow: var(--popover_shadow, var(--bds-shadow_m));
21
21
  color: var(--popover_on-color, var(--bds-on-bg));
package/src/components/interaction/form/Checkbox/Checkbox.module.css CHANGED
@@ -19,12 +19,12 @@
19
19
  color: var(--checkbox_color, var(--bds-on-bg));
20
20
  border: var(--checkbox_border, none);
21
21
  --bdc_color: currentcolor;
22
- --bdc_radius: var(--bds-border_radius--xs);
22
+ --bdc-outline_radius: var(--bds-border_radius--xs);
23
23
 
24
- outline: var(--bdc_width) solid var(--bdc_color);
25
- outline-offset: var(--bdc_offset);
26
- border-radius: var(--checkbox_radius, var(--bdc_radius));
27
- box-shadow: var(--checkbox_shadow, var(--bdc_shadow));
24
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
25
+ outline-offset: var(--bdc-outline_offset);
26
+ border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
27
+ box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
28
28
  appearance: none;
29
29
  background-color: var(--checkbox_color_bg, var(--bds-bg));
30
30
  cursor: pointer;
package/src/components/interaction/form/Combobox/Combobox.module.css CHANGED
@@ -19,12 +19,12 @@
19
19
  padding-inline-end: var(--bds-space_xxl);
20
20
  border: var(--combobox_border, none);
21
21
  --bdc_color: currentcolor;
22
- --bdc_radius: var(--bds-border_radius--xs);
22
+ --bdc-outline_radius: var(--bds-border_radius--xs);
23
23
 
24
- outline: var(--bdc_width) solid var(--bdc_color);
25
- outline-offset: var(--bdc_offset);
26
- border-radius: var(--combobox_radius, var(--bdc_radius));
27
- box-shadow: var(--combobox_shadow, var(--bdc_shadow));
24
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
25
+ outline-offset: var(--bdc-outline_offset);
26
+ border-radius: var(--combobox_radius, var(--bdc-outline_radius));
27
+ box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
28
28
  background-color: var(--combobox_color_bg, var(--bds-bg));
29
29
  color: var(--combobox_color, var(--bds-on-bg));
30
30
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
@@ -76,11 +76,11 @@
76
76
  padding: var(--bds-space_xxs) 0;
77
77
  border: var(--combobox_listbox-border, none);
78
78
  --bdc_color: currentcolor;
79
- --bdc_radius: var(--bds-border_radius--xs);
79
+ --bdc-outline_radius: var(--bds-border_radius--xs);
80
80
 
81
- outline: var(--bdc_width) solid var(--bdc_color);
82
- outline-offset: var(--bdc_offset);
83
- border-radius: var(--combobox_listbox-radius, var(--bdc_radius));
81
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
82
+ outline-offset: var(--bdc-outline_offset);
83
+ border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
84
84
  background-color: var(--combobox_color, var(--bds-bg));
85
85
  color: var(--combobox_on-color, var(--bds-on-bg));
86
86
  box-shadow: var(--combobox_listbox-shadow, var(--bds-shadow_m));
package/src/components/interaction/form/FormInput/FormInput.module.css CHANGED
@@ -12,12 +12,12 @@
12
12
  padding: var(--bds-space_s);
13
13
  border: var(--input_border, none);
14
14
  --bdc_color: currentcolor;
15
- --bdc_radius: var(--bds-border_radius--xs);
15
+ --bdc-outline_radius: var(--bds-border_radius--xs);
16
16
 
17
- outline: var(--bdc_width) solid var(--bdc_color);
18
- outline-offset: var(--bdc_offset);
19
- border-radius: var(--input_radius, var(--bdc_radius));
20
- box-shadow: var(--input_shadow, var(--bdc_shadow));
17
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
18
+ outline-offset: var(--bdc-outline_offset);
19
+ border-radius: var(--input_radius, var(--bdc-outline_radius));
20
+ box-shadow: var(--input_shadow, var(--bdc-outline_shadow));
21
21
  color: var(--input_color, var(--bds-on-bg));
22
22
  background-color: var(--input_color_bg, var(--bds-bg));
23
23
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
package/src/components/interaction/form/NumberInput/NumberInput.module.css CHANGED
@@ -9,12 +9,12 @@
9
9
  align-items: stretch;
10
10
  border: var(--numberInput_border, none);
11
11
  --bdc_color: currentcolor;
12
- --bdc_radius: var(--bds-border_radius--xs);
12
+ --bdc-outline_radius: var(--bds-border_radius--xs);
13
13
 
14
- outline: var(--bdc_width) solid var(--bdc_color);
15
- outline-offset: var(--bdc_offset);
16
- border-radius: var(--numberInput_radius, var(--bdc_radius));
17
- box-shadow: var(--numberInput_shadow, var(--bdc_shadow));
14
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
15
+ outline-offset: var(--bdc-outline_offset);
16
+ border-radius: var(--numberInput_radius, var(--bdc-outline_radius));
17
+ box-shadow: var(--numberInput_shadow, var(--bdc-outline_shadow));
18
18
  overflow: hidden;
19
19
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
20
20
  }
package/src/components/interaction/form/NumberInput/NumberInput.tsx CHANGED
@@ -51,7 +51,13 @@ export function NumberInput({
51
51
 
52
52
  const adjust = (delta: number) => {
53
53
  const next = clamp(currentValue + delta);
54
- if (!isControlled) setInternalValue(next);
54
+ if (!isControlled) {
55
+ setInternalValue(next);
56
+ if (inputRef.current) {
57
+ inputRef.current.value = String(next);
58
+ inputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
59
+ }
60
+ }
55
61
  onChange?.(next);
56
62
  };
57
63
 
package/src/components/interaction/form/Radio/Radio.module.css CHANGED
@@ -34,12 +34,12 @@
34
34
  color: var(--radio_color, var(--bds-on-bg));
35
35
  border: var(--radio_border, none);
36
36
  --bdc_color: currentcolor;
37
- --bdc_radius: 50%;
37
+ --bdc-outline_radius: 50%;
38
38
 
39
- outline: var(--bdc_width) solid var(--bdc_color);
40
- outline-offset: var(--bdc_offset);
41
- border-radius: var(--radio_radius, var(--bdc_radius));
42
- box-shadow: var(--radio_shadow, var(--bdc_shadow));
39
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
40
+ outline-offset: var(--bdc-outline_offset);
41
+ border-radius: var(--radio_radius, var(--bdc-outline_radius));
42
+ box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
43
43
  appearance: none;
44
44
  background-color: var(--radio_color_bg, var(--bds-bg));
45
45
  cursor: pointer;
package/src/components/interaction/form/Select/Select.module.css CHANGED
@@ -19,12 +19,12 @@
19
19
  padding-inline-end: var(--bds-space_xxl);
20
20
  border: var(--select_border, none);
21
21
  --bdc_color: currentcolor;
22
- --bdc_radius: var(--bds-border_radius--xs);
22
+ --bdc-outline_radius: var(--bds-border_radius--xs);
23
23
 
24
- outline: var(--bdc_width) solid var(--bdc_color);
25
- outline-offset: var(--bdc_offset);
26
- border-radius: var(--select_radius, var(--bdc_radius));
27
- box-shadow: var(--select_shadow, var(--bdc_shadow));
24
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
25
+ outline-offset: var(--bdc-outline_offset);
26
+ border-radius: var(--select_radius, var(--bdc-outline_radius));
27
+ box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
28
28
  background-color: var(--select_color_bg, var(--bds-bg));
29
29
  color: var(--select_color, var(--bds-on-bg));
30
30
  cursor: pointer;
package/src/components/interaction/form/Switch/Switch.module.css CHANGED
@@ -56,9 +56,9 @@
56
56
  background-color: var(--switch_track-bg, var(--bds-grey--subtle));
57
57
  padding-inline: var(--switch_track-pad);
58
58
  pointer-events: none;
59
- outline: var(--bdc_width) solid var(--bdc_color);
59
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
60
60
  outline-offset: var(--bds-outline_offset);
61
- box-shadow: var(--switch_shadow, var(--bdc_shadow));
61
+ box-shadow: var(--switch_shadow, var(--bdc-outline_shadow));
62
62
  transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
63
63
  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
64
64
  transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
package/src/components/interaction/form/Textarea/Textarea.module.css CHANGED
@@ -11,12 +11,12 @@
11
11
  padding: var(--bds-space_s);
12
12
  border: var(--textarea_border, none);
13
13
  --bdc_color: currentcolor;
14
- --bdc_radius: var(--bds-border_radius--xs);
14
+ --bdc-outline_radius: var(--bds-border_radius--xs);
15
15
 
16
- outline: var(--bdc_width) solid var(--bdc_color);
17
- outline-offset: var(--bdc_offset);
18
- border-radius: var(--textarea_radius, var(--bdc_radius));
19
- box-shadow: var(--textarea_shadow, var(--bdc_shadow));
16
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
17
+ outline-offset: var(--bdc-outline_offset);
18
+ border-radius: var(--textarea_radius, var(--bdc-outline_radius));
19
+ box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
20
20
  background-color: var(--textarea_color_bg, var(--bds-bg));
21
21
  color: var(--textarea_color, var(--bds-on-bg));
22
22
  resize: vertical;
package/src/components/layout/Card/Card.module.css CHANGED
@@ -19,8 +19,8 @@
19
19
  border: var(--card_border, none);
20
20
  --bdc_color: currentcolor;
21
21
 
22
- outline: var(--bdc_width) solid var(--bdc_color);
23
- outline-offset: var(--bdc_offset);
22
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
23
+ outline-offset: var(--bdc-outline_offset);
24
24
  box-shadow: var(--bds-shadow_s);
25
25
  }
26
26
 
package/src/components/ui/Accordion/Accordion.module.css CHANGED
@@ -4,11 +4,11 @@
4
4
  flex-direction: column;
5
5
  border: var(--accordion_border, none);
6
6
  --bdc_color: var(--bds-bg--subtle);
7
- --bdc_radius: var(--bds-border_radius--s);
7
+ --bdc-outline_radius: var(--bds-border_radius--s);
8
8
 
9
- outline: var(--bdc_width) solid var(--bdc_color);
10
- outline-offset: var(--bdc_offset);
11
- border-radius: var(--accordion_radius, var(--bdc_radius));
9
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
10
+ outline-offset: var(--bdc-outline_offset);
11
+ border-radius: var(--accordion_radius, var(--bdc-outline_radius));
12
12
  overflow: hidden;
13
13
  }
14
14
 
package/src/components/ui/Alert/Alert.module.css CHANGED
@@ -68,8 +68,8 @@
68
68
  border-radius: 50%;
69
69
  --bdc_color: currentcolor;
70
70
 
71
- outline: var(--bdc_width) solid var(--bdc_color);
72
- outline-offset: var(--bdc_offset);
71
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
72
+ outline-offset: var(--bdc-outline_offset);
73
73
 
74
74
  }
75
75
 
package/src/components/ui/Calendar/Calendar.module.css CHANGED
@@ -6,11 +6,11 @@
6
6
  background-color: var(--bds-bg);
7
7
  border: var(--calendar_border, none);
8
8
  --bdc_color: var(--bds-bg--subtle);
9
- --bdc_radius: var(--bds-border_radius--m);
9
+ --bdc-outline_radius: var(--bds-border_radius--m);
10
10
 
11
- outline: var(--bdc_width) solid var(--bdc_color);
12
- outline-offset: var(--bdc_offset);
13
- border-radius: var(--calendar_radius, var(--bdc_radius));
11
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
12
+ outline-offset: var(--bdc-outline_offset);
13
+ border-radius: var(--calendar_radius, var(--bdc-outline_radius));
14
14
  padding: var(--bds-space_m);
15
15
  box-shadow: var(--calendar_shadow, var(--bds-shadow_s));
16
16
  width: 20rem;
@@ -107,8 +107,8 @@
107
107
  --bdc_color: var(--bds-interactive);
108
108
 
109
109
  border: var(--calendar_today-border, none);
110
- outline: var(--bdc_width) solid var(--bdc_color);
111
- outline-offset: var(--bdc_offset);
110
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
111
+ outline-offset: var(--bdc-outline_offset);
112
112
  }
113
113
 
114
114
  .selected {
package/src/components/ui/Carousel/Carousel.module.css CHANGED
@@ -39,8 +39,8 @@
39
39
  --bdc_color: var(--bds-on-bg);
40
40
 
41
41
  border: none;
42
- outline: var(--bdc_width) solid var(--bdc_color);
43
- outline-offset: var(--bdc_offset);
42
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
43
+ outline-offset: var(--bdc-outline_offset);
44
44
  cursor: pointer;
45
45
  flex-shrink: 0;
46
46
  transition: var(--bds-animation_transition);
package/src/components/ui/NotificationBanner/NotificationBanner.module.css CHANGED
@@ -57,8 +57,8 @@
57
57
  transition: var(--bds-animation_transition);
58
58
  --bdc_color: currentcolor;
59
59
 
60
- outline: var(--bdc_width) solid var(--bdc_color);
61
- outline-offset: var(--bdc_offset);
60
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
61
+ outline-offset: var(--bdc-outline_offset);
62
62
  }
63
63
 
64
64
  .dismiss svg {
package/src/components/ui/Pagination/Pagination.module.css CHANGED
@@ -27,8 +27,8 @@
27
27
  --bdc_color: var(--btn_border, var(--bds-bg--subtle));
28
28
 
29
29
  border: none;
30
- outline: var(--bdc_width) solid var(--bdc_color);
31
- outline-offset: var(--bdc_offset);
30
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
31
+ outline-offset: var(--bdc-outline_offset);
32
32
  color: var(--btn_color, var(--bds-on-bg));
33
33
  font-family: var(--bds-font_family--body);
34
34
  font-size: var(--bds-font_size--body);
package/src/components/ui/SkipLink/SkipLink.module.css CHANGED
@@ -15,8 +15,8 @@
15
15
  --bdc_color: var(--color_focus, var(--bds-interactive));
16
16
 
17
17
  border: var(--skip-link_border, none);
18
- outline: var(--bdc_width) solid var(--bdc_color);
19
- outline-offset: var(--bdc_offset);
18
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
19
+ outline-offset: var(--bdc-outline_offset);
20
20
  transform: translateY(-200%);
21
21
  transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
22
22
  }
package/src/components/ui/Table/Table.module.css CHANGED
@@ -4,11 +4,11 @@
4
4
  overflow-x: auto;
5
5
  border: var(--table_border, none);
6
6
  --bdc_color: var(--bds-bg--subtle);
7
- --bdc_radius: var(--bds-border_radius--s);
7
+ --bdc-outline_radius: var(--bds-border_radius--s);
8
8
 
9
- outline: var(--bdc_width) solid var(--bdc_color);
10
- outline-offset: var(--bdc_offset);
11
- border-radius: var(--table_radius, var(--bdc_radius));
9
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
10
+ outline-offset: var(--bdc-outline_offset);
11
+ border-radius: var(--table_radius, var(--bdc-outline_radius));
12
12
  }
13
13
 
14
14
  .table {
package/src/css/bdc.css CHANGED
@@ -4,37 +4,42 @@
4
4
  * Components use outline (not border) for their visual edge so that the decoration
5
5
  * has zero layout impact and can animate via registered <color> transitions.
6
6
  *
7
+ * Naming:
8
+ * --bdc_color* — colour tokens (exception: colour is shared across CSS properties)
9
+ * --bdc-outline_* — tokens that directly map to CSS outline sub-properties
10
+ *
7
11
  * @property declarations must be top-level (not inside @layer).
8
- * inherits: false means each element owns its own instance — setting --bdc_color
9
- * on :focus animates that element's border colour independently.
12
+ * --bdc_color uses inherits: false so each element owns its own colour instance,
13
+ * enabling per-element transition: --bdc_color for focus/error state animations.
10
14
  * ─────────────────────────────────────────────────────────────────────────────── */
11
15
 
16
+ /* Colour — exception: kept as --bdc_color because colour is semantic across properties */
12
17
  @property --bdc_color {
13
18
  syntax: '<color>';
14
19
  inherits: false;
15
20
  initial-value: currentcolor;
16
21
  }
17
22
 
18
- @property --bdc_width {
23
+ @property --bdc-outline_width {
19
24
  syntax: '<length>';
20
25
  inherits: false;
21
26
  initial-value: 1px;
22
27
  }
23
28
 
24
- @property --bdc_offset {
29
+ @property --bdc-outline_offset {
25
30
  syntax: '<length>';
26
31
  inherits: false;
27
32
  initial-value: -1px;
28
33
  }
29
34
 
30
- @property --bdc_radius {
35
+ @property --bdc-outline_radius {
31
36
  syntax: '<length-percentage>';
32
37
  inherits: false;
33
38
  initial-value: 0;
34
39
  }
35
40
 
36
41
  /* '*' syntax cannot be interpolated but gives a guaranteed none default */
37
- @property --bdc_shadow {
42
+ @property --bdc-outline_shadow {
38
43
  syntax: '*';
39
44
  inherits: false;
40
45
  initial-value: none;
@@ -43,19 +48,19 @@
43
48
  @layer component {
44
49
  :root {
45
50
  /* border: none by default — outline provides the visual edge */
46
- --bdc_border: none;
51
+ --bdc-outline_border: none;
47
52
 
48
- /* Colour tokens */
53
+ /* Colour tokens (kept as --bdc_color — see naming note above) */
49
54
  --bdc_color: currentcolor;
50
55
  --bdc_color--focus: var(--bds-interactive);
51
56
  --bdc_color--error: var(--bds-error);
52
57
 
53
- /* Geometry */
54
- --bdc_width: 1px;
55
- --bdc_offset: -1px; /* inset — appears inside the element like a traditional border */
56
- --bdc_radius: var(--bds-border_radius--xs);
58
+ /* Outline geometry */
59
+ --bdc-outline_width: 1px;
60
+ --bdc-outline_offset: -1px; /* inset — appears inside the element like a traditional border */
61
+ --bdc-outline_radius: var(--bds-border_radius--xs);
57
62
 
58
63
  /* Shadow: opt-in, none by default */
59
- --bdc_shadow: none;
64
+ --bdc-outline_shadow: none;
60
65
  }
61
66
  }
package/src/stories/DesignSystem/Borders.mdx CHANGED
@@ -53,10 +53,10 @@ Components use `outline` rather than `border` for their decorative edge. The rea
53
53
  </thead>
54
54
  <tbody>
55
55
  <TokenRow token="--bdc_color" type="<color>" defaultValue="currentcolor" description="Border colour — transitions smoothly between states" />
56
- <TokenRow token="--bdc_width" type="<length>" defaultValue="1px" description="Border width" />
57
- <TokenRow token="--bdc_offset" type="<length>" defaultValue="-1px" description="Negative = inset (border-like); positive = outer halo" />
58
- <TokenRow token="--bdc_radius" type="<length-percentage>" defaultValue="0" description="Border radius, synced with the element's own radius" />
59
- <TokenRow token="--bdc_shadow" type="*" defaultValue="none" description="Box shadow — opt-in accent, e.g. focus glow" />
56
+ <TokenRow token="--bdc-outline_width" type="<length>" defaultValue="1px" description="Border width" />
57
+ <TokenRow token="--bdc-outline_offset" type="<length>" defaultValue="-1px" description="Negative = inset (border-like); positive = outer halo" />
58
+ <TokenRow token="--bdc-outline_radius" type="<length-percentage>" defaultValue="0" description="Border radius, synced with the element's own radius" />
59
+ <TokenRow token="--bdc-outline_shadow" type="*" defaultValue="none" description="Box shadow — opt-in accent, e.g. focus glow" />
60
60
  </tbody>
61
61
  </table>
62
62
 
@@ -68,7 +68,7 @@ Components use `outline` rather than `border` for their decorative edge. The rea
68
68
  <BorderDemo label="Default" token="currentcolor" color="currentcolor" />
69
69
  <BorderDemo label="Focus" token="--bdc_color--focus" color="var(--bds-interactive)" />
70
70
  <BorderDemo label="Error" token="--bdc_color--error" color="var(--bds-error)" />
71
- <BorderDemo label="Outer halo" token="--bdc_offset: 2px" color="var(--bds-interactive)" offset="2px" width="2px" />
71
+ <BorderDemo label="Outer halo" token="--bdc-outline_offset: 2px" color="var(--bds-interactive)" offset="2px" width="2px" />
72
72
  </div>
73
73
 
74
74
  | State | `--bdc_color` resolves to | Trigger |
@@ -94,10 +94,10 @@ Every component that renders a bordered element follows this CSS pattern:
94
94
  --bdc_color: currentcolor;
95
95
 
96
96
  /* Rendered border (zero layout impact) */
97
- outline: var(--bdc_width) solid var(--bdc_color);
98
- outline-offset: var(--bdc_offset);
99
- border-radius: var(--bdc_radius);
100
- box-shadow: var(--bdc_shadow);
97
+ outline: var(--bdc-outline_width) solid var(--bdc_color);
98
+ outline-offset: var(--bdc-outline_offset);
99
+ border-radius: var(--bdc-outline_radius);
100
+ box-shadow: var(--bdc-outline_shadow);
101
101
 
102
102
  /* Smooth colour transitions via registered @property */
103
103
  transition: --bdc_color 150ms ease-out;
@@ -138,8 +138,8 @@ To change width or radius independently:
138
138
 
139
139
  ```css
140
140
  .my-card {
141
- --bdc_width: 2px;
142
- --bdc_radius: var(--bds-border_radius--m);
141
+ --bdc-outline_width: 2px;
142
+ --bdc-outline_radius: var(--bds-border_radius--m);
143
143
  }
144
144
  ```
145
145