morya-ui 0.2.6 → 0.2.8

package/dist/status/index.js

@@ -1,9 +1,18 @@
 import { t as e } from "../types-DGuu4Eg4.js";
-import { o as t } from "../config-Dln2-u_v.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { o as n } from "../config-BdK5ccNT.js";
 import "./style.js";
-import { computed as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, toDisplayString as d } from "vue";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p, toDisplayString as m, useSlots as h } from "vue";
 //#region src/components/Status/Status.vue?vue&type=script&setup=true&lang.ts
-var f = { class: "m-status__label" }, p = /* @__PURE__ */ o({
+var g = {
+	key: 0,
+	class: "m-status__dot",
+	"aria-hidden": "true"
+}, _ = {
+	key: 1,
+	class: "m-status__icon",
+	"aria-hidden": "true"
+}, v = { class: "m-status__label" }, y = /* @__PURE__ */ l({
 	__name: "Status",
 	props: {
 		label: {},
@@ -13,27 +22,45 @@ var f = { class: "m-status__label" }, p = /* @__PURE__ */ o({
 			default: !1
 		},
 		size: {},
-		color: {}
+		color: {},
+		variant: { default: "dot" },
+		icon: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
 	},
-	setup(o) {
-		let p = o, m = t("Status", () => p.size), h = n(() => e(p.severity) ?? "secondary"), g = n(() => [
+	setup(l) {
+		let y = l, b = h(), x = n("Status", () => y.size), S = r(() => e(y.severity) ?? "secondary"), C = {
+			success: "check-circle",
+			danger: "x-circle",
+			warn: "warning",
+			info: "info",
+			primary: "info",
+			help: "info"
+		}, w = r(() => {
+			if (y.variant !== "text" && !(y.icon || b.icon)) return C[S.value];
+		}), T = r(() => y.icon ?? w.value), E = r(() => !!(b.icon || T.value)), D = r(() => y.variant !== "text" && !E.value), O = r(() => [
 			"m-status",
-			`m-status--${h.value}`,
-			`m-status--${m.value}`,
+			`m-status--${S.value}`,
+			`m-status--${x.value}`,
+			`m-status--${y.variant}`,
 			{
-				"m-status--processing": p.processing,
-				"m-status--custom": !!p.color
+				"m-status--processing": y.processing && (D.value || E.value),
+				"m-status--custom": !!y.color,
+				"m-status--disabled": y.disabled,
+				"m-status--has-icon": E.value
 			}
-		]), _ = n(() => p.color ? { "--m-status-color": p.color } : void 0);
-		return (e, t) => (l(), r("span", {
-			class: s(g.value),
-			style: c(_.value),
+		]), k = r(() => y.color ? { "--m-status-color": y.color } : void 0);
+		return (e, n) => (f(), o("span", {
+			class: u(O.value),
+			style: d(k.value),
 			role: "status"
-		}, [t[0] ||= i("span", {
-			class: "m-status__dot",
-			"aria-hidden": "true"
-		}, null, -1), i("span", f, [u(e.$slots, "default", {}, () => [a(d(o.label), 1)])])], 6));
+		}, [D.value ? (f(), o("span", g)) : E.value ? (f(), o("span", _, [p(e.$slots, "icon", {}, () => [T.value ? (f(), i(t, {
+			key: 0,
+			name: T.value
+		}, null, 8, ["name"])) : a("", !0)])])) : a("", !0), s("span", v, [p(e.$slots, "default", {}, () => [c(m(l.label), 1)])])], 6));
 	}
 });
 //#endregion
-export { p as MStatus };
+export { y as MStatus };

package/dist/status/style.css

@@ -989,41 +989,123 @@
     }
 }
 
+.m-icon {
+    color: currentColor;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 1rem;
+    line-height: 0;
+    vertical-align: middle;
+    width: 1rem;
+}
+
+.m-icon svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.m-icon--sm,
+.m-icon--small {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+.m-icon--md,
+.m-icon--normal {
+    height: 1rem;
+    width: 1rem;
+}
+
+.m-icon--lg,
+.m-icon--large {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+.m-icon--spin svg {
+    animation: m-icon-spin var(--m-motion-spin-fast) linear infinite;
+}
+
+@keyframes m-icon-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .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;
+}
+
 .m-status {
     --m-status-dot-size: 0.5rem;
+    --m-status-icon-size: 0.9375rem;
+    --m-status-soft-bg: color-mix(in srgb, currentColor 12%, transparent);
     align-items: center;
-    color: var(--m-color-text);
+    color: var(--m-color-text-muted);
     display: inline-flex;
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-sm);
+    font-size: var(--m-font-size-md);
     font-weight: 500;
-    gap: var(--m-space-2);
-    line-height: 1.25;
+    gap: 0.375rem;
+    line-height: 1;
     vertical-align: middle;
+    white-space: nowrap;
 }
 
 .m-status__dot {
     background: currentColor;
     border-radius: var(--m-radius-full);
+    box-shadow: 0 0 0 0.1875rem var(--m-status-soft-bg);
     flex-shrink: 0;
     height: var(--m-status-dot-size);
+    position: relative;
     width: var(--m-status-dot-size);
 }
 
+.m-status__icon {
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: var(--m-status-icon-size);
+    justify-content: center;
+    line-height: 0;
+    width: var(--m-status-icon-size);
+}
+
+.m-status__icon :is(.m-icon, svg) {
+    display: block;
+    flex-shrink: 0;
+    height: 100%;
+    line-height: 0;
+    width: 100%;
+}
+
 .m-status__label {
+    line-height: 1.25;
     min-width: 0;
 }
 
 .m-status--small {
     --m-status-dot-size: 0.375rem;
+    --m-status-icon-size: 0.8125rem;
     font-size: var(--m-font-size-xs);
-    gap: var(--m-space-1);
+    gap: 0.3125rem;
 }
 
 .m-status--large {
-    --m-status-dot-size: 0.625rem;
-    font-size: var(--m-font-size-md);
-    gap: var(--m-space-2);
+    --m-status-dot-size: 0.5625rem;
+    --m-status-icon-size: 1.125rem;
+    font-size: var(--m-font-size-lg);
+    gap: 0.5rem;
 }
 
 .m-status--primary {
@@ -1034,14 +1116,6 @@
     color: var(--m-color-text-muted);
 }
 
-.m-status--secondary .m-status__dot {
-    background: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 70%,
-        var(--m-color-surface)
-    );
-}
-
 .m-status--success {
     color: var(--m-color-success);
 }
@@ -1071,27 +1145,98 @@
     color: var(--m-status-color);
 }
 
-.m-status--processing .m-status__dot {
-    animation: m-status-pulse var(--m-motion-pulse) ease-in-out infinite;
+.m-status--disabled {
+    color: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 55%,
+        var(--m-color-surface)
+    );
+}
+
+/* Soft badge: stronger fill so status reads as a marker, not plain text */
+.m-status--tag {
+    --m-status-soft-bg: color-mix(in srgb, currentColor 16%, transparent);
+    background: var(--m-status-soft-bg);
+    border-radius: var(--m-radius-full);
+    font-size: var(--m-font-size-xs);
+    gap: 0.3125rem;
+    height: 1.5rem;
+    padding: 0 0.625rem;
+}
+
+.m-status--tag .m-status__dot {
+    --m-status-dot-size: 0.375rem;
+    box-shadow: none;
+}
+
+.m-status--tag.m-status--has-icon {
+    gap: 0.25rem;
+    padding-inline-start: 0.4375rem;
+}
+
+.m-status--tag.m-status--large {
+    height: 1.75rem;
+    padding: 0 0.8125rem;
+}
+
+.m-status--tag.m-status--large.m-status--has-icon {
+    padding-inline-start: 0.5rem;
+}
+
+.m-status--tag.m-status--small {
+    height: 1.25rem;
+    padding: 0 0.5rem;
+}
+
+.m-status--tag.m-status--small.m-status--has-icon {
+    padding-inline-start: 0.375rem;
+}
+
+.m-status--processing .m-status__dot::after,
+.m-status--processing.m-status--has-icon .m-status__icon::after {
+    animation: m-status-pulse var(--m-motion-pulse) cubic-bezier(0, 0, 0.2, 1)
+        infinite;
+    background: currentColor;
+    border-radius: var(--m-radius-full);
+    content: "";
+    inset: 0;
+    opacity: 0.45;
+    position: absolute;
+}
+
+.m-status--processing.m-status--has-icon .m-status__icon {
+    position: relative;
+}
+
+.m-status--processing.m-status--has-icon .m-status__icon::after {
+    inset: -0.125rem;
 }
 
 @keyframes m-status-pulse {
-    0%,
-    100% {
-        box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);
+    0% {
+        opacity: 0.55;
+        transform: scale(1);
     }
-    70% {
-        box-shadow: 0 0 0 0.4rem transparent;
+    100% {
+        opacity: 0;
+        transform: scale(2.8);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .m-status--processing .m-status__dot {
+    .m-status--processing .m-status__dot::after,
+    .m-status--processing.m-status--has-icon .m-status__icon::after {
         animation: none;
     }
 }
 
-:root[data-m-motion='none'] .m-status--processing .m-status__dot,
-:root[data-m-motion='reduced'] .m-status--processing .m-status__dot {
+:root[data-m-motion="none"] .m-status--processing .m-status__dot::after,
+:root[data-m-motion="reduced"] .m-status--processing .m-status__dot::after,
+:root[data-m-motion="none"]
+    .m-status--processing.m-status--has-icon
+    .m-status__icon::after,
+:root[data-m-motion="reduced"]
+    .m-status--processing.m-status--has-icon
+    .m-status__icon::after {
     animation: none;
 }

package/dist/status/style.js

@@ -1,3 +1,4 @@
 import '../theme/styles.css'
 import '../styles/base.css'
+import '../components/Icon/styles.css'
 import '../components/Status/styles.css'