@boostdev/design-system-components 2.8.0 → 2.12.0

package/dist/web-components/{chunk-TQ7IQ4GZ.js → chunk-PLWCDDP6.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -7,6 +8,16 @@ import {
 // src/web-components/interaction/bds-popover.ts
 var BdsPopover = class extends i2 {
   static styles = i`
+    /* 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;
       position: relative;
@@ -17,25 +28,29 @@ var BdsPopover = class extends i2 {
        gets its own unique name without colliding with siblings. */
     .wrapper {
       display: inline-flex;
-      anchor-name: var(--bds-popover-anchor);
+      anchor-name: var(--popover-anchor);
     }
 
     .panel {
       display: none;
-      position: absolute;
-      position-anchor: var(--bds-popover-anchor);
+
+      /* position: fixed (not absolute) — containing block is the viewport,
+         so the panel escapes ancestor overflow:hidden/scroll clipping and
+         stacking contexts, matching the React implementation. */
+      position: fixed;
+      position-anchor: var(--popover-anchor);
       margin: 0;
-      overflow-y: auto;
+      overflow-block: auto;
       z-index: var(--popover_z-index, 100);
-      min-width: 12rem;
-      max-width: var(--popover_max-width, 20rem);
-      max-height: var(--popover_max-height, 80dvh);
+      min-inline-size: 12rem;
+      max-inline-size: var(--popover_max-width, 20rem);
+      max-block-size: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
       border: var(--popover_border, none);
       --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--popover_radius, var(--bdc-outline_radius));
-      background-color: var(--popover_color, var(--bds-color_bg));
+      background-color: var(--popover_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
       color: var(--popover_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
@@ -50,84 +65,89 @@ var BdsPopover = class extends i2 {
     .panel[data-placement='bottom'] {
       top: anchor(bottom);
       left: anchor(left);
-      margin-top: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-top, --bds-popover-right, --bds-popover-left;
+      margin-block-start: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-top, --popover-right, --popover-left;
     }
 
     .panel[data-placement='top'] {
       bottom: anchor(top);
       left: anchor(left);
-      margin-bottom: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-bottom, --bds-popover-right, --bds-popover-left;
+      margin-block-end: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-bottom, --popover-right, --popover-left;
     }
 
     .panel[data-placement='right'] {
       top: anchor(top);
       left: anchor(right);
-      margin-left: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-left, --bds-popover-bottom, --bds-popover-top;
+      margin-inline-start: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-left, --popover-bottom, --popover-top;
     }
 
     .panel[data-placement='left'] {
       top: anchor(top);
       right: anchor(left);
-      margin-right: var(--bds-space_xs, 8px);
-      position-try-fallbacks: --bds-popover-right, --bds-popover-bottom, --bds-popover-top;
+      margin-inline-end: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --popover-right, --popover-bottom, --popover-top;
     }
 
     /* Fallback placements */
 
-    @position-try --bds-popover-bottom {
+    @position-try --popover-bottom {
       top: anchor(bottom);
       right: unset;
       bottom: unset;
       left: anchor(left);
       margin: 0;
-      margin-top: var(--bds-space_xs, 8px);
+      margin-block-start: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-top {
+    @position-try --popover-top {
       top: unset;
       right: unset;
       bottom: anchor(top);
       left: anchor(left);
       margin: 0;
-      margin-bottom: var(--bds-space_xs, 8px);
+      margin-block-end: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-right {
+    @position-try --popover-right {
       top: anchor(top);
       right: unset;
       bottom: unset;
       left: anchor(right);
       margin: 0;
-      margin-left: var(--bds-space_xs, 8px);
+      margin-inline-start: var(--bds-space_xs, 8px);
     }
 
-    @position-try --bds-popover-left {
+    @position-try --popover-left {
       top: anchor(top);
       right: anchor(left);
       bottom: unset;
       left: unset;
       margin: 0;
-      margin-right: var(--bds-space_xs, 8px);
+      margin-inline-end: var(--bds-space_xs, 8px);
     }
   `;
   static properties = {
     placement: { type: String, reflect: true },
-    open: { type: Boolean, reflect: true }
+    open: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
   };
   _anchorName;
+  _panelId;
+  _triggerEl = null;
   constructor() {
     super();
     this.placement = "bottom";
     this.open = false;
+    this.ariaLabel = null;
     const uid = Math.random().toString(36).slice(2, 8);
-    this._anchorName = `--bds-popover-${uid}`;
+    this._anchorName = `--popover-${uid}`;
+    this._panelId = `bds-popover-panel-${uid}`;
   }
   connectedCallback() {
     super.connectedCallback();
-    this.style.setProperty("--bds-popover-anchor", this._anchorName);
+    this.style.setProperty("--popover-anchor", this._anchorName);
     document.addEventListener("keydown", this._onKeydown);
     document.addEventListener("mousedown", this._onOutsideClick);
     this.addEventListener("command", this._onCommand);
@@ -160,23 +180,45 @@ var BdsPopover = class extends i2 {
   _open() {
     if (this.open) return;
     this.open = true;
+    this._triggerEl?.setAttribute("aria-expanded", "true");
     this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
   }
   _close() {
     if (!this.open) return;
     this.open = false;
+    this._triggerEl?.setAttribute("aria-expanded", "false");
     this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
+    if (this.contains(document.activeElement)) {
+      this._triggerEl?.focus();
+    }
+  }
+  // Track the slotted trigger so aria-expanded/haspopup/controls can be kept
+  // in sync and focus can be restored on close (mirrors the React
+  // cloneElement wiring and bds-dropdown-menu's trigger-tracking pattern).
+  _onTriggerSlotChange(e) {
+    const slot = e.target;
+    this._triggerEl = slot.assignedElements()[0] ?? null;
+    if (this._triggerEl) {
+      this._triggerEl.setAttribute("aria-haspopup", "true");
+      this._triggerEl.setAttribute("aria-controls", this._panelId);
+      this._triggerEl.setAttribute("aria-expanded", String(this.open));
+    }
   }
   render() {
     return T`
       <span class="wrapper">
-        <slot name="trigger" @click=${this._toggle}></slot>
+        <slot
+          name="trigger"
+          @click=${this._toggle}
+          @slotchange=${this._onTriggerSlotChange}
+        ></slot>
       </span>
       <div
         class="panel ${this.open ? "open" : ""}"
         data-placement=${this.placement}
-        role="region"
-        aria-label="Popover"
+        id=${this._panelId}
+        role=${this.ariaLabel ? "region" : A}
+        aria-label=${this.ariaLabel ?? A}
       >
         <slot></slot>
       </div>

package/dist/web-components/{chunk-BKIHQYJR.js → chunk-PXPPKCLT.js}

@@ -7,13 +7,24 @@ import {
 // src/web-components/interaction/bds-accordion.ts
 var BdsAccordion = class extends i2 {
   static styles = i`
+    /* 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;
       border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--accordion_shadow, var(--bdc-outline_shadow));
       overflow: hidden;
     }
   `;
@@ -38,13 +49,17 @@ var BdsAccordion = class extends i2 {
     this._mo = null;
   }
   get _items() {
-    return [...this.querySelectorAll("bds-accordion-item")];
+    return [...this.querySelectorAll("bds-accordion-item")].filter(
+      (item) => item.closest("bds-accordion") === this
+    );
   }
   _discoverItems() {
     this.requestUpdate();
   }
   _handleItemToggle = (e) => {
     const toggled = e.target;
+    if (toggled.closest("bds-accordion") !== this) return;
+    e.stopPropagation();
     const items = this._items;
     const wasOpen = toggled.open;
     if (!this.allowMultiple) {

package/dist/web-components/{chunk-PC3IOQAH.js → chunk-QKWXCBTH.js}

@@ -8,12 +8,22 @@ import {
 // src/web-components/ui/bds-card.ts
 var BdsCard = class extends i2 {
   static styles = i`
+    /* 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;
     }
 
     .card {
-      background-color: var(--card_color, var(--bds-color_bg));
+      background-color: var(--card_color, var(--bds-color_bg--strong, var(--bds-color_bg)));
       color: var(--card_on-color, var(--bds-color_on-bg));
       border-radius: var(--bds-border_radius--m);
       transition: all 0.3s ease;
@@ -24,7 +34,6 @@ var BdsCard = class extends i2 {
       text-align: inherit;
       font: inherit;
       border: none;
-      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -38,18 +47,26 @@ var BdsCard = class extends i2 {
       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 {
@@ -70,6 +87,7 @@ var BdsCard = class extends i2 {
   `;
   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" }
@@ -77,6 +95,7 @@ var BdsCard = class extends i2 {
   constructor() {
     super();
     this.variant = "default";
+    this.padding = "medium";
     this.textAlign = "start";
     this.clickable = false;
     this.ariaLabel = "";
@@ -88,6 +107,7 @@ var BdsCard = class extends i2 {
     const classes = [
       "card",
       `--${this.variant}`,
+      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? "--clickable" : ""
     ].filter(Boolean).join(" ");

package/dist/web-components/chunk-QZAIRJ75.js

@@ -0,0 +1,111 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dropdown-menu-item.ts
+var BdsDropdownMenuItem = class extends i2 {
+  static styles = i`
+    /* 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;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      inline-size: 100%;
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+      background: none;
+      border: none;
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--bds-border_radius--xs);
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([destructive]) .item {
+      color: var(--bds-color_error);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .item:hover {
+        background-color: var(--dropdown_item-bg--hover, var(--bds-color_bg--subtle));
+        color: var(--dropdown_item-color--hover, var(--bds-color_interactive_on-bg));
+      }
+
+      :host([destructive]) .item:hover {
+        background-color: color-mix(in srgb, var(--bds-color_error) 10%, transparent);
+      }
+    }
+
+    .item:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+  `;
+  static properties = {
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    destructive: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.value = "";
+    this.disabled = false;
+    this.destructive = false;
+  }
+  _handleClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent("bds-select", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleKeydown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._handleClick();
+    }
+  }
+  render() {
+    return T`
+      <button
+        class="item"
+        type="button"
+        role="menuitem"
+        tabindex=${this.disabled ? "-1" : "0"}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu-item", BdsDropdownMenuItem);
+
+export {
+  BdsDropdownMenuItem
+};

package/dist/web-components/{chunk-6I3CFC26.js → chunk-RSZ3BWBK.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/interaction/bds-tab.ts
 var BdsTab = class extends i2 {
   static styles = i`
+    /* 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;
     }
@@ -19,8 +29,13 @@ var BdsTab = class extends i2 {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       font-weight: var(--bds-font_weight--semibold);
-      color: var(--tab_color, var(--bds-color_on-bg));
-      border-block-end: 2px solid var(--tab_border-color, transparent);
+
+      /* Layered cascade: public overrides (--tab_color, --tab_border-color) win over
+         per-state defaults. Active/hover write to the inner --tab_*--state slot —
+         mirrors the React Tabs.module.css pattern so a consumer's --tab_color
+         override is never shadowed by the selected/hover rules below. */
+      color:            var(--tab_color, var(--tab_color--state, var(--bds-color_on-bg)));
+      border-block-end: 2px solid var(--tab_border-color, var(--tab_border-color--state, transparent));
       margin-block-end: -1px;
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -28,8 +43,8 @@ var BdsTab = class extends i2 {
     }
 
     :host([selected]) .tab {
-      --tab_color:        var(--bds-color_interactive_on-bg);
-      --tab_border-color: var(--bds-color_interactive);
+      --tab_color--state:        var(--tab_color--active, var(--bds-color_interactive_on-bg));
+      --tab_border-color--state: var(--tab_border-color--active, var(--bds-color_interactive));
     }
 
     .tab:disabled {
@@ -45,7 +60,7 @@ var BdsTab = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .tab:not(:disabled, [aria-selected='true']):hover {
-        --tab_color: var(--bds-color_interactive_on-bg);
+        --tab_color--state: var(--tab_color--hover, var(--bds-color_interactive_on-bg));
       }
     }
   `;

package/dist/web-components/chunk-RVF7W653.js

@@ -0,0 +1,101 @@
+import {
+  s,
+  u
+} from "./chunk-QPOKHLMQ.js";
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-section-header.ts
+var BdsSectionHeader = class extends i2 {
+  static styles = i`
+    /* 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;
+      grid-column: var(--bds-grid_span-100);
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sectionHeader_gap, var(--bds-space_m));
+    }
+
+    .title {
+      /* --sectionHeader-title-color (kebab delimiter) is deprecated -- use --sectionHeader_title-color */
+      color: var(--sectionHeader_title-color, var(--sectionHeader-title-color, var(--bds-color_on-bg)));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+    }
+
+    .subtitle {
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--medium);
+    }
+
+    .header.--start  { align-items: flex-start; text-align: start; }
+    .header.--center { align-items: center;      text-align: center; }
+    .header.--end    { align-items: flex-end;    text-align: end; }
+
+    /* medium first -- default size, so MCP extraction picks up its fallbacks */
+    .header.--medium .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--medium .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-3)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); }
+
+    .header.--xs     .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--xs     .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+
+    .header.--small  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--heading-1)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--heading)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); }
+    .header.--small  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--body)); line-height: var(--sectionHeader_subtitle-line-height, 1.4); }
+
+    .header.--large  .title { font-size: var(--sectionHeader_title-size, var(--bds-font_size--display)); line-height: var(--sectionHeader_title-line-height, var(--bds-font_line-height--display)); font-weight: var(--sectionHeader_title-weight, var(--bds-font_weight--bold)); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--sectionHeader_subtitle-size, var(--bds-font_size--heading-2)); line-height: var(--sectionHeader_subtitle-line-height, 1.3); font-weight: var(--bds-font_weight--medium); }
+  `;
+  static properties = {
+    heading: { type: String },
+    title: { type: String },
+    subtitle: { type: String },
+    alignment: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    titleAs: { type: String, attribute: "title-as" }
+  };
+  constructor() {
+    super();
+    this.heading = "";
+    this.title = "";
+    this.subtitle = "";
+    this.alignment = "start";
+    this.size = "medium";
+    this.titleAs = "h2";
+  }
+  get _headingText() {
+    return this.heading || this.title;
+  }
+  render() {
+    const tag = s(this.titleAs || "h2");
+    return T`
+      <div class="header --${this.alignment} --${this.size}">
+        ${u`<${tag} class="title">${this._headingText}</${tag}>`}
+        ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-section-header", BdsSectionHeader);
+
+export {
+  BdsSectionHeader
+};