@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import { useId, useState } from "react";
 
 // src/components/ui/Accordion/Accordion.module.css
-var Accordion_default = {"component":"bds280Accordion-component","accordion":"bds280Accordion-accordion","item":"bds280Accordion-item","heading":"bds280Accordion-heading","trigger":"bds280Accordion-trigger","triggerLabel":"bds280Accordion-triggerLabel","chevron":"bds280Accordion-chevron","--open":"bds280Accordion---open","panel":"bds280Accordion-panel","panelContent":"bds280Accordion-panelContent"};
+var Accordion_default = {"component":"bds2110Accordion-component","accordion":"bds2110Accordion-accordion","item":"bds2110Accordion-item","heading":"bds2110Accordion-heading","trigger":"bds2110Accordion-trigger","triggerLabel":"bds2110Accordion-triggerLabel","chevron":"bds2110Accordion-chevron","--open":"bds2110Accordion---open","panel":"bds2110Accordion-panel","panelContent":"bds2110Accordion-panelContent"};
 
 // src/components/ui/Accordion/Accordion.tsx
 import { cn } from "@boostdev/design-system-foundation";
@@ -71,7 +71,7 @@ function Accordion({
 }
 
 // src/components/ui/Alert/Alert.module.css
-var Alert_default = {"component":"bds280Alert-component","alert":"bds280Alert-alert","--variant_info":"bds280Alert---variant_info","--variant_success":"bds280Alert---variant_success","--variant_warning":"bds280Alert---variant_warning","--variant_error":"bds280Alert---variant_error","icon":"bds280Alert-icon","content":"bds280Alert-content","title":"bds280Alert-title","dismiss":"bds280Alert-dismiss"};
+var Alert_default = {"component":"bds2110Alert-component","alert":"bds2110Alert-alert","--variant_info":"bds2110Alert---variant_info","--variant_success":"bds2110Alert---variant_success","--variant_warning":"bds2110Alert---variant_warning","--variant_error":"bds2110Alert---variant_error","icon":"bds2110Alert-icon","content":"bds2110Alert-content","title":"bds2110Alert-title","dismiss":"bds2110Alert-dismiss"};
 
 // src/components/ui/Alert/Alert.tsx
 import { cn as cn2 } from "@boostdev/design-system-foundation";
@@ -116,7 +116,7 @@ function Alert({
 }
 
 // src/components/ui/Avatar/Avatar.module.css
-var Avatar_default = {"component":"bds280Avatar-component","avatar":"bds280Avatar-avatar","--fallback":"bds280Avatar---fallback","--size_small":"bds280Avatar---size_small","--size_medium":"bds280Avatar---size_medium","--size_large":"bds280Avatar---size_large","image":"bds280Avatar-image","initials":"bds280Avatar-initials"};
+var Avatar_default = {"component":"bds2110Avatar-component","avatar":"bds2110Avatar-avatar","--fallback":"bds2110Avatar---fallback","--size_small":"bds2110Avatar---size_small","--size_medium":"bds2110Avatar---size_medium","--size_large":"bds2110Avatar---size_large","image":"bds2110Avatar-image","initials":"bds2110Avatar-initials"};
 
 // src/components/ui/Avatar/Avatar.tsx
 import { cn as cn3 } from "@boostdev/design-system-foundation";
@@ -143,7 +143,7 @@ function Avatar({ src, alt, name, size = "medium", className, ...rest }) {
 }
 
 // src/components/ui/Badge/Badge.module.css
-var Badge_default = {"component":"bds280Badge-component","badge":"bds280Badge-badge","--variant_primary":"bds280Badge---variant_primary","--variant_secondary":"bds280Badge---variant_secondary","--variant_success":"bds280Badge---variant_success","--variant_error":"bds280Badge---variant_error","--variant_warning":"bds280Badge---variant_warning"};
+var Badge_default = {"component":"bds2110Badge-component","badge":"bds2110Badge-badge","--variant_primary":"bds2110Badge---variant_primary","--variant_secondary":"bds2110Badge---variant_secondary","--variant_success":"bds2110Badge---variant_success","--variant_error":"bds2110Badge---variant_error","--variant_warning":"bds2110Badge---variant_warning"};
 
 // src/components/ui/Badge/Badge.tsx
 import { cn as cn4 } from "@boostdev/design-system-foundation";
@@ -153,7 +153,7 @@ function Badge({ children, variant = "primary", className, ...rest }) {
 }
 
 // src/components/ui/Breadcrumb/Breadcrumb.module.css
-var Breadcrumb_default = {"component":"bds280Breadcrumb-component","breadcrumb":"bds280Breadcrumb-breadcrumb","list":"bds280Breadcrumb-list","item":"bds280Breadcrumb-item","link":"bds280Breadcrumb-link","separator":"bds280Breadcrumb-separator","current":"bds280Breadcrumb-current"};
+var Breadcrumb_default = {"component":"bds2110Breadcrumb-component","breadcrumb":"bds2110Breadcrumb-breadcrumb","list":"bds2110Breadcrumb-list","item":"bds2110Breadcrumb-item","link":"bds2110Breadcrumb-link","separator":"bds2110Breadcrumb-separator","text":"bds2110Breadcrumb-text","current":"bds2110Breadcrumb-current"};
 
 // src/components/ui/Breadcrumb/Breadcrumb.tsx
 import { cn as cn5 } from "@boostdev/design-system-foundation";
@@ -162,14 +162,14 @@ function Breadcrumb({ items, className, ...rest }) {
   return /* @__PURE__ */ jsx5("nav", { ...rest, "aria-label": "Breadcrumb", className: cn5(Breadcrumb_default.breadcrumb, className), children: /* @__PURE__ */ jsx5("ol", { className: Breadcrumb_default.list, children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsx5("li", { className: Breadcrumb_default.item, children: isLast ? /* @__PURE__ */ jsx5("span", { "aria-current": "page", className: Breadcrumb_default.current, children: item.label }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-      /* @__PURE__ */ jsx5("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }),
+      item.href ? /* @__PURE__ */ jsx5("a", { href: item.href, className: Breadcrumb_default.link, children: item.label }) : /* @__PURE__ */ jsx5("span", { className: Breadcrumb_default.text, children: item.label }),
       /* @__PURE__ */ jsx5("span", { className: Breadcrumb_default.separator, "aria-hidden": "true", children: "\u203A" })
     ] }) }, index);
   }) }) });
 }
 
 // src/components/ui/Collapsible/Collapsible.module.css
-var Collapsible_default = {"component":"bds280Collapsible-component","collapsible":"bds280Collapsible-collapsible","summary":"bds280Collapsible-summary","summaryContent":"bds280Collapsible-summaryContent","icon":"bds280Collapsible-icon","content":"bds280Collapsible-content"};
+var Collapsible_default = {"component":"bds2110Collapsible-component","collapsible":"bds2110Collapsible-collapsible","summary":"bds2110Collapsible-summary","summaryContent":"bds2110Collapsible-summaryContent","icon":"bds2110Collapsible-icon","content":"bds2110Collapsible-content"};
 
 // src/components/ui/Collapsible/Collapsible.tsx
 import { cn as cn6 } from "@boostdev/design-system-foundation";
@@ -184,9 +184,16 @@ function Collapsible({
   className,
   ...rest
 }) {
+  const isControlled = open !== void 0;
   const handleToggle = (e) => {
+    if (isControlled) return;
     onToggle?.(e.currentTarget.open);
   };
+  const handleSummaryClick = (e) => {
+    if (!isControlled) return;
+    e.preventDefault();
+    onToggle?.(!open);
+  };
   return /* @__PURE__ */ jsxs4(
     "details",
     {
@@ -196,7 +203,7 @@ function Collapsible({
       onToggle: handleToggle,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs4("summary", { className: Collapsible_default.summary, children: [
+        /* @__PURE__ */ jsxs4("summary", { className: Collapsible_default.summary, onClick: handleSummaryClick, children: [
           /* @__PURE__ */ jsx6("span", { className: Collapsible_default.summaryContent, children: summary }),
           /* @__PURE__ */ jsx6("span", { className: Collapsible_default.icon, "aria-hidden": "true" })
         ] }),
@@ -207,255 +214,575 @@ function Collapsible({
 }
 
 // src/components/ui/Calendar/Calendar.tsx
-import { useState as useState2, useId as useId2 } from "react";
+import { useState as useState2, useId as useId2, useRef, useEffect, useCallback } from "react";
+import { cn as cn8 } from "@boostdev/design-system-foundation";
 
 // src/components/ui/Calendar/Calendar.module.css
-var Calendar_default = {"component":"bds280Calendar-component","calendar":"bds280Calendar-calendar","header":"bds280Calendar-header","monthYear":"bds280Calendar-monthYear","navBtn":"bds280Calendar-navBtn","grid":"bds280Calendar-grid","weekday":"bds280Calendar-weekday","empty":"bds280Calendar-empty","day":"bds280Calendar-day","disabled":"bds280Calendar-disabled","selected":"bds280Calendar-selected","today":"bds280Calendar-today"};
+var Calendar_default = {"component":"bds2110Calendar-component","calendar":"bds2110Calendar-calendar","months":"bds2110Calendar-months","month":"bds2110Calendar-month","monthHeader":"bds2110Calendar-monthHeader","navSlot":"bds2110Calendar-navSlot","monthYear":"bds2110Calendar-monthYear","navBtn":"bds2110Calendar-navBtn","grid":"bds2110Calendar-grid","row":"bds2110Calendar-row","weekday":"bds2110Calendar-weekday","cell":"bds2110Calendar-cell","day":"bds2110Calendar-day","disabled":"bds2110Calendar-disabled","selected":"bds2110Calendar-selected","rangeStart":"bds2110Calendar-rangeStart","rangeEnd":"bds2110Calendar-rangeEnd","outside":"bds2110Calendar-outside","today":"bds2110Calendar-today","inRange":"bds2110Calendar-inRange"};
 
-// src/components/ui/Calendar/Calendar.tsx
+// src/components/ui/Calendar/MonthGrid.tsx
 import { cn as cn7 } from "@boostdev/design-system-foundation";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-var DAY_LABELS = {
-  Su: "Sunday",
-  Mo: "Monday",
-  Tu: "Tuesday",
-  We: "Wednesday",
-  Th: "Thursday",
-  Fr: "Friday",
-  Sa: "Saturday"
-};
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
+
+// src/components/ui/Calendar/calendar-core.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) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!m) return null;
+  const year = Number(m[1]);
+  const month = Number(m[2]) - 1;
+  const day = Number(m[3]);
+  const date = new Date(year, month, day);
+  date.setFullYear(year);
+  if (isNaN(date.getTime())) return null;
+  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null;
+  return date;
+}
+function addDays(date, n) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + n);
+}
+function addMonths(date, n) {
+  const firstOfTarget = new Date(date.getFullYear(), date.getMonth() + n, 1);
+  const daysInTarget = new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth() + 1, 0).getDate();
+  return new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth(), Math.min(date.getDate(), daysInTarget));
+}
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-function toMidnight(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+function compareDay(a, b) {
+  const am = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+  const bm = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
+  return am < bm ? -1 : am > bm ? 1 : 0;
+}
+function sortRange(a, b) {
+  return compareDay(a, b) <= 0 ? [a, b] : [b, a];
+}
+function isInRange(date, start, end) {
+  const [lo, hi] = sortRange(start, end);
+  return compareDay(date, lo) >= 0 && compareDay(date, hi) <= 0;
+}
+function isDisabled(date, opts) {
+  if (opts.min && compareDay(date, opts.min) < 0) return true;
+  if (opts.max && compareDay(date, opts.max) > 0) return true;
+  return !!opts.isDateDisallowed?.(date);
+}
+function buildMonthGrid(year, month, firstDayOfWeek) {
+  const firstOfMonth = new Date(year, month, 1);
+  const lead = (firstOfMonth.getDay() - firstDayOfWeek + 7) % 7;
+  const start = addDays(firstOfMonth, -lead);
+  return Array.from({ length: 42 }, (_, i) => {
+    const date = addDays(start, i);
+    return { iso: toISO(date), date, day: date.getDate(), outside: date.getMonth() !== month };
+  });
+}
+function getMonthLabel(year, month, locale) {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(new Date(year, month, 1));
+}
+function getDayLabel(date, locale) {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
+}
+function getWeekdayNames(locale, firstDayOfWeek) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
+}
+function nextFocusDate(current, key, opts) {
+  const offsetInWeek = (current.getDay() - opts.firstDayOfWeek + 7) % 7;
+  switch (key) {
+    case "ArrowRight":
+      return addDays(current, 1);
+    case "ArrowLeft":
+      return addDays(current, -1);
+    case "ArrowDown":
+      return addDays(current, 7);
+    case "ArrowUp":
+      return addDays(current, -7);
+    case "Home":
+      return addDays(current, -offsetInWeek);
+    case "End":
+      return addDays(current, 6 - offsetInWeek);
+    case "PageUp":
+      return addMonths(current, opts.shiftKey ? -12 : -1);
+    case "PageDown":
+      return addMonths(current, opts.shiftKey ? 12 : 1);
+    default:
+      return null;
+  }
+}
+
+// src/components/ui/Calendar/MonthGrid.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronLeft = () => /* @__PURE__ */ jsx7("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
+var ChevronRight = () => /* @__PURE__ */ jsx7("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+function MonthGrid(props) {
+  const {
+    year,
+    month,
+    firstDayOfWeek,
+    weekdayNames,
+    monthLabel,
+    headingId,
+    showPrev,
+    showNext,
+    onPrev,
+    onNext,
+    prevLabel,
+    nextLabel,
+    classifyDay,
+    formatDay,
+    registerRef,
+    onSelect,
+    onKeyDown,
+    onDayPointerEnter
+  } = props;
+  const cells = buildMonthGrid(year, month, firstDayOfWeek);
+  const rows = Array.from({ length: 6 }, (_, r) => cells.slice(r * 7, r * 7 + 7));
+  return /* @__PURE__ */ jsxs5("div", { className: Calendar_default.month, children: [
+    /* @__PURE__ */ jsxs5("div", { className: Calendar_default.monthHeader, children: [
+      /* @__PURE__ */ jsx7("span", { className: Calendar_default.navSlot, children: showPrev && /* @__PURE__ */ jsx7("button", { type: "button", className: Calendar_default.navBtn, "aria-label": prevLabel, onClick: onPrev, children: /* @__PURE__ */ jsx7(ChevronLeft, {}) }) }),
+      /* @__PURE__ */ jsx7("span", { id: headingId, className: Calendar_default.monthYear, "aria-live": "polite", children: monthLabel }),
+      /* @__PURE__ */ jsx7("span", { className: Calendar_default.navSlot, children: showNext && /* @__PURE__ */ jsx7("button", { type: "button", className: Calendar_default.navBtn, "aria-label": nextLabel, onClick: onNext, children: /* @__PURE__ */ jsx7(ChevronRight, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: Calendar_default.grid, role: "grid", "aria-labelledby": headingId, children: [
+      /* @__PURE__ */ jsx7("div", { className: Calendar_default.row, role: "row", children: weekdayNames.map((name, i) => /* @__PURE__ */ jsx7("span", { role: "columnheader", className: Calendar_default.weekday, "aria-label": name, children: name }, i)) }),
+      rows.map((week, r) => /* @__PURE__ */ jsx7("div", { className: Calendar_default.row, role: "row", children: week.map((cell) => {
+        const s = cell.outside ? { today: false, selected: false, rangeStart: false, rangeEnd: false, inRange: false, disabled: true, tabbable: false } : classifyDay(cell.date);
+        const isEndpoint = s.selected || s.rangeStart || s.rangeEnd;
+        return /* @__PURE__ */ jsx7(
+          "span",
+          {
+            role: "gridcell",
+            "aria-selected": isEndpoint,
+            className: Calendar_default.cell,
+            children: /* @__PURE__ */ jsx7(
+              "button",
+              {
+                ref: (el) => registerRef(cell.iso, el),
+                type: "button",
+                "data-date": cell.iso,
+                "data-outside": cell.outside || void 0,
+                "data-today": s.today || void 0,
+                "data-selected": s.selected || void 0,
+                "data-range-start": s.rangeStart || void 0,
+                "data-range-end": s.rangeEnd || void 0,
+                "data-in-range": s.inRange || void 0,
+                className: cn7(
+                  Calendar_default.day,
+                  cell.outside && Calendar_default.outside,
+                  s.today && !isEndpoint && Calendar_default.today,
+                  s.selected && Calendar_default.selected,
+                  s.rangeStart && Calendar_default.rangeStart,
+                  s.rangeEnd && Calendar_default.rangeEnd,
+                  s.inRange && Calendar_default.inRange,
+                  s.disabled && Calendar_default.disabled
+                ),
+                "aria-label": formatDay(cell.date),
+                "aria-current": s.today ? "date" : void 0,
+                "aria-disabled": s.disabled || void 0,
+                disabled: s.disabled || cell.outside,
+                tabIndex: s.tabbable ? 0 : -1,
+                onClick: () => onSelect(cell.date),
+                onKeyDown: (e) => onKeyDown(e, cell.date),
+                onPointerEnter: onDayPointerEnter ? () => onDayPointerEnter(cell.date) : void 0,
+                children: cell.day
+              }
+            )
+          },
+          cell.iso
+        );
+      }) }, r))
+    ] })
+  ] });
 }
-function isOutOfRange(date, min, max) {
-  const d = toMidnight(date);
-  if (min && d < toMidnight(min)) return true;
-  return !!(max && d > toMidnight(max));
+
+// src/components/ui/Calendar/Calendar.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function monthIndex(d) {
+  return d.getFullYear() * 12 + d.getMonth();
 }
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
+function isMonthVisible(date, viewYear, viewMonth, months) {
+  const start = viewYear * 12 + viewMonth;
+  const idx = monthIndex(date);
+  return idx >= start && idx < start + months;
 }
-function getFirstDayOfMonth(year, month) {
-  return new Date(year, month, 1).getDay();
+function weekdayNamesFrom(fmt, firstDayOfWeek) {
+  return Array.from({ length: 7 }, (_, i) => fmt(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
 }
-function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }) {
+function Calendar({
+  value,
+  defaultValue,
+  min,
+  max,
+  months = 1,
+  pageBy = "months",
+  firstDayOfWeek = 1,
+  locale,
+  isDateDisallowed,
+  formatWeekday,
+  formatMonth,
+  formatDay,
+  labels,
+  onChange,
+  className,
+  ...rest
+}) {
   const today = /* @__PURE__ */ new Date();
   const controlled = value !== void 0;
   const [internal, setInternal] = useState2(defaultValue);
   const selected = controlled ? value : internal;
-  const [viewYear, setViewYear] = useState2(selected?.getFullYear() ?? today.getFullYear());
-  const [viewMonth, setViewMonth] = useState2(selected?.getMonth() ?? today.getMonth());
-  const [focusedDay, setFocusedDay] = useState2();
-  const titleId = useId2();
-  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
-  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
-  const navigate = (delta) => {
-    const d = new Date(viewYear, viewMonth + delta, 1);
+  const base = selected ?? today;
+  const [viewYear, setViewYear] = useState2(base.getFullYear());
+  const [viewMonth, setViewMonth] = useState2(base.getMonth());
+  const [focusedIso, setFocusedIso] = useState2();
+  const headingBaseId = useId2();
+  const dayRefs = useRef(/* @__PURE__ */ new Map());
+  const registerRef = useCallback((iso, el) => {
+    if (el) dayRefs.current.set(iso, el);
+    else dayRefs.current.delete(iso);
+  }, []);
+  useEffect(() => {
+    if (!controlled || !value) return;
+    if (!isMonthVisible(value, viewYear, viewMonth, months)) {
+      setViewYear(value.getFullYear());
+      setViewMonth(value.getMonth());
+    }
+  }, [controlled, value]);
+  useEffect(() => {
+    if (focusedIso) dayRefs.current.get(focusedIso)?.focus();
+  }, [focusedIso, viewYear, viewMonth]);
+  const disabledFor = (date) => isDisabled(date, { min, max, isDateDisallowed });
+  const page = (dir) => {
+    const step = pageBy === "single" ? 1 : months;
+    const d = new Date(viewYear, viewMonth + dir * step, 1);
     setViewYear(d.getFullYear());
     setViewMonth(d.getMonth());
-    setFocusedDay(void 0);
+    setFocusedIso(void 0);
   };
-  const selectDay = (day) => {
-    const date = new Date(viewYear, viewMonth, day);
-    if (isOutOfRange(date, min, max)) return;
+  const select = (date) => {
+    if (disabledFor(date)) return;
     if (!controlled) setInternal(date);
     onChange?.(date);
   };
-  const handleKeyDown = (e, day) => {
-    const map = {
-      ArrowRight: 1,
-      ArrowLeft: -1,
-      ArrowDown: 7,
-      ArrowUp: -7
-    };
-    if (e.key in map) {
-      e.preventDefault();
-      const current = new Date(viewYear, viewMonth, day);
-      const next = new Date(current);
-      next.setDate(next.getDate() + map[e.key]);
-      setViewYear(next.getFullYear());
-      setViewMonth(next.getMonth());
-      setFocusedDay(next.getDate());
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      setFocusedDay(1);
-    } else if (e.key === "End") {
-      e.preventDefault();
-      setFocusedDay(daysInMonth);
-    } else if (e.key === "Enter" || e.key === " ") {
+  const moveFocus = (target) => {
+    setFocusedIso(toISO(target));
+    if (!isMonthVisible(target, viewYear, viewMonth, months)) {
+      setViewYear(target.getFullYear());
+      setViewMonth(target.getMonth());
+    }
+  };
+  const onKeyDown = (e, date) => {
+    if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      selectDay(day);
+      select(date);
+      return;
     }
+    const next = nextFocusDate(date, e.key, { shiftKey: e.shiftKey, firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    moveFocus(next);
   };
-  const cells = [
-    ...Array.from({ length: firstDay }, () => null),
-    ...Array.from({ length: daysInMonth }, (_, i) => ({ day: i + 1 }))
-  ];
-  while (cells.length % 7 !== 0) cells.push(null);
-  return /* @__PURE__ */ jsxs5("div", { ...rest, className: cn7(Calendar_default.calendar, className), role: "group", "aria-labelledby": titleId, children: [
-    /* @__PURE__ */ jsxs5("div", { className: Calendar_default.header, children: [
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: Calendar_default.navBtn,
-          "aria-label": "Previous month",
-          onClick: () => navigate(-1),
-          children: /* @__PURE__ */ jsx7("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
-        }
-      ),
-      /* @__PURE__ */ jsxs5("span", { id: titleId, className: Calendar_default.monthYear, "aria-live": "polite", children: [
-        MONTHS[viewMonth],
-        " ",
-        viewYear
-      ] }),
-      /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: Calendar_default.navBtn,
-          "aria-label": "Next month",
-          onClick: () => navigate(1),
-          children: /* @__PURE__ */ jsx7("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5(
-      "table",
+  const selectedVisible = selected && isMonthVisible(selected, viewYear, viewMonth, months) ? selected : void 0;
+  const todayVisible = isMonthVisible(today, viewYear, viewMonth, months) ? today : void 0;
+  const tabbableIso = focusedIso ?? (selectedVisible && toISO(selectedVisible)) ?? (todayVisible && toISO(todayVisible)) ?? toISO(new Date(viewYear, viewMonth, 1));
+  const classifyDay = (date) => ({
+    today: isSameDay(date, today),
+    selected: !!selected && isSameDay(date, selected),
+    rangeStart: false,
+    rangeEnd: false,
+    inRange: false,
+    disabled: disabledFor(date),
+    tabbable: toISO(date) === tabbableIso
+  });
+  const weekdayNames = formatWeekday ? weekdayNamesFrom(formatWeekday, firstDayOfWeek) : getWeekdayNames(locale, firstDayOfWeek);
+  const labelOfMonth = (y, m) => formatMonth ? formatMonth(new Date(y, m, 1)) : getMonthLabel(y, m, locale);
+  const labelOfDay = (d) => formatDay ? formatDay(d) : getDayLabel(d, locale);
+  const prevLabel = labels?.previousMonth ?? "Previous month";
+  const nextLabel = labels?.nextMonth ?? "Next month";
+  const count = Math.max(1, months);
+  const groupLabel = Array.from({ length: count }, (_, i) => {
+    const d = new Date(viewYear, viewMonth + i, 1);
+    return labelOfMonth(d.getFullYear(), d.getMonth());
+  }).join(", ");
+  return /* @__PURE__ */ jsx8("div", { ...rest, className: cn8(Calendar_default.calendar, className), role: "group", "aria-label": groupLabel, children: /* @__PURE__ */ jsx8("div", { className: Calendar_default.months, children: Array.from({ length: count }, (_, i) => {
+    const d = new Date(viewYear, viewMonth + i, 1);
+    return /* @__PURE__ */ jsx8(
+      MonthGrid,
       {
-        className: Calendar_default.grid,
-        role: "grid",
-        "aria-labelledby": titleId,
-        children: [
-          /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: DAYS.map((d) => /* @__PURE__ */ jsx7("th", { scope: "col", "aria-label": DAY_LABELS[d] ?? d, className: Calendar_default.weekday, children: d }, d)) }) }),
-          /* @__PURE__ */ jsx7("tbody", { children: Array.from({ length: cells.length / 7 }, (_, row) => /* @__PURE__ */ jsx7("tr", { children: cells.slice(row * 7, row * 7 + 7).map((cell, col) => {
-            if (!cell) return /* @__PURE__ */ jsx7("td", { className: Calendar_default.empty, "aria-hidden": "true" }, col);
-            const date = new Date(viewYear, viewMonth, cell.day);
-            const isSelected = selected ? isSameDay(date, selected) : false;
-            const isToday = isSameDay(date, today);
-            const disabled = isOutOfRange(date, min, max);
-            const isFocused = focusedDay === cell.day;
-            return /* @__PURE__ */ jsx7("td", { role: "gridcell", children: /* @__PURE__ */ jsx7(
-              "button",
-              {
-                type: "button",
-                className: cn7(
-                  Calendar_default.day,
-                  isSelected && Calendar_default.selected,
-                  isToday && !isSelected && Calendar_default.today,
-                  disabled && Calendar_default.disabled
-                ),
-                "aria-label": date.toLocaleDateString("en", { month: "long", day: "numeric", year: "numeric" }),
-                "aria-selected": isSelected,
-                "aria-current": isToday ? "date" : void 0,
-                "aria-disabled": disabled,
-                disabled,
-                tabIndex: isFocused || !focusedDay && isSelected || !focusedDay && !selected && isToday ? 0 : -1,
-                onClick: () => selectDay(cell.day),
-                onKeyDown: (e) => handleKeyDown(e, cell.day),
-                children: cell.day
-              }
-            ) }, col);
-          }) }, row)) })
-        ]
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        firstDayOfWeek,
+        weekdayNames,
+        monthLabel: labelOfMonth(d.getFullYear(), d.getMonth()),
+        headingId: `${headingBaseId}-${i}`,
+        showPrev: i === 0,
+        showNext: i === count - 1,
+        onPrev: () => page(-1),
+        onNext: () => page(1),
+        prevLabel,
+        nextLabel,
+        classifyDay,
+        formatDay: labelOfDay,
+        registerRef,
+        onSelect: select,
+        onKeyDown
+      },
+      i
+    );
+  }) }) });
+}
+
+// src/components/ui/Calendar/CalendarRange.tsx
+import { useState as useState3, useId as useId3, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { cn as cn9 } from "@boostdev/design-system-foundation";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function isMonthVisible2(date, viewYear, viewMonth, months) {
+  const start = viewYear * 12 + viewMonth;
+  const idx = date.getFullYear() * 12 + date.getMonth();
+  return idx >= start && idx < start + months;
+}
+function weekdayNamesFrom2(fmt, firstDayOfWeek) {
+  return Array.from({ length: 7 }, (_, i) => fmt(new Date(2023, 0, 1 + (firstDayOfWeek + i) % 7)));
+}
+function CalendarRange({
+  value,
+  defaultValue,
+  min,
+  max,
+  months = 1,
+  pageBy = "months",
+  firstDayOfWeek = 1,
+  locale,
+  isDateDisallowed,
+  formatWeekday,
+  formatMonth,
+  formatDay,
+  labels,
+  onChange,
+  onRangeStart,
+  className,
+  ...rest
+}) {
+  const today = /* @__PURE__ */ new Date();
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState3(defaultValue);
+  const committed = controlled ? value : internal;
+  const [anchor, setAnchor] = useState3();
+  const [hover, setHover] = useState3();
+  const base = committed ? committed[0] : today;
+  const [viewYear, setViewYear] = useState3(base.getFullYear());
+  const [viewMonth, setViewMonth] = useState3(base.getMonth());
+  const [focusedIso, setFocusedIso] = useState3();
+  const headingBaseId = useId3();
+  const dayRefs = useRef2(/* @__PURE__ */ new Map());
+  const registerRef = useCallback2((iso, el) => {
+    if (el) dayRefs.current.set(iso, el);
+    else dayRefs.current.delete(iso);
+  }, []);
+  useEffect2(() => {
+    if (!controlled || !value) return;
+    if (!isMonthVisible2(value[0], viewYear, viewMonth, months)) {
+      setViewYear(value[0].getFullYear());
+      setViewMonth(value[0].getMonth());
+    }
+  }, [controlled, value]);
+  useEffect2(() => {
+    if (focusedIso) dayRefs.current.get(focusedIso)?.focus();
+  }, [focusedIso, viewYear, viewMonth]);
+  const disabledFor = (date) => isDisabled(date, { min, max, isDateDisallowed });
+  const page = (dir) => {
+    const step = pageBy === "single" ? 1 : months;
+    const d = new Date(viewYear, viewMonth + dir * step, 1);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    setFocusedIso(void 0);
+  };
+  const select = (date) => {
+    if (disabledFor(date)) return;
+    if (!anchor) {
+      setAnchor(date);
+      setHover(void 0);
+      onRangeStart?.(date);
+    } else {
+      const pair = sortRange(anchor, date);
+      if (!controlled) setInternal(pair);
+      onChange?.(pair);
+      setAnchor(void 0);
+      setHover(void 0);
+    }
+  };
+  const moveFocus = (target) => {
+    setFocusedIso(toISO(target));
+    if (!isMonthVisible2(target, viewYear, viewMonth, months)) {
+      setViewYear(target.getFullYear());
+      setViewMonth(target.getMonth());
+    }
+  };
+  const onKeyDown = (e, date) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      select(date);
+      return;
+    }
+    if (e.key === "Escape") {
+      if (anchor) {
+        setAnchor(void 0);
+        setHover(void 0);
       }
-    )
-  ] });
+      return;
+    }
+    const next = nextFocusDate(date, e.key, { shiftKey: e.shiftKey, firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    moveFocus(next);
+  };
+  let paintStart;
+  let paintEnd;
+  if (anchor) {
+    const previewEnd = hover ?? (focusedIso ? parseISO(focusedIso) ?? anchor : anchor);
+    [paintStart, paintEnd] = sortRange(anchor, previewEnd);
+  } else if (committed) {
+    [paintStart, paintEnd] = sortRange(committed[0], committed[1]);
+  }
+  const anchorVisible = anchor && isMonthVisible2(anchor, viewYear, viewMonth, months) ? anchor : void 0;
+  const committedStartVisible = committed && isMonthVisible2(committed[0], viewYear, viewMonth, months) ? committed[0] : void 0;
+  const todayVisible = isMonthVisible2(today, viewYear, viewMonth, months) ? today : void 0;
+  const tabbableIso = focusedIso ?? (anchorVisible && toISO(anchorVisible)) ?? (committedStartVisible && toISO(committedStartVisible)) ?? (todayVisible && toISO(todayVisible)) ?? toISO(new Date(viewYear, viewMonth, 1));
+  const classifyDay = (date) => {
+    const isStart = !!paintStart && isSameDay(date, paintStart);
+    const isEnd = !!paintEnd && isSameDay(date, paintEnd);
+    const inRange = !!paintStart && !!paintEnd && !isStart && !isEnd && isInRange(date, paintStart, paintEnd);
+    return {
+      today: isSameDay(date, today),
+      selected: false,
+      rangeStart: isStart,
+      rangeEnd: isEnd,
+      inRange,
+      disabled: disabledFor(date),
+      tabbable: toISO(date) === tabbableIso
+    };
+  };
+  const weekdayNames = formatWeekday ? weekdayNamesFrom2(formatWeekday, firstDayOfWeek) : getWeekdayNames(locale, firstDayOfWeek);
+  const labelOfMonth = (y, m) => formatMonth ? formatMonth(new Date(y, m, 1)) : getMonthLabel(y, m, locale);
+  const labelOfDay = (d) => formatDay ? formatDay(d) : getDayLabel(d, locale);
+  const prevLabel = labels?.previousMonth ?? "Previous month";
+  const nextLabel = labels?.nextMonth ?? "Next month";
+  const count = Math.max(1, months);
+  const groupLabel = Array.from({ length: count }, (_, i) => {
+    const d = new Date(viewYear, viewMonth + i, 1);
+    return labelOfMonth(d.getFullYear(), d.getMonth());
+  }).join(", ");
+  return /* @__PURE__ */ jsx9("div", { ...rest, className: cn9(Calendar_default.calendar, className), role: "group", "aria-label": groupLabel, children: /* @__PURE__ */ jsx9("div", { className: Calendar_default.months, children: Array.from({ length: count }, (_, i) => {
+    const d = new Date(viewYear, viewMonth + i, 1);
+    return /* @__PURE__ */ jsx9(
+      MonthGrid,
+      {
+        year: d.getFullYear(),
+        month: d.getMonth(),
+        firstDayOfWeek,
+        weekdayNames,
+        monthLabel: labelOfMonth(d.getFullYear(), d.getMonth()),
+        headingId: `${headingBaseId}-${i}`,
+        showPrev: i === 0,
+        showNext: i === count - 1,
+        onPrev: () => page(-1),
+        onNext: () => page(1),
+        prevLabel,
+        nextLabel,
+        classifyDay,
+        formatDay: labelOfDay,
+        registerRef,
+        onSelect: select,
+        onKeyDown,
+        onDayPointerEnter: anchor ? ((date) => setHover(date)) : void 0
+      },
+      i
+    );
+  }) }) });
 }
 
 // src/components/ui/Carousel/Carousel.tsx
-import { useRef, useId as useId3 } from "react";
+import { useRef as useRef3, useId as useId4 } from "react";
 
 // src/components/ui/Carousel/Carousel.module.css
-var Carousel_default = {"component":"bds280Carousel-component","carousel":"bds280Carousel-carousel","track":"bds280Carousel-track","slide":"bds280Carousel-slide","navBtn":"bds280Carousel-navBtn"};
+var Carousel_default = {"component":"bds2110Carousel-component","carousel":"bds2110Carousel-carousel","track":"bds2110Carousel-track","slide":"bds2110Carousel-slide","navBtn":"bds2110Carousel-navBtn"};
 
 // src/components/ui/Carousel/Carousel.tsx
-import { cn as cn8 } from "@boostdev/design-system-foundation";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { cn as cn10 } from "@boostdev/design-system-foundation";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function Carousel({ items, label, className, ...rest }) {
-  const trackRef = useRef(null);
-  const listId = useId3();
+  const trackRef = useRef3(null);
+  const listId = useId4();
   const scroll = (direction) => {
-    if (!trackRef.current) return;
-    const { scrollLeft, clientWidth } = trackRef.current;
-    trackRef.current.scrollTo({
-      left: scrollLeft + (direction === "next" ? clientWidth : -clientWidth),
-      behavior: "smooth"
+    const track = trackRef.current;
+    if (!track) return;
+    const isRtl = window.getComputedStyle(track).direction === "rtl";
+    const sign = direction === "next" ? 1 : -1;
+    track.scrollBy({
+      left: (isRtl ? -sign : sign) * track.clientWidth,
+      behavior: prefersReducedMotion() ? "auto" : "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs6("section", { ...rest, "aria-label": label, className: cn8(Carousel_default.carousel, className), children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("section", { ...rest, "aria-label": label, className: cn10(Carousel_default.carousel, className), children: [
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
-        className: cn8(Carousel_default.navBtn, Carousel_default["--prev"]),
+        className: Carousel_default.navBtn,
         "aria-label": "Previous",
         "aria-controls": listId,
         onClick: () => scroll("prev"),
-        children: /* @__PURE__ */ jsx8("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+        children: /* @__PURE__ */ jsx10("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         ref: trackRef,
         id: listId,
         role: "list",
         className: Carousel_default.track,
-        children: items.map((item, i) => /* @__PURE__ */ jsx8("div", { role: "listitem", className: Carousel_default.slide, children: item }, i))
+        children: items.map((item, i) => /* @__PURE__ */ jsx10("div", { role: "listitem", className: Carousel_default.slide, children: item }, i))
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "button",
       {
         type: "button",
-        className: cn8(Carousel_default.navBtn, Carousel_default["--next"]),
+        className: Carousel_default.navBtn,
         "aria-label": "Next",
         "aria-controls": listId,
         onClick: () => scroll("next"),
-        children: /* @__PURE__ */ jsx8("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsx10("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     )
   ] });
 }
 
 // src/components/ui/DescriptionList/DescriptionList.module.css
-var DescriptionList_default = {"component":"bds280DescriptionList-component","list":"bds280DescriptionList-list","group":"bds280DescriptionList-group","term":"bds280DescriptionList-term","details":"bds280DescriptionList-details","--layout_inline":"bds280DescriptionList---layout_inline"};
+var DescriptionList_default = {"component":"bds2110DescriptionList-component","list":"bds2110DescriptionList-list","group":"bds2110DescriptionList-group","term":"bds2110DescriptionList-term","details":"bds2110DescriptionList-details","--layout_inline":"bds2110DescriptionList---layout_inline"};
 
 // src/components/ui/DescriptionList/DescriptionList.tsx
-import { cn as cn9 } from "@boostdev/design-system-foundation";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { cn as cn11 } from "@boostdev/design-system-foundation";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function DescriptionList({ items, layout = "stacked", className, ...rest }) {
-  return /* @__PURE__ */ jsx9("dl", { ...rest, className: cn9(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ jsxs7("div", { className: DescriptionList_default.group, children: [
-    /* @__PURE__ */ jsx9("dt", { className: DescriptionList_default.term, children: item.term }),
-    Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ jsx9("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ jsx9("dd", { className: DescriptionList_default.details, children: item.details })
+  return /* @__PURE__ */ jsx11("dl", { ...rest, className: cn11(DescriptionList_default.list, DescriptionList_default[`--layout_${layout}`], className), children: items.map((item, i) => /* @__PURE__ */ jsxs7("div", { className: DescriptionList_default.group, children: [
+    /* @__PURE__ */ jsx11("dt", { className: DescriptionList_default.term, children: item.term }),
+    Array.isArray(item.details) ? item.details.map((d, j) => /* @__PURE__ */ jsx11("dd", { className: DescriptionList_default.details, children: d }, j)) : /* @__PURE__ */ jsx11("dd", { className: DescriptionList_default.details, children: item.details })
   ] }, i)) });
 }
 
 // src/components/ui/Link/Link.module.css
-var Link_default = {"component":"bds280Link-component","link":"bds280Link-link","--variant_default":"bds280Link---variant_default","--variant_subtle":"bds280Link---variant_subtle","--variant_standalone":"bds280Link---variant_standalone","externalLabel":"bds280Link-externalLabel"};
+var Link_default = {"component":"bds2110Link-component","link":"bds2110Link-link","--variant_default":"bds2110Link---variant_default","--variant_subtle":"bds2110Link---variant_subtle","--variant_standalone":"bds2110Link---variant_standalone","externalLabel":"bds2110Link-externalLabel"};
 
 // src/components/ui/Link/Link.tsx
-import { cn as cn10 } from "@boostdev/design-system-foundation";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { cn as cn12 } from "@boostdev/design-system-foundation";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function Link({
   as,
   children,
@@ -470,33 +797,42 @@ function Link({
   return /* @__PURE__ */ jsxs8(
     Component,
     {
-      className: cn10(Link_default.link, Link_default[`--variant_${variant}`], className),
+      className: cn12(Link_default.link, Link_default[`--variant_${variant}`], className),
       ...externalProps,
       ...props,
       children: [
         children,
-        external && /* @__PURE__ */ jsx10("span", { className: Link_default.externalLabel, children: externalLabel })
+        external && /* @__PURE__ */ jsx12("span", { className: Link_default.externalLabel, children: externalLabel })
       ]
     }
   );
 }
 
 // src/components/ui/Loading/Loading.module.css
-var Loading_default = {"component":"bds280Loading-component","loading":"bds280Loading-loading","spinner":"bds280Loading-spinner","--size_small":"bds280Loading---size_small","--size_large":"bds280Loading---size_large"};
+var Loading_default = {"component":"bds2110Loading-component","loading":"bds2110Loading-loading","spinner":"bds2110Loading-spinner","--size_small":"bds2110Loading---size_small","--size_large":"bds2110Loading---size_large"};
 
 // src/components/ui/Loading/Loading.tsx
-import { cn as cn11 } from "@boostdev/design-system-foundation";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function Loading({ size = "medium", className, ...rest }) {
-  return /* @__PURE__ */ jsx11("div", { ...rest, className: cn11(Loading_default.loading, Loading_default[`--size_${size}`], className), children: /* @__PURE__ */ jsx11("div", { className: Loading_default.spinner, role: "status", "aria-label": "Loading" }) });
+import { cn as cn13 } from "@boostdev/design-system-foundation";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Loading({ size = "medium", className, "aria-label": ariaLabel, ...rest }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel ?? "Loading",
+      ...rest,
+      className: cn13(Loading_default.loading, Loading_default[`--size_${size}`], className),
+      children: /* @__PURE__ */ jsx13("div", { className: Loading_default.spinner })
+    }
+  );
 }
 
 // src/components/ui/NotificationBanner/NotificationBanner.module.css
-var NotificationBanner_default = {"component":"bds280NotificationBanner-component","banner":"bds280NotificationBanner-banner","--variant_info":"bds280NotificationBanner---variant_info","--variant_success":"bds280NotificationBanner---variant_success","--variant_warning":"bds280NotificationBanner---variant_warning","--variant_error":"bds280NotificationBanner---variant_error","content":"bds280NotificationBanner-content","action":"bds280NotificationBanner-action","dismiss":"bds280NotificationBanner-dismiss"};
+var NotificationBanner_default = {"component":"bds2110NotificationBanner-component","banner":"bds2110NotificationBanner-banner","--variant_info":"bds2110NotificationBanner---variant_info","--variant_success":"bds2110NotificationBanner---variant_success","--variant_warning":"bds2110NotificationBanner---variant_warning","--variant_error":"bds2110NotificationBanner---variant_error","content":"bds2110NotificationBanner-content","action":"bds2110NotificationBanner-action","dismiss":"bds2110NotificationBanner-dismiss"};
 
 // src/components/ui/NotificationBanner/NotificationBanner.tsx
-import { cn as cn12 } from "@boostdev/design-system-foundation";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { cn as cn14 } from "@boostdev/design-system-foundation";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function NotificationBanner({
   variant = "info",
   children,
@@ -513,18 +849,18 @@ function NotificationBanner({
       role: isUrgent ? "alert" : "status",
       "aria-live": isUrgent ? "assertive" : "polite",
       "aria-atomic": "true",
-      className: cn12(NotificationBanner_default.banner, NotificationBanner_default[`--variant_${variant}`], className),
+      className: cn14(NotificationBanner_default.banner, NotificationBanner_default[`--variant_${variant}`], className),
       children: [
-        /* @__PURE__ */ jsx12("div", { className: NotificationBanner_default.content, children }),
-        action && /* @__PURE__ */ jsx12("div", { className: NotificationBanner_default.action, children: action }),
-        onDismiss && /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx14("div", { className: NotificationBanner_default.content, children }),
+        action && /* @__PURE__ */ jsx14("div", { className: NotificationBanner_default.action, children: action }),
+        onDismiss && /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
             className: NotificationBanner_default.dismiss,
             onClick: onDismiss,
             "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsx12("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+            children: /* @__PURE__ */ jsx14("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
           }
         )
       ]
@@ -533,11 +869,11 @@ function NotificationBanner({
 }
 
 // src/components/ui/Pagination/Pagination.module.css
-var Pagination_default = {"component":"bds280Pagination-component","pagination":"bds280Pagination-pagination","list":"bds280Pagination-list","button":"bds280Pagination-button","--active":"bds280Pagination---active","--nav":"bds280Pagination---nav","ellipsis":"bds280Pagination-ellipsis"};
+var Pagination_default = {"component":"bds2110Pagination-component","pagination":"bds2110Pagination-pagination","list":"bds2110Pagination-list","button":"bds2110Pagination-button","--active":"bds2110Pagination---active","--nav":"bds2110Pagination---nav","ellipsis":"bds2110Pagination-ellipsis"};
 
 // src/components/ui/Pagination/Pagination.tsx
-import { cn as cn13 } from "@boostdev/design-system-foundation";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { cn as cn15 } from "@boostdev/design-system-foundation";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function getPageRange(current, total) {
   const delta = 1;
   const range = [];
@@ -558,24 +894,24 @@ function Pagination({
   ...rest
 }) {
   const pages = getPageRange(currentPage, totalPages);
-  return /* @__PURE__ */ jsx13("nav", { ...rest, "aria-label": "Pagination", className: cn13(Pagination_default.pagination, className), children: /* @__PURE__ */ jsxs10("ul", { className: Pagination_default.list, children: [
-    /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15("nav", { ...rest, "aria-label": "Pagination", className: cn15(Pagination_default.pagination, className), children: /* @__PURE__ */ jsxs10("ul", { className: Pagination_default.list, children: [
+    /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
-        className: cn13(Pagination_default.button, Pagination_default["--nav"]),
+        className: cn15(Pagination_default.button, Pagination_default["--nav"]),
         onClick: () => onPageChange(currentPage - 1),
         disabled: currentPage <= 1,
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ jsx13("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+        children: /* @__PURE__ */ jsx15("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
       }
     ) }),
     pages.map(
-      (page, index) => page === "..." ? /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13("span", { className: Pagination_default.ellipsis, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+      (page, index) => page === "..." ? /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15("span", { className: Pagination_default.ellipsis, "aria-hidden": "true", children: "\u2026" }) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
-          className: cn13(Pagination_default.button, currentPage === page ? Pagination_default["--active"] : void 0),
+          className: cn15(Pagination_default.button, currentPage === page ? Pagination_default["--active"] : void 0),
           onClick: () => onPageChange(page),
           "aria-label": `Page ${page}`,
           "aria-current": currentPage === page ? "page" : void 0,
@@ -583,26 +919,26 @@ function Pagination({
         }
       ) }, page)
     ),
-    /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
-        className: cn13(Pagination_default.button, Pagination_default["--nav"]),
+        className: cn15(Pagination_default.button, Pagination_default["--nav"]),
         onClick: () => onPageChange(currentPage + 1),
         disabled: currentPage >= totalPages,
         "aria-label": "Next page",
-        children: /* @__PURE__ */ jsx13("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsx15("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     ) })
   ] }) });
 }
 
 // src/components/ui/Progress/Progress.module.css
-var Progress_default = {"component":"bds280Progress-component","container":"bds280Progress-container","labelRow":"bds280Progress-labelRow","value":"bds280Progress-value","track":"bds280Progress-track","--size_small":"bds280Progress---size_small","--size_medium":"bds280Progress---size_medium","--size_large":"bds280Progress---size_large","fill":"bds280Progress-fill"};
+var Progress_default = {"component":"bds2110Progress-component","container":"bds2110Progress-container","labelRow":"bds2110Progress-labelRow","value":"bds2110Progress-value","track":"bds2110Progress-track","--size_small":"bds2110Progress---size_small","--size_medium":"bds2110Progress---size_medium","--size_large":"bds2110Progress---size_large","fill":"bds2110Progress-fill"};
 
 // src/components/ui/Progress/Progress.tsx
-import { cn as cn14 } from "@boostdev/design-system-foundation";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { cn as cn16 } from "@boostdev/design-system-foundation";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function Progress({
   value,
   max = 100,
@@ -613,35 +949,35 @@ function Progress({
   ...rest
 }) {
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs11("div", { ...rest, className: cn14(Progress_default.container, className), children: [
+  return /* @__PURE__ */ jsxs11("div", { ...rest, className: cn16(Progress_default.container, className), children: [
     showLabel && /* @__PURE__ */ jsxs11("div", { className: Progress_default.labelRow, children: [
-      /* @__PURE__ */ jsx14("span", { className: Progress_default.label, children: label }),
+      /* @__PURE__ */ jsx16("span", { className: Progress_default.label, children: label }),
       /* @__PURE__ */ jsxs11("span", { className: Progress_default.value, children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx16(
       "div",
       {
         role: "progressbar",
         "aria-label": label,
-        "aria-valuenow": value,
+        "aria-valuenow": Math.min(max, Math.max(0, value)),
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        className: cn14(Progress_default.track, Progress_default[`--size_${size}`]),
-        children: /* @__PURE__ */ jsx14("div", { className: Progress_default.fill, style: { width: `${percentage}%` } })
+        className: cn16(Progress_default.track, Progress_default[`--size_${size}`]),
+        children: /* @__PURE__ */ jsx16("div", { className: Progress_default.fill, style: { inlineSize: `${percentage}%` } })
       }
     )
   ] });
 }
 
 // src/components/ui/ProgressCircle/ProgressCircle.module.css
-var ProgressCircle_default = {"component":"bds280ProgressCircle-component","wrapper":"bds280ProgressCircle-wrapper","svg":"bds280ProgressCircle-svg","track":"bds280ProgressCircle-track","fill":"bds280ProgressCircle-fill","value":"bds280ProgressCircle-value","--size_small":"bds280ProgressCircle---size_small","--size_medium":"bds280ProgressCircle---size_medium","--size_large":"bds280ProgressCircle---size_large"};
+var ProgressCircle_default = {"component":"bds2110ProgressCircle-component","wrapper":"bds2110ProgressCircle-wrapper","svg":"bds2110ProgressCircle-svg","track":"bds2110ProgressCircle-track","fill":"bds2110ProgressCircle-fill","value":"bds2110ProgressCircle-value","--size_small":"bds2110ProgressCircle---size_small","--size_medium":"bds2110ProgressCircle---size_medium","--size_large":"bds2110ProgressCircle---size_large"};
 
 // src/components/ui/ProgressCircle/ProgressCircle.tsx
-import { cn as cn15 } from "@boostdev/design-system-foundation";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { cn as cn17 } from "@boostdev/design-system-foundation";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var SIZE_PX = { small: 40, medium: 64, large: 96 };
 var STROKE_WIDTH = 4;
 function ProgressCircle({
@@ -665,10 +1001,10 @@ function ProgressCircle({
       ...rest,
       role: "progressbar",
       "aria-label": label,
-      "aria-valuenow": value,
+      "aria-valuenow": Math.min(max, Math.max(0, value)),
       "aria-valuemin": 0,
       "aria-valuemax": max,
-      className: cn15(ProgressCircle_default.wrapper, ProgressCircle_default[`--size_${size}`], className),
+      className: cn17(ProgressCircle_default.wrapper, ProgressCircle_default[`--size_${size}`], className),
       children: [
         /* @__PURE__ */ jsxs12(
           "svg",
@@ -679,7 +1015,7 @@ function ProgressCircle({
             "aria-hidden": "true",
             className: ProgressCircle_default.svg,
             children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx17(
                 "circle",
                 {
                   className: ProgressCircle_default.track,
@@ -690,7 +1026,7 @@ function ProgressCircle({
                   fill: "none"
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx17(
                 "circle",
                 {
                   className: ProgressCircle_default.fill,
@@ -718,54 +1054,57 @@ function ProgressCircle({
 }
 
 // src/components/ui/Separator/Separator.module.css
-var Separator_default = {"component":"bds280Separator-component","separator":"bds280Separator-separator","--horizontal":"bds280Separator---horizontal","--vertical":"bds280Separator---vertical"};
+var Separator_default = {"component":"bds2110Separator-component","separator":"bds2110Separator-separator","--horizontal":"bds2110Separator---horizontal","--vertical":"bds2110Separator---vertical"};
 
 // src/components/ui/Separator/Separator.tsx
-import { cn as cn16 } from "@boostdev/design-system-foundation";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { cn as cn18 } from "@boostdev/design-system-foundation";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Separator({ orientation = "horizontal", className, ...rest }) {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       "div",
       {
         ...rest,
         role: "separator",
         "aria-orientation": "vertical",
-        className: cn16(Separator_default.separator, Separator_default["--vertical"], className)
+        className: cn18(Separator_default.separator, Separator_default["--vertical"], className)
       }
     );
   }
-  return /* @__PURE__ */ jsx16("hr", { ...rest, "aria-orientation": "horizontal", className: cn16(Separator_default.separator, Separator_default["--horizontal"], className) });
+  return /* @__PURE__ */ jsx18("hr", { ...rest, "aria-orientation": "horizontal", className: cn18(Separator_default.separator, Separator_default["--horizontal"], className) });
 }
 
 // src/components/ui/Skeleton/Skeleton.tsx
-import { cn as cn17 } from "@boostdev/design-system-foundation";
+import { cn as cn19 } from "@boostdev/design-system-foundation";
 
 // src/components/ui/Skeleton/Skeleton.module.css
-var Skeleton_default = {"component":"bds280Skeleton-component","skeleton":"bds280Skeleton-skeleton"};
+var Skeleton_default = {"component":"bds2110Skeleton-component","skeleton":"bds2110Skeleton-skeleton"};
 
 // src/components/ui/Skeleton/Skeleton.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Skeleton({ className, ...rest }) {
-  return /* @__PURE__ */ jsx17("div", { ...rest, "aria-hidden": "true", className: cn17(Skeleton_default.skeleton, className) });
+  return /* @__PURE__ */ jsx19("div", { ...rest, "aria-hidden": "true", className: cn19(Skeleton_default.skeleton, className) });
 }
 
 // src/components/ui/SkipLink/SkipLink.module.css
-var SkipLink_default = {"component":"bds280SkipLink-component","skipLink":"bds280SkipLink-skipLink"};
+var SkipLink_default = {"component":"bds2110SkipLink-component","skipLink":"bds2110SkipLink-skipLink"};
 
 // src/components/ui/SkipLink/SkipLink.tsx
-import { cn as cn18 } from "@boostdev/design-system-foundation";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { cn as cn20 } from "@boostdev/design-system-foundation";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function SkipLink({ href = "#main", children = "Skip to main content", className, ...rest }) {
-  return /* @__PURE__ */ jsx18("a", { ...rest, href, className: cn18(SkipLink_default.skipLink, className), children });
+  return /* @__PURE__ */ jsx20("a", { ...rest, href, className: cn20(SkipLink_default.skipLink, className), children });
 }
 
+// src/components/ui/Table/Table.tsx
+import { useId as useId5 } from "react";
+
 // src/components/ui/Table/Table.module.css
-var Table_default = {"component":"bds280Table-component","wrapper":"bds280Table-wrapper","table":"bds280Table-table","caption":"bds280Table-caption","thead":"bds280Table-thead","th":"bds280Table-th","--sortable":"bds280Table---sortable","sortButton":"bds280Table-sortButton","sortIcon":"bds280Table-sortIcon","--sort-active":"bds280Table---sort-active","--sort-desc":"bds280Table---sort-desc","tbody":"bds280Table-tbody","tr":"bds280Table-tr","td":"bds280Table-td"};
+var Table_default = {"component":"bds2110Table-component","wrapper":"bds2110Table-wrapper","table":"bds2110Table-table","caption":"bds2110Table-caption","thead":"bds2110Table-thead","th":"bds2110Table-th","--sortable":"bds2110Table---sortable","sortButton":"bds2110Table-sortButton","sortIcon":"bds2110Table-sortIcon","--sort-active":"bds2110Table---sort-active","--sort-desc":"bds2110Table---sort-desc","tbody":"bds2110Table-tbody","tr":"bds2110Table-tr","td":"bds2110Table-td"};
 
 // src/components/ui/Table/Table.tsx
-import { cn as cn19 } from "@boostdev/design-system-foundation";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { cn as cn21 } from "@boostdev/design-system-foundation";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function Table({
   columns,
   rows,
@@ -773,8 +1112,14 @@ function Table({
   sortKey,
   sortDirection,
   onSort,
-  className
+  rowKey,
+  className,
+  ...rest
 }) {
+  const generatedId = useId5();
+  const captionId = caption ? `${generatedId}-caption` : void 0;
+  const hasCustomLabel = "aria-label" in rest || "aria-labelledby" in rest;
+  const hasAccessibleName = Boolean(caption) || hasCustomLabel;
   const handleSort = (key) => {
     if (!onSort) return;
     const nextDirection = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
@@ -784,62 +1129,81 @@ function Table({
     if (sortKey !== key) return "none";
     return sortDirection === "asc" ? "ascending" : "descending";
   };
-  return /* @__PURE__ */ jsx19("div", { className: cn19(Table_default.wrapper, className), children: /* @__PURE__ */ jsxs13("table", { className: Table_default.table, children: [
-    caption && /* @__PURE__ */ jsx19("caption", { className: Table_default.caption, children: caption }),
-    /* @__PURE__ */ jsx19("thead", { className: Table_default.thead, children: /* @__PURE__ */ jsx19("tr", { children: columns.map((col) => /* @__PURE__ */ jsx19(
-      "th",
-      {
-        scope: "col",
-        "aria-sort": col.sortable ? getAriaSort(col.key) : void 0,
-        className: cn19(Table_default.th, col.sortable ? Table_default["--sortable"] : void 0),
-        children: col.sortable ? /* @__PURE__ */ jsxs13(
-          "button",
+  const getSortAriaLabel = (col) => {
+    const label = col.sortLabel ?? (typeof col.header === "string" ? col.header : void 0);
+    if (!label) return void 0;
+    const stateSuffix = sortKey === col.key ? `, currently ${sortDirection === "asc" ? "ascending" : "descending"}` : "";
+    return `Sort by ${label}${stateSuffix}`;
+  };
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      ...rest,
+      className: cn21(Table_default.wrapper, className),
+      tabIndex: rest.tabIndex ?? 0,
+      role: hasAccessibleName ? "region" : void 0,
+      "aria-labelledby": hasCustomLabel ? rest["aria-labelledby"] : captionId,
+      children: /* @__PURE__ */ jsxs13("table", { className: Table_default.table, children: [
+        caption && /* @__PURE__ */ jsx21("caption", { id: captionId, className: Table_default.caption, children: caption }),
+        /* @__PURE__ */ jsx21("thead", { className: Table_default.thead, children: /* @__PURE__ */ jsx21("tr", { children: columns.map((col) => /* @__PURE__ */ jsx21(
+          "th",
           {
-            type: "button",
-            className: Table_default.sortButton,
-            onClick: () => handleSort(col.key),
-            "aria-label": `Sort by ${String(col.header)}${sortKey === col.key ? `, currently ${sortDirection === "asc" ? "ascending" : "descending"}` : ""}`,
-            children: [
-              col.header,
-              /* @__PURE__ */ jsx19(
-                "svg",
-                {
-                  "aria-hidden": "true",
-                  className: cn19(
-                    Table_default.sortIcon,
-                    sortKey === col.key ? Table_default["--sort-active"] : void 0,
-                    sortKey === col.key && sortDirection === "desc" ? Table_default["--sort-desc"] : void 0
-                  ),
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
-                }
-              )
-            ]
-          }
-        ) : col.header
-      },
-      col.key
-    )) }) }),
-    /* @__PURE__ */ jsx19("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx19("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ jsx19("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, JSON.stringify(row) || rowIndex)) })
-  ] }) });
+            scope: "col",
+            "aria-sort": col.sortable ? getAriaSort(col.key) : void 0,
+            className: cn21(Table_default.th, col.sortable ? Table_default["--sortable"] : void 0),
+            children: col.sortable ? /* @__PURE__ */ jsxs13(
+              "button",
+              {
+                type: "button",
+                className: Table_default.sortButton,
+                onClick: () => handleSort(col.key),
+                "aria-label": getSortAriaLabel(col),
+                children: [
+                  col.header,
+                  /* @__PURE__ */ jsx21(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      className: cn21(
+                        Table_default.sortIcon,
+                        sortKey === col.key ? Table_default["--sort-active"] : void 0,
+                        sortKey === col.key && sortDirection === "desc" ? Table_default["--sort-desc"] : void 0
+                      ),
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" })
+                    }
+                  )
+                ]
+              }
+            ) : col.header
+          },
+          col.key
+        )) }) }),
+        /* @__PURE__ */ jsx21("tbody", { className: Table_default.tbody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx21("tr", { className: Table_default.tr, children: columns.map((col) => /* @__PURE__ */ jsx21("td", { className: Table_default.td, children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowKey?.(row, rowIndex) ?? rowIndex)) })
+      ] })
+    }
+  );
 }
 
 // src/components/ui/Tabs/Tabs.tsx
-import { useId as useId4, useRef as useRef2, useState as useState3 } from "react";
+import { useId as useId6, useRef as useRef4, useState as useState4 } from "react";
 
 // src/components/ui/Tabs/Tabs.module.css
-var Tabs_default = {"component":"bds280Tabs-component","tabs":"bds280Tabs-tabs","tabList":"bds280Tabs-tabList","tab":"bds280Tabs-tab","--active":"bds280Tabs---active","panel":"bds280Tabs-panel"};
+var Tabs_default = {"component":"bds2110Tabs-component","tabs":"bds2110Tabs-tabs","tabList":"bds2110Tabs-tabList","tab":"bds2110Tabs-tab","--active":"bds2110Tabs---active","panel":"bds2110Tabs-panel"};
 
 // src/components/ui/Tabs/Tabs.tsx
-import { cn as cn20 } from "@boostdev/design-system-foundation";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { cn as cn22 } from "@boostdev/design-system-foundation";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function Tabs({ tabs, defaultTab, className, ...rest }) {
-  const baseId = useId4();
-  const [activeTab, setActiveTab] = useState3(defaultTab ?? tabs[0]?.id);
-  const tabRefs = useRef2([]);
+  const baseId = useId6();
+  const [activeTab, setActiveTab] = useState4(() => {
+    const initialTab = tabs.find((tab) => tab.id === defaultTab && !tab.disabled) ?? tabs.find((tab) => !tab.disabled);
+    return initialTab?.id;
+  });
+  const tabRefs = useRef4([]);
   const enabledIndexes = tabs.map((tab, i) => ({ tab, i })).filter(({ tab }) => !tab.disabled).map(({ i }) => i);
   const handleKeyDown = (e, index) => {
     const pos = enabledIndexes.indexOf(index);
@@ -861,12 +1225,12 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
       focusAt(enabledIndexes[enabledIndexes.length - 1]);
     }
   };
-  return /* @__PURE__ */ jsxs14("div", { ...rest, className: cn20(Tabs_default.tabs, className), children: [
-    /* @__PURE__ */ jsx20("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
+  return /* @__PURE__ */ jsxs14("div", { ...rest, className: cn22(Tabs_default.tabs, className), children: [
+    /* @__PURE__ */ jsx22("div", { role: "tablist", className: Tabs_default.tabList, children: tabs.map((tab, i) => {
       const tabId = `${baseId}-tab-${tab.id}`;
       const panelId = `${baseId}-panel-${tab.id}`;
       const isActive = activeTab === tab.id;
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx22(
         "button",
         {
           ref: (el) => {
@@ -879,7 +1243,7 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
           "aria-controls": panelId,
           tabIndex: isActive ? 0 : -1,
           disabled: tab.disabled,
-          className: cn20(Tabs_default.tab, isActive ? Tabs_default["--active"] : void 0),
+          className: cn22(Tabs_default.tab, isActive ? Tabs_default["--active"] : void 0),
           onClick: () => setActiveTab(tab.id),
           onKeyDown: (e) => handleKeyDown(e, i),
           children: tab.label
@@ -891,13 +1255,14 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
       const tabId = `${baseId}-tab-${tab.id}`;
       const panelId = `${baseId}-panel-${tab.id}`;
       const isActive = activeTab === tab.id;
-      return /* @__PURE__ */ jsx20(
+      return /* @__PURE__ */ jsx22(
         "div",
         {
           id: panelId,
           role: "tabpanel",
           "aria-labelledby": tabId,
           hidden: !isActive,
+          tabIndex: 0,
           className: Tabs_default.panel,
           children: tab.content
         },
@@ -908,14 +1273,19 @@ function Tabs({ tabs, defaultTab, className, ...rest }) {
 }
 
 // src/components/ui/Tooltip/Tooltip.tsx
-import { cloneElement, isValidElement, useId as useId5, useState as useState4 } from "react";
+import {
+  cloneElement,
+  isValidElement,
+  useId as useId7,
+  useState as useState5
+} from "react";
 
 // src/components/ui/Tooltip/Tooltip.module.css
-var Tooltip_default = {"component":"bds280Tooltip-component","wrapper":"bds280Tooltip-wrapper","tooltip":"bds280Tooltip-tooltip","--placement_top":"bds280Tooltip---placement_top","--placement_bottom":"bds280Tooltip---placement_bottom","--placement_left":"bds280Tooltip---placement_left","--placement_right":"bds280Tooltip---placement_right"};
+var Tooltip_default = {"component":"bds2110Tooltip-component","wrapper":"bds2110Tooltip-wrapper","tooltip":"bds2110Tooltip-tooltip","--visible":"bds2110Tooltip---visible","--placement_top":"bds2110Tooltip---placement_top","--placement_bottom":"bds2110Tooltip---placement_bottom","--placement_left":"bds2110Tooltip---placement_left","--placement_right":"bds2110Tooltip---placement_right"};
 
 // src/components/ui/Tooltip/Tooltip.tsx
-import { cn as cn21 } from "@boostdev/design-system-foundation";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { cn as cn23 } from "@boostdev/design-system-foundation";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function Tooltip({
   content,
   placement = "top",
@@ -923,8 +1293,15 @@ function Tooltip({
   className,
   ...rest
 }) {
-  const tooltipId = useId5();
-  const [isVisible, setIsVisible] = useState4(false);
+  const tooltipId = useId7();
+  const [isVisible, setIsVisible] = useState5(false);
+  const show = () => setIsVisible(true);
+  const hide = () => setIsVisible(false);
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && isVisible) {
+      hide();
+    }
+  };
   const trigger = isValidElement(children) ? cloneElement(children, {
     "aria-describedby": tooltipId
   }) : children;
@@ -932,20 +1309,21 @@ function Tooltip({
     "span",
     {
       ...rest,
-      className: cn21(Tooltip_default.wrapper, className),
-      onMouseEnter: () => setIsVisible(true),
-      onMouseLeave: () => setIsVisible(false),
-      onFocus: () => setIsVisible(true),
-      onBlur: () => setIsVisible(false),
+      className: cn23(Tooltip_default.wrapper, className),
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      onKeyDown: handleKeyDown,
       children: [
         trigger,
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx23(
           "span",
           {
             id: tooltipId,
             role: "tooltip",
-            "aria-hidden": !isVisible,
-            className: cn21(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`]),
+            hidden: !isVisible,
+            className: cn23(Tooltip_default.tooltip, Tooltip_default[`--placement_${placement}`], isVisible && Tooltip_default["--visible"]),
             children: content
           }
         )
@@ -955,11 +1333,11 @@ function Tooltip({
 }
 
 // src/components/ui/Typography/Typography.module.css
-var Typography_default = {"component":"bds280Typography-component","typography":"bds280Typography-typography","--h1":"bds280Typography---h1","--h2":"bds280Typography---h2","--h3":"bds280Typography---h3","--body":"bds280Typography---body","--body_s":"bds280Typography---body_s"};
+var Typography_default = {"component":"bds2110Typography-component","typography":"bds2110Typography-typography","--h1":"bds2110Typography---h1","--h2":"bds2110Typography---h2","--h3":"bds2110Typography---h3","--body":"bds2110Typography---body","--body_s":"bds2110Typography---body_s"};
 
 // src/components/ui/Typography/Typography.tsx
-import { cn as cn22 } from "@boostdev/design-system-foundation";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { cn as cn24 } from "@boostdev/design-system-foundation";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var variantToElement = {
   h1: "h1",
   h2: "h2",
@@ -969,15 +1347,15 @@ var variantToElement = {
 };
 function Typography({ variant = "body", component, children, className, ...rest }) {
   const Component = component || variantToElement[variant];
-  return /* @__PURE__ */ jsx22(Component, { ...rest, className: cn22(Typography_default.typography, Typography_default[`--${variant}`], className), children });
+  return /* @__PURE__ */ jsx24(Component, { ...rest, className: cn24(Typography_default.typography, Typography_default[`--${variant}`], className), children });
 }
 
 // src/components/interaction/Button/Button.module.css
-var Button_default = {"component":"bds280Button-component","button":"bds280Button-button","--default":"bds280Button---default","--outline":"bds280Button---outline","--ghost":"bds280Button---ghost","--size_small":"bds280Button---size_small","--size_medium":"bds280Button---size_medium","--size_large":"bds280Button---size_large","--hasPulse":"bds280Button---hasPulse","iconStart":"bds280Button-iconStart","iconEnd":"bds280Button-iconEnd","--iconOnly":"bds280Button---iconOnly"};
+var Button_default = {"component":"bds2110Button-component","button":"bds2110Button-button","--default":"bds2110Button---default","--outline":"bds2110Button---outline","--ghost":"bds2110Button---ghost","--size_small":"bds2110Button---size_small","--size_medium":"bds2110Button---size_medium","--size_large":"bds2110Button---size_large","--hasPulse":"bds2110Button---hasPulse","iconStart":"bds2110Button-iconStart","iconEnd":"bds2110Button-iconEnd","--iconOnly":"bds2110Button---iconOnly"};
 
 // src/components/interaction/Button/Button.tsx
-import { cn as cn23 } from "@boostdev/design-system-foundation";
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { cn as cn25 } from "@boostdev/design-system-foundation";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function Button({
   children,
   className,
@@ -995,7 +1373,7 @@ function Button({
   onClick,
   ...rest
 }) {
-  const classNames = cn23(
+  const classNames = cn25(
     Button_default.button,
     Button_default[`--${variant}`],
     Button_default[`--size_${size}`],
@@ -1014,14 +1392,15 @@ function Button({
     onClick?.(e);
   };
   const content = /* @__PURE__ */ jsxs16(Fragment2, { children: [
-    Boolean(iconStart) && /* @__PURE__ */ jsx23("span", { className: Button_default.iconStart, children: iconStart }),
+    Boolean(iconStart) && /* @__PURE__ */ jsx25("span", { className: Button_default.iconStart, children: iconStart }),
     children,
-    Boolean(iconEnd) && /* @__PURE__ */ jsx23("span", { className: Button_default.iconEnd, children: iconEnd })
+    Boolean(iconEnd) && /* @__PURE__ */ jsx25("span", { className: Button_default.iconEnd, children: iconEnd })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx25(
       "a",
       {
+        ...rest,
         className: classNames,
         href: disabled ? void 0 : href,
         target,
@@ -1029,26 +1408,25 @@ function Button({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : void 0,
         onClick: handleAnchorClick,
-        ...rest,
         children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     "button",
     {
+      ...rest,
       type,
       className: classNames,
       disabled,
       onClick: handleButtonClick,
-      ...rest,
       children: content
     }
   );
 }
 
 // src/components/interaction/Command/Command.tsx
-import { useState as useState5, useEffect, useRef as useRef3, useId as useId6, useMemo } from "react";
+import { useState as useState6, useEffect as useEffect3, useRef as useRef5, useId as useId8, useMemo } from "react";
 
 // src/polyfill-invoker-commands.ts
 var installed = false;
@@ -1090,11 +1468,11 @@ function installInvokerCommandsPolyfill() {
 }
 
 // src/components/interaction/Command/Command.module.css
-var Command_default = {"component":"bds280Command-component","dialog":"bds280Command-dialog","palette":"bds280Command-palette","searchRow":"bds280Command-searchRow","searchIcon":"bds280Command-searchIcon","search":"bds280Command-search","escHint":"bds280Command-escHint","list":"bds280Command-list","groupList":"bds280Command-groupList","group":"bds280Command-group","item":"bds280Command-item","itemActive":"bds280Command-itemActive","itemLabel":"bds280Command-itemLabel","itemDesc":"bds280Command-itemDesc","shortcut":"bds280Command-shortcut","empty":"bds280Command-empty"};
+var Command_default = {"component":"bds2110Command-component","dialog":"bds2110Command-dialog","palette":"bds2110Command-palette","searchRow":"bds2110Command-searchRow","searchIcon":"bds2110Command-searchIcon","search":"bds2110Command-search","escHint":"bds2110Command-escHint","list":"bds2110Command-list","groupList":"bds2110Command-groupList","group":"bds2110Command-group","item":"bds2110Command-item","itemActive":"bds2110Command-itemActive","itemLabel":"bds2110Command-itemLabel","itemDesc":"bds2110Command-itemDesc","shortcut":"bds2110Command-shortcut","empty":"bds2110Command-empty","srOnly":"bds2110Command-srOnly"};
 
 // src/components/interaction/Command/Command.tsx
-import { cn as cn24 } from "@boostdev/design-system-foundation";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { cn as cn26 } from "@boostdev/design-system-foundation";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 installInvokerCommandsPolyfill();
 function Command({
   id: idProp,
@@ -1106,13 +1484,13 @@ function Command({
   className,
   ...rest
 }) {
-  const [query, setQuery] = useState5("");
-  const [activeIndex, setActiveIndex] = useState5(0);
-  const generatedId = useId6();
+  const [query, setQuery] = useState6("");
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const generatedId = useId8();
   const dialogId = idProp ?? generatedId;
-  const dialogRef = useRef3(null);
-  const inputRef = useRef3(null);
-  const listboxId = useId6();
+  const dialogRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const listboxId = useId8();
   const filtered = useMemo(() => {
     const q = query.toLowerCase().trim();
     return q ? items.filter(
@@ -1129,8 +1507,8 @@ function Command({
     });
     return map;
   }, [filtered]);
-  const triggerRef = useRef3(null);
-  useEffect(() => {
+  const triggerRef = useRef5(null);
+  useEffect3(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (isOpen && !dialog.open) {
@@ -1149,10 +1527,10 @@ function Command({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  useEffect(() => {
+  useEffect3(() => {
     setActiveIndex(0);
   }, [query]);
-  useEffect(() => {
+  useEffect3(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCommand = (e) => {
@@ -1186,8 +1564,11 @@ function Command({
       setActiveIndex((i) => Math.max(i - 1, 0));
     } else if (e.key === "Enter") {
       e.preventDefault();
-      filtered[activeIndex]?.onSelect();
-      onClose();
+      const item = filtered[activeIndex];
+      if (item) {
+        item.onSelect();
+        onClose();
+      }
     } else if (e.key === "Escape") {
       onClose();
     }
@@ -1196,28 +1577,29 @@ function Command({
     item.onSelect();
     onClose();
   };
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     "dialog",
     {
       ...rest,
       ref: dialogRef,
       id: dialogId,
-      className: cn24(Command_default.dialog, className),
+      className: cn26(Command_default.dialog, className),
       "aria-label": "Command palette",
       "aria-modal": "true",
       onCancel: handleCancel,
       children: /* @__PURE__ */ jsxs17("div", { className: Command_default.palette, onKeyDown: handleKeyDown, children: [
         /* @__PURE__ */ jsxs17("div", { className: Command_default.searchRow, children: [
           /* @__PURE__ */ jsxs17("svg", { "aria-hidden": "true", className: Command_default.searchIcon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx24("circle", { cx: "11", cy: "11", r: "8" }),
-            /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", d: "M21 21l-4.35-4.35" })
+            /* @__PURE__ */ jsx26("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx26("path", { strokeLinecap: "round", d: "M21 21l-4.35-4.35" })
           ] }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx26(
             "input",
             {
               ref: inputRef,
               type: "search",
               role: "combobox",
+              "aria-label": "Search commands",
               "aria-expanded": filtered.length > 0,
               "aria-controls": listboxId,
               "aria-autocomplete": "list",
@@ -1228,11 +1610,12 @@ function Command({
               onChange: (e) => setQuery(e.target.value)
             }
           ),
-          /* @__PURE__ */ jsx24("kbd", { className: Command_default.escHint, children: "Esc" })
+          /* @__PURE__ */ jsx26("kbd", { className: Command_default.escHint, children: "Esc" })
         ] }),
-        filtered.length > 0 ? /* @__PURE__ */ jsx24("ul", { id: listboxId, role: "listbox", className: Command_default.list, "aria-label": "Commands", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs17("li", { role: "presentation", children: [
-          group && /* @__PURE__ */ jsx24("div", { className: Command_default.group, role: "presentation", children: group }),
-          /* @__PURE__ */ jsx24("ul", { role: "group", "aria-label": group || void 0, className: Command_default.groupList, children: groupItems.map((item) => {
+        /* @__PURE__ */ jsx26("div", { className: Command_default.srOnly, "aria-live": "polite", children: filtered.length === 0 ? `Nothing matches \u201C${query}\u201D` : "" }),
+        filtered.length > 0 ? /* @__PURE__ */ jsx26("ul", { id: listboxId, role: "listbox", className: Command_default.list, "aria-label": "Commands", children: Array.from(groups.entries()).map(([group, groupItems]) => /* @__PURE__ */ jsxs17("li", { role: "presentation", children: [
+          group && /* @__PURE__ */ jsx26("div", { className: Command_default.group, role: "presentation", children: group }),
+          /* @__PURE__ */ jsx26("ul", { role: "group", "aria-label": group || void 0, className: Command_default.groupList, children: groupItems.map((item) => {
             const flatIndex = filtered.indexOf(item);
             const isActive = flatIndex === activeIndex;
             return /* @__PURE__ */ jsxs17(
@@ -1241,19 +1624,19 @@ function Command({
                 id: `cmd-${item.id}`,
                 role: "option",
                 "aria-selected": isActive,
-                className: cn24(Command_default.item, isActive && Command_default.itemActive),
+                className: cn26(Command_default.item, isActive && Command_default.itemActive),
                 onPointerDown: (e) => e.preventDefault(),
                 onClick: () => selectItem(item),
                 children: [
-                  /* @__PURE__ */ jsx24("span", { className: Command_default.itemLabel, children: item.label }),
-                  item.description && /* @__PURE__ */ jsx24("span", { className: Command_default.itemDesc, children: item.description }),
-                  item.shortcut && /* @__PURE__ */ jsx24("kbd", { className: Command_default.shortcut, children: item.shortcut })
+                  /* @__PURE__ */ jsx26("span", { className: Command_default.itemLabel, children: item.label }),
+                  item.description && /* @__PURE__ */ jsx26("span", { className: Command_default.itemDesc, children: item.description }),
+                  item.shortcut && /* @__PURE__ */ jsx26("kbd", { className: Command_default.shortcut, children: item.shortcut })
                 ]
               },
               item.id
             );
           }) })
-        ] }, group)) }) : /* @__PURE__ */ jsxs17("div", { className: Command_default.empty, "aria-live": "polite", children: [
+        ] }, group)) }) : /* @__PURE__ */ jsxs17("div", { className: Command_default.empty, children: [
           "No results for \u201C",
           query,
           "\u201D"
@@ -1264,22 +1647,22 @@ function Command({
 }
 
 // src/components/interaction/Dialog/Dialog.tsx
-import { useEffect as useEffect2, useId as useId7, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useId as useId9, useRef as useRef6 } from "react";
 
 // src/components/interaction/Dialog/Dialog.module.css
-var Dialog_default = {"component":"bds280Dialog-component","dialog":"bds280Dialog-dialog","dialogContent":"bds280Dialog-dialogContent","closeButton":"bds280Dialog-closeButton"};
+var Dialog_default = {"component":"bds2110Dialog-component","dialog":"bds2110Dialog-dialog","dialogContent":"bds2110Dialog-dialogContent","closeButton":"bds2110Dialog-closeButton"};
 
 // src/components/interaction/Dialog/Dialog.tsx
-import { cn as cn25 } from "@boostdev/design-system-foundation";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { cn as cn27 } from "@boostdev/design-system-foundation";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 installInvokerCommandsPolyfill();
 var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose, ...rest }) {
-  const generatedId = useId7();
+  const generatedId = useId9();
   const id = idProp ?? generatedId;
-  const dialogRef = useRef4(null);
-  const triggerRef = useRef4(null);
-  useEffect2(() => {
+  const dialogRef = useRef6(null);
+  const triggerRef = useRef6(null);
+  useEffect4(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (isOpen && !dialog.open) {
@@ -1295,7 +1678,7 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  useEffect2(() => {
+  useEffect4(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCommand = (e) => {
@@ -1317,8 +1700,10 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
     if (e.target === dialogRef.current) onClose?.();
   };
   const handleCancel = (e) => {
-    e.preventDefault();
-    onClose?.();
+    if (onClose) {
+      e.preventDefault();
+      onClose();
+    }
   };
   const handleKeyDown = (e) => {
     if (e.key !== "Tab") return;
@@ -1346,13 +1731,13 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
       ...rest,
       ref: dialogRef,
       id,
-      className: cn25(className, Dialog_default.dialog),
+      className: cn27(className, Dialog_default.dialog),
       "aria-modal": "true",
       onClick: handleBackdropClick,
       onCancel: handleCancel,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27(
           "button",
           {
             type: "button",
@@ -1360,25 +1745,26 @@ function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClo
             commandfor: id,
             command: "close",
             "aria-label": "Close dialog",
-            children: /* @__PURE__ */ jsx25("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx25("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+            children: /* @__PURE__ */ jsx27("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
           }
         ),
-        /* @__PURE__ */ jsx25("div", { className: Dialog_default.dialogContent, children })
+        /* @__PURE__ */ jsx27("div", { className: Dialog_default.dialogContent, children })
       ]
     }
   );
 }
 
 // src/components/interaction/Drawer/Drawer.tsx
-import { useEffect as useEffect3, useId as useId8, useRef as useRef5 } from "react";
+import { useEffect as useEffect5, useId as useId10, useRef as useRef7 } from "react";
 
 // src/components/interaction/Drawer/Drawer.module.css
-var Drawer_default = {"component":"bds280Drawer-component","drawer":"bds280Drawer-drawer","--side_left":"bds280Drawer---side_left","header":"bds280Drawer-header","closeButton":"bds280Drawer-closeButton","body":"bds280Drawer-body"};
+var Drawer_default = {"component":"bds2110Drawer-component","drawer":"bds2110Drawer-drawer","--side_left":"bds2110Drawer---side_left","header":"bds2110Drawer-header","closeButton":"bds2110Drawer-closeButton","body":"bds2110Drawer-body"};
 
 // src/components/interaction/Drawer/Drawer.tsx
-import { cn as cn26 } from "@boostdev/design-system-foundation";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { cn as cn28 } from "@boostdev/design-system-foundation";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 installInvokerCommandsPolyfill();
+var FOCUSABLE_SELECTOR2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 function Drawer({
   id: idProp,
   isOpen,
@@ -1390,11 +1776,13 @@ function Drawer({
   className,
   ...rest
 }) {
-  const generatedId = useId8();
+  const generatedId = useId10();
   const id = idProp ?? generatedId;
-  const dialogRef = useRef5(null);
-  const triggerRef = useRef5(null);
-  useEffect3(() => {
+  const titleId = useId10();
+  const hasCustomLabel = "aria-label" in rest || "aria-labelledby" in rest;
+  const dialogRef = useRef7(null);
+  const triggerRef = useRef7(null);
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (isOpen && !dialog.open) {
@@ -1410,7 +1798,7 @@ function Drawer({
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  useEffect3(() => {
+  useEffect5(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     const handleCommand = (e) => {
@@ -1428,31 +1816,49 @@ function Drawer({
     dialog.addEventListener("command", handleCommand);
     return () => dialog.removeEventListener("command", handleCommand);
   }, [onOpen, onClose]);
-  const handleClick = (e) => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    const rect = dialog.getBoundingClientRect();
-    const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
-    if (outside) onClose();
+  const handleBackdropClick = (e) => {
+    if (e.target === dialogRef.current) onClose();
   };
   const handleCancel = (e) => {
     e.preventDefault();
     onClose();
   };
+  const handleKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR2));
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs19(
     "dialog",
     {
       ...rest,
       ref: dialogRef,
       id,
-      className: cn26(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
+      className: cn28(Drawer_default.drawer, Drawer_default[`--side_${side}`], className),
       "aria-modal": "true",
-      onClick: handleClick,
+      "aria-labelledby": hasCustomLabel ? rest["aria-labelledby"] : title ? titleId : void 0,
+      onClick: handleBackdropClick,
       onCancel: handleCancel,
+      onKeyDown: handleKeyDown,
       children: [
         /* @__PURE__ */ jsxs19("div", { className: Drawer_default.header, children: [
-          !!title && title,
-          /* @__PURE__ */ jsx26(
+          !!title && /* @__PURE__ */ jsx28("div", { id: titleId, children: title }),
+          /* @__PURE__ */ jsx28(
             "button",
             {
               type: "button",
@@ -1460,11 +1866,11 @@ function Drawer({
               commandfor: id,
               command: "close",
               "aria-label": "Close drawer",
-              children: /* @__PURE__ */ jsx26("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx26("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
+              children: /* @__PURE__ */ jsx28("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx26("div", { className: Drawer_default.body, children })
+        /* @__PURE__ */ jsx28("div", { className: Drawer_default.body, children })
       ]
     }
   );
@@ -1474,18 +1880,18 @@ function Drawer({
 import {
   cloneElement as cloneElement2,
   isValidElement as isValidElement2,
-  useEffect as useEffect4,
-  useId as useId9,
-  useRef as useRef6,
-  useState as useState6
+  useEffect as useEffect6,
+  useId as useId11,
+  useRef as useRef8,
+  useState as useState7
 } from "react";
 
 // src/components/interaction/DropdownMenu/DropdownMenu.module.css
-var DropdownMenu_default = {"component":"bds280DropdownMenu-component","wrapper":"bds280DropdownMenu-wrapper","menu":"bds280DropdownMenu-menu","--placement_bottom-start":"bds280DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds280DropdownMenu---placement_bottom-end","separator":"bds280DropdownMenu-separator","item":"bds280DropdownMenu-item","icon":"bds280DropdownMenu-icon"};
+var DropdownMenu_default = {"component":"bds2110DropdownMenu-component","wrapper":"bds2110DropdownMenu-wrapper","menu":"bds2110DropdownMenu-menu","--placement_bottom-start":"bds2110DropdownMenu---placement_bottom-start","--placement_bottom-end":"bds2110DropdownMenu---placement_bottom-end","separator":"bds2110DropdownMenu-separator","item":"bds2110DropdownMenu-item","icon":"bds2110DropdownMenu-icon"};
 
 // src/components/interaction/DropdownMenu/DropdownMenu.tsx
-import { cn as cn27 } from "@boostdev/design-system-foundation";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { cn as cn29 } from "@boostdev/design-system-foundation";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function DropdownMenu({
   trigger,
   items,
@@ -1493,26 +1899,36 @@ function DropdownMenu({
   className,
   ...rest
 }) {
-  const [isOpen, setIsOpen] = useState6(false);
-  const containerRef = useRef6(null);
-  const menuId = useId9();
-  const itemRefs = useRef6([]);
+  const [isOpen, setIsOpen] = useState7(false);
+  const containerRef = useRef8(null);
+  const menuId = useId11();
+  const itemRefs = useRef8([]);
+  const triggerRef = useRef8(null);
   const open = () => {
+    triggerRef.current = document.activeElement;
     setIsOpen(true);
   };
-  const close = () => setIsOpen(false);
-  useEffect4(() => {
+  const close = (restoreFocus = false) => {
+    setIsOpen(false);
+    if (restoreFocus) {
+      triggerRef.current?.focus();
+    }
+  };
+  useEffect6(() => {
     if (isOpen) {
-      itemRefs.current[0]?.focus();
+      const firstEnabledIndex = items.findIndex((item) => !item.disabled);
+      if (firstEnabledIndex !== -1) {
+        itemRefs.current[firstEnabledIndex]?.focus();
+      }
     }
   }, [isOpen]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     const handlePointerDown = (e) => {
       if (!containerRef.current?.contains(e.target)) close();
     };
     const handleKeyDown = (e) => {
-      if (e.key === "Escape") close();
+      if (e.key === "Escape") close(true);
     };
     document.addEventListener("pointerdown", handlePointerDown);
     document.addEventListener("keydown", handleKeyDown);
@@ -1554,16 +1970,16 @@ function DropdownMenu({
       if (typeof existingOnClick === "function") existingOnClick(e);
     }
   }) : trigger;
-  return /* @__PURE__ */ jsxs20("div", { ...rest, ref: containerRef, className: cn27(DropdownMenu_default.wrapper, className), children: [
+  return /* @__PURE__ */ jsxs20("div", { ...rest, ref: containerRef, className: cn29(DropdownMenu_default.wrapper, className), children: [
     triggerEl,
-    isOpen && /* @__PURE__ */ jsx27(
+    isOpen && /* @__PURE__ */ jsx29(
       "ul",
       {
         id: menuId,
         role: "menu",
-        className: cn27(DropdownMenu_default.menu, DropdownMenu_default[`--placement_${placement}`]),
+        className: cn29(DropdownMenu_default.menu, DropdownMenu_default[`--placement_${placement}`]),
         children: items.map((item, index) => /* @__PURE__ */ jsxs20("li", { role: "presentation", children: [
-          item.separator && /* @__PURE__ */ jsx27("hr", { className: DropdownMenu_default.separator, role: "separator" }),
+          item.separator && /* @__PURE__ */ jsx29("hr", { className: DropdownMenu_default.separator, role: "separator" }),
           /* @__PURE__ */ jsxs20(
             "button",
             {
@@ -1576,11 +1992,11 @@ function DropdownMenu({
               className: DropdownMenu_default.item,
               onClick: () => {
                 item.onClick?.();
-                close();
+                close(true);
               },
               onKeyDown: (e) => handleItemKeyDown(e, index),
               children: [
-                item.icon && /* @__PURE__ */ jsx27("span", { className: DropdownMenu_default.icon, "aria-hidden": "true", children: item.icon }),
+                item.icon && /* @__PURE__ */ jsx29("span", { className: DropdownMenu_default.icon, "aria-hidden": "true", children: item.icon }),
                 item.label
               ]
             }
@@ -1595,18 +2011,18 @@ function DropdownMenu({
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement3,
-  useEffect as useEffect5,
-  useId as useId10,
-  useRef as useRef7,
-  useState as useState7
+  useEffect as useEffect7,
+  useId as useId12,
+  useRef as useRef9,
+  useState as useState8
 } from "react";
 
 // src/components/interaction/Popover/Popover.module.css
-var Popover_default = {"component":"bds280Popover-component","wrapper":"bds280Popover-wrapper","panel":"bds280Popover-panel","g":"bds280Popover-g"};
+var Popover_default = {"component":"bds2110Popover-component","wrapper":"bds2110Popover-wrapper","panel":"bds2110Popover-panel","g":"bds2110Popover-g"};
 
 // src/components/interaction/Popover/Popover.tsx
-import { cn as cn28 } from "@boostdev/design-system-foundation";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { cn as cn30 } from "@boostdev/design-system-foundation";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 installInvokerCommandsPolyfill();
 if (typeof window !== "undefined" && !(typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("anchor-name: --a"))) {
   import("@oddbird/css-anchor-positioning").catch(() => {
@@ -1620,13 +2036,13 @@ function Popover({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const [isOpen, setIsOpen] = useState7(false);
-  const containerRef = useRef7(null);
-  const panelRef = useRef7(null);
-  const rawId = useId10();
+  const [isOpen, setIsOpen] = useState8(false);
+  const containerRef = useRef9(null);
+  const panelRef = useRef9(null);
+  const rawId = useId12();
   const anchorName = `--popover-${rawId.replace(/\W/g, "") || "a"}`;
   const panelId = rawId;
-  useEffect5(() => {
+  useEffect7(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const handleToggle = (e) => {
@@ -1635,7 +2051,7 @@ function Popover({
     panel.addEventListener("toggle", handleToggle);
     return () => panel.removeEventListener("toggle", handleToggle);
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!isOpen) return;
     const handleScroll = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -1655,7 +2071,6 @@ function Popover({
   const trigger = isValidElement3(children) ? cloneElement3(children, {
     "aria-expanded": isOpen,
     "aria-controls": panelId,
-    "aria-haspopup": true,
     commandfor: panelId,
     command: "toggle-popover",
     style: {
@@ -1663,13 +2078,25 @@ function Popover({
       anchorName
     },
     // Forward any existing onClick on the child (for custom side-effects).
-    // Do NOT add our own toggle here — commandfor/command handles it to
-    // avoid a double-toggle when both onClick and invoker fire.
-    onClick: children.props.onClick
+    // commandfor/command handles the toggle when the trigger renders a
+    // native <button> — don't also toggle there (avoids a double-toggle).
+    // Invoker commands are spec-limited to <button>, so when the actual
+    // rendered element isn't one (e.g. a plain <a> or a custom non-button
+    // Link), fall back to an explicit togglePopover() call instead of
+    // silently going dead. Checked on the DOM node (event.currentTarget),
+    // not the React element type, so wrapper components that forward
+    // props onto an inner <button> (e.g. this library's Button) still
+    // take the native path.
+    onClick: (event) => {
+      children.props.onClick?.(event);
+      if (!(event.currentTarget instanceof HTMLButtonElement)) {
+        panelRef.current?.togglePopover();
+      }
+    }
   }) : children;
-  return /* @__PURE__ */ jsxs21("span", { ...rest, ref: containerRef, className: cn28(Popover_default.wrapper, className), children: [
+  return /* @__PURE__ */ jsxs21("span", { ...rest, ref: containerRef, className: cn30(Popover_default.wrapper, className), children: [
     trigger,
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx30(
       "div",
       {
         ref: panelRef,
@@ -1687,27 +2114,27 @@ function Popover({
 }
 
 // src/components/interaction/Rating/Rating.module.css
-var Rating_default = {"component":"bds280Rating-component","rating":"bds280Rating-rating","star":"bds280Rating-star","--filled":"bds280Rating---filled"};
+var Rating_default = {"component":"bds2110Rating-component","rating":"bds2110Rating-rating","star":"bds2110Rating-star","--filled":"bds2110Rating---filled"};
 
 // src/components/interaction/Rating/Rating.tsx
-import { cn as cn29 } from "@boostdev/design-system-foundation";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { cn as cn31 } from "@boostdev/design-system-foundation";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Rating({ value, max = 5, className, ...rest }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ...rest,
-      className: cn29(Rating_default.rating, className),
+      className: cn31(Rating_default.rating, className),
       role: "img",
       "aria-label": `${value} out of ${max} stars`,
-      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx29(
+      children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx31(
         "svg",
         {
           "aria-hidden": "true",
-          className: cn29(Rating_default.star, i < value && Rating_default["--filled"]),
+          className: cn31(Rating_default.star, i < value && Rating_default["--filled"]),
           fill: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx29("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+          children: /* @__PURE__ */ jsx31("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
         },
         i
       ))
@@ -1716,14 +2143,14 @@ function Rating({ value, max = 5, className, ...rest }) {
 }
 
 // src/components/interaction/Toast/Toast.tsx
-import { useState as useState8, useEffect as useEffect6, createContext, useContext, useCallback, useMemo as useMemo2, useRef as useRef8 } from "react";
+import { useState as useState9, useEffect as useEffect8, createContext, useContext, useCallback as useCallback3, useMemo as useMemo2, useRef as useRef10 } from "react";
 
 // src/components/interaction/Toast/Toast.module.css
-var Toast_default = {"component":"bds280Toast-component","toastContainer":"bds280Toast-toastContainer","toast":"bds280Toast-toast","--variant_success":"bds280Toast---variant_success","--variant_warning":"bds280Toast---variant_warning","--variant_info":"bds280Toast---variant_info","--variant_error":"bds280Toast---variant_error","message":"bds280Toast-message","closeButton":"bds280Toast-closeButton"};
+var Toast_default = {"component":"bds2110Toast-component","toastContainer":"bds2110Toast-toastContainer","toast":"bds2110Toast-toast","md":"bds2110Toast-md","--variant_success":"bds2110Toast---variant_success","--variant_warning":"bds2110Toast---variant_warning","--variant_info":"bds2110Toast---variant_info","--variant_error":"bds2110Toast---variant_error","message":"bds2110Toast-message","closeButton":"bds2110Toast-closeButton"};
 
 // src/components/interaction/Toast/Toast.tsx
-import { cn as cn30 } from "@boostdev/design-system-foundation";
-import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+import { cn as cn32 } from "@boostdev/design-system-foundation";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var _ToastContext;
 function getToastContext() {
   _ToastContext ??= createContext(void 0);
@@ -1731,20 +2158,23 @@ function getToastContext() {
 }
 function ToastProvider({ children }) {
   const ToastContext = getToastContext();
-  const [toasts, setToasts] = useState8([]);
-  const containerRef = useRef8(null);
-  const showToast = useCallback((message, variant) => {
+  const [toasts, setToasts] = useState9([]);
+  const containerRef = useRef10(null);
+  const showToast = useCallback3((message, variant) => {
     const id = Math.random().toString(36).substring(2, 9);
     setToasts((prev) => [...prev, { id, message, variant }]);
   }, []);
-  const removeToast = useCallback((id) => {
+  const removeToast = useCallback3((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
-  useEffect6(() => {
+  useEffect8(() => {
     const container = containerRef.current;
     if (!container) return;
     if (toasts.length > 0) {
-      container.showPopover?.();
+      try {
+        container.showPopover?.();
+      } catch {
+      }
     } else {
       try {
         container.hidePopover?.();
@@ -1755,7 +2185,7 @@ function ToastProvider({ children }) {
   const value = useMemo2(() => ({ showToast }), [showToast]);
   return /* @__PURE__ */ jsxs22(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx32(
       "div",
       {
         ref: containerRef,
@@ -1763,11 +2193,11 @@ function ToastProvider({ children }) {
         role: "region",
         "aria-label": "Notifications",
         className: Toast_default.toastContainer,
-        children: toasts.map((toast) => /* @__PURE__ */ jsx30(
+        children: toasts.map((toast) => /* @__PURE__ */ jsx32(
           ToastItem,
           {
             toast,
-            onRemove: () => removeToast(toast.id)
+            onRemove: removeToast
           },
           toast.id
         ))
@@ -1776,13 +2206,13 @@ function ToastProvider({ children }) {
   ] });
 }
 function ToastItem({ toast, onRemove }) {
-  useEffect6(() => {
-    const timer = setTimeout(onRemove, 5e3);
+  useEffect8(() => {
+    const timer = setTimeout(() => onRemove(toast.id), 5e3);
     return () => clearTimeout(timer);
-  }, [onRemove]);
-  return /* @__PURE__ */ jsxs22("div", { className: cn30(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", "aria-live": "polite", "aria-atomic": "true", children: [
-    /* @__PURE__ */ jsx30("span", { className: Toast_default.message, children: toast.message }),
-    /* @__PURE__ */ jsx30("button", { type: "button", className: Toast_default.closeButton, onClick: onRemove, "aria-label": "Dismiss", children: /* @__PURE__ */ jsx30("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx30("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
+  }, [onRemove, toast.id]);
+  return /* @__PURE__ */ jsxs22("div", { className: cn32(Toast_default.toast, Toast_default[`--variant_${toast.variant}`]), role: "status", "aria-live": "polite", "aria-atomic": "true", children: [
+    /* @__PURE__ */ jsx32("span", { className: Toast_default.message, children: toast.message }),
+    /* @__PURE__ */ jsx32("button", { type: "button", className: Toast_default.closeButton, onClick: () => onRemove(toast.id), "aria-label": "Dismiss", children: /* @__PURE__ */ jsx32("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 6L6 18M6 6l12 12" }) }) })
   ] });
 }
 function useToast() {
@@ -1794,82 +2224,82 @@ function useToast() {
 }
 
 // src/components/interaction/form/Checkbox/Checkbox.tsx
-import { useId as useId11 } from "react";
+import { useId as useId13 } from "react";
 
 // src/components/interaction/form/Checkbox/Checkbox.module.css
-var Checkbox_default = {"component":"bds280Checkbox-component","checkboxGroup":"bds280Checkbox-checkboxGroup","inputWrapper":"bds280Checkbox-inputWrapper","checkbox":"bds280Checkbox-checkbox","checkboxError":"bds280Checkbox-checkboxError"};
+var Checkbox_default = {"component":"bds2110Checkbox-component","checkboxGroup":"bds2110Checkbox-checkboxGroup","inputWrapper":"bds2110Checkbox-inputWrapper","checkbox":"bds2110Checkbox-checkbox","checkboxError":"bds2110Checkbox-checkboxError"};
 
 // src/components/interaction/form/atoms/Message.module.css
-var Message_default = {"component":"bds280Message-component","error":"bds280Message-error","hint":"bds280Message-hint"};
+var Message_default = {"component":"bds2110Message-component","error":"bds2110Message-error","hint":"bds2110Message-hint"};
 
 // src/components/interaction/form/atoms/Message.tsx
-import { cn as cn31 } from "@boostdev/design-system-foundation";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { cn as cn33 } from "@boostdev/design-system-foundation";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Message = ({ message, type, inputId, className }) => {
   if (!message) return null;
-  return /* @__PURE__ */ jsx31("p", { id: inputId + type, className: cn31(Message_default[type], className), children: message });
+  return /* @__PURE__ */ jsx33("p", { id: inputId + type, role: type === "error" ? "alert" : void 0, className: cn33(Message_default[type], className), children: message });
 };
 
 // src/components/interaction/form/atoms/Label.module.css
-var Label_default = {"component":"bds280Label-component","label":"bds280Label-label"};
+var Label_default = {"component":"bds2110Label-component","label":"bds2110Label-label"};
 
 // src/components/interaction/form/atoms/Label.tsx
-import { cn as cn32 } from "@boostdev/design-system-foundation";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { cn as cn34 } from "@boostdev/design-system-foundation";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Label = ({ label, id, className }) => {
-  return /* @__PURE__ */ jsx32("label", { htmlFor: id, className: cn32(Label_default.label, className), children: label });
+  return /* @__PURE__ */ jsx34("label", { htmlFor: id, className: cn34(Label_default.label, className), children: label });
 };
 
 // src/components/interaction/form/Checkbox/Checkbox.tsx
-import { cn as cn34 } from "@boostdev/design-system-foundation";
+import { cn as cn36 } from "@boostdev/design-system-foundation";
 
 // src/components/interaction/form/atoms/InputContainer.module.css
-var InputContainer_default = {"component":"bds280InputContainer-component","container":"bds280InputContainer-container"};
+var InputContainer_default = {"component":"bds2110InputContainer-component","container":"bds2110InputContainer-container"};
 
 // src/components/interaction/form/atoms/InputContainer.tsx
-import { cn as cn33 } from "@boostdev/design-system-foundation";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { cn as cn35 } from "@boostdev/design-system-foundation";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var InputContainer = ({ children, className, ...rest }) => {
-  return /* @__PURE__ */ jsx33("div", { ...rest, className: cn33(InputContainer_default.container, className), children });
+  return /* @__PURE__ */ jsx35("div", { ...rest, className: cn35(InputContainer_default.container, className), children });
 };
 
 // src/components/interaction/form/Checkbox/Checkbox.tsx
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
 function Checkbox({ label, name, error, hint, className, ...props }) {
-  const id = name + useId11();
+  const id = name + useId13();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs23(InputContainer, { className: cn34(Checkbox_default.checkboxGroup, className), children: [
+  return /* @__PURE__ */ jsxs23(InputContainer, { className: cn36(Checkbox_default.checkboxGroup, className), children: [
     /* @__PURE__ */ jsxs23("div", { className: Checkbox_default.inputWrapper, children: [
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx36(
         "input",
         {
+          ...props,
           "aria-describedby": describedBy,
           "aria-invalid": !!error,
           type: "checkbox",
           id,
           name,
-          className: cn34(Checkbox_default.checkbox, error && Checkbox_default.checkboxError),
-          ...props
+          className: cn36(Checkbox_default.checkbox, error && Checkbox_default.checkboxError)
         }
       ),
-      /* @__PURE__ */ jsx34(Label, { id, label })
+      /* @__PURE__ */ jsx36(Label, { id, label })
     ] }),
-    /* @__PURE__ */ jsx34(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx34(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx36(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx36(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
-import { useId as useId12 } from "react";
+import { useId as useId14 } from "react";
 
 // src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css
-var CheckboxGroup_default = {"component":"bds280CheckboxGroup-component","group":"bds280CheckboxGroup-group","legend":"bds280CheckboxGroup-legend","required":"bds280CheckboxGroup-required","items":"bds280CheckboxGroup-items"};
+var CheckboxGroup_default = {"component":"bds2110CheckboxGroup-component","group":"bds2110CheckboxGroup-group","legend":"bds2110CheckboxGroup-legend","required":"bds2110CheckboxGroup-required","requiredLabel":"bds2110CheckboxGroup-requiredLabel","items":"bds2110CheckboxGroup-items"};
 
 // src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
-import { cn as cn35 } from "@boostdev/design-system-foundation";
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { cn as cn37 } from "@boostdev/design-system-foundation";
+import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function CheckboxGroup({
   legend,
   children,
@@ -1879,7 +2309,7 @@ function CheckboxGroup({
   className,
   ...rest
 }) {
-  const id = useId12();
+  const id = useId14();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
@@ -1887,17 +2317,20 @@ function CheckboxGroup({
     "fieldset",
     {
       ...rest,
-      className: cn35(CheckboxGroup_default.group, className),
-      "aria-required": required || void 0,
+      className: cn37(CheckboxGroup_default.group, className),
       "aria-describedby": describedBy,
       children: [
         /* @__PURE__ */ jsxs24("legend", { className: CheckboxGroup_default.legend, children: [
           legend,
-          required && /* @__PURE__ */ jsx35("span", { className: CheckboxGroup_default.required, "aria-hidden": "true", children: " *" })
+          required && /* @__PURE__ */ jsxs24(Fragment3, { children: [
+            /* @__PURE__ */ jsx37("span", { className: CheckboxGroup_default.required, "aria-hidden": "true", children: " *" }),
+            " ",
+            /* @__PURE__ */ jsx37("span", { className: CheckboxGroup_default.requiredLabel, children: "(required)" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx35("div", { className: CheckboxGroup_default.items, children }),
-        /* @__PURE__ */ jsx35(Message, { inputId: id, type: "error", message: error }),
-        /* @__PURE__ */ jsx35(Message, { inputId: id, type: "hint", message: hint })
+        /* @__PURE__ */ jsx37("div", { className: CheckboxGroup_default.items, children }),
+        /* @__PURE__ */ jsx37(Message, { inputId: id, type: "error", message: error }),
+        /* @__PURE__ */ jsx37(Message, { inputId: id, type: "hint", message: hint })
       ]
     }
   );
@@ -1905,19 +2338,19 @@ function CheckboxGroup({
 
 // src/components/interaction/form/Combobox/Combobox.tsx
 import {
-  useEffect as useEffect7,
-  useId as useId13,
-  useRef as useRef9,
-  useState as useState9,
+  useEffect as useEffect9,
+  useId as useId15,
+  useRef as useRef11,
+  useState as useState10,
   useMemo as useMemo3
 } from "react";
 
 // src/components/interaction/form/Combobox/Combobox.module.css
-var Combobox_default = {"component":"bds280Combobox-component","formGroup":"bds280Combobox-formGroup","inputWrapper":"bds280Combobox-inputWrapper","input":"bds280Combobox-input","inputError":"bds280Combobox-inputError","chevron":"bds280Combobox-chevron","listbox":"bds280Combobox-listbox","option":"bds280Combobox-option","--highlighted":"bds280Combobox---highlighted","--selected":"bds280Combobox---selected","--disabled":"bds280Combobox---disabled"};
+var Combobox_default = {"component":"bds2110Combobox-component","formGroup":"bds2110Combobox-formGroup","inputWrapper":"bds2110Combobox-inputWrapper","input":"bds2110Combobox-input","inputError":"bds2110Combobox-inputError","chevron":"bds2110Combobox-chevron","listbox":"bds2110Combobox-listbox","option":"bds2110Combobox-option","--highlighted":"bds2110Combobox---highlighted","--selected":"bds2110Combobox---selected","--disabled":"bds2110Combobox---disabled"};
 
 // src/components/interaction/form/Combobox/Combobox.tsx
-import { cn as cn36 } from "@boostdev/design-system-foundation";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { cn as cn38 } from "@boostdev/design-system-foundation";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function Combobox({
   label,
   name,
@@ -1931,25 +2364,25 @@ function Combobox({
   className,
   ...rest
 }) {
-  const id = name + useId13();
+  const id = name + useId15();
   const listboxId = id + "listbox";
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
   const selectedOption = useMemo3(() => options.find((o) => o.value === value), [options, value]);
-  const [inputValue, setInputValue] = useState9(selectedOption?.label ?? "");
-  useEffect7(() => {
+  const [inputValue, setInputValue] = useState10(selectedOption?.label ?? "");
+  useEffect9(() => {
     setInputValue(selectedOption?.label ?? "");
   }, [selectedOption]);
-  const [isOpen, setIsOpen] = useState9(false);
-  const [highlightedIndex, setHighlightedIndex] = useState9(-1);
-  const containerRef = useRef9(null);
-  const inputRef = useRef9(null);
+  const [isOpen, setIsOpen] = useState10(false);
+  const [highlightedIndex, setHighlightedIndex] = useState10(-1);
+  const containerRef = useRef11(null);
+  const inputRef = useRef11(null);
   const filtered = options.filter(
     (o) => o.label.toLowerCase().includes(inputValue.toLowerCase())
   );
   const getOptionId = (index) => `${id}-option-${index}`;
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const handlePointerDown = (e) => {
       if (!containerRef.current?.contains(e.target)) setIsOpen(false);
@@ -1976,18 +2409,31 @@ function Combobox({
         setIsOpen(true);
         return;
       }
+      if (enabledIndexes.length === 0) {
+        setHighlightedIndex(-1);
+        return;
+      }
       const pos = enabledIndexes.indexOf(highlightedIndex);
-      setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length] ?? 0);
+      setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length]);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      if (enabledIndexes.length === 0) {
+        setHighlightedIndex(-1);
+        return;
+      }
       const pos = enabledIndexes.indexOf(highlightedIndex);
       setHighlightedIndex(
-        enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length] ?? 0
+        enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length]
       );
     } else if (e.key === "Enter") {
       e.preventDefault();
-      if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
-        selectOption(filtered[highlightedIndex]);
+      const option = filtered[highlightedIndex];
+      if (highlightedIndex >= 0 && option && !option.disabled) {
+        selectOption(option);
       }
     } else if (e.key === "Escape") {
       setIsOpen(false);
@@ -1996,10 +2442,10 @@ function Combobox({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs25(InputContainer, { ...rest, className: cn36(Combobox_default.formGroup, className), children: [
-    /* @__PURE__ */ jsx36(Label, { id, label }),
+  return /* @__PURE__ */ jsxs25(InputContainer, { ...rest, className: cn38(Combobox_default.formGroup, className), children: [
+    /* @__PURE__ */ jsx38(Label, { id, label }),
     /* @__PURE__ */ jsxs25("div", { ref: containerRef, className: Combobox_default.inputWrapper, children: [
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx38(
         "input",
         {
           ref: inputRef,
@@ -2011,34 +2457,35 @@ function Combobox({
           "aria-haspopup": "listbox",
           "aria-autocomplete": "list",
           "aria-controls": listboxId,
-          "aria-activedescendant": highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
+          "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
           "aria-invalid": !!error,
           "aria-describedby": describedBy,
           autoComplete: "off",
           placeholder,
           value: inputValue,
           disabled,
-          className: cn36(Combobox_default.input, error ? Combobox_default.inputError : void 0),
+          className: cn38(Combobox_default.input, error ? Combobox_default.inputError : void 0),
           onChange: handleInputChange,
           onKeyDown: handleKeyDown,
           onFocus: () => setIsOpen(true)
         }
       ),
-      /* @__PURE__ */ jsx36("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx36("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx36("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
-      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx38("span", { className: Combobox_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) }),
+      isOpen && filtered.length > 0 && /* @__PURE__ */ jsx38(
         "ul",
         {
           id: listboxId,
           role: "listbox",
+          "aria-label": typeof label === "string" ? label : void 0,
           className: Combobox_default.listbox,
-          children: filtered.map((option, index) => /* @__PURE__ */ jsx36(
+          children: filtered.map((option, index) => /* @__PURE__ */ jsx38(
             "li",
             {
               id: getOptionId(index),
               role: "option",
               "aria-selected": option.value === value,
               "aria-disabled": option.disabled,
-              className: cn36(
+              className: cn38(
                 Combobox_default.option,
                 index === highlightedIndex ? Combobox_default["--highlighted"] : void 0,
                 option.value === value ? Combobox_default["--selected"] : void 0,
@@ -2055,20 +2502,26 @@ function Combobox({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx36(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx36(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx38(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx38(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/FieldGroup/FieldGroup.tsx
-import { Children } from "react";
-import { cn as cn37 } from "@boostdev/design-system-foundation";
+import {
+  Children,
+  useEffect as useEffect10,
+  useRef as useRef12,
+  useState as useState11
+} from "react";
+import { cn as cn39 } from "@boostdev/design-system-foundation";
 
 // src/components/interaction/form/FieldGroup/FieldGroup.module.css
-var FieldGroup_default = {"component":"bds280FieldGroup-component","fieldGroup":"bds280FieldGroup-fieldGroup","legend":"bds280FieldGroup-legend","fields":"bds280FieldGroup-fields","--variant_horizontal":"bds280FieldGroup---variant_horizontal"};
+var FieldGroup_default = {"component":"bds2110FieldGroup-component","fieldGroup":"bds2110FieldGroup-fieldGroup","legend":"bds2110FieldGroup-legend","fields":"bds2110FieldGroup-fields","--variant_horizontal":"bds2110FieldGroup---variant_horizontal","probe":"bds2110FieldGroup-probe","tsx":"bds2110FieldGroup-tsx","probeContainer":"bds2110FieldGroup-probeContainer"};
 
 // src/components/interaction/form/FieldGroup/FieldGroup.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+var getInlineSize = (entry) => entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
 function FieldGroup({
   variant = "horizontal",
   legend,
@@ -2077,34 +2530,61 @@ function FieldGroup({
   style,
   ...rest
 }) {
-  const fieldCount = Children.count(children);
+  const fieldCount = Children.toArray(children).length;
   const styleWithCount = {
     ...style,
     "--fieldGroup_field-count": fieldCount
   };
+  const fieldsetRef = useRef12(null);
+  const probeRef = useRef12(null);
+  const [isCollapsed, setIsCollapsed] = useState11(false);
+  useEffect10(() => {
+    const fieldsetEl = fieldsetRef.current;
+    const probeEl = probeRef.current;
+    if (variant !== "horizontal" || !fieldsetEl || !probeEl || typeof ResizeObserver === "undefined") {
+      setIsCollapsed(false);
+      return;
+    }
+    let fieldsetSize = 0;
+    let thresholdSize = 0;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const size = getInlineSize(entry);
+        if (entry.target === fieldsetEl) fieldsetSize = size;
+        else if (entry.target === probeEl) thresholdSize = size;
+      }
+      setIsCollapsed(fieldsetSize < thresholdSize);
+    });
+    observer.observe(fieldsetEl);
+    observer.observe(probeEl);
+    return () => observer.disconnect();
+  }, [variant]);
   return /* @__PURE__ */ jsxs26(
     "fieldset",
     {
       ...rest,
+      ref: fieldsetRef,
       style: styleWithCount,
-      className: cn37(FieldGroup_default.fieldGroup, FieldGroup_default[`--variant_${variant}`], className),
+      className: cn39(FieldGroup_default.fieldGroup, FieldGroup_default[`--variant_${variant}`], className),
+      "data-collapsed": variant === "horizontal" && isCollapsed ? "true" : void 0,
       children: [
-        legend !== void 0 && /* @__PURE__ */ jsx37("legend", { className: FieldGroup_default.legend, children: legend }),
-        /* @__PURE__ */ jsx37("div", { className: FieldGroup_default.fields, children })
+        legend !== void 0 && /* @__PURE__ */ jsx39("legend", { className: FieldGroup_default.legend, children: legend }),
+        /* @__PURE__ */ jsx39("div", { className: FieldGroup_default.fields, children }),
+        /* @__PURE__ */ jsx39("div", { className: FieldGroup_default.probeContainer, children: /* @__PURE__ */ jsx39("div", { ref: probeRef, className: FieldGroup_default.probe }) })
       ]
     }
   );
 }
 
 // src/components/interaction/form/FileInput/FileInput.tsx
-import { useId as useId14, useRef as useRef10, useState as useState10 } from "react";
+import { useId as useId16, useRef as useRef13, useState as useState12 } from "react";
 
 // src/components/interaction/form/FileInput/FileInput.module.css
-var FileInput_default = {"component":"bds280FileInput-component","formGroup":"bds280FileInput-formGroup","fieldLabel":"bds280FileInput-fieldLabel","dropZone":"bds280FileInput-dropZone","isDragging":"bds280FileInput-isDragging","hasError":"bds280FileInput-hasError","isDisabled":"bds280FileInput-isDisabled","icon":"bds280FileInput-icon","prompt":"bds280FileInput-prompt","acceptHint":"bds280FileInput-acceptHint","hiddenInput":"bds280FileInput-hiddenInput"};
+var FileInput_default = {"component":"bds2110FileInput-component","formGroup":"bds2110FileInput-formGroup","fieldLabel":"bds2110FileInput-fieldLabel","dropZone":"bds2110FileInput-dropZone","isDragging":"bds2110FileInput-isDragging","hasError":"bds2110FileInput-hasError","isDisabled":"bds2110FileInput-isDisabled","icon":"bds2110FileInput-icon","prompt":"bds2110FileInput-prompt","acceptHint":"bds2110FileInput-acceptHint","hiddenInput":"bds2110FileInput-hiddenInput"};
 
 // src/components/interaction/form/FileInput/FileInput.tsx
-import { cn as cn38 } from "@boostdev/design-system-foundation";
-import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { cn as cn40 } from "@boostdev/design-system-foundation";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 function FileInput({
   label,
   name,
@@ -2118,13 +2598,13 @@ function FileInput({
   className,
   ...rest
 }) {
-  const uid = name + useId14();
+  const uid = name + useId16();
   const hintId = uid + "hint";
   const errorId = uid + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  const inputRef = useRef10(null);
-  const [isDragging, setIsDragging] = useState10(false);
-  const [fileNames, setFileNames] = useState10([]);
+  const inputRef = useRef13(null);
+  const [isDragging, setIsDragging] = useState12(false);
+  const [fileNames, setFileNames] = useState12([]);
   const isFileAccepted = (file) => {
     if (!accept) return true;
     return accept.split(",").some((token) => {
@@ -2145,7 +2625,9 @@ function FileInput({
     setIsDragging(false);
     if (disabled) return;
     const dt = new DataTransfer();
-    Array.from(e.dataTransfer.files).filter(isFileAccepted).forEach((f) => dt.items.add(f));
+    const accepted = Array.from(e.dataTransfer.files).filter(isFileAccepted);
+    const filesToAdd = multiple ? accepted : accepted.slice(0, 1);
+    filesToAdd.forEach((f) => dt.items.add(f));
     if (inputRef.current) inputRef.current.files = dt.files;
     handleFiles(dt.files.length > 0 ? dt.files : null);
   };
@@ -2153,25 +2635,27 @@ function FileInput({
     e.preventDefault();
     if (!disabled) setIsDragging(true);
   };
-  const handleDragLeave = () => setIsDragging(false);
-  return /* @__PURE__ */ jsxs27(InputContainer, { ...rest, className: cn38(FileInput_default.formGroup, className), children: [
+  const handleDragLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) setIsDragging(false);
+  };
+  return /* @__PURE__ */ jsxs27(InputContainer, { ...rest, className: cn40(FileInput_default.formGroup, className), children: [
     /* @__PURE__ */ jsxs27(
       "label",
       {
         htmlFor: uid,
-        className: cn38(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
+        className: cn40(FileInput_default.dropZone, isDragging && FileInput_default.isDragging, error && FileInput_default.hasError, disabled && FileInput_default.isDisabled),
         onDrop: handleDrop,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         children: [
-          /* @__PURE__ */ jsx38("span", { className: FileInput_default.fieldLabel, children: label }),
-          /* @__PURE__ */ jsx38("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
-          /* @__PURE__ */ jsx38("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ jsxs27(Fragment3, { children: [
-            /* @__PURE__ */ jsx38("strong", { children: "Click to upload" }),
+          /* @__PURE__ */ jsx40("span", { className: FileInput_default.fieldLabel, children: label }),
+          /* @__PURE__ */ jsx40("svg", { "aria-hidden": "true", className: FileInput_default.icon, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx40("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
+          /* @__PURE__ */ jsx40("span", { className: FileInput_default.prompt, children: fileNames.length > 0 ? fileNames.join(", ") : /* @__PURE__ */ jsxs27(Fragment4, { children: [
+            /* @__PURE__ */ jsx40("strong", { children: "Click to upload" }),
             " or drag and drop"
           ] }) }),
-          accept && /* @__PURE__ */ jsx38("span", { className: FileInput_default.acceptHint, children: accept }),
-          /* @__PURE__ */ jsx38(
+          accept && /* @__PURE__ */ jsx40("span", { className: FileInput_default.acceptHint, children: accept }),
+          /* @__PURE__ */ jsx40(
             "input",
             {
               ref: inputRef,
@@ -2192,20 +2676,20 @@ function FileInput({
         ]
       }
     ),
-    /* @__PURE__ */ jsx38(Message, { inputId: uid, type: "error", message: error }),
-    /* @__PURE__ */ jsx38(Message, { inputId: uid, type: "hint", message: hint })
+    /* @__PURE__ */ jsx40(Message, { inputId: uid, type: "error", message: error }),
+    /* @__PURE__ */ jsx40(Message, { inputId: uid, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/FormInput/FormInput.tsx
-import { useId as useId15 } from "react";
+import { useId as useId17 } from "react";
 
 // src/components/interaction/form/FormInput/FormInput.module.css
-var FormInput_default = {"component":"bds280FormInput-component","formGroup":"bds280FormInput-formGroup","input":"bds280FormInput-input","inputError":"bds280FormInput-inputError"};
+var FormInput_default = {"component":"bds2110FormInput-component","formGroup":"bds2110FormInput-formGroup","input":"bds2110FormInput-input","g":"bds2110FormInput-g","inputError":"bds2110FormInput-inputError"};
 
 // src/components/interaction/form/FormInput/FormInput.tsx
-import { cn as cn39 } from "@boostdev/design-system-foundation";
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { cn as cn41 } from "@boostdev/design-system-foundation";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 function FormInput({
   label,
   name,
@@ -2214,42 +2698,43 @@ function FormInput({
   hint,
   className,
   required,
+  "aria-label": nativeAriaLabel,
   ...props
 }) {
-  const id = name + useId15();
+  const id = name + useId17();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs28(InputContainer, { className: cn39(FormInput_default.formGroup, className), children: [
-    /* @__PURE__ */ jsx39(Label, { id, label }),
-    /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsxs28(InputContainer, { className: cn41(FormInput_default.formGroup, className), children: [
+    /* @__PURE__ */ jsx41(Label, { id, label }),
+    /* @__PURE__ */ jsx41(
       "input",
       {
+        ...props,
         "aria-invalid": !!error,
         "aria-describedby": describedBy,
-        "aria-label": ariaLabel,
+        "aria-label": ariaLabel ?? nativeAriaLabel,
         "aria-required": required || void 0,
         id,
         name,
         required,
-        className: cn39(FormInput_default.input, error && FormInput_default.inputError),
-        ...props
+        className: cn41(FormInput_default.input, error && FormInput_default.inputError)
       }
     ),
-    /* @__PURE__ */ jsx39(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx39(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx41(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx41(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/NumberInput/NumberInput.tsx
-import { useId as useId16, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect11, useId as useId18, useRef as useRef14, useState as useState13 } from "react";
 
 // src/components/interaction/form/NumberInput/NumberInput.module.css
-var NumberInput_default = {"component":"bds280NumberInput-component","formGroup":"bds280NumberInput-formGroup","inputRow":"bds280NumberInput-inputRow","input":"bds280NumberInput-input","inputError":"bds280NumberInput-inputError","stepper":"bds280NumberInput-stepper"};
+var NumberInput_default = {"component":"bds2110NumberInput-component","formGroup":"bds2110NumberInput-formGroup","inputRow":"bds2110NumberInput-inputRow","input":"bds2110NumberInput-input","inputError":"bds2110NumberInput-inputError","stepper":"bds2110NumberInput-stepper"};
 
 // src/components/interaction/form/NumberInput/NumberInput.tsx
-import { cn as cn40 } from "@boostdev/design-system-foundation";
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { cn as cn42 } from "@boostdev/design-system-foundation";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 function NumberInput({
   label,
   name,
@@ -2263,16 +2748,23 @@ function NumberInput({
   hint,
   onChange,
   className,
+  decreaseLabel = "Decrease",
+  increaseLabel = "Increase",
   ...rest
 }) {
-  const uid = name + useId16();
+  const uid = name + useId18();
   const hintId = uid + "hint";
   const errorId = uid + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  const inputRef = useRef11(null);
+  const inputRef = useRef14(null);
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState11(defaultValue ?? 0);
+  const [internalValue, setInternalValue] = useState13(defaultValue ?? 0);
   const currentValue = isControlled ? value : internalValue;
+  const [controlledDraft, setControlledDraft] = useState13(() => isControlled ? String(value) : "");
+  useEffect11(() => {
+    if (!isControlled) return;
+    setControlledDraft((prev) => parseFloat(prev) === value ? prev : String(value));
+  }, [isControlled, value]);
   const clamp = (v) => {
     const withMin = min !== void 0 ? Math.max(min, v) : v;
     return max !== void 0 ? Math.min(max, withMin) : withMin;
@@ -2285,84 +2777,91 @@ function NumberInput({
         inputRef.current.value = String(next);
         inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
       }
+    } else {
+      setControlledDraft(String(next));
     }
     onChange?.(next);
   };
-  return /* @__PURE__ */ jsxs29(InputContainer, { ...rest, className: cn40(NumberInput_default.formGroup, className), children: [
-    /* @__PURE__ */ jsx40(Label, { id: uid, label }),
+  return /* @__PURE__ */ jsxs29(InputContainer, { ...rest, className: cn42(NumberInput_default.formGroup, className), children: [
+    /* @__PURE__ */ jsx42(Label, { id: uid, label }),
     /* @__PURE__ */ jsxs29("div", { className: NumberInput_default.inputRow, children: [
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42(
         "button",
         {
           type: "button",
           className: NumberInput_default.stepper,
-          "aria-label": "Decrease",
+          "aria-label": decreaseLabel,
           "aria-controls": uid,
           disabled: disabled || min !== void 0 && currentValue <= min,
           onClick: () => adjust(-step),
           tabIndex: -1,
-          children: /* @__PURE__ */ jsx40("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx40("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
+          children: /* @__PURE__ */ jsx42("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx42("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 12h14" }) })
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42(
         "input",
         {
           ref: inputRef,
           id: uid,
           type: "number",
           name,
-          ...isControlled ? { value } : { defaultValue },
+          ...isControlled ? { value: controlledDraft } : { defaultValue },
           min,
           max,
           step,
           disabled,
           "aria-invalid": !!error,
           "aria-describedby": describedBy,
-          className: cn40(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
+          className: cn42(NumberInput_default.input, error ? NumberInput_default.inputError : void 0),
           onChange: (e) => {
-            const v = parseFloat(e.target.value);
-            const safe = isNaN(v) ? 0 : v;
-            if (!isControlled) setInternalValue(safe);
-            onChange?.(safe);
+            if (e.target.validity.badInput) return;
+            const raw = e.target.value;
+            if (isControlled) setControlledDraft(raw);
+            if (raw === "") return;
+            const parsed = parseFloat(raw);
+            if (Number.isNaN(parsed)) return;
+            if (!isControlled) setInternalValue(parsed);
+            onChange?.(parsed);
           }
         }
       ),
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx42(
         "button",
         {
           type: "button",
           className: NumberInput_default.stepper,
-          "aria-label": "Increase",
+          "aria-label": increaseLabel,
           "aria-controls": uid,
           disabled: disabled || max !== void 0 && currentValue >= max,
           onClick: () => adjust(step),
           tabIndex: -1,
-          children: /* @__PURE__ */ jsx40("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx40("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
+          children: /* @__PURE__ */ jsx42("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx42("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12h14" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx40(Message, { inputId: uid, type: "error", message: error }),
-    /* @__PURE__ */ jsx40(Message, { inputId: uid, type: "hint", message: hint })
+    /* @__PURE__ */ jsx42(Message, { inputId: uid, type: "error", message: error }),
+    /* @__PURE__ */ jsx42(Message, { inputId: uid, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Radio/Radio.tsx
-import { useId as useId17 } from "react";
+import { useId as useId19 } from "react";
 
 // src/components/interaction/form/Radio/Radio.module.css
-var Radio_default = {"component":"bds280Radio-component","radioGroup":"bds280Radio-radioGroup","inputWrapper":"bds280Radio-inputWrapper","textWrapper":"bds280Radio-textWrapper","description":"bds280Radio-description","radio":"bds280Radio-radio","radioError":"bds280Radio-radioError"};
+var Radio_default = {"component":"bds2110Radio-component","radioGroup":"bds2110Radio-radioGroup","inputWrapper":"bds2110Radio-inputWrapper","textWrapper":"bds2110Radio-textWrapper","description":"bds2110Radio-description","radio":"bds2110Radio-radio","g":"bds2110Radio-g","radioError":"bds2110Radio-radioError"};
 
 // src/components/interaction/form/Radio/Radio.tsx
-import { cn as cn41 } from "@boostdev/design-system-foundation";
-import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
-function Radio({ label, name, description, error, hint, className, ...props }) {
-  const id = name + useId17();
+import { cn as cn43 } from "@boostdev/design-system-foundation";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+function Radio({ label, name, description, error, hint, className, id: consumerId, ...props }) {
+  const id = consumerId ?? name + useId19();
+  const descriptionId = id + "description";
   const hintId = id + "hint";
   const errorId = id + "error";
-  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs30(InputContainer, { className: cn41(Radio_default.radioGroup, className), children: [
+  const describedBy = [description && descriptionId, error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs30(InputContainer, { className: cn43(Radio_default.radioGroup, className), children: [
     /* @__PURE__ */ jsxs30("div", { className: Radio_default.inputWrapper, children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx43(
         "input",
         {
           "aria-describedby": describedBy,
@@ -2370,29 +2869,29 @@ function Radio({ label, name, description, error, hint, className, ...props }) {
           type: "radio",
           id,
           name,
-          className: cn41(Radio_default.radio, error && Radio_default.radioError),
+          className: cn43(Radio_default.radio, error && Radio_default.radioError),
           ...props
         }
       ),
       /* @__PURE__ */ jsxs30("div", { className: Radio_default.textWrapper, children: [
-        /* @__PURE__ */ jsx41(Label, { id, label }),
-        description && /* @__PURE__ */ jsx41("span", { className: Radio_default.description, children: description })
+        /* @__PURE__ */ jsx43(Label, { id, label }),
+        description && /* @__PURE__ */ jsx43("span", { id: descriptionId, className: Radio_default.description, children: description })
       ] })
     ] }),
-    /* @__PURE__ */ jsx41(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx41(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx43(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx43(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/RadioGroup/RadioGroup.tsx
-import { useId as useId18 } from "react";
+import { useId as useId20 } from "react";
 
 // src/components/interaction/form/RadioGroup/RadioGroup.module.css
-var RadioGroup_default = {"component":"bds280RadioGroup-component","group":"bds280RadioGroup-group","legend":"bds280RadioGroup-legend","required":"bds280RadioGroup-required","items":"bds280RadioGroup-items"};
+var RadioGroup_default = {"component":"bds2110RadioGroup-component","group":"bds2110RadioGroup-group","legend":"bds2110RadioGroup-legend","required":"bds2110RadioGroup-required","requiredLabel":"bds2110RadioGroup-requiredLabel","items":"bds2110RadioGroup-items"};
 
 // src/components/interaction/form/RadioGroup/RadioGroup.tsx
-import { cn as cn42 } from "@boostdev/design-system-foundation";
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { cn as cn44 } from "@boostdev/design-system-foundation";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function RadioGroup({
   legend,
   children,
@@ -2402,7 +2901,7 @@ function RadioGroup({
   className,
   ...rest
 }) {
-  const id = useId18();
+  const id = useId20();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
@@ -2410,17 +2909,20 @@ function RadioGroup({
     "fieldset",
     {
       ...rest,
-      className: cn42(RadioGroup_default.group, className),
-      "aria-required": required || void 0,
+      className: cn44(RadioGroup_default.group, className),
       "aria-describedby": describedBy,
       children: [
         /* @__PURE__ */ jsxs31("legend", { className: RadioGroup_default.legend, children: [
           legend,
-          required && /* @__PURE__ */ jsx42("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
+          required && /* @__PURE__ */ jsxs31(Fragment5, { children: [
+            /* @__PURE__ */ jsx44("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" }),
+            " ",
+            /* @__PURE__ */ jsx44("span", { className: RadioGroup_default.requiredLabel, children: "(required)" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx42("div", { className: RadioGroup_default.items, children }),
-        /* @__PURE__ */ jsx42(Message, { inputId: id, type: "error", message: error }),
-        /* @__PURE__ */ jsx42(Message, { inputId: id, type: "hint", message: hint })
+        /* @__PURE__ */ jsx44("div", { className: RadioGroup_default.items, children }),
+        /* @__PURE__ */ jsx44(Message, { inputId: id, type: "error", message: error }),
+        /* @__PURE__ */ jsx44(Message, { inputId: id, type: "hint", message: hint })
       ]
     }
   );
@@ -2430,11 +2932,14 @@ function RadioGroup({
 import { Children as Children2, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
 
 // src/components/interaction/form/SegmentedControl/SegmentedControl.module.css
-var SegmentedControl_default = {"component":"bds280SegmentedControl-component","control":"bds280SegmentedControl-control","thumb":"bds280SegmentedControl-thumb","indicator":"bds280SegmentedControl-indicator","item":"bds280SegmentedControl-item","--active":"bds280SegmentedControl---active","--disabled":"bds280SegmentedControl---disabled","--size_small":"bds280SegmentedControl---size_small","--size_large":"bds280SegmentedControl---size_large","--variant_outline":"bds280SegmentedControl---variant_outline"};
+var SegmentedControl_default = {"component":"bds2110SegmentedControl-component","control":"bds2110SegmentedControl-control","thumb":"bds2110SegmentedControl-thumb","indicator":"bds2110SegmentedControl-indicator","item":"bds2110SegmentedControl-item","--active":"bds2110SegmentedControl---active","--disabled":"bds2110SegmentedControl---disabled","--size_small":"bds2110SegmentedControl---size_small","--size_large":"bds2110SegmentedControl---size_large","--variant_outline":"bds2110SegmentedControl---variant_outline","--no-selection":"bds2110SegmentedControl---no-selection"};
 
 // src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
-import { cn as cn43 } from "@boostdev/design-system-foundation";
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { cn as cn45 } from "@boostdev/design-system-foundation";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+var preventDisabledActivation = (event) => {
+  event.preventDefault();
+};
 function SegmentedControl({
   children,
   selectedIndex: selectedIndexProp,
@@ -2449,30 +2954,50 @@ function SegmentedControl({
     const p = child.props;
     return p["aria-current"] === "page" || p["aria-pressed"] === true || p["aria-selected"] === true;
   }) : -1;
-  const activeIndex = Math.max(0, selectedIndexProp ?? (autoIndex >= 0 ? autoIndex : 0));
+  const activeIndex = validChildren.length === 0 ? void 0 : selectedIndexProp !== void 0 ? Math.min(Math.max(selectedIndexProp, 0), validChildren.length - 1) : autoIndex >= 0 ? autoIndex : void 0;
   return /* @__PURE__ */ jsxs32(
     "div",
     {
       ...rest,
       role: "group",
-      className: cn43(SegmentedControl_default.control, SegmentedControl_default[`--size_${size}`], SegmentedControl_default[`--variant_${variant}`], className),
+      className: cn45(
+        SegmentedControl_default.control,
+        SegmentedControl_default[`--size_${size}`],
+        SegmentedControl_default[`--variant_${variant}`],
+        activeIndex === void 0 && SegmentedControl_default["--no-selection"],
+        className
+      ),
       style: {
         "--control_count": validChildren.length,
-        "--control_selected-index": activeIndex
+        ...activeIndex !== void 0 ? { "--control_selected-index": activeIndex } : {}
       },
       children: [
-        /* @__PURE__ */ jsx43("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx43("span", { className: SegmentedControl_default.indicator, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx45("span", { className: SegmentedControl_default.thumb, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx45("span", { className: SegmentedControl_default.indicator, "aria-hidden": "true" }),
         validChildren.map((child, index) => {
           const isActive = index === activeIndex;
           const p = child.props;
-          const isDisabled = disabled || !!p.disabled || p["aria-disabled"] === true;
+          const isDisabled2 = disabled || !!p.disabled || p["aria-disabled"] === true;
+          const hasAriaState = p["aria-current"] !== void 0 || p["aria-pressed"] !== void 0 || p["aria-selected"] !== void 0;
+          const stateProps = {};
+          if (isDisabled2) {
+            stateProps["aria-disabled"] = true;
+            if (child.type === "button") {
+              stateProps.disabled = true;
+            } else {
+              stateProps.tabIndex = -1;
+              stateProps.onClick = preventDisabledActivation;
+            }
+          } else if (isActive && selectedIndexProp !== void 0 && !hasAriaState) {
+            stateProps[child.type === "a" ? "aria-current" : "aria-pressed"] = child.type === "a" ? "page" : true;
+          }
           return cloneElement4(child, {
             key: child.key ?? index,
-            className: cn43(
+            ...stateProps,
+            className: cn45(
               SegmentedControl_default.item,
               isActive && SegmentedControl_default["--active"],
-              isDisabled && SegmentedControl_default["--disabled"],
+              isDisabled2 && SegmentedControl_default["--disabled"],
               p.className
             )
           });
@@ -2483,14 +3008,14 @@ function SegmentedControl({
 }
 
 // src/components/interaction/form/Select/Select.tsx
-import { useId as useId19 } from "react";
+import { useId as useId21 } from "react";
 
 // src/components/interaction/form/Select/Select.module.css
-var Select_default = {"component":"bds280Select-component","formGroup":"bds280Select-formGroup","selectWrapper":"bds280Select-selectWrapper","select":"bds280Select-select","selectError":"bds280Select-selectError","chevron":"bds280Select-chevron"};
+var Select_default = {"component":"bds2110Select-component","formGroup":"bds2110Select-formGroup","selectWrapper":"bds2110Select-selectWrapper","select":"bds2110Select-select","selectError":"bds2110Select-selectError","chevron":"bds2110Select-chevron"};
 
 // src/components/interaction/form/Select/Select.tsx
-import { cn as cn44 } from "@boostdev/design-system-foundation";
-import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { cn as cn46 } from "@boostdev/design-system-foundation";
+import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 function Select({
   label,
   name,
@@ -2500,48 +3025,55 @@ function Select({
   hint,
   className,
   required,
-  ...props
+  id,
+  value,
+  defaultValue,
+  ...rest
 }) {
-  const id = name + useId19();
-  const hintId = id + "hint";
-  const errorId = id + "error";
+  const generatedId = name + useId21();
+  const selectId = id ?? generatedId;
+  const hintId = selectId + "hint";
+  const errorId = selectId + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs33(InputContainer, { className: cn44(Select_default.formGroup, className), children: [
-    /* @__PURE__ */ jsx44(Label, { id, label }),
+  const isControlled = value !== void 0;
+  const initialValueProps = isControlled ? { value } : { defaultValue: defaultValue ?? (placeholder ? "" : void 0) };
+  return /* @__PURE__ */ jsxs33(InputContainer, { className: cn46(Select_default.formGroup, className), children: [
+    /* @__PURE__ */ jsx46(Label, { id: selectId, label }),
     /* @__PURE__ */ jsxs33("div", { className: Select_default.selectWrapper, children: [
       /* @__PURE__ */ jsxs33(
         "select",
         {
-          id,
+          ...rest,
+          id: selectId,
           name,
           "aria-invalid": !!error,
           "aria-required": required || void 0,
           "aria-describedby": describedBy,
           required,
-          className: cn44(Select_default.select, error ? Select_default.selectError : void 0),
-          ...props,
+          className: cn46(Select_default.select, error ? Select_default.selectError : void 0),
+          ...initialValueProps,
           children: [
-            placeholder && /* @__PURE__ */ jsx44("option", { value: "", disabled: true, hidden: true, children: placeholder }),
-            options.map(({ value, label: optLabel, disabled }) => /* @__PURE__ */ jsx44("option", { value, disabled, children: optLabel }, value))
+            placeholder && /* @__PURE__ */ jsx46("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options.map(({ value: value2, label: optLabel, disabled }) => /* @__PURE__ */ jsx46("option", { value: value2, disabled, children: optLabel }, value2))
           ]
         }
       ),
-      /* @__PURE__ */ jsx44("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx44("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx44("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
+      /* @__PURE__ */ jsx46("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx46("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 9l6 6 6-6" }) }) })
     ] }),
-    /* @__PURE__ */ jsx44(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx44(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx46(Message, { inputId: selectId, type: "error", message: error }),
+    /* @__PURE__ */ jsx46(Message, { inputId: selectId, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Slider/Slider.tsx
-import { useId as useId20, useState as useState12 } from "react";
+import { useId as useId22, useState as useState14 } from "react";
 
 // src/components/interaction/form/Slider/Slider.module.css
-var Slider_default = {"component":"bds280Slider-component","formGroup":"bds280Slider-formGroup","labelRow":"bds280Slider-labelRow","value":"bds280Slider-value","slider":"bds280Slider-slider","sliderError":"bds280Slider-sliderError"};
+var Slider_default = {"component":"bds2110Slider-component","formGroup":"bds2110Slider-formGroup","labelRow":"bds2110Slider-labelRow","value":"bds2110Slider-value","slider":"bds2110Slider-slider","sliderError":"bds2110Slider-sliderError"};
 
 // src/components/interaction/form/Slider/Slider.tsx
-import { cn as cn45 } from "@boostdev/design-system-foundation";
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { cn as cn47 } from "@boostdev/design-system-foundation";
+import { jsx as jsx47, jsxs as jsxs34 } from "react/jsx-runtime";
 function Slider({
   label,
   name,
@@ -2554,56 +3086,55 @@ function Slider({
   onChange,
   ...props
 }) {
-  const id = name + useId20();
+  const id = name + useId22();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
   const isControlled = props.value !== void 0;
-  const [internalValue, setInternalValue] = useState12(Number(props.defaultValue ?? min));
+  const [internalValue, setInternalValue] = useState14(
+    Number(props.defaultValue ?? min + (max - min) / 2)
+  );
   const currentValue = isControlled ? Number(props.value) : internalValue;
   const fillPct = (currentValue - min) / (max - min) * 100;
   const handleChange = (e) => {
     if (!isControlled) setInternalValue(Number(e.target.value));
     onChange?.(e);
   };
-  return /* @__PURE__ */ jsxs34(InputContainer, { className: cn45(Slider_default.formGroup, className), children: [
+  return /* @__PURE__ */ jsxs34(InputContainer, { className: cn47(Slider_default.formGroup, className), children: [
     /* @__PURE__ */ jsxs34("div", { className: Slider_default.labelRow, children: [
-      /* @__PURE__ */ jsx45(Label, { id, label }),
-      showValue && /* @__PURE__ */ jsx45("span", { className: Slider_default.value, children: currentValue })
+      /* @__PURE__ */ jsx47(Label, { id, label }),
+      showValue && /* @__PURE__ */ jsx47("span", { className: Slider_default.value, children: currentValue })
     ] }),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(
       "input",
       {
+        ...props,
         type: "range",
         id,
         name,
         min,
         max,
+        "aria-invalid": !!error,
         "aria-describedby": describedBy,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": currentValue,
-        "aria-valuetext": String(currentValue),
-        className: cn45(Slider_default.slider, error ? Slider_default.sliderError : void 0),
-        style: { "--slider_fill": `${fillPct}%` },
-        onChange: handleChange,
-        ...props
+        className: cn47(Slider_default.slider, error ? Slider_default.sliderError : void 0),
+        style: { ...props.style, "--slider_fill": `${fillPct}%` },
+        onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx45(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx45(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx47(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx47(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Switch/Switch.tsx
-import { useId as useId21 } from "react";
+import { useId as useId23 } from "react";
 
 // src/components/interaction/form/Switch/Switch.module.css
-var Switch_default = {"component":"bds280Switch-component","switchGroup":"bds280Switch-switchGroup","--size_small":"bds280Switch---size_small","--size_medium":"bds280Switch---size_medium","--size_large":"bds280Switch---size_large","inputWrapper":"bds280Switch-inputWrapper","trackWrapper":"bds280Switch-trackWrapper","switch":"bds280Switch-switch","track":"bds280Switch-track","thumb":"bds280Switch-thumb","switchError":"bds280Switch-switchError"};
+var Switch_default = {"component":"bds2110Switch-component","switchGroup":"bds2110Switch-switchGroup","--size_small":"bds2110Switch---size_small","--size_medium":"bds2110Switch---size_medium","--size_large":"bds2110Switch---size_large","inputWrapper":"bds2110Switch-inputWrapper","trackWrapper":"bds2110Switch-trackWrapper","switch":"bds2110Switch-switch","track":"bds2110Switch-track","thumb":"bds2110Switch-thumb","switchError":"bds2110Switch-switchError"};
 
 // src/components/interaction/form/Switch/Switch.tsx
-import { cn as cn46 } from "@boostdev/design-system-foundation";
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { cn as cn48 } from "@boostdev/design-system-foundation";
+import { jsx as jsx48, jsxs as jsxs35 } from "react/jsx-runtime";
 function Switch({
   label,
   name,
@@ -2614,44 +3145,45 @@ function Switch({
   prefix,
   ...props
 }) {
-  const id = name + useId21();
+  const id = name + useId23();
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs35(InputContainer, { className: cn46(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
+  return /* @__PURE__ */ jsxs35(InputContainer, { className: cn48(Switch_default.switchGroup, Switch_default[`--size_${size}`], className), children: [
     /* @__PURE__ */ jsxs35("div", { className: Switch_default.inputWrapper, children: [
-      prefix && /* @__PURE__ */ jsx46("span", { children: prefix }),
+      prefix && /* @__PURE__ */ jsx48("span", { children: prefix }),
       /* @__PURE__ */ jsxs35("div", { className: Switch_default.trackWrapper, children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           "input",
           {
+            ...props,
             type: "checkbox",
             role: "switch",
             id,
             name,
             "aria-describedby": describedBy,
-            className: cn46(Switch_default.switch, error ? Switch_default.switchError : void 0),
-            ...props
+            "aria-invalid": !!error,
+            className: cn48(Switch_default.switch, error ? Switch_default.switchError : void 0)
           }
         ),
-        /* @__PURE__ */ jsx46("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx46("span", { className: Switch_default.thumb }) })
+        /* @__PURE__ */ jsx48("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx48("span", { className: Switch_default.thumb }) })
       ] }),
-      /* @__PURE__ */ jsx46(Label, { id, label })
+      /* @__PURE__ */ jsx48(Label, { id, label })
     ] }),
-    /* @__PURE__ */ jsx46(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx46(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx48(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx48(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/interaction/form/Textarea/Textarea.tsx
-import { useId as useId22 } from "react";
+import { useId as useId24 } from "react";
 
 // src/components/interaction/form/Textarea/Textarea.module.css
-var Textarea_default = {"component":"bds280Textarea-component","formGroup":"bds280Textarea-formGroup","textarea":"bds280Textarea-textarea","textareaError":"bds280Textarea-textareaError"};
+var Textarea_default = {"component":"bds2110Textarea-component","formGroup":"bds2110Textarea-formGroup","textarea":"bds2110Textarea-textarea","textareaError":"bds2110Textarea-textareaError"};
 
 // src/components/interaction/form/Textarea/Textarea.tsx
-import { cn as cn47 } from "@boostdev/design-system-foundation";
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { cn as cn49 } from "@boostdev/design-system-foundation";
+import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
 function Textarea({
   label,
   name,
@@ -2659,15 +3191,17 @@ function Textarea({
   hint,
   className,
   required,
+  id: idProp,
   ...props
 }) {
-  const id = name + useId22();
+  const generatedId = useId24();
+  const id = idProp ?? name + generatedId;
   const hintId = id + "hint";
   const errorId = id + "error";
   const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxs36(InputContainer, { className: cn47(Textarea_default.formGroup, className), children: [
-    /* @__PURE__ */ jsx47(Label, { id, label }),
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs36(InputContainer, { className: cn49(Textarea_default.formGroup, className), children: [
+    /* @__PURE__ */ jsx49(Label, { id, label }),
+    /* @__PURE__ */ jsx49(
       "textarea",
       {
         id,
@@ -2676,40 +3210,40 @@ function Textarea({
         "aria-describedby": describedBy,
         "aria-required": required || void 0,
         required,
-        className: cn47(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
+        className: cn49(Textarea_default.textarea, error ? Textarea_default.textareaError : void 0),
         ...props
       }
     ),
-    /* @__PURE__ */ jsx47(Message, { inputId: id, type: "error", message: error }),
-    /* @__PURE__ */ jsx47(Message, { inputId: id, type: "hint", message: hint })
+    /* @__PURE__ */ jsx49(Message, { inputId: id, type: "error", message: error }),
+    /* @__PURE__ */ jsx49(Message, { inputId: id, type: "hint", message: hint })
   ] });
 }
 
 // src/components/layout/ButtonGroup/ButtonGroup.module.css
-var ButtonGroup_default = {"component":"bds280ButtonGroup-component","buttonGroup":"bds280ButtonGroup-buttonGroup","container":"bds280ButtonGroup-container","--variant_card":"bds280ButtonGroup---variant_card","--variant_flow":"bds280ButtonGroup---variant_flow","--variant_modal":"bds280ButtonGroup---variant_modal","--variant_content":"bds280ButtonGroup---variant_content","--variant_grid":"bds280ButtonGroup---variant_grid"};
+var ButtonGroup_default = {"component":"bds2110ButtonGroup-component","buttonGroup":"bds2110ButtonGroup-buttonGroup","container":"bds2110ButtonGroup-container","--variant_card":"bds2110ButtonGroup---variant_card","--variant_flow":"bds2110ButtonGroup---variant_flow","--variant_modal":"bds2110ButtonGroup---variant_modal","--variant_content":"bds2110ButtonGroup---variant_content"};
 
 // src/components/layout/ButtonGroup/ButtonGroup.tsx
-import { cn as cn48 } from "@boostdev/design-system-foundation";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { cn as cn50 } from "@boostdev/design-system-foundation";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function ButtonContainer({ children, className, variant, ...rest }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       ...rest,
       role: "group",
-      className: cn48(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
-      children: /* @__PURE__ */ jsx48("div", { className: ButtonGroup_default.container, children })
+      className: cn50(ButtonGroup_default.buttonGroup, className, variant && ButtonGroup_default[`--variant_${variant}`]),
+      children: /* @__PURE__ */ jsx50("div", { className: ButtonGroup_default.container, children })
     }
   );
 }
 var ButtonGroup = ButtonContainer;
 
 // src/components/layout/Card/Card.module.css
-var Card_default = {"component":"bds280Card-component","card":"bds280Card-card","--default":"bds280Card---default","--elevated":"bds280Card---elevated","--outlined":"bds280Card---outlined","--clickable":"bds280Card---clickable","--padding-none":"bds280Card---padding-none","--padding-small":"bds280Card---padding-small","--padding-medium":"bds280Card---padding-medium","--padding-large":"bds280Card---padding-large","--padding-extra-large":"bds280Card---padding-extra-large","--text-start":"bds280Card---text-start","--text-center":"bds280Card---text-center","--text-end":"bds280Card---text-end"};
+var Card_default = {"component":"bds2110Card-component","card":"bds2110Card-card","--default":"bds2110Card---default","--elevated":"bds2110Card---elevated","--outlined":"bds2110Card---outlined","--clickable":"bds2110Card---clickable","--padding-none":"bds2110Card---padding-none","--padding-small":"bds2110Card---padding-small","--padding-medium":"bds2110Card---padding-medium","--padding-large":"bds2110Card---padding-large","--padding-extra-large":"bds2110Card---padding-extra-large","--text-start":"bds2110Card---text-start","--text-center":"bds2110Card---text-center","--text-end":"bds2110Card---text-end"};
 
 // src/components/layout/Card/Card.tsx
-import { cn as cn49 } from "@boostdev/design-system-foundation";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { cn as cn51 } from "@boostdev/design-system-foundation";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Card({
   children,
   className,
@@ -2720,7 +3254,7 @@ function Card({
   onClick,
   ...rest
 }) {
-  const classNames = cn49(
+  const classNames = cn51(
     Card_default.card,
     Card_default[`--${variant}`],
     Card_default[`--padding-${padding}`],
@@ -2729,7 +3263,7 @@ function Card({
     className
   );
   const Component = as ?? (onClick ? "button" : "div");
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     Component,
     {
       ...rest,
@@ -2745,17 +3279,20 @@ function Card({
 import {
   createContext as createContext2,
   useMemo as useMemo4,
-  useRef as useRef12
+  useRef as useRef15
 } from "react";
 
 // src/components/layout/Grid/Grid.module.css
-var Grid_default = {"component":"bds280Grid-component","grid":"bds280Grid-grid","--main":"bds280Grid---main","--page":"bds280Grid---page","--funnel":"bds280Grid---funnel","--custom":"bds280Grid---custom","--centered":"bds280Grid---centered","item":"bds280Grid-item","w3":"bds280Grid-w3","org":"bds280Grid-org","ts":"bds280Grid-ts","--masonry":"bds280Grid---masonry"};
+var Grid_default = {"component":"bds2110Grid-component","grid":"bds2110Grid-grid","--main":"bds2110Grid---main","--page":"bds2110Grid---page","--funnel":"bds2110Grid---funnel","--custom":"bds2110Grid---custom","--centered":"bds2110Grid---centered","item":"bds2110Grid-item","w3":"bds2110Grid-w3","org":"bds2110Grid-org","ts":"bds2110Grid-ts","--masonry":"bds2110Grid---masonry"};
 
 // src/components/layout/Grid/Grid.tsx
-import { cn as cn50 } from "@boostdev/design-system-foundation";
+import { cn as cn52 } from "@boostdev/design-system-foundation";
+
+// src/components/layout/Grid/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect12, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect12;
 
 // 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",
@@ -2785,6 +3322,7 @@ function supportsNativeMasonry() {
   return CSS.supports("display", "grid-lanes") || CSS.supports("grid-template-rows", "masonry");
 }
 var ORIGINAL_COL_ATTR = "data-bds-masonry-original-column";
+var LAST_COL_ATTR = "data-bds-masonry-col";
 var LAST_SPAN_ATTR = "data-bds-masonry-span";
 var UNIT_ATTR = "data-bds-masonry-unit";
 function applyMasonryLayout(container, rawChildren, options = {}) {
@@ -2808,16 +3346,23 @@ function applyMasonryLayout(container, rawChildren, options = {}) {
       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 currentInline = child.style.gridColumn;
+          const lastWritten = child.getAttribute(LAST_COL_ATTR);
+          if (!child.hasAttribute(ORIGINAL_COL_ATTR) || currentInline !== lastWritten) {
+            child.setAttribute(ORIGINAL_COL_ATTR, currentInline);
           }
           const remaining = totalCols - col;
           const span = Math.max(1, Math.min(preferredCols, remaining));
           child.style.gridColumn = `span ${span}`;
+          child.setAttribute(LAST_COL_ATTR, child.style.gridColumn);
           col = (col + span) % totalCols;
         } else {
           const consumed = Math.min(totalCols, readExplicitSpan(child, totalCols));
-          col = (col + consumed) % totalCols;
+          if (consumed > totalCols - col) {
+            col = consumed % totalCols;
+          } else {
+            col = (col + consumed) % totalCols;
+          }
         }
       }
     }
@@ -2901,10 +3446,11 @@ function restoreOriginalColumn(el) {
   if (!el.hasAttribute(ORIGINAL_COL_ATTR)) return;
   el.style.gridColumn = el.getAttribute(ORIGINAL_COL_ATTR) ?? "";
   el.removeAttribute(ORIGINAL_COL_ATTR);
+  el.removeAttribute(LAST_COL_ATTR);
 }
 function useMasonry(ref, enabled, options = {}) {
   const { preferredColumnSpan, rowUnitPx } = options;
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const container = ref.current;
     if (!container || !enabled) return;
     if (supportsNativeMasonry()) return;
@@ -2976,7 +3522,7 @@ function useMasonry(ref, enabled, options = {}) {
 }
 
 // src/components/layout/Grid/Grid.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var _GridContext;
 function getGridContext() {
   _GridContext ??= createContext2({ autoSpanMedia: false });
@@ -2996,12 +3542,12 @@ function Grid({
   style,
   ...rest
 }) {
-  const ref = useRef12(null);
+  const ref = useRef15(null);
   useMasonry(ref, isMasonry, {
     preferredColumnSpan: masonryPreferredColumnSpan,
     rowUnitPx: masonryRowUnitPx
   });
-  const classNames = cn50(
+  const classNames = cn52(
     Grid_default.grid,
     Grid_default[`--${variant}`],
     isCentered && Grid_default["--centered"],
@@ -3012,17 +3558,16 @@ function Grid({
   const Component = as ?? "div";
   const GridContext = getGridContext();
   const ctx = useMemo4(() => ({ autoSpanMedia }), [autoSpanMedia]);
-  return /* @__PURE__ */ jsx50(Component, { ref, ...rest, className: classNames, style: composedStyle, children: /* @__PURE__ */ jsx50(GridContext.Provider, { value: ctx, children }) });
+  return /* @__PURE__ */ jsx52(Component, { ref, ...rest, className: classNames, style: composedStyle, children: /* @__PURE__ */ jsx52(GridContext.Provider, { value: ctx, children }) });
 }
 
 // src/components/layout/Grid/GridItem.tsx
 import {
   useContext as useContext2,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef13,
-  useState as useState13
+  useRef as useRef16,
+  useState as useState15
 } from "react";
-import { cn as cn51 } from "@boostdev/design-system-foundation";
+import { cn as cn53 } from "@boostdev/design-system-foundation";
 
 // src/components/layout/Grid/autoSpan.ts
 function aspectToColumnSpan(ratio) {
@@ -3054,7 +3599,7 @@ function mediaReadyEvent(media) {
 }
 
 // src/components/layout/Grid/GridItem.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var GridItemSpan = {
   full: "full",
   threeQuarters: "three-quarters",
@@ -3089,9 +3634,9 @@ function GridItem({
 }) {
   const { autoSpanMedia } = useContext2(getGridContext());
   const effectiveSpan = columnSpan ?? (autoSpanMedia ? "auto" : "full");
-  const ref = useRef13(null);
-  const [autoSpan, setAutoSpan] = useState13("one-quarter");
-  useLayoutEffect2(() => {
+  const ref = useRef16(null);
+  const [autoSpan, setAutoSpan] = useState15("one-quarter");
+  useIsomorphicLayoutEffect(() => {
     if (effectiveSpan !== "auto") return;
     const el = ref.current;
     if (!el) return;
@@ -3136,13 +3681,13 @@ function GridItem({
   };
   const Component = as ?? "div";
   const isColumnSpanAuto = columnSpan === void 0 && !hasExplicitRange;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(
     Component,
     {
       ref,
       ...rest,
       "data-column-span-auto": isColumnSpanAuto ? "" : void 0,
-      className: cn51(Grid_default.item, className),
+      className: cn53(Grid_default.item, className),
       style: composedStyle,
       children
     }
@@ -3150,11 +3695,11 @@ function GridItem({
 }
 
 // src/components/layout/SectionHeader/SectionHeader.module.css
-var SectionHeader_default = {"component":"bds280SectionHeader-component","sectionHeader":"bds280SectionHeader-sectionHeader","title":"bds280SectionHeader-title","subtitle":"bds280SectionHeader-subtitle","--start":"bds280SectionHeader---start","--center":"bds280SectionHeader---center","--end":"bds280SectionHeader---end","--medium":"bds280SectionHeader---medium","--xs":"bds280SectionHeader---xs","--small":"bds280SectionHeader---small","--large":"bds280SectionHeader---large"};
+var SectionHeader_default = {"component":"bds2110SectionHeader-component","sectionHeader":"bds2110SectionHeader-sectionHeader","title":"bds2110SectionHeader-title","subtitle":"bds2110SectionHeader-subtitle","--start":"bds2110SectionHeader---start","--center":"bds2110SectionHeader---center","--end":"bds2110SectionHeader---end","--medium":"bds2110SectionHeader---medium","--xs":"bds2110SectionHeader---xs","--small":"bds2110SectionHeader---small","--large":"bds2110SectionHeader---large"};
 
 // src/components/layout/SectionHeader/SectionHeader.tsx
-import { cn as cn52 } from "@boostdev/design-system-foundation";
-import { jsx as jsx52, jsxs as jsxs37 } from "react/jsx-runtime";
+import { cn as cn54 } from "@boostdev/design-system-foundation";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   subtitle,
@@ -3165,24 +3710,24 @@ function SectionHeader({
   ...rest
 }) {
   const Title = titleAs;
-  return /* @__PURE__ */ jsxs37("div", { ...rest, className: cn52(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
-    /* @__PURE__ */ jsx52(Title, { className: SectionHeader_default.title, children: title }),
-    subtitle && /* @__PURE__ */ jsx52("p", { className: SectionHeader_default.subtitle, children: subtitle })
+  return /* @__PURE__ */ jsxs37("div", { ...rest, className: cn54(SectionHeader_default.sectionHeader, SectionHeader_default[`--${alignment}`], SectionHeader_default[`--${size}`], className), children: [
+    /* @__PURE__ */ jsx54(Title, { className: SectionHeader_default.title, children: title }),
+    subtitle && /* @__PURE__ */ jsx54("p", { className: SectionHeader_default.subtitle, children: subtitle })
   ] });
 }
 
 // src/components/layout/IconWrapper/IconWrapper.module.css
-var IconWrapper_default = {"component":"bds280IconWrapper-component","wrapper":"bds280IconWrapper-wrapper"};
+var IconWrapper_default = {"component":"bds2110IconWrapper-component","wrapper":"bds2110IconWrapper-wrapper"};
 
 // src/components/layout/IconWrapper/IconWrapper.tsx
-import { cn as cn53 } from "@boostdev/design-system-foundation";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { cn as cn55 } from "@boostdev/design-system-foundation";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function IconWrapper({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx53("div", { ...rest, className: cn53(className, IconWrapper_default.wrapper), children });
+  return /* @__PURE__ */ jsx55("div", { ...rest, className: cn55(className, IconWrapper_default.wrapper), children });
 }
 
 // src/index.ts
-import { cn as cn54 } from "@boostdev/design-system-foundation";
+import { cn as cn56 } from "@boostdev/design-system-foundation";
 export {
   Accordion,
   Alert,
@@ -3193,6 +3738,7 @@ export {
   ButtonContainer,
   ButtonGroup,
   Calendar,
+  CalendarRange,
   Card,
   Carousel,
   Checkbox,
@@ -3236,6 +3782,6 @@ export {
   ToastProvider,
   Tooltip,
   Typography,
-  cn54 as cn,
+  cn56 as cn,
   useToast
 };