@threadlabs/looma 0.19.0 → 0.20.0

package/vue/chunks/UiEditorTableToolbar.js

@@ -1,10 +1,18 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, watchSyncEffect, withCtx } from "vue";
 //#region .build/vue/UiEditorTableToolbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["hidden"];
+var _hoisted_1 = [
+	"hidden",
+	"data-actions",
+	"data-cell-alignment",
+	"data-cell-background",
+	"data-header-column",
+	"data-header-row",
+	"data-open"
+];
 var _hoisted_2 = {
 	key: 0,
 	class: "group",
@@ -72,25 +80,138 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 	inheritAttrs: false,
 	__name: "UiEditorTableToolbar",
 	props: {
-		actions: {},
-		cellAlignment: { default: "left" },
-		cellBackground: { default: "" },
+		actions: {
+			type: null,
+			default: null
+		},
+		cellAlignment: {
+			type: null,
+			default: "left"
+		},
+		cellBackground: {
+			type: null,
+			default: ""
+		},
 		headerColumn: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		headerRow: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		open: {
-			type: Boolean,
+			type: null,
 			default: false
 		}
 	},
 	emits: ["action"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			actions: checkedProp(props["actions"], {
+				kind: "list",
+				item: {
+					kind: "constrained",
+					base: {
+						kind: "terminal",
+						name: "keyword"
+					},
+					values: [
+						"align-left",
+						"align-center",
+						"align-right",
+						"background-none",
+						"background-gray",
+						"background-yellow",
+						"background-blue",
+						"background-green",
+						"background-red",
+						"add-row-before",
+						"add-row-after",
+						"add-column-before",
+						"add-column-after",
+						"toggle-header-row",
+						"toggle-header-column",
+						"move-row-up",
+						"move-row-down",
+						"move-column-left",
+						"move-column-right",
+						"clear-cells",
+						"merge-cells",
+						"split-cell",
+						"delete-row",
+						"delete-column",
+						"delete-table"
+					]
+				}
+			}, false, "actions", void 0, void 0),
+			cellAlignment: checkedProp(props["cellAlignment"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "cellAlignment", void 0, [
+				"left",
+				"center",
+				"right"
+			]),
+			cellBackground: checkedProp(props["cellBackground"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "cellBackground", void 0, void 0),
+			headerColumn: checkedProp(props["headerColumn"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "headerColumn", void 0, void 0),
+			headerRow: checkedProp(props["headerRow"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "headerRow", void 0, void 0),
+			open: checkedProp(props["open"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "open", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const KeyedFailure = defineComponent({
+			props: { error: {
+				type: null,
+				required: true
+			} },
+			setup(props) {
+				return () => {
+					throw props.error;
+				};
+			}
+		});
+		const KeyedBoundary = defineComponent({ setup(_props, { slots }) {
+			let last = [];
+			return () => {
+				try {
+					last = slots.default?.() ?? [];
+					return last;
+				} catch (error) {
+					if (!(error instanceof Error) || error.diagnostic?.code !== "HR004") throw error;
+					if (typeof window === "undefined") throw error;
+					return [...last, h(KeyedFailure, { error })];
+				}
+			};
+		} });
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
 		const alignments = ref([]);
@@ -99,12 +220,24 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		const sections = ref([]);
 		const hasOverflow = ref(false);
 		const overflowOpen = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editor-table-toolbar> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-editor-table-toolbar> has an incompatible root."
+			})
+		});
 		const isActionDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "align-left" || detail["action"] === "align-center" || detail["action"] === "align-right" || detail["action"] === "background-none" || detail["action"] === "background-gray" || detail["action"] === "background-yellow" || detail["action"] === "background-blue" || detail["action"] === "background-green" || detail["action"] === "background-red" || detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after" || detail["action"] === "toggle-header-row" || detail["action"] === "toggle-header-column" || detail["action"] === "move-row-up" || detail["action"] === "move-row-down" || detail["action"] === "move-column-left" || detail["action"] === "move-column-right" || detail["action"] === "clear-cells" || detail["action"] === "merge-cells" || detail["action"] === "split-cell" || detail["action"] === "delete-row" || detail["action"] === "delete-column" || detail["action"] === "delete-table") && Object.keys(detail).every((key) => ["action"].includes(key));
 		const dispatch = createDispatch(root, emit, { checks: { action: isActionDetail } });
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js",
+				definition: "./components/ui-editor-table-toolbar/ui-editor-table-toolbar.html"
+			},
+			props: checkedProps,
 			state: {
 				alignments,
 				structure,
@@ -122,35 +255,70 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
 			return value === true ? "" : text(value);
 		}
+		function uniqueKeys(items, keyOf) {
+			const seen = /* @__PURE__ */ new Set();
+			for (let index = 0; index < items.length; index += 1) {
+				const key = keyOf(items[index], index, {
+					index,
+					first: index === 0,
+					last: index === items.length - 1,
+					count: items.length
+				});
+				if (seen.has(key)) {
+					const message = `A keyed list produced duplicate key \`${text(key)}\`.`;
+					throw Object.assign(/* @__PURE__ */ new Error(`HR004: ${message}`), {
+						name: "HtmlDiagnosticError",
+						diagnostic: Object.freeze({
+							code: "HR004",
+							message
+						})
+					});
+				}
+				seen.add(key);
+			}
+			return items;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-editor-table-toolbar",
 				role: "toolbar",
 				"aria-label": "Table actions"
-			}, _ctx.$attrs, {
-				hidden: !__props.open,
+			}, nativeAttrs(_ctx.$attrs), {
+				hidden: !checkedProps.value.open,
+				"data-actions": reflectedProp("actions", "actions", checkedProps.value.actions, void 0, false),
+				"data-cell-alignment": reflectedProp("cellAlignment", "cell-alignment", checkedProps.value.cellAlignment, void 0, false),
+				"data-cell-background": reflectedProp("cellBackground", "cell-background", checkedProps.value.cellBackground, void 0, false),
+				"data-header-column": reflectedProp("headerColumn", "header-column", checkedProps.value.headerColumn, void 0, false),
+				"data-header-row": reflectedProp("headerRow", "header-row", checkedProps.value.headerRow, void 0, false),
+				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
 				ref_key: "root",
 				ref: root
 			}), [
-				alignments.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(alignments.value, (item) => {
-					return openBlock(), createElementBlock("button", {
-						key: item.action,
-						type: "button",
-						class: normalizeClass(["icon-button", { active: item.active }]),
-						"data-action": item.action,
-						"aria-label": item.label,
-						title: item.label,
-						"aria-pressed": item.active
-					}, [createVNode(UiIcon_default, { name: item.action }, null, 8, ["name"])], 10, _hoisted_3);
-				}), 128))])) : createCommentVNode("v-if", true),
+				alignments.value.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(alignments.value, (item, index, loop) => item.action), (item) => {
+						return openBlock(), createElementBlock("button", {
+							key: item.action,
+							type: "button",
+							class: normalizeClass(["icon-button", { active: item.active }]),
+							"data-action": item.action,
+							"aria-label": item.label,
+							title: item.label,
+							"aria-pressed": item.active
+						}, [createVNode(UiIcon_default, { name: item.action }, null, 8, ["name"])], 10, _hoisted_3);
+					}), 128))]),
+					_: 1
+				})])) : createCommentVNode("v-if", true),
 				alignments.value.length && structure.value.length ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("v-if", true),
-				structure.value.length ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(structure.value, (item) => {
-					return openBlock(), createElementBlock("button", {
-						key: item.action,
-						type: "button",
-						"data-action": item.action
-					}, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(item.label), 1)], 8, _hoisted_6);
-				}), 128))])) : createCommentVNode("v-if", true),
+				structure.value.length ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(structure.value, (item, indexLoop, loop) => item.action), (item) => {
+						return openBlock(), createElementBlock("button", {
+							key: item.action,
+							type: "button",
+							"data-action": item.action
+						}, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(item.label), 1)], 8, _hoisted_6);
+					}), 128))]),
+					_: 1
+				})])) : createCommentVNode("v-if", true),
 				(alignments.value.length || structure.value.length) && hasOverflow.value ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("v-if", true),
 				hasOverflow.value ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("button", {
 					type: "button",
@@ -165,49 +333,58 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 				], 8, _hoisted_9), overflowOpen.value ? (openBlock(), createElementBlock("div", _hoisted_11, [swatches.value.length ? (openBlock(), createElementBlock("div", _hoisted_12, [_cache[1] || (_cache[1] = createElementVNode("div", {
 					class: "menu-heading",
 					role: "presentation"
-				}, "Background", -1)), createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(swatches.value, (swatch) => {
-					return openBlock(), createElementBlock("button", {
-						key: swatch.action,
-						type: "button",
-						class: normalizeClass(["swatch-button", { selected: swatch.selected }]),
-						role: "menuitemradio",
-						"aria-checked": swatch.selected,
-						"data-action": swatch.action
-					}, [createElementVNode("span", {
-						class: normalizeClass(["swatch", { default: !swatch.color }]),
-						style: normalizeStyle({ "--_swatch": swatch.color })
-					}, null, 6), createElementVNode("span", null, toDisplayString(swatch.label), 1)], 10, _hoisted_14);
-				}), 128))])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(sections.value, (section) => {
-					return openBlock(), createElementBlock("div", {
-						key: section.heading,
-						class: "menu-section divided",
-						role: "none"
-					}, [createElementVNode("div", _hoisted_15, toDisplayString(section.heading), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
+				}, "Background", -1)), createElementVNode("div", _hoisted_13, [createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(swatches.value, (swatch, indexLoop2, loop) => swatch.action), (swatch) => {
 						return openBlock(), createElementBlock("button", {
-							key: item.action,
+							key: swatch.action,
 							type: "button",
-							role: attribute({
-								true: "menuitemcheckbox",
-								false: "menuitem"
-							}[`${item.checkable}`]),
-							"aria-checked": typeof {
-								true: item.checked,
-								false: null
-							}[`${item.checkable}`] === "boolean" ? String({
-								true: item.checked,
-								false: null
-							}[`${item.checkable}`]) : attribute({
-								true: item.checked,
-								false: null
-							}[`${item.checkable}`]),
-							"data-action": item.action,
-							class: normalizeClass({ danger: item.danger })
-						}, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(item.label), 1)], 10, _hoisted_16);
-					}), 128))]);
-				}), 128))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
+							class: normalizeClass(["swatch-button", { selected: swatch.selected }]),
+							role: "menuitemradio",
+							"aria-checked": swatch.selected,
+							"data-action": swatch.action
+						}, [createElementVNode("span", {
+							class: normalizeClass(["swatch", { default: !swatch.color }]),
+							style: normalizeStyle({ "--_swatch": swatch.color })
+						}, null, 6), createElementVNode("span", null, toDisplayString(swatch.label), 1)], 10, _hoisted_14);
+					}), 128))]),
+					_: 1
+				})])])) : createCommentVNode("v-if", true), createVNode(unref(KeyedBoundary), null, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(sections.value, (section, indexLoop3, loop) => section.heading), (section) => {
+						return openBlock(), createElementBlock("div", {
+							key: section.heading,
+							class: "menu-section divided",
+							role: "none"
+						}, [createElementVNode("div", _hoisted_15, toDisplayString(section.heading), 1), createVNode(unref(KeyedBoundary), null, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(section.items, (item, indexLoop4, loop) => item.action), (item) => {
+								return openBlock(), createElementBlock("button", {
+									key: item.action,
+									type: "button",
+									role: attribute({
+										true: "menuitemcheckbox",
+										false: "menuitem"
+									}[`${item.checkable}`]),
+									"aria-checked": typeof {
+										true: item.checked,
+										false: null
+									}[`${item.checkable}`] === "boolean" ? String({
+										true: item.checked,
+										false: null
+									}[`${item.checkable}`]) : attribute({
+										true: item.checked,
+										false: null
+									}[`${item.checkable}`]),
+									"data-action": item.action,
+									class: normalizeClass({ danger: item.danger })
+								}, [createVNode(UiIcon_default, { name: item.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(item.label), 1)], 10, _hoisted_16);
+							}), 128))]),
+							_: 2
+						}, 1024)]);
+					}), 128))]),
+					_: 1
+				})])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3c04b848"]]);
+}), [["__scopeId", "data-v-b6030103"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiEditorToolbar.js

@@ -1,9 +1,9 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-editor-toolbar/ui-editor-toolbar.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiEditorToolbar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-editor-toolbar-state"];
+var _hoisted_1 = ["data-floating", "data-ui-editor-toolbar-state"];
 var _hoisted_2 = {
 	class: "strip",
 	ref: "strip"
@@ -14,20 +14,53 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	inheritAttrs: false,
 	__name: "UiEditorToolbar",
 	props: { floating: {
-		type: Boolean,
+		type: null,
 		default: false
 	} },
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({ floating: checkedProp(props["floating"], {
+			kind: "terminal",
+			name: "boolean"
+		}, false, "floating", void 0, void 0) }));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const stripElement = useTemplateRef("strip");
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editor-toolbar> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-editor-toolbar> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.floating && "floating"].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.floating && "floating"].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-toolbar/ui-editor-toolbar.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-editor-toolbar/ui-editor-toolbar.js",
+				definition: "./components/ui-editor-toolbar/ui-editor-toolbar.html"
+			},
+			props: checkedProps,
 			refs: { strip: stripElement }
 		});
 		return (_ctx, _cache) => {
@@ -35,13 +68,14 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				"data-component": "ui-editor-toolbar",
 				role: "toolbar",
 				"aria-label": "Editor toolbar"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-floating": reflectedProp("floating", "floating", checkedProps.value.floating, void 0, false),
 				"data-ui-editor-toolbar-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2600c9ad"]]);
+}), [["__scopeId", "data-v-3ddffb27"]]);
 //#endregion
 export { UiEditorToolbar_default as t };

package/vue/chunks/UiFloatingActionButton.js

@@ -1,9 +1,13 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiFloatingActionButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
 	"disabled",
+	"data-disabled",
+	"data-label",
+	"data-mobile-only",
 	"data-ui-floating-action-button-state"
 ];
 //#endregion
@@ -13,30 +17,74 @@ var UiFloatingActionButton_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 	__name: "UiFloatingActionButton",
 	props: {
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		label: { default: "" },
+		label: {
+			type: null,
+			default: ""
+		},
 		mobileOnly: {
-			type: Boolean,
+			type: null,
 			default: false
 		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			mobileOnly: checkedProp(props["mobileOnly"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "mobileOnly", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "button")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-floating-action-button> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-floating-action-button> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.mobileOnly && "mobileOnly"].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.mobileOnly && "mobileOnly"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
 				"data-component": "ui-floating-action-button",
 				type: "button"
-			}, _ctx.$attrs, {
-				"aria-label": __props.label,
-				disabled: __props.disabled,
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-label": checkedProps.value.label ?? void 0,
+				disabled: checkedProps.value.disabled ?? void 0,
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-mobile-only": reflectedProp("mobileOnly", "mobile-only", checkedProps.value.mobileOnly, void 0, false),
 				"data-ui-floating-action-button-state": hostState.value || void 0
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-610f67a7"]]);
+}), [["__scopeId", "data-v-640b32f4"]]);
 //#endregion
 export { UiFloatingActionButton_default as t };