@boostdev/design-system-components 2.16.0 → 2.18.0

package/src/web-components/interaction/form/field-label.ts

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+
+/**
+ * Shared look for the label above a form control. Every `bds-*` field with a
+ * `label` attribute spreads `fieldLabelStyles` into its own styles, so the
+ * controls cannot drift. The React `Label` atom (field variant) reads the same
+ * hooks with the same defaults.
+ *
+ * Hooks: --formLabel_font-family, --formLabel_font-size, --formLabel_font-weight,
+ * --formLabel_color.
+ */
+export const fieldLabelStyles = css`
+  .label {
+    display: block;
+    font-family: var(--formLabel_font-family, var(--bds-font_family--body));
+    font-size: var(--formLabel_font-size, var(--bds-font_size--body--s));
+    font-weight: var(--formLabel_font-weight, var(--bds-font_weight--semibold));
+    color: var(--formLabel_color, var(--bds-color_on-bg));
+  }
+`;

package/src/web-components/test/helpers.ts

@@ -1,3 +1,6 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
 /** Render an HTML string, upgrade the custom element, and await first paint. */
 export async function fixture(html: string): Promise<HTMLElement> {
   const template = document.createElement('template');
@@ -20,3 +23,20 @@ export function makeCommandEvent(command: string): Event {
   Object.defineProperty(event, 'source', { value: null, configurable: true });
   return event;
 }
+
+/**
+ * Declarations of the first `selector { ... }` rule in a stylesheet, keyed by property.
+ * Used to compare a web component's styles with its React counterpart's CSS module.
+ */
+export function ruleDeclarations(css: string, selector: string): Record<string, string> {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const body = css.match(new RegExp(`(?:^|[\\s,}])${escaped}\\s*\\{([^}]*)\\}`))?.[1] ?? '';
+  return Object.fromEntries(
+    [...body.matchAll(/([\w-]+)\s*:\s*([^;]+);/g)].map(([, prop, value]) => [prop, value.replace(/\s+/g, ' ').trim()]),
+  );
+}
+
+/** Reads a source file relative to the repo root. */
+export function readSource(path: string): string {
+  return readFileSync(resolve(process.cwd(), path), 'utf8');
+}

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

@@ -67,6 +67,7 @@ import '@boostdev/design-system-components/web-components';
 | Property | Default | Description |
 |----------|---------|-------------|
 | `--alert_bg` / `--alert_text` / `--alert_border` | per variant | Colours for all variants. Per-variant forms: `--alert_bg--info`, `--alert_text--info`, `--alert_border--info` (and `success`, `warning`, `error`). |
+| `--alert_bg--error` / `--alert_text--error` / `--alert_border--error` | `var(--bds-color_error--subtle)` / `var(--bds-color_on-error--subtle)` / `var(--bds-color_error)` | Error variant colours, the subtle pair like the other variants |
 | `--alert_border-width` | `var(--bds-space_s)` (`3px` with `appearance="gradient"`) | Width of the inline-start accent line |
 | `--alert_gradient` | `linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%)` | Gradient over the variant background, `appearance="gradient"` only |
 | `--alert_shadow` | `var(--bds-shadow_s)` | Box shadow, `appearance="gradient"` only |

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

@@ -57,6 +57,7 @@ import '@boostdev/design-system-components/web-components';
 |----------|-------------|
 | `--badge_bg` | Badge background colour |
 | `--badge_text` | Badge text colour |
+| `--badge_bg--secondary` / `--badge_text--secondary` | `secondary` variant colours (defaults `--bds-color_grey`, `--bds-color_on-grey`). The other variants have the same pair: `--badge_bg--{variant}` / `--badge_text--{variant}`. |
 | `--badge_font-size` | Font size |
 | `--badge_radius` | Border radius |
 

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

@@ -78,7 +78,7 @@ import '@boostdev/design-system-components/web-components';
 | `--banner_bg--info` / `--banner_text--info` / `--banner_border--info` | Info variant colours |
 | `--banner_bg--success` / `--banner_text--success` / `--banner_border--success` | Success variant colours |
 | `--banner_bg--warning` / `--banner_text--warning` / `--banner_border--warning` | Warning variant colours |
-| `--banner_bg--error` / `--banner_text--error` / `--banner_border--error` | Error variant colours |
+| `--banner_bg--error` / `--banner_text--error` / `--banner_border--error` | Error variant colours (defaults `--bds-color_error--subtle`, `--bds-color_on-error--subtle`, `--bds-color_error`) |
 | `--banner_border-width` | Width of the block-end accent line (default `3px`) |
 | `--banner_gradient` | Gradient over the variant background, `appearance="gradient"` only (default `linear-gradient(100deg, transparent 35%, var(--bds-color_bg--strong, var(--bds-color_bg)) 100%)`) |
 | `--banner_shadow` | Box shadow, `appearance="gradient"` only (default `var(--bds-shadow_s)`) |

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

@@ -59,8 +59,11 @@ import '@boostdev/design-system-components/web-components';
 
 | Variable | Default | Description |
 |----------|---------|--------------|
-| `--rating_color` | `var(--bds-color_bg)` | Colour of unfilled stars |
+| `--rating_color` | `var(--bds-color_bg)` | Fill of unfilled stars |
 | `--rating_color--filled` | `var(--bds-color_warning)` | Colour of filled stars |
+| `--rating_stroke-color` | `var(--bds-color_on-bg--as-surface)` | Outline of unfilled stars, a non-text mark (falls back to `--bds-color_on-bg--border`, then `--bds-color_on-bg`, on foundations before 2.3.0) |
+| `--rating_stroke-color--filled` | `currentcolor` | Outline of filled stars, the filled colour by default so both kinds keep the same size |
+| `--rating_stroke-width` | `var(--bdc-outline_width)` | Outline width, in the star's 24-unit viewBox |
 
 ## Accessibility
 

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

@@ -148,4 +148,11 @@ describe('bds-alert', () => {
       expect(styles).toContain(`--alert_accent--${v}`);
     });
   });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsAlert.styles);
+    expect(styles).toMatch(/--alert_bg--variant:\s*var\(--alert_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--alert_text--variant:\s*var\(--alert_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

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

@@ -91,8 +91,8 @@ export class BdsAlert extends LitElement {
     }
 
     :host([variant='error']) .alert {
-      --alert_bg--variant:     var(--alert_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-bg));
+      --alert_bg--variant:     var(--alert_bg--error, var(--bds-color_error--subtle));
+      --alert_text--variant:   var(--alert_text--error, var(--bds-color_on-error--subtle));
       --alert_border--variant: var(--alert_border--error, var(--bds-color_error));
     }
 

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

@@ -53,4 +53,10 @@ describe('bds-badge', () => {
     const cssText = BdsBadge.styles.cssText;
     expect(cssText).toMatch(/border-radius:\s*var\(--badge_radius,\s*var\(--bds-border_radius--full\)\)/);
   });
+
+  it('gives the secondary variant a solid neutral surface, matching the React counterpart', () => {
+    const cssText = BdsBadge.styles.cssText;
+    expect(cssText).toMatch(/:host\(\[variant='secondary'\]\) \.badge \{[^}]*--badge_bg--variant:\s*var\(--badge_bg--secondary,\s*var\(--bds-color_grey\)\)/);
+    expect(cssText).toMatch(/:host\(\[variant='secondary'\]\) \.badge \{[^}]*--badge_text--variant:\s*var\(--badge_text--secondary,\s*var\(--bds-color_on-grey\)\)/);
+  });
 });

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

@@ -54,8 +54,8 @@ export class BdsBadge extends LitElement {
     }
 
     :host([variant='secondary']) .badge {
-      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_bg));
-      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-bg));
+      --badge_bg--variant:   var(--badge_bg--secondary, var(--bds-color_grey));
+      --badge_text--variant: var(--badge_text--secondary, var(--bds-color_on-grey));
     }
 
     :host([variant='success']) .badge {

package/src/web-components/ui/bds-notification-banner.spec.ts

@@ -137,4 +137,11 @@ describe('bds-notification-banner', () => {
     expect(plain.shadowRoot!.querySelector('.icon')!.classList.contains('has-content')).toBe(false);
     cleanup(plain);
   });
+
+  it('paints the error variant with the error subtle pair, matching the React counterpart', () => {
+    const styles = String(BdsNotificationBanner.styles);
+    expect(styles).toMatch(/--banner_bg--variant:\s*var\(--banner_bg--error,\s*var\(--bds-color_error--subtle\)\)/);
+    expect(styles).toMatch(/--banner_text--variant:\s*var\(--banner_text--error,\s*var\(--bds-color_on-error--subtle\)\)/);
+    expect(styles).not.toContain('rgb(from var(--bds-color_error)');
+  });
 });

package/src/web-components/ui/bds-notification-banner.ts

@@ -75,8 +75,8 @@ export class BdsNotificationBanner extends LitElement {
     }
 
     :host([variant='error']) .banner {
-      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
-      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_bg--variant:     var(--banner_bg--error, var(--bds-color_error--subtle));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-error--subtle));
       --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 

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

@@ -73,4 +73,11 @@ describe('bds-rating', () => {
     expect(cssText).toMatch(/color:\s*var\(--rating_color,\s*var\(--bds-color_bg\)\)/);
     expect(cssText).toMatch(/color:\s*var\(--rating_color--filled,\s*var\(--bds-color_warning\)\)/);
   });
+
+  it('outlines empty stars through the same stroke hooks as the React counterpart', () => {
+    const cssText = BdsRating.styles.cssText;
+    expect(cssText).toMatch(/\.star \{[^}]*stroke:\s*var\(--rating_stroke-color,\s*var\(--bds-color_on-bg--as-surface,\s*var\(--bds-color_on-bg--border,\s*var\(--bds-color_on-bg\)\)\)\)/);
+    expect(cssText).toMatch(/\.star \{[^}]*stroke-width:\s*var\(--rating_stroke-width,\s*var\(--bdc-outline_width\)\)/);
+    expect(cssText).toMatch(/\.star\.--filled \{[^}]*stroke:\s*var\(--rating_stroke-color--filled,\s*currentcolor\)/);
+  });
 });

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

@@ -35,13 +35,19 @@ export class BdsRating extends LitElement {
       color: var(--rating_color, var(--bds-color_bg));
     }
 
+    /* Empty stars are outlined, filled stars solid, matching the React
+       counterpart: shape tells them apart, not only hue. */
     .star {
       inline-size: 1.5em;
       block-size: 1.5em;
+      stroke: var(--rating_stroke-color, var(--bds-color_on-bg--as-surface, var(--bds-color_on-bg--border, var(--bds-color_on-bg))));
+      stroke-width: var(--rating_stroke-width, var(--bdc-outline_width));
+      stroke-linejoin: round;
     }
 
     .star.--filled {
       color: var(--rating_color--filled, var(--bds-color_warning));
+      stroke: var(--rating_stroke-color--filled, currentcolor);
     }
   `;