@boostdev/design-system-components 2.8.0 → 2.12.0

package/dist/web-components/{chunk-2FGATTGT.js → chunk-NTQ4TCUT.js}

@@ -9,6 +9,16 @@ import {
 var BdsSegmentedControl = class extends i2 {
   static formAssociated = true;
   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,25 +29,35 @@ var BdsSegmentedControl = class extends i2 {
     }
 
     .control {
-      display: inline-flex;
       position: relative;
-      border-radius: var(--bds-border_radius--s);
-      background-color: var(--segmented_color_bg, var(--bds-color_bg--subtle));
-      padding: 0.25rem;
+      display: inline-grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      padding: var(--control_track-pad, var(--bds-space_xxs));
+      background-color: var(--control_track-bg, var(--segmented_color_bg, var(--bds-color_bg--subtle)));
+      border-radius: var(--control_radius, var(--bds-border_radius--full));
       gap: 0;
+      --control_dir: 1;
     }
 
-    /* Sliding thumb */
+    :host(:dir(rtl)) .control {
+      --control_dir: -1;
+    }
+
+    /* Sliding thumb (filled variant) — positioned entirely via CSS custom properties
+       (--control_count / --control_selected-index, set inline from render()) so it
+       stays correct across RTL and resize without any JS measurement. */
     .thumb {
       position: absolute;
-      inset-block: 0.25rem;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
-      background-color: var(--segmented_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
-      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
-                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      inset-block: var(--control_track-pad, var(--bds-space_xxs));
+      inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+      inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
+      background-color: var(--control_thumb-bg, var(--segmented_thumb-color, var(--bds-color_interactive)));
+      box-shadow: var(--control_thumb-shadow, var(--bds-shadow_s));
       pointer-events: none;
-      /* Position set via JS in updated() */
+      transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .radio {
@@ -50,6 +70,7 @@ var BdsSegmentedControl = class extends i2 {
 
     .item {
       position: relative;
+      z-index: 1;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -57,9 +78,9 @@ var BdsSegmentedControl = class extends i2 {
       font-size: var(--bds-font_size--body--s);
       font-family: var(--bds-font_family--body);
       font-weight: var(--bds-font_weight--semibold);
-      color: var(--segmented_color, var(--bds-color_on-bg));
+      color: var(--control_label-color, var(--segmented_color, var(--bds-color_on-bg)));
       cursor: pointer;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
       transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
       user-select: none;
       white-space: nowrap;
@@ -67,7 +88,7 @@ var BdsSegmentedControl = class extends i2 {
     }
 
     .item.--active {
-      color: var(--segmented_color--active, var(--bds-color_on-interactive));
+      color: var(--control_label-color--active, var(--segmented_color--active, var(--bds-color_on-interactive)));
     }
 
     .item.--disabled {
@@ -75,21 +96,34 @@ var BdsSegmentedControl = class extends i2 {
       cursor: not-allowed;
     }
 
-    .radio:focus-visible + .item-label {
+    /* Radio-mode items aren't directly focusable (the input is visually hidden inside
+       the label), so match focus-visible on the input itself via :has(); link-mode
+       items are focusable directly. */
+    .item:focus-visible,
+    .item:has(> .radio:focus-visible) {
       outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     }
 
-    /* Outline variant: sliding inset-border indicator (positioned via JS like .thumb) */
+    @media (hover: hover) and (pointer: fine) {
+      .item:not(.--active, .--disabled):hover {
+        color: var(--control_label-color--hover, var(--bds-color_on-bg));
+      }
+    }
+
+    /* Outline variant: sliding inset-border indicator (positioned like .thumb) */
     .indicator {
       position: absolute;
-      inset-block: 0.25rem;
-      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      inset-block: var(--control_track-pad, var(--bds-space_xxs));
+      inset-inline-start: var(--control_track-pad, var(--bds-space_xxs));
+      inline-size: calc((100% - 2 * var(--control_track-pad, var(--bds-space_xxs))) / var(--control_count, 1));
+      border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
       pointer-events: none;
       z-index: 2;
       display: none;
-      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
-                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      transform: translateX(calc(var(--control_selected-index, 0) * var(--control_dir, 1) * 100%));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
@@ -98,17 +132,17 @@ var BdsSegmentedControl = class extends i2 {
     }
 
     :host([variant='outline']) .item {
-      background-color: var(--segmented_item-bg, transparent);
+      background-color: var(--control_item-bg, var(--segmented_item-bg, transparent));
     }
 
     :host([variant='outline']) .item.--active {
-      color: var(--segmented_color--active, var(--bds-color_interactive));
-      background-color: var(--segmented_item-bg--active, var(--bds-color_bg));
+      color: var(--control_label-color--active, var(--segmented_color--active, var(--bds-color_interactive)));
+      background-color: var(--control_item-bg--active, var(--segmented_item-bg--active, var(--bds-color_bg)));
     }
 
     :host([variant='outline']) .indicator {
       display: block;
-      box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
+      box-shadow: inset 0 0 0 var(--control_indicator-width, 2px) var(--control_indicator-color, var(--bds-color_interactive));
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -127,6 +161,7 @@ var BdsSegmentedControl = class extends i2 {
   };
   _internals;
   _uid = Math.random().toString(36).slice(2, 8);
+  _initialValue = "";
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -136,6 +171,10 @@ var BdsSegmentedControl = class extends i2 {
     this.disabled = false;
     this.variant = "outline";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initialValue = this.value;
+  }
   get _options() {
     try {
       return JSON.parse(this.options);
@@ -147,46 +186,28 @@ var BdsSegmentedControl = class extends i2 {
     super.updated(changed);
     if (changed.has("value") || changed.has("options")) {
       this._internals.setFormValue?.(this.value || null);
-      if (this.variant === "filled") this._updateThumb();
-      if (this.variant === "outline") this._updateIndicator();
-    }
-    if (changed.has("variant")) {
-      if (this.variant === "filled") this._updateThumb();
-      if (this.variant === "outline") this._updateIndicator();
     }
   }
-  _positionSlider(el, items, selectedIndex) {
-    if (!el || items.length === 0) return;
-    const item = items[selectedIndex];
-    if (!item) return;
-    const controlRect = item.parentElement.getBoundingClientRect();
-    const itemRect = item.getBoundingClientRect();
-    el.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
-    el.style.inlineSize = `${itemRect.width}px`;
-  }
-  _updateThumb() {
-    const selectedIndex = Math.max(0, this._options.findIndex((o) => o.value === this.value));
-    const items = this.shadowRoot?.querySelectorAll(".item");
-    this._positionSlider(this.shadowRoot?.querySelector(".thumb"), items, selectedIndex);
-  }
-  _updateIndicator() {
-    const selectedIndex = Math.max(0, this._options.findIndex((o) => o.value === this.value));
-    const items = this.shadowRoot?.querySelectorAll(".item");
-    this._positionSlider(this.shadowRoot?.querySelector(".indicator"), items, selectedIndex);
-  }
   formResetCallback() {
-    const firstOption = this._options[0];
-    this.value = firstOption?.value ?? "";
+    const fallback = this._options[0]?.value ?? "";
+    this.value = this._initialValue || fallback;
     this._internals.setFormValue?.(this.value || null);
   }
   _handleChange(optionValue) {
     this.value = optionValue;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: optionValue },
+      bubbles: true,
+      composed: true
+    }));
     this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
   }
   render() {
     const opts = this._options;
+    const selectedIndex = Math.max(0, opts.findIndex((o) => o.value === this.value));
+    const controlStyle = `--control_count: ${Math.max(opts.length, 1)}; --control_selected-index: ${selectedIndex}`;
     return T`
-      <div class="control" role="group">
+      <div class="control" role="group" style=${controlStyle}>
         <span class="thumb" aria-hidden="true"></span>
         <span class="indicator" aria-hidden="true"></span>
         ${opts.map((opt, i3) => {
@@ -199,7 +220,7 @@ var BdsSegmentedControl = class extends i2 {
                 class=${itemClass}
                 href=${isDisabled ? A : opt.href}
                 aria-current=${isActive ? "page" : A}
-                ?aria-disabled=${isDisabled}
+                aria-disabled=${isDisabled ? "true" : A}
               >${opt.label}</a>
             `;
       }

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;
     }
   }