@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/index.js

@@ -1,2172 +1,443 @@
+import {
+  BdsRadioGroup
+} from "./chunk-JV5QT2OU.js";
+import {
+  BdsSegmentedControl
+} from "./chunk-NTQ4TCUT.js";
+import {
+  BdsSelect
+} from "./chunk-JH6LQKLK.js";
+import {
+  BdsSlider
+} from "./chunk-FEDABOR5.js";
 import {
   BdsSwitch
-} from "./chunk-OF6FFGOT.js";
+} from "./chunk-3AY2YKCM.js";
 import {
   BdsTextarea
-} from "./chunk-DZOEPVFT.js";
+} from "./chunk-2OLVQUBU.js";
+import {
+  BdsGrid
+} from "./chunk-ITD2MV5K.js";
+import {
+  BdsGridItem
+} from "./chunk-W6H5ID2U.js";
 import {
   BdsCheckbox
-} from "./chunk-3GFWLSLS.js";
+} from "./chunk-KA3VPKMY.js";
+import {
+  BdsCheckboxGroup
+} from "./chunk-VANAKB6D.js";
 import {
   BdsCombobox
-} from "./chunk-UUKSDCYS.js";
+} from "./chunk-47AT5KZD.js";
+import {
+  BdsFieldGroup
+} from "./chunk-SEO2F5KJ.js";
 import {
   BdsFileInput
-} from "./chunk-PY62FTRW.js";
+} from "./chunk-KZPRFY5P.js";
+import {
+  BdsFormInput
+} from "./chunk-CUKQ2L5B.js";
 import {
   BdsNumberInput
-} from "./chunk-PXZWYO6Z.js";
+} from "./chunk-VED2DFJ6.js";
 import {
   BdsRadio
-} from "./chunk-JYYRJS2D.js";
-import {
-  BdsSegmentedControl
-} from "./chunk-2FGATTGT.js";
-import {
-  BdsSelect
-} from "./chunk-ARMKC4BQ.js";
+} from "./chunk-3WAV6MDN.js";
 import {
-  BdsSlider
-} from "./chunk-7YURXHTS.js";
-import {
-  BdsDrawer
-} from "./chunk-KUI55GFB.js";
+  BdsDropdownMenuItem
+} from "./chunk-QZAIRJ75.js";
 import {
   BdsPopover
-} from "./chunk-TQ7IQ4GZ.js";
+} from "./chunk-QEF2IRID.js";
 import {
   BdsSkipLink
-} from "./chunk-BQLZ7I4G.js";
+} from "./chunk-66M6ETWD.js";
 import {
   BdsTab
-} from "./chunk-6I3CFC26.js";
+} from "./chunk-RSZ3BWBK.js";
 import {
   BdsTabPanel
-} from "./chunk-OQTRTMAB.js";
+} from "./chunk-WIBAN7KP.js";
 import {
   BdsTabs
-} from "./chunk-L3XHOMN6.js";
+} from "./chunk-F3ZDNHZZ.js";
 import {
   BdsToastProvider
-} from "./chunk-YLVTEY23.js";
+} from "./chunk-BTCMJQKB.js";
 import {
   BdsTooltip
-} from "./chunk-Y7V7LM6R.js";
-import {
-  BdsSeparator
-} from "./chunk-VMMVWLXL.js";
-import {
-  BdsSkeleton
-} from "./chunk-2QA62WCQ.js";
+} from "./chunk-M3ECULRH.js";
 import {
   BdsTypography
-} from "./chunk-SOQQ7RVJ.js";
+} from "./chunk-IPGHUCJT.js";
 import {
   BdsAccordion
-} from "./chunk-BKIHQYJR.js";
+} from "./chunk-PXPPKCLT.js";
 import {
   BdsAccordionItem
-} from "./chunk-FXURM6D5.js";
+} from "./chunk-YFAXGRPR.js";
 import {
   BdsButton
-} from "./chunk-ORC56MDY.js";
+} from "./chunk-XIZWAWMJ.js";
 import {
   BdsCollapsible
-} from "./chunk-6I2DBFQ7.js";
+} from "./chunk-HGFCJXOQ.js";
 import {
   BdsDialog
-} from "./chunk-65JXQOBA.js";
-import {
-  BdsIconWrapper
-} from "./chunk-A3RLT3AS.js";
+} from "./chunk-U3YZE6R6.js";
 import {
-  BdsLink
-} from "./chunk-CR5PGUHV.js";
+  BdsDrawer
+} from "./chunk-JUPCZVVW.js";
 import {
-  BdsLoading
-} from "./chunk-QLT6MTZF.js";
+  BdsDropdownMenu
+} from "./chunk-NIN3JO6Q.js";
 import {
-  BdsNotificationBanner
-} from "./chunk-X46KL5BK.js";
+  BdsPagination
+} from "./chunk-TMWXRHGF.js";
 import {
   BdsProgress
-} from "./chunk-X3NQMBAQ.js";
+} from "./chunk-AP4RDUL2.js";
 import {
   BdsProgressCircle
-} from "./chunk-QDST57JC.js";
+} from "./chunk-7ZOJ7N4E.js";
 import {
   BdsRating
-} from "./chunk-LY62SAVN.js";
+} from "./chunk-SYNLFKD3.js";
 import {
   BdsSectionHeader
-} from "./chunk-Y4MAXTMA.js";
+} from "./chunk-RVF7W653.js";
 import "./chunk-QPOKHLMQ.js";
-import "./chunk-3S42DZ7W.js";
+import {
+  BdsSeparator
+} from "./chunk-SFZ6Q4BP.js";
+import {
+  BdsSkeleton
+} from "./chunk-EF7IVYTY.js";
+import {
+  BdsTable
+} from "./chunk-JMCXAAFK.js";
+import {
+  BdsCalendar,
+  buildMonthGrid,
+  calendarStyles,
+  getDayLabel,
+  getMonthLabel,
+  getWeekdayNames,
+  isDisabled,
+  isInRange,
+  isSameDay,
+  nextFocusDate,
+  parseISO,
+  sortRange,
+  toISO
+} from "./chunk-UO7ROSHD.js";
+import {
+  BdsCard
+} from "./chunk-DV5T43ZC.js";
+import {
+  BdsCarousel
+} from "./chunk-OY74D4X6.js";
+import {
+  BdsDescriptionList
+} from "./chunk-NBN2ENWJ.js";
+import {
+  BdsIconWrapper
+} from "./chunk-XI7KRAH7.js";
+import {
+  BdsLink
+} from "./chunk-KJGRFDFI.js";
+import {
+  BdsLoading
+} from "./chunk-AIBOHNDU.js";
+import {
+  BdsNotificationBanner
+} from "./chunk-LDIPCTRN.js";
+import "./chunk-P24JYC5V.js";
 import {
   BdsAlert
-} from "./chunk-NCPQ7AF3.js";
+} from "./chunk-6G22I2CK.js";
 import {
   BdsAvatar
-} from "./chunk-FSZRP43R.js";
+} from "./chunk-WFVKU4GX.js";
 import {
   BdsBadge
-} from "./chunk-QWPACK5L.js";
+} from "./chunk-BPYKZVDK.js";
 import {
   BdsBreadcrumb
-} from "./chunk-Q4T5BJT6.js";
+} from "./chunk-62NK3ZSC.js";
 import {
-  BdsCard
-} from "./chunk-PC3IOQAH.js";
+  BdsButtonGroup
+} from "./chunk-DIZDCL7Z.js";
 import {
-  BdsDescriptionList
-} from "./chunk-AGKJTMJI.js";
+  BdsButtonContainer
+} from "./chunk-4A2YYTYN.js";
 import {
   A,
   T,
-  i,
-  i2
+  i2 as i
 } from "./chunk-LGEZYFUU.js";
 
-// src/components/layout/Grid/masonry.ts
-import { useLayoutEffect } from "react";
-var NAMED_SPAN_VAR = {
-  "three-quarters": "--bds-grid_columns-75",
-  "two-thirds": "--bds-grid_columns-66",
-  half: "--bds-grid_columns-50",
-  "one-third": "--bds-grid_columns-33",
-  "one-quarter": "--bds-grid_columns-25"
-};
-var NAMED_SPAN_FRACTION = {
-  "three-quarters": 0.75,
-  "two-thirds": 2 / 3,
-  half: 0.5,
-  "one-third": 1 / 3,
-  "one-quarter": 0.25
-};
-function resolvePreferredColumns(container, value, totalCols) {
-  if (value === "full") return totalCols;
-  if (typeof value === "number") return Math.max(1, Math.min(totalCols, value));
-  const varName = NAMED_SPAN_VAR[value];
-  const raw = window.getComputedStyle(container).getPropertyValue(varName).trim();
-  const n = parseInt(raw, 10);
-  if (Number.isFinite(n) && n > 0) return Math.min(totalCols, n);
-  return Math.max(1, Math.round(totalCols * NAMED_SPAN_FRACTION[value]));
-}
-var TARGET_MAX_IMPLICIT_ROWS = 5e3;
-function supportsNativeMasonry() {
-  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
-  return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
-}
-var ORIGINAL_COL_ATTR = "data-bds-masonry-original-column";
-var LAST_SPAN_ATTR = "data-bds-masonry-span";
-var UNIT_ATTR = "data-bds-masonry-unit";
-function applyMasonryLayout(container, rawChildren, options = {}) {
-  const cs = window.getComputedStyle(container);
-  const targetGap = parseFloat(cs.columnGap) || 0;
-  container.style.rowGap = "0px";
-  container.style.gridAutoFlow = "dense";
-  container.style.overflowAnchor = "none";
-  const children = rawChildren.filter(
-    (el) => el.nodeType === 1 && window.getComputedStyle(el).display !== "none"
-  );
-  for (const child of children) {
-    child.style.alignSelf = "start";
-    child.style.overflowAnchor = "none";
-  }
-  const preferred = options.preferredColumnSpan;
-  if (preferred !== void 0) {
-    const totalCols = countGridColumns(container);
-    const preferredCols = totalCols > 0 ? resolvePreferredColumns(container, preferred, totalCols) : 0;
-    if (totalCols > 0 && preferredCols > 0) {
-      let col = 0;
-      for (const child of children) {
-        if (child.hasAttribute("data-column-span-auto")) {
-          if (!child.hasAttribute(ORIGINAL_COL_ATTR)) {
-            child.setAttribute(ORIGINAL_COL_ATTR, child.style.gridColumn);
-          }
-          const remaining = totalCols - col;
-          const span = Math.max(1, Math.min(preferredCols, remaining));
-          child.style.gridColumn = `span ${span}`;
-          col = (col + span) % totalCols;
-        } else {
-          const consumed = Math.min(totalCols, readExplicitSpan(child, totalCols));
-          col = (col + consumed) % totalCols;
-        }
-      }
-    }
-  } else {
-    for (const child of children) {
-      restoreOriginalColumn(child);
-    }
-  }
-  const heights = children.map((child) => child.offsetHeight);
-  const cols = countGridColumns(container) || 1;
-  const projectedRows = children.reduce((sum, child, i3) => {
-    const rowSpan = Math.max(1, Math.ceil(heights[i3] + targetGap));
-    const colSpan = readExplicitSpan(child, cols);
-    return sum + rowSpan * colSpan;
-  }, 0) / cols;
-  const autoUnit = Math.max(
-    1,
-    Math.ceil(projectedRows / TARGET_MAX_IMPLICIT_ROWS)
-  );
-  const rowUnit = options.rowUnitPx !== void 0 && options.rowUnitPx > 0 ? Math.floor(options.rowUnitPx) : autoUnit;
-  container.style.gridAutoRows = `${rowUnit}px`;
-  const prevUnit = container.getAttribute(UNIT_ATTR);
-  if (prevUnit !== String(rowUnit)) {
-    for (const child of children) child.removeAttribute(LAST_SPAN_ATTR);
-    container.setAttribute(UNIT_ATTR, String(rowUnit));
-  }
-  const spans = heights.map(
-    (h) => Math.max(1, Math.ceil((h + targetGap) / rowUnit))
-  );
-  let changed = false;
-  for (let i3 = 0; i3 < children.length; i3++) {
-    const prev = children[i3].getAttribute(LAST_SPAN_ATTR);
-    if (prev !== String(spans[i3])) {
-      changed = true;
-      break;
-    }
-  }
-  if (!changed) return;
-  for (let i3 = 0; i3 < children.length; i3++) {
-    children[i3].style.gridRowEnd = `span ${spans[i3]}`;
-    children[i3].setAttribute(LAST_SPAN_ATTR, String(spans[i3]));
-  }
-}
-function countGridColumns(container) {
-  const value = window.getComputedStyle(container).gridTemplateColumns.trim();
-  if (!value || value === "none") return 0;
-  return value.split(/\s+/).length;
-}
-function readExplicitSpan(el, totalCols) {
-  const inline = el.style.gridColumn || el.style.gridColumnEnd;
-  const fromInline = parseSpan(inline, totalCols);
-  if (fromInline !== null) return fromInline;
-  const computed = window.getComputedStyle(el).gridColumn;
-  return parseSpan(computed, totalCols) ?? 1;
-}
-function parseSpan(value, totalCols) {
-  if (!value) return null;
-  const match = value.match(/^\s*span\s+(\d+)/);
-  if (match) return Math.max(1, Math.min(totalCols, parseInt(match[1], 10)));
-  if (/\/\s*-1\b/.test(value)) return totalCols;
-  return null;
-}
-function clearMasonryLayout(container, rawChildren) {
-  container.style.gridAutoRows = "";
-  container.style.gridAutoFlow = "";
-  container.style.rowGap = "";
-  container.style.overflowAnchor = "";
-  container.removeAttribute(UNIT_ATTR);
-  for (const child of rawChildren) {
-    if (child.nodeType !== 1) continue;
-    child.style.gridRow = "";
-    child.style.gridRowStart = "";
-    child.style.gridRowEnd = "";
-    child.style.alignSelf = "";
-    child.style.overflowAnchor = "";
-    child.removeAttribute(LAST_SPAN_ATTR);
-    restoreOriginalColumn(child);
-  }
-}
-function restoreOriginalColumn(el) {
-  if (!el.hasAttribute(ORIGINAL_COL_ATTR)) return;
-  el.style.gridColumn = el.getAttribute(ORIGINAL_COL_ATTR) ?? "";
-  el.removeAttribute(ORIGINAL_COL_ATTR);
-}
-
-// src/web-components/layout/bds-grid.ts
-var BdsGrid = class extends i2 {
-  static styles = i`
-    :host {
-      display: block;
-    }
-
-    .grid {
-      display: grid;
-      gap: var(--grid_gap, var(--bds-grid_gap));
-      box-sizing: border-box;
-    }
-
-    .grid.--main {
-      grid-template-columns: var(--bds-grid_template-columns);
-    }
-
-    .grid.--page {
-      grid-template-columns: 1fr;
-      grid-column: 1 / -1;
-    }
-
-    .grid.--funnel {
-      grid-template-columns: var(--bds-grid_template-columns);
-      max-inline-size: var(--bds-container_max-width--narrow);
-      margin-inline: auto;
-    }
-
-    .grid.--custom {
-      grid-template-columns: repeat(var(--grid_columns, 4), minmax(0, 1fr));
-    }
-
-    .grid.--centered {
-      margin-inline: auto;
-      max-inline-size: var(--bds-container_max-width);
-      padding-inline: var(--bds-container_spacing-inline);
-    }
-
-    @supports (grid-template-rows: masonry) {
-      .grid.--masonry {
-        grid-template-rows: masonry;
-      }
-    }
-
-    @supports (display: grid-lanes) {
-      .grid.--masonry {
-        display: grid-lanes;
-      }
-    }
-  `;
+// src/web-components/ui/bds-calendar-range.ts
+var BdsCalendarRange = class extends i {
+  static formAssociated = true;
+  static styles = calendarStyles;
   static properties = {
-    variant: { type: String, reflect: true },
-    columns: { type: Number, reflect: true },
-    isCentered: { type: Boolean, attribute: "is-centered", reflect: true },
-    isMasonry: { type: Boolean, attribute: "is-masonry", reflect: true },
-    autoSpanMedia: { type: Boolean, attribute: "auto-span-media", reflect: true },
-    masonryPreferredColumnSpan: {
-      type: String,
-      attribute: "masonry-preferred-column-span",
-      reflect: true
-    }
+    name: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    min: { type: String },
+    max: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    months: { type: Number, reflect: true },
+    pageBy: { type: String, attribute: "page-by" },
+    firstDayOfWeek: { type: Number, attribute: "first-day-of-week" },
+    locale: { type: String },
+    previousLabel: { type: String, attribute: "previous-label" },
+    nextLabel: { type: String, attribute: "next-label" },
+    isDateDisallowed: { attribute: false },
+    formatWeekday: { attribute: false },
+    formatMonth: { attribute: false },
+    formatDay: { attribute: false }
   };
-  _ro;
-  _mo;
-  _frame = 0;
+  _internals;
+  _viewYear;
+  _viewMonth;
+  _focusedIso = null;
+  _anchorIso = null;
+  _hoverIso = null;
   constructor() {
     super();
-    this.variant = "main";
-    this.columns = void 0;
-    this.isCentered = false;
-    this.isMasonry = false;
-    this.autoSpanMedia = false;
-    this.masonryPreferredColumnSpan = void 0;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._teardownMasonry();
-  }
-  updated() {
-    if (this.isMasonry && !supportsNativeMasonry()) {
-      this._setupMasonry();
-      this._scheduleMasonry();
-    } else {
-      this._teardownMasonry();
-    }
-  }
-  _gridEl() {
-    return this.renderRoot.querySelector(".grid");
-  }
-  _items() {
-    return Array.from(this.children).filter((el) => el.nodeType === 1);
-  }
-  _setupMasonry() {
-    if (this._ro || this._mo) return;
-    const container = this._gridEl();
-    if (!container) return;
-    if (typeof ResizeObserver !== "undefined") {
-      this._ro = new ResizeObserver(() => this._scheduleMasonry());
-      for (const child of this._items()) this._ro.observe(child);
-    }
-    if (typeof MutationObserver !== "undefined") {
-      this._mo = new MutationObserver(() => {
-        if (this._ro) for (const child of this._items()) this._ro.observe(child);
-        this._scheduleMasonry();
-      });
-      this._mo.observe(this, { childList: true });
-    }
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.disabled = false;
+    this.months = 1;
+    this.pageBy = "months";
+    this.firstDayOfWeek = 1;
+    this.locale = "";
+    this.previousLabel = "Previous month";
+    this.nextLabel = "Next month";
+    const now = /* @__PURE__ */ new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.getMonth();
   }
-  _scheduleMasonry() {
-    cancelAnimationFrame(this._frame);
-    this._frame = requestAnimationFrame(() => {
-      const container = this._gridEl();
-      if (container) {
-        applyMasonryLayout(container, this._items(), {
-          preferredColumnSpan: this._resolvePreferredColumnSpan()
-        });
+  willUpdate(changed) {
+    if (changed.has("value")) {
+      const committed = this._committed();
+      if (committed && !this._monthVisible(committed[0])) {
+        this._viewYear = committed[0].getFullYear();
+        this._viewMonth = committed[0].getMonth();
       }
-    });
-  }
-  _resolvePreferredColumnSpan() {
-    const raw = this.masonryPreferredColumnSpan;
-    if (raw === void 0 || raw === null || raw === "") return void 0;
-    const n = Number(raw);
-    if (Number.isFinite(n) && String(n) === raw) return n;
-    return raw;
-  }
-  _teardownMasonry() {
-    cancelAnimationFrame(this._frame);
-    this._ro?.disconnect();
-    this._mo?.disconnect();
-    this._ro = void 0;
-    this._mo = void 0;
-    const container = this._gridEl();
-    if (container) clearMasonryLayout(container, this._items());
-  }
-  render() {
-    const classes = [
-      "grid",
-      `--${this.variant}`,
-      this.isCentered ? "--centered" : "",
-      this.isMasonry ? "--masonry" : ""
-    ].filter(Boolean).join(" ");
-    const styleAttr = this.variant === "custom" && this.columns !== void 0 ? `--grid_columns: ${this.columns}` : "";
-    return T`<div class=${classes} style=${styleAttr}><slot></slot></div>`;
-  }
-};
-customElements.define("bds-grid", BdsGrid);
-
-// src/components/layout/Grid/autoSpan.ts
-function aspectToColumnSpan(ratio) {
-  if (!Number.isFinite(ratio) || ratio <= 0) return "one-quarter";
-  if (ratio > 3.5) return "full";
-  if (ratio > 2.2) return "three-quarters";
-  if (ratio > 1.5) return "half";
-  return "one-quarter";
-}
-function findMediaChild(root) {
-  return root.querySelector("img, video");
-}
-function readMediaAspect(media) {
-  if (media instanceof HTMLImageElement) {
-    if (media.naturalWidth > 0 && media.naturalHeight > 0) {
-      return media.naturalWidth / media.naturalHeight;
+      this._internals.setFormValue?.(this.value);
     }
-    return null;
   }
-  if (media.videoWidth > 0 && media.videoHeight > 0) {
-    return media.videoWidth / media.videoHeight;
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.("");
   }
-  return null;
-}
-function mediaReadyEvent(media) {
-  if (media instanceof HTMLImageElement) return media.complete ? null : "load";
-  if (media.readyState < 1) return "loadedmetadata";
-  return null;
-}
-
-// src/web-components/layout/bds-grid-item.ts
-var SPAN_VAR = {
-  full: "var(--bds-grid_span-100)",
-  "three-quarters": "span var(--bds-grid_columns-75)",
-  "two-thirds": "span var(--bds-grid_columns-66)",
-  half: "span var(--bds-grid_columns-50)",
-  "one-third": "span var(--bds-grid_columns-33)",
-  "one-quarter": "span var(--bds-grid_columns-25)"
-};
-function resolveSpan(value) {
-  if (value === void 0 || value === null) return SPAN_VAR.full;
-  if (typeof value === "number") return `span ${value}`;
-  if (!(value in SPAN_VAR)) {
-    const n = Number(value);
-    if (Number.isFinite(n)) return `span ${n}`;
-    return SPAN_VAR.full;
+  formDisabledCallback(disabled) {
+    this.disabled = disabled;
   }
-  return SPAN_VAR[value];
-}
-var BdsGridItem = class extends i2 {
-  static styles = i`
-    :host {
-      display: block;
-      min-inline-size: 0;
-    }
-  `;
-  static properties = {
-    columnSpan: { attribute: "column-span" },
-    rowSpan: { attribute: "row-span", type: Number },
-    startColumn: { attribute: "start-column", type: Number },
-    endColumn: { attribute: "end-column", type: Number }
-  };
-  _autoSpan = "one-quarter";
-  _mediaCleanup;
-  _slotObserver;
-  constructor() {
-    super();
-    this.columnSpan = void 0;
-    this.rowSpan = void 0;
-    this.startColumn = void 0;
-    this.endColumn = void 0;
+  get _localeOrUndefined() {
+    return this.locale || void 0;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    if (typeof MutationObserver !== "undefined") {
-      this._slotObserver = new MutationObserver(() => this._resolveAutoSpan());
-      this._slotObserver.observe(this, { childList: true, subtree: true });
-    }
+  get _count() {
+    return Math.max(1, this.months || 1);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._teardownMedia();
-    this._slotObserver?.disconnect();
-    this._slotObserver = void 0;
+  _committed() {
+    const [s, e] = (this.value || "").split("/");
+    const sd = parseISO(s ?? "");
+    const ed = parseISO(e ?? "");
+    return sd && ed ? sortRange(sd, ed) : null;
   }
-  _effectiveColumnSpan() {
-    if (this.columnSpan !== void 0 && this.columnSpan !== null) return this.columnSpan;
-    const parent = this.closest("bds-grid");
-    if (parent?.autoSpanMedia) return "auto";
-    return "full";
+  _paint() {
+    if (this._anchorIso) {
+      const a = parseISO(this._anchorIso);
+      const pe = parseISO(this._hoverIso ?? this._focusedIso ?? this._anchorIso) ?? a;
+      return sortRange(a, pe);
+    }
+    return this._committed();
   }
-  _teardownMedia() {
-    this._mediaCleanup?.();
-    this._mediaCleanup = void 0;
+  _monthVisible(date) {
+    const start = this._viewYear * 12 + this._viewMonth;
+    const idx = date.getFullYear() * 12 + date.getMonth();
+    return idx >= start && idx < start + this._count;
   }
-  _resolveAutoSpan() {
-    this._teardownMedia();
-    if (this._effectiveColumnSpan() !== "auto") return;
-    const media = findMediaChild(this);
-    if (!media) {
-      this._setAutoSpan("one-quarter");
-      return;
-    }
-    const aspect = readMediaAspect(media);
-    if (aspect !== null) {
-      this._setAutoSpan(aspectToColumnSpan(aspect));
-      return;
-    }
-    const event = mediaReadyEvent(media);
-    if (!event) {
-      this._setAutoSpan("one-quarter");
-      return;
-    }
-    const handler = () => {
-      const a = readMediaAspect(media);
-      if (a !== null) this._setAutoSpan(aspectToColumnSpan(a));
-    };
-    media.addEventListener(event, handler, { once: true });
-    this._mediaCleanup = () => media.removeEventListener(event, handler);
+  _setView(d) {
+    this._viewYear = d.getFullYear();
+    this._viewMonth = d.getMonth();
   }
-  _setAutoSpan(next) {
-    if (this._autoSpan === next) return;
-    this._autoSpan = next;
+  _page(dir) {
+    this._focusedIso = null;
+    const step = this.pageBy === "single" ? 1 : this._count;
+    this._setView(new Date(this._viewYear, this._viewMonth + dir * step, 1));
     this.requestUpdate();
   }
-  updated() {
-    const effective = this._effectiveColumnSpan();
-    if (effective === "auto") this._resolveAutoSpan();
-    const hasExplicitRange = this.startColumn !== void 0 || this.endColumn !== void 0;
-    const resolved = effective === "auto" ? this._autoSpan : effective;
-    const gridColumn = hasExplicitRange ? `${this.startColumn ?? "auto"} / ${this.endColumn ?? "auto"}` : resolveSpan(resolved);
-    this.style.gridColumn = gridColumn;
-    this.style.gridRow = this.rowSpan !== void 0 ? `span ${this.rowSpan}` : "";
-    const isColumnSpanAuto = (this.columnSpan === void 0 || this.columnSpan === null) && !hasExplicitRange;
-    if (isColumnSpanAuto) this.setAttribute("data-column-span-auto", "");
-    else this.removeAttribute("data-column-span-auto");
-  }
-  render() {
-    return T`<slot></slot>`;
+  _isDisabledDate(iso) {
+    const date = parseISO(iso);
+    if (!date) return false;
+    return isDisabled(date, {
+      min: parseISO(this.min) ?? void 0,
+      max: parseISO(this.max) ?? void 0,
+      isDateDisallowed: this.isDateDisallowed
+    });
   }
-};
-customElements.define("bds-grid-item", BdsGridItem);
-
-// 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;
+  _selectDate(iso) {
+    if (this.disabled || this._isDisabledDate(iso)) return;
+    const date = parseISO(iso);
+    if (!date) return;
+    if (!this._anchorIso) {
+      this._anchorIso = iso;
+      this._hoverIso = null;
+      this.dispatchEvent(new CustomEvent("bds-range-start", { detail: { start: iso }, bubbles: true, composed: true }));
+      this.requestUpdate();
+    } else {
+      const [s, e] = sortRange(parseISO(this._anchorIso), date);
+      const startIso = toISO(s);
+      const endIso = toISO(e);
+      this.value = `${startIso}/${endIso}`;
+      this._internals.setFormValue?.(this.value);
+      this.dispatchEvent(new CustomEvent("bds-range-select", { detail: { start: startIso, end: endIso }, bubbles: true, composed: true }));
+      this._anchorIso = null;
+      this._hoverIso = null;
     }
-  `;
-  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;
-      border: var(--table_border, none);
-      border-radius: var(--table_radius, var(--bds-border_radius--s));
-      --bdc_color: var(--bds-color_bg--subtle);
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
-    }
-
-    ::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;
+  _handleKeydown = (e) => {
+    if (this.disabled) return;
+    if (e.key === "Escape") {
+      this._anchorIso = null;
+      this._hoverIso = null;
+      this.requestUpdate();
+      return;
     }
-  `;
-  static properties = {
-    stickyHeader: { type: Boolean, attribute: "sticky-header", reflect: true }
+    const focused = this.shadowRoot?.activeElement;
+    if (!focused?.dataset.date) return;
+    const current = parseISO(focused.dataset.date);
+    if (!current) return;
+    const next = nextFocusDate(current, e.key, { shiftKey: e.shiftKey, firstDayOfWeek: this.firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    const iso = toISO(next);
+    this._focusedIso = iso;
+    if (!this._monthVisible(next)) this._setView(next);
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(`.day:not(.--outside)[data-date="${iso}"]`)?.focus();
+    });
   };
-  constructor() {
-    super();
-    this.stickyHeader = false;
+  _onDayEnter(iso) {
+    if (!this._anchorIso) return;
+    this._hoverIso = iso;
+    this.requestUpdate();
   }
-  render() {
+  _weekdayNames() {
+    if (this.formatWeekday) {
+      return Array.from({ length: 7 }, (_, i2) => this.formatWeekday(new Date(2023, 0, 1 + (this.firstDayOfWeek + i2) % 7)));
+    }
+    return getWeekdayNames(this._localeOrUndefined, this.firstDayOfWeek);
+  }
+  _monthLabel(year, month) {
+    return this.formatMonth ? this.formatMonth(new Date(year, month, 1)) : getMonthLabel(year, month, this._localeOrUndefined);
+  }
+  _dayLabel(date) {
+    return this.formatDay ? this.formatDay(date) : getDayLabel(date, this._localeOrUndefined);
+  }
+  _tabbableIso(paint) {
+    const today = /* @__PURE__ */ new Date();
+    if (this._focusedIso) return this._focusedIso;
+    if (this._anchorIso && this._monthVisible(parseISO(this._anchorIso))) return this._anchorIso;
+    if (paint && this._monthVisible(paint[0])) return toISO(paint[0]);
+    if (this._monthVisible(today)) return toISO(today);
+    return toISO(new Date(this._viewYear, this._viewMonth, 1));
+  }
+  _renderMonth(index, weekdays, paint, tabbableIso) {
+    const first = new Date(this._viewYear, this._viewMonth + index, 1);
+    const year = first.getFullYear();
+    const month = first.getMonth();
+    const todayIso = toISO(/* @__PURE__ */ new Date());
+    const cells = buildMonthGrid(year, month, this.firstDayOfWeek);
+    const rows = [];
+    for (let i2 = 0; i2 < cells.length; i2 += 7) rows.push(cells.slice(i2, i2 + 7));
+    const label = this._monthLabel(year, month);
     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: var(--pagination_border-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;
-    }
+      <div class="month">
+        <div class="header">
+          <span class="nav-slot">
+            ${index === 0 ? T`
+              <button class="nav-btn" type="button" aria-label=${this.previousLabel} ?disabled=${this.disabled} @click=${() => this._page(-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>` : null}
+          </span>
+          <span class="month-label" aria-live="polite">${label}</span>
+          <span class="nav-slot">
+            ${index === this._count - 1 ? T`
+              <button class="nav-btn" type="button" aria-label=${this.nextLabel} ?disabled=${this.disabled} @click=${() => this._page(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>` : null}
+          </span>
+        </div>
 
-    .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>
+        <div class="grid" role="grid" aria-label=${label}>
+          <div class="row" role="row">
+            ${weekdays.map((d) => T`<div class="weekday" role="columnheader" aria-label=${d}>${d}</div>`)}
+          </div>
+          ${rows.map((week) => T`
+            <div class="row" role="row">
+              ${week.map(({ iso, date, day, outside }) => {
+      const isStart = !outside && !!paint && isSameDay(date, paint[0]);
+      const isEnd = !outside && !!paint && isSameDay(date, paint[1]);
+      const inRange = !outside && !!paint && !isStart && !isEnd && isInRange(date, paint[0], paint[1]);
+      const isToday = !outside && iso === todayIso;
+      const isDisabled2 = this._isDisabledDate(iso) || this.disabled;
+      const classes = [
+        "day",
+        outside ? "--outside" : "",
+        isStart ? "--range-start" : "",
+        isEnd ? "--range-end" : "",
+        inRange ? "--in-range" : "",
+        isToday && !isStart && !isEnd ? "--today" : ""
+      ].filter(Boolean).join(" ");
+      return T`
+                  <div class="cell" role="gridcell" aria-selected=${isStart || isEnd ? "true" : "false"}>
                     <button
+                      class=${classes}
                       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);
-      font-style: italic;
-    }
-  `;
-  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);
-      font-style: italic;
-    }
-  `;
-  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();
-    }
+                      data-date=${iso}
+                      aria-label=${this._dayLabel(date)}
+                      ?disabled=${isDisabled2 || outside}
+                      aria-current=${isToday ? "date" : A}
+                      aria-disabled=${isDisabled2 ? "true" : "false"}
+                      tabindex=${!outside && iso === tabbableIso ? "0" : "-1"}
+                      @click=${() => this._selectDate(iso)}
+                      @pointerenter=${() => this._onDayEnter(iso)}
+                    >${day}</button>
+                  </div>`;
+    })}
+            </div>`)}
+        </div>
+      </div>`;
   }
   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-field-group.ts
-var BdsFieldGroup = class extends i2 {
-  static styles = i`
-    :host {
-      display: block;
-
-      /* Establish an inline-size containment context so the @container rule
-         queries the host's own width — independent of the viewport. */
-      container-type: inline-size;
-      container-name: field-group;
-
-      /* Auto-derived collapse threshold (mirror of the React component).
-         --fieldGroup_field-count is set inline by _onSlotChange; the other
-         tokens use foundation-default fallbacks so the calc rebuilds when
-         a consumer overrides --fieldGroup_min-field-width or _gap. */
-      --fieldGroup_collapse-threshold:
-        calc(
-          var(--fieldGroup_field-count, 1)
-          * var(--fieldGroup_min-field-width, 12rem)
-          + (var(--fieldGroup_field-count, 1) - 1)
-          * var(--fieldGroup_gap, var(--bds-space_m))
-        );
-    }
-
-    fieldset {
-      border: 0;
-      margin: 0;
-      padding: 0;
-      min-inline-size: 0;
-    }
-
-    .legend {
-      inline-size: 100%;
-      padding-inline: 0;
-
-      padding-block:
-        var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
-      margin-block-end:
-        var(--fieldGroup_legend-gap, var(--bds-space_m));
-      border-block-end:
-        var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
-
-      color:
-        var(--fieldGroup_legend-color, var(--bds-color_on-bg));
-      font-family: var(--bds-font_family--body);
-      font-size:
-        var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
-      font-weight:
-        var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
-      line-height:
-        var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
-    }
-
-    .fields {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fieldGroup_gap, var(--bds-space_m));
-    }
-
-    :host([variant='horizontal']) .fields {
-      flex-flow: row wrap;
-    }
-
-    :host([variant='horizontal']) .fields ::slotted(*) {
-      flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
-      min-inline-size: 0;
-    }
-
-    /* Auto-collapse: when the host's inline-size can't fit a complete
-       horizontal row, switch to a single-column stack. Threshold scales
-       with the actual slotted-element count (see :host calc above). */
-    @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
-      :host([variant='horizontal']) .fields {
-        flex-direction: column;
-      }
-
-      :host([variant='horizontal']) .fields ::slotted(*) {
-        flex: 1 1 auto;
-      }
-    }
-  `;
-  static properties = {
-    variant: { type: String, reflect: true },
-    legend: { type: String },
-    disabled: { type: Boolean, reflect: true }
-  };
-  constructor() {
-    super();
-    this.variant = "horizontal";
-    this.legend = "";
-    this.disabled = false;
-  }
-  // Arrow-bound for stable identity (unused here but matches the
-  // bds-popover / bds-button conventions for handlers attached in render).
-  _onSlotChange = (e) => {
-    const slot = e.target;
-    const count = slot.assignedElements().length;
-    this.style.setProperty("--fieldGroup_field-count", String(count));
-  };
-  render() {
-    return T`
-      <fieldset ?disabled=${this.disabled}>
-        ${this.legend ? T`<legend class="legend">${this.legend}</legend>` : A}
-        <div class="fields">
-          <slot @slotchange=${this._onSlotChange}></slot>
-        </div>
-      </fieldset>
-    `;
-  }
-};
-customElements.define("bds-field-group", BdsFieldGroup);
-
-// 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: var(--formInput_border-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);
-      font-style: italic;
-    }
-  `;
-  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(--carousel_navBtn-radius, var(--bds-border_radius--circle));
-      background-color: var(--carousel_navBtn-bg, 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(--carousel_navBtn-bg--hover, 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: 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);
-    }
-
-    .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 }
-  };
-  _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);
-    });
+    const weekdays = this._weekdayNames();
+    const paint = this._paint();
+    const tabbableIso = this._tabbableIso(paint);
     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 class="months">
+          ${Array.from({ length: this._count }, (_, i2) => this._renderMonth(i2, weekdays, paint, tabbableIso))}
         </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>
-    `;
+      </div>`;
   }
 };
-customElements.define("bds-dropdown-menu-item", BdsDropdownMenuItem);
+customElements.define("bds-calendar-range", BdsCalendarRange);
 export {
   BdsAccordion,
   BdsAccordionItem,
@@ -2175,8 +446,10 @@ export {
   BdsBadge,
   BdsBreadcrumb,
   BdsButton,
+  BdsButtonContainer,
   BdsButtonGroup,
   BdsCalendar,
+  BdsCalendarRange,
   BdsCard,
   BdsCarousel,
   BdsCheckbox,