@boostdev/design-system-components 1.2.0 → 1.2.2

package/dist/web-components/index.js

@@ -21,7 +21,7 @@ import {
 } from "./chunk-HHHRF2PS.js";
 import {
   BdsSegmentedControl
-} from "./chunk-6MH5UWUD.js";
+} from "./chunk-2FGATTGT.js";
 import {
   BdsSelect
 } from "./chunk-X3FKVHLK.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk-7FMR53BW.js";
 import {
   BdsDrawer
-} from "./chunk-DI46Q2EA.js";
+} from "./chunk-OCODKRVZ.js";
 import {
   BdsPopover
 } from "./chunk-ECW3HHWA.js";
@@ -72,7 +72,7 @@ import {
 } from "./chunk-3REOIRDW.js";
 import {
   BdsCollapsible
-} from "./chunk-5IPHEONG.js";
+} from "./chunk-6I2DBFQ7.js";
 import {
   BdsDialog
 } from "./chunk-N6IMUOY4.js";
@@ -120,7 +120,1494 @@ import {
 import {
   BdsDescriptionList
 } from "./chunk-AGKJTMJI.js";
-import "./chunk-LGEZYFUU.js";
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-button-group.ts
+var BdsButtonGroup = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0;
+    }
+
+    :host([orientation='vertical']) .group {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    /* Collapse border radius between adjacent buttons */
+    ::slotted(*:not(:first-child)) {
+      --button_radius-start: 0;
+    }
+
+    ::slotted(*:not(:last-child)) {
+      --button_radius-end: 0;
+    }
+  `;
+  static properties = {
+    orientation: { type: String, reflect: true },
+    "aria-label": { type: String }
+  };
+  constructor() {
+    super();
+    this.orientation = "horizontal";
+  }
+  render() {
+    return T`
+      <div class="group" role="group" aria-label=${this["aria-label"] ?? ""}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-button-group", BdsButtonGroup);
+
+// src/web-components/ui/bds-table.ts
+var BdsTable = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .wrapper {
+      overflow-inline: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    ::slotted(table) {
+      inline-size: 100%;
+      border-collapse: collapse;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    ::slotted(thead) {
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    ::slotted(th) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body--s);
+      text-align: start;
+      color: var(--bds-color_on-bg--subtle);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      white-space: nowrap;
+    }
+
+    ::slotted(td) {
+      padding: var(--bds-space_xs) var(--bds-space_s);
+      border-block-end: 1px solid var(--bds-color_bg--subtle);
+      vertical-align: middle;
+    }
+
+    ::slotted(tr:last-child td) {
+      border-block-end: none;
+    }
+  `;
+  static properties = {
+    stickyHeader: { type: Boolean, attribute: "sticky-header", reflect: true }
+  };
+  constructor() {
+    super();
+    this.stickyHeader = false;
+  }
+  render() {
+    return T`
+      <div
+        class="wrapper"
+        style=${this.stickyHeader ? "max-block-size: 100%; overflow-block: auto;" : ""}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-table", BdsTable);
+
+// src/web-components/ui/bds-pagination.ts
+function getPageRange(current, total) {
+  const delta = 1;
+  const range = [];
+  for (let i3 = 1; i3 <= total; i3++) {
+    if (i3 === 1 || i3 === total || i3 >= current - delta && i3 <= current + delta) {
+      range.push(i3);
+    } else if (range[range.length - 1] !== "...") {
+      range.push("...");
+    }
+  }
+  return range;
+}
+var BdsPagination = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .pagination {
+      display: flex;
+      align-items: center;
+    }
+
+    .list {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2rem;
+      block-size: 2rem;
+      padding-inline: var(--bds-space_xs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      border: none;
+      background: none;
+      border-radius: var(--bds-border_radius--xs);
+      cursor: pointer;
+      color: var(--bds-color_on-bg);
+      transition: var(--bds-animation_transition);
+      --bdc_color: transparent;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
+    }
+
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .button:not(:disabled):not(.--active):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .button.--active {
+      background-color: var(--bds-color_interactive);
+      color: var(--bds-color_on-interactive);
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .button.--nav {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-inline-size: 2rem;
+      color: var(--bds-color_on-bg--subtle);
+      font-size: var(--bds-font_size--body--s);
+      user-select: none;
+    }
+
+    .nav-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+  `;
+  static properties = {
+    currentPage: { type: Number, attribute: "current-page", reflect: true },
+    totalPages: { type: Number, attribute: "total-pages", reflect: true }
+  };
+  constructor() {
+    super();
+    this.currentPage = 1;
+    this.totalPages = 1;
+  }
+  _navigate(page) {
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    this.currentPage = page;
+    this.dispatchEvent(new CustomEvent("bds-page-change", {
+      detail: { page },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const pages = getPageRange(this.currentPage, this.totalPages);
+    return T`
+      <nav class="pagination" aria-label="Pagination">
+        <ul class="list">
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage <= 1}
+              aria-label="Previous page"
+              @click=${() => this._navigate(this.currentPage - 1)}
+            >
+              <svg class="nav-icon" 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>
+          </li>
+          ${pages.map(
+      (page) => page === "..." ? T`<li><span class="ellipsis" aria-hidden="true">…</span></li>` : T`
+                  <li>
+                    <button
+                      type="button"
+                      class="button ${page === this.currentPage ? "--active" : ""}"
+                      aria-current=${page === this.currentPage ? "page" : "false"}
+                      @click=${() => this._navigate(page)}
+                    >${page}</button>
+                  </li>
+                `
+    )}
+          <li>
+            <button
+              type="button"
+              class="button --nav"
+              ?disabled=${this.currentPage >= this.totalPages}
+              aria-label="Next page"
+              @click=${() => this._navigate(this.currentPage + 1)}
+            >
+              <svg class="nav-icon" 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>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+};
+customElements.define("bds-pagination", BdsPagination);
+
+// src/web-components/interaction/form/bds-checkbox-group.ts
+var BdsCheckboxGroup = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    fieldset {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .legend {
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xs);
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+    }
+  `;
+  static properties = {
+    label: { type: String },
+    error: { type: String },
+    hint: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.label = "";
+    this.disabled = false;
+    this.required = false;
+  }
+  render() {
+    return T`
+      <fieldset ?disabled=${this.disabled}>
+        <legend class="legend">
+          ${this.label}
+          ${this.required ? T`<span class="required" aria-hidden="true"> *</span>` : ""}
+        </legend>
+        <div class="items">
+          <slot></slot>
+        </div>
+        ${this.error ? T`<p class="message message--error" role="alert">${this.error}</p>` : this.hint ? T`<p class="message message--hint">${this.hint}</p>` : ""}
+      </fieldset>
+    `;
+  }
+};
+customElements.define("bds-checkbox-group", BdsCheckboxGroup);
+
+// src/web-components/interaction/form/bds-radio-group.ts
+var BdsRadioGroup = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    fieldset {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .legend {
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xs);
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+    }
+  `;
+  static properties = {
+    label: { type: String },
+    name: { type: String, reflect: true },
+    error: { type: String },
+    hint: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.label = "";
+    this.name = "";
+    this.disabled = false;
+    this.required = false;
+  }
+  _propagateName = () => {
+    if (!this.name) return;
+    this.querySelectorAll("bds-radio").forEach((radio) => {
+      radio.setAttribute("name", this.name);
+    });
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    Promise.resolve().then(this._propagateName);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("name")) {
+      this._propagateName();
+    }
+  }
+  render() {
+    return T`
+      <fieldset ?disabled=${this.disabled}>
+        <legend class="legend">
+          ${this.label}
+          ${this.required ? T`<span class="required" aria-hidden="true"> *</span>` : ""}
+        </legend>
+        <div class="items">
+          <slot @slotchange=${this._propagateName}></slot>
+        </div>
+        ${this.error ? T`<p class="message message--error" role="alert">${this.error}</p>` : this.hint ? T`<p class="message message--hint">${this.hint}</p>` : ""}
+      </fieldset>
+    `;
+  }
+};
+customElements.define("bds-radio-group", BdsRadioGroup);
+
+// src/web-components/interaction/form/bds-form-input.ts
+var BdsFormInput = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
+    .required {
+      color: var(--bds-color_error);
+      margin-inline-start: var(--bds-space_xxxs);
+    }
+
+    .wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+
+      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--formInput_shadow, var(--bdc-outline_shadow));
+      background-color: var(--bds-color_bg);
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([error]) .wrapper {
+      --bdc_color: var(--bds-color_error);
+    }
+
+    .wrapper:focus-within {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    :host([error]) .wrapper:focus-within {
+      --bdc_color: var(--bds-color_error);
+    }
+
+    .input {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      background: transparent;
+      padding: var(--bds-space_s);
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--bds-color_on-bg);
+      outline: none;
+    }
+
+    .input::placeholder {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .input:focus-visible {
+      outline: none;
+    }
+
+    .wrapper:focus-within {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--formInput_radius, var(--bdc-outline_radius));
+    }
+
+    .prefix,
+    .suffix {
+      display: flex;
+      align-items: center;
+      color: var(--bds-color_on-bg--subtle);
+      flex-shrink: 0;
+    }
+
+    .prefix {
+      padding-inline-start: var(--bds-space_s);
+    }
+
+    .suffix {
+      padding-inline-end: var(--bds-space_s);
+    }
+
+    .prefix:empty,
+    .suffix:empty {
+      display: none;
+    }
+
+    .message {
+      margin-block-start: var(--bds-space_xxs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.type = "text";
+    this.value = "";
+    this.placeholder = "";
+    this.label = "";
+    this.disabled = false;
+    this.required = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value);
+    }
+    if (changed.has("required") || changed.has("value")) {
+      if (this.required && !this.value) {
+        this._internals.setValidity?.({ valueMissing: true }, "Required");
+      } else {
+        this._internals.setValidity?.({});
+      }
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.("");
+  }
+  _handleInput(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("bds-input", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleChange(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    const id = `bds-form-input-${this._uid}`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    return T`
+      ${this.label ? T`
+            <label class="label" for=${id}>
+              ${this.label}
+              ${this.required ? T`<span class="required" aria-hidden="true">*</span>` : ""}
+            </label>
+          ` : ""}
+      <div class="wrapper">
+        <span class="prefix"><slot name="prefix"></slot></span>
+        <input
+          id=${id}
+          class="input"
+          type=${this.type}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${describedBy ?? ""}
+          aria-required=${this.required ? "true" : "false"}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        />
+        <span class="suffix"><slot name="suffix"></slot></span>
+      </div>
+      ${this.error ? T`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>` : this.hint ? T`<p id=${hintId} class="message message--hint">${this.hint}</p>` : ""}
+    `;
+  }
+};
+customElements.define("bds-form-input", BdsFormInput);
+
+// src/web-components/ui/bds-carousel.ts
+var BdsCarousel = class extends i2 {
+  static styles = i`
+    :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: none;
+      border-radius: var(--bds-border_radius--full, 9999px);
+      background-color: var(--bds-color_bg--subtle);
+      color: var(--bds-color_on-bg);
+      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(--bds-color_bg--strong);
+      }
+    }
+
+    .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 {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-radius: 50%;
+      border: none;
+      padding: 0;
+      background-color: var(--bds-color_bg--strong);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    .dot.--active {
+      background-color: var(--bds-color_interactive);
+      inline-size: 1rem;
+      border-radius: 0.25rem;
+    }
+
+    .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 }
+  };
+  _slideCount = 0;
+  _io = null;
+  constructor() {
+    super();
+    this.currentIndex = 0;
+    this.indicators = false;
+    this.loop = false;
+  }
+  get _track() {
+    return this.shadowRoot?.querySelector(".track") ?? null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateSlideCount();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._io?.disconnect();
+    this._io = null;
+  }
+  _updateSlideCount() {
+    this._slideCount = this.children.length;
+    this.requestUpdate();
+  }
+  _goTo(index) {
+    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 && index === next) return;
+    this.currentIndex = next;
+    const track = this._track;
+    const slides = track?.querySelector("slot")?.assignedElements() ?? [];
+    const target = slides[next];
+    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,
+      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.currentIndex = idx;
+            this.requestUpdate();
+          }
+        }
+      },
+      { 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="Carousel" role="region">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div class="controls">
+        <slot name="prev">
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Previous slide"
+            ?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" />
+            </svg>
+          </button>
+        </slot>
+
+        ${this.indicators ? T`
+              <div class="indicators" role="tablist" aria-label="Slides">
+                ${Array.from({ length: this._slideCount }, (_, i3) => T`
+                  <button
+                    class="dot ${i3 === this.currentIndex ? "--active" : ""}"
+                    type="button"
+                    role="tab"
+                    aria-selected=${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">
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Next slide"
+            ?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" />
+            </svg>
+          </button>
+        </slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-carousel", BdsCarousel);
+
+// src/web-components/ui/bds-calendar.ts
+function toISO(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function parseISO(iso) {
+  if (!iso) return null;
+  const [y, m, d] = iso.split("-").map(Number);
+  if (!y || !m || !d) return null;
+  const date = new Date(y, m - 1, d);
+  return isNaN(date.getTime()) ? null : date;
+}
+var BdsCalendar = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-block;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .calendar {
+      background-color: var(--bds-color_bg);
+      border-radius: var(--bds-border_radius--m);
+      box-shadow: var(--bds-shadow_s);
+      padding: var(--bds-space_s);
+      inline-size: fit-content;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-block-end: var(--bds-space_s);
+    }
+
+    .month-label {
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+    }
+
+    .nav-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border: none;
+      border-radius: var(--bds-border_radius--xs);
+      background: none;
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .nav-btn:hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .nav-btn:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .nav-btn svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(7, 2.25rem);
+      gap: var(--bds-space_xxxs);
+    }
+
+    .weekday {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      block-size: 2rem;
+      font-size: var(--bds-font_size--body--s);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg--subtle);
+      user-select: none;
+    }
+
+    .day {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+      border: none;
+      border-radius: var(--bds-border_radius--xs);
+      background: none;
+      color: var(--bds-color_on-bg);
+      cursor: pointer;
+      font-size: var(--bds-font_size--body--s);
+      font-family: inherit;
+      transition: var(--bds-animation_transition);
+    }
+
+    .day:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .day:not(.--selected):not(.--outside):not([disabled]):hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .day.--today {
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_interactive_on-bg);
+    }
+
+    .day.--selected {
+      background-color: var(--bds-color_interactive);
+      color: var(--bds-color_on-interactive);
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .day.--outside {
+      color: var(--bds-color_on-bg--subtle);
+      opacity: 0.4;
+    }
+
+    .day[disabled] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    min: { type: String },
+    max: { type: String },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _viewYear;
+  _viewMonth;
+  // 0-based
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.disabled = false;
+    const now = /* @__PURE__ */ new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.getMonth();
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value);
+      if (this.value) {
+        const d = parseISO(this.value);
+        if (d) {
+          this._viewYear = d.getFullYear();
+          this._viewMonth = d.getMonth();
+        }
+      }
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.("");
+  }
+  _prevMonth() {
+    if (this._viewMonth === 0) {
+      this._viewMonth = 11;
+      this._viewYear--;
+    } else {
+      this._viewMonth--;
+    }
+    this.requestUpdate();
+  }
+  _nextMonth() {
+    if (this._viewMonth === 11) {
+      this._viewMonth = 0;
+      this._viewYear++;
+    } else {
+      this._viewMonth++;
+    }
+    this.requestUpdate();
+  }
+  _selectDate(iso) {
+    if (this._isDisabledDate(iso)) return;
+    this.value = iso;
+    this._internals.setFormValue?.(iso);
+    this.dispatchEvent(new CustomEvent("bds-date-select", {
+      detail: { date: iso },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _isDisabledDate(iso) {
+    if (this.min && iso < this.min) return true;
+    if (this.max && iso > this.max) return true;
+    return false;
+  }
+  _handleKeydown = (e) => {
+    const focused = this.shadowRoot?.activeElement;
+    if (!focused?.dataset.date) return;
+    const current = parseISO(focused.dataset.date);
+    if (!current) return;
+    let next = null;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 7);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 7);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const dow = current.getDay();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() - dow);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      const dow = current.getDay();
+      next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + (6 - dow));
+    } else if (e.key === "PageUp") {
+      e.preventDefault();
+      this._prevMonth();
+      return;
+    } else if (e.key === "PageDown") {
+      e.preventDefault();
+      this._nextMonth();
+      return;
+    }
+    if (next) {
+      const iso = toISO(next);
+      if (next.getMonth() !== this._viewMonth || next.getFullYear() !== this._viewYear) {
+        this._viewYear = next.getFullYear();
+        this._viewMonth = next.getMonth();
+        this.requestUpdate();
+        this.updateComplete.then(() => {
+          this.shadowRoot?.querySelector(`[data-date="${iso}"]`)?.focus();
+        });
+      } else {
+        this.shadowRoot?.querySelector(`[data-date="${iso}"]`)?.focus();
+      }
+    }
+  };
+  _buildGrid() {
+    const year = this._viewYear;
+    const month = this._viewMonth;
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDow = new Date(year, month, 1).getDay();
+    const cells = [];
+    const prevMonthDays = new Date(year, month, 0).getDate();
+    for (let i3 = firstDow - 1; i3 >= 0; i3--) {
+      const d = new Date(year, month - 1, prevMonthDays - i3);
+      cells.push({ iso: toISO(d), outside: true });
+    }
+    for (let d = 1; d <= daysInMonth; d++) {
+      cells.push({ iso: toISO(new Date(year, month, d)), outside: false });
+    }
+    const trailing = (7 - cells.length % 7) % 7;
+    for (let d = 1; d <= trailing; d++) {
+      cells.push({ iso: toISO(new Date(year, month + 1, d)), outside: true });
+    }
+    return cells;
+  }
+  render() {
+    const today = toISO(/* @__PURE__ */ new Date());
+    const cells = this._buildGrid();
+    const fmt = new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" });
+    const monthLabel = fmt.format(new Date(this._viewYear, this._viewMonth, 1));
+    const weekdayFmt = new Intl.DateTimeFormat(void 0, { weekday: "short" });
+    const weekdays = Array.from({ length: 7 }, (_, i3) => {
+      const sunday = new Date(2023, 0, 1 + i3);
+      return weekdayFmt.format(sunday);
+    });
+    return T`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <div class="header">
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Previous month"
+            @click=${this._prevMonth}
+          >
+            <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>
+          <span class="month-label" aria-live="polite">${monthLabel}</span>
+          <button
+            class="nav-btn"
+            type="button"
+            aria-label="Next month"
+            @click=${this._nextMonth}
+          >
+            <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>
+        </div>
+
+        <div class="grid" role="grid" aria-label=${monthLabel}>
+          ${weekdays.map((day) => T`<div class="weekday" role="columnheader" aria-label=${day}>${day}</div>`)}
+          ${cells.map(({ iso, outside }) => {
+      const isSelected = iso === this.value;
+      const isToday = iso === today;
+      const isDisabled = this._isDisabledDate(iso);
+      const classes = [
+        "day",
+        outside ? "--outside" : "",
+        isSelected ? "--selected" : "",
+        isToday && !isSelected ? "--today" : ""
+      ].filter(Boolean).join(" ");
+      return T`
+              <button
+                class=${classes}
+                type="button"
+                role="gridcell"
+                data-date=${iso}
+                ?disabled=${isDisabled || outside}
+                aria-selected=${isSelected ? "true" : "false"}
+                aria-current=${isToday ? "date" : "false"}
+                aria-disabled=${isDisabled ? "true" : "false"}
+                tabindex=${isSelected || !this.value && isToday ? "0" : "-1"}
+                @click=${() => this._selectDate(iso)}
+              >
+                ${(/* @__PURE__ */ new Date(iso + "T00:00:00")).getDate()}
+              </button>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-calendar", BdsCalendar);
+
+// src/web-components/interaction/bds-dropdown-menu.ts
+var BdsDropdownMenu = class extends i2 {
+  static styles = i`
+    :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;
+      background-color: var(--bds-color_bg);
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_m);
+      padding: var(--bds-space_xxs);
+      z-index: var(--bds-z-index_dropdown, 200);
+      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 }
+  };
+  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.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.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 === "Tab") {
+      this._close();
+    }
+  };
+  _handleItemSelect = () => {
+    this._close();
+  };
+  _onTriggerSlotChange() {
+    const trigger = this._trigger;
+    if (trigger) {
+      trigger.removeEventListener("click", this._handleTriggerClick);
+      trigger.addEventListener("click", this._handleTriggerClick);
+    }
+  }
+  render() {
+    return T`
+      <slot name="trigger" @slotchange=${this._onTriggerSlotChange}></slot>
+      <div
+        class="panel"
+        role="menu"
+        aria-hidden=${!this.open ? "true" : "false"}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-dropdown-menu", BdsDropdownMenu);
+
+// src/web-components/interaction/bds-dropdown-menu-item.ts
+var BdsDropdownMenuItem = class extends i2 {
+  static styles = i`
+    :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(--bds-color_bg--subtle);
+      }
+
+      :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 {
   BdsAccordion,
   BdsAccordionItem,
@@ -129,23 +1616,32 @@ export {
   BdsBadge,
   BdsBreadcrumb,
   BdsButton,
+  BdsButtonGroup,
+  BdsCalendar,
   BdsCard,
+  BdsCarousel,
   BdsCheckbox,
+  BdsCheckboxGroup,
   BdsCollapsible,
   BdsCombobox,
   BdsDescriptionList,
   BdsDialog,
   BdsDrawer,
+  BdsDropdownMenu,
+  BdsDropdownMenuItem,
   BdsFileInput,
+  BdsFormInput,
   BdsIconWrapper,
   BdsLink,
   BdsLoading,
   BdsNotificationBanner,
   BdsNumberInput,
+  BdsPagination,
   BdsPopover,
   BdsProgress,
   BdsProgressCircle,
   BdsRadio,
+  BdsRadioGroup,
   BdsRating,
   BdsSectionHeader,
   BdsSegmentedControl,
@@ -157,6 +1653,7 @@ export {
   BdsSwitch,
   BdsTab,
   BdsTabPanel,
+  BdsTable,
   BdsTabs,
   BdsTextarea,
   BdsToastProvider,