@bridge-ui/vue 0.5.1 → 0.7.0

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +1,22 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as n } from "../../Utils/index.js";
-import { useListbox as ee } from "./composables/useListbox.js";
-import r from "../Button/Button.js";
-import te from "../FieldOverlay/FieldOverlay.js";
-import ne from "../List/List.js";
-import { LISTBOX_INJECTION_KEY as re } from "./listboxInjectionKey.js";
-import i from "../ListItem/ListItem.js";
-import a from "../ListSection/ListSection.js";
-import ie from "../Progress/Progress.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ae, renderSlot as w, toDisplayString as T, unref as E, useModel as oe, useSlots as se, watch as D, withCtx as O } from "vue";
+import { useListbox as r } from "./composables/useListbox.js";
+import i from "../Button/Button.js";
+import a from "../FieldOverlay/FieldOverlay.js";
+import o from "../List/List.js";
+import { LISTBOX_INJECTION_KEY as ee } from "./listboxInjectionKey.js";
+import te from "../ListItem/ListItem.js";
+import ne from "../ListSection/ListSection.js";
+import s from "../Progress/Progress.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as re, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, provide as ie, ref as ae, renderList as oe, renderSlot as C, toDisplayString as w, unref as T, useModel as E, useSlots as se, watch as D, withCtx as O } from "vue";
 import { isNil as ce } from "es-toolkit/compat";
-import { entriesFromListboxOptions as le, flattenListboxOptions as ue, mapListboxEntriesToRows as de } from "@bridge-ui/core/Domain";
-import { cn as k } from "@bridge-ui/core/Utils";
+import { entriesFromListboxOptions as le, flattenListboxOptions as ue, mapListboxEntriesToRows as de, upsertListboxOption as k } from "@bridge-ui/core/Domain";
+import { cn as A } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var A = { key: 1 }, j = /*@__PURE__*/ h({
+var j = { key: 1 }, M = /*@__PURE__*/ g({
 	__name: "Listbox",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ v({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -67,114 +67,114 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ _([
+	emits: /*@__PURE__*/ v([
 		"apply",
 		"cancel",
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(h, { emit: _ }) {
-		let j = se(), M = _, N = oe(h, "modelValue");
-		D(N, (e) => {
-			M("show-change", e);
+	setup(g, { emit: v }) {
+		let M = se(), N = v, P = E(g, "modelValue");
+		D(P, (e) => {
+			N("show-change", e);
 		});
-		let P = h, F = e(), I = s(() => P.emptyMessage ?? F("No options")), L = s(() => P.loadingMessage ?? F("Loading...")), { merged: R, checkClass: z, scrollBind: B, footerBind: V, showFooter: H, applyLabel: fe, cancelLabel: pe, messageBind: U, surfaceBind: me, sizeClasses: he, mergedClasses: W, applyButtonProps: ge, optionHoverClass: _e, cancelButtonProps: ve, optionSelectedClass: ye, optionHighlightedClass: be } = ee(P, {
+		let F = g, I = e(), L = l(() => F.emptyMessage ?? I("No options")), R = l(() => F.loadingMessage ?? I("Loading...")), { merged: z, checkClass: B, scrollBind: V, footerBind: H, showFooter: fe, applyLabel: pe, cancelLabel: me, messageBind: U, surfaceBind: he, sizeClasses: ge, mergedClasses: W, applyButtonProps: _e, optionHoverClass: ve, cancelButtonProps: ye, optionSelectedClass: be, optionHighlightedClass: xe } = r(F, {
 			size: "md",
 			color: "primary"
-		}), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
+		}), Se = l(() => F.options ?? []), G = l(() => F.entries ? F.entries : le(Se.value)), K = l(() => ue(G.value)), q = l(() => t(M, "default")), J = l(() => !F.loading && !q.value && K.value.length === 0 && F.hideEmptyMessage !== !0), Ce = l(() => A(B.value, W.value.check)), Y = ae([]);
 		function X(e) {
-			return P.isSelected?.(e) ?? !1;
-		}
-		function Ce(e) {
-			e.disabled || M("select", e);
+			return F.isSelected?.(e) ?? !1;
 		}
 		function we(e) {
-			return Y.value.some((t) => String(t.value) === String(e.value)) || (Y.value = [...Y.value, e]), () => {
+			e.disabled || N("select", e);
+		}
+		function Te(e) {
+			let t = k(Y.value, e);
+			return t !== Y.value && (Y.value = t), () => {
 				Y.value = Y.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function Te(e) {
+		function Ee(e) {
 			return (q.value ? Y.value : K.value).findIndex((t) => String(t.value) === String(e));
 		}
 		D(Y, (e) => {
-			q.value && M("registered-options-change", e);
+			q.value && N("registered-options-change", e);
 		}, { deep: !0 });
-		let Ee = s(() => ({
-			getOptionIndex: Te,
-			registerOption: we,
-			onSelect: Ce,
-			listboxId: P.listboxId,
+		let De = l(() => ({
+			getOptionIndex: Ee,
+			registerOption: Te,
+			onSelect: we,
+			listboxId: F.listboxId,
 			isSelected: X,
-			sizeClasses: he.value,
-			showCheckmark: P.showCheckmark,
-			checkClass: Se.value,
-			highlightedIndex: P.highlightedIndex,
-			optionHoverClass: _e.value,
-			optionSelectedClass: ye.value,
-			optionHighlightedClass: be.value,
+			sizeClasses: ge.value,
+			showCheckmark: F.showCheckmark,
+			checkClass: Ce.value,
+			highlightedIndex: F.highlightedIndex,
+			optionHoverClass: ve.value,
+			optionSelectedClass: be.value,
+			optionHighlightedClass: xe.value,
 			mergedClasses: {
 				optionHover: W.value.optionHover,
 				optionSelected: W.value.optionSelected,
 				optionHighlighted: W.value.optionHighlighted
 			}
 		}));
-		S(re, Ee);
-		let De = s(() => de(G.value, X)), Oe = s(() => R.value.customProps?.menu), ke = s(() => R.value.customProps?.modal), Z = s(() => R.value.customProps?.drawer), Ae = s(() => R.value.customProps?.list), je = s(() => R.value.customProps?.listItem), Me = s(() => R.value.customProps?.progress), Ne = s(() => R.value.customProps?.listSection), Pe = s(() => ({
-			modal: ke.value,
-			drawer: Z.value,
+		ie(ee, De);
+		let Oe = l(() => de(G.value, X)), ke = l(() => z.value.customProps?.menu), Ae = l(() => z.value.customProps?.modal), je = l(() => z.value.customProps?.drawer), Me = l(() => z.value.customProps?.list), Ne = l(() => z.value.customProps?.listItem), Pe = l(() => z.value.customProps?.progress), Fe = l(() => z.value.customProps?.listSection), Ie = l(() => ({
+			modal: Ae.value,
+			drawer: je.value,
 			menu: {
-				anchorEl: P.anchorEl,
-				placement: P.placement,
-				disableAutoFocus: P.disableAutoFocus,
-				...ce(P.rounded) ? {} : { rounded: P.rounded },
-				...Oe.value
+				anchorEl: F.anchorEl,
+				placement: F.placement,
+				disableAutoFocus: F.disableAutoFocus,
+				...ce(F.rounded) ? {} : { rounded: F.rounded },
+				...ke.value
 			}
-		})), Fe = s(() => ({
+		})), Z = l(() => ({
 			size: "xs",
 			"aria-hidden": !0,
-			color: R.value.color,
-			...n(Me.value, {
+			color: z.value.color,
+			...n(Pe.value, {
 				class: "shrink-0",
 				classes: { bar: W.value.loading }
 			})
-		})), Ie = s(() => ({
-			dense: !0,
+		})), Le = l(() => ({
 			role: "listbox",
-			id: P.listboxId,
-			"aria-labelledby": P.labelledBy,
-			"aria-multiselectable": P.multiple || void 0,
-			...n(Ae.value, { class: "p-0" })
+			id: F.listboxId,
+			"aria-labelledby": F.labelledBy,
+			"aria-multiselectable": F.multiple || void 0,
+			...n(Me.value)
 		}));
 		function Q() {
-			M("apply"), N.value = !1;
+			N("apply"), P.value = !1;
 		}
 		function $() {
-			M("cancel"), N.value = !1;
+			N("cancel"), P.value = !1;
 		}
-		return (e, n) => (x(), c(E(te), {
-			modelValue: N.value,
-			"onUpdate:modelValue": n[0] ||= (e) => N.value = e,
-			overlay: h.overlay,
-			"custom-props": Pe.value
+		return (e, n) => (S(), u(T(a), {
+			modelValue: P.value,
+			"onUpdate:modelValue": n[0] ||= (e) => P.value = e,
+			overlay: g.overlay,
+			"custom-props": Ie.value
 		}, {
-			default: O(() => [d("div", { class: y(E(me)) }, [
-				E(t)(E(j), "beforeOptions") ? w(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : l("", !0),
-				h.loading ? (x(), u(o, { key: 1 }, [m(E(ie), b(g(Fe.value)), null, 16), d("div", b(g(E(U))), [E(t)(E(j), "loading") ? w(e.$slots, "loading", {}, void 0, void 0, 0) : (x(), u("span", A, T(L.value), 1))], 16)], 64)) : (x(), u("div", b(v({ key: 2 }, E(B))), [m(E(ne), b(g(Ie.value)), {
-					default: O(() => [q.value ? w(e.$slots, "default", {}, void 0, void 0, 0) : (x(!0), u(o, { key: 1 }, ae(De.value, (n) => (x(), u(o, { key: n.key }, [n.kind === "section" ? (x(), c(E(a), v({
+			default: O(() => [p("div", { class: b(T(he)) }, [
+				T(t)(T(M), "beforeOptions") ? C(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : d("", !0),
+				g.loading ? (S(), f(c, { key: 1 }, [h(T(s), x(_(Z.value)), null, 16), p("div", x(_(T(U))), [T(t)(T(M), "loading") ? C(e.$slots, "loading", {}, void 0, void 0, 0) : (S(), f("span", j, w(R.value), 1))], 16)], 64)) : (S(), f("div", x(y({ key: 2 }, T(V))), [h(T(o), x(_(Le.value)), {
+					default: O(() => [q.value ? C(e.$slots, "default", {}, void 0, void 0, 0) : (S(!0), f(c, { key: 1 }, oe(Oe.value, (n) => (S(), f(c, { key: n.key }, [n.kind === "section" ? (S(), u(T(ne), y({
 						key: 0,
 						title: n.title,
 						sticky: n.sticky
-					}, { ref_for: !0 }, Ne.value), null, 16, ["title", "sticky"])) : (x(), c(E(i), v({
+					}, { ref_for: !0 }, Fe.value), null, 16, ["title", "sticky"])) : (S(), u(T(te), y({
 						key: 1,
 						interactive: "",
 						value: n.option.value,
 						disabled: n.option.disabled,
 						secondary: n.option.description,
-						primary: E(t)(E(j), "option") ? void 0 : n.option.label
-					}, { ref_for: !0 }, je.value), f({ _: 2 }, [E(t)(E(j), "option") ? {
+						primary: T(t)(T(M), "option") ? void 0 : n.option.label
+					}, { ref_for: !0 }, Ne.value), re({ _: 2 }, [T(t)(T(M), "option") ? {
 						name: "default",
-						fn: O(() => [w(e.$slots, "option", {
+						fn: O(() => [C(e.$slots, "option", {
 							option: n.option,
 							selected: n.selected
 						})]),
@@ -187,21 +187,21 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				J.value && !E(t)(E(j), "empty") ? (x(), u("div", b(v({ key: 3 }, E(U))), T(I.value), 17)) : J.value && E(t)(E(j), "empty") ? w(e.$slots, "empty", {}, void 0, void 0, 4) : l("", !0),
-				E(t)(E(j), "afterOptions") ? w(e.$slots, "afterOptions", {}, void 0, void 0, 5) : l("", !0),
-				E(H) ? (x(), u("div", b(v({ key: 6 }, E(V))), [w(e.$slots, "footer", {
+				J.value && !T(t)(T(M), "empty") ? (S(), f("div", x(y({ key: 3 }, T(U))), w(L.value), 17)) : J.value && T(t)(T(M), "empty") ? C(e.$slots, "empty", {}, void 0, void 0, 4) : d("", !0),
+				T(t)(T(M), "afterOptions") ? C(e.$slots, "afterOptions", {}, void 0, void 0, 5) : d("", !0),
+				T(fe) ? (S(), f("div", x(y({ key: 6 }, T(H))), [C(e.$slots, "footer", {
 					apply: Q,
 					cancel: $
-				}, () => [m(E(r), v({
+				}, () => [h(T(i), y({
 					variant: "flat",
 					color: "secondary"
-				}, E(ve), { onClick: $ }), {
-					default: O(() => [p(T(E(pe)), 1)]),
+				}, T(ye), { onClick: $ }), {
+					default: O(() => [m(w(T(me)), 1)]),
 					_: 1
-				}, 16), m(E(r), v({ color: "primary" }, E(ge), { onClick: Q }), {
-					default: O(() => [p(T(E(fe)), 1)]),
+				}, 16), h(T(i), y({ color: "primary" }, T(_e), { onClick: Q }), {
+					default: O(() => [m(w(T(pe)), 1)]),
 					_: 1
-				}, 16)])], 16)) : l("", !0)
+				}, 16)])], 16)) : d("", !0)
 			], 2)]),
 			_: 3
 		}, 8, [
@@ -212,4 +212,4 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

package/dist/Components/Listbox/collectComposedListboxOptions.d.ts

@@ -0,0 +1,5 @@
+import { ListboxOption } from '@bridge-ui/core/Domain';
+/**
+ * Walks composed `ListItem` vnodes and collects options from `value` / `primary`.
+ */
+export declare function collectComposedListboxOptions(nodes: unknown): ListboxOption[];

package/dist/Components/Listbox/collectComposedListboxOptions.js

@@ -0,0 +1,27 @@
+import { isArray as e, isFunction as t, isNil as n, isObjectLike as r } from "es-toolkit/compat";
+import { listboxOptionFromComposedItem as i } from "@bridge-ui/core/Domain";
+//#region src/Components/Listbox/collectComposedListboxOptions.ts
+function a(o) {
+	let s = [], c = e(o) ? o : n(o) ? [] : [o];
+	for (let n of c) {
+		if (!r(n)) continue;
+		let o = n, c = i({
+			value: o.props?.value,
+			primary: o.props?.primary,
+			disabled: o.props?.disabled,
+			secondary: o.props?.secondary
+		});
+		if (c && s.push(c), e(o.children)) {
+			s.push(...a(o.children));
+			continue;
+		}
+		let l = o.children;
+		if (r(l) && "default" in l) {
+			let e = l.default;
+			t(e) && s.push(...a(e()));
+		}
+	}
+	return s;
+}
+//#endregion
+export { a as collectComposedListboxOptions };

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -439,7 +439,6 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -457,6 +456,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -41,7 +41,6 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         }>>;
         controlId: import('vue').ComputedRef<string>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
         sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
@@ -52,6 +51,7 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
     };
     inputBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", {

package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -51,25 +51,25 @@ var y = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(c, { emit: u }) {
-		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, getItemBind: M, prevIconBind: N, nextIconBind: P, getEllipsisBind: F } = t(C, {
+		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, prevLabel: M, nextLabel: N, getItemBind: P, prevIconBind: F, nextIconBind: I, getEllipsisBind: L } = t(C, {
 			size: "md",
 			rounded: "md",
-			variant: "text",
+			color: "dark",
 			disabled: !1,
 			siblingCount: 1,
+			variant: "ghost",
 			mode: "numbered",
-			color: "primary",
 			boundaryCount: 1,
 			hideNextButton: !1,
 			hidePrevButton: !1
 		}, w, S);
 		return (t, c) => (p(), i("nav", f(l(_(O))), [a("ul", f(l(_(k))), [
-			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(N)), null, 16)])], 16)])) : r("", !0),
+			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(F)), null, 16), o(" " + g(_(M)), 1)])], 16)])) : r("", !0),
 			(p(!0), i(n, null, m(_(T), (e, r) => (p(), i(n, { key: `${e.type}-${r}` }, [e.type === "ellipsis" ? (p(), i("li", d({
 				key: 0,
 				ref_for: !0
-			}, _(F)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(M)(e.page)), g(e.page), 17)]))], 64))), 128)),
-			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [s(_(e), d({ icon: "chevronRight" }, _(P)), null, 16)])], 16)])) : r("", !0)
+			}, _(L)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(P)(e.page)), g(e.page), 17)]))], 64))), 128)),
+			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [o(g(_(N)) + " ", 1), s(_(e), d({ icon: "chevronRight" }, _(I)), null, 16)])], 16)])) : r("", !0)
 		], 16)], 16));
 	}
 });

package/dist/Components/Pagination/composables/usePagination.d.ts

@@ -24,17 +24,19 @@ export declare function usePagination(props: PaginationOwnProps, libDefaults: Pa
     prevBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onClick: () => void;
         type: "button";
-        "aria-label": string;
         disabled: boolean;
+        "aria-label": string;
         class: string;
     }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
     nextBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onClick: () => void;
-        "aria-label": string;
         type: "button";
         disabled: boolean;
+        "aria-label": string;
         class: string;
     }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    prevLabel: import('vue').ComputedRef<string>;
+    nextLabel: import('vue').ComputedRef<string>;
     getItemBind: (pageNumber: number) => import('@bridge-ui/core/Utils').MergePartBind<{
         type: "button";
         disabled: NonNullable<boolean | undefined>;