ablok-components 0.3.133 → 0.3.136

package/dist/components/molecules/base-camera/base-camera.js

@@ -2,6 +2,6 @@ import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./base-camera.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                            */
 //#region src/components/molecules/base-camera/base-camera.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-3ebd93f1"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-67efb17e"]]);
 //#endregion
 export { n as default };

package/dist/components/molecules/base-camera/base-camera.vue.d.ts

@@ -119,6 +119,10 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         type: StringConstructor;
         default: string;
     };
+    screenFlashFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     enableShutterAnimation: {
         type: BooleanConstructor;
         default: boolean;
@@ -279,6 +283,10 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         type: StringConstructor;
         default: string;
     };
+    screenFlashFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     enableShutterAnimation: {
         type: BooleanConstructor;
         default: boolean;
@@ -309,6 +317,7 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     enableControls: boolean;
     enableScreenFlash: boolean;
     screenFlashColor: string;
+    screenFlashFullscreen: boolean;
     enableShutterAnimation: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/molecules/base-camera/base-camera.vue_vue_type_script_setup_true_lang.js

@@ -5,48 +5,48 @@ import { useCamera as i } from "../../../composables/useCamera.js";
 import a from "../camera-preview/camera-preview.js";
 import o from "../../atoms/zoom-slider/zoom-slider.js";
 import s from "../../../assets/img/guide.js";
-import { Transition as ee, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeStyle as te, onMounted as ne, onScopeDispose as re, openBlock as h, ref as g, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
+import { Teleport as ee, Transition as te, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, onScopeDispose as ne, openBlock as v, ref as y, toDisplayString as b, unref as x, watch as S, withCtx as C } from "vue";
 //#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&setup=true&lang.ts
-var x = {
+var re = {
 	class: "base-camera position-relative w-100 user-select-none",
 	"data-bs-theme": "dark"
-}, ie = ["src"], ae = { class: "position-absolute top-0 start-0 end-0 d-flex justify-content-between align-items-start p-2 gap-2" }, oe = { key: 1 }, se = ["disabled"], ce = {
+}, ie = ["src"], ae = { class: "position-absolute top-0 start-0 end-0 d-flex align-items-start p-2 gap-2 base-camera__top-bar" }, oe = { class: "base-camera__select-col" }, se = { key: 1 }, ce = { class: "d-flex align-items-center ms-auto gap-2" }, le = ["aria-label"], ue = ["disabled"], de = {
 	key: 1,
 	class: "position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center p-3 bg-black bg-opacity-50"
-}, le = {
+}, fe = {
 	key: 0,
 	class: "spinner-border text-light",
 	role: "status"
-}, ue = {
+}, pe = {
 	key: 1,
 	class: "alert alert-danger py-2 px-3 mb-0 small"
-}, S = { class: "mb-2" }, C = { class: "position-absolute bottom-0 start-0 end-0 p-3 d-flex flex-column gap-2 align-items-center" }, w = {
+}, me = { class: "mb-2" }, he = { class: "position-absolute bottom-0 start-0 end-0 p-3 d-flex flex-column gap-2 align-items-center" }, ge = {
 	key: 0,
 	class: "d-flex align-items-center justify-content-center gap-4 w-100"
-}, T = ["disabled", "aria-label"], E = {
+}, w = ["disabled", "aria-label"], _e = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	width: "22",
 	height: "22",
 	fill: "currentColor",
 	"aria-hidden": "true"
-}, de = {
+}, ve = {
 	key: 1,
 	viewBox: "0 0 24 24",
 	width: "22",
 	height: "22",
 	fill: "currentColor",
 	"aria-hidden": "true"
-}, fe = ["disabled"], pe = ["aria-label"], me = {
+}, ye = ["disabled"], be = {
 	key: 2,
 	class: "base-camera__countdown-overlay",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, he = ["data-countdown"], ge = {
+}, xe = ["data-countdown"], Se = {
 	key: 0,
 	class: "base-camera__zoom"
-}, D = /*@__PURE__*/ m({
+}, T = /*@__PURE__*/ m({
 	__name: "base-camera",
 	props: {
 		modelValue: { type: null },
@@ -168,6 +168,10 @@ var x = {
 			type: String,
 			default: "#FFFFFF"
 		},
+		screenFlashFullscreen: {
+			type: Boolean,
+			default: !1
+		},
 		enableShutterAnimation: {
 			type: Boolean,
 			default: !0
@@ -180,158 +184,189 @@ var x = {
 		"error",
 		"state"
 	],
-	setup(s, { expose: m, emit: D }) {
-		let O = s, k = D, A = g(null), j = c(() => A.value?.videoEl ?? null), M = c(() => O.resolutions[O.ratio] ?? {
+	setup(s, { expose: m, emit: T }) {
+		let E = s, D = T, O = y(null), k = c(() => O.value?.videoEl ?? null), A = c(() => E.resolutions[E.ratio] ?? {
 			width: 720,
 			height: 960
-		}), N = i({
-			preferredFacing: O.defaultRearCamera ? "environment" : "user",
-			resolution: M.value,
-			videoRef: j,
-			onWarning: (e) => k("error", e)
-		}), P = c(() => O.enableMirrorCamera && N.activeFacing.value !== "environment"), F = c(() => O.enableSelectDevice && N.devices.value.length > 1), I = c(() => O.enableSwitchCamera && N.canSwitch.value), L = c(() => O.enableZoomSlider && N.zoomCapability.value !== null), R = c(() => N.isLive.value || N.isPaused.value), z = g(!1), B = g(0), V = g(!1), H = g(0), U = g(!1), W = g(0), G = g(O.enableScreenFlash);
-		y(() => O.enableScreenFlash, (e) => {
-			G.value = e;
+		}), j = i({
+			preferredFacing: E.defaultRearCamera ? "environment" : "user",
+			resolution: A.value,
+			videoRef: k,
+			onWarning: (e) => D("error", e)
+		}), M = c(() => E.enableMirrorCamera && j.activeFacing.value !== "environment"), Ce = c(() => E.enableSelectDevice && j.devices.value.length > 1), we = c(() => E.enableSwitchCamera && j.canSwitch.value), Te = c(() => E.enableZoomSlider && j.zoomCapability.value !== null), N = c(() => j.isLive.value || j.isPaused.value), P = y(!1), F = y(0), I = y(!1), L = y(0), R = y(!1), z = y(0), B = y(E.enableScreenFlash);
+		S(() => E.enableScreenFlash, (e) => {
+			B.value = e;
 		});
-		let K = null, q = null, J = null, Y = null, X = null, Z = !1, Q = g(O.zoom);
-		y(() => O.zoom, (e) => {
-			Q.value = e;
-		}), y(Q, (e) => {
-			N.setZoom(e), e !== O.zoom && k("update:zoom", e);
-		}), y(N.zoom, (e) => {
-			N.zoomCapability.value && e !== Q.value && (Q.value = e);
-		}), y(N.zoomCapability, (e) => {
-			e && N.setZoom(Q.value);
-		}), y(N.state, (e) => k("state", e)), y(N.error, (e) => {
-			e && k("error", e);
-		}), y(M, (e) => void N.setResolution(e)), ne(() => {
-			O.autoStart && N.start();
-		}), re(() => {
-			Z = !0, q && clearTimeout(q), J && clearTimeout(J), Y && clearTimeout(Y), q = null, J = null, Y = null, X?.(!1), X = null, B.value = 0, V.value = !1, U.value = !1;
+		let V = null, H = null, U = null, W = null, G = null, K = null, q = null, J = null, Y = !1, X = y(E.zoom);
+		S(() => E.zoom, (e) => {
+			X.value = e;
+		}), S(X, (e) => {
+			j.setZoom(e), e !== E.zoom && D("update:zoom", e);
+		}), S(j.zoom, (e) => {
+			j.zoomCapability.value && e !== X.value && (X.value = e);
+		}), S(j.zoomCapability, (e) => {
+			e && j.setZoom(X.value);
+		}), S(j.state, (e) => D("state", e)), S(j.error, (e) => {
+			e && D("error", e);
+		}), S(A, (e) => void j.setResolution(e)), _(() => {
+			E.autoStart && j.start();
+		}), ne(() => {
+			Y = !0, H && clearTimeout(H), U && clearTimeout(U), G && clearTimeout(G), H = null, U = null, G = null, J?.(!1), J = null, Z(), Q(), F.value = 0, I.value = !1, R.value = !1;
 		});
-		function _e() {
-			O.enableShutterAnimation && (J && clearTimeout(J), H.value++, V.value = !0, J = setTimeout(() => {
-				J = null, V.value = !1;
-			}, 650));
+		function Z() {
+			U && clearTimeout(U), U = null, I.value = !1, W?.(), W = null;
 		}
-		function ve() {
-			return G.value ? (Y && clearTimeout(Y), W.value++, U.value = !0, new Promise((e) => {
-				Y = setTimeout(() => {
-					Y = null, U.value = !1, e();
-				}, 350);
-			})) : Promise.resolve();
+		function Ee() {
+			if (!E.enableShutterAnimation) return Promise.resolve();
+			Z(), L.value++, I.value = !0;
+			let e = new Promise((e) => {
+				W = e;
+			});
+			return U = setTimeout(Z, 650), e;
+		}
+		function Q() {
+			K && clearTimeout(K), K = null, q?.(), q = null;
 		}
-		async function ye() {
-			let e = j.value;
-			if (!e || !R.value || z.value) return null;
-			z.value = !0;
+		function De() {
+			if (!B.value) return {
+				peak: Promise.resolve(),
+				faded: Promise.resolve()
+			};
+			G && clearTimeout(G), Q(), z.value++, R.value = !0;
+			let e = new Promise((e) => {
+				q = e;
+			});
+			return G = setTimeout(() => {
+				G = null, R.value = !1, K = setTimeout(Q, 400);
+			}, 350), {
+				peak: new Promise((e) => setTimeout(e, 120)),
+				faded: e
+			};
+		}
+		async function Oe() {
+			let e = k.value;
+			if (!e || !N.value || P.value) return null;
+			P.value = !0;
 			try {
-				let t = n(e, {
-					width: M.value.width,
-					height: M.value.height,
-					mirror: P.value,
-					filter: O.filter,
-					tintColor: O.tintColor,
-					tintIntensity: O.tintIntensity
-				});
-				G.value && await ve(), _e();
-				let i = await r(t, { asBlob: O.emitBlob });
-				return k("update:modelValue", i), k("capture", i, t), i;
+				let t = De();
+				if (await t.peak, Y || !N.value) return null;
+				let i = n(e, {
+					width: A.value.width,
+					height: A.value.height,
+					mirror: M.value,
+					filter: E.filter,
+					tintColor: E.tintColor,
+					tintIntensity: E.tintIntensity
+				}), a = Ee(), o = await r(i, { asBlob: E.emitBlob });
+				return await Promise.all([t.faded, a]), Y ? null : (D("update:modelValue", o), D("capture", o, i), o);
 			} finally {
-				z.value = !1;
+				P.value = !1;
 			}
 		}
-		function be() {
+		function ke() {
 			return new Promise((e) => {
-				X = e, q = setTimeout(() => {
-					q = null, X = null, e(!0);
+				J = e, H = setTimeout(() => {
+					H = null, J = null, e(!0);
 				}, 1e3);
 			});
 		}
-		async function xe() {
-			let e = Number.isFinite(O.countdown) ? Math.max(0, Math.floor(O.countdown)) : 0;
-			for (let t = e; t > 0; t--) if (B.value = t, !await be()) return null;
-			return B.value = 0, Z ? null : ye();
+		async function Ae() {
+			let e = Number.isFinite(E.countdown) ? Math.max(0, Math.floor(E.countdown)) : 0;
+			for (let t = e; t > 0; t--) if (F.value = t, !await ke()) return null;
+			return F.value = 0, Y ? null : Oe();
 		}
 		function $() {
-			return K || (!j.value || !R.value ? Promise.resolve(null) : (K = xe().finally(() => {
-				B.value = 0, K = null;
-			}), K));
+			return V || (!k.value || !N.value ? Promise.resolve(null) : (V = Ae().finally(() => {
+				F.value = 0, V = null;
+			}), V));
 		}
-		function Se(e) {
+		function je(e) {
 			let t = e.target.value;
-			t && N.selectDevice(t);
+			t && j.selectDevice(t);
 		}
-		function Ce(e, t) {
+		function Me(e, t) {
 			if (e.label) return e.label;
 			let n = e.facing === "user" ? "Front" : e.facing === "environment" ? "Back" : "";
 			return n ? `${n} camera` : `Camera ${t + 1}`;
 		}
 		return m({
 			onCapture: $,
-			camera: N,
-			zoom: Q
-		}), (n, r) => (h(), d("div", x, [p(a, {
+			camera: j,
+			zoom: X
+		}), (n, r) => (v(), d("div", re, [p(a, {
 			ref_key: "previewRef",
-			ref: A,
+			ref: O,
 			ratio: s.ratio,
 			resolutions: s.resolutions,
-			mirror: P.value,
+			mirror: M.value,
 			filter: s.filter,
 			"tint-color": s.tintColor,
 			"tint-intensity": s.tintIntensity
 		}, {
-			default: b(() => [
-				s.enableGuide && s.guideSrc ? (h(), d("img", {
+			default: C(() => [
+				s.enableGuide && s.guideSrc ? (v(), d("img", {
 					key: 0,
 					src: s.guideSrc,
 					class: "position-absolute top-0 start-0 w-100 h-100 base-camera__guide",
 					alt: "",
 					"aria-hidden": "true"
 				}, null, 8, ie)) : u("", !0),
-				f("div", ae, [F.value && v(N).activeDeviceId ? (h(), l(t, {
+				f("div", ae, [f("div", oe, [Ce.value && x(j).activeDeviceId ? (v(), l(t, {
 					key: 0,
 					class: "base-camera__select",
-					modelValue: v(N).activeDeviceId.value,
-					"onUpdate:modelValue": r[0] ||= (e) => v(N).activeDeviceId.value = e,
-					disabled: v(N).isStarting.value,
+					modelValue: x(j).activeDeviceId.value,
+					"onUpdate:modelValue": r[0] ||= (e) => x(j).activeDeviceId.value = e,
+					disabled: x(j).isStarting.value,
 					"aria-label": "Select camera",
-					onChange: Se,
-					options: v(N).devices.value.map((e, t) => ({
+					onChange: je,
+					options: x(j).devices.value.map((e, t) => ({
 						value: e.deviceId,
-						text: Ce(e, t)
-					}))
+						text: Me(e, t)
+					})),
+					variant: "dark"
 				}, null, 8, [
 					"modelValue",
 					"disabled",
 					"options"
-				])) : (h(), d("span", oe)), I.value ? (h(), d("button", {
-					key: 2,
+				])) : (v(), d("span", se))]), f("div", ce, [s.enableScreenFlash ? (v(), d("button", {
+					key: 0,
+					type: "button",
+					class: "btn btn-dark bg-opacity-50 base-camera__icon-btn",
+					"aria-label": B.value ? "Flash On" : "Flash Off",
+					onClick: r[1] ||= (e) => B.value = !B.value
+				}, [B.value ? (v(), l(e, {
+					key: 0,
+					symbol: "zap"
+				})) : (v(), l(e, {
+					key: 1,
+					symbol: "zap-off"
+				}))], 8, le)) : u("", !0), we.value ? (v(), d("button", {
+					key: 1,
 					type: "button",
-					class: "btn d-grid place-content-center px-2",
-					disabled: v(N).isStarting.value,
+					class: "btn btn-dark bg-opacity-50 base-camera__icon-btn",
+					disabled: x(j).isStarting.value,
 					"aria-label": "Switch camera",
-					onClick: r[1] ||= (e) => v(N).switchCamera()
-				}, [p(e, { symbol: "switch-camera" })], 8, se)) : u("", !0)]),
-				v(N).isStarting.value || v(N).state.value === "error" || v(N).state.value === "idle" && !s.autoStart ? (h(), d("div", ce, [v(N).isStarting.value ? (h(), d("div", le, [...r[8] ||= [f("span", { class: "visually-hidden" }, "Starting camera…", -1)]])) : v(N).state.value === "error" ? (h(), d("div", ue, [f("div", S, _(v(N).error.value?.message ?? "Camera error"), 1), v(N).error.value?.code !== "not-allowed" && v(N).error.value?.code !== "unsupported" ? (h(), d("button", {
+					onClick: r[2] ||= (e) => x(j).switchCamera()
+				}, [p(e, { symbol: "switch-camera" })], 8, ue)) : u("", !0)])]),
+				x(j).isStarting.value || x(j).state.value === "error" || x(j).state.value === "idle" && !s.autoStart ? (v(), d("div", de, [x(j).isStarting.value ? (v(), d("div", fe, [...r[9] ||= [f("span", { class: "visually-hidden" }, "Starting camera…", -1)]])) : x(j).state.value === "error" ? (v(), d("div", pe, [f("div", me, b(x(j).error.value?.message ?? "Camera error"), 1), x(j).error.value?.code !== "not-allowed" && x(j).error.value?.code !== "unsupported" ? (v(), d("button", {
 					key: 0,
 					type: "button",
 					class: "btn btn-sm btn-outline-light",
-					onClick: r[2] ||= (e) => v(N).start()
-				}, " Retry ")) : u("", !0)])) : (h(), d("button", {
+					onClick: r[3] ||= (e) => x(j).start()
+				}, " Retry ")) : u("", !0)])) : (v(), d("button", {
 					key: 2,
 					type: "button",
 					class: "btn btn-light",
-					onClick: r[3] ||= (e) => v(N).start()
+					onClick: r[4] ||= (e) => x(j).start()
 				}, "Start camera"))])) : u("", !0),
-				f("div", C, [s.enableControls ? (h(), d("div", w, [
+				f("div", he, [s.enableControls ? (v(), d("div", ge, [
 					f("button", {
 						type: "button",
 						class: "btn btn-dark bg-opacity-50 rounded-circle base-camera__icon-btn",
-						disabled: v(N).isStarting.value,
-						"aria-label": v(N).isLive.value ? "Pause" : "Start",
-						onClick: r[4] ||= (e) => v(N).toggle()
-					}, [v(N).isLive.value ? (h(), d("svg", E, [...r[9] ||= [f("rect", {
+						disabled: x(j).isStarting.value,
+						"aria-label": x(j).isLive.value ? "Pause" : "Start",
+						onClick: r[5] ||= (e) => x(j).toggle()
+					}, [x(j).isLive.value ? (v(), d("svg", _e, [...r[10] ||= [f("rect", {
 						x: "6",
 						y: "5",
 						width: "4",
@@ -343,46 +378,46 @@ var x = {
 						width: "4",
 						height: "14",
 						rx: "1"
-					}, null, -1)]])) : (h(), d("svg", de, [...r[10] ||= [f("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, T),
+					}, null, -1)]])) : (v(), d("svg", ve, [...r[11] ||= [f("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, w),
 					f("button", {
 						type: "button",
 						class: "btn btn-light rounded-circle base-camera__shutter",
-						disabled: !R.value || z.value || B.value > 0,
+						disabled: !N.value || P.value || F.value > 0,
 						"aria-label": "Capture photo",
-						onClick: r[5] ||= (e) => $()
-					}, [...r[11] ||= [f("span", { class: "base-camera__shutter-inner" }, null, -1)]], 8, fe),
+						onClick: r[6] ||= (e) => $()
+					}, [...r[12] ||= [f("span", { class: "base-camera__shutter-inner" }, null, -1)]], 8, ye),
 					f("button", {
 						type: "button",
 						class: "btn btn-dark bg-opacity-50 rounded-circle base-camera__icon-btn",
-						"aria-label": G.value ? "Flash On" : "Flash Off",
-						onClick: r[6] ||= (e) => G.value = !G.value
-					}, [G.value ? (h(), l(e, {
-						key: 0,
-						symbol: "zap"
-					})) : (h(), l(e, {
-						key: 1,
-						symbol: "zap-off"
-					}))], 8, pe)
+						"aria-label": "Stop camera",
+						onClick: r[7] ||= (e) => x(j).stop()
+					}, [p(e, { symbol: "x" })])
 				])) : u("", !0)]),
-				B.value ? (h(), d("div", me, [(h(), d("p", {
-					key: B.value,
+				F.value ? (v(), d("div", be, [(v(), d("p", {
+					key: F.value,
 					class: "base-camera__countdown",
-					"data-countdown": B.value
-				}, _(B.value), 9, he))])) : u("", !0),
-				V.value ? (h(), d("div", {
-					key: H.value,
+					"data-countdown": F.value
+				}, b(F.value), 9, xe))])) : u("", !0),
+				I.value ? (v(), d("div", {
+					key: L.value,
 					class: "base-camera__shutter-effect",
 					"aria-hidden": "true"
-				}, [...r[12] ||= [f("span", { class: "base-camera__shutter-aperture" }, null, -1)]])) : u("", !0),
-				p(ee, { name: "base-camera-flash" }, {
-					default: b(() => [U.value ? (h(), d("div", {
-						key: W.value,
-						class: "base-camera__screen-flash",
-						style: te({ background: s.screenFlashColor }),
+				}, [...r[13] ||= [f("span", { class: "base-camera__shutter-aperture" }, null, -1)]])) : u("", !0),
+				(v(), l(ee, {
+					to: "body",
+					disabled: !s.screenFlashFullscreen
+				}, [p(te, {
+					name: "base-camera-flash",
+					onAfterLeave: Q
+				}, {
+					default: C(() => [R.value ? (v(), d("div", {
+						key: z.value,
+						class: h(["base-camera__screen-flash", { "base-camera__screen-flash--fullscreen": s.screenFlashFullscreen }]),
+						style: g({ background: s.screenFlashColor }),
 						"aria-hidden": "true"
-					}, null, 4)) : u("", !0)]),
+					}, null, 6)) : u("", !0)]),
 					_: 1
-				})
+				})], 8, ["disabled"]))
 			]),
 			_: 1
 		}, 8, [
@@ -392,12 +427,12 @@ var x = {
 			"filter",
 			"tint-color",
 			"tint-intensity"
-		]), L.value ? (h(), d("div", ge, [p(o, {
-			modelValue: Q.value,
-			"onUpdate:modelValue": r[7] ||= (e) => Q.value = e,
-			min: v(N).zoomCapability.value.min,
-			max: v(N).zoomCapability.value.max,
-			step: v(N).zoomCapability.value.step
+		]), Te.value ? (v(), d("div", Se, [p(o, {
+			modelValue: X.value,
+			"onUpdate:modelValue": r[8] ||= (e) => X.value = e,
+			min: x(j).zoomCapability.value.min,
+			max: x(j).zoomCapability.value.max,
+			step: x(j).zoomCapability.value.step
 		}, null, 8, [
 			"modelValue",
 			"min",
@@ -407,4 +442,4 @@ var x = {
 	}
 });
 //#endregion
-export { D as default };
+export { T as default };

package/dist/components/molecules/input-dropdown/input-dropdown.vue_vue_type_script_setup_true_lang.js

@@ -116,7 +116,7 @@ var b = ["id"], x = ["for", "innerHTML"], S = { class: "dropdown" }, C = { class
 			role: "button",
 			type: "button",
 			title: L.value,
-			class: "btn dropdown-toggle",
+			class: u(["btn dropdown-toggle", { [`btn-${e.variant}`]: e.variant }]),
 			color: e.color,
 			outlined: e.outlined,
 			disabled: e.disabled
@@ -133,6 +133,7 @@ var b = ["id"], x = ["for", "innerHTML"], S = { class: "dropdown" }, C = { class
 		}, 8, [
 			"id",
 			"title",
+			"class",
 			"color",
 			"outlined",
 			"disabled"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.133",
+  "version": "0.3.136",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",