@boostdev/design-system-components 2.12.1 → 2.14.0

package/src/web-components/interaction/BdsDrawer.mdx

@@ -87,6 +87,16 @@ Open or close the drawer declaratively using the Invoker Commands API. `<bds-dra
 <button commandfor="my-drawer" command="--close">Close</button>
 ```
 
+## CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--drawer_color` | `--bds-color_bg--strong` (falls back to `--bds-color_bg`) | Panel background colour |
+| `--drawer_on-color` | `--bds-color_on-bg` | Panel text colour |
+| `--drawer_border-color` | `--bds-color_on-bg--as-surface` | Header rule colour — the non-text member of the colour set, so 3:1 rather than the 4.5:1 the text colour carries |
+| `--drawer_close-radius` | `--bds-border_radius--circle` | Close button corner radius |
+| `--drawer_close-bg--hover` | `--bds-color_bg--subtle` | Close button background on hover |
+
 ## Usage in plain HTML
 
 ```html

package/src/web-components/interaction/BdsTabs.mdx

@@ -96,6 +96,7 @@ across every state; set `--tab_color--active` to theme only the selected tab.
 
 | Property | Description |
 |----------|-------------|
+| `--tabs_divider-color` | Colour of the rail under the tablist (default: `--bds-color_on-bg--as-surface`, the non-text member of the set — ≥ 3:1, not a ground colour) |
 | `--tab_color` | Tab text colour override (all states) |
 | `--tab_border-color` | Tab bottom-border colour override (all states) |
 | `--tab_color--active` | Text colour override for the selected tab |

package/src/web-components/interaction/bds-accordion-item.ts

@@ -39,7 +39,7 @@ export class BdsAccordionItem extends LitElement {
 
     :host {
       display: block;
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      border-block-end: 1px solid var(--accordion_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
     }
 
     :host(:last-child) {

package/src/web-components/interaction/bds-drawer.spec.ts

@@ -199,4 +199,11 @@ describe('bds-drawer', () => {
     expect(focusSpy).toHaveBeenCalled();
     cleanup(el);
   });
+
+  it('paints the header rule with the non-text member of the colour set', () => {
+    const cssText = BdsDrawer.styles.cssText;
+    expect(cssText).toMatch(
+      /border-block-end:\s*1px solid var\(--drawer_border-color,\s*var\(--bds-color_on-bg--as-surface,/,
+    );
+  });
 });

package/src/web-components/interaction/bds-drawer.ts

@@ -121,7 +121,7 @@ export class BdsDrawer extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: var(--bds-space_m) var(--bds-space_l);
-      border-block-end: 1px solid currentcolor;
+      border-block-end: 1px solid var(--drawer_border-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
       flex-shrink: 0;
     }
 

package/src/web-components/interaction/bds-tabs.ts

@@ -43,7 +43,7 @@ export class BdsTabs extends LitElement {
 
     .tablist {
       display: flex;
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      border-block-end: 1px solid var(--tabs_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
       gap: var(--bds-space_xxs);
     }
   `;

package/src/web-components/ui/BdsSeparator.mdx

@@ -54,7 +54,7 @@ Or in HTML without a bundler:
 
 | Property | Description |
 |----------|-------------|
-| `--separator_color` | Line colour (defaults to `--bds-color_on-bg`) |
+| `--separator_color` | Line colour (defaults to `--bds-color_on-bg--as-surface`, the non-text member of the set — a rule is not text, so it needs 3:1, not 4.5:1) |
 | `--separator_thickness` | Line thickness (default: `1px`) |
 
 ## Usage in plain HTML

package/src/web-components/ui/BdsTable.mdx

@@ -56,6 +56,7 @@ import '@boostdev/design-system-components/web-components';
 
 | Property | Description |
 |----------|-------------|
+| `--table_divider-color` | Colour of the header underline and row rules (default: `--bds-color_on-bg--as-surface`, the non-text member of the set — ≥ 3:1, not a ground colour) |
 | `--table_border` | Wrapper border (default: `none`) |
 | `--table_radius` | Wrapper corner radius (default: `var(--bdc-outline_radius)`, itself set to `var(--bds-border_radius--s)` on the wrapper) |
 | `--table_row-bg--hover` | Row background on hover, pointer devices only (default: `var(--bds-color_bg--subtle)`) |

package/src/web-components/ui/bds-separator.spec.ts

@@ -47,4 +47,11 @@ describe('bds-separator', () => {
     expect(el.getAttribute('orientation')).toBe('vertical');
     cleanup(el);
   });
+
+  it('paints the line with the non-text member of the colour set', () => {
+    const cssText = BdsSeparator.styles.cssText;
+    expect(cssText).toMatch(
+      /background-color:\s*var\(--separator_color,\s*var\(--bds-color_on-bg--as-surface,/,
+    );
+  });
 });

package/src/web-components/ui/bds-separator.ts

@@ -33,7 +33,7 @@ export class BdsSeparator extends LitElement {
 
     .separator {
       border: none;
-      background-color: var(--separator_color, var(--bds-color_on-bg));
+      background-color: var(--separator_color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
       display: block;
       inline-size: 100%;
       block-size: var(--separator_thickness, 1px);

package/src/web-components/ui/bds-table.ts

@@ -20,13 +20,13 @@ const tableLightDomCss = `
       font-size: var(--bds-font_size--body--s);
       text-align: start;
       color: var(--bds-color_on-bg--subtle);
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
       white-space: nowrap;
     }
 
     bds-table > table td {
       padding: var(--bds-space_s) var(--bds-space_m);
-      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      border-block-end: 1px solid var(--table_divider-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_bg--subtle))));
       vertical-align: middle;
     }