morya-ui 0.4.0 → 0.4.2

package/dist/progress-bar/index.js

@@ -1,23 +1,25 @@
-import { t as e } from "../types-DGuu4Eg4.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../types-DGuu4Eg4.js";
 import "./style.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, toDisplayString as l } from "vue";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeProps as s, normalizeStyle as c, openBlock as l, toDisplayString as u, unref as d, useAttrs as f } from "vue";
 //#region src/components/ProgressBar/ProgressBar.vue?vue&type=script&setup=true&lang.ts
-var u = [
+var p = [
 	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow"
-], d = {
+], m = {
 	key: 0,
 	class: "m-progressbar__circle",
 	viewBox: "0 0 100 100",
 	"aria-hidden": "true"
-}, f = ["stroke-dasharray", "stroke-dashoffset"], p = {
+}, h = ["stroke-dasharray", "stroke-dashoffset"], g = {
 	key: 0,
 	class: "m-progressbar__label"
-}, m = {
+}, _ = {
 	key: 2,
 	class: "m-progressbar__circle-label"
-}, h = /* @__PURE__ */ a({
+}, v = /* @__PURE__ */ o({
+	inheritAttrs: !1,
 	__name: "ProgressBar",
 	props: {
 		value: { default: 0 },
@@ -28,54 +30,55 @@ var u = [
 		showValue: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		pt: {}
 	},
-	setup(a) {
-		let h = a, g = t(() => Math.min(100, Math.max(0, h.value))), _ = t(() => h.mode === "indeterminate"), v = t(() => h.type === "circle"), y = t(() => h.status === "active" && !_.value && !v.value), b = t(() => {
-			if (!(!h.status || h.status === "active" || h.status === "normal")) return h.status === "error" || h.status === "exception" ? "danger" : e(h.status);
-		}), x = t(() => ["m-progressbar", {
-			"m-progressbar--indeterminate": _.value,
-			"m-progressbar--circle": v.value,
-			[`m-progressbar--${b.value}`]: !!b.value,
-			"m-progressbar--active": y.value,
-			"m-progressbar--custom": !!h.color
-		}]), S = t(() => h.color ? { "--m-progressbar-fill": h.color } : void 0), C = t(() => _.value || v.value ? void 0 : { "--m-progressbar-scale": String(g.value / 100) }), w = t(() => {
+	setup(o) {
+		let v = o, y = f(), { rootAttrs: b } = e(y, () => v.pt), x = n(() => Math.min(100, Math.max(0, v.value))), S = n(() => v.mode === "indeterminate"), C = n(() => v.type === "circle"), w = n(() => v.status === "active" && !S.value && !C.value), T = n(() => {
+			if (!(!v.status || v.status === "active" || v.status === "normal")) return v.status === "error" || v.status === "exception" ? "danger" : t(v.status);
+		}), E = n(() => ["m-progressbar", {
+			"m-progressbar--indeterminate": S.value,
+			"m-progressbar--circle": C.value,
+			[`m-progressbar--${T.value}`]: !!T.value,
+			"m-progressbar--active": w.value,
+			"m-progressbar--custom": !!v.color
+		}]), D = n(() => v.color ? { "--m-progressbar-fill": v.color } : void 0), O = n(() => S.value || C.value ? void 0 : { "--m-progressbar-scale": String(x.value / 100) }), k = n(() => {
 			let e = 2 * Math.PI * 42;
 			return {
 				circumference: e,
-				offset: e * (1 - g.value / 100)
+				offset: e * (1 - x.value / 100)
 			};
-		}), T = t(() => `${Math.round(g.value)}%`);
-		return (e, t) => (c(), r("div", {
-			class: o(x.value),
-			style: s(S.value),
+		}), A = n(() => `${Math.round(x.value)}%`);
+		return (e, t) => (l(), i("div", s(d(b), {
+			class: E.value,
+			style: D.value,
 			role: "progressbar",
-			"aria-valuemin": _.value ? void 0 : 0,
-			"aria-valuemax": _.value ? void 0 : 100,
-			"aria-valuenow": _.value ? void 0 : g.value
-		}, [v.value ? (c(), r("svg", d, [t[0] ||= i("circle", {
+			"aria-valuemin": S.value ? void 0 : 0,
+			"aria-valuemax": S.value ? void 0 : 100,
+			"aria-valuenow": S.value ? void 0 : x.value
+		}), [C.value ? (l(), i("svg", m, [t[0] ||= a("circle", {
 			class: "m-progressbar__circle-track",
 			cx: "50",
 			cy: "50",
 			r: "42",
 			fill: "none"
-		}, null, -1), i("circle", {
+		}, null, -1), a("circle", {
 			class: "m-progressbar__circle-value",
 			cx: "50",
 			cy: "50",
 			r: "42",
 			fill: "none",
-			"stroke-dasharray": w.value.circumference,
-			"stroke-dashoffset": _.value ? void 0 : w.value.offset
-		}, null, 8, f)])) : (c(), r("div", {
+			"stroke-dasharray": k.value.circumference,
+			"stroke-dashoffset": S.value ? void 0 : k.value.offset
+		}, null, 8, h)])) : (l(), i("div", {
 			key: 1,
 			class: "m-progressbar__value",
-			style: s(C.value)
-		}, [t[1] ||= i("div", {
+			style: c(O.value)
+		}, [t[1] ||= a("div", {
 			class: "m-progressbar__fill",
 			"aria-hidden": "true"
-		}, null, -1), a.showValue && !_.value ? (c(), r("span", p, l(T.value), 1)) : n("", !0)], 4)), v.value && a.showValue && !_.value ? (c(), r("span", m, l(T.value), 1)) : n("", !0)], 14, u));
+		}, null, -1), o.showValue && !S.value ? (l(), i("span", g, u(A.value), 1)) : r("", !0)], 4)), C.value && o.showValue && !S.value ? (l(), i("span", _, u(A.value), 1)) : r("", !0)], 16, p));
 	}
 });
 //#endregion
-export { h as MProgressBar };
+export { v as MProgressBar };

package/dist/progress-bar/style.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
     width: 100%;
 }
 
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible,
 .m-select--invalid.m-select--open,
+.m-select--invalid:focus,
 .m-select--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
     opacity: var(--m-opacity-disabled);
 }
 
-/* Shared Naive-like hover/focus for remaining form triggers */
+/* Shared hover/focus for remaining form triggers */
 .m-inputotp__input:hover:not(:disabled):not(:focus),
-.m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
-.m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.m-cascadeselect:not(.m-cascadeselect--open)
+    .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
+.m-treeselect:not(.m-treeselect--open)
+    .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputtags:hover:not(.m-inputtags--disabled),
-.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
-.m-inplace__display:hover {
+.m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
+.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
+.m-inplace__display:hover:not(:focus-visible) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-inputotp__input:focus,
 .m-inputotp__input:focus-visible,
+.m-cascadeselect--open .m-cascadeselect__trigger,
+.m-cascadeselect__trigger:focus,
 .m-cascadeselect__trigger:focus-visible,
+.m-treeselect--open .m-treeselect__trigger,
+.m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
+.m-inputcolor__text:focus,
 .m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
 .m-splitbutton__trigger:focus-visible,
 .m-inplace__display:focus-visible,
 .m-pagination__button:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
+.m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
+.m-inputcolor--invalid .m-inputcolor__text:focus,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);

package/dist/progress-spinner/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../ProgressSpinner-B_OJG_0l.js";
+import { t as e } from "../ProgressSpinner-BQ1tLioO.js";
 import "./style.js";
 export { e as MProgressSpinner };

package/dist/progress-spinner/style.css

@@ -9,6 +9,10 @@
     --m-color-border: #d9d9d9;
     --m-color-split: #f0f0f0;
     --m-color-focus-ring: #1677ff;
+    /* Soft translucent control-outline ring (primary bg composited over container) */
+    --m-color-control-outline: rgba(5, 145, 255, 0.1);
+    --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
+    --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
     /* Control sizing: medium control height 32px */
     --m-control-height-small: 24px;
     --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
 
     --m-radius-control: 6px;
     --m-border-width: 1px;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-focus-outline-width: 2px;
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     --m-color-success: #52c41a;
     --m-color-info: #1677ff;
     --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
     animation-play-state: paused !important;
 }
 
-/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+/* Global density: scales spacing + control heights (WD tokens) */
 :root,
 [data-m-density="comfortable"] {
     --m-density-scale: 1;
@@ -348,12 +352,15 @@
     --m-color-border: #424242;
     --m-color-split: #303030;
     --m-color-focus-ring: #3c89e8;
-    --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
-    --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
-    --m-focus-shadow-warning: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
+    /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
+    --m-color-control-outline: rgba(23, 117, 249, 0.31);
+    --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
+    --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
+    --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
+    --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-danger);
+    --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
+        var(--m-color-control-outline-warning);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
     --m-color-success: #49aa19;
     --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
     width: 100%;
 }
 
+.m-textarea--invalid:focus,
 .m-textarea--invalid:focus-visible,
 .m-select--invalid.m-select--open,
+.m-select--invalid:focus,
 .m-select--invalid:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
     opacity: var(--m-opacity-disabled);
 }
 
-/* Shared Naive-like hover/focus for remaining form triggers */
+/* Shared hover/focus for remaining form triggers */
 .m-inputotp__input:hover:not(:disabled):not(:focus),
-.m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
-.m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.m-cascadeselect:not(.m-cascadeselect--open)
+    .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
+.m-treeselect:not(.m-treeselect--open)
+    .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-inputcolor__text:hover:not(:disabled):not(:focus),
-.m-inputtags:hover:not(.m-inputtags--disabled),
-.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
-.m-inplace__display:hover {
+.m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
+.m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
+.m-inplace__display:hover:not(:focus-visible) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-inputotp__input:focus,
 .m-inputotp__input:focus-visible,
+.m-cascadeselect--open .m-cascadeselect__trigger,
+.m-cascadeselect__trigger:focus,
 .m-cascadeselect__trigger:focus-visible,
+.m-treeselect--open .m-treeselect__trigger,
+.m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
+.m-inputcolor__text:focus,
 .m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
 .m-splitbutton__trigger:focus-visible,
 .m-inplace__display:focus-visible,
 .m-pagination__button:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
+.m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
+.m-inputcolor--invalid .m-inputcolor__text:focus,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);

package/dist/qr-code/index.js

@@ -1,9 +1,9 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../Button-TaJ0LKtP.js";
-import { t as r } from "../ProgressSpinner-B_OJG_0l.js";
+import { t as n } from "../Button-BaYLh91a.js";
+import { t as r } from "../ProgressSpinner-BQ1tLioO.js";
 import { t as i } from "../resolveCssColor-_FEXlI02.js";
-import { n as a } from "../locale-Dnk0UIie.js";
+import { n as a } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeProps as h, onMounted as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, watch as C, withCtx as w } from "vue";
 //#region src/components/QRCode/qrcodegen.ts