bitboss-ui 3.0.0-beta.48 → 3.0.0-beta.49

package/dist/components/CommonTimeSelector/CommonTimeSelector.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import e from "../BbBaseButton/BbBaseButton.vue.js";
-import { useLocale as t } from "../../composables/useLocale.js";
+import { useLocale as e } from "../../composables/useLocale.js";
+import t from "../BbBaseButton/BbBaseButton.vue.js";
 import { useTypeahead as n } from "../../composables/useTypeahead.js";
 import { useMeridiem as r } from "./useMeridiem.js";
 import { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onMounted as m, openBlock as h, renderList as g, toDisplayString as _, watch as v, withCtx as y } from "vue";
@@ -21,7 +21,7 @@ var b = { class: "bb-time-selector" }, x = { class: "bb-time-selector__columns"
 	},
 	emits: ["select"],
 	setup(u, { emit: w }) {
-		let T = u, E = w, { t: D } = t(), O = {}, k = (e, t) => t === "PM" ? e === 12 ? 12 : e + 12 : e === 12 ? 0 : e, A = r(), j = a(() => T.meridiem ? A.isPm(T.meridiem) ? "PM" : "AM" : T.hour && parseInt(T.hour, 10) >= 12 ? "PM" : "AM"), M = (e) => {
+		let T = u, E = w, { t: D } = e(), O = {}, k = (e, t) => t === "PM" ? e === 12 ? 12 : e + 12 : e === 12 ? 0 : e, A = r(), j = a(() => T.meridiem ? A.isPm(T.meridiem) ? "PM" : "AM" : T.hour && parseInt(T.hour, 10) >= 12 ? "PM" : "AM"), M = (e) => {
 			if (e === "hour") {
 				if (!T.hour) return null;
 				let e = parseInt(T.hour, 10);
@@ -193,10 +193,10 @@ var b = { class: "bb-time-selector" }, x = { class: "bb-time-selector__columns"
 			let n = H.value.findIndex((t) => t.unit === e.unit);
 			X[n]?.(t);
 		};
-		return (t, n) => (h(), s("div", b, [c("div", d({
+		return (e, n) => (h(), s("div", b, [c("div", d({
 			"aria-hidden": "true",
 			class: ["bb-time-selector__header", { "bb-time-selector__header--empty": W.value }]
-		}, t.passthrough?.header), _(U.value), 17), c("div", x, [(h(!0), s(i, null, g(H.value, (n) => (h(), s("div", {
+		}, e.passthrough?.header), _(U.value), 17), c("div", x, [(h(!0), s(i, null, g(H.value, (n) => (h(), s("div", {
 			key: n.unit,
 			"aria-label": n.ariaLabel,
 			class: p(["bb-time-selector__column", `bb-time-selector__column--${n.unit}`]),
@@ -206,12 +206,12 @@ var b = { class: "bb-time-selector" }, x = { class: "bb-time-selector__columns"
 			"aria-hidden": "true",
 			class: "bb-time-selector__cell-column-header",
 			ref_for: !0
-		}, t.passthrough?.cellColumnHeader), _(n.header), 17), c("div", {
+		}, e.passthrough?.cellColumnHeader), _(n.header), 17), c("div", {
 			ref_for: !0,
 			ref: (e) => O[n.unit] = e,
 			class: "bb-time-selector__scroll",
 			"data-bb-no-drag": ""
-		}, [(h(!0), s(i, null, g(n.options, (r) => (h(), o(e, d({
+		}, [(h(!0), s(i, null, g(n.options, (r) => (h(), o(t, d({
 			key: r.value,
 			"aria-pressed": r.selected,
 			class: ["bb-time-selector__item", {
@@ -219,10 +219,10 @@ var b = { class: "bb-time-selector" }, x = { class: "bb-time-selector__columns"
 				"bb-time-selector__item--disabled": r.disabled
 			}],
 			"data-value": r.value,
-			disabled: t.disabled || r.disabled,
+			disabled: e.disabled || r.disabled,
 			onClick: (e) => G(n, r),
 			ref_for: !0
-		}, t.passthrough?.part?.("item", {
+		}, e.passthrough?.part?.("item", {
 			selected: r.selected,
 			disabled: r.disabled || void 0
 		})), {

package/dist/composables/formSubmitLock.d.ts

@@ -0,0 +1,6 @@
+import { InjectionKey } from 'vue';
+export type FormSubmitLock = {
+    /** A submit promise is pending and the form locks while it runs. */
+    locked: () => boolean;
+};
+export declare const BB_FORM_SUBMIT_LOCK: InjectionKey<FormSubmitLock>;

package/dist/composables/formSubmitLock.js

@@ -0,0 +1,4 @@
+//#region src/composables/formSubmitLock.ts
+var e = Symbol.for("bitboss-ui:form-submit-lock");
+//#endregion
+export { e as BB_FORM_SUBMIT_LOCK };

package/dist/composables/useBaseOptions.d.ts

@@ -13,6 +13,12 @@ type Options = {
      * `append:icon`) — see `ItemProps`. Absent means none of them.
      */
     itemProps?: MaybeRef<any>;
+    /**
+     * Q60.24: with no `itemText` / `itemValue`, read an own `label` (then
+     * `text`) and an own `value` (see `getOptionText` / `getOptionValue`).
+     * The option surfaces set it; BbTable and BbTag keep the whole item.
+     */
+    optionDefaults?: boolean;
 };
 type BaseOptionIdentity = {
     item: any;
@@ -27,7 +33,7 @@ type BaseOption2 = BaseOptionIdentity & {
     selected: boolean;
     disabled: boolean;
 };
-export declare const useBaseOptions: ({ items, disabled, selectable, itemText, itemValue, itemProps, selectedIndexedByHash, max, }: Options) => {
+export declare const useBaseOptions: ({ items, disabled, selectable, itemText, itemValue, itemProps, selectedIndexedByHash, max, optionDefaults, }: Options) => {
     options: import('vue').ComputedRef<BaseOption2[]>;
     baseOptions: import('vue').ComputedRef<BaseOptionIdentity[]>;
     createOption: (item: any) => {

package/dist/composables/useBaseOptions.js

@@ -4,70 +4,70 @@ import { useItemValue as n } from "./useItemValue.js";
 import { asDescription as r, createItemPropsResolver as i } from "../utilities/functions/itemProps.js";
 import { computed as a, unref as o } from "vue";
 //#region src/composables/useBaseOptions.ts
-var { getItemText: s } = t(), { getItemValue: c } = n(), l = (e, t, n, r, i, a) => {
+var { getItemText: s, getOptionText: c } = t(), { getItemValue: l, getOptionValue: u } = n(), d = (e, t, n, r, i, a) => {
 	if (t) return !0;
 	if (typeof n == "function") {
 		if (!n(e)) return !0;
 	} else if (typeof n == "boolean" && !n) return !0;
 	return !a && r !== void 0 && i >= r;
-}, u = ({ items: t, disabled: n, selectable: u, itemText: f, itemValue: p, itemProps: m, selectedIndexedByHash: h, max: g = Infinity }) => {
-	let _ = a(() => o(n)), v = a(() => o(t)), y = a(() => Object.keys(h.value).length), b = (t) => {
-		let n = c(t, o(p)), a = e(n), d = s(t, o(f)), v = i(o(m)).field, b = h.value[a] !== void 0, x = l(t, _.value, o(u), o(g), y.value, b);
+}, f = ({ items: t, disabled: n, selectable: f, itemText: m, itemValue: h, itemProps: g, selectedIndexedByHash: _, max: v = Infinity, optionDefaults: y = !1 }) => {
+	let b = y ? c : s, x = y ? u : l, S = a(() => o(n)), C = a(() => o(t)), w = a(() => Object.keys(_.value).length), T = (t) => {
+		let n = x(t, o(h)), a = e(n), s = b(t, o(m)), c = i(o(g)).field, l = _.value[a] !== void 0, u = d(t, S.value, o(f), o(v), w.value, l);
 		return {
 			item: t,
-			text: d,
-			description: r(v(t, "description")),
-			"prepend:icon": v(t, "prepend:icon"),
-			"append:icon": v(t, "append:icon"),
+			text: s,
+			description: r(c(t, "description")),
+			"prepend:icon": c(t, "prepend:icon"),
+			"append:icon": c(t, "append:icon"),
 			value: n,
 			valueHash: a,
-			selected: b,
-			disabled: o(x)
+			selected: l,
+			disabled: o(u)
 		};
-	}, x = a(() => {
-		let t = [], n = /* @__PURE__ */ new Set(), a = o(f), l = i(o(m)).field;
-		for (let i of v.value) {
-			let u = c(i, o(p)), d = e(u);
-			if (n.has(d)) continue;
-			n.add(d);
-			let f;
+	}, E = a(() => {
+		let t = [], n = /* @__PURE__ */ new Set(), a = o(m), s = i(o(g)).field;
+		for (let i of C.value) {
+			let c = x(i, o(h)), l = e(c);
+			if (n.has(l)) continue;
+			n.add(l);
+			let u;
 			t.push({
 				item: i,
 				get text() {
-					return f ??= s(i, a);
+					return u ??= b(i, a);
 				},
 				get description() {
-					return r(l(i, "description"));
+					return r(s(i, "description"));
 				},
 				get "prepend:icon"() {
-					return l(i, "prepend:icon");
+					return s(i, "prepend:icon");
 				},
 				get "append:icon"() {
-					return l(i, "append:icon");
+					return s(i, "append:icon");
 				},
-				value: u,
-				valueHash: d
+				value: c,
+				valueHash: l
 			});
 		}
 		return t;
-	}), S = /* @__PURE__ */ new Map();
+	}), D = /* @__PURE__ */ new Map();
 	return {
 		options: a(() => {
-			let e = /* @__PURE__ */ new Map(), t = x.value.map((t) => {
-				let n = h.value[t.valueHash] !== void 0, r = l(t.item, _.value, o(u), o(g), y.value, n), i = S.get(t.valueHash);
+			let e = /* @__PURE__ */ new Map(), t = E.value.map((t) => {
+				let n = _.value[t.valueHash] !== void 0, r = d(t.item, S.value, o(f), o(v), w.value, n), i = D.get(t.valueHash);
 				if (i && i.base === t && i.option.selected === n && i.option.disabled === r) return e.set(t.valueHash, i), i.option;
-				let a = d(t, n, r);
+				let a = p(t, n, r);
 				return e.set(t.valueHash, {
 					base: t,
 					option: a
 				}), a;
 			});
-			return S = e, t;
+			return D = e, t;
 		}),
-		baseOptions: x,
-		createOption: b
+		baseOptions: E,
+		createOption: T
 	};
-}, d = (e, t, n) => ({
+}, p = (e, t, n) => ({
 	item: e.item,
 	get text() {
 		return e.text;
@@ -87,4 +87,4 @@ var { getItemText: s } = t(), { getItemValue: c } = n(), l = (e, t, n, r, i, a)
 	disabled: n
 });
 //#endregion
-export { u as useBaseOptions };
+export { f as useBaseOptions };

package/dist/composables/useBbDropdownContext.d.ts

@@ -2,15 +2,15 @@ import { InternalGroup } from '../components/BbDropdown/types';
 import { ComputedRef, MaybeRefOrGetter } from 'vue';
 /**
  * One selected option of a group, resolved as far as the dropdown currently can.
- * `value` is always present (it is the consumer's `v-model` value); `text` and
+ * `value` is always present (it is the consumer's `v-model` value); `label` and
  * `original` are filled in only once the owning group has loaded/stashed the
  * matching item — reading the context never triggers a fetch, so a search-first
  * group the user never opened yields `{ value }` alone until it loads. Pass
  * `prefill: true` on such a group to resolve a seeded selection eagerly.
  */
 export type BbDropdownContextOption = {
-    /** Resolved display text, once the group has the item. */
-    text?: string;
+    /** The row's label, once the group has the item. */
+    label?: string;
     /**
      * Resolved description (the group's `itemProps.description`, or a literal item's
      * `description`), once the group has the item. Absent when it has none.
@@ -25,7 +25,7 @@ export type BbDropdownContextOption = {
  * Live, read-only state of one selectable group — **the group config you
  * declared, plus the dropdown's live state on top.**
  *
- * Every field you passed in `items` is carried through as-is (`key`, `label`,
+ * Every field you passed in `items` is carried through as-is (`id`, `label`,
  * `hideLabel`, `filterBy`, `max`, `prepend:icon`, `variant`, …), so a filter
  * chip can be rendered from one declaration instead of re-deriving it. The
  * group config is a closed shape — unknown keys are a type error on the way in,
@@ -38,10 +38,10 @@ export type BbDropdownContextOption = {
  *
  * The live fields below always win over anything of the same name in the config.
  */
-export type BbDropdownContextGroup = Omit<InternalGroup, 'items' | 'multiple' | 'selectable'> & {
+export type BbDropdownContextGroup = Omit<InternalGroup, 'items' | 'multiple' | 'selectable' | 'value' | 'key'> & {
     /** The group's `v-model` value — a single value (or `null`), an array when `multiple`. */
     value: unknown;
-    /** Selected options with `value` always, `text`/`original` resolved lazily. */
+    /** Selected options with `value` always, `label`/`original` resolved lazily. */
     selectedOptions: BbDropdownContextOption[];
     /** Whether the group is multi-select (resolved, never `undefined`). */
     multiple: boolean;
@@ -61,7 +61,7 @@ export type BbDropdownContextHandle = {
     isReady: ComputedRef<boolean>;
     /** Whether the dropdown panel/sheet is open. */
     open: ComputedRef<boolean>;
-    /** Live per-group state, keyed by group key. `{}` until the dropdown mounts. */
+    /** Live per-group state, keyed by group `id`. `{}` until the dropdown mounts. */
     groups: ComputedRef<Record<string, BbDropdownContextGroup>>;
 };
 /**
@@ -72,7 +72,7 @@ export type BbDropdownContextHandle = {
  *
  * The point is chips/filter summaries **without a twin fetch**: the dropdown
  * already resolved a selection's label when the user picked it (kept via
- * `stash`), so `groups[key].selectedOptions` hands you `{ value, text, original }`
+ * `stash`), so `groups[id].selectedOptions` hands you `{ value, label, original }`
  * for free. It is read-only — to change a selection, mutate that group's own
  * `v-model` (which you own). It is also **lazy**: reading it never triggers a
  * fetch, so a seeded selection whose group was never opened stays label-less

package/dist/composables/useBbFormField.d.ts

@@ -16,6 +16,8 @@ export type BbFormFieldSpec = BbFormFieldOptions & {
     /** A `required` rule or the form's schema makes it mandatory (Q56.8). */
     required?: boolean;
     bound: boolean;
+    /** Q60.17: the form is saving (its submit lock is on). */
+    locked?: boolean;
     setValue?: (value: unknown) => void;
     validate?: () => Promise<boolean>;
 };
@@ -37,6 +39,13 @@ export type BbFormFieldHandle<T> = {
     errorAttrs: {
         id: string;
     };
+    /**
+     * The form is saving (Q60.17): a `@submit` promise is pending and the
+     * form locks while it runs. Treat the control as read-only: keep it
+     * focusable and its value visible, refuse changes. `controlAttrs`
+     * carries `aria-readonly` meanwhile, and writes to `value` are ignored.
+     */
+    readonly: ComputedRef<boolean>;
 };
 /**
  * The custom fields described for a form. For BbForm; call in its setup.

package/dist/composables/useBbFormField.js

@@ -32,12 +32,12 @@ function p(t, r) {
 			e.delete(s), e.size || c.fields.delete(t), d(c, t);
 		});
 	}
-	let l = n(() => s.errors);
+	let l = n(() => s.errors), f = n(() => !!s.locked);
 	return {
 		value: n({
 			get: () => s.value,
 			set: (e) => {
-				s.setValue ? s.setValue(e) : s.value = e;
+				f.value || (s.setValue ? s.setValue(e) : s.value = e);
 			}
 		}),
 		errors: l,
@@ -46,9 +46,11 @@ function p(t, r) {
 			"aria-invalid": l.value.length ? "true" : void 0,
 			"aria-required": s.required ? "true" : void 0,
 			"aria-describedby": l.value.length ? s.errorId : void 0,
+			"aria-readonly": f.value ? "true" : void 0,
 			"data-bb-field": r.name
 		})),
-		errorAttrs: { id: s.errorId }
+		errorAttrs: { id: s.errorId },
+		readonly: f
 	};
 }
 //#endregion

package/dist/composables/useBbTabsContext.d.ts

@@ -11,14 +11,14 @@ type ResolvedTabsProps<K extends string = string> = BbTabsRootProps<K> & {
 export type TabsMappedItem<K extends string = string> = {
     /** The source descriptor from `items` — what a per-item `pt:item` function receives. */
     item: BbTabsItem<K>;
-    key: K;
+    value: K;
     label?: string;
     eager?: boolean;
     tabId: string;
     panelId: string;
-    /** Per-tab label slot name, normalized: `` `${slotKey(key)}:label` ``. */
+    /** Per-tab label slot name, normalized: `` `${slotKey(value)}:label` ``. */
     labelSlotName: string;
-    /** Per-tab panel slot name, normalized: `slotKey(key)`. */
+    /** Per-tab panel slot name, normalized: `slotKey(value)`. */
     panelSlotName: string;
     active: boolean;
     ariaSelected: boolean;
@@ -37,7 +37,7 @@ export type TabsMappedItem<K extends string = string> = {
 export type BbTabsContext<K extends string = string> = {
     /** Public id of the host component (`id` prop or generated). */
     id: string;
-    /** Prefix used for tab/panel DOM ids (`{instanceid}_tab_{slotKey(key)}`). */
+    /** Prefix used for tab/panel DOM ids (`{instanceid}_tab_{slotKey(value)}`). */
     instanceid: string;
     items: ComputedRef<Array<BbTabsItem<K>>>;
     disabled: ComputedRef<boolean>;
@@ -49,15 +49,15 @@ export type BbTabsContext<K extends string = string> = {
     direction: ComputedRef<'horizontal' | 'vertical'>;
     /** The strip's look — `BbTabsList` reads it unless given its own `variant`. */
     variant: ComputedRef<TabsVariantType>;
-    currentTab: Ref<BbTabsItem<K>['key'] | null>;
+    currentTab: Ref<BbTabsItem<K>['value'] | null>;
     currentTabIndex: ComputedRef<number>;
     isFirst: ComputedRef<boolean>;
     isLast: ComputedRef<boolean>;
     mappedItems: ComputedRef<Array<TabsMappedItem<K>>>;
     /** Direction of the panel slide transition, derived from the index delta. */
     animationDirection: Ref<'left' | 'right'>;
-    /** Selects a tab by key, handling v-model and URL/Inertia navigation. */
-    select: (key: BbTabsItem<K>['key']) => void;
+    /** Selects a tab by its `value`, handling v-model and URL/Inertia navigation. */
+    select: (key: BbTabsItem<K>['value']) => void;
     goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
 };
 /**
@@ -83,7 +83,7 @@ export type BbTabsContextHandle<K extends string = string> = {
     isReady: ComputedRef<boolean>;
     /**
      * The key of the currently active tab (`null` until the tabs mount).
-     * Writable: assigning a key selects it, exactly like `select(key)` —
+     * Writable: assigning a value selects it, exactly like `select(value)` —
      * bindable (e.g. `v-model`-style) from anywhere on the client.
      *
      * Reads as `K | null`, but only `K` may be *assigned*: a tab is always
@@ -99,8 +99,8 @@ export type BbTabsContextHandle<K extends string = string> = {
     isLast: ComputedRef<boolean>;
     /** Navigate to `'first'`, `'previous'`, `'next'`, or `'last'` tab. */
     goTo: (target: 'first' | 'previous' | 'next' | 'last') => void;
-    /** Select a tab by key, with the usual v-model/URL/Inertia handling. */
-    select: (key: K) => void;
+    /** Select a tab by its `value`, with the usual v-model/URL/Inertia handling. */
+    select: (value: K) => void;
 };
 /**
  * Companion composable for `BbTabs`/`BbTabsRoot`: pass the same `id` you gave

package/dist/composables/useBbTabsContext.js

@@ -11,19 +11,19 @@ import { useQuery as l } from "./useQuery.js";
 import { computed as u, getCurrentInstance as d, inject as f, onScopeDispose as p, provide as m, ref as h, shallowReactive as g, watch as _ } from "vue";
 //#region src/composables/useBbTabsContext.ts
 var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) => {
-	let b = s(), x = c(), { error: S, warn: C } = e(), { isInertia: w } = a(), T = d(), E = r().id.value, D = f.id ?? E, O = `bb-tabs_${D}`, k = h(null), A = u(() => f.items.findIndex((e) => e.key === k.value)), j = u(() => A.value === 0), M = u(() => A.value === f.items.length - 1);
+	let b = s(), x = c(), { error: S, warn: C } = e(), { isInertia: w } = a(), T = d(), E = r().id.value, D = f.id ?? E, O = `bb-tabs_${D}`, k = h(null), A = u(() => f.items.findIndex((e) => e.value === k.value)), j = u(() => A.value === 0), M = u(() => A.value === f.items.length - 1);
 	f.items.forEach((e) => {
-		e.key ? (f.server || e.server) && !f.navigation && S(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : S(`A tab item has no key: ${JSON.stringify(e, null, 2)}`);
+		e.value ? (f.server || e.server) && !f.navigation && S(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : S(`A tab item has no value: ${JSON.stringify(e, null, 2)}`);
 	});
 	let N = l(), P = u(() => [N.value[f.queryKey]].flat()[0]), F = (e) => String(e).split(/\W+/g).join("_").toLowerCase(), I = (e) => {
-		let t = f.items.find((t) => i(t.key) === e);
+		let t = f.items.find((t) => i(t.value) === e);
 		if (t) return {
-			key: t.key,
+			key: t.value,
 			legacy: !1
 		};
-		let n = f.items.find((t) => F(t.key) === e);
+		let n = f.items.find((t) => F(t.value) === e);
 		return n ? {
-			key: n.key,
+			key: n.value,
 			legacy: !0
 		} : null;
 	}, L = () => typeof window > "u" ? null : new URLSearchParams(window.location.search).get(f.queryKey), R = (e) => {
@@ -49,7 +49,7 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 		else if (f.modelValue) k.value = f.modelValue;
 		else if (f.items[0]) {
 			let e = f.items.find((e) => !e.disabled);
-			e && (k.value = e.key);
+			e && (k.value = e.value);
 		}
 	};
 	z();
@@ -69,12 +69,12 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 	}), V = (e) => {
 		f.modelValue !== e && g("update:modelValue", e), k.value = e;
 	}, H = (e, n = f.replace) => {
-		let r = f.items.find((t) => t.key === e);
+		let r = f.items.find((t) => t.value === e);
 		if (t(r)) {
-			C(`Cannot select tab "${e}" on tabs "${D}": no item with this key. Available keys: ${f.items.map((e) => e.key).join(", ")}. Selection unchanged.`);
+			C(`Cannot select tab "${e}" on tabs "${D}": no item with this key. Available keys: ${f.items.map((e) => e.value).join(", ")}. Selection unchanged.`);
 			return;
 		}
-		if (r.key === k.value) return;
+		if (r.value === k.value) return;
 		let a = i(e);
 		if (f.navigation && b.value && x && P.value !== a) {
 			let e = n ? "replace" : "push", t = {
@@ -127,7 +127,7 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 		let r = f.items[n];
 		return !r || r.disabled ? null : n;
 	}, G = (e) => {
-		document.getElementById(`${O}_tab_${i(f.items[e].key)}`)?.focus();
+		document.getElementById(`${O}_tab_${i(f.items[e].value)}`)?.focus();
 	}, K = (e) => {
 		if (![
 			"first",
@@ -140,14 +140,14 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 		}
 		if (!f.items.length) return;
 		let t = W(e, A.value);
-		t !== null && (G(t), H(f.items[t].key));
+		t !== null && (G(t), H(f.items[t].value));
 	}, q = u(() => f.manualActivation ?? (!!f.server || f.items.some((e) => !!e.server))), J = (e, t) => {
 		if (!q.value) {
 			K(e);
 			return;
 		}
 		if (!f.items.length) return;
-		let n = t.currentTarget?.id, r = f.items.findIndex((e) => `${O}_tab_${i(e.key)}` === n), a = r === -1 ? A.value : r, o = W(e, a);
+		let n = t.currentTarget?.id, r = f.items.findIndex((e) => `${O}_tab_${i(e.value)}` === n), a = r === -1 ? A.value : r, o = W(e, a);
 		o !== null && G(o);
 	}, Y = (e) => {
 		if (f.disabled) return;
@@ -156,10 +156,10 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 	}, X = u(() => {
 		let e = k.value, t = A.value;
 		return f.items.map((n) => {
-			let { key: r, label: a, eager: o } = n, s = r === e, c = !!(n.disabled || f.disabled);
+			let { value: r, label: a, eager: o } = n, s = r === e, c = !!(n.disabled || f.disabled);
 			return {
 				item: n,
-				key: r,
+				value: r,
 				label: a,
 				eager: o,
 				tabId: `${O}_tab_${i(r)}`,
@@ -177,7 +177,7 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 					isFirst: j.value,
 					isLast: M.value,
 					selected: s,
-					text: a,
+					label: a,
 					value: r,
 					goTo: K
 				},
@@ -204,11 +204,11 @@ var v = Symbol("BbTabsContext"), y = g(/* @__PURE__ */ new Map()), b = (f, g) =>
 	let Q = h("right");
 	_(k, (e, t) => {
 		if (e && t) {
-			let n = f.items.findIndex((t) => t.key === e), r = f.items.findIndex((e) => e.key === t);
+			let n = f.items.findIndex((t) => t.value === e), r = f.items.findIndex((e) => e.value === t);
 			Q.value = n > r ? "right" : "left";
 		}
 	}, { flush: "sync" }), _(() => n(f.items), () => {
-		k.value && !f.items.find((e) => e.key === k.value) && (z(), U());
+		k.value && !f.items.find((e) => e.value === k.value) && (z(), U());
 	}, {
 		immediate: !0,
 		deep: !0

package/dist/composables/useFormBinding.d.ts

@@ -77,6 +77,12 @@ export type FieldBinding<T> = {
     leave: () => void;
     /** A checkbox / switch click: the value is committed at once. */
     commit: (next: T) => void;
+    /**
+     * Q60.17 — the enclosing BbForm is saving (a `@submit` promise is
+     * pending, and the form did not opt out with `disable-submit-lock`): the
+     * control acts read-only until it settles.
+     */
+    locked: ComputedRef<boolean>;
 };
 type AnyEmit = (event: any, ...args: any[]) => void;
 export type FormConnection = {
@@ -103,6 +109,11 @@ export type BoundField<P extends Record<string, any>, E> = {
     required: ComputedRef<boolean | undefined>;
     /** Bind as `aria-required` where the control's role supports it. */
     ariaRequired: ComputedRef<true | undefined>;
+    /**
+     * Q60.17 — the `readonly` prop, or the enclosing form saving: the
+     * template binds this, the script reads `props.readonly` (bound too).
+     */
+    readonly: ComputedRef<boolean>;
 };
 /**
  * The binding a form control runs on: the enclosing `BbForm`'s (it joins the

package/dist/composables/useFormBinding.js

@@ -19,25 +19,27 @@ var s = Symbol.for("bitboss-ui:form-connection"), c = (i, s, c) => {
 		showAsterisk: n(() => !!l.requiredAsterisk && !!i.required),
 		setModelValue: p,
 		leave: () => {},
-		commit: p
+		commit: p,
+		locked: n(() => !1)
 	};
-}, l = (e, t, n) => {
-	let r = i(s, null), a = r && !e.formless ? r.bind(e, t, n) : c(e, t, n);
+}, l = (e, t, r) => {
+	let a = i(s, null), o = a && !e.formless ? a.bind(e, t, r) : c(e, t, r), l = n(() => !!e.readonly || o.locked.value);
 	return {
-		props: new Proxy(e, { get: (e, t) => t === "modelValue" ? a.model.value : t === "errors" ? a.errors.value : t === "required" && "required" in e ? a.required.value : Reflect.get(e, t) }),
-		emit: ((e, ...r) => {
+		props: new Proxy(e, { get: (e, t) => t === "modelValue" ? o.model.value : t === "errors" ? o.errors.value : t === "required" && "required" in e ? o.required.value : t === "readonly" ? l.value : Reflect.get(e, t) }),
+		emit: ((e, ...n) => {
 			if (e === "update:modelValue") {
-				let e = r[0];
-				n.commits ? a.commit(e) : a.setModelValue(e);
+				let e = n[0];
+				r.commits ? o.commit(e) : o.setModelValue(e);
 				return;
 			}
-			e === n.leaveOn && a.leave(), t(e, ...r);
+			e === r.leaveOn && o.leave(), t(e, ...n);
 		}),
-		showAsterisk: a.showAsterisk,
-		model: a.model,
-		errors: a.errors,
-		required: a.required,
-		ariaRequired: a.ariaRequired
+		showAsterisk: o.showAsterisk,
+		model: o.model,
+		errors: o.errors,
+		required: o.required,
+		ariaRequired: o.ariaRequired,
+		readonly: l
 	};
 };
 //#endregion

package/dist/composables/useItemText.d.ts

@@ -2,7 +2,11 @@ type NestedKeyOf<ObjectType extends object> = {
     [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}` : `${Key}`;
 }[keyof ObjectType & (string | number)];
 export type Path<T> = T extends object ? NestedKeyOf<T> | ((item: T) => string | number) | undefined | (string & Record<never, never>) : undefined;
+/** A non-null object item that has `key` as an OWN property (never `in`). */
+export declare const hasOwnItemKey: (item: unknown, key: string) => item is Record<string, unknown>;
+declare function getItemText<T>(item: T, getter?: Path<T>): string;
 export declare const useItemText: () => {
-    getItemText<T>(item: T, getter?: Path<T>): string;
+    getItemText: typeof getItemText;
+    getOptionText: <T>(item: T, getter?: Path<T>) => string;
 };
 export {};

package/dist/composables/useItemText.js

@@ -1,6 +1,7 @@
 import { get as e } from "../utilities/functions/get.js";
 //#region src/composables/useItemText.ts
-var t = (e) => JSON.stringify(e) ?? "", n = () => ({ getItemText(n, r) {
+var t = (e) => JSON.stringify(e) ?? "", n = (e, t) => typeof e == "object" && !!e && Object.hasOwn(e, t);
+function r(n, r) {
 	if (typeof n == "string") return n;
 	if (r) {
 		if (typeof r == "function") {
@@ -12,6 +13,10 @@ var t = (e) => JSON.stringify(e) ?? "", n = () => ({ getItemText(n, r) {
 		}
 	}
 	return t(n);
-} });
+}
+var i = (e, t) => t === void 0 ? n(e, "label") ? r(e, "label") : n(e, "text") ? r(e, "text") : r(e) : r(e, t), a = () => ({
+	getItemText: r,
+	getOptionText: i
+});
 //#endregion
-export { n as useItemText };
+export { n as hasOwnItemKey, a as useItemText };

package/dist/composables/useItemValue.d.ts

@@ -1,3 +1,7 @@
+type ValueGetter<T> = string | ((item: T) => unknown);
+declare function getItemValue<T>(item: T, getter?: ValueGetter<T>): any;
 export declare const useItemValue: () => {
-    getItemValue<T>(item: T, getter?: string | ((item: T) => any)): any;
+    getItemValue: typeof getItemValue;
+    getOptionValue: <T>(item: T, getter?: ValueGetter<T>) => any;
 };
+export {};

package/dist/composables/useItemValue.js

@@ -1,9 +1,14 @@
 import { get as e } from "../utilities/functions/get.js";
+import { hasOwnItemKey as t } from "./useItemText.js";
 //#region src/composables/useItemValue.ts
-var t = () => ({ getItemValue(t, n) {
+function n(t, n) {
 	if (n === void 0) return t;
 	if (typeof n == "function") return n(t);
 	if (typeof n == "string") return e(t, n);
-} });
+}
+var r = (e, r) => r === void 0 && t(e, "value") ? e.value : n(e, r), i = () => ({
+	getItemValue: n,
+	getOptionValue: r
+});
 //#endregion
-export { t as useItemValue };
+export { i as useItemValue };