@boostdev/design-system-components 2.8.0 → 2.11.0

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

@@ -0,0 +1,302 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-carousel.ts
+var BdsCarousel = 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;
+      position: relative;
+    }
+
+    .track {
+      display: flex;
+      overflow-inline: auto;
+      scroll-snap-type: inline mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .track::-webkit-scrollbar {
+      display: none;
+    }
+
+    ::slotted(*) {
+      flex-shrink: 0;
+      inline-size: 100%;
+      scroll-snap-align: start;
+    }
+
+    .controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-block-start: var(--bds-space_s);
+    }
+
+    .nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      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);
+    }
+
+    .nav-btn:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .nav-btn:hover {
+        background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+
+    .nav-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .nav-btn svg {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+    }
+
+    .indicators {
+      display: flex;
+      gap: var(--bds-space_xxs);
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+    }
+
+    .dot {
+      position: relative;
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
+      border: none;
+      padding: 0;
+      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(--carousel_indicator-bg--active, var(--bds-color_interactive));
+      inline-size: 1rem;
+      border-radius: var(--carousel_indicator-radius--active, var(--bds-border_radius--full));
+    }
+
+    .dot:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .track {
+        scroll-behavior: auto;
+      }
+    }
+  `;
+  static properties = {
+    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" }
+  };
+  _slideCount = 0;
+  _io = null;
+  _skipNextScroll = false;
+  constructor() {
+    super();
+    this.currentIndex = 0;
+    this.indicators = false;
+    this.loop = false;
+    this.label = "Carousel";
+    this.prevLabel = "Previous slide";
+    this.nextLabel = "Next slide";
+  }
+  get _track() {
+    return this.shadowRoot?.querySelector(".track") ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateSlideCount();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._io?.disconnect();
+    this._io = null;
+  }
+  updated(changed) {
+    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) {
+    this._setIndex(index, true);
+  }
+  /** Navigate to the next slide. */
+  next() {
+    this._setIndex(this.currentIndex + 1, true);
+  }
+  /** Navigate to the previous slide. */
+  prev() {
+    this._setIndex(this.currentIndex - 1, true);
+  }
+  _updateSlideCount() {
+    this._slideCount = Array.from(this.children).filter((child) => !child.hasAttribute("slot")).length;
+    this.requestUpdate();
+  }
+  _scrollToIndex(index) {
+    const track = this._track;
+    const slides = track?.querySelector("slot")?.assignedElements() ?? [];
+    const target = slides[index];
+    if (target && typeof target.scrollIntoView === "function") {
+      target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+    }
+  }
+  _setIndex(index, scroll) {
+    const count = this._slideCount;
+    if (count === 0) return;
+    let next = index;
+    if (this.loop) {
+      next = (index % count + count) % count;
+    } else {
+      next = Math.max(0, Math.min(index, count - 1));
+    }
+    if (next === this.currentIndex) return;
+    this._skipNextScroll = !scroll;
+    this.currentIndex = next;
+    this.dispatchEvent(new CustomEvent("bds-slide-change", {
+      detail: { index: next },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onSlotChange() {
+    this._updateSlideCount();
+    this._io?.disconnect();
+    const track = this._track;
+    if (!track) return;
+    const slot = track.querySelector("slot");
+    const slides = slot?.assignedElements() ?? [];
+    if (typeof IntersectionObserver === "undefined") return;
+    this._io = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.find((e) => e.isIntersecting && e.intersectionRatio >= 0.5);
+        if (visible) {
+          const idx = slides.indexOf(visible.target);
+          if (idx !== -1 && idx !== this.currentIndex) {
+            this._setIndex(idx, false);
+          }
+        }
+      },
+      { root: track, threshold: 0.5 }
+    );
+    slides.forEach((slide) => this._io.observe(slide));
+  }
+  render() {
+    const atStart = this.currentIndex <= 0;
+    const atEnd = this.currentIndex >= this._slideCount - 1;
+    const showPrev = this.loop || !atStart;
+    const showNext = this.loop || !atEnd;
+    return T`
+      <div class="track" aria-label=${this.label} role="region">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="controls">
+        <slot name="prev" @click=${() => this.prev()}>
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label=${this.prevLabel}
+            ?disabled=${!showPrev}
+          >
+            <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" />
+            </svg>
+          </button>
+        </slot>
+
+        ${this.indicators ? T`
+              <div class="indicators" role="group" aria-label="Slides">
+                ${Array.from({ length: this._slideCount }, (_, i3) => T`
+                  <button
+                    class="dot ${i3 === this.currentIndex ? "--active" : ""}"
+                    type="button"
+                    aria-current=${i3 === this.currentIndex ? "true" : "false"}
+                    aria-label="Slide ${i3 + 1}"
+                    @click=${() => this.goTo(i3)}
+                  ></button>
+                `)}
+              </div>
+            ` : T`<span style="flex:1"></span>`}
+
+        <slot name="next" @click=${() => this.next()}>
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label=${this.nextLabel}
+            ?disabled=${!showNext}
+          >
+            <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" />
+            </svg>
+          </button>
+        </slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-carousel", BdsCarousel);
+
+export {
+  BdsCarousel
+};

package/dist/web-components/{chunk-3S42DZ7W.js → chunk-P24JYC5V.js}

@@ -38,9 +38,16 @@ var bdcCss = `
       --bdc_color--focus: var(--bds-color_interactive);
       --bdc_color--error: var(--bds-color_error);
 
+      /* Active / selected state colours \u2014 override these to theme all filled form controls globally */
+      --bdc-color_active:          var(--bds-color_interactive);
+      --bdc-color_on-active:       var(--bds-color_on-interactive);
+      --bdc-color_active--subtle:  var(--bds-color_blue--subtle);
+      --bdc-color_active--strong:  var(--bds-color_interactive_on-bg);
+
       --bdc-outline_width:  1px;
       --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
       --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_radius--l: 1.5em;
       --bdc-outline_shadow: 0 0 0 0 transparent;
     }
   }

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-TQ7IQ4GZ.js → chunk-QEF2IRID.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,19 +28,23 @@ 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;
@@ -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-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
+};