bitboss-ui 3.0.0-beta.63 → 3.0.0-beta.65

package/dist/components/BbDropdown/types.d.ts

@@ -1,8 +1,8 @@
 import { BbBaseButtonProps } from '../BbBaseButton/types';
-import { PtItemCtx, PtItemMap, PtItemResult, PtValue } from '../../types/passthrough';
+import { PtItemCtx, PtItemMap, PtItemResult, PtValue, PtVariantAttrs } from '../../types/passthrough';
 import { Placement } from '../../types/Placement';
 import { IconType } from '../../types/Icon';
-import { DropdownItemVariantType } from '../../types/DropdownItemVariant';
+import { DropdownItemVariantBuiltIn, DropdownItemVariantRegistry, DropdownItemVariantType } from '../../types/DropdownItemVariant';
 import { BbOffCanvasProps } from '../BbOffCanvas/types';
 import { ItemProps } from '../../types/ItemProps';
 import { BbDropdownGroupItemsContext } from '../../types/ItemsProvider';
@@ -361,8 +361,18 @@ export type InternalGroup = DropdownEntryBase & {
     /** Placeholder for this group's search field. Defaults to the localized label. */
     searchPlaceholder?: string;
     /**
-     * When set, items act as selectable options that render a check on the right
-     * and keep the menu open when toggled.
+     * Sorts the group's rows under titled sections, inside the one group (one
+     * `v-model`, one search field): a field path read off each row (a fetched
+     * row: its raw item) or a getter returning the section title. Rows with a
+     * nullish title are listed without a heading. Sections keep the order in
+     * which their first row appears, like `BbSelect`'s `groupBy`; a search hides
+     * a section with no matching row.
+     */
+    groupBy?: string | ((row: any) => string | null | undefined);
+    /**
+     * When set, items act as selectable options that render a check on the right.
+     * A change closes the menu in a single-choice group and keeps it open in a
+     * `multiple` one; the dropdown's `closeOnSelect` decides otherwise.
      *
      * Pass a function `(item) => boolean` to gate individual rows — the same
      * contract as `BbSelect` and the option groups. The group is still a
@@ -475,6 +485,8 @@ export type NormalizedGroup = {
     searchable?: boolean;
     /** Placeholder for this group's search field. */
     searchPlaceholder?: string;
+    /** Section title per row (see {@link InternalGroup.groupBy}). */
+    groupBy?: InternalGroup['groupBy'];
     selectable: boolean;
     /** Selected row keys (`rowKey`; injected by `BbDropdown`; empty for non-selectable groups). */
     selected: string[];
@@ -498,7 +510,7 @@ export type MappedItem = InternalItem & {
  * Passthrough parts of `BbDropdown` (plans/passthrough/BbDropdown.md). Groups,
  * headings and dividers are not parts.
  *
- * Per-item functions: on the instance, an entry part (`item`, `itemText`, `itemIcon`, `itemDescription`) also accepts `({ item, selected, … }) => PtValue | false | null | undefined` — `item` is the menu entry (an `Item`: its `label`, `value`, `description`, whatever else you put on it), and every state a boolean beside it, on for it (`selected`, `disabled`, …) — in the `pt` object or the `:pt:<part>` attribute, never on a `<part>:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the entry as it was. See the passthrough guide, _Per-item functions_.
+ * Per-item functions: on the instance, an entry part (`item`, `itemText`, `itemIcon`, `itemDescription`) also accepts `({ item, selected, … }) => PtValue | false | null | undefined` — `item` is the menu entry (an `Item`: its `label`, `value`, `description`, whatever else you put on it), every state a boolean beside it, on for it (`selected`, `disabled`, …), and the entry's `variant` as a string (`default` when it has none) — in the `pt` object or the `:pt:<part>` attribute, never on a `<part>:<state>` key and never in the global map or a scope (they ship as JSON). Its result is merged last, after every state entry, through the same deduper; a falsy result leaves the entry as it was. See the passthrough guide, _Per-item functions_.
  *
  * @part root - The floating element — an invisible positioning wrapper; a
  *   `class` on the component lands here. No node on the phone sheet: style
@@ -533,29 +545,40 @@ export type BbDropdownSurfacePtPart = 'root' | 'panel' | 'sheet' | 'header' | 'f
 /** The entry parts — broadcasts resolved per entry; their base key also takes a per-item function. Spelled flat (T20). */
 export type BbDropdownItemPtPart = 'item' | 'itemText' | 'itemIcon' | 'itemDescription';
 /**
- * Passthrough states of `BbDropdown`, true while the matching `--` modifier is on.
+ * Passthrough states of `BbDropdown`, true while the matching `--` modifier is on
+ * (the link states: while the entry's `activeClass` / `exactActiveClass` are).
  *
+ * @state activeLink - Per node, on the entry parts: an entry whose link
+ *   (`to` / `href`) points at the current page or one of its ancestors —
+ *   exactly when its `activeClass` is on. The weakest state.
+ * @state exactActiveLink - Per node, on the entry parts: an entry whose link
+ *   points at the current page itself — its `exactActiveClass` is on.
  * @state selected - Per node, on the entry parts: a selectable group's
  *   checked entry.
  * @state disabled - Per node, on the entry parts: an entry that is disabled.
  * @state open - Component-wide: the menu is open.
  */
-export type BbDropdownPtState = 'open' | 'selected' | 'disabled';
+export type BbDropdownPtState = 'activeLink' | 'exactActiveLink' | 'open' | 'selected' | 'disabled';
 /** The runtime lists the resolver is wired with — kept next to the types so the two cannot drift. */
 export declare const BB_DROPDOWN_PT: {
     readonly parts: readonly ["root", "panel", "sheet", "header", "footer", "input", "list", "item", "itemText", "itemIcon", "itemDescription"];
-    readonly states: readonly ["selected", "disabled", "open"];
+    readonly states: readonly ["activeLink", "exactActiveLink", "selected", "disabled", "open"];
+    readonly variant: {
+        readonly names: readonly ["default", "destructive"];
+        readonly option: "dropdownItemVariants";
+        readonly parts: readonly ["item", "itemText", "itemIcon", "itemDescription"];
+    };
 };
 export type BbDropdownProps = {
-    [K in `pt:${BbDropdownSurfacePtPart}` | `pt:${BbDropdownPtPart}:${BbDropdownPtState}`]?: PtValue;
-} & {
-    [K in `pt:${BbDropdownItemPtPart}`]?: PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState>) => PtItemResult);
+    [K in `pt:${BbDropdownSurfacePtPart}` | `pt:${BbDropdownPtPart}:${BbDropdownPtState}` | `pt:${BbDropdownItemPtPart}:${DropdownItemVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<BbDropdownItemPtPart, keyof DropdownItemVariantRegistry> & {
+    [K in `pt:${BbDropdownItemPtPart}`]?: PtValue | ((ctx: PtItemCtx<InternalItem, BbDropdownPtState, DropdownItemVariantBuiltIn | keyof DropdownItemVariantRegistry>) => PtItemResult);
 } & {
     /**
      * Passthrough, object form: the same keys as the `pt:*` attributes
      * without the prefix. See the `pt:<part>` row.
      */
-    pt?: PtItemMap<BbDropdownPtPart, BbDropdownItemPtPart, BbDropdownPtState, InternalItem>;
+    pt?: PtItemMap<BbDropdownPtPart, BbDropdownItemPtPart, BbDropdownPtState, InternalItem, DropdownItemVariantBuiltIn | keyof DropdownItemVariantRegistry>;
     /**
      * An external activator element or component ref: the activator slot is not
      * rendered, and the listeners and ARIA (`aria-haspopup` / `aria-expanded` /
@@ -571,6 +594,14 @@ export type BbDropdownProps = {
      * @defaultValue `config.adaptive` (`true`)
      */
     adaptive?: boolean;
+    /**
+     * Whether a selection closes the menu. Unset: a change in a single-choice
+     * group closes it (an untick too, at any depth); a `multiple` group stays
+     * open. `true`: every selection change closes it. `false`: none does.
+     *
+     * @defaultValue unset (close after a single-choice change)
+     */
+    closeOnSelect?: boolean;
     /**
      * Compact density, the `BbSelect` ladder: flyout rows 28px → 24px, sheet
      * rows 44px → 36px (a sheet row stays a touch target). The label size does
@@ -809,11 +840,27 @@ export type BbDropdownItemSlotProps = {
     selected: boolean;
     /** The row's label (on a group's title line, the group's label). */
     label: InternalItem['label'];
+    /**
+     * A link entry (`to` / `href`) pointing at the current page or one of its
+     * ancestors: its `activeClass` is on. Not set on a group's title line.
+     */
+    activeLink?: boolean;
+    /**
+     * A link entry pointing at the current page itself: its `exactActiveClass`
+     * is on. Not set on a group's title line.
+     */
+    exactActiveLink?: boolean;
 };
 /** Props exposed by the `loading` and `empty` placeholder slots. */
 export type BbDropdownPlaceholderSlotProps = {
     /** Id of the group this placeholder belongs to. */
     groupId?: string;
+    /**
+     * The group's current search text, as typed (`''` when it has no search
+     * field or nothing is typed) — the same `query` BbSelect's `#empty` gets,
+     * e.g. for "Type at least 2 characters" under a remote search's minimum.
+     */
+    query: string;
     /** Resolved placeholder text (group `loadingText`/`emptyText`/`failedText` → dropdown default). */
     text: string;
     /**

package/dist/components/BbDropdown/types.js

@@ -1,5 +1,6 @@
+import { DROPDOWN_ITEM_VARIANTS as e } from "../../types/DropdownItemVariant.js";
 //#region src/components/BbDropdown/types.ts
-var e = (e) => Array.isArray(e) ? e : [], t = (e) => e.selectable == null ? e.multiple != null : !!e.selectable, n = (e) => typeof e.selectable == "function" ? e.selectable : void 0, r = (e) => !Array.isArray(e) && (e.group === !0 || "selectable" in e || "multiple" in e || typeof e.items == "function"), i = {
+var t = (e) => Array.isArray(e) ? e : [], n = (e) => e.selectable == null ? e.multiple != null : !!e.selectable, r = (e) => typeof e.selectable == "function" ? e.selectable : void 0, i = (e) => !Array.isArray(e) && (e.group === !0 || "selectable" in e || "multiple" in e || typeof e.items == "function"), a = {
 	parts: [
 		"root",
 		"panel",
@@ -14,10 +15,22 @@ var e = (e) => Array.isArray(e) ? e : [], t = (e) => e.selectable == null ? e.mu
 		"itemDescription"
 	],
 	states: [
+		"activeLink",
+		"exactActiveLink",
 		"selected",
 		"disabled",
 		"open"
-	]
+	],
+	variant: {
+		names: e,
+		option: "dropdownItemVariants",
+		parts: [
+			"item",
+			"itemText",
+			"itemIcon",
+			"itemDescription"
+		]
+	}
 };
 //#endregion
-export { i as BB_DROPDOWN_PT, e as groupItemsAsArray, r as isGroup, t as isSelectableGroup, n as selectablePredicateOf };
+export { a as BB_DROPDOWN_PT, t as groupItemsAsArray, i as isGroup, n as isSelectableGroup, r as selectablePredicateOf };

package/dist/components/BbDropdown/useDropdownContext.d.ts

@@ -75,6 +75,12 @@ export type DropdownContext = {
     close: () => void | Promise<void>;
     /** Returns focus to the activator. */
     focusActivator: () => void;
+    /**
+     * Whether this menu is the top of the overlay Escape stack: a submenu level
+     * closes on Escape only then, never under a popover or dialog opened from
+     * one of its items.
+     */
+    ownsEscape: () => boolean;
     /** What opened the menu (unset: a `v-model` or script open). */
     openModality: () => 'pointer' | 'keyboard' | undefined;
     /**

package/dist/components/BbDropdownButton/BbDropdownButton.vue.d.ts

@@ -18,7 +18,8 @@ declare const __VLS_base: import('vue').DefineComponent<BbDropdownButtonProps, {
 }>, {
     size: import('../..').Responsive<"sm" | "md" | "lg" | "xl" | "2xl" | "xs">;
     adaptive: boolean;
-    variant: import('../..').ButtonVariantType;
+    variant: import('../../types/ButtonVariant').ButtonVariantType;
+    closeOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/BbDropdownButton/BbDropdownButton.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,20 @@
-import { usePassthrough as e } from "../../composables/usePassthrough.js";
-import { removedPropsFor as t } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as n } from "../../utilities/functions/warnRemovedAttrs.js";
-import { useLocale as r } from "../../composables/useLocale.js";
-import { BB_DROPDOWN_PT as i } from "../BbDropdown/types.js";
-import { BB_BUTTON_PT as a } from "../BbButton/types.js";
-import o from "../BbButton/BbButton.vue.js";
-import s from "../BbDropdown/BbDropdown.vue.js";
+import { registeredVariantNames as e, usePassthrough as t, variantPt as n } from "../../composables/usePassthrough.js";
+import { removedPropsFor as r } from "../../deprecation/removedProps.js";
+import { warnRemovedAttrs as i } from "../../utilities/functions/warnRemovedAttrs.js";
+import { useLocale as a } from "../../composables/useLocale.js";
+import { useLinkState as o } from "../BbBaseButton/useLinkState.js";
+import { DROPDOWN_ITEM_VARIANTS as s } from "../../types/DropdownItemVariant.js";
+import { BB_DROPDOWN_PT as c } from "../BbDropdown/types.js";
+import { BUTTON_VARIANTS as l } from "../../types/ButtonVariant.js";
+import { BB_BUTTON_PT as u } from "../BbButton/types.js";
+import d from "../BbButton/BbButton.vue.js";
+import f from "../BbDropdown/BbDropdown.vue.js";
 import "../../assets/svgs/chevron_down.svg_raw.js";
-import { BB_DROPDOWN_BUTTON_PT as c } from "./types.js";
-import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeProps as _, normalizeProps as v, openBlock as y, ref as b, renderList as x, renderSlot as S, unref as C, useAttrs as w, useSlots as T, useTemplateRef as E, withCtx as D } from "vue";
+import { BB_DROPDOWN_BUTTON_PT as p } from "./types.js";
+import { computed as m, createBlock as ee, createCommentVNode as h, createElementBlock as g, createSlots as _, createVNode as v, defineComponent as y, guardReactiveProps as b, mergeProps as x, normalizeProps as S, openBlock as C, ref as w, renderList as T, renderSlot as E, unref as D, useAttrs as O, useSlots as k, useTemplateRef as A, withCtx as j } from "vue";
 //#region src/components/BbDropdownButton/BbDropdownButton.vue?vue&type=script&setup=true&lang.ts
-var O = /*@__PURE__*/ h({
+var M = /*@__PURE__*/ y({
+	mixins: [n(p)],
 	inheritAttrs: !1,
 	__name: "BbDropdownButton",
 	props: {
@@ -25,48 +29,78 @@ var O = /*@__PURE__*/ h({
 		"pt:header": {},
 		"pt:footer": {},
 		"pt:input": {},
+		"pt:root:activeLink": {},
+		"pt:root:exactActiveLink": {},
 		"pt:root:loading": {},
 		"pt:root:disabled": {},
 		"pt:root:open": {},
+		"pt:main:activeLink": {},
+		"pt:main:exactActiveLink": {},
 		"pt:main:loading": {},
 		"pt:main:disabled": {},
 		"pt:main:open": {},
+		"pt:toggle:activeLink": {},
+		"pt:toggle:exactActiveLink": {},
 		"pt:toggle:loading": {},
 		"pt:toggle:disabled": {},
 		"pt:toggle:open": {},
+		"pt:icon:activeLink": {},
+		"pt:icon:exactActiveLink": {},
 		"pt:icon:loading": {},
 		"pt:icon:disabled": {},
 		"pt:icon:open": {},
+		"pt:spinner:activeLink": {},
+		"pt:spinner:exactActiveLink": {},
 		"pt:spinner:loading": {},
 		"pt:spinner:disabled": {},
 		"pt:spinner:open": {},
+		"pt:text:activeLink": {},
+		"pt:text:exactActiveLink": {},
 		"pt:text:loading": {},
 		"pt:text:disabled": {},
 		"pt:text:open": {},
+		"pt:panel:activeLink": {},
+		"pt:panel:exactActiveLink": {},
 		"pt:panel:loading": {},
 		"pt:panel:disabled": {},
 		"pt:panel:open": {},
+		"pt:sheet:activeLink": {},
+		"pt:sheet:exactActiveLink": {},
 		"pt:sheet:loading": {},
 		"pt:sheet:disabled": {},
 		"pt:sheet:open": {},
+		"pt:header:activeLink": {},
+		"pt:header:exactActiveLink": {},
 		"pt:header:loading": {},
 		"pt:header:disabled": {},
 		"pt:header:open": {},
+		"pt:footer:activeLink": {},
+		"pt:footer:exactActiveLink": {},
 		"pt:footer:loading": {},
 		"pt:footer:disabled": {},
 		"pt:footer:open": {},
+		"pt:input:activeLink": {},
+		"pt:input:exactActiveLink": {},
 		"pt:input:loading": {},
 		"pt:input:disabled": {},
 		"pt:input:open": {},
+		"pt:item:activeLink": {},
+		"pt:item:exactActiveLink": {},
 		"pt:item:loading": {},
 		"pt:item:disabled": {},
 		"pt:item:open": {},
+		"pt:itemText:activeLink": {},
+		"pt:itemText:exactActiveLink": {},
 		"pt:itemText:loading": {},
 		"pt:itemText:disabled": {},
 		"pt:itemText:open": {},
+		"pt:itemIcon:activeLink": {},
+		"pt:itemIcon:exactActiveLink": {},
 		"pt:itemIcon:loading": {},
 		"pt:itemIcon:disabled": {},
 		"pt:itemIcon:open": {},
+		"pt:itemDescription:activeLink": {},
+		"pt:itemDescription:exactActiveLink": {},
 		"pt:itemDescription:loading": {},
 		"pt:itemDescription:disabled": {},
 		"pt:itemDescription:open": {},
@@ -74,6 +108,50 @@ var O = /*@__PURE__*/ h({
 		"pt:itemText:selected": {},
 		"pt:itemIcon:selected": {},
 		"pt:itemDescription:selected": {},
+		"pt:root:primary": {},
+		"pt:root:outline": {},
+		"pt:root:secondary": {},
+		"pt:root:ghost": {},
+		"pt:root:destructive": {},
+		"pt:root:link": {},
+		"pt:main:primary": {},
+		"pt:main:outline": {},
+		"pt:main:secondary": {},
+		"pt:main:ghost": {},
+		"pt:main:destructive": {},
+		"pt:main:link": {},
+		"pt:toggle:primary": {},
+		"pt:toggle:outline": {},
+		"pt:toggle:secondary": {},
+		"pt:toggle:ghost": {},
+		"pt:toggle:destructive": {},
+		"pt:toggle:link": {},
+		"pt:icon:primary": {},
+		"pt:icon:outline": {},
+		"pt:icon:secondary": {},
+		"pt:icon:ghost": {},
+		"pt:icon:destructive": {},
+		"pt:icon:link": {},
+		"pt:spinner:primary": {},
+		"pt:spinner:outline": {},
+		"pt:spinner:secondary": {},
+		"pt:spinner:ghost": {},
+		"pt:spinner:destructive": {},
+		"pt:spinner:link": {},
+		"pt:text:primary": {},
+		"pt:text:outline": {},
+		"pt:text:secondary": {},
+		"pt:text:ghost": {},
+		"pt:text:destructive": {},
+		"pt:text:link": {},
+		"pt:item:default": {},
+		"pt:item:destructive": {},
+		"pt:itemText:default": {},
+		"pt:itemText:destructive": {},
+		"pt:itemIcon:default": {},
+		"pt:itemIcon:destructive": {},
+		"pt:itemDescription:default": {},
+		"pt:itemDescription:destructive": {},
 		"pt:item": {},
 		"pt:itemText": {},
 		"pt:itemIcon": {},
@@ -83,6 +161,10 @@ var O = /*@__PURE__*/ h({
 			type: Boolean,
 			default: void 0
 		},
+		closeOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
 		compact: { type: Boolean },
 		eager: { type: Boolean },
 		id: {},
@@ -161,13 +243,17 @@ var O = /*@__PURE__*/ h({
 		"item:selected",
 		"item:unselected"
 	],
-	setup(h, { emit: O }) {
-		let k = h, A = O, j = T(), M = /* @__PURE__ */ new Set([
+	setup(n, { emit: y }) {
+		let M = n, N = y, P = k(), F = /* @__PURE__ */ new Set([
 			"activator",
 			"default",
-			"dropdown"
-		]), N = () => Object.keys(j).filter((e) => !M.has(e)), P = () => k.items ?? [], F = () => P().length > 0 || !!j.dropdown, I = /* @__PURE__ */ new Set([
+			"dropdown",
+			"icon",
+			"prepend:icon",
+			"append:icon"
+		]), I = () => Object.keys(P).filter((e) => !F.has(e)), L = () => M.items ?? [], R = () => L().length > 0 || !!P.dropdown, z = /* @__PURE__ */ new Set([
 			"adaptive",
+			"closeOnSelect",
 			"compact",
 			"eager",
 			"id",
@@ -181,98 +267,122 @@ var O = /*@__PURE__*/ h({
 			"toggle:icon",
 			"block",
 			"pt"
-		]), L = () => Object.fromEntries(Object.entries(k).filter(([e, t]) => t !== void 0 && !I.has(e) && !e.startsWith("pt:"))), R = /^(on[A-Z].*|aria-.*|name|value|autofocus|title|formaction|formenctype|formmethod|formnovalidate|formtarget)$/, z = () => {
+		]), B = () => Object.fromEntries(Object.entries(M).filter(([e, t]) => t !== void 0 && !z.has(e) && !e.startsWith("pt:"))), V = /^(on[A-Z].*|aria-.*|name|value|autofocus|title|formaction|formenctype|formmethod|formnovalidate|formtarget)$/, H = () => {
 			let e = {}, t = {};
-			for (let [n, r] of Object.entries(B.rootAttrs)) (R.test(n) ? e : t)[n] = r;
+			for (let [n, r] of Object.entries(W.rootAttrs)) (V.test(n) ? e : t)[n] = r;
 			return {
 				main: e,
 				root: t
 			};
-		}, B = e({
+		}, U = o(M), W = t({
 			component: "BbDropdownButton",
-			attrs: w(),
-			props: k,
-			parts: c.parts,
-			states: c.states,
+			attrs: O(),
+			props: M,
+			parts: p.parts,
+			states: p.states,
 			active: {
-				loading: () => !!k.loading,
-				disabled: () => !!k.disabled,
-				open: () => K.value
-			}
-		}), V = () => B.forward({ toggle: "root" }, ["disabled"]), H = () => ({
-			...B.forward([
+				loading: () => !!M.loading,
+				disabled: () => !!M.disabled,
+				open: () => $.value,
+				activeLink: () => U.value.activeLink,
+				exactActiveLink: () => U.value.exactActiveLink
+			},
+			variant: [{
+				...p.variant[0],
+				current: () => M.variant
+			}, p.variant[1]]
+		}), G = [...u.states, ...e(l, "buttonVariants")], K = [...c.states, ...e(s, "dropdownItemVariants")], q = ["activeLink", "exactActiveLink"], J = () => W.forward({ toggle: "root" }, ["disabled", ...e(l, "buttonVariants")]), Y = () => ({
+			...W.forward([
 				"panel",
 				"sheet",
 				"header",
 				"footer",
 				"input"
-			], i.states.filter((e) => e !== "disabled")),
-			...B.forward([
+			], c.states.filter((e) => e !== "disabled" && !q.includes(e))),
+			...W.forward([
 				"item",
 				"itemText",
 				"itemIcon",
 				"itemDescription"
-			], i.states)
+			], K)
 		});
-		process.env.NODE_ENV !== "production" && n("BbDropdownButton", t("BbDropdownButton"));
-		let U = l(() => k["toggle:icon"] ?? "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\">\n	<path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path d=\"M6 9l6 6l6 -6\" />\n</svg>\n"), { t: W } = r(), G = E("root-el"), K = b(!1), q = () => {
-			K.value = !0, A("show");
-		}, J = () => {
-			K.value = !1, A("hide");
-		}, Y = l(() => W("dropdownButton.open").value);
-		return (e, t) => (y(), f("span", _({
+		process.env.NODE_ENV !== "production" && i("BbDropdownButton", r("BbDropdownButton"));
+		let X = m(() => M["toggle:icon"] ?? "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\">\n	<path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n	<path d=\"M6 9l6 6l6 -6\" />\n</svg>\n"), { t: Z } = a(), Q = A("root-el"), $ = w(!1), te = () => {
+			$.value = !0, N("show");
+		}, ne = () => {
+			$.value = !1, N("hide");
+		}, re = m(() => Z("dropdownButton.open").value);
+		return (e, t) => (C(), g("span", x({
 			ref: "root-el",
 			class: ["bb-dropdown-button", { "bb-dropdown-button--block": e.block }]
-		}, z().root), [m(o, _({
-			...L(),
-			...z().main
+		}, H().root), [v(d, x({
+			...B(),
+			...H().main
 		}, {
 			class: "bb-dropdown-button__main",
-			group: F(),
-			pt: C(B).forward({
+			group: R(),
+			pt: D(W).forward({
 				main: "root",
 				icon: "icon",
 				spinner: "spinner",
 				text: "text"
-			}, C(a).states)
-		}), p({ _: 2 }, [j.default ? {
-			name: "default",
-			fn: D(() => [S(e.$slots, "default")]),
-			key: "0"
-		} : void 0]), 1040, ["group", "pt"]), F() ? (y(), u(s, {
+			}, G)
+		}), _({ _: 2 }, [
+			P.default ? {
+				name: "default",
+				fn: j(() => [E(e.$slots, "default")]),
+				key: "0"
+			} : void 0,
+			P.icon ? {
+				name: "icon",
+				fn: j((t) => [E(e.$slots, "icon", S(b(t)))]),
+				key: "1"
+			} : void 0,
+			P["prepend:icon"] ? {
+				name: "prepend:icon",
+				fn: j((t) => [E(e.$slots, "prepend:icon", S(b(t)))]),
+				key: "2"
+			} : void 0,
+			P["append:icon"] ? {
+				name: "append:icon",
+				fn: j((t) => [E(e.$slots, "append:icon", S(b(t)))]),
+				key: "3"
+			} : void 0
+		]), 1040, ["group", "pt"]), R() ? (C(), ee(f, {
 			key: 0,
 			id: e.id,
 			adaptive: e.adaptive,
-			anchor: C(G),
+			anchor: D(Q),
+			"close-on-select": e.closeOnSelect,
 			compact: e.compact,
 			disabled: e.disabled,
 			eager: e.eager,
-			items: P(),
+			items: L(),
 			"off-canvas-props": e.offCanvasProps,
 			offset: e.offset,
 			padding: e.padding,
 			placement: e.placement,
-			pt: H(),
+			pt: Y(),
 			"transition-duration": e.transitionDuration,
 			width: e.width,
-			onHidden: t[0] ||= (e) => A("hidden"),
-			onHide: J,
-			"onItem:selected": t[1] ||= (e) => A("item:selected", e),
-			"onItem:unselected": t[2] ||= (e) => A("item:unselected", e),
-			onShow: q,
-			onShown: t[3] ||= (e) => A("shown")
-		}, p({
-			activator: D(({ props: t, open: n, loading: r }) => [m(o, _({
-				"aria-label": Y.value,
+			onHidden: t[0] ||= (e) => N("hidden"),
+			onHide: ne,
+			"onItem:selected": t[1] ||= (e) => N("item:selected", e),
+			"onItem:unselected": t[2] ||= (e) => N("item:unselected", e),
+			onShow: te,
+			onShown: t[3] ||= (e) => N("shown")
+		}, _({
+			activator: j(({ props: t, open: n, loading: r }) => [v(d, x({
+				"aria-label": re.value,
 				class: "bb-dropdown-button__toggle",
 				"disable-auto-loading": "",
 				disabled: e.disabled,
 				group: "",
-				icon: U.value,
+				icon: X.value,
 				"interactive-while-loading": "",
 				loading: r,
 				"model-value": n,
-				pt: V(),
+				pt: J(),
 				size: e.size,
 				variant: e.variant
 			}, t), null, 16, [
@@ -285,15 +395,16 @@ var O = /*@__PURE__*/ h({
 				"size",
 				"variant"
 			])]),
-			default: D(() => [S(e.$slots, "dropdown")]),
+			default: j(() => [E(e.$slots, "dropdown")]),
 			_: 2
-		}, [x(N(), (t) => ({
+		}, [T(I(), (t) => ({
 			name: t,
-			fn: D((n) => [S(e.$slots, t, v(g(n)))])
+			fn: j((n) => [E(e.$slots, t, S(b(n)))])
 		}))]), 1032, [
 			"id",
 			"adaptive",
 			"anchor",
+			"close-on-select",
 			"compact",
 			"disabled",
 			"eager",
@@ -305,8 +416,8 @@ var O = /*@__PURE__*/ h({
 			"pt",
 			"transition-duration",
 			"width"
-		])) : d("", !0)], 16));
+		])) : h("", !0)], 16));
 	}
 });
 //#endregion
-export { O as default };
+export { M as default };