@bolio-ui/core 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/{chunk-IBC5BABS.js → chunk-P245HSVB.js}

@@ -53,7 +53,7 @@ var getISOWeek = (date) => {
 };
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Calendar/Calendar.module.css.bolio-css-module-source
-var Calendar_module_css_default = { "calendar": "Calendar-module_calendar__KlHdi", "header": "Calendar-module_header__d6VGN", "title": "Calendar-module_title__r0GX1", "table": "Calendar-module_table__q-H-S", "th": "Calendar-module_th__N9m4h", "td": "Calendar-module_td__YyI6L", "button": "Calendar-module_button__h3ZK-", "navButton": "Calendar-module_navButton__jmnwu", "dayButton": "Calendar-module_dayButton__-4eeR", "today": "Calendar-module_today__fx9vj", "selected": "Calendar-module_selected__kIUsl", "outside": "Calendar-module_outside__cSs5z", "inRange": "Calendar-module_inRange__0XK-F", "rangeStart": "Calendar-module_rangeStart__T1amH", "rangeEnd": "Calendar-module_rangeEnd__B55oD", "weekNumber": "Calendar-module_weekNumber__J1hkP" };
+var Calendar_module_css_default = { "calendar": "Calendar-module_calendar__KlHdi", "months": "Calendar-module_months__vypnr", "header": "Calendar-module_header__d6VGN", "navSpacer": "Calendar-module_navSpacer__TcVxJ", "title": "Calendar-module_title__r0GX1", "table": "Calendar-module_table__q-H-S", "th": "Calendar-module_th__N9m4h", "td": "Calendar-module_td__YyI6L", "button": "Calendar-module_button__h3ZK-", "navButton": "Calendar-module_navButton__jmnwu", "dayButton": "Calendar-module_dayButton__-4eeR", "today": "Calendar-module_today__fx9vj", "selected": "Calendar-module_selected__kIUsl", "outside": "Calendar-module_outside__cSs5z", "inRange": "Calendar-module_inRange__0XK-F", "rangeStart": "Calendar-module_rangeStart__T1amH", "rangeEnd": "Calendar-module_rangeEnd__B55oD", "weekNumber": "Calendar-module_weekNumber__J1hkP" };
 
 // core/Calendar/Calendar.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -70,6 +70,7 @@ var CalendarComponent = _react2.default.forwardRef(
     weekStartsOn = 0,
     showOutsideDays = false,
     showWeekNumbers = false,
+    numberOfMonths = 1,
     month: customMonth,
     defaultMonth,
     onMonthChange,
@@ -102,6 +103,14 @@ var CalendarComponent = _react2.default.forwardRef(
         maxDay
       )
     );
+    const count = Math.max(1, Math.floor(numberOfMonths));
+    const focusedIndex = focused.getFullYear() * 12 + focused.getMonth();
+    const [viewStart, setViewStart] = _react.useState.call(void 0, focusedIndex);
+    let first = viewStart;
+    if (focusedIndex < first) first = focusedIndex;
+    else if (focusedIndex > first + count - 1)
+      first = focusedIndex - (count - 1);
+    if (first !== viewStart) setViewStart(first);
     const gridRef = _react.useRef.call(void 0, null);
     const moveFocus = _react.useRef.call(void 0, autoFocus);
     const time = anchor ? anchor.getTime() : null;
@@ -113,6 +122,7 @@ var CalendarComponent = _react2.default.forwardRef(
     _react.useEffect.call(void 0, () => {
       if (monthTime === null) return;
       const target = new Date(monthTime);
+      setViewStart(target.getFullYear() * 12 + target.getMonth());
       setFocused(
         (last) => last.getFullYear() === target.getFullYear() && last.getMonth() === target.getMonth() ? last : clampDate(target, minDay, maxDay)
       );
@@ -150,47 +160,58 @@ var CalendarComponent = _react2.default.forwardRef(
       }),
       [formats, weekStartsOn]
     );
-    const year = focused.getFullYear();
-    const month = focused.getMonth();
-    const weeks = _react.useMemo.call(void 0, () => {
-      const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
-      const total = new Date(year, month + 1, 0).getDate();
-      const cells = [
-        ...Array.from(
-          { length: offset },
-          (_, index) => showOutsideDays ? new Date(year, month, index - offset + 1) : null
-        ),
-        ...Array.from(
-          { length: total },
-          (_, index) => new Date(year, month, index + 1)
-        )
-      ];
-      while (cells.length % 7)
-        cells.push(
-          showOutsideDays ? new Date(year, month, cells.length - offset + 1) : null
+    const outsideDays = showOutsideDays && count === 1;
+    const monthViews = _react.useMemo.call(void 0, 
+      () => Array.from({ length: count }, (_, step) => {
+        const index = first + step;
+        const year = Math.floor(index / 12);
+        const month = index % 12;
+        const offset = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+        const total = new Date(year, month + 1, 0).getDate();
+        const cells = [
+          ...Array.from(
+            { length: offset },
+            (_2, cell) => outsideDays ? new Date(year, month, cell - offset + 1) : null
+          ),
+          ...Array.from(
+            { length: total },
+            (_2, cell) => new Date(year, month, cell + 1)
+          )
+        ];
+        while (cells.length % 7)
+          cells.push(
+            outsideDays ? new Date(year, month, cells.length - offset + 1) : null
+          );
+        const weeks = Array.from(
+          { length: cells.length / 7 },
+          (_2, row) => cells.slice(row * 7, row * 7 + 7)
         );
-      return Array.from(
-        { length: cells.length / 7 },
-        (_, index) => cells.slice(index * 7, index * 7 + 7)
-      );
-    }, [year, month, weekStartsOn, showOutsideDays]);
-    const lastMonth = _react.useRef.call(void 0, `${year}-${month}`);
+        return { year, month, date: new Date(year, month, 1), weeks };
+      }),
+      [first, count, weekStartsOn, outsideDays]
+    );
+    const firstMonth = monthViews[0];
+    const lastMonthView = monthViews[count - 1];
+    const lastMonth = _react.useRef.call(void 0, first);
     _react.useEffect.call(void 0, () => {
-      const key = `${year}-${month}`;
-      if (key === lastMonth.current) return;
-      lastMonth.current = key;
-      if (onMonthChange) onMonthChange(new Date(year, month, 1));
-    }, [year, month]);
+      if (first === lastMonth.current) return;
+      lastMonth.current = first;
+      if (onMonthChange) onMonthChange(firstMonth.date);
+    }, [first]);
     const isDisabled = (date) => Boolean(
       minDay && date < minDay || maxDay && date > maxDay || shouldDisableDate && shouldDisableDate(date)
     );
     const today = /* @__PURE__ */ new Date();
     const previousDisabled = Boolean(
-      minDay && new Date(year, month, 0) < minDay
+      minDay && new Date(firstMonth.year, firstMonth.month, 0) < minDay
     );
     const nextDisabled = Boolean(
-      maxDay && new Date(year, month + 1, 1) > maxDay
+      maxDay && new Date(lastMonthView.year, lastMonthView.month + 1, 1) > maxDay
     );
+    const goToMonth = (step) => {
+      setViewStart(first + step);
+      setFocused(clampDate(addMonths(focused, step), minDay, maxDay));
+    };
     const commit = (next) => {
       if (customValue === void 0) setSelfValue(next);
       if (onChange) onChange(next);
@@ -263,139 +284,153 @@ var CalendarComponent = _react2.default.forwardRef(
       "--calendar-week-color": theme.palette.accents_4,
       ...style
     };
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         ref,
         className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Calendar_module_css_default.calendar, className),
         style: calendarStyle,
         ...props,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.header, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "button",
-              {
-                type: "button",
-                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
-                "aria-label": previousLabel,
-                disabled: previousDisabled,
-                onClick: () => setFocused(clampDate(addMonths(focused, -1), minDay, maxDay)),
-                children: "\u2039"
-              }
-            ),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: headingId, className: Calendar_module_css_default.title, "aria-live": "polite", children: formats.month.format(focused) }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "button",
-              {
-                type: "button",
-                className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
-                "aria-label": nextLabel,
-                disabled: nextDisabled,
-                onClick: () => setFocused(clampDate(addMonths(focused, 1), minDay, maxDay)),
-                children: "\u203A"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "table",
-            {
-              ref: gridRef,
-              role: "grid",
-              "aria-labelledby": headingId,
-              className: Calendar_module_css_default.table,
-              "aria-multiselectable": mode !== "single" || void 0,
-              onMouseLeave: () => setHovered(null),
-              children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
-                  showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { role: "columnheader", className: Calendar_module_css_default.th }),
-                  weekdays.map((weekday) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    "th",
-                    {
-                      role: "columnheader",
-                      scope: "col",
-                      className: Calendar_module_css_default.th,
-                      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "abbr", { title: weekday.long, children: weekday.short })
-                    },
-                    weekday.long
-                  ))
-                ] }) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: weeks.map((week, index) => {
-                  const reference = week.find(Boolean);
-                  const weekNumber = getISOWeek(
-                    addDays(reference, 3 - week.indexOf(reference))
-                  );
-                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
-                    showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      "th",
-                      {
-                        role: "rowheader",
-                        scope: "row",
-                        className: Calendar_module_css_default.weekNumber,
-                        "aria-label": `${weekLabel} ${weekNumber}`,
-                        children: weekNumber
-                      }
-                    ),
-                    week.map((date, cell) => {
-                      if (!date)
-                        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          "td",
-                          {
-                            role: "gridcell",
-                            className: Calendar_module_css_default.td,
-                            "aria-hidden": "true"
-                          },
-                          cell
-                        );
-                      const selectedDay = isSelected(date);
-                      const outside = date.getMonth() !== month;
-                      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        "td",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            ref: gridRef,
+            className: Calendar_module_css_default.months,
+            onMouseLeave: () => setHovered(null),
+            children: monthViews.map(({ month, date: monthDate, weeks }, step) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.month, children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Calendar_module_css_default.header, children: [
+                step === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": previousLabel,
+                    disabled: previousDisabled,
+                    onClick: () => goToMonth(-1),
+                    children: "\u2039"
+                  }
+                ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    id: `${headingId}-${step}`,
+                    className: Calendar_module_css_default.title,
+                    "aria-live": "polite",
+                    children: formats.month.format(monthDate)
+                  }
+                ),
+                step === count - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.button, Calendar_module_css_default.navButton),
+                    "aria-label": nextLabel,
+                    disabled: nextDisabled,
+                    onClick: () => goToMonth(1),
+                    children: "\u203A"
+                  }
+                ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Calendar_module_css_default.navSpacer, "aria-hidden": "true" })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "table",
+                {
+                  role: "grid",
+                  "aria-labelledby": `${headingId}-${step}`,
+                  className: Calendar_module_css_default.table,
+                  "aria-multiselectable": mode !== "single" || void 0,
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
+                      showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { role: "columnheader", className: Calendar_module_css_default.th }),
+                      weekdays.map((weekday) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        "th",
                         {
-                          role: "gridcell",
-                          className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.td, {
-                            [Calendar_module_css_default.inRange]: isInRange(date),
-                            [Calendar_module_css_default.rangeStart]: Boolean(
-                              low && isSameDay(date, low) && high
-                            ),
-                            [Calendar_module_css_default.rangeEnd]: Boolean(
-                              high && isSameDay(date, high) && low
-                            )
-                          }),
-                          "aria-selected": selectedDay || isInRange(date),
-                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                            "button",
+                          role: "columnheader",
+                          scope: "col",
+                          className: Calendar_module_css_default.th,
+                          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "abbr", { title: weekday.long, children: weekday.short })
+                        },
+                        weekday.long
+                      ))
+                    ] }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: weeks.map((week, index) => {
+                      const reference = week.find(Boolean);
+                      const weekNumber = getISOWeek(
+                        addDays(reference, 3 - week.indexOf(reference))
+                      );
+                      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { role: "row", children: [
+                        showWeekNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                          "th",
+                          {
+                            role: "rowheader",
+                            scope: "row",
+                            className: Calendar_module_css_default.weekNumber,
+                            "aria-label": `${weekLabel} ${weekNumber}`,
+                            children: weekNumber
+                          }
+                        ),
+                        week.map((date, cell) => {
+                          if (!date)
+                            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              "td",
+                              {
+                                role: "gridcell",
+                                className: Calendar_module_css_default.td,
+                                "aria-hidden": "true"
+                              },
+                              cell
+                            );
+                          const selectedDay = isSelected(date);
+                          const outside = date.getMonth() !== month;
+                          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                            "td",
                             {
-                              type: "button",
-                              "data-date": toISO(date),
-                              "aria-label": formats.day.format(date),
-                              "aria-current": isSameDay(date, today) ? "date" : void 0,
-                              className: _chunk5KUROAEPjs.joinClasses.call(void 0, 
-                                Calendar_module_css_default.button,
-                                Calendar_module_css_default.dayButton,
+                              role: "gridcell",
+                              className: _chunk5KUROAEPjs.joinClasses.call(void 0, Calendar_module_css_default.td, {
+                                [Calendar_module_css_default.inRange]: isInRange(date),
+                                [Calendar_module_css_default.rangeStart]: Boolean(
+                                  low && isSameDay(date, low) && high
+                                ),
+                                [Calendar_module_css_default.rangeEnd]: Boolean(
+                                  high && isSameDay(date, high) && low
+                                )
+                              }),
+                              "aria-selected": selectedDay || isInRange(date),
+                              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                                "button",
                                 {
-                                  [Calendar_module_css_default.selected]: selectedDay,
-                                  [Calendar_module_css_default.today]: isSameDay(date, today),
-                                  [Calendar_module_css_default.outside]: outside
+                                  type: "button",
+                                  "data-date": toISO(date),
+                                  "aria-label": formats.day.format(date),
+                                  "aria-current": isSameDay(date, today) ? "date" : void 0,
+                                  className: _chunk5KUROAEPjs.joinClasses.call(void 0, 
+                                    Calendar_module_css_default.button,
+                                    Calendar_module_css_default.dayButton,
+                                    {
+                                      [Calendar_module_css_default.selected]: selectedDay,
+                                      [Calendar_module_css_default.today]: isSameDay(date, today),
+                                      [Calendar_module_css_default.outside]: outside
+                                    }
+                                  ),
+                                  tabIndex: isSameDay(date, focused) ? 0 : -1,
+                                  disabled: isDisabled(date),
+                                  onClick: () => select(date),
+                                  onMouseEnter: () => isRange && setHovered(date),
+                                  onKeyDown: (event) => keyDownHandler(event, date),
+                                  children: date.getDate()
                                 }
-                              ),
-                              tabIndex: isSameDay(date, focused) ? 0 : -1,
-                              disabled: isDisabled(date),
-                              onClick: () => select(date),
-                              onMouseEnter: () => isRange && setHovered(date),
-                              onKeyDown: (event) => keyDownHandler(event, date),
-                              children: date.getDate()
-                            }
-                          )
-                        },
-                        cell
-                      );
-                    })
-                  ] }, index);
-                }) })
-              ]
-            }
-          )
-        ]
+                              )
+                            },
+                            cell
+                          );
+                        })
+                      ] }, index);
+                    }) })
+                  ]
+                }
+              )
+            ] }, step))
+          }
+        )
       }
     );
   }

package/dist/{chunk-6KMHJRCY.js → chunk-TDJGMSGT.js}

@@ -25,6 +25,7 @@ var CssBaseline = ({
         html {
           font-size: 16px;
           --bolioui-icons-background: ${theme.palette.background};
+          box-sizing: border-box;
         }
 
         body {

package/dist/{chunk-FQU5SKDF.js → chunk-WFGUAR7K.js}

@@ -6,10 +6,10 @@ var _chunkHKOESPKZjs = require('./chunk-HKOESPKZ.js');
 var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
 
 
-var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
 
 
-var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
 
 
 
@@ -127,7 +127,7 @@ var CollapseContext = _react2.default.createContext(defaultContext);
 var useCollapseContext = () => _react2.default.useContext(CollapseContext);
 
 // css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Collapse/Collapse.module.css.bolio-css-module-source
-var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
+var Collapse_module_css_default = { "view": "Collapse-module_view__wymqp", "title": "Collapse-module_title__ceZ1h", "trigger": "Collapse-module_trigger__0Q0YR", "label": "Collapse-module_label__tdCh3", "subtitle": "Collapse-module_subtitle__wv5KS", "content": "Collapse-module_content__xZkpG" };
 
 // core/Collapse/Collapse.tsx
 
@@ -137,6 +137,9 @@ var CollapseComponent = _react2.default.forwardRef(
     title,
     subtitle,
     initialVisible = false,
+    visible: controlledVisible,
+    onVisibleChange,
+    disabled = false,
     shadow = false,
     className = "",
     index,
@@ -146,7 +149,12 @@ var CollapseComponent = _react2.default.forwardRef(
     const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
     const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
     const { values, updateValues } = useCollapseContext();
-    const [visible, setVisible, visibleRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialVisible);
+    const [selfVisible, setVisible, visibleRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, initialVisible);
+    const isControlled = controlledVisible !== void 0;
+    const visible = isControlled ? controlledVisible : selfVisible;
+    const baseId = _react.useId.call(void 0, );
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
     if (!title) {
       _chunkAXYDJGTNjs.log_warning_default.call(void 0, '"title" is required.', "Collapse");
     }
@@ -156,15 +164,12 @@ var CollapseComponent = _react2.default.forwardRef(
       setVisible(isActive);
     }, [index, setVisible, values]);
     const clickHandler = () => {
-      const next = !visibleRef.current;
-      setVisible(next);
+      if (disabled) return;
+      const next = !(isControlled ? controlledVisible : visibleRef.current);
+      if (!isControlled) setVisible(next);
+      if (onVisibleChange) onVisibleChange(next);
       if (updateValues) updateValues(index, next);
     };
-    const keyDownHandler = (event) => {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      event.preventDefault();
-      clickHandler();
-    };
     const collapseStyle = shadow ? {
       boxShadow: theme.expressiveness.shadowSmall,
       border: "none",
@@ -195,27 +200,29 @@ var CollapseComponent = _react2.default.forwardRef(
             "div",
             {
               className: Collapse_module_css_default.view,
-              role: "button",
-              tabIndex: 0,
-              "aria-expanded": visible,
               onClick: clickHandler,
-              onKeyDown: keyDownHandler,
               style: {
-                "--collapse-focus-color": theme.palette.primary
+                "--collapse-focus-color": theme.palette.primary,
+                cursor: disabled ? "not-allowed" : void 0
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  "div",
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: Collapse_module_css_default.title, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                  "button",
                   {
-                    className: Collapse_module_css_default.title,
+                    type: "button",
+                    id: triggerId,
+                    className: Collapse_module_css_default.trigger,
+                    "data-collapse-trigger": "",
+                    "aria-expanded": visible,
+                    "aria-controls": panelId,
+                    disabled,
                     style: { color: theme.palette.foreground },
                     children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: title }),
-                      " ",
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: Collapse_module_css_default.label, children: title }),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseIcon_default, { active: visible })
                     ]
                   }
-                ),
+                ) }),
                 subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "div",
                   {
@@ -230,9 +237,10 @@ var CollapseComponent = _react2.default.forwardRef(
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, expand_default, { isExpanded: visible, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "div",
             {
+              id: panelId,
               className: Collapse_module_css_default.content,
               style: {
-                padding: `${SCALES.pt(1.2)} ${SCALES.pr(0)} ${SCALES.pb(1.2)} ${SCALES.pl(0)}`
+                padding: `${SCALES.pt(0.6)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)}`
               },
               children
             }
@@ -259,6 +267,7 @@ function CollapseGroupComponent({
   accordion = true,
   className = "",
   style,
+  onKeyDown,
   ...props
 }) {
   const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
@@ -290,6 +299,22 @@ function CollapseGroupComponent({
     () => _chunkUX2B3G6Ujs.setChildrenIndex.call(void 0, children, [Collapse_default]),
     [children]
   );
+  const keyDownHandler = (event) => {
+    if (onKeyDown) onKeyDown(event);
+    const { key } = event;
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return;
+    const triggers = Array.from(
+      event.currentTarget.querySelectorAll(
+        "[data-collapse-trigger]"
+      )
+    ).filter((trigger) => !trigger.disabled);
+    const current = triggers.indexOf(event.target);
+    if (current < 0) return;
+    event.preventDefault();
+    const last = triggers.length - 1;
+    const next = key === "Home" ? 0 : key === "End" ? last : key === "ArrowDown" ? (current + 1) % triggers.length : (current + last) % triggers.length;
+    triggers[next].focus();
+  };
   const groupStyle = {
     width: SCALES.width(1, "auto"),
     height: SCALES.height(1, "auto"),
@@ -297,7 +322,16 @@ function CollapseGroupComponent({
     margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`,
     ...style
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classes, ...props, style: groupStyle, children: hasIndexChildren }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapseContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: classes,
+      ...props,
+      onKeyDown: keyDownHandler,
+      style: groupStyle,
+      children: hasIndexChildren
+    }
+  ) });
 }
 CollapseGroupComponent.displayName = "BolioUICollapseGroup";
 var CollapseGroup = _chunkMAICNLTYjs.with_scale_default.call(void 0, CollapseGroupComponent);