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

package/dist/components/BbTabs/BbTabsList.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,16 @@
 import { useLogger as e } from "../../composables/useLogger.js";
-import { usePassthrough as t } from "../../composables/usePassthrough.js";
-import { removedPropsFor as n } from "../../deprecation/removedProps.js";
-import { warnRemovedAttrs as r } from "../../utilities/functions/warnRemovedAttrs.js";
-import i from "../BbBaseButton/BbBaseButton.vue.js";
-import { useInternalTabsContext as a } from "../../composables/useBbTabsContext.js";
-import { omitName as o, pickName as s } from "./tablistName.js";
-import { BB_TABS_LIST_HOST_PARTS as c, BB_TABS_LIST_PT as l } from "./types.js";
-import { Fragment as ee, computed as u, createElementBlock as d, createElementVNode as f, createVNode as te, defineComponent as p, guardReactiveProps as m, mergeProps as h, nextTick as g, normalizeProps as _, onMounted as ne, onUnmounted as re, openBlock as v, ref as y, renderList as ie, renderSlot as b, toDisplayString as ae, unref as x, useAttrs as oe, watch as S, withCtx as se } from "vue";
+import { 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 a from "../BbBaseButton/BbBaseButton.vue.js";
+import { useInternalTabsContext as o } from "../../composables/useBbTabsContext.js";
+import { omitName as s, pickName as c } from "./tablistName.js";
+import { BB_TABS_LIST_HOST_PARTS as l, BB_TABS_LIST_PT as u } from "./types.js";
+import { Fragment as ee, computed as d, createElementBlock as f, createElementVNode as p, createVNode as te, defineComponent as m, guardReactiveProps as h, mergeProps as g, nextTick as _, normalizeProps as v, onMounted as ne, onUnmounted as re, openBlock as y, ref as b, renderList as ie, renderSlot as x, toDisplayString as ae, unref as S, useAttrs as oe, watch as C, withCtx as se } from "vue";
 import { useResizeObserver as ce, useScroll as le, useThrottleFn as ue } from "@vueuse/core";
 //#region src/components/BbTabs/BbTabsList.vue?vue&type=script&setup=true&lang.ts
-var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { class: "bb-tabs__trigger-content" }, me = { class: "bb-tabs__trigger-label" }, he = { class: "bb-tabs-list__append" }, C = /*@__PURE__*/ p({
+var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { class: "bb-tabs__trigger-content" }, me = { class: "bb-tabs__trigger-label" }, he = { class: "bb-tabs-list__append" }, w = /*@__PURE__*/ m({
+	mixins: [n(u)],
 	inheritAttrs: !1,
 	__name: "BbTabsList",
 	props: {
@@ -24,6 +25,18 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 		"pt:item:disabled": {},
 		"pt:indicator:active": {},
 		"pt:indicator:disabled": {},
+		"pt:root:pill": {},
+		"pt:root:line": {},
+		"pt:root:none": {},
+		"pt:list:pill": {},
+		"pt:list:line": {},
+		"pt:list:none": {},
+		"pt:item:pill": {},
+		"pt:item:line": {},
+		"pt:item:none": {},
+		"pt:indicator:pill": {},
+		"pt:indicator:line": {},
+		"pt:indicator:none": {},
 		"pt:item": { type: [
 			String,
 			Object,
@@ -32,27 +45,31 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 		pt: {},
 		variant: {}
 	},
-	setup(p) {
-		let C = p, w = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth", ge = e(), T = a() ?? ge.throw("<BbTabsList> must be rendered inside a <BbTabs> or <BbTabsRoot> subtree.");
-		process.env.NODE_ENV !== "production" && r("BbTabsList", n("BbTabsList"), {
+	setup(n) {
+		let m = n, w = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth", ge = e(), T = o() ?? ge.throw("<BbTabsList> must be rendered inside a <BbTabs> or <BbTabsRoot> subtree.");
+		process.env.NODE_ENV !== "production" && i("BbTabsList", r("BbTabsList"), {
 			slotKeys: () => T.items.value.map((e) => e.value),
 			family: "BbTabs"
 		});
 		let { mappedItems: E, currentTab: D, direction: O, block: k, compact: A, disabled: j, eager: _e } = T, M = oe(), N = t({
 			component: "BbTabsList",
 			attrs: M,
-			props: C,
-			parts: l.parts,
-			states: l.states,
+			props: m,
+			parts: u.parts,
+			states: u.states,
 			active: { disabled: () => j.value },
 			inherit: {
 				component: "BbTabs",
-				parts: c
+				parts: l
+			},
+			variant: {
+				...u.variant,
+				current: () => m.variant ?? T.variant.value
 			}
-		}), ve = u(() => C.variant ?? T.variant.value), ye = () => ({
-			...s(M),
+		}), ve = d(() => m.variant ?? T.variant.value), ye = () => ({
+			...c(M),
 			...N.list
-		}), P = y(), { isScrolling: F, arrivedState: I, measure: L } = le(P), be = (e) => {
+		}), P = b(), { isScrolling: F, arrivedState: I, measure: L } = le(P), be = (e) => {
 			let t = P.value;
 			if (!t) return;
 			B = !0;
@@ -61,7 +78,7 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 				left: n,
 				behavior: w()
 			});
-		}, R = u(() => ({
+		}, R = d(() => ({
 			isScrolling: F.value,
 			canScrollLeft: !I.left,
 			canScrollRight: !I.right,
@@ -84,17 +101,17 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 		}, H = () => {
 			!B && !F.value && z("instant");
 		};
-		S(D, async () => {
-			B = !1, await g(), z(w());
+		C(D, async () => {
+			B = !1, await _(), z(w());
 		}, { flush: "post" });
-		let U = y(0), W = () => {
+		let U = b(0), W = () => {
 			if (U.value = 0, !P.value || !k.value || O.value === "vertical") return;
 			let e = P.value;
 			e.classList.add("bb-tabs-list__list--measuring");
 			let t = 0;
 			for (let n of e.querySelectorAll(":scope > li:not(.bb-tabs-list__indicator)")) t = Math.max(t, n.getBoundingClientRect().width);
 			e.classList.remove("bb-tabs-list__list--measuring"), U.value = Math.ceil(t);
-		}, G = y(0), K = y(0), q = y(0), J = y(0), Y = y(!1), X = () => {
+		}, G = b(0), K = b(0), q = b(0), J = b(0), Y = b(!1), X = () => {
 			if (!P.value) return;
 			let e = P.value.querySelector(".bb-tabs-list__item--active");
 			e && (q.value = e.offsetLeft, J.value = e.offsetTop, G.value = e.clientWidth, K.value = e.clientHeight, !Y.value && e.clientWidth > 0 && requestAnimationFrame(() => {
@@ -103,7 +120,7 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 				});
 			}));
 		}, Z = async () => {
-			W(), await g(), X(), L(), H();
+			W(), await _(), X(), L(), H();
 		}, Se = ue(Z, 200, !0), Q, $ = () => {
 			if (!(typeof ResizeObserver > "u" || !P.value)) {
 				Q ??= new ResizeObserver(() => Se()), Q.disconnect();
@@ -111,10 +128,10 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 			}
 		};
 		return re(() => Q?.disconnect()), ne(async () => {
-			W(), await g(), X(), L(), H(), $(), document.fonts?.ready.then(Z);
-		}), S(D, X, { flush: "post" }), S(O, () => {
+			W(), await _(), X(), L(), H(), $(), document.fonts?.ready.then(Z);
+		}), C(D, X, { flush: "post" }), C(O, () => {
 			B = !1;
-		}), S([
+		}), C([
 			() => E.value.length,
 			k,
 			A,
@@ -123,18 +140,18 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 			await Z(), $();
 		}, { flush: "post" }), ce(P, () => {
 			X(), L(), H();
-		}), (e, t) => (v(), d("div", h({ class: ["bb-tabs-list", {
-			[`bb-tabs-list--${x(O)}`]: !0,
+		}), (e, t) => (y(), f("div", g({ class: ["bb-tabs-list", {
+			[`bb-tabs-list--${S(O)}`]: !0,
 			[`bb-tabs-list--${ve.value}`]: !0,
-			"bb-tabs-list--block": x(k),
-			"bb-tabs-list--compact": x(A),
-			"bb-tabs-list--disabled": x(j)
-		}] }, x(o)(x(N).rootAttrs)), [
-			f("span", de, [b(e.$slots, "wrapper:prepend", _(m(R.value)))]),
-			f("ul", h({
+			"bb-tabs-list--block": S(k),
+			"bb-tabs-list--compact": S(A),
+			"bb-tabs-list--disabled": S(j)
+		}] }, S(s)(S(N).rootAttrs)), [
+			p("span", de, [x(e.$slots, "wrapper:prepend", v(h(R.value)))]),
+			p("ul", g({
 				ref_key: "tablist",
 				ref: P,
-				"aria-orientation": x(O),
+				"aria-orientation": S(O),
 				class: ["bb-tabs-list__list", { "bb-tabs-list__list--no-transition": !Y.value }],
 				role: "tablist",
 				style: {
@@ -147,16 +164,16 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 				onPointerdown: xe,
 				onTouchmovePassive: V,
 				onWheelPassive: V
-			}, ye()), [f("li", h({
+			}, ye()), [p("li", g({
 				"aria-hidden": "true",
 				class: "bb-tabs-list__indicator",
 				role: "presentation"
-			}, x(N).indicator), null, 16), (v(!0), d(ee, null, ie(x(E), (t) => (v(), d("li", {
+			}, S(N).indicator), null, 16), (y(!0), f(ee, null, ie(S(E), (t) => (y(), f("li", {
 				key: t.tabId,
 				role: "presentation"
-			}, [te(i, h({
+			}, [te(a, g({
 				id: t.tabId,
-				"aria-controls": t.active || x(_e) || t.eager ? t.panelId : void 0,
+				"aria-controls": t.active || S(_e) || t.eager ? t.panelId : void 0,
 				"aria-selected": t.ariaSelected,
 				class: ["bb-tabs-list__item", { "bb-tabs-list__item--active": t.active }],
 				disabled: t.disabled,
@@ -165,11 +182,11 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 				onClick: t.onClick,
 				onKeydown: t.onKeydown,
 				ref_for: !0
-			}, x(N).part("item", {
+			}, S(N).part("item", {
 				active: t.active,
 				disabled: t.disabled || void 0
 			}, t.item)), {
-				default: se(() => [f("span", pe, [b(e.$slots, t.labelSlotName, h({ ref_for: !0 }, t.slotProps), () => [b(e.$slots, "label", h({ ref_for: !0 }, t.slotProps), () => [f("span", me, ae(t.label), 1)])])])]),
+				default: se(() => [p("span", pe, [x(e.$slots, t.labelSlotName, g({ ref_for: !0 }, t.slotProps), () => [x(e.$slots, "label", g({ ref_for: !0 }, t.slotProps), () => [p("span", me, ae(t.label), 1)])])])]),
 				_: 2
 			}, 1040, [
 				"id",
@@ -181,9 +198,9 @@ var de = { class: "bb-tabs-list__prepend" }, fe = ["aria-orientation"], pe = { c
 				"onClick",
 				"onKeydown"
 			])]))), 128))], 16, fe),
-			f("span", he, [b(e.$slots, "wrapper:append", _(m(R.value)))])
+			p("span", he, [x(e.$slots, "wrapper:append", v(h(R.value)))])
 		], 16));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };

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

@@ -1,5 +1,5 @@
-import { PtItemCtx, PtItemMap, PtItemResult, PtMap, PtNoInfer, PtValue } from '../../types/passthrough';
-import { TabsVariantType } from '../../types/TabsVariant';
+import { PtItemCtx, PtItemMap, PtItemResult, PtMap, PtNoInfer, PtValue, PtVariantAttrs } from '../../types/passthrough';
+import { TabsVariantBuiltIn, TabsVariantRegistry, TabsVariantType } from '../../types/TabsVariant';
 /**
  * Inertia-specific options shared between `BbTabsProps` (component-level defaults)
  * and `BbTabsItem` (per-item overrides). Item values always win over component values.
@@ -111,7 +111,7 @@ export type BbTabsItem<K extends string = string> = BbTabsInertiaOptions & {
  * Passthrough parts of `BbTabs` (plans/passthrough/BbTabs.md). Tabs do not
  * "open", so there is no `open` state.
  *
- * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `value`, `label`, anything else you put on it), and every state a boolean beside it, on for it (`active`, `disabled`, …) — in the `pt` object or the `:pt:item` attribute, never on a `item:<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 trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
+ * Per-item functions: on the instance, `item` also accepts `({ item, active, … }) => PtValue | false | null | undefined` — `item` is the tab's descriptor (the element of `items`: its `value`, `label`, anything else you put on it), every state a boolean beside it, on for it (`active`, `disabled`, …), and the strip's `variant` as a string — in the `pt` object or the `:pt:item` attribute, never on a `item:<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 trigger as it was. No other part takes a function. See the passthrough guide, _Per-item functions_.
  *
  * @part root - The tabs' outer element, around the strip and the panels.
  * @part wrapper - The strip's outer element: the `wrapper:prepend` slot, the
@@ -144,7 +144,14 @@ export type BbTabsPtState = 'active' | 'disabled';
 export declare const BB_TABS_PT: {
     readonly parts: readonly ["root", "wrapper", "list", "item", "indicator", "panels", "panel"];
     readonly states: readonly ["disabled", "active"];
+    readonly variant: {
+        readonly names: readonly ["pill", "line", "none"];
+        readonly option: "tabsVariants";
+        readonly parts: readonly ["wrapper", "list", "item", "indicator"];
+    };
 };
+/** The strip's parts on `BbTabs`: the ones its `variant` styles. Spelled flat (T20). */
+export type BbTabsStripPtPart = 'wrapper' | 'list' | 'item' | 'indicator';
 /**
  * Passthrough parts of `BbTabsList` — the strip of a split layout. The same
  * nodes as `BbTabs`'s `wrapper` / `list` / `item` / `indicator`, with the
@@ -169,6 +176,10 @@ export type BbTabsListPtState = BbTabsPtState;
 export declare const BB_TABS_LIST_PT: {
     readonly parts: readonly ["root", "list", "item", "indicator"];
     readonly states: readonly ["disabled", "active"];
+    readonly variant: {
+        readonly names: readonly ["pill", "line", "none"];
+        readonly option: "tabsVariants";
+    };
 };
 /** Where each `BbTabsList` part reads a `BbTabs` global / scope entry. */
 export declare const BB_TABS_LIST_HOST_PARTS: {
@@ -201,14 +212,16 @@ export declare const BB_TABS_PANELS_HOST_PARTS: {
     readonly panel: "panel";
 };
 export type BbTabsProps<K extends string = string> = {
-    [K2 in `pt:${BbTabsSurfacePtPart}` | `pt:${BbTabsPtPart}:${BbTabsPtState}`]?: PtValue;
-} & {
-    'pt:item'?: PtValue | ((ctx: PtItemCtx<BbTabsItem<PtNoInfer<K>>, BbTabsPtState>) => PtItemResult);
+    [K2 in `pt:${BbTabsSurfacePtPart}` | `pt:${BbTabsPtPart}:${BbTabsPtState}` | `pt:${BbTabsStripPtPart}:${TabsVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<BbTabsStripPtPart, keyof TabsVariantRegistry> & {
+    'pt:item'?: PtValue | ((ctx: PtItemCtx<BbTabsItem<PtNoInfer<K>>, BbTabsPtState, TabsVariantBuiltIn | keyof TabsVariantRegistry>) => PtItemResult);
     /**
      * Passthrough, object form: the same keys as the `pt:*` attributes
      * without the prefix. See the `pt:<part>` row.
      */
-    pt?: PtItemMap<BbTabsPtPart, 'item', BbTabsPtState, BbTabsItem<PtNoInfer<K>>>;
+    pt?: PtItemMap<BbTabsPtPart, 'item', BbTabsPtState, BbTabsItem<PtNoInfer<K>>, TabsVariantBuiltIn | keyof TabsVariantRegistry> & {
+        [K2 in `${BbTabsStripPtPart}:${TabsVariantBuiltIn | keyof TabsVariantRegistry}`]?: PtValue;
+    };
 } & BbTabsRootProps<K>;
 /**
  * Props of `BbTabsRoot` — `BbTabsProps` without `pt`. The root owns the whole
@@ -318,14 +331,16 @@ export type BbTabsRootProps<K extends string = string> = BbTabsInertiaOptions &
  * `BbTabsRoot` context.
  */
 export type BbTabsListProps = {
-    [K2 in `pt:${BbTabsListSurfacePtPart}` | `pt:${BbTabsListPtPart}:${BbTabsListPtState}`]?: PtValue;
-} & {
-    'pt:item'?: PtValue | ((ctx: PtItemCtx<BbTabsItem, BbTabsListPtState>) => PtItemResult);
+    [K2 in `pt:${BbTabsListSurfacePtPart}` | `pt:${BbTabsListPtPart}:${BbTabsListPtState}` | `pt:${BbTabsListPtPart}:${TabsVariantBuiltIn}`]?: PtValue;
+} & /* @vue-ignore */ PtVariantAttrs<BbTabsListPtPart, keyof TabsVariantRegistry> & {
+    'pt:item'?: PtValue | ((ctx: PtItemCtx<BbTabsItem, BbTabsListPtState, TabsVariantBuiltIn | keyof TabsVariantRegistry>) => PtItemResult);
     /**
      * Passthrough, object form: the same keys as the `pt:*` attributes
      * without the prefix. See the `pt:<part>` row.
      */
-    pt?: PtItemMap<BbTabsListPtPart, 'item', BbTabsListPtState, BbTabsItem>;
+    pt?: PtItemMap<BbTabsListPtPart, 'item', BbTabsListPtState, BbTabsItem, TabsVariantBuiltIn | keyof TabsVariantRegistry> & {
+        [K2 in `${BbTabsListPtPart}:${TabsVariantBuiltIn | keyof TabsVariantRegistry}`]?: PtValue;
+    };
 } & {
     /**
      * Look of this strip — the `variant` of the owning `BbTabs` / `BbTabsRoot`

package/dist/components/BbTabs/types.js

@@ -1,5 +1,6 @@
+import { TABS_VARIANTS as e } from "../../types/TabsVariant.js";
 //#region src/components/BbTabs/types.ts
-var e = {
+var t = {
 	parts: [
 		"root",
 		"wrapper",
@@ -9,26 +10,40 @@ var e = {
 		"panels",
 		"panel"
 	],
-	states: ["disabled", "active"]
-}, t = {
+	states: ["disabled", "active"],
+	variant: {
+		names: e,
+		option: "tabsVariants",
+		parts: [
+			"wrapper",
+			"list",
+			"item",
+			"indicator"
+		]
+	}
+}, n = {
 	parts: [
 		"root",
 		"list",
 		"item",
 		"indicator"
 	],
-	states: ["disabled", "active"]
-}, n = {
+	states: ["disabled", "active"],
+	variant: {
+		names: e,
+		option: "tabsVariants"
+	}
+}, r = {
 	root: "wrapper",
 	list: "list",
 	item: "item",
 	indicator: "indicator"
-}, r = {
+}, i = {
 	parts: ["root", "panel"],
 	states: ["disabled", "active"]
-}, i = {
+}, a = {
 	root: "panels",
 	panel: "panel"
 };
 //#endregion
-export { n as BB_TABS_LIST_HOST_PARTS, t as BB_TABS_LIST_PT, i as BB_TABS_PANELS_HOST_PARTS, r as BB_TABS_PANELS_PT, e as BB_TABS_PT };
+export { r as BB_TABS_LIST_HOST_PARTS, n as BB_TABS_LIST_PT, a as BB_TABS_PANELS_HOST_PARTS, i as BB_TABS_PANELS_PT, t as BB_TABS_PT };