morya-ui 0.4.0 → 0.4.2

package/dist/watermark/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "morya-ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Open-source Vue 3 component library with design tokens, themes, and interactive docs.",
   "license": "MIT",
   "homepage": "https://morya-space.github.io/morya-ui/",

package/dist/Button-TaJ0LKtP.js

@@ -1,234 +0,0 @@
-import { r as e, t } from "./types-DGuu4Eg4.js";
-import { t as n } from "./Icon-od9Ob-Ay.js";
-import { o as r } from "./config-COgrsSV2.js";
-import { Comment as i, Fragment as a, Text as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, useSlots as S } from "vue";
-//#region src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
-var C = [
-	"type",
-	"disabled",
-	"autofocus",
-	"aria-busy",
-	"aria-label"
-], w = {
-	key: 2,
-	class: "m-button__label"
-}, T = 560, E = 280, D = /* @__PURE__ */ p({
-	__name: "Button",
-	props: {
-		label: {},
-		icon: {},
-		iconPos: { default: "left" },
-		iconOnly: {
-			type: Boolean,
-			default: !1
-		},
-		severity: {},
-		color: {},
-		raised: {
-			type: Boolean,
-			default: !1
-		},
-		rounded: {
-			type: Boolean,
-			default: !1
-		},
-		shape: { default: void 0 },
-		text: {
-			type: Boolean,
-			default: !1
-		},
-		outlined: {
-			type: Boolean,
-			default: !1
-		},
-		dashed: {
-			type: Boolean,
-			default: !1
-		},
-		link: {
-			type: Boolean,
-			default: !1
-		},
-		underline: {
-			type: Boolean,
-			default: !0
-		},
-		ghost: {
-			type: Boolean,
-			default: !1
-		},
-		quaternary: {
-			type: Boolean,
-			default: !1
-		},
-		plain: {
-			type: Boolean,
-			default: !1
-		},
-		variant: {},
-		size: {},
-		fluid: {
-			type: Boolean,
-			default: !1
-		},
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		badge: {},
-		badgeSeverity: { default: null },
-		autofocus: {
-			type: Boolean,
-			default: !1
-		},
-		nativeType: { default: "button" },
-		ariaLabel: {},
-		ripple: {
-			type: Boolean,
-			default: !1
-		},
-		press: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	emits: ["click"],
-	setup(p, { expose: D, emit: ee }) {
-		let O = p, k = ee, A = S(), j = v(null), M = v(null), N = /* @__PURE__ */ new Set(), te = s(() => !!A.default?.().some((e) => Q(e))), P = s(() => te.value || !!O.label?.trim()), F = s(() => O.outlined || O.variant === "outlined"), I = s(() => O.dashed || O.variant === "dashed"), L = s(() => O.text || O.variant === "text"), R = s(() => O.link || O.variant === "link"), z = s(() => O.ghost || O.variant === "ghost"), B = s(() => O.quaternary || O.variant === "quaternary"), V = s(() => O.fluid), H = s(() => O.shape ? O.shape : O.rounded ? "round" : "default"), U = r("Button", () => O.size), W = s(() => e(U.value)), G = s(() => O.iconOnly || !P.value && !!(O.icon || A.icon || O.loading)), K = s(() => t(O.severity) ?? "primary"), q = s(() => typeof O.icon == "string" ? O.icon : void 0), J = s(() => typeof O.icon == "string" || !O.icon ? void 0 : O.icon), Y = s(() => [
-			"m-button",
-			`m-button--${K.value}`,
-			`m-button--${U.value}`,
-			`m-button--icon-${O.iconPos}`,
-			`m-button--shape-${H.value}`,
-			{
-				"m-button--raised": O.raised,
-				"m-button--rounded": H.value === "round" || H.value === "circle",
-				"m-button--text": L.value,
-				"m-button--outlined": F.value && !I.value,
-				"m-button--dashed": I.value,
-				"m-button--link": R.value,
-				"m-button--link-underline": R.value && O.underline,
-				"m-button--ghost": z.value,
-				"m-button--quaternary": B.value,
-				"m-button--plain": O.plain,
-				"m-button--fluid": V.value,
-				"m-button--loading": O.loading,
-				"m-button--icon-only": G.value,
-				"m-button--custom": !!O.color,
-				"m-button--ripple": O.ripple,
-				"m-button--press": O.press
-			}
-		]), X = s(() => O.color ? { "--m-button-color": O.color } : void 0), Z = s(() => ["m-button__badge", O.badgeSeverity ? `m-button__badge--${t(O.badgeSeverity)}` : "m-button__badge--contrast"]);
-		function Q(e) {
-			if (e == null || typeof e == "boolean") return !1;
-			if (typeof e == "string" || typeof e == "number") return String(e).trim().length > 0;
-			if (Array.isArray(e)) return e.some((e) => Q(e));
-			if (typeof e == "object" && "type" in e) {
-				let t = e;
-				return t.type === i ? !1 : t.type === o ? String(t.children ?? "").trim().length > 0 : t.type !== a || Q(t.children);
-			}
-			return !1;
-		}
-		function ne() {
-			return !O.ripple || typeof document > "u" || document.documentElement.dataset.mMotion === "none";
-		}
-		function re() {
-			return typeof document > "u" ? T : document.documentElement.dataset.mMotion === "reduced" ? E : T;
-		}
-		function $(e, t, n = !1) {
-			if (ne()) return;
-			let r = j.value, i = M.value;
-			if (!r || !i) return;
-			let a = r.getBoundingClientRect(), o = Math.ceil(Math.hypot(a.width, a.height) * 2), s = n ? a.width / 2 : e - a.left, c = n ? a.height / 2 : t - a.top, l = document.createElement("span");
-			l.className = "m-button__ripple-wave", l.style.width = `${o}px`, l.style.height = `${o}px`, l.style.left = `${s - o / 2}px`, l.style.top = `${c - o / 2}px`, i.appendChild(l);
-			let u = re(), d = () => {
-				l.remove();
-			};
-			if (typeof l.animate == "function") {
-				let e = l.animate([
-					{
-						transform: "scale(0)",
-						opacity: .42
-					},
-					{
-						transform: "scale(0.55)",
-						opacity: .22,
-						offset: .55
-					},
-					{
-						transform: "scale(1)",
-						opacity: 0
-					}
-				], {
-					duration: u,
-					easing: "cubic-bezier(0.2, 0, 0, 1)",
-					fill: "forwards"
-				});
-				N.add(e), e.finished.then(() => {
-					N.delete(e), d();
-				}).catch(d);
-				return;
-			}
-			l.classList.add("m-button__ripple-wave--fallback"), window.setTimeout(d, u);
-		}
-		function ie(e) {
-			O.disabled || O.loading || e.button === 0 && $(e.clientX, e.clientY);
-		}
-		function ae(e) {
-			O.disabled || O.loading || (e.detail === 0 && $(0, 0, !0), k("click", e));
-		}
-		function oe() {
-			j.value?.focus();
-		}
-		return g(() => {
-			for (let e of N) e.cancel();
-			N.clear();
-		}), D({
-			focus: oe,
-			ref: j
-		}), (e, t) => (_(), u("button", {
-			ref_key: "buttonElement",
-			ref: j,
-			class: m(Y.value),
-			style: h(X.value),
-			type: p.nativeType,
-			disabled: p.disabled || p.loading,
-			autofocus: p.autofocus || void 0,
-			"aria-busy": p.loading || void 0,
-			"aria-label": p.ariaLabel || (G.value ? p.label : void 0),
-			onPointerdown: ie,
-			onClick: ae
-		}, [
-			p.ripple ? (_(), u("span", {
-				key: 0,
-				ref_key: "rippleLayer",
-				ref: M,
-				class: "m-button__ripple",
-				"aria-hidden": "true"
-			}, null, 512)) : l("", !0),
-			p.loading || p.icon || e.$slots.icon ? (_(), u("span", {
-				key: 1,
-				class: m(["m-button__icon", { "m-button__icon--loading": p.loading }]),
-				"aria-hidden": "true"
-			}, [p.loading ? y(e.$slots, "loadingicon", {}, () => [t[0] ||= d("span", { class: "m-button__spinner" }, null, -1)], void 0, 0) : y(e.$slots, "icon", { class: "m-button__icon-slot" }, () => [q.value ? (_(), c(n, {
-				key: 0,
-				name: q.value,
-				size: W.value
-			}, null, 8, ["name", "size"])) : J.value ? (_(), c(b(J.value), {
-				key: 1,
-				class: "m-button__icon-graphic"
-			})) : l("", !0)], void 0, 1)], 2)) : l("", !0),
-			P.value && !p.iconOnly ? (_(), u("span", w, [y(e.$slots, "default", {}, () => [f(x(p.label), 1)])])) : l("", !0),
-			p.badge != null && p.badge !== "" ? (_(), u("span", {
-				key: 3,
-				class: m(Z.value)
-			}, x(p.badge), 3)) : l("", !0)
-		], 46, C));
-	}
-});
-//#endregion
-export { D as t };

package/dist/locale-Dnk0UIie.js

@@ -1,21 +0,0 @@
-import { c as e, u as t } from "./config-COgrsSV2.js";
-import { computed as n } from "vue";
-//#region src/locale/index.ts
-function r(e, t) {
-	return e.replace(/\{(\w+)\}/g, (e, n) => String(t[n] ?? ""));
-}
-function i(e) {
-	return {
-		...t,
-		...e,
-		name: e?.name ?? t.name,
-		weekdays: e?.weekdays?.length === 7 ? e.weekdays : t.weekdays,
-		monthNames: e?.monthNames?.length === 12 ? e.monthNames : t.monthNames
-	};
-}
-function a() {
-	let t = e();
-	return n(() => i(t.value.locale));
-}
-//#endregion
-export { a as n, r as t };