@boostdev/design-system-components 2.7.1 → 2.11.0

package/src/web-components/ui/BdsTable.stories.tsx

@@ -4,14 +4,16 @@ import '../index'; // auto-registers all custom elements
 
 function BdsTable({
   stickyHeader,
+  ariaLabel,
   children,
 }: {
   stickyHeader?: boolean;
+  ariaLabel?: string;
   children?: React.ReactNode;
 }) {
   return React.createElement(
     'bds-table',
-    { 'sticky-header': stickyHeader || undefined },
+    { 'sticky-header': stickyHeader || undefined, 'aria-label': ariaLabel },
     children,
   );
 }
@@ -77,7 +79,11 @@ export const Default: Story = {
 export const StickyHeader: Story = {
   render: () => (
     <div style={{ padding: 24, maxHeight: 200, overflow: 'auto' }}>
-      {React.createElement('bds-table', { 'sticky-header': true }, sampleTable())}
+      {React.createElement(
+        'bds-table',
+        { 'sticky-header': true, 'aria-label': 'Team members' },
+        sampleTable(),
+      )}
     </div>
   ),
 };

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

@@ -52,7 +52,7 @@ import '@boostdev/design-system-components/web-components';
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
 | `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Visual style and default semantic tag |
-| `component` | string | — | Override the rendered HTML tag (e.g. `"span"`, `"label"`) |
+| `component` | string | — | Override the rendered HTML tag (e.g. `"span"`, `"label"`). Reflects to the host attribute, so it also works when set as a JS property (e.g. from React). |
 
 ## Slots
 
@@ -60,6 +60,17 @@ import '@boostdev/design-system-components/web-components';
 |------|-------------|
 | `(default)` | Text content |
 
+## CSS Custom Properties
+
+| Property | Description |
+|----------|-------------|
+| `--typography_color` | Text colour (default: `--bds-color_on-bg`) |
+| `--typography_font-size--h1` | Font size for the `h1` variant (default: `--bds-font_size--heading-1`) |
+| `--typography_font-size--h2` | Font size for the `h2` variant (default: `--bds-font_size--heading-2`) |
+| `--typography_font-size--h3` | Font size for the `h3` variant (default: `--bds-font_size--heading-3`) |
+| `--typography_font-size--body` | Font size for the `body` variant (default: `--bds-font_size--body`) |
+| `--typography_font-size--body_s` | Font size for the `body_s` variant (default: `--bds-font_size--body--s`) |
+
 ## Usage in plain HTML
 
 ```html
@@ -68,6 +79,11 @@ import '@boostdev/design-system-components/web-components';
 <bds-typography variant="body_s" component="span">Small helper text</bds-typography>
 ```
 
+## Layout
+
+- The host is `display: block` by default (headings and paragraphs are block-level elements).
+- `component="span"` switches the host to `display: inline` so the element flows inline like a native `<span>`. Other inline tag overrides (e.g. `"label"`) still need host restyling if inline flow is required.
+
 ## Accessibility
 
 - Uses semantic heading elements (`h1`–`h3`) or `<p>` by default

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

@@ -51,7 +51,15 @@ describe('bds-alert', () => {
     cleanup(el);
   });
 
-  it('renders title when title attribute is set', async () => {
+  it('renders heading when heading attribute is set', async () => {
+    const el = await fixture('<bds-alert heading="Heads up">Message</bds-alert>');
+    const strong = el.shadowRoot!.querySelector('strong.title');
+    expect(strong).not.toBeNull();
+    expect(strong!.textContent).toBe('Heads up');
+    cleanup(el);
+  });
+
+  it('renders heading text from the deprecated title attribute as a fallback', async () => {
     const el = await fixture('<bds-alert title="Heads up">Message</bds-alert>');
     const strong = el.shadowRoot!.querySelector('strong.title');
     expect(strong).not.toBeNull();
@@ -59,7 +67,14 @@ describe('bds-alert', () => {
     cleanup(el);
   });
 
-  it('does not render title element when title is not set', async () => {
+  it('prefers heading over the deprecated title attribute when both are set', async () => {
+    const el = await fixture('<bds-alert heading="New" title="Old">Message</bds-alert>');
+    const strong = el.shadowRoot!.querySelector('strong.title');
+    expect(strong!.textContent).toBe('New');
+    cleanup(el);
+  });
+
+  it('does not render title element when neither heading nor title is set', async () => {
     const el = await fixture('<bds-alert>Message</bds-alert>');
     const strong = el.shadowRoot!.querySelector('strong.title');
     expect(strong).toBeNull();

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

@@ -7,7 +7,11 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  *
  * Attributes:
  *   variant     — "info" (default) | "success" | "warning" | "error"
- *   title       — optional heading above the body text
+ *   heading     — optional heading above the body text
+ *   title       — deprecated alias for `heading`. Collides with the global HTML
+ *                 `title` attribute, which triggers a native browser tooltip on
+ *                 hover — use `heading` instead. Kept working for backwards
+ *                 compatibility; will be removed in a later major.
  *   dismissible — boolean; shows a dismiss button when present
  *
  * Slots:
@@ -22,7 +26,7 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  *   role="status" + aria-live="polite" for info/success variants.
  *
  * @example
- * <bds-alert variant="success" title="Saved!">Your changes have been saved.</bds-alert>
+ * <bds-alert variant="success" heading="Saved!">Your changes have been saved.</bds-alert>
  *
  * <bds-alert variant="error" dismissible>
  *   <svg slot="icon">…</svg>
@@ -31,6 +35,16 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  */
 export class BdsAlert extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -119,8 +133,8 @@ export class BdsAlert extends LitElement {
     }
 
     .dismiss svg {
-      width: 1rem;
-      height: 1rem;
+      inline-size: 1rem;
+      block-size: 1rem;
     }
 
     .dismiss:focus-visible {
@@ -137,6 +151,7 @@ export class BdsAlert extends LitElement {
 
   static properties = {
     variant:     { type: String, reflect: true },
+    heading:     { type: String },
     title:       { type: String },
     dismissible: { type: Boolean, reflect: true },
     _iconFilled: { state: true },
@@ -145,6 +160,12 @@ export class BdsAlert extends LitElement {
   // `declare` annotates the type without emitting a class field initializer
   // that would shadow Lit's reactive accessors on the prototype.
   declare variant: AlertVariant;
+  declare heading: string;
+  /**
+   * @deprecated Use `heading` instead. Sharing the name with the global HTML
+   * `title` attribute makes the browser show a native tooltip on hover.
+   * Still read as a fallback for the heading text when `heading` is unset.
+   */
   declare title: string;
   declare dismissible: boolean;
   declare private _iconFilled: boolean;
@@ -152,11 +173,16 @@ export class BdsAlert extends LitElement {
   constructor() {
     super();
     this.variant = 'info';
+    this.heading = '';
     this.title = '';
     this.dismissible = false;
     this._iconFilled = false;
   }
 
+  private get _headingText() {
+    return this.heading || this.title;
+  }
+
   private _onIconSlotChange(e: Event) {
     const slot = e.target as HTMLSlotElement;
     this._iconFilled = slot.assignedNodes({ flatten: true }).length > 0;
@@ -182,7 +208,7 @@ export class BdsAlert extends LitElement {
           <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
         </span>
         <div class="content">
-          ${this.title ? html`<strong class="title">${this.title}</strong>` : nothing}
+          ${this._headingText ? html`<strong class="title">${this._headingText}</strong>` : nothing}
           <div><slot></slot></div>
         </div>
         ${this.dismissible

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

@@ -72,4 +72,33 @@ describe('bds-avatar', () => {
     expect(el.getAttribute('size')).toBe('large');
     cleanup(el);
   });
+
+  it('preserves an explicit empty alt="" as decorative (does not fall back to name)', async () => {
+    const el = await fixture('<bds-avatar src="/photo.jpg" alt="" name="Jane Doe"></bds-avatar>');
+    const img = el.shadowRoot!.querySelector('img');
+    expect(img!.getAttribute('alt')).toBe('');
+    cleanup(el);
+  });
+
+  it('falls back to name when alt attribute is entirely absent', async () => {
+    const el = await fixture('<bds-avatar src="/photo.jpg" name="Jane Doe"></bds-avatar>');
+    const img = el.shadowRoot!.querySelector('img');
+    expect(img!.hasAttribute('alt')).toBe(true);
+    expect(img!.getAttribute('alt')).toBe('Jane Doe');
+    cleanup(el);
+  });
+
+  it('size selectors write to the --avatar_size--variant slot, not the public --avatar_size token (ancestor overrides stay effective)', () => {
+    const cssText = BdsAvatar.styles.cssText;
+    expect(cssText).toMatch(
+      /inline-size:\s*var\(--avatar_size,\s*var\(--avatar_size--variant,\s*3em\)\)/,
+    );
+    expect(cssText).toMatch(
+      /block-size:\s*var\(--avatar_size,\s*var\(--avatar_size--variant,\s*3em\)\)/,
+    );
+    expect(cssText).toMatch(/:host\(\[size='small'\]\)\s*\{\s*--avatar_size--variant:\s*2em;/);
+    expect(cssText).toMatch(/:host\(\[size='large'\]\)\s*\{\s*--avatar_size--variant:\s*4\.5em;/);
+    // The public --avatar_size token itself must never be set directly by a size selector.
+    expect(cssText).not.toMatch(/:host\(\[size=[^)]*\]\)\s*\{\s*--avatar_size:/);
+  });
 });

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

@@ -7,7 +7,8 @@ import { LitElement, css, html, nothing } from 'lit';
  *
  * Attributes:
  *   src  — image URL
- *   alt  — image alt text (defaults to `name` or "User avatar")
+ *   alt  — image alt text (defaults to `name` or "User avatar"). Set alt=""
+ *          explicitly to mark the image as decorative (silences the accessible name).
  *   name — full name; used to compute initials and as fallback aria-label
  *   size — "small" | "medium" (default) | "large"
  *
@@ -17,20 +18,34 @@ import { LitElement, css, html, nothing } from 'lit';
  */
 export class BdsAvatar extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      inline-size: var(--avatar_size, 3em);
-      block-size: var(--avatar_size, 3em);
-      border-radius: 50%;
+      /* Layered cascade (mirrors the React Avatar): a public --avatar_size
+         override wins over the per-size-variant default. Size selectors
+         below write --avatar_size--variant only, so an ancestor setting
+         --avatar_size still cascades correctly. */
+      inline-size: var(--avatar_size, var(--avatar_size--variant, 3em));
+      block-size: var(--avatar_size, var(--avatar_size--variant, 3em));
+      border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
       overflow: hidden;
       flex-shrink: 0;
     }
 
-    :host([size='small'])  { --avatar_size: 2em; }
-    :host([size='medium']) { --avatar_size: 3em; }
-    :host([size='large'])  { --avatar_size: 4.5em; }
+    :host([size='small'])  { --avatar_size--variant: 2em; }
+    :host([size='medium']) { --avatar_size--variant: 3em; }
+    :host([size='large'])  { --avatar_size--variant: 4.5em; }
 
     .fallback {
       display: inline-flex;
@@ -92,11 +107,14 @@ export class BdsAvatar extends LitElement {
 
   render() {
     if (this.src) {
-      return html`<img
-        class="image"
-        src=${this.src}
-        alt=${this.alt || this.name || 'User avatar'}
-      />`;
+      // An explicit alt="" attribute marks the image as decorative and must
+      // be preserved as-is — only substitute name/"User avatar" when the
+      // attribute was never provided (this.alt otherwise defaults to '').
+      const altText = this.hasAttribute('alt')
+        ? this.alt
+        : this.name || 'User avatar';
+
+      return html`<img class="image" src=${this.src} alt=${altText} />`;
     }
 
     return html`

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

@@ -48,4 +48,9 @@ describe('bds-badge', () => {
       cleanup(el);
     }
   });
+
+  it('falls back --badge_radius to the pill token, matching the React counterpart', () => {
+    const cssText = BdsBadge.styles.cssText;
+    expect(cssText).toMatch(/border-radius:\s*var\(--badge_radius,\s*var\(--bds-border_radius--full\)\)/);
+  });
 });

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

@@ -16,6 +16,16 @@ export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warn
  */
 export class BdsBadge extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
     }
@@ -25,7 +35,7 @@ export class BdsBadge extends LitElement {
       align-items: center;
       justify-content: center;
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--badge_radius, 2em);
+      border-radius: var(--badge_radius, var(--bds-border_radius--full));
       font-size: var(--badge_font-size, var(--bds-font_size--body--s));
       font-weight: var(--bds-font_weight--semibold);
       line-height: 1;

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

@@ -52,4 +52,34 @@ describe('bds-breadcrumb', () => {
     expect(separators.length).toBe(2); // between each pair
     cleanup(el);
   });
+
+  it('falls back to an empty list instead of crashing when items is null', async () => {
+    const el = await fixture('<bds-breadcrumb></bds-breadcrumb>') as BdsBreadcrumb;
+    // Simulates what Lit's default Array attribute converter produces for
+    // malformed JSON or a removed attribute: it returns null, not [].
+    (el as unknown as { items: unknown }).items = null;
+    await el.updateComplete;
+    const items = el.shadowRoot!.querySelectorAll('.item');
+    expect(items.length).toBe(0);
+    cleanup(el);
+  });
+
+  it('recovers from malformed items JSON set via the attribute', async () => {
+    const el = await fixture('<bds-breadcrumb items="not valid json"></bds-breadcrumb>') as BdsBreadcrumb;
+    const items = el.shadowRoot!.querySelectorAll('.item');
+    expect(items.length).toBe(0);
+    cleanup(el);
+  });
+
+  it('renders non-last items without href as non-interactive text, not a href="#" link', async () => {
+    const el = await fixture('<bds-breadcrumb></bds-breadcrumb>') as BdsBreadcrumb;
+    el.items = [{ label: 'Home' }, { label: 'Current' }];
+    await el.updateComplete;
+    const link = el.shadowRoot!.querySelector('a.link');
+    expect(link).toBeNull();
+    const text = el.shadowRoot!.querySelector('.text');
+    expect(text).not.toBeNull();
+    expect(text!.textContent).toBe('Home');
+    cleanup(el);
+  });
 });

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

@@ -10,13 +10,25 @@ export interface BreadcrumbItem {
  *
  * Attributes:
  *   items — JSON string array of `{ label: string, href?: string }` objects.
- *           The last item is treated as the current page (no link).
+ *           The last item is treated as the current page (no link). Any other
+ *           item without an `href` renders as plain text instead of a link.
+ *           Malformed JSON (or a removed attribute) falls back to `[]`.
  *
  * @example
  * <bds-breadcrumb items='[{"label":"Home","href":"/"},{"label":"Products","href":"/products"},{"label":"Item"}]'></bds-breadcrumb>
  */
 export class BdsBreadcrumb extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -65,6 +77,10 @@ export class BdsBreadcrumb extends LitElement {
       user-select: none;
     }
 
+    .text {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
     .current {
       color: var(--bds-color_on-bg--subtle);
       font-weight: var(--bds-font_weight--semibold);
@@ -83,17 +99,23 @@ export class BdsBreadcrumb extends LitElement {
   }
 
   render() {
+    // this.items may be null: the Lit default Array/Object attribute
+    // converter returns null (rather than throwing) both for malformed
+    // JSON and for a removed attribute — fall back to an empty list.
+    const items = this.items ?? [];
     return html`
       <nav class="breadcrumb" aria-label="Breadcrumb">
         <ol class="list">
-          ${this.items.map((item, index) => {
-            const isLast = index === this.items.length - 1;
+          ${items.map((item, index) => {
+            const isLast = index === items.length - 1;
             return html`
               <li class="item">
                 ${isLast
                   ? html`<span class="current" aria-current="page">${item.label}</span>`
                   : html`
-                      <a class="link" href=${item.href ?? '#'}>${item.label}</a>
+                      ${item.href
+                        ? html`<a class="link" href=${item.href}>${item.label}</a>`
+                        : html`<span class="text">${item.label}</span>`}
                       <span class="separator" aria-hidden="true">›</span>
                     `}
               </li>

package/src/web-components/ui/bds-button-container.spec.ts

@@ -0,0 +1,39 @@
+import { fixture, cleanup } from '../test/helpers';
+import { BdsButtonContainer } from './bds-button-container';
+
+describe('bds-button-container', () => {
+  it('is registered as a custom element', () => {
+    expect(customElements.get('bds-button-container')).toBe(BdsButtonContainer);
+  });
+
+  it('renders a group role element wrapping a slot', async () => {
+    const el = await fixture('<bds-button-container>content</bds-button-container>');
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group).not.toBeNull();
+    expect(group.querySelector('slot')).not.toBeNull();
+    cleanup(el);
+  });
+
+  it('reflects the variant attribute', async () => {
+    const el = await fixture(
+      '<bds-button-container variant="modal">content</bds-button-container>',
+    ) as BdsButtonContainer;
+    expect(el.variant).toBe('modal');
+    expect(el.getAttribute('variant')).toBe('modal');
+    cleanup(el);
+  });
+
+  it('forwards aria-label to the group', async () => {
+    const el = await fixture('<bds-button-container aria-label="Dialog actions">x</bds-button-container>');
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group.getAttribute('aria-label')).toBe('Dialog actions');
+    cleanup(el);
+  });
+
+  it('omits aria-label when unset', async () => {
+    const el = await fixture('<bds-button-container>x</bds-button-container>');
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
+});

package/src/web-components/ui/bds-button-container.ts

@@ -0,0 +1,123 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+export type ButtonContainerVariant = 'flow' | 'card' | 'modal' | 'content';
+
+/**
+ * `<bds-button-container>` — responsive layout wrapper for a row of action
+ * buttons (Cancel / Confirm, Back / Next, …). Web-component port of the React
+ * `ButtonContainer`.
+ *
+ * Buttons stack vertically (primary on top via `column-reverse`) on narrow
+ * containers and lay out in a row once the container is at least 30rem wide.
+ * The `variant` controls alignment:
+ *   - `flow`    — multi-step navigation (Back / Next); single child pushed to the end
+ *   - `card`    — single-form submit; centered / full-width
+ *   - `modal`   — dialog actions; aligned to the end
+ *   - `content` — inline content actions; aligned to the start
+ *
+ * Attributes:
+ *   variant     — `"flow"` | `"card"` | `"modal"` | `"content"`
+ *   aria-label  — accessible label for the group
+ *
+ * Slots:
+ *   (default) — `<bds-button>` elements
+ *
+ * @example
+ * <bds-button-container variant="modal" aria-label="Dialog actions">
+ *   <bds-button variant="outline">Cancel</bds-button>
+ *   <bds-button>Confirm</bds-button>
+ * </bds-button-container>
+ */
+export class BdsButtonContainer extends LitElement {
+  static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      inline-size: 100%;
+      /* Span the full row when placed inside a bds-grid. */
+      grid-column: var(--bds-grid_span-100, 1 / -1);
+      container-type: inline-size;
+      container-name: button-container;
+    }
+
+    .container {
+      position: relative;
+      display: flex;
+      flex-direction: column-reverse;
+      gap: var(--buttonGroup_gap, var(--bds-space_l));
+      align-items: center;
+    }
+
+    :host([variant='card']) .container {
+      align-items: stretch;
+    }
+
+    :host([variant='flow']) .container,
+    :host([variant='modal']) .container {
+      align-items: center;
+    }
+
+    :host([variant='content']) .container {
+      align-items: flex-start;
+    }
+
+    @container button-container (min-width: 30rem) {
+      .container {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      /* A lone button in flow/modal is pushed to the end. */
+      :host([variant='modal']) ::slotted(:only-child),
+      :host([variant='flow']) ::slotted(:only-child) {
+        margin-inline-start: auto;
+      }
+
+      :host([variant='card']) .container {
+        justify-content: center;
+      }
+
+      :host([variant='modal']) .container {
+        justify-content: flex-end;
+      }
+
+      :host([variant='content']) .container {
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+  `;
+
+  static properties = {
+    variant: { type: String, reflect: true },
+    'aria-label': { type: String },
+  };
+
+  declare variant: ButtonContainerVariant | undefined;
+  declare ['aria-label']: string | undefined;
+
+  render() {
+    return html`
+      <div class="container" role="group" aria-label=${this['aria-label'] ?? nothing}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('bds-button-container', BdsButtonContainer);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-button-container': BdsButtonContainer;
+  }
+}

package/src/web-components/ui/bds-button-group.spec.ts

@@ -1,40 +1,34 @@
 import { fixture, cleanup } from '../test/helpers';
 import { BdsButtonGroup } from './bds-button-group';
+import { BdsButtonContainer } from './bds-button-container';
 
-describe('bds-button-group', () => {
+describe('bds-button-group (deprecated alias of bds-button-container)', () => {
   it('is registered as a custom element', () => {
     expect(customElements.get('bds-button-group')).toBe(BdsButtonGroup);
   });
 
+  it('is a subclass of BdsButtonContainer and importing it registers the real element', () => {
+    expect(new BdsButtonGroup()).toBeInstanceOf(BdsButtonContainer);
+    expect(customElements.get('bds-button-container')).toBe(BdsButtonContainer);
+  });
+
   it('renders a group role element', async () => {
     const el = await fixture('<bds-button-group>content</bds-button-group>');
     expect(el.shadowRoot!.querySelector('[role="group"]')).not.toBeNull();
     cleanup(el);
   });
 
-  it('defaults to horizontal orientation', async () => {
-    const el = await fixture('<bds-button-group>content</bds-button-group>') as BdsButtonGroup;
-    expect(el.orientation).toBe('horizontal');
-    cleanup(el);
-  });
-
-  it('reflects vertical orientation attribute', async () => {
-    const el = await fixture('<bds-button-group orientation="vertical">content</bds-button-group>') as BdsButtonGroup;
-    expect(el.orientation).toBe('vertical');
-    expect(el.getAttribute('orientation')).toBe('vertical');
-    cleanup(el);
-  });
-
-  it('renders a slot', async () => {
-    const el = await fixture('<bds-button-group><span>item</span></bds-button-group>');
-    expect(el.shadowRoot!.querySelector('slot')).not.toBeNull();
-    cleanup(el);
-  });
-
   it('sets aria-label on the group element', async () => {
     const el = await fixture('<bds-button-group aria-label="View options">content</bds-button-group>');
     const group = el.shadowRoot!.querySelector('[role="group"]')!;
     expect(group.getAttribute('aria-label')).toBe('View options');
     cleanup(el);
   });
+
+  it('omits the aria-label attribute entirely when unset, instead of rendering an empty string', async () => {
+    const el = await fixture('<bds-button-group>content</bds-button-group>');
+    const group = el.shadowRoot!.querySelector('[role="group"]')!;
+    expect(group.hasAttribute('aria-label')).toBe(false);
+    cleanup(el);
+  });
 });