@threadlabs/looma 0.10.11 → 0.11.0

package/vue/UiStatusMessage.vue

@@ -0,0 +1,121 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+import UiSpinner from './UiSpinner.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    heading?: string
+    kind?: 'empty' | 'loading' | 'error'
+    layout?: 'inline' | 'panel' | 'fill'
+  }>(),
+  {
+    heading: '',
+    kind: 'empty',
+    layout: 'inline',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.kind && `kind kind=${props.kind}`,
+    props.layout && `layout layout=${props.layout}`,
+  ].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>
+  <div
+    data-component="ui-status-message"
+    v-bind="$attrs"
+    :role="attribute(({ true: 'alert', false: 'status' })[`${kind === 'error'}`])"
+    :data-ui-status-message-state="hostState || undefined"
+  >
+    <UiSpinner size="sm" :hidden="kind !== 'loading'" />
+    <span class="copy"><strong class="heading" :hidden="!heading">{{ heading }}</strong>
+      <span class="message"><slot /></span></span>
+    <span class="action"><slot name="action" /></span>
+  </div>
+</template>
+
+<style scoped>
+/* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
+       Every view says it the same way, in the same place, at the same size. */
+[data-component~="ui-status-message"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-space-2) var(--ui-space-4);
+  padding-block: var(--ui-space-4);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height);
+}
+
+[data-component~="ui-status-message"][data-ui-status-message-state~="kind=error"] {
+  color: var(--ui-danger);
+}
+
+[data-component~="ui-status-message"][data-ui-status-message-state~="layout=panel"] {
+  padding: var(--ui-space-6);
+  border: 1px dashed var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+}
+
+[data-component~="ui-status-message"][data-ui-status-message-state~="layout=fill"] {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  min-block-size: 50vh;
+  text-align: center;
+}
+
+.copy {
+  display: flex;
+  flex: 1 1 12rem;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  min-inline-size: 0;
+}
+
+[data-component~="ui-status-message"][data-ui-status-message-state~="layout=fill"] .copy {
+  flex: none;
+  align-items: center;
+}
+
+.heading {
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-semibold);
+}
+
+.action {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-2);
+}
+
+.action:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-status-message"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiText.d.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label';
+    align?: 'start' | 'center';
+    size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg';
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success';
+    truncate?: boolean;
+    variant?: 'body' | 'eyebrow' | 'code';
+    weight?: 'inherit' | 'normal' | 'medium' | 'semibold';
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tone: "default" | "secondary" | "muted" | "accent" | "danger" | "success";
+    variant: "body" | "eyebrow" | "code";
+    as: "p" | "span" | "div" | "small" | "strong" | "label";
+    align: "start" | "center";
+    size: "inherit" | "xs" | "sm" | "md" | "lg";
+    truncate: boolean;
+    weight: "inherit" | "normal" | "medium" | "semibold";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiText.js

@@ -0,0 +1,2 @@
+import { t as UiText_default } from "./chunks/UiText.js";
+export { UiText_default as default };

package/vue/UiText.vue

@@ -0,0 +1,125 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    as?: 'p' | 'span' | 'div' | 'small' | 'strong' | 'label'
+    align?: 'start' | 'center'
+    size?: 'inherit' | 'xs' | 'sm' | 'md' | 'lg'
+    tone?: 'default' | 'secondary' | 'muted' | 'accent' | 'danger' | 'success'
+    truncate?: boolean
+    variant?: 'body' | 'eyebrow' | 'code'
+    weight?: 'inherit' | 'normal' | 'medium' | 'semibold'
+  }>(),
+  {
+    as: 'p',
+    align: 'start',
+    size: 'inherit',
+    tone: 'default',
+    truncate: false,
+    variant: 'body',
+    weight: 'inherit',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.tone && `tone tone=${props.tone}`,
+    props.weight && `weight weight=${props.weight}`,
+    props.variant && `variant variant=${props.variant}`,
+    props.truncate && 'truncate',
+    props.align && `align align=${props.align}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <component
+    :is="as" data-component="ui-text" v-bind="$attrs" :data-ui-text-state="hostState || undefined">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+/* Running text, set on the type scale and in a tone that says what it is, so a view never styles
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
+[data-component~="ui-text"] {
+  margin: 0;
+  min-inline-size: 0;
+  color: var(--ui-text-primary);
+  text-align: start;
+}
+
+[data-component~="ui-text"][data-ui-text-state~="size=xs"] {
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height);
+}
+[data-component~="ui-text"][data-ui-text-state~="size=sm"] {
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+[data-component~="ui-text"][data-ui-text-state~="size=md"] {
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height);
+}
+[data-component~="ui-text"][data-ui-text-state~="size=lg"] {
+  font-size: var(--ui-font-size-lg);
+  line-height: var(--ui-line-height-relaxed);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="tone=secondary"] {
+  color: var(--ui-text-secondary);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=muted"] {
+  color: var(--ui-text-muted);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=accent"] {
+  color: var(--ui-accent-active);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=danger"] {
+  color: var(--ui-danger);
+}
+[data-component~="ui-text"][data-ui-text-state~="tone=success"] {
+  color: var(--ui-success);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="weight=normal"] {
+  font-weight: var(--ui-font-normal);
+}
+[data-component~="ui-text"][data-ui-text-state~="weight=medium"] {
+  font-weight: var(--ui-font-medium);
+}
+[data-component~="ui-text"][data-ui-text-state~="weight=semibold"] {
+  font-weight: var(--ui-font-semibold);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="variant=eyebrow"] {
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+[data-component~="ui-text"][data-ui-text-state~="variant=code"] {
+  font-family: var(--ui-font-family-mono);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="truncate"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-component~="ui-text"][data-ui-text-state~="align=center"] {
+  text-align: center;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-text"][hidden] {
+  display: none;
+}
+</style>

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-9d727004"]]);
+}), [["__scopeId", "data-v-6c48e0e3"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBreadcrumbItem.js

@@ -0,0 +1,50 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiBreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current", "data-ui-breadcrumb-item-state"];
+var _hoisted_2 = {
+	class: "separator",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "content" };
+//#endregion
+//#region .build/vue/UiBreadcrumbItem.vue
+var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiBreadcrumbItem",
+	props: { current: {
+		type: Boolean,
+		default: false
+	} },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.current && "current"].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("li", mergeProps({ "data-component": "ui-breadcrumb-item" }, _ctx.$attrs, {
+				"aria-current": typeof {
+					true: "page",
+					false: null
+				}[`${__props.current}`] === "boolean" ? String({
+					true: "page",
+					false: null
+				}[`${__props.current}`]) : attribute({
+					true: "page",
+					false: null
+				}[`${__props.current}`]),
+				"data-ui-breadcrumb-item-state": hostState.value || void 0
+			}), [createElementVNode("span", _hoisted_2, [createVNode(UiIcon_default, { name: "chevron-right" })]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-9de59def"]]);
+//#endregion
+export { UiBreadcrumbItem_default as t };

package/vue/chunks/UiBreadcrumbs.js

@@ -0,0 +1,19 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = { role: "list" };
+//#endregion
+//#region .build/vue/UiBreadcrumbs.vue
+var UiBreadcrumbs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiBreadcrumbs",
+	props: { label: { default: "Breadcrumb" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("nav", mergeProps({ "data-component": "ui-breadcrumbs" }, _ctx.$attrs, { "aria-label": __props.label }), [createElementVNode("ol", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-0d86d58e"]]);
+//#endregion
+export { UiBreadcrumbs_default as t };

package/vue/chunks/UiCard.js

@@ -0,0 +1,31 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#endregion
+//#region .build/vue/UiCard.vue
+var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiCard",
+	props: {
+		as: { default: "div" },
+		padding: { default: "md" },
+		tone: { default: "neutral" },
+		variant: { default: "outlined" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			props.padding && `padding padding=${props.padding}`,
+			props.variant && `variant variant=${props.variant}`,
+			props.tone && `tone tone=${props.tone}`
+		].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ "data-component": "ui-card" }, _ctx.$attrs, { "data-ui-card-state": hostState.value || void 0 }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 16, ["data-ui-card-state"]);
+		};
+	}
+}), [["__scopeId", "data-v-d00c53f0"]]);
+//#endregion
+export { UiCard_default as t };

package/vue/chunks/UiCover.js

@@ -0,0 +1,21 @@
+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/UiCover.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-cover-state"];
+//#endregion
+//#region .build/vue/UiCover.vue
+var UiCover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiCover",
+	props: { size: { default: "screen" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cover" }, _ctx.$attrs, { "data-ui-cover-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-f341d85e"]]);
+//#endregion
+export { UiCover_default as t };

package/vue/chunks/UiDescriptionItem.js

@@ -0,0 +1,16 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+//#endregion
+//#region .build/vue/UiDescriptionItem.vue
+var UiDescriptionItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiDescriptionItem",
+	props: { term: { default: "" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-description-item" }, _ctx.$attrs), [createElementVNode("dt", null, toDisplayString(__props.term), 1), createElementVNode("dd", null, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16);
+		};
+	}
+}), [["__scopeId", "data-v-2d94bc9f"]]);
+//#endregion
+export { UiDescriptionItem_default as t };

package/vue/chunks/UiDescriptionList.js

@@ -0,0 +1,21 @@
+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/UiDescriptionList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-description-list-state"];
+//#endregion
+//#region .build/vue/UiDescriptionList.vue
+var UiDescriptionList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiDescriptionList",
+	props: { layout: { default: "rows" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dl", mergeProps({ "data-component": "ui-description-list" }, _ctx.$attrs, { "data-ui-description-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-0519dd0f"]]);
+//#endregion
+export { UiDescriptionList_default as t };

package/vue/chunks/UiList.js

@@ -0,0 +1,24 @@
+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/UiList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-list-state"];
+//#endregion
+//#region .build/vue/UiList.vue
+var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiList",
+	props: { layout: { default: "rows" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", mergeProps({
+				"data-component": "ui-list",
+				role: "list"
+			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-935b1197"]]);
+//#endregion
+export { UiList_default as t };

package/vue/chunks/UiListItem.js

@@ -0,0 +1,39 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current", "data-ui-list-item-state"];
+var _hoisted_2 = { class: "leading" };
+var _hoisted_3 = { class: "content" };
+var _hoisted_4 = { class: "title" };
+var _hoisted_5 = { class: "description" };
+var _hoisted_6 = { class: "trailing" };
+//#endregion
+//#region .build/vue/UiListItem.vue
+var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiListItem",
+	props: {
+		current: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "row" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.current && "current"].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, _ctx.$attrs, {
+				"aria-current": __props.current,
+				"data-ui-list-item-state": hostState.value || void 0
+			}), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
+				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default")]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description")])]),
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "trailing")])
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-d61daf46"]]);
+//#endregion
+export { UiListItem_default as t };

package/vue/chunks/UiPageHeader.js

@@ -0,0 +1,35 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiPageHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-page-header-state"];
+var _hoisted_2 = { class: "leading" };
+var _hoisted_3 = { class: "copy" };
+var _hoisted_4 = { class: "eyebrow" };
+var _hoisted_5 = { class: "title" };
+var _hoisted_6 = { class: "description" };
+var _hoisted_7 = { class: "actions" };
+//#endregion
+//#region .build/vue/UiPageHeader.vue
+var UiPageHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiPageHeader",
+	props: { align: { default: "start" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.align && `align align=${props.align}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("header", mergeProps({ "data-component": "ui-page-header" }, _ctx.$attrs, { "data-ui-page-header-state": hostState.value || void 0 }), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_3, [
+					createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "eyebrow", {}, void 0, true)]),
+					createElementVNode("h1", _hoisted_5, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])
+				]),
+				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-8dcefe30"]]);
+//#endregion
+export { UiPageHeader_default as t };

package/vue/chunks/UiSection.js

@@ -0,0 +1,34 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+//#region .build/vue/UiSection.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-section-state"];
+var _hoisted_2 = { class: "head" };
+var _hoisted_3 = { class: "copy" };
+var _hoisted_4 = ["hidden"];
+var _hoisted_5 = { class: "description" };
+var _hoisted_6 = { class: "actions" };
+var _hoisted_7 = { class: "body" };
+//#endregion
+//#region .build/vue/UiSection.vue
+var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiSection",
+	props: {
+		heading: { default: "" },
+		tone: { default: "neutral" },
+		variant: { default: "plain" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", mergeProps({ "data-component": "ui-section" }, _ctx.$attrs, { "data-ui-section-state": hostState.value || void 0 }), [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createElementVNode("h2", {
+				class: "heading",
+				hidden: !__props.heading
+			}, toDisplayString(__props.heading), 9, _hoisted_4), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])]), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-4d1e5a3a"]]);
+//#endregion
+export { UiSection_default as t };

package/vue/chunks/UiSpinner.js

@@ -0,0 +1,64 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { computed, createElementBlock, createVNode, defineComponent, mergeProps, openBlock } from "vue";
+//#region .build/vue/UiSpinner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"role",
+	"aria-label",
+	"aria-hidden",
+	"data-ui-spinner-state"
+];
+//#endregion
+//#region .build/vue/UiSpinner.vue
+var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiSpinner",
+	props: {
+		label: { default: "" },
+		size: { default: "md" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].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("span", mergeProps({ "data-component": "ui-spinner" }, _ctx.$attrs, {
+				role: attribute({
+					true: "status",
+					false: null
+				}[`${__props.label !== ""}`]),
+				"aria-label": typeof {
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]) : attribute({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]),
+				"aria-hidden": typeof {
+					true: null,
+					false: "true"
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: null,
+					false: "true"
+				}[`${__props.label !== ""}`]) : attribute({
+					true: null,
+					false: "true"
+				}[`${__props.label !== ""}`]),
+				"data-ui-spinner-state": hostState.value || void 0
+			}), [createVNode(UiIcon_default, { name: "loader" })], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-3472d01c"]]);
+//#endregion
+export { UiSpinner_default as t };