@threadlabs/looma 0.14.8 → 0.15.0

package/vue/UiTooltip.vue

@@ -12,7 +12,19 @@ const props = withDefaults(
     hideDelay?: number
     inverse?: boolean
     open?: boolean
-    placement?: string
+    placement?:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end'
     showDelay?: number
     trigger?: 'hover' | 'click' | 'focus'
   }>(),
@@ -21,7 +33,7 @@ const props = withDefaults(
     hideDelay: 100,
     inverse: false,
     open: false,
-    placement: 'top-start',
+    placement: 'top',
     showDelay: 500,
     trigger: 'hover',
   },
@@ -52,8 +64,6 @@ const internalOpen = ref(false)
 const hostState = computed(() =>
   [
     props.inverse && 'inverse',
-    props.placement && 'placement',
-    `placement=${encodeURIComponent(props.placement)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -117,6 +127,10 @@ useComponentHost(controllerModule.default, {
   syntax: "*";
   inherits: false;
 }
+@property --ui-tooltip-offset {
+  syntax: "*";
+  inherits: false;
+}
 @property --ui-tooltip-radius {
   syntax: "*";
   inherits: false;
@@ -168,19 +182,22 @@ useComponentHost(controllerModule.default, {
 }
 
 .surface {
-  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-border-default));
+  --_tooltip-line: var(--_ui-tooltip-border, var(--ui-overlay-border, var(--ui-border-default)));
   position: relative;
   box-sizing: border-box;
   max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
   border: 1px solid var(--_tooltip-line);
-  border-radius: var(--_ui-tooltip-radius, var(--ui-radius-sm));
-  background: var(--_ui-tooltip-surface, var(--ui-surface-elevated));
+  border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-sm)));
+  background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   color: var(--_ui-tooltip-text, var(--ui-text-primary));
   padding: var(--ui-space-1) var(--ui-space-2);
   font-family: var(--ui-font-family-sans);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-tight);
-  box-shadow: var(--_ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+  box-shadow: var(
+    --_ui-tooltip-shadow,
+    var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
+  );
 }
 
 [data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface {
@@ -208,8 +225,7 @@ useComponentHost(controllerModule.default, {
   transform: rotate(45deg);
 }
 
-:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface::after {
+[data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface::after {
   inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
   inset-block-end: auto;
   border-inline-end-width: 0;
@@ -220,12 +236,51 @@ useComponentHost(controllerModule.default, {
   border-start-start-radius: 1px;
 }
 
-:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
-  .surface::after {
+[data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface::after {
+  inset-inline-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-align="end"] .surface::after {
   inset-inline-start: auto;
   inset-inline-end: var(--ui-space-3);
 }
 
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
+  inset-block-start: calc(50% - var(--_ui-tooltip-arrow-size, 0.5rem) / 2);
+  inset-block-end: auto;
+  border: 0 solid var(--_tooltip-line);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after {
+  inset-inline-start: auto;
+  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  border-inline-end-width: 1px;
+  border-block-end-width: 1px;
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
+  inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+  inset-inline-end: auto;
+  border-inline-start-width: 1px;
+  border-block-start-width: 1px;
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]
+  .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="start"]
+  .surface::after {
+  inset-block-start: var(--ui-space-3);
+}
+
+[data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="end"]
+  .surface::after,
+[data-component~="ui-tooltip"][data-ui-actual-placement="right"][data-ui-actual-align="end"]
+  .surface::after {
+  inset-block-start: auto;
+  inset-block-end: var(--ui-space-3);
+}
+
 [data-component~="ui-tooltip"]:popover-open {
   opacity: 1;
   transform: translateY(0);

package/vue/UiTree.d.ts

@@ -4,12 +4,17 @@ type __VLS_Props = {
     label?: string;
     marquee?: boolean;
     maxDepth?: number;
+    selection?: 'none' | 'single' | 'multiple';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (detail: {
+        readonly ids: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any;
     "update:maxDepth": (value: number) => any;
     reorder: (detail: {
         readonly sourceId: string;
@@ -31,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((detail: {
+        readonly ids: readonly (string)[];
+        readonly trigger: "keyboard" | "pointer" | "programmatic";
+    }) => any) | undefined;
     "onUpdate:maxDepth"?: ((value: number) => any) | undefined;
     onReorder?: ((detail: {
         readonly sourceId: string;
@@ -54,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     label: string;
     marquee: boolean;
+    selection: "none" | "single" | "multiple";
     density: "comfortable" | "compact";
     hoverExpandDelay: number;
     maxDepth: number;

package/vue/UiTree.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     label?: string
     marquee?: boolean
     maxDepth?: number
+    selection?: 'none' | 'single' | 'multiple'
   }>(),
   {
     density: 'comfortable',
@@ -20,6 +21,7 @@ const props = withDefaults(
     label: 'Tree',
     marquee: false,
     maxDepth: 0,
+    selection: 'none',
   },
 )
 const emit = defineEmits<{
@@ -47,6 +49,12 @@ const emit = defineEmits<{
       readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
     },
   ]
+  select: [
+    detail: {
+      readonly ids: readonly (string)[]
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
 }>()
 
 const root = ref<HTMLElement | null>(null)
@@ -102,10 +110,21 @@ const isReorderRejectedDetail = (detail: unknown): boolean =>
     ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', 'trigger']
       .includes(key)
   )
+const isSelectDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && (Array.isArray((detail as Record<string, unknown>)['ids'])
+    && ((detail as Record<string, unknown>)['ids'] as unknown[]).every((item: unknown) =>
+      typeof item === 'string'
+    ))
+  && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+    || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+    || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+  && Object.keys(detail as object).every((key) => ['ids', 'trigger'].includes(key))
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
     reorder: isReorderDetail,
     'reorder-rejected': isReorderRejectedDetail,
+    select: isSelectDetail,
   },
   modeled: ['maxDepth'],
 })
@@ -171,6 +190,14 @@ useComponentHost(controllerModule.default, {
   padding-inline-start: var(--ui-tree-gutter, 0px);
 }
 
+[data-component~="ui-tree"][data-move-mode]::after {
+  content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
+  display: block;
+  padding: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-tree"][hidden] {
   display: none;

package/vue/UiTreeItem.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     expanded?: boolean;
     itemId?: string;
     label?: string;
+    lazy?: boolean;
     marquee?: boolean;
     selected?: boolean;
     sortable?: boolean;
@@ -48,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     dragType: string;
     dropScope: string;
     itemId: string;
+    lazy: boolean;
     sortable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiTreeItem.vue

@@ -17,6 +17,7 @@ const props = withDefaults(
     expanded?: boolean
     itemId?: string
     label?: string
+    lazy?: boolean
     marquee?: boolean
     selected?: boolean
     sortable?: boolean
@@ -31,6 +32,7 @@ const props = withDefaults(
     expanded: false,
     itemId: '',
     label: '',
+    lazy: false,
     marquee: false,
     selected: false,
     sortable: false,
@@ -158,6 +160,14 @@ useComponentHost(controllerModule.default, {
       >
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
+      <label class="selection-hit"><input
+          class="selection-checkbox"
+          type="checkbox"
+          tabindex="-1"
+          :checked="selected"
+          :disabled="disabled"
+          :aria-label="`Select ${label}`"
+        ></label>
       <span class="leading" ref="leading"><slot name="leading" /></span>
       <span class="label" ref="label"><span class="label-text" ref="labelText"><slot name="label">{{
             label
@@ -289,6 +299,35 @@ useComponentHost(controllerModule.default, {
   display: none;
 }
 
+.selection-hit {
+  display: none;
+  grid-column: 2;
+  grid-row: 1;
+  place-items: center;
+  inline-size: 1.25rem;
+  block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+  cursor: pointer;
+}
+.selection-checkbox {
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin: 0;
+  accent-color: var(--ui-accent-solid);
+}
+
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
+  grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+}
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .selection-hit {
+  display: grid;
+}
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .leading {
+  grid-column: 3;
+}
+[data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .label {
+  grid-column: 4;
+}
+
 .disclosure:hover {
   color: var(--ui-text-primary);
   background: var(--ui-surface-elevated);
@@ -564,7 +603,7 @@ useComponentHost(controllerModule.default, {
   inset-inline: 1px;
   display: none;
   block-size: 2px;
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
 }
@@ -577,7 +616,7 @@ useComponentHost(controllerModule.default, {
   inline-size: 7px;
   block-size: 7px;
   border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
-  border-radius: 999px;
+  border-radius: var(--ui-radius-round);
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
 }
@@ -607,8 +646,61 @@ html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] {
   --_tree-row-min-height: 44px;
 }
 
-html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle {
-  display: none;
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
+  grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+}
+
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle,
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-tree-item"][data-ui-tree-item-state~="isContainer"]
+  > .row
+  > .drag-handle {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+  inset: auto;
+  inline-size: 44px;
+  block-size: 44px;
+  padding: 14px;
+  opacity: 1;
+  transform: none;
+  cursor: pointer;
+}
+
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .disclosure {
+  grid-column: 2;
+}
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .leading {
+  grid-column: 3;
+}
+html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .label {
+  grid-column: 4;
+}
+
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+  > .row {
+  grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+}
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+  > .row
+  > .selection-hit {
+  grid-column: 3;
+  inline-size: 44px;
+  block-size: 44px;
+}
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+  > .row
+  > .leading {
+  grid-column: 4;
+}
+html[data-ui-input-modality="touch"]
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+  > .row
+  > .label {
+  grid-column: 5;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/vue/chunks/UiAvatar.js

@@ -1,11 +1,14 @@
 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, toDisplayString, useTemplateRef } from "vue";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar/ui-avatar.js";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-avatar-state"];
 var _hoisted_2 = ["src", "hidden"];
 var _hoisted_3 = ["aria-hidden", "hidden"];
+var _hoisted_4 = ["hidden"];
+var _hoisted_5 = ["hidden"];
 //#endregion
 //#region .build/vue/UiAvatar.vue
 var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -17,8 +20,13 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			default: false
 		},
 		alt: { default: "" },
+		decorative: {
+			type: Boolean,
+			default: false
+		},
 		fallback: { default: "" },
 		name: { default: "" },
+		shape: { default: "circle" },
 		size: { default: "md" },
 		src: {}
 	},
@@ -29,8 +37,13 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hasImage = ref(false);
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
+		const showGlyph = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.size && `size size=${props.size}`, props.active && "active"].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.size && `size size=${props.size}`,
+			props.shape && `shape shape=${props.shape}`,
+			props.active && "active"
+		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -40,7 +53,8 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			state: {
 				hasImage,
 				hasAuthoredImage,
-				initials
+				initials,
+				showGlyph
 			}
 		});
 		return (_ctx, _cache) => {
@@ -62,10 +76,10 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					class: "fallback",
 					"aria-hidden": hasImage.value,
 					hidden: hasImage.value
-				}, toDisplayString(initials.value), 9, _hoisted_3)
+				}, [createElementVNode("span", { hidden: showGlyph.value }, toDisplayString(initials.value), 9, _hoisted_4), createElementVNode("span", { hidden: !showGlyph.value }, [createVNode(UiIcon_default, { name: "user-round" })], 8, _hoisted_5)], 8, _hoisted_3)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-43a3ae30"]]);
+}), [["__scopeId", "data-v-f9a69ac3"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -13,13 +13,16 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	props: {
 		label: { default: "People" },
 		max: { default: 5 },
-		size: { default: "md" }
+		overflowLabel: { default: "{count} more" },
+		size: { default: "md" },
+		total: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const root = ref(null);
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
+		const overflowAnnouncement = ref("");
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
@@ -28,7 +31,10 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			dispatch,
 			props,
 			refs: { overflow: overflowElement },
-			state: { overflowCount }
+			state: {
+				overflowCount,
+				overflowAnnouncement
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
@@ -43,11 +49,11 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				class: "overflow",
 				role: "img",
 				hidden: !overflowCount.value,
-				"aria-label": `${overflowCount.value} more`,
+				"aria-label": overflowAnnouncement.value,
 				ref: "overflow"
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ff71c721"]]);
+}), [["__scopeId", "data-v-c8469808"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4c8e66a3"]]);
+}), [["__scopeId", "data-v-8ef5da57"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -1,16 +1,23 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { t as UiSpinner_default } from "./UiSpinner.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-button/ui-button.js";
 //#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"href",
 	"target",
 	"rel",
 	"aria-disabled",
+	"aria-busy",
+	"tabindex",
 	"data-ui-button-state"
 ];
 var _hoisted_2 = [
 	"type",
 	"disabled",
+	"aria-disabled",
+	"aria-busy",
 	"data-ui-button-state"
 ];
 //#endregion
@@ -26,6 +33,10 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			default: false
 		},
 		href: {},
+		pending: {
+			type: Boolean,
+			default: false
+		},
 		rel: {},
 		size: { default: "md" },
 		stretch: {
@@ -39,14 +50,22 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	},
 	setup(__props) {
 		const props = __props;
+		const root = ref(null);
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
 			props.align && `align align=${props.align}`,
 			props.stretch && "stretch",
 			props.size && `size size=${props.size}`,
 			props.variant && `variant variant=${props.variant}`,
-			props.tone && `tone tone=${props.tone}`
+			props.tone && `tone tone=${props.tone}`,
+			props.pending && "pending"
 		].filter(Boolean).join(" "));
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
+		});
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
 			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
@@ -63,30 +82,58 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				href: attribute({
 					true: null,
 					false: __props.href
-				}[`${__props.disabled}`]),
+				}[`${__props.disabled || __props.pending}`]),
 				target: __props.target,
 				rel: __props.rel,
 				"aria-disabled": typeof {
 					true: "true",
 					false: null
-				}[`${Boolean(__props.disabled && __props.href)}`] === "boolean" ? String({
+				}[`${__props.disabled || __props.pending}`] === "boolean" ? String({
 					true: "true",
 					false: null
-				}[`${Boolean(__props.disabled && __props.href)}`]) : attribute({
+				}[`${__props.disabled || __props.pending}`]) : attribute({
 					true: "true",
 					false: null
-				}[`${Boolean(__props.disabled && __props.href)}`]),
-				"data-ui-button-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
+				}[`${__props.disabled || __props.pending}`]),
+				"aria-busy": __props.pending,
+				tabindex: attribute({
+					true: "0",
+					false: null
+				}[`${__props.pending && !__props.disabled}`]),
+				"data-ui-button-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [__props.pending ? (openBlock(), createBlock(UiSpinner_default, {
+				key: 0,
+				size: "sm",
+				class: "pending-spinner"
+			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
 				key: 1,
 				"data-component": "ui-button"
 			}, _ctx.$attrs, {
 				type: __props.type,
 				disabled: __props.disabled,
-				"data-ui-button-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
+				"aria-disabled": typeof {
+					true: "true",
+					false: null
+				}[`${__props.pending}`] === "boolean" ? String({
+					true: "true",
+					false: null
+				}[`${__props.pending}`]) : attribute({
+					true: "true",
+					false: null
+				}[`${__props.pending}`]),
+				"aria-busy": __props.pending,
+				"data-ui-button-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [__props.pending ? (openBlock(), createBlock(UiSpinner_default, {
+				key: 0,
+				size: "sm",
+				class: "pending-spinner"
+			})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
 		};
 	}
-}), [["__scopeId", "data-v-bd32a08d"]]);
+}), [["__scopeId", "data-v-3f3120c8"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -76,7 +76,7 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "M12 16v-4" }, null, -1),
 					createElementVNode("path", { d: "M12 8h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				__props.tone === "note" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
+				__props.tone === "neutral" || __props.tone === "note" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
 					createElementVNode("path", { d: "M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z" }, null, -1),
 					createElementVNode("path", { d: "M13 2v7h7" }, null, -1),
 					createElementVNode("path", { d: "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" }, null, -1)
@@ -103,6 +103,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-faa2395f"]]);
+}), [["__scopeId", "data-v-99de7df0"]]);
 //#endregion
 export { UiCallout_default as t };