@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -1,6 +1,7 @@
 import { LitElement, css, html, nothing } from 'lit';
 
 export type CardVariant = 'default' | 'elevated' | 'outlined';
+export type CardPadding = 'none' | 'small' | 'medium' | 'large' | 'extra-large';
 export type CardTextAlign = 'start' | 'center' | 'end';
 
 /**
@@ -8,11 +9,14 @@ export type CardTextAlign = 'start' | 'center' | 'end';
  *
  * Attributes:
  *   variant    — "default" (default) | "elevated" | "outlined"
- *   --card_padding — CSS custom property to override padding (default: var(--bds-space_m))
+ *   padding    — "none" | "small" | "medium" (default) | "large" | "extra-large"
  *   text-align — "start" (default) | "center" | "end"
  *   clickable  — boolean; renders as a <button> with hover/active effects
  *   aria-label — accessible label (useful when clickable)
  *
+ * CSS Custom Properties:
+ *   --card_padding — overrides the padding value applied by the active padding variant
+ *
  * Slots:
  *   (default) — card content
  *
@@ -20,7 +24,7 @@ export type CardTextAlign = 'start' | 'center' | 'end';
  *   bds-click — fired (bubbles, composed) when the card button is clicked
  *
  * @example
- * <bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
+ * <bds-card variant="elevated" padding="large">
  *   <p>Card content</p>
  * </bds-card>
  *
@@ -30,6 +34,16 @@ export type CardTextAlign = 'start' | 'center' | 'end';
  */
 export class BdsCard 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;
     }
@@ -46,7 +60,6 @@ export class BdsCard extends LitElement {
       text-align: inherit;
       font: inherit;
       border: none;
-      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -60,18 +73,26 @@ export class BdsCard extends LitElement {
       box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
     }
 
-    .card.--text-start  { text-align: start; }
-    .card.--text-center { text-align: center; }
-    .card.--text-end    { text-align: end; }
-
     .card.--clickable {
       cursor: pointer;
       display: block;
     }
 
+    /* Padding variants — consumers can override the resolved value via --card_padding
+       (applies whichever scale token the active padding variant resolves to). */
+    .card.--padding-none         { padding: var(--card_padding, 0); }
+    .card.--padding-small        { padding: var(--card_padding, var(--bds-space_s)); }
+    .card.--padding-medium       { padding: var(--card_padding, var(--bds-space_m)); }
+    .card.--padding-large        { padding: var(--card_padding, var(--bds-space_l)); }
+    .card.--padding-extra-large  { padding: var(--card_padding, var(--bds-space_xl)); }
+
+    .card.--text-start  { text-align: start; }
+    .card.--text-center { text-align: center; }
+    .card.--text-end    { text-align: end; }
+
     .card.--clickable:focus-visible {
-      outline: 2px solid var(--color_focus, currentcolor);
-      outline-offset: 2px;
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
     }
 
     .card.--clickable:active {
@@ -93,12 +114,14 @@ export class BdsCard extends LitElement {
 
   static properties = {
     variant:   { type: String, reflect: true },
+    padding:   { type: String, reflect: true },
     textAlign: { type: String, attribute: 'text-align', reflect: true },
     clickable: { type: Boolean, reflect: true },
     ariaLabel: { type: String, attribute: 'aria-label' },
   };
 
   declare variant: CardVariant;
+  declare padding: CardPadding;
   declare textAlign: CardTextAlign;
   declare clickable: boolean;
   declare ariaLabel: string;
@@ -106,6 +129,7 @@ export class BdsCard extends LitElement {
   constructor() {
     super();
     this.variant = 'default';
+    this.padding = 'medium';
     this.textAlign = 'start';
     this.clickable = false;
     this.ariaLabel = '';
@@ -119,6 +143,7 @@ export class BdsCard extends LitElement {
     const classes = [
       'card',
       `--${this.variant}`,
+      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? '--clickable' : '',
     ].filter(Boolean).join(' ');

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

@@ -61,4 +61,151 @@ describe('bds-carousel', () => {
     expect(dots.length).toBe(3);
     cleanup(el);
   });
+
+  it('exposes public goTo()/next()/prev() navigation methods', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div><div>S3</div></bds-carousel>') as BdsCarousel;
+    await el.updateComplete;
+
+    el.next();
+    await el.updateComplete;
+    expect(el.currentIndex).toBe(1);
+
+    el.goTo(2);
+    await el.updateComplete;
+    expect(el.currentIndex).toBe(2);
+
+    el.prev();
+    await el.updateComplete;
+    expect(el.currentIndex).toBe(1);
+
+    cleanup(el);
+  });
+
+  it('scrolls the target slide into view when current-index changes (goTo)', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div><div>S3</div></bds-carousel>') as BdsCarousel;
+    await el.updateComplete;
+    const slides = el.querySelectorAll('div');
+    const scrollIntoView = vi.fn();
+    slides[2].scrollIntoView = scrollIntoView;
+
+    el.goTo(2);
+    await el.updateComplete;
+
+    expect(scrollIntoView).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('scrolls the target slide into view when the current-index attribute is set externally', async () => {
+    const el = await fixture('<bds-carousel><div>S1</div><div>S2</div></bds-carousel>') as BdsCarousel;
+    await el.updateComplete;
+    const slides = el.querySelectorAll('div');
+    const scrollIntoView = vi.fn();
+    slides[1].scrollIntoView = scrollIntoView;
+
+    el.setAttribute('current-index', '1');
+    await el.updateComplete;
+
+    expect(scrollIntoView).toHaveBeenCalled();
+    cleanup(el);
+  });
+
+  it('navigates when a custom slotted prev/next button is clicked', async () => {
+    const el = await fixture(`
+      <bds-carousel current-index="1">
+        <div>S1</div><div>S2</div><div>S3</div>
+        <button slot="prev" class="custom-prev">Back</button>
+        <button slot="next" class="custom-next">Forward</button>
+      </bds-carousel>
+    `) as BdsCarousel;
+    await el.updateComplete;
+
+    const customPrev = el.querySelector<HTMLButtonElement>('.custom-prev')!;
+    customPrev.click();
+    await el.updateComplete;
+    expect(el.currentIndex).toBe(0);
+
+    const customNext = el.querySelector<HTMLButtonElement>('.custom-next')!;
+    customNext.click();
+    await el.updateComplete;
+    expect(el.currentIndex).toBe(1);
+
+    cleanup(el);
+  });
+
+  it('excludes named-slot (prev/next) children from the slide count', async () => {
+    const el = await fixture(`
+      <bds-carousel indicators>
+        <div>S1</div><div>S2</div>
+        <button slot="prev">Prev</button>
+        <button slot="next">Next</button>
+      </bds-carousel>
+    `);
+    await el.updateComplete;
+    const dots = el.shadowRoot!.querySelectorAll('.dot');
+    expect(dots.length).toBe(2);
+    cleanup(el);
+  });
+
+  it('fires bds-slide-change when the active slide changes via manual scroll', async () => {
+    class MockIntersectionObserver {
+      static instances: MockIntersectionObserver[] = [];
+      callback: IntersectionObserverCallback;
+      constructor(callback: IntersectionObserverCallback) {
+        this.callback = callback;
+        MockIntersectionObserver.instances.push(this);
+      }
+      observe() {}
+      disconnect() {}
+      unobserve() {}
+      takeRecords() { return []; }
+    }
+    const OriginalIO = (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver;
+    (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = MockIntersectionObserver;
+
+    try {
+      const el = await fixture('<bds-carousel><div>S1</div><div>S2</div><div>S3</div></bds-carousel>') as BdsCarousel;
+      await el.updateComplete;
+
+      const changes: number[] = [];
+      el.addEventListener('bds-slide-change', (e: Event) => {
+        changes.push((e as CustomEvent).detail.index);
+      });
+
+      const slides = el.querySelectorAll('div');
+      const observer = MockIntersectionObserver.instances.at(-1)!;
+      observer.callback(
+        [{ isIntersecting: true, intersectionRatio: 1, target: slides[2] } as IntersectionObserverEntry],
+        observer as unknown as IntersectionObserver,
+      );
+
+      expect(changes).toEqual([2]);
+      expect(el.currentIndex).toBe(2);
+      cleanup(el);
+    } finally {
+      (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = OriginalIO;
+    }
+  });
+
+  it('uses aria-current on dots instead of an incomplete tabs pattern', async () => {
+    const el = await fixture('<bds-carousel indicators current-index="1"><div>S1</div><div>S2</div></bds-carousel>');
+    await el.updateComplete;
+    const dots = el.shadowRoot!.querySelectorAll('.dot');
+    expect(dots[0].getAttribute('role')).toBeNull();
+    expect(dots[1].getAttribute('role')).toBeNull();
+    expect(dots[0].getAttribute('aria-current')).toBe('false');
+    expect(dots[1].getAttribute('aria-current')).toBe('true');
+    expect(el.shadowRoot!.querySelector('[role="tablist"]')).toBeNull();
+    cleanup(el);
+  });
+
+  it('supports custom label / prev-label / next-label attributes', async () => {
+    const el = await fixture(
+      '<bds-carousel label="Featured products" prev-label="Vorige" next-label="Volgende"><div>S1</div></bds-carousel>',
+    );
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.track')!.getAttribute('aria-label')).toBe('Featured products');
+    expect(el.shadowRoot!.querySelector('[aria-label="Vorige"]')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('[aria-label="Volgende"]')).not.toBeNull();
+    cleanup(el);
+  });
 });

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

@@ -4,17 +4,28 @@ import { LitElement, css, html } from 'lit';
  * `<bds-carousel>` — scroll-snap based carousel/slider.
  *
  * Attributes:
- *   current-index — active slide index (0-based, default: 0)
+ *   current-index — active slide index (0-based, default: 0); setting it scrolls the track
  *   indicators    — show dot indicators
  *   loop          — wrap from last slide back to first and vice versa
+ *   label         — accessible name for the slide region (default: "Carousel")
+ *   prev-label    — accessible name for the previous button (default: "Previous slide")
+ *   next-label    — accessible name for the next button (default: "Next slide")
  *
  * Slots:
- *   (default) — slide content elements (each direct child = one slide)
- *   prev      — custom previous button (renders a default button if omitted)
- *   next      — custom next button (renders a default button if omitted)
+ *   (default) — slide content elements (each direct child with no `slot` attribute = one slide)
+ *   prev      — custom previous button (renders a default button if omitted); clicks anywhere
+ *               inside this slot navigate to the previous slide
+ *   next      — custom next button (renders a default button if omitted); clicks anywhere
+ *               inside this slot navigate to the next slide
+ *
+ * Methods:
+ *   goTo(index) — navigate to a specific slide (clamped, or wrapped when `loop` is set)
+ *   next()      — navigate to the next slide
+ *   prev()      — navigate to the previous slide
  *
  * Events:
- *   bds-slide-change — fired when active slide changes; `detail: { index: number }`
+ *   bds-slide-change — fired when active slide changes (navigation or manual scroll/swipe);
+ *                      `detail: { index: number }`
  *
  * @example
  * <bds-carousel indicators loop>
@@ -25,6 +36,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsCarousel 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;
       position: relative;
@@ -62,10 +83,14 @@ export class BdsCarousel extends LitElement {
       justify-content: center;
       inline-size: 2.5rem;
       block-size: 2.5rem;
-      border: none;
-      border-radius: var(--bds-border_radius--full, 9999px);
-      background-color: var(--bds-color_bg--subtle);
+      border-radius: var(--carousel_navBtn-radius, var(--carousel_indicator-radius, var(--bds-border_radius--circle)));
+      background-color: var(--carousel_navBtn-bg, var(--bds-color_bg));
       color: var(--bds-color_on-bg);
+
+      --bdc_color: var(--bds-color_on-bg);
+
+      border: none;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s);
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
@@ -77,7 +102,7 @@ export class BdsCarousel extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .nav-btn:hover {
-        background-color: var(--bds-color_bg--strong);
+        background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 
@@ -100,20 +125,33 @@ export class BdsCarousel extends LitElement {
     }
 
     .dot {
+      position: relative;
       inline-size: 0.5rem;
       block-size: 0.5rem;
-      border-radius: 50%;
+      border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
       border: none;
       padding: 0;
-      background-color: var(--bds-color_bg--strong);
+      background-color: var(--carousel_indicator-bg, var(--bds-color_bg--strong));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
 
+    /* Invisible hit-area overlay: keeps the 8px visual dot but expands the tappable
+       region to ~24px (WCAG 2.5.8 minimum) without affecting the flex layout/gap. */
+    .dot::before {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      translate: -50% -50%;
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+    }
+
     .dot.--active {
-      background-color: var(--bds-color_interactive);
+      background-color: var(--carousel_indicator-bg--active, var(--bds-color_interactive));
       inline-size: 1rem;
-      border-radius: 0.25rem;
+      border-radius: var(--carousel_indicator-radius--active, var(--bds-border_radius--full));
     }
 
     .dot:focus-visible {
@@ -132,20 +170,30 @@ export class BdsCarousel extends LitElement {
     currentIndex: { type: Number, attribute: 'current-index', reflect: true },
     indicators:   { type: Boolean, reflect: true },
     loop:         { type: Boolean, reflect: true },
+    label:        { type: String },
+    prevLabel:    { type: String, attribute: 'prev-label' },
+    nextLabel:    { type: String, attribute: 'next-label' },
   };
 
   declare currentIndex: number;
   declare indicators: boolean;
   declare loop: boolean;
+  declare label: string;
+  declare prevLabel: string;
+  declare nextLabel: string;
 
   private _slideCount = 0;
   private _io: IntersectionObserver | null = null;
+  private _skipNextScroll = false;
 
   constructor() {
     super();
     this.currentIndex = 0;
     this.indicators = false;
     this.loop = false;
+    this.label = 'Carousel';
+    this.prevLabel = 'Previous slide';
+    this.nextLabel = 'Next slide';
   }
 
   private get _track(): HTMLElement | null {
@@ -164,12 +212,49 @@ export class BdsCarousel extends LitElement {
     this._io = null;
   }
 
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('currentIndex')) {
+      if (this._skipNextScroll) {
+        this._skipNextScroll = false;
+      } else {
+        this._scrollToIndex(this.currentIndex);
+      }
+    }
+  }
+
+  /** Navigate to a specific slide (clamped, or wrapped when `loop` is set). */
+  goTo(index: number): void {
+    this._setIndex(index, true);
+  }
+
+  /** Navigate to the next slide. */
+  next(): void {
+    this._setIndex(this.currentIndex + 1, true);
+  }
+
+  /** Navigate to the previous slide. */
+  prev(): void {
+    this._setIndex(this.currentIndex - 1, true);
+  }
+
   private _updateSlideCount() {
-    this._slideCount = this.children.length;
+    // Only direct children with no `slot` attribute belong to the default slide slot;
+    // children assigned to the named prev/next slots must not inflate the slide count.
+    this._slideCount = Array.from(this.children).filter(child => !child.hasAttribute('slot')).length;
     this.requestUpdate();
   }
 
-  private _goTo(index: number) {
+  private _scrollToIndex(index: number) {
+    const track = this._track;
+    const slides = track?.querySelector('slot')?.assignedElements() ?? [];
+    const target = slides[index] as HTMLElement | undefined;
+    if (target && typeof target.scrollIntoView === 'function') {
+      target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    }
+  }
+
+  private _setIndex(index: number, scroll: boolean) {
     const count = this._slideCount;
     if (count === 0) return;
 
@@ -180,17 +265,11 @@ export class BdsCarousel extends LitElement {
       next = Math.max(0, Math.min(index, count - 1));
     }
 
-    if (next === this.currentIndex && index === next) return;
+    if (next === this.currentIndex) return;
 
+    this._skipNextScroll = !scroll;
     this.currentIndex = next;
 
-    const track = this._track;
-    const slides = track?.querySelector('slot')?.assignedElements() ?? [];
-    const target = slides[next] as HTMLElement | undefined;
-    if (target && typeof target.scrollIntoView === 'function') {
-      target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-    }
-
     this.dispatchEvent(new CustomEvent('bds-slide-change', {
       detail: { index: next },
       bubbles: true,
@@ -216,8 +295,9 @@ export class BdsCarousel extends LitElement {
         if (visible) {
           const idx = slides.indexOf(visible.target as Element);
           if (idx !== -1 && idx !== this.currentIndex) {
-            this.currentIndex = idx;
-            this.requestUpdate();
+            // The slide is already in view (this is a manual scroll/swipe) — sync state
+            // and notify consumers, but don't re-trigger a programmatic scroll.
+            this._setIndex(idx, false);
           }
         }
       },
@@ -234,17 +314,16 @@ export class BdsCarousel extends LitElement {
     const showNext = this.loop || !atEnd;
 
     return html`
-      <div class="track" aria-label="Carousel" role="region">
+      <div class="track" aria-label=${this.label} role="region">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
       <div class="controls">
-        <slot name="prev">
+        <slot name="prev" @click=${() => this.prev()}>
           <button
             class="nav-btn"
             type="button"
-            aria-label="Previous slide"
+            aria-label=${this.prevLabel}
             ?disabled=${!showPrev}
-            @click=${() => this._goTo(this.currentIndex - 1)}
           >
             <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
@@ -254,28 +333,26 @@ export class BdsCarousel extends LitElement {
 
         ${this.indicators
           ? html`
-              <div class="indicators" role="tablist" aria-label="Slides">
+              <div class="indicators" role="group" aria-label="Slides">
                 ${Array.from({ length: this._slideCount }, (_, i) => html`
                   <button
                     class="dot ${i === this.currentIndex ? '--active' : ''}"
                     type="button"
-                    role="tab"
-                    aria-selected=${i === this.currentIndex ? 'true' : 'false'}
+                    aria-current=${i === this.currentIndex ? 'true' : 'false'}
                     aria-label="Slide ${i + 1}"
-                    @click=${() => this._goTo(i)}
+                    @click=${() => this.goTo(i)}
                   ></button>
                 `)}
               </div>
             `
           : html`<span style="flex:1"></span>`}
 
-        <slot name="next">
+        <slot name="next" @click=${() => this.next()}>
           <button
             class="nav-btn"
             type="button"
-            aria-label="Next slide"
+            aria-label=${this.nextLabel}
             ?disabled=${!showNext}
-            @click=${() => this._goTo(this.currentIndex + 1)}
           >
             <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />

package/src/web-components/ui/bds-description-list.spec.ts

@@ -33,4 +33,19 @@ describe('bds-description-list', () => {
     expect(el.getAttribute('layout')).toBe('stacked');
     cleanup(el);
   });
+
+  it('lays dt/dd out side by side in a two-column grid when layout="inline"', () => {
+    const cssText = BdsDescriptionList.styles.cssText;
+    expect(cssText).toMatch(/:host\(\[layout='inline'\]\)\s*\.list\s*{[^}]*display:\s*grid/);
+    expect(cssText).toMatch(/:host\(\[layout='inline'\]\)\s*\.list\s*{[^}]*grid-template-columns:\s*minmax\(8rem,\s*1fr\)\s*2fr/);
+    expect(cssText).toMatch(/:host\(\[layout='inline'\]\)\s*::slotted\(dt\)\s*{[^}]*grid-column:\s*1/);
+    expect(cssText).toMatch(/:host\(\[layout='inline'\]\)\s*::slotted\(dd\)\s*{[^}]*grid-column:\s*2/);
+  });
+
+  it('gives stacked mode a tight xxs gap within a term/detail pair and a looser s gap before the next term', () => {
+    const cssText = BdsDescriptionList.styles.cssText;
+    expect(cssText).toMatch(/::slotted\(dt\)\s*{[^}]*margin-block-start:\s*var\(--bds-space_s\)/);
+    expect(cssText).toMatch(/::slotted\(dt:first-child\)\s*{\s*margin-block-start:\s*0/);
+    expect(cssText).toMatch(/::slotted\(dd\)\s*{[^}]*margin-block-start:\s*var\(--bds-space_xxs\)/);
+  });
 });

package/src/web-components/ui/bds-description-list.ts

@@ -22,6 +22,16 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsDescriptionList 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;
     }
@@ -29,28 +39,52 @@ export class BdsDescriptionList extends LitElement {
     .list {
       display: flex;
       flex-direction: column;
-      gap: var(--bds-space_s);
       margin: 0;
       padding: 0;
       font-size: var(--bds-font_size--body);
       color: var(--bds-color_on-bg);
     }
 
-    /* Style slotted dt/dd elements */
+    /* Style slotted dt/dd elements. Stacked spacing is asymmetric: a tight
+       xxs gap between a term and its own detail(s), and a looser "s" gap
+       before the next term — mirrors DescriptionList.module.css's
+       .group (xxs) nested inside .list (s), without a wrapper element. */
     ::slotted(dt) {
       font-weight: var(--bds-font_weight--semibold);
       color: var(--bds-color_on-bg);
       margin: 0;
+      margin-block-start: var(--bds-space_s);
+    }
+
+    ::slotted(dt:first-child) {
+      margin-block-start: 0;
     }
 
     ::slotted(dd) {
       margin: 0;
+      margin-block-start: var(--bds-space_xxs);
       color: var(--bds-color_on-bg);
     }
 
-    /* Inline layout: pair each dt/dd side by side */
+    /* Inline layout: pair each dt/dd side by side. <slot> defaults to
+       display: contents, so slotted dt/dd become direct grid items of
+       .list and the browser's row-by-row auto-placement pairs each term
+       with the detail(s) that follow it. */
     :host([layout='inline']) .list {
+      display: grid;
+      grid-template-columns: minmax(8rem, 1fr) 2fr;
       gap: var(--bds-space_xs);
+      align-items: baseline;
+    }
+
+    :host([layout='inline']) ::slotted(dt) {
+      grid-column: 1;
+      margin-block-start: 0;
+    }
+
+    :host([layout='inline']) ::slotted(dd) {
+      grid-column: 2;
+      margin-block-start: 0;
     }
   `;
 

package/src/web-components/ui/bds-icon-wrapper.spec.ts

@@ -18,4 +18,16 @@ describe('bds-icon-wrapper', () => {
     expect(svg).not.toBeNull();
     cleanup(el);
   });
+
+  it('does not stamp an empty aria-hidden attribute onto the host by default', async () => {
+    const el = await fixture('<bds-icon-wrapper></bds-icon-wrapper>');
+    expect(el.hasAttribute('aria-hidden')).toBe(false);
+    cleanup(el);
+  });
+
+  it('preserves a consumer-supplied aria-hidden attribute', async () => {
+    const el = await fixture('<bds-icon-wrapper aria-hidden="true"></bds-icon-wrapper>');
+    expect(el.getAttribute('aria-hidden')).toBe('true');
+    cleanup(el);
+  });
 });