morya-ui 0.3.0 → 0.3.2

package/dist/meter-group/style.css

@@ -50,6 +50,10 @@
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    /* Display scale (page titles, KPI figures) */
+    --m-font-size-xl: 1.25rem;
+    --m-font-size-2xl: 1.5rem;
+    --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
@@ -192,20 +196,10 @@
 
 /*
  * Global motion policy (complements per-component rules):
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ * - `reduced`: keep short paint transitions; stop loops
  *   and layout/transform size animation.
  * - `none`: zero all transition/animation durations.
  */
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-property: background-color, border-color, color, opacity, box-shadow,
-            outline, fill, stroke, stroke-dashoffset !important;
-    }
-}
 
 [data-m-motion="reduced"] *,
 [data-m-motion="reduced"] *::before,
@@ -529,9 +523,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -611,7 +609,7 @@
 .m-zoom-enter-from,
 .m-zoom-leave-to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
 }
 
 .m-slide-up-enter-active,
@@ -656,44 +654,6 @@
     transform: translateX(calc(var(--m-motion-distance) * -1));
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
-        transition: none;
-    }
-
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
-        transform: none;
-    }
-}
-
 [data-m-motion="reduced"] .m-fade-enter-active,
 [data-m-motion="reduced"] .m-fade-leave-active,
 [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1188,17 +1148,6 @@
     animation: none !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
 /* —— Misc: MeterGroup —— */
 .m-metergroup {
     --m-metergroup-meter-height: var(--m-meter-track-height);

package/dist/order-list/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
+import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../useMenuKeyboard-BedmYE4W.js";
 import { t as r } from "../ScrollBody-5hUnHj_M.js";
 import { n as i } from "../locale-Bzm2nbEp.js";

package/dist/order-list/style.css

@@ -50,6 +50,10 @@
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    /* Display scale (page titles, KPI figures) */
+    --m-font-size-xl: 1.25rem;
+    --m-font-size-2xl: 1.5rem;
+    --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
@@ -192,20 +196,10 @@
 
 /*
  * Global motion policy (complements per-component rules):
- * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ * - `reduced`: keep short paint transitions; stop loops
  *   and layout/transform size animation.
  * - `none`: zero all transition/animation durations.
  */
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-property: background-color, border-color, color, opacity, box-shadow,
-            outline, fill, stroke, stroke-dashoffset !important;
-    }
-}
 
 [data-m-motion="reduced"] *,
 [data-m-motion="reduced"] *::before,
@@ -529,9 +523,13 @@
     border-radius: var(--m-radius-md);
     box-shadow: var(--m-shadow-md);
     max-height: var(--m-dropdown-submenu-max-height);
+    max-width: calc(100vw - 2 * var(--m-space-4));
     min-width: 10rem;
     overflow: hidden;
     padding: var(--m-space-1);
+    /* Same as .m-dropdown__menu: size to content instead of being clamped
+       by the space left of the anchor in the viewport. */
+    width: max-content;
 }
 
 .m-dropdown__submenu--teleported {
@@ -611,7 +609,7 @@
 .m-zoom-enter-from,
 .m-zoom-leave-to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.95);
 }
 
 .m-slide-up-enter-active,
@@ -656,44 +654,6 @@
     transform: translateX(calc(var(--m-motion-distance) * -1));
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
-        transition: none;
-    }
-
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
-        transform: none;
-    }
-}
-
 [data-m-motion="reduced"] .m-fade-enter-active,
 [data-m-motion="reduced"] .m-fade-leave-active,
 [data-m-motion="reduced"] .m-scale-fade-enter-active,
@@ -1188,17 +1148,6 @@
     animation: none !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) *,
-    html:not([data-m-ignore-reduced-motion]) *::before,
-    html:not([data-m-ignore-reduced-motion]) *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
 .m-icon {
     color: currentColor;
     display: inline-flex;
@@ -1243,12 +1192,6 @@
     }
 }
 
-@media (prefers-reduced-motion: reduce) {
-    html:not([data-m-ignore-reduced-motion]) .m-icon--spin svg {
-        animation: none;
-    }
-}
-
 :root[data-m-motion='none'] .m-icon--spin svg,
 :root[data-m-motion='reduced'] .m-icon--spin svg {
     animation: none;

package/dist/page/index.js

@@ -1,50 +1,123 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-lcN1rS87.js";
-import { t as n } from "../Card-Dsmnzong.js";
-import { r } from "../responsive-DA5bxylA.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { t as n } from "../Button-dMqRmoYa.js";
+import { t as r } from "../Card-B1CB9Trm.js";
+import { t as i } from "../Empty-C5tndBOm.js";
+import { r as a } from "../responsive-DA5bxylA.js";
+import { t as o } from "../Skeleton-DCYdXAH2.js";
+import { n as s } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useAttrs as v, useSlots as y, withCtx as b } from "vue";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as h, createVNode as g, defineComponent as _, guardReactiveProps as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useAttrs as D, useId as O, useSlots as k, withCtx as A } from "vue";
 //#endregion
 //#region src/components/Page/PageContent.vue
-var x = /* @__PURE__ */ u({
+var j = /* @__PURE__ */ _({
 	name: "MPageContent",
 	inheritAttrs: !1,
 	__name: "PageContent",
 	props: {
 		pt: {},
 		density: { default: "default" },
-		width: { default: "full" }
+		width: { default: "full" },
+		bands: { default: "auto" }
 	},
 	setup(t) {
-		let n = t, r = v(), { rootAttrs: a } = e(r, () => n.pt), o = i(() => ["m-page-content", {
+		let n = t, r = D(), { rootAttrs: i } = e(r, () => n.pt), a = l(() => ["m-page-content", {
 			"m-page-content--compact": n.density === "compact",
 			"m-page-content--spacious": n.density === "spacious",
-			"m-page-content--narrow": n.width === "narrow"
+			"m-page-content--narrow": n.width === "narrow",
+			"m-page-content--bands-uniform": n.bands === "uniform"
 		}]);
-		return (e, t) => (p(), s("div", d(_(a), { class: o.value }), [m(e.$slots, "default")], 16));
+		return (e, t) => (S(), f("div", y(E(i), { class: a.value }), [C(e.$slots, "default")], 16));
 	}
-}), S = ["aria-label"], C = /* @__PURE__ */ u({
-	name: "MPageFilters",
+}), M = ["aria-label"], ee = {
+	key: 0,
+	class: "m-page-filter-chips__label"
+}, N = { class: "m-page-filter-chips__items" }, P = /* @__PURE__ */ _({
+	name: "MPageFilterChips",
 	inheritAttrs: !1,
-	__name: "PageFilters",
+	__name: "PageFilterChips",
 	props: {
 		pt: {},
+		label: {},
 		ariaLabel: {}
 	},
 	setup(t) {
-		let n = t, r = v(), { rootAttrs: i } = e(r, () => n.pt);
-		return (e, n) => (p(), s("section", d(_(i), {
-			class: "m-page-filters",
+		let n = t, r = D(), { rootAttrs: i } = e(r, () => n.pt), a = l(() => ["m-page-filter-chips"]);
+		return (e, n) => (S(), f("div", y(E(i), {
+			class: a.value,
+			role: "list",
 			"aria-label": t.ariaLabel
-		}), [m(e.$slots, "default")], 16, S));
+		}), [t.label ? (S(), f("span", ee, T(t.label), 1)) : d("", !0), p("div", N, [C(e.$slots, "default")])], 16, M));
 	}
-}), w = { class: "m-page-header__main" }, T = {
+}), F = ["aria-label"], I = { class: "m-page-filters__row" }, L = { class: "m-page-filters__controls" }, R = ["id"], z = {
+	key: 1,
+	class: "m-page-filters__active"
+}, B = /* @__PURE__ */ _({
+	name: "MPageFilters",
+	inheritAttrs: !1,
+	__name: "PageFilters",
+	props: {
+		pt: {},
+		ariaLabel: {},
+		variant: { default: "plain" },
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		expanded: {
+			type: Boolean,
+			default: !1
+		},
+		expandLabel: {},
+		collapseLabel: {}
+	},
+	emits: ["update:expanded"],
+	setup(t, { emit: r }) {
+		let i = t, a = r, o = k(), c = s(), m = O(), g = D(), { rootAttrs: _ } = e(g, () => i.pt), v = l(() => !!o.advanced), b = l(() => i.collapsible && v.value), x = l(() => i.expandLabel ?? `${c.expand ?? "Expand"} ${c.filterOptions ?? "filters"}`), w = l(() => i.collapseLabel ?? c.collapse), j = l(() => ["m-page-filters", {
+			"m-page-filters--filled": i.variant === "filled",
+			"m-page-filters--collapsible": b.value
+		}]);
+		function M() {
+			a("update:expanded", !i.expanded);
+		}
+		return (e, r) => (S(), f("section", y(E(_), {
+			class: j.value,
+			"aria-label": t.ariaLabel
+		}), [
+			p("div", I, [p("div", L, [C(e.$slots, "default")]), b.value ? (S(), u(n, {
+				key: 0,
+				type: "button",
+				severity: "secondary",
+				text: "",
+				class: "m-page-filters__toggle",
+				"aria-expanded": t.expanded,
+				"aria-controls": E(m),
+				onClick: M
+			}, {
+				default: A(() => [h(T(t.expanded ? w.value : x.value), 1)]),
+				_: 1
+			}, 8, ["aria-expanded", "aria-controls"])) : d("", !0)]),
+			b.value && t.expanded ? (S(), f("div", {
+				key: 0,
+				id: E(m),
+				class: "m-page-filters__advanced"
+			}, [C(e.$slots, "advanced")], 8, R)) : d("", !0),
+			e.$slots.active ? (S(), f("div", z, [C(e.$slots, "active")])) : d("", !0)
+		], 16, F));
+	}
+}), V = { class: "m-page-header__main" }, H = {
+	key: 0,
+	class: "m-page-header__breadcrumb"
+}, U = { class: "m-page-header__heading" }, W = {
 	key: 2,
+	class: "m-page-header__tags"
+}, G = {
+	key: 1,
 	class: "m-page-header__description"
-}, E = {
+}, K = {
 	key: 0,
 	class: "m-page-header__actions"
-}, D = /* @__PURE__ */ u({
+}, q = /* @__PURE__ */ _({
 	name: "MPageHeader",
 	inheritAttrs: !1,
 	__name: "PageHeader",
@@ -55,16 +128,20 @@ var x = /* @__PURE__ */ u({
 		headingLevel: { default: 1 }
 	},
 	setup(t) {
-		let n = t, r = v(), { rootAttrs: u } = e(r, () => n.pt), f = y(), x = i(() => `h${n.headingLevel}`), S = i(() => !!f.actions);
-		return (e, n) => (p(), s("header", d(_(u), { class: "m-page-header" }), [c("div", w, [t.title ? (p(), a(h(x.value), {
-			key: 0,
-			class: "m-page-header__title"
-		}, {
-			default: b(() => [l(g(t.title), 1)]),
-			_: 1
-		})) : m(e.$slots, "title", {}, void 0, void 0, 1), t.description ? (p(), s("p", T, g(t.description), 1)) : _(f).description ? m(e.$slots, "description", {}, void 0, void 0, 3) : o("", !0)]), S.value ? (p(), s("div", E, [m(e.$slots, "actions")])) : o("", !0)], 16));
+		let n = t, r = D(), { rootAttrs: i } = e(r, () => n.pt), a = k(), o = l(() => `h${n.headingLevel}`), s = l(() => !!a.actions);
+		return (e, n) => (S(), f("header", y(E(i), { class: "m-page-header" }), [p("div", V, [
+			E(a).breadcrumb ? (S(), f("div", H, [C(e.$slots, "breadcrumb")])) : d("", !0),
+			p("div", U, [t.title ? (S(), u(w(o.value), {
+				key: 0,
+				class: "m-page-header__title"
+			}, {
+				default: A(() => [h(T(t.title), 1)]),
+				_: 1
+			})) : C(e.$slots, "title", {}, void 0, void 0, 1), E(a).tags ? (S(), f("span", W, [C(e.$slots, "tags")])) : d("", !0)]),
+			t.description ? (S(), f("p", G, T(t.description), 1)) : E(a).description ? C(e.$slots, "description", {}, void 0, void 0, 2) : d("", !0)
+		]), s.value ? (S(), f("div", K, [C(e.$slots, "actions")])) : d("", !0)], 16));
 	}
-}), O = ["aria-label"], k = /* @__PURE__ */ u({
+}), J = /* @__PURE__ */ _({
 	name: "MPagePlaceholder",
 	inheritAttrs: !1,
 	__name: "PagePlaceholder",
@@ -75,15 +152,42 @@ var x = /* @__PURE__ */ u({
 		minHeight: { default: "12rem" }
 	},
 	setup(t) {
-		let n = t, a = v(), { rootAttrs: o } = e(a, () => n.pt), c = i(() => ({ "--m-page-placeholder-min-height": r(n.minHeight) }));
-		return (e, n) => (p(), s("div", d(_(o), {
+		let n = t, r = D(), { rootAttrs: o } = e(r, () => n.pt), s = k(), c = l(() => ({ "--m-page-placeholder-min-height": a(n.minHeight) }));
+		return (e, n) => (S(), f("div", y(E(o), {
 			class: "m-page-placeholder",
-			role: "img",
-			"aria-label": t.ariaLabel,
 			style: c.value
-		}), [m(e.$slots, "default", {}, () => [l(g(t.description), 1)])], 16, O));
+		}), [g(i, {
+			class: "m-page-placeholder__empty",
+			description: t.description,
+			"aria-label": t.ariaLabel
+		}, m({ _: 2 }, [
+			E(s).default ? {
+				name: "default",
+				fn: A(() => [C(e.$slots, "default")]),
+				key: "0"
+			} : void 0,
+			E(s).icon ? {
+				name: "icon",
+				fn: A(() => [C(e.$slots, "icon")]),
+				key: "1"
+			} : void 0,
+			E(s).extra ? {
+				name: "extra",
+				fn: A(() => [C(e.$slots, "extra")]),
+				key: "2"
+			} : void 0
+		]), 1032, ["description", "aria-label"])], 16));
 	}
-}), A = /* @__PURE__ */ u({
+}), te = { class: "m-page-section__header" }, Y = { key: 1 }, X = {
+	key: 2,
+	class: "m-page-section__actions"
+}, Z = {
+	key: 0,
+	class: "m-page-section__header"
+}, Q = { key: 1 }, ne = {
+	key: 2,
+	class: "m-page-section__actions"
+}, re = /* @__PURE__ */ _({
 	name: "MPageSection",
 	inheritAttrs: !1,
 	__name: "PageSection",
@@ -94,26 +198,52 @@ var x = /* @__PURE__ */ u({
 		headingLevel: { default: 2 }
 	},
 	setup(t) {
-		let n = t, r = v(), { rootAttrs: c } = e(r, () => n.pt), u = i(() => `h${n.headingLevel}`), f = i(() => ["m-page-section", {
+		let n = t, i = D(), { rootAttrs: a } = e(i, () => n.pt), o = k(), s = l(() => `h${n.headingLevel}`), c = l(() => !!(n.title || o.actions)), g = l(() => n.variant === "form"), _ = l(() => ["m-page-section", {
 			"m-page-section--muted": n.variant === "muted",
 			"m-page-section--form": n.variant === "form",
 			"m-page-section--actions": n.variant === "actions"
 		}]);
-		return (e, n) => (p(), s("section", d(_(c), { class: f.value }), [t.title ? (p(), a(h(u.value), {
+		return (e, n) => g.value ? (S(), u(r, y({ key: 0 }, E(a), {
+			class: _.value,
+			bordered: "",
+			"heading-level": t.headingLevel
+		}), m({
+			default: A(() => [C(e.$slots, "default")]),
+			_: 2
+		}, [c.value ? {
+			name: "header",
+			fn: A(() => [p("div", te, [t.title ? (S(), u(w(s.value), {
+				key: 0,
+				class: "m-page-section__title"
+			}, {
+				default: A(() => [h(T(t.title), 1)]),
+				_: 1
+			})) : (S(), f("span", Y)), E(o).actions ? (S(), f("div", X, [C(e.$slots, "actions")])) : d("", !0)])]),
+			key: "0"
+		} : void 0]), 1040, ["class", "heading-level"])) : (S(), f("section", y({ key: 1 }, E(a), { class: _.value }), [c.value ? (S(), f("div", Z, [t.title ? (S(), u(w(s.value), {
 			key: 0,
 			class: "m-page-section__title"
 		}, {
-			default: b(() => [l(g(t.title), 1)]),
+			default: A(() => [h(T(t.title), 1)]),
 			_: 1
-		})) : o("", !0), m(e.$slots, "default")], 16));
+		})) : (S(), f("span", Q)), E(o).actions ? (S(), f("div", ne, [C(e.$slots, "actions")])) : d("", !0)])) : d("", !0), C(e.$slots, "default")], 16));
 	}
-}), j = { class: "m-page-stat__body" }, M = {
+}), ie = { class: "m-page-stat__body" }, ae = { class: "m-page-stat__content" }, oe = {
 	key: 0,
 	class: "m-page-stat__label"
-}, N = {
-	key: 1,
+}, $ = {
+	key: 0,
 	class: "m-page-stat__value"
-}, P = /* @__PURE__ */ u({
+}, se = {
+	key: 1,
+	class: "m-page-stat__meta"
+}, ce = {
+	key: 1,
+	class: "m-page-stat__trend-label"
+}, le = {
+	key: 0,
+	class: "m-page-stat__icon"
+}, ue = /* @__PURE__ */ _({
 	name: "MPageStat",
 	inheritAttrs: !1,
 	__name: "PageStat",
@@ -123,36 +253,65 @@ var x = /* @__PURE__ */ u({
 		value: {},
 		trend: {},
 		trendSeverity: { default: "primary" },
-		icon: {}
+		trendDirection: {},
+		trendLabel: {},
+		icon: {},
+		loading: { type: Boolean },
+		shadow: { default: "always" },
+		layout: { default: "card" },
+		density: { default: "default" },
+		orientation: { default: "stacked" }
 	},
-	setup(r) {
-		let l = r, u = v(), { rootAttrs: h } = e(u, () => l.pt), y = i(() => ["m-page-stat__trend", `m-page-stat__trend--${l.trendSeverity}`]);
-		return (e, i) => (p(), a(n, d(_(h), {
-			class: "m-page-stat",
-			"aria-label": r.label
-		}), {
-			default: b(() => [c("div", j, [c("div", null, [
-				r.label ? (p(), s("p", M, g(r.label), 1)) : o("", !0),
-				r.value != null && r.value !== "" ? (p(), s("p", N, g(r.value), 1)) : o("", !0),
-				r.trend ? (p(), s("p", {
-					key: 2,
-					class: f(y.value)
-				}, g(r.trend), 3)) : o("", !0),
-				m(e.$slots, "default")
-			]), r.icon ? (p(), a(t, {
+	setup(n) {
+		let i = n, a = D(), { rootAttrs: s } = e(a, () => i.pt), m = l(() => ["m-page-stat", {
+			"m-page-stat--plain": i.layout === "plain",
+			"m-page-stat--compact": i.density === "compact",
+			"m-page-stat--inline": i.orientation === "inline"
+		}]), _ = l(() => i.layout === "card" ? r : "div"), y = l(() => {
+			let e = {
+				...s.value,
+				class: m.value,
+				"aria-label": i.label
+			};
+			return i.layout === "card" ? {
+				...e,
+				shadow: i.shadow
+			} : e;
+		}), E = l(() => ["m-page-stat__trend", `m-page-stat__trend--${i.trendSeverity}`]), O = l(() => {
+			if (i.trendDirection === "up") return "arrow-narrow-up";
+			if (i.trendDirection === "down") return "arrow-narrow-down";
+		}), k = l(() => !!(i.trend || i.trendLabel));
+		return (e, r) => (S(), u(w(_.value), x(v(y.value)), {
+			default: A(() => [p("div", ie, [p("div", ae, [n.label ? (S(), f("p", oe, T(n.label), 1)) : d("", !0), n.loading ? (S(), f(c, { key: 1 }, [g(o, {
+				width: "7rem",
+				height: "1.75rem"
+			}), k.value ? (S(), u(o, {
 				key: 0,
-				name: r.icon,
-				size: "lg",
-				class: "m-page-stat__icon",
+				text: "",
+				width: "4.5rem"
+			})) : d("", !0)], 64)) : (S(), f(c, { key: 2 }, [
+				n.value != null && n.value !== "" ? (S(), f("p", $, T(n.value), 1)) : d("", !0),
+				k.value ? (S(), f("div", se, [n.trend ? (S(), f("span", {
+					key: 0,
+					class: b(E.value)
+				}, [O.value ? (S(), u(t, {
+					key: 0,
+					name: O.value,
+					class: "m-page-stat__trend-icon",
+					"aria-hidden": "true"
+				}, null, 8, ["name"])) : d("", !0), h(" " + T(n.trend), 1)], 2)) : d("", !0), n.trendLabel ? (S(), f("span", ce, T(n.trendLabel), 1)) : d("", !0)])) : d("", !0),
+				C(e.$slots, "default")
+			], 64))]), n.icon ? (S(), f("span", le, [g(t, {
+				name: n.icon,
 				"aria-hidden": "true"
-			}, null, 8, ["name"])) : o("", !0)])]),
+			}, null, 8, ["name"])])) : d("", !0)])]),
 			_: 3
-		}, 16, ["aria-label"]));
+		}, 16));
 	}
-}), F = {
+}), de = {
 	key: 2,
 	class: "m-page-toolbar__actions"
-}, I = /* @__PURE__ */ u({
+}, fe = /* @__PURE__ */ _({
 	name: "MPageToolbar",
 	inheritAttrs: !1,
 	__name: "PageToolbar",
@@ -162,15 +321,15 @@ var x = /* @__PURE__ */ u({
 		headingLevel: { default: 1 }
 	},
 	setup(t) {
-		let n = t, r = v(), { rootAttrs: c } = e(r, () => n.pt), u = y(), f = i(() => `h${n.headingLevel}`), x = i(() => !!u.actions);
-		return (e, n) => (p(), s("header", d(_(c), { class: "m-page-toolbar" }), [t.title ? (p(), a(h(f.value), {
+		let n = t, r = D(), { rootAttrs: i } = e(r, () => n.pt), a = k(), o = l(() => `h${n.headingLevel}`), s = l(() => !!a.actions);
+		return (e, n) => (S(), f("header", y(E(i), { class: "m-page-toolbar" }), [t.title ? (S(), u(w(o.value), {
 			key: 0,
 			class: "m-page-toolbar__title"
 		}, {
-			default: b(() => [l(g(t.title), 1)]),
+			default: A(() => [h(T(t.title), 1)]),
 			_: 1
-		})) : m(e.$slots, "default", {}, void 0, void 0, 1), x.value ? (p(), s("div", F, [m(e.$slots, "actions")])) : o("", !0)], 16));
+		})) : C(e.$slots, "default", {}, void 0, void 0, 1), s.value ? (S(), f("div", de, [C(e.$slots, "actions")])) : d("", !0)], 16));
 	}
 });
 //#endregion
-export { x as MPageContent, C as MPageFilters, D as MPageHeader, k as MPagePlaceholder, A as MPageSection, P as MPageStat, I as MPageToolbar };
+export { j as MPageContent, P as MPageFilterChips, B as MPageFilters, q as MPageHeader, J as MPagePlaceholder, re as MPageSection, ue as MPageStat, fe as MPageToolbar };