@adyen/bento-vue2 1.9.0 → 1.10.0

package/dist/chunks/{listbox.a117e6d4.js → listbox.163433c5.js}

@@ -1,89 +1,89 @@
-import { computed as r, ref as T, onMounted as J, onUnmounted as ve, watch as Q, defineComponent as D, toRef as Z } from "vue";
-import { B as F } from "./index.b201e81d.js";
-import { BentoLoadingIndicator as _e } from "../loading-indicator.js";
+import { computed as c, ref as T, onMounted as Z, onUnmounted as _e, watch as ee, defineComponent as N, toRef as Y } from "vue";
+import { B as w } from "./index.858b0720.js";
+import { BentoLoadingIndicator as ve } from "../loading-indicator.js";
 import { BentoEmptyState as me } from "../empty-state.js";
-import { u as K } from "./i18n.eb5b985b.js";
+import { u as j } from "./i18n.eb5b985b.js";
 import { d as fe } from "./debounce.b5ef6acf.js";
+import { n as P } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import { C as ge } from "./checkmark.a6ed8f47.js";
-import { B, a as q } from "./keyboard-navigation.ca47dfa8.js";
-import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./checkbox.65743b08.js";
+import { B as k, a as H } from "./keyboard-navigation.ca47dfa8.js";
+import { B as X } from "./checkbox.f6f6ce39.js";
 import "./index.4c062058.js";
-import { C as ye, a as Ee } from "./chevron-up.81185563.js";
-import { B as Se, a as H } from "./loading-button.459b9ab4.js";
-import { o as xe } from "./resize.a041304d.js";
+import { C as ye, a as pe } from "./chevron-up.81185563.js";
+import { B as xe, a as J } from "./loading-button.7b5d0c22.js";
+import { o as Se } from "./resize.a041304d.js";
 import "../assets/listbox.css";
-const ee = (t, e, l, s) => {
-  const n = r(
+const te = (t, e, l, s) => {
+  const n = c(
     () => {
-      var c, v;
-      return !!((c = t.value) != null && c.length) && ((v = t.value) == null ? void 0 : v.length) === e.value.length;
+      var a, d;
+      return !!((a = t.value) != null && a.length) && ((d = t.value) == null ? void 0 : d.length) === e.value.length;
     }
-  ), o = r(() => {
-    var c;
-    return t.value == null || t.value.length === 0 ? !1 : ((c = t.value) == null ? void 0 : c.length) !== e.value.length;
+  ), o = c(() => {
+    var a;
+    return t.value == null || t.value.length === 0 ? !1 : ((a = t.value) == null ? void 0 : a.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
     isIndeterminate: o,
-    toggleSelectAll: (c) => {
-      c ? l() : s();
+    toggleSelectAll: (a) => {
+      a ? l() : s();
     }
   };
 };
-function pe(t, { disabled: e, itemHeight: l, overscan: s = 5, prefixHeight: n }) {
-  const o = T(null), _ = T([]), c = T(0), v = T(0), b = T(0);
-  let S;
-  const L = r(() => {
-    const d = typeof l == "number" ? t.value.length * l : t.value.reduce((g, x, C) => g + l(C), 0), y = typeof l == "number" ? c.value * l : t.value.slice(0, c.value).reduce((g, x, C) => g + l(C), 0);
+function Ee(t, { disabled: e, itemHeight: l, overscan: s = 5, prefixHeight: n }) {
+  const o = T(null), m = T([]), a = T(0), d = T(0), u = T(0);
+  let x;
+  const O = c(() => {
+    const g = typeof l == "number" ? t.value.length * l : t.value.reduce((S, _, y) => S + l(y), 0), C = typeof l == "number" ? a.value * l : t.value.slice(0, a.value).reduce((S, _, y) => S + l(y), 0);
     return {
       style: {
-        marginTop: `${y}px`,
-        height: `${d - y}px`
+        marginTop: `${C}px`,
+        height: `${g - C}px`
       }
     };
-  }), p = () => {
-    const d = (n == null ? void 0 : n.value) ?? 0, y = Math.max(o.value.scrollTop - d, 0);
+  }), L = () => {
+    const g = (n == null ? void 0 : n.value) ?? 0, C = Math.max(o.value.scrollTop - g, 0);
     if (typeof l == "number")
-      return Math.floor(y / l);
-    let g = 0, x = 0;
-    for (let C = 0; C < t.value.length; C += 1) {
-      const M = l(C);
-      if (g += M, g >= y) {
-        x = C;
+      return Math.floor(C / l);
+    let S = 0, _ = 0;
+    for (let y = 0; y < t.value.length; y += 1) {
+      const I = l(y);
+      if (S += I, S >= C) {
+        _ = y;
         break;
       }
     }
-    return x;
+    return _;
   }, f = () => {
-    if (b.value = o.value.clientHeight, typeof l == "number")
-      return Math.ceil(b.value / l);
-    const d = c.value ?? 0;
-    let y = 0, g = 0;
-    for (let x = d; x < t.value.length; x += 1) {
-      const C = l(x);
-      if (y += C, g = x, y > b.value)
+    if (u.value = o.value.clientHeight, typeof l == "number")
+      return Math.ceil(u.value / l);
+    const g = a.value ?? 0;
+    let C = 0, S = 0;
+    for (let _ = g; _ < t.value.length; _ += 1) {
+      const y = l(_);
+      if (C += y, S = _, C > u.value)
         break;
     }
-    return g - d;
-  }, O = () => {
+    return S - g;
+  }, E = () => {
     if (o.value) {
-      const d = f();
-      c.value = p(), v.value = Math.min(c.value + d + s, t.value.length), _.value = t.value.slice(c.value, v.value);
+      const g = f();
+      a.value = L(), d.value = Math.min(a.value + g + s, t.value.length), m.value = t.value.slice(a.value, d.value);
     }
-  }, I = () => {
-    O();
+  }, B = () => {
+    E();
   };
-  e || (J(() => {
-    o.value && (b.value = o.value.clientHeight, S = xe(o.value, ({ clientHeight: d }) => {
-      b.value = d, O();
-    }), O());
-  }), ve(() => {
-    S == null || S.disconnect();
-  }), Q(
+  e || (Z(() => {
+    o.value && (u.value = o.value.clientHeight, x = Se(o.value, ({ clientHeight: g }) => {
+      u.value = g, E();
+    }), E());
+  }), _e(() => {
+    x == null || x.disconnect();
+  }), ee(
     () => t.value,
     () => {
-      O();
+      E();
     }
   ));
   const A = {
@@ -100,13 +100,41 @@ function pe(t, { disabled: e, itemHeight: l, overscan: s = 5, prefixHeight: n })
   } : {
     containerRef: o,
     containerProps: A,
-    onScroll: I,
-    list: _,
-    wrapperProps: L
+    onScroll: B,
+    list: m,
+    wrapperProps: O
   };
 }
-var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), P = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(P || {});
-const Ce = D({
+var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), $ = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))($ || {});
+const Ce = N({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: w
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+var he = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category" }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
+}, Te = [], Oe = /* @__PURE__ */ P(
+  Ce,
+  he,
+  Te,
+  !1,
+  null,
+  "4aa8cc6e",
+  null,
+  null
+);
+const Le = Oe.exports, Ae = N({
   name: "bento-listbox-option",
   props: {
     /**
@@ -120,13 +148,13 @@ const Ce = D({
   },
   emits: [i.CLICK, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const l = r(() => ({
+    const l = c(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: B,
+      BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: i,
       // Values
       conditionalClasses: l,
@@ -134,13 +162,13 @@ const Ce = D({
       onClick: (o) => {
         e(i.CLICK, o);
       },
-      onOptionSelected: (o, _) => {
-        e(o, _);
+      onOptionSelected: (o, m) => {
+        e(o, m);
       }
     };
   }
 });
-var he = function() {
+var Ie = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, s);
@@ -149,21 +177,21 @@ var he = function() {
   }, function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "tab", 9, s.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, s);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, Te = [], Oe = /* @__PURE__ */ N(
-  Ce,
-  he,
-  Te,
+}, Be = [], Re = /* @__PURE__ */ P(
+  Ae,
+  Ie,
+  Be,
   !1,
   null,
   "d7fb415c",
   null,
   null
 );
-const U = Oe.exports, Le = D({
+const V = Re.exports, ke = N({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: U,
-    BentoTypography: F,
+    BentoListboxOption: V,
+    BentoTypography: w,
     CheckmarkIcon: ge
   },
   props: {
@@ -186,9 +214,9 @@ const U = Oe.exports, Le = D({
   },
   emits: [i.ENTER, i.SELECT, i.SPACE, i.TAB],
   setup(t, { emit: e }) {
-    const l = (_) => {
-      t.disabled || e(_, t.option.value);
-    }, s = r(() => t.disabled ? !0 : null), n = r(() => t.selected ? !0 : null), o = r(() => t.disabled ? -1 : 0);
+    const l = (m) => {
+      t.disabled || e(m, t.option.value);
+    }, s = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), o = c(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: s,
@@ -201,7 +229,7 @@ const U = Oe.exports, Le = D({
     };
   }
 });
-var Ae = function() {
+var De = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: e._d({ click: function(s) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -214,22 +242,22 @@ var Ae = function() {
   }]) }, [e._t("default", function() {
     return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, Ie = [], Be = /* @__PURE__ */ N(
-  Le,
-  Ae,
-  Ie,
+}, Ne = [], Pe = /* @__PURE__ */ P(
+  ke,
+  De,
+  Ne,
   !1,
   null,
   "092ed5ee",
   null,
   null
 );
-const Re = Be.exports, te = ({ items: t, isOptionDisabled: e }, l) => {
-  const s = r(() => t.value.length - 1), n = T(0);
-  J(() => {
+const Me = Pe.exports, se = ({ items: t, isOptionDisabled: e }, l) => {
+  const s = c(() => t.value.length - 1), n = T(0);
+  Z(() => {
     e && (n.value = t.value.findIndex((f) => !e(f)));
   });
-  const o = (f) => !e || !!e && e(t.value[f]), _ = (f) => !e || !!e && !e(t.value[f]), c = (f) => {
+  const o = (f) => !e || !!e && e(t.value[f]), m = (f) => !e || !!e && !e(t.value[f]), a = (f) => {
     switch (f) {
       case "increase":
         n.value += 1;
@@ -238,47 +266,48 @@ const Re = Be.exports, te = ({ items: t, isOptionDisabled: e }, l) => {
         n.value -= 1;
         break;
     }
-  }, v = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: O }, I, A) => {
-    n.value !== f && (O ? _(f) && c(A) : (c(A), o(n.value) && I()), l(n.value));
-  }, b = () => {
+  }, d = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: E }, B, A) => {
+    n.value !== f && (E ? m(f) && a(A) : (a(A), o(n.value) && B()), l(n.value));
+  }, u = () => {
     const f = n.value === s.value - 2;
-    v(
+    d(
       {
         isItemBeforeEdgeCaseItem: f,
         edgeCaseItem: s.value
       },
-      b,
+      u,
       "increase"
       /* INCREASE */
     );
-  }, S = () => {
+  }, x = () => {
     const f = n.value === 1;
-    v(
+    d(
       {
         edgeCaseItem: 0,
         isItemBeforeEdgeCaseItem: f
       },
-      S,
+      x,
       "decrease"
       /* DECREASE */
     );
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, o(n.value) ? b() : l(n.value);
+      n.value = 0, o(n.value) ? u() : l(n.value);
     },
     moveToLastElement: () => {
-      n.value = s.value, o(n.value) ? S() : l(n.value);
+      n.value = s.value, o(n.value) ? x() : l(n.value);
     },
-    moveToNextElement: b,
-    moveToPreviousElement: S
+    moveToNextElement: u,
+    moveToPreviousElement: x
   };
-}, ke = D({
+}, $e = N({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectOption: Re
+    BentoListboxSingleSelectCategory: Le,
+    BentoListboxSingleSelectOption: Me
   },
-  directives: { BentoKeyboardNavigationDirective: q },
+  directives: { BentoKeyboardNavigationDirective: H },
   inheritAttrs: !1,
   props: {
     /**
@@ -313,28 +342,32 @@ const Re = Be.exports, te = ({ items: t, isOptionDisabled: e }, l) => {
     selectedValue: {
       type: [String, Number],
       default: void 0
-    }
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
   },
   emits: [i.SELECT, i.ENTER, i.SPACE, i.TAB],
   setup(t, { emit: e, slots: l }) {
-    const s = T([]), n = (p) => (f) => {
-      e(p, f);
-    }, o = (p) => s.value[p].$el.focus(), { moveToNextElement: _, moveToPreviousElement: c, moveToFirstElement: v, moveToLastElement: b } = te(
+    const s = T([]), n = c(() => !!t.items.find(({ items: f }) => !!f)), o = (f) => (E) => {
+      e(f, E);
+    }, m = (f) => s.value[f].$el.focus(), { moveToNextElement: a, moveToPreviousElement: d, moveToFirstElement: u, moveToLastElement: x } = se(
       {
-        items: Z(t, "items"),
+        items: Y(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
-      o
-    ), S = {
-      [B.ARROW_UP]: c,
-      [B.ARROW_DOWN]: _,
-      [B.HOME]: v,
-      [B.END]: b
+      m
+    ), O = {
+      [k.ARROW_UP]: d,
+      [k.ARROW_DOWN]: a,
+      [k.HOME]: u,
+      [k.END]: x
     }, L = {
-      [i.SELECT]: n(i.SELECT),
-      [i.SPACE]: n(i.SPACE),
-      [i.TAB]: n(i.TAB),
-      [i.ENTER]: n(i.ENTER)
+      [i.SELECT]: o(i.SELECT),
+      [i.SPACE]: o(i.SPACE),
+      [i.TAB]: o(i.TAB),
+      [i.ENTER]: o(i.ENTER)
     };
     return {
       // Enums
@@ -342,49 +375,59 @@ const Re = Be.exports, te = ({ items: t, isOptionDisabled: e }, l) => {
       // Values
       listboxItemRef: s,
       slots: l,
+      // Computed
+      hasCategories: n,
       // Methods
-      onOptionSelected: n,
+      onOptionSelected: o,
       // Keyboard navigation
-      listboxListeners: S,
+      listboxListeners: O,
       listboxOptionListeners: L
     };
   }
 });
-var De = function() {
+var we = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), e._l(e.items, function(s) {
+  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(s) {
+    return l("bento-listbox-single-select-category", { key: s.value, attrs: { "category-label": s.label, role: "group" } }, e._l(s.items, function(n) {
+      return l("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(o, m) {
+        return { key: m, fn: function(a) {
+          return [e._t(m, null, null, a)];
+        } };
+      })], null, !0) }, e.listboxOptionListeners));
+    }), 1);
+  }) : e._l(e.items, function(s) {
     return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
-      return { key: o, fn: function(_) {
-        return [e._t(o, null, null, _)];
+      return { key: o, fn: function(m) {
+        return [e._t(o, null, null, m)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
-  }), 1);
-}, Ne = [], Pe = /* @__PURE__ */ N(
-  ke,
-  De,
-  Ne,
+  })], 2);
+}, Ge = [], Fe = /* @__PURE__ */ P(
+  $e,
+  we,
+  Ge,
   !1,
   null,
   null,
   null,
   null
 );
-const Me = Pe.exports;
-var le = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t))(le || {}), G = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(G || {});
-const $e = {
+const Ue = Fe.exports;
+var q = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(q || {}), U = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(U || {});
+const Ye = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, we = D({
-  i18n: { messages: $e },
+}, Ve = N({
+  i18n: { messages: Ye },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: j,
-    BentoTypography: F,
-    BentoListboxOption: U,
+    BentoCheckbox: X,
+    BentoTypography: w,
+    BentoListboxOption: V,
     ChevronDownIcon: ye,
-    ChevronUpIcon: Ee
+    ChevronUpIcon: pe
   },
   props: {
     /**
@@ -419,86 +462,100 @@ const $e = {
     selectedItemsList: {
       type: Array,
       default: () => []
-    }
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [G.SELECT_CATEGORY, G.UNSELECT_CATEGORY],
+  emits: [U.SELECT_CATEGORY, U.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const l = T(!1), { t: s } = K(), n = (d) => t.isOptionDisabled ? t.isOptionDisabled(d) : !1, o = r(
-      () => t.category.items.every((d) => n(d))
-    ), _ = r(() => ({
-      [`b-listbox-multi-select-category--${le.DISABLED}`]: o.value
-    })), c = (d) => {
-      d.preventDefault(), l.value = !l.value;
-    }, v = (d) => {
-      var x;
-      const y = n(d), g = ((x = t.selectedItemsList) == null ? void 0 : x.includes(d.value)) || !1;
-      return { isDisabled: y, isPreSelected: g };
-    }, b = r(
-      () => t.category.items.filter((d) => {
-        const { isDisabled: y, isPreSelected: g } = v(d);
-        return y && g || !y;
+    const l = T(!1), { t: s } = j(), n = (_) => t.isOptionDisabled ? t.isOptionDisabled(_) : !1, o = c(
+      () => t.category.items.every((_) => n(_))
+    ), m = Y(t, "staticCategories"), a = c(() => l.value || t.staticCategories), d = c(() => ({
+      [`b-listbox-multi-select-category--${q.DISABLED}`]: o.value,
+      [`b-listbox-multi-select-category--${q.STATIC_CATEGORY}`]: t.staticCategories
+    })), u = (_) => {
+      _.preventDefault(), l.value = !l.value;
+    }, x = (_) => {
+      var M;
+      const y = n(_), I = ((M = t.selectedItemsList) == null ? void 0 : M.includes(_.value)) || !1;
+      return { isDisabled: y, isPreSelected: I };
+    }, O = c(
+      () => t.category.items.filter((_) => {
+        const { isDisabled: y, isPreSelected: I } = x(_);
+        return y && I || !y;
       })
-    ), S = r(
+    ), L = c(
       () => {
-        var d;
-        return (d = b.value) == null ? void 0 : d.filter(
+        var _;
+        return (_ = O.value) == null ? void 0 : _.filter(
           ({ value: y }) => {
-            var g;
-            return (g = t.selectedItemsList) == null ? void 0 : g.includes(y);
+            var I;
+            return (I = t.selectedItemsList) == null ? void 0 : I.includes(y);
           }
         );
       }
-    ), L = r(() => {
-      const d = l.value ? "categoryOpened" : "categoryClosed";
-      return s(d, { category: t.category.label });
-    }), p = () => {
-      e(G.SELECT_CATEGORY);
-    }, f = () => {
-      e(G.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: I, toggleSelectAll: A } = ee(
-      S,
-      b,
-      p,
-      f
+    ), f = c(() => {
+      const _ = l.value ? "categoryOpened" : "categoryClosed";
+      return s(_, { category: t.category.label });
+    }), E = c(
+      () => ({
+        el: "span",
+        variant: t.staticCategories ? "caption" : "body"
+      })
+    ), B = () => {
+      e(U.SELECT_CATEGORY);
+    }, A = () => {
+      e(U.UNSELECT_CATEGORY);
+    }, { isAllSelected: g, isIndeterminate: C, toggleSelectAll: S } = te(
+      L,
+      O,
+      B,
+      A
     );
     return {
       // Values
-      chevronTitle: L,
-      conditionalClass: _,
+      chevronTitle: f,
+      conditionalClass: d,
       hasAllPropsDisabled: o,
       isOpen: l,
-      isAllSelected: O,
-      isIndeterminate: I,
+      isAllSelected: g,
+      isIndeterminate: C,
+      isStaticCategory: m,
+      // Computed
+      showItemChildren: a,
+      categoryLabelProps: E,
       // Methods
-      toggleOpen: c,
-      toggleSelectAll: A
+      toggleOpen: u,
+      toggleSelectAll: S
     };
   }
 });
-var Ge = function() {
+var ze = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [l("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(s) {
+  return e._self._setupProxy, l("div", [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [e.isStaticCategory ? e._e() : l("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(s) {
     return e.toggleOpen.apply(null, arguments);
-  } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }] }, [e._t("default")], 2)], 1);
-}, Fe = [], Ue = /* @__PURE__ */ N(
-  we,
-  Ge,
-  Fe,
+  } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
+}, We = [], Ke = /* @__PURE__ */ P(
+  Ve,
+  ze,
+  We,
   !1,
   null,
-  "360ce3ac",
+  "f360ac3d",
   null,
   null
 );
-const Ye = Ue.exports;
-var k = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(k || {});
-const Ve = D({
+const qe = Ke.exports;
+var D = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(D || {});
+const je = N({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: j,
-    BentoListboxOption: U,
-    BentoTypography: F,
-    ListboxMultiSelectCategory: Ye
+    BentoCheckbox: X,
+    BentoListboxOption: V,
+    BentoTypography: w,
+    ListboxMultiSelectCategory: qe
   },
   props: {
     /**
@@ -549,27 +606,32 @@ const Ve = D({
     selectedItemsList: {
       type: Array,
       default: () => []
-    }
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    k.TOGGLE_CHECKBOX_SELECTION,
-    k.SELECT_CATEGORY,
-    k.UNSELECT_CATEGORY
+    D.TOGGLE_CHECKBOX_SELECTION,
+    D.SELECT_CATEGORY,
+    D.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const l = (v) => {
-      e(k.TOGGLE_CHECKBOX_SELECTION, v);
-    }, s = (v) => !!v.items, n = (v) => {
-      const b = t.isMultiLevel && t.searching;
-      return v.description && (!t.isMultiLevel || b);
-    }, o = (v) => v.items ? !!v.items.find((b) => t.selectedItemsList.includes(b.value)) : t.selectedItemsList.includes(v.value), _ = (v, b) => {
-      if (s(b))
-        return e(v ? k.SELECT_CATEGORY : k.UNSELECT_CATEGORY, b);
-      l(b.value);
+    const l = (d) => {
+      e(D.TOGGLE_CHECKBOX_SELECTION, d);
+    }, s = (d) => !!d.items, n = (d) => {
+      const u = t.isMultiLevel && t.searching;
+      return d.description && (!t.isMultiLevel || u);
+    }, o = (d) => d.items ? !!d.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(d.value), m = (d, u) => {
+      if (s(u))
+        return e(d ? D.SELECT_CATEGORY : D.UNSELECT_CATEGORY, u);
+      l(u.value);
     };
     return {
       // Values
-      conditionalClasses: r(() => ({
+      conditionalClasses: c(() => ({
+        "b-listbox-multi-select-options__static-category-option": t.staticCategories,
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
       // Methods
@@ -577,54 +639,66 @@ const Ve = D({
       isOptionSelected: o,
       shouldShowDescription: n,
       toggleCheckboxSelection: l,
-      selectSearch: _,
+      selectSearch: m,
       // Enums
       BentoListboxEvent: i,
-      ListboxMultiSelectOptionsEvent: k
+      ListboxMultiSelectOptionsEvent: D
     };
   }
 });
-var ze = function() {
+var He = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", e._l(e.items, function(s) {
     return l("div", { key: `selected-${s.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(s), "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": (n) => e.selectSearch(n, s) } }), e._t("default", function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
-    }, null, s)], 2)] : [s.items ? [l("listbox-multi-select-category", { attrs: { category: s, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
+    }, null, s)], 2)] : [s.items ? [l("listbox-multi-select-category", { attrs: { category: s, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList }, on: { "select-category": function(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s);
     }, "unselect-category": function(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s);
-    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: s.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": function(n) {
+    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: s.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null } }, [l("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": s.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, value: s.value }, on: { "update:model-value": function(n) {
       return e.toggleCheckboxSelection(s.value);
     } } }), e._t("default", function() {
       return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(s.label))]), e.shouldShowDescription(s) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(s.description) + " ")]) : e._e()], 1)];
     }, null, s)], 2)]], 2);
   }), 0);
-}, We = [], Ke = /* @__PURE__ */ N(
-  Ve,
-  ze,
-  We,
+}, Xe = [], Je = /* @__PURE__ */ P(
+  je,
+  He,
+  Xe,
   !1,
   null,
-  "23f75bdb",
+  "c9b2c61d",
   null,
   null
 );
-const qe = Ke.exports, je = {
+const Qe = Je.exports, Ze = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, He = D({
-  i18n: { messages: je },
+}, et = (t) => {
+  const e = c(() => {
+    var s;
+    return !!((s = t.value) != null && s.find(({ items: n }) => !!n));
+  }), l = c(() => {
+    var s;
+    return e.value ? (s = t.value) == null ? void 0 : s.reduce((n, o) => (o.items ? n.push(...o.items.flat()) : n.push(o), n), []) : t.value;
+  });
+  return {
+    isMultiLevelSelect: e,
+    flattenedItemsList: l
+  };
+}, tt = N({
+  i18n: { messages: Ze },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: j,
-    BentoListboxOption: U,
-    BentoTypography: F,
-    ListboxMultiSelectOptions: qe
+    BentoCheckbox: X,
+    BentoListboxOption: V,
+    BentoTypography: w,
+    ListboxMultiSelectOptions: Qe
   },
-  directives: { BentoKeyboardNavigationDirective: q },
+  directives: { BentoKeyboardNavigationDirective: H },
   props: {
     /**
      * Function that allows the options to be disabled
@@ -664,149 +738,153 @@ const qe = Ke.exports, je = {
     selectedValues: {
       type: Array,
       default: () => []
-    }
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
   },
   emits: [i.SELECT],
   setup(t, { emit: e, slots: l }) {
-    const { t: s } = K(), n = T(null), o = T(null), _ = T(null), c = T();
-    Q(
+    const { t: s } = j(), n = T(null), o = T(null), m = T(null), a = T();
+    ee(
       () => t.selectedValues,
       () => {
-        c.value = [...t.selectedValues ?? []];
+        a.value = [...t.selectedValues ?? []];
       },
       {
         immediate: !0
       }
     );
-    const v = r(() => !!t.items.find(({ items: a }) => !!a)), b = r(() => v.value ? t.items.reduce((a, u) => (u.items ? a.push(...u.items.flat()) : a.push(u), a), []) : t.items), S = (a) => {
-      var m;
-      const u = t.isOptionDisabled(a), E = ((m = c.value) == null ? void 0 : m.includes(a.value)) || !1;
-      return { isDisabled: u, isPreSelected: E };
-    }, L = r(
-      () => t.searching && v ? t.items : b.value.filter((a) => {
-        const { isDisabled: u, isPreSelected: E } = S(a);
-        return u && E || !u;
+    const { isMultiLevelSelect: d, flattenedItemsList: u } = et(Y(t, "items")), x = (r) => {
+      var v;
+      const b = t.isOptionDisabled(r), p = ((v = a.value) == null ? void 0 : v.includes(r.value)) || !1;
+      return { isDisabled: b, isPreSelected: p };
+    }, O = c(
+      () => t.searching && d ? t.items : u.value.filter((r) => {
+        const { isDisabled: b, isPreSelected: p } = x(r);
+        return b && p || !b;
       })
-    ), p = r(
+    ), L = c(
       () => {
-        var a;
-        return (a = L.value) == null ? void 0 : a.filter((u) => {
-          var E;
-          return u.items && v.value && t.searching ? u.items.filter(
+        var r;
+        return (r = O.value) == null ? void 0 : r.filter((b) => {
+          var p;
+          return b.items && d.value && t.searching ? b.items.filter(
             (R) => (t.selectedValues ?? []).includes(
               R.value
             )
-          ).length === u.items.length : (E = c.value) == null ? void 0 : E.includes(u.value);
+          ).length === b.items.length : (p = a.value) == null ? void 0 : p.includes(b.value);
         });
       }
-    ), f = () => v.value && !t.searching ? L.value.length : t.items.length, O = r(() => {
-      var E;
-      const a = f(), u = ((E = p.value) == null ? void 0 : E.length) || 0;
-      return u === 0 ? s("selectAll", { total: a }) : u === a ? s("allSelected", { total: a }) : s("numberOfTotalSelected", { number: u, total: a });
-    }), I = (a) => {
-      const u = (m) => {
-        const { isDisabled: R, isPreSelected: W } = S(m);
-        return R && W || !R;
-      }, E = a.filter(u).filter((m) => !c.value.includes(m.value)).map(({ value: m }) => m);
-      c.value = [...c.value, ...E], e(i.SELECT, c.value);
-    }, A = (a) => {
-      const u = (m) => {
-        const { isDisabled: R, isPreSelected: W } = S(m);
-        return !(R && W);
-      }, E = a.filter(u).map(({ value: m }) => m);
-      c.value = c.value.filter((m) => !(E != null && E.includes(m))), e(i.SELECT, c.value);
-    }, d = () => {
-      I(b.value);
-    }, y = () => {
-      A(b.value);
-    }, { isAllSelected: g, isIndeterminate: x, toggleSelectAll: C } = ee(
-      p,
+    ), f = () => d.value && !t.searching ? u.value.length : t.items.length, E = c(() => {
+      var v;
+      const r = O.value.length, b = f(), p = ((v = L.value) == null ? void 0 : v.length) || 0;
+      return p === 0 ? s("selectAll", { total: r }) : p === b ? s("allSelected", { total: b }) : s("numberOfTotalSelected", { number: p, total: b });
+    }), B = (r) => {
+      const b = (v) => {
+        const { isDisabled: R, isPreSelected: K } = x(v);
+        return R && K || !R;
+      }, p = r.filter(b).filter((v) => !a.value.includes(v.value)).map(({ value: v }) => v);
+      a.value = [...a.value, ...p], e(i.SELECT, a.value);
+    }, A = (r) => {
+      const b = (v) => {
+        const { isDisabled: R, isPreSelected: K } = x(v);
+        return !(R && K);
+      }, p = r.filter(b).map(({ value: v }) => v);
+      a.value = a.value.filter((v) => !(p != null && p.includes(v))), e(i.SELECT, a.value);
+    }, g = () => {
+      B(u.value);
+    }, C = () => {
+      A(u.value);
+    }, { isAllSelected: S, isIndeterminate: _, toggleSelectAll: y } = te(
       L,
-      d,
-      y
-    ), M = (a) => {
-      I(a.items);
-    }, Y = (a) => {
-      A(a.items);
-    }, V = (a, u) => {
-      let E = !1;
-      c.value = c.value.filter((m) => u === m ? (E = !0, !1) : !0), E || c.value.push(u), e(a, c.value);
-    }, $ = r(() => {
-      const a = (m) => c.value.includes(m.value), u = (m) => !!m.find((R) => a(R));
-      return t.items.filter((m) => m.items && u(m.items) ? !0 : a(m));
-    }), z = r(() => {
-      var a;
-      return ((a = $.value) == null ? void 0 : a.length) > 0;
-    }), h = r(
+      O,
+      g,
+      C
+    ), I = (r) => {
+      B(r.items);
+    }, M = (r) => {
+      A(r.items);
+    }, z = (r, b) => {
+      let p = !1;
+      a.value = a.value.filter((v) => b === v ? (p = !0, !1) : !0), p || a.value.push(b), e(r, a.value);
+    }, G = c(() => {
+      const r = (v) => a.value.includes(v.value), b = (v) => !!v.find((R) => r(R));
+      return d.value && t.staticCategories ? t.items.flatMap(({ items: R }) => R.filter(r)) : t.items.filter((v) => v.items && b(v.items) ? !0 : r(v));
+    }), W = c(() => {
+      var r;
+      return ((r = G.value) == null ? void 0 : r.length) > 0;
+    }), h = c(
       () => {
-        var a, u;
-        return ((a = p.value) == null ? void 0 : a.length) === ((u = b.value) == null ? void 0 : u.length);
+        var r, b;
+        return ((r = L.value) == null ? void 0 : r.length) === ((b = u.value) == null ? void 0 : b.length);
       }
-    ), w = r(
+    ), F = c(
       () => n.value ? [n.value] : []
-    ), se = r(
+    ), le = c(
       () => {
-        var a, u;
-        return (u = (a = o.value) == null ? void 0 : a.$children) != null && u.length ? o.value.$children : [];
+        var r, b;
+        return (b = (r = o.value) == null ? void 0 : r.$children) != null && b.length ? o.value.$children : [];
       }
-    ), ne = r(
+    ), ne = c(
       () => {
-        var a, u;
-        return (u = (a = _.value) == null ? void 0 : a.$children) != null && u.length ? _.value.$children : [];
+        var r, b;
+        return (b = (r = m.value) == null ? void 0 : r.$children) != null && b.length ? m.value.$children : [];
       }
-    ), oe = r(() => ({ label: O, value: g })), ie = r(() => [
+    ), oe = c(() => ({ label: E, value: S })), ie = c(() => [
       oe,
-      ...$.value,
-      ...b.value
-    ]), ae = (a) => {
+      ...G.value,
+      ...u.value
+    ]), ae = (r) => {
       [
-        ...w.value,
-        ...se.value,
+        ...F.value,
+        ...le.value,
         ...ne.value
-      ][a].$el.focus();
-    }, { moveToNextElement: ce, moveToPreviousElement: re, moveToFirstElement: ue, moveToLastElement: de } = te(
+      ][r].$el.focus();
+    }, { moveToNextElement: ce, moveToPreviousElement: re, moveToFirstElement: ue, moveToLastElement: de } = se(
       {
         items: T(ie),
         isOptionDisabled: t.isOptionDisabled
       },
       ae
     ), be = {
-      [B.ARROW_UP]: re,
-      [B.ARROW_DOWN]: ce,
-      [B.HOME]: ue,
-      [B.END]: de
+      [k.ARROW_UP]: re,
+      [k.ARROW_DOWN]: ce,
+      [k.HOME]: ue,
+      [k.END]: de
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
       selectedListboxItemsRef: o,
-      listboxItemsRef: _,
+      listboxItemsRef: m,
       // Values
-      isAllSelected: g,
+      isAllSelected: S,
       isAllItemsIncludingDisabled: h,
-      isAnOptionSelected: z,
-      isIndeterminate: x,
-      isMultiLevelSelect: v,
-      flattenedItemsList: b,
-      selectedItemsList: c,
-      selectAllCheckboxText: O,
-      selectedOptions: $,
+      isAnOptionSelected: W,
+      isIndeterminate: _,
+      isMultiLevelSelect: d,
+      flattenedItemsList: u,
+      selectedItemsList: a,
+      selectAllCheckboxText: E,
+      selectedOptions: G,
       slots: l,
       // Enums
       BentoListboxEvent: i,
       // Methods
-      selectAllCategory: M,
-      toggleCheckboxSelection: V,
-      toggleSelectAll: C,
-      unselectAllCategory: Y,
+      selectAllCategory: I,
+      toggleCheckboxSelection: z,
+      toggleSelectAll: y,
+      unselectAllCategory: M,
       // Events
       listboxListeners: be
     };
   }
 });
-var Xe = function() {
+var st = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": function(s) {
+  return e._self._setupProxy, l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [l("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [l("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.isAnOptionSelected ? l("div", [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory, "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
   } }, [e.BentoListboxEvent.SPACE, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s);
@@ -818,7 +896,7 @@ var Xe = function() {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
-  })], null, !0) })], 1) : e._e(), l("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(s) {
+  })], null, !0) })], 1) : e._e(), l("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isAllItemsIncludingDisabled, expression: "!isAllItemsIncludingDisabled" }] }, [l("hr", { staticClass: "b-listbox-multi-select__divider" }), l("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": e.selectedItemsList }, on: e._d({ "toggle-checkbox-selection": function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, s);
   }, "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory }, [e.BentoListboxEvent.SPACE, function(s) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, s);
@@ -831,33 +909,33 @@ var Xe = function() {
       return [e._t(n, null, null, o)];
     } };
   })], null, !0) })], 1)], 1);
-}, Je = [], Qe = /* @__PURE__ */ N(
-  He,
-  Xe,
-  Je,
+}, lt = [], nt = /* @__PURE__ */ P(
+  tt,
+  st,
+  lt,
   !1,
   null,
-  "70173dcf",
+  "2a48c62f",
   null,
   null
 );
-const X = Qe.exports, Ze = {
+const Q = nt.exports, ot = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, et = 36, tt = D({
+}, it = 36, at = N({
   name: "bento-listbox",
   components: {
     BentoEmptyState: me,
-    BentoListboxSingleSelect: Me,
-    BentoListboxMultiSelect: X,
-    BentoTypography: F,
-    BentoLoadingIndicator: _e,
-    BentoLoadingButton: Se
+    BentoListboxSingleSelect: Ue,
+    BentoListboxMultiSelect: Q,
+    BentoTypography: w,
+    BentoLoadingIndicator: ve,
+    BentoLoadingButton: xe
   },
-  directives: { BentoKeyboardNavigationDirective: q },
-  i18n: { messages: Ze },
+  directives: { BentoKeyboardNavigationDirective: H },
+  i18n: { messages: ot },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -913,13 +991,17 @@ const X = Qe.exports, Ze = {
      */
     lazyLoadType: {
       type: String,
-      default: P.NONE,
-      validator: (t) => Object.values(P).includes(t)
+      default: $.NONE,
+      validator: (t) => Object.values($).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
      */
     multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
     /**
      * Messaged displayed when no items are listed in the listbox
      */
@@ -930,7 +1012,7 @@ const X = Qe.exports, Ze = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: X.props.searching,
+    searching: Q.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -958,109 +1040,110 @@ const X = Qe.exports, Ze = {
     i.TAB
   ],
   setup(t, { emit: e, slots: l }) {
-    const s = T([]), n = Z(t, "items"), { t: o } = K(), _ = r(() => t.lazyLoadType !== P.AUTOMATIC), c = r(() => t.lazyLoadType === P.AUTOMATIC), v = () => {
+    const s = T([]), n = Y(t, "items"), { t: o } = j(), m = c(() => t.lazyLoadType !== $.AUTOMATIC), a = c(() => t.lazyLoadType === $.AUTOMATIC), d = () => {
       var h;
-      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((h = t == null ? void 0 : t.virtualScroll) != null && h.itemHeight) ? t.virtualScroll.itemHeight : et;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((h = t == null ? void 0 : t.virtualScroll) != null && h.itemHeight) ? t.virtualScroll.itemHeight : it;
     }, {
-      containerRef: b,
-      containerProps: S,
-      onScroll: L,
-      list: p,
+      containerRef: u,
+      containerProps: x,
+      onScroll: O,
+      list: L,
       wrapperProps: f
-    } = pe(n, {
-      itemHeight: v(),
+    } = Ee(n, {
+      itemHeight: d(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (t == null ? void 0 : t.multiple) || (t == null ? void 0 : t.virtualScroll) === !1 || (t == null ? void 0 : t.lazyLoadType) !== "none"
-    }), O = r(
-      () => _.value ? "true" : void 0
-    ), I = r(
-      () => _.value && t.loading ? "true" : "false"
-    ), A = r(
-      () => _.value ? "polite" : void 0
-    ), d = (h) => (w) => {
-      e(h, w);
-    }, y = () => {
+    }), E = c(
+      () => m.value ? "true" : void 0
+    ), B = c(
+      () => m.value && t.loading ? "true" : "false"
+    ), A = c(
+      () => m.value ? "polite" : void 0
+    ), g = (h) => (F) => {
+      e(h, F);
+    }, C = () => {
       e(i.SHOW_MORE);
-    }, g = fe(() => {
-      const h = b.value;
+    }, S = fe(() => {
+      const h = u.value;
       if (!h)
         return;
-      const w = Math.round(h.scrollTop) + h.clientHeight >= h.scrollHeight;
-      t.hasMoreItems && w && !t.loading && y();
-    }), x = () => {
-      c.value ? g() : L();
-    }, C = r(() => {
+      const F = Math.round(h.scrollTop) + h.clientHeight >= h.scrollHeight;
+      t.hasMoreItems && F && !t.loading && C();
+    }), _ = () => {
+      a.value ? S() : O();
+    }, y = c(() => {
       var h;
       return t.searching && ((h = t.items) == null ? void 0 : h.length) === 0;
-    }), M = r(
-      () => t.lazyLoadType === P.BUTTON && t.hasMoreItems
-    ), Y = r(
-      () => t.loading ? H.LOADING : H.START
-    ), V = r(() => t.loading ? o("loading") : o("showMore")), $ = r(() => ({
+    }), I = c(
+      () => t.lazyLoadType === $.BUTTON && t.hasMoreItems
+    ), M = c(
+      () => t.loading ? J.LOADING : J.START
+    ), z = c(() => t.loading ? o("loading") : o("showMore")), G = c(() => ({
       ...t.emptyState,
       variant: "condensed"
-    })), z = {
-      [i.SELECT]: d(i.SELECT),
-      [i.SPACE]: d(i.SPACE),
-      [i.TAB]: d(i.TAB),
-      [i.ENTER]: d(i.ENTER)
+    })), W = {
+      [i.SELECT]: g(i.SELECT),
+      [i.SPACE]: g(i.SPACE),
+      [i.TAB]: g(i.TAB),
+      [i.ENTER]: g(i.ENTER)
     };
     return {
       // Refs
-      listboxRef: b,
+      listboxRef: u,
       listboxItemRef: s,
       // a11y
-      ariaAtomic: O,
-      ariaBusy: I,
+      ariaAtomic: E,
+      ariaBusy: B,
       ariaLive: A,
       // Values
-      containerProps: S,
-      isSearchResultEmpty: C,
-      limitedEmptyStateProps: $,
-      loadingButtonState: Y,
+      containerProps: x,
+      isSearchResultEmpty: y,
+      limitedEmptyStateProps: G,
+      loadingButtonState: M,
       slots: l,
-      shouldDisplayShowMoreButton: M,
-      showMoreButtonText: V,
-      virtualisedItems: p,
+      shouldDisplayShowMoreButton: I,
+      showMoreButtonText: z,
+      virtualisedItems: L,
       wrapperProps: f,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: B,
+      BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: i,
       // Methods
-      onListboxContainerScroll: x,
-      onOptionSelected: d,
-      emitShowMore: y,
-      listboxListeners: z
+      onListboxContainerScroll: _,
+      onOptionSelected: g,
+      emitShowMore: C,
+      listboxListeners: W
     };
   }
 });
-var lt = function() {
+var ct = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
-  })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
+  })], null, !0) }, e.listboxListeners))] : [l("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
   })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
     return e.emitShowMore.apply(null, arguments);
   } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2)]);
-}, st = [], nt = /* @__PURE__ */ N(
-  tt,
-  lt,
-  st,
+}, rt = [], ut = /* @__PURE__ */ P(
+  at,
+  ct,
+  rt,
   !1,
   null,
-  "bd53a4f9",
+  "17128845",
   null,
   null
 );
-const Et = nt.exports;
+const Tt = ut.exports;
 export {
-  Et as B,
+  Tt as B,
   i as a,
-  P as b
+  $ as b,
+  et as u
 };
-//# sourceMappingURL=listbox.a117e6d4.js.map
+//# sourceMappingURL=listbox.163433c5.js.map