@threadlabs/looma 0.7.3 → 0.8.0

package/vue/UiButton.vue

@@ -6,19 +6,26 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    as?: 'button' | 'a'
     align?: 'center' | 'start'
     disabled?: boolean
+    href?: string
+    rel?: string
     size?: 'sm' | 'md' | 'lg'
     stretch?: boolean
+    target?: string
     tone?: 'accent' | 'neutral' | 'danger' | 'success' | 'warning' | 'info'
+    type?: 'button' | 'submit' | 'reset'
     variant?: 'outline' | 'solid' | 'danger' | 'ghost' | 'link'
   }>(),
   {
+    as: 'button',
     align: 'center',
     disabled: false,
     size: 'md',
     stretch: false,
     tone: 'accent',
+    type: 'button',
     variant: 'outline',
   },
 )
@@ -33,18 +40,38 @@ const hostState = computed(() =>
     props.tone && `tone tone=${props.tone}`,
   ].filter(Boolean).join(' ')
 )
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
 </script>
 
 <template>
-  <button
+  <component
+    :is="as"
     data-component="ui-button"
-    type="button"
     v-bind="$attrs"
-    :disabled="disabled"
+    :type="attribute(({ true: type, false: null })[`${!href}`])"
+    :disabled="attribute(({ true: true, false: null })[`${disabled && !href}`])"
+    :href="attribute(({ true: null, false: href })[`${disabled}`])"
+    :target="target"
+    :rel="rel"
+    :aria-disabled="typeof (({ true: 'true', false: null })[`${Boolean(disabled && href)}`]) === 'boolean'
+    ? String(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])
+    : attribute(({ true: 'true', false: null })[`${Boolean(disabled && href)}`])"
     :data-ui-button-state="hostState || undefined"
   >
     <slot />
-  </button>
+  </component>
 </template>
 
 <style scoped>
@@ -89,6 +116,7 @@ const hostState = computed(() =>
   color: var(--ui-button-text, var(--_tone-text));
   font: inherit;
   font-weight: var(--ui-font-medium);
+  text-decoration: none;
   line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   background-image: var(--ui-raised-highlight);
@@ -112,22 +140,24 @@ const hostState = computed(() =>
 [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
   min-block-size: var(--ui-control-size-sm);
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 [data-component~="ui-button"][data-ui-button-state~="size=lg"] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
-  font-size: 1rem;
+  font-size: var(--ui-font-size-md);
 }
 
-[data-component~="ui-button"]:hover:enabled {
+/* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
+   is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
+[data-component~="ui-button"]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"]:active:enabled {
+[data-component~="ui-button"]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
@@ -141,12 +171,12 @@ const hostState = computed(() =>
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
 
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:enabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -204,12 +234,12 @@ const hostState = computed(() =>
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
@@ -233,7 +263,7 @@ const hostState = computed(() =>
    disabled outline is still an outline and a disabled ghost still has no edge. Intent goes — an
    unavailable action says "unavailable", not "unavailable, and destructive" — and so do the
    highlight and shadow, because nothing that cannot be pressed should look raised. */
-[data-component~="ui-button"]:disabled {
+[data-component~="ui-button"]:is(:disabled, [aria-disabled="true"]) {
   /* Derived from the tone itself, not from a separate disabled palette: faded toward the
      page, which desaturates it at the same time. Toward the page rather than toward white,
      so a dark theme dims where a light one lightens — the same rule, both schemes. */
@@ -250,7 +280,7 @@ const hostState = computed(() =>
 }
 
 /* A filled button keeps its fill, faded further so its text stays legible on it. */
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):disabled {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"], [data-component~="ui-button"][data-ui-button-state~="variant=danger"]):is(:disabled, [aria-disabled="true"]) {
   --_tone: color-mix(in oklab, var(--_hue) 34%, var(--ui-surface));
 }
 
@@ -258,7 +288,7 @@ const hostState = computed(() =>
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
    hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   border-color: transparent;
 }
@@ -290,19 +320,19 @@ const hostState = computed(() =>
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:enabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
 
-[data-component~="ui-button"][data-ui-button-state~="variant=link"]:disabled {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
   color: var(--ui-button-disabled-text, var(--ui-disabled-text));

package/vue/UiCombobox.vue

@@ -648,7 +648,7 @@ defineExpose({
 }
 label {
   color: var(--ui-combobox-label-text, var(--ui-text-primary));
-  font-size: var(--ui-combobox-label-font-size, 0.875rem);
+  font-size: var(--ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,

package/vue/UiEditorSlashMenu.vue

@@ -246,7 +246,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 10px;
+  font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
   border: 1px solid var(--ui-border);
   border-radius: 3px;

package/vue/UiEditorTableContextMenu.vue

@@ -260,7 +260,7 @@ useComponentHost(controllerModule.default, {
 
 .heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;

package/vue/UiEditorTableToolbar.vue

@@ -356,7 +356,7 @@ useComponentHost(controllerModule.default, {
 
 .menu-heading {
   padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: 0.6875rem;
+  font-size: var(--ui-font-size-2xs);
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;

package/vue/UiFormField.vue

@@ -58,12 +58,12 @@ useComponentHost(controllerModule.default, {
 
 .label {
   color: var(--ui-text-secondary);
-  font-size: 0.95rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 .help {
   color: var(--ui-text-muted);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
 }
 
@@ -74,7 +74,7 @@ useComponentHost(controllerModule.default, {
 .error,
 :slotted([role="alert"]) {
   color: var(--ui-accent-active);
-  font-size: 0.875rem;
+  font-size: var(--ui-font-size-sm);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiTreeItem.vue

@@ -179,7 +179,7 @@ useComponentHost(controllerModule.default, {
   align-items: center;
   min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
-  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
+  font-size: var(--ui-tree-item-font-size, var(--ui-font-size-sm));
   border-radius: var(--ui-radius-md);
   color: var(--ui-text-secondary);
   transition:

package/vue/chunks/UiAvatar.js

@@ -57,6 +57,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-64e52bdd"]]);
+}), [["__scopeId", "data-v-eb16b513"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -44,6 +44,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-cbb93f58"]]);
+}), [["__scopeId", "data-v-9e8e1291"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -8,17 +8,22 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	inheritAttrs: false,
 	__name: "UiBadge",
 	props: {
+		shape: { default: "pill" },
 		tone: { default: "neutral" },
 		variant: { default: "subtle" }
 	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`, props.variant && `variant variant=${props.variant}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.tone && `tone tone=${props.tone}`,
+			props.variant && `variant variant=${props.variant}`,
+			props.shape && `shape shape=${props.shape}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			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-90c7d1bb"]]);
+}), [["__scopeId", "data-v-c0ffc4d8"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -1,24 +1,27 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
-//#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled", "data-ui-button-state"];
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
 //#endregion
 //#region .build/vue/UiButton.vue
 var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiButton",
 	props: {
+		as: { default: "button" },
 		align: { default: "center" },
 		disabled: {
 			type: Boolean,
 			default: false
 		},
+		href: {},
+		rel: {},
 		size: { default: "md" },
 		stretch: {
 			type: Boolean,
 			default: false
 		},
+		target: {},
 		tone: { default: "accent" },
+		type: { default: "button" },
 		variant: { default: "outline" }
 	},
 	setup(__props) {
@@ -31,16 +34,55 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			props.variant && `variant variant=${props.variant}`,
 			props.tone && `tone tone=${props.tone}`
 		].filter(Boolean).join(" "));
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps({
-				"data-component": "ui-button",
-				type: "button"
-			}, _ctx.$attrs, {
-				disabled: __props.disabled,
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ "data-component": "ui-button" }, _ctx.$attrs, {
+				type: attribute({
+					true: __props.type,
+					false: null
+				}[`${!__props.href}`]),
+				disabled: attribute({
+					true: true,
+					false: null
+				}[`${__props.disabled && !__props.href}`]),
+				href: attribute({
+					true: null,
+					false: __props.href
+				}[`${__props.disabled}`]),
+				target: __props.target,
+				rel: __props.rel,
+				"aria-disabled": typeof {
+					true: "true",
+					false: null
+				}[`${Boolean(__props.disabled && __props.href)}`] === "boolean" ? String({
+					true: "true",
+					false: null
+				}[`${Boolean(__props.disabled && __props.href)}`]) : 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);
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 16, [
+				"type",
+				"disabled",
+				"href",
+				"target",
+				"rel",
+				"aria-disabled",
+				"data-ui-button-state"
+			]);
 		};
 	}
-}), [["__scopeId", "data-v-c6ef4679"]]);
+}), [["__scopeId", "data-v-1cd0b390"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCombobox.js

@@ -451,6 +451,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1aba7b21"]]);
+}), [["__scopeId", "data-v-3b8b0ecf"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -95,6 +95,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-346835f7"]]);
+}), [["__scopeId", "data-v-e7d0f904"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -93,6 +93,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}), 128))], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ae062630"]]);
+}), [["__scopeId", "data-v-2d9eb67c"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -175,6 +175,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-31b70e7c"]]);
+}), [["__scopeId", "data-v-1b253cb1"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiFormField.js

@@ -46,6 +46,6 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-605db5c0"]]);
+}), [["__scopeId", "data-v-13b85af2"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/chunks/UiTreeItem.js

@@ -210,6 +210,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9b8fd08d"]]);
+}), [["__scopeId", "data-v-d093d318"]]);
 //#endregion
 export { UiTreeItem_default as t };