@boostdev/design-system-components 2.7.1 → 2.11.0

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

@@ -0,0 +1,174 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tooltip.ts
+var BdsTooltip = 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;
+      align-items: center;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: var(--bds-z-index_popover);
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
+      background-color: var(--tooltip_bg, var(--bds-color_on-bg));
+      color: var(--tooltip_text, var(--bds-color_bg));
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+      white-space: nowrap;
+      pointer-events: none;
+
+      /* Hidden by default */
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Show on hover and keyboard focus */
+    :host(:hover) .tooltip,
+    :host(:focus-within) .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Placement: top (default) */
+    .tooltip.--placement_top {
+      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: bottom */
+    .tooltip.--placement_bottom {
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: left */
+    .tooltip.--placement_left {
+      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Placement: right */
+    .tooltip.--placement_right {
+      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    content: { type: String },
+    placement: { type: String, reflect: true }
+  };
+  _uid = Math.random().toString(36).slice(2, 8);
+  /** Visually-hidden light-DOM node holding `content`, referenced by the trigger's aria-describedby. */
+  _descEl = null;
+  constructor() {
+    super();
+    this.content = "";
+    this.placement = "top";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(this._syncDescription);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownDescription();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("content")) {
+      this._syncDescription();
+    }
+  }
+  get _descId() {
+    return `bds-tooltip-desc-${this._uid}`;
+  }
+  /** Ensures the hidden description node exists (or is torn down) and re-wires the trigger. */
+  _syncDescription = () => {
+    if (!this.isConnected) return;
+    if (!this.content) {
+      this._teardownDescription();
+      return;
+    }
+    let desc = this._descEl;
+    if (!desc) {
+      desc = document.createElement("span");
+      desc.id = this._descId;
+      desc.style.cssText = "position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;";
+      this.append(desc);
+      this._descEl = desc;
+    }
+    desc.textContent = this.content;
+    this._describeTrigger();
+  };
+  _describeTrigger() {
+    const id = this._descId;
+    for (const el of Array.from(this.children)) {
+      if (el === this._descEl) continue;
+      const existing = el.getAttribute("aria-describedby");
+      const ids = existing ? existing.split(/\s+/).filter(Boolean) : [];
+      if (!ids.includes(id)) {
+        el.setAttribute("aria-describedby", [...ids, id].join(" "));
+      }
+    }
+  }
+  _teardownDescription() {
+    const id = this._descId;
+    for (const el of Array.from(this.children)) {
+      if (el === this._descEl) continue;
+      const existing = el.getAttribute("aria-describedby");
+      if (!existing) continue;
+      const ids = existing.split(/\s+/).filter((part) => part && part !== id);
+      if (ids.length) {
+        el.setAttribute("aria-describedby", ids.join(" "));
+      } else {
+        el.removeAttribute("aria-describedby");
+      }
+    }
+    this._descEl?.remove();
+    this._descEl = null;
+  }
+  render() {
+    return T`
+      <slot @slotchange=${this._syncDescription}></slot>
+      <span
+        class="tooltip --placement_${this.placement}"
+        role="tooltip"
+        aria-hidden="true"
+      >${this.content}</span>
+    `;
+  }
+};
+customElements.define("bds-tooltip", BdsTooltip);
+
+export {
+  BdsTooltip
+};

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

@@ -0,0 +1,90 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-description-list.ts
+var BdsDescriptionList = 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;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      padding: 0;
+      font-size: var(--bds-font_size--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    /* 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. <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;
+    }
+  `;
+  static properties = {
+    layout: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.layout = "stacked";
+  }
+  render() {
+    return T`<dl class="list"><slot></slot></dl>`;
+  }
+};
+customElements.define("bds-description-list", BdsDescriptionList);
+
+export {
+  BdsDescriptionList
+};

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

@@ -0,0 +1,189 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dropdown-menu.ts
+var BdsDropdownMenu = 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-block;
+      position: relative;
+    }
+
+    .panel {
+      position: absolute;
+      inset-block-start: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+      min-inline-size: 10rem;
+      border: var(--dropdown_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+
+      border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
+      background-color: var(--dropdown_color, var(--bds-color_bg));
+      color: var(--dropdown_on-color, var(--bds-color_on-bg));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--dropdown_shadow, var(--bds-shadow_m));
+      padding: var(--bds-space_xxs);
+      z-index: var(--bds-z-index_dropdown);
+      display: none;
+      flex-direction: column;
+    }
+
+    :host([placement='bottom-end']) .panel {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([placement='top-start']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: 0;
+    }
+
+    :host([placement='top-end']) .panel {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--bds-space_xxs));
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+
+    :host([open]) .panel {
+      display: flex;
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true }
+  };
+  // Stable id for aria-controls wiring from the slotted trigger to the panel
+  _uid = Math.random().toString(36).slice(2, 8);
+  get _panelId() {
+    return `bds-dropdown-panel-${this._uid}`;
+  }
+  constructor() {
+    super();
+    this.open = false;
+    this.placement = "bottom-start";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._handleOutsideClick);
+    this.addEventListener("keydown", this._handleKeydown);
+    this.addEventListener("bds-select", this._handleItemSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._handleOutsideClick);
+    this.removeEventListener("keydown", this._handleKeydown);
+    this.removeEventListener("bds-select", this._handleItemSelect);
+  }
+  get _items() {
+    return [...this.querySelectorAll("bds-dropdown-menu-item")].filter(
+      (item) => !item.disabled
+    );
+  }
+  get _trigger() {
+    const slot = this.shadowRoot?.querySelector('slot[name="trigger"]');
+    return slot?.assignedElements()[0] ?? null;
+  }
+  _open() {
+    if (this.open) return;
+    this.open = true;
+    this._trigger?.setAttribute("aria-expanded", "true");
+    this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
+    this.updateComplete.then(() => {
+      this._items[0]?.shadowRoot?.querySelector("button")?.focus();
+    });
+  }
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this._trigger?.setAttribute("aria-expanded", "false");
+    this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
+    this._trigger?.focus();
+  }
+  _handleTriggerClick = (e) => {
+    e.stopPropagation();
+    if (this.open) {
+      this._close();
+    } else {
+      this._open();
+    }
+  };
+  _handleOutsideClick = (e) => {
+    if (this.open && !this.contains(e.target)) {
+      this._close();
+    }
+  };
+  _handleKeydown = (e) => {
+    if (!this.open) return;
+    const items = this._items;
+    const focused = items.findIndex(
+      (item) => item.shadowRoot?.activeElement !== null && item.shadowRoot?.querySelector("button") === item.shadowRoot?.activeElement
+    );
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this._close();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = (focused + 1) % items.length;
+      items[next]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = (focused - 1 + items.length) % items.length;
+      items[prev]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      items[0]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      items[items.length - 1]?.shadowRoot?.querySelector("button")?.focus();
+    } else if (e.key === "Tab") {
+      this._close();
+    }
+  };
+  _handleItemSelect = () => {
+    this._close();
+  };
+  _onTriggerSlotChange() {
+    const trigger = this._trigger;
+    if (trigger) {
+      trigger.removeEventListener("click", this._handleTriggerClick);
+      trigger.addEventListener("click", this._handleTriggerClick);
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-controls", this._panelId);
+      trigger.setAttribute("aria-expanded", String(this.open));
+    }
+  }
+  render() {
+    return T`
+      <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+      <div
+        id=${this._panelId}
+        class="panel"
+        role="menu"
+        aria-hidden=${!this.open ? "true" : "false"}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu", BdsDropdownMenu);
+
+export {
+  BdsDropdownMenu
+};

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