morya-ui 0.4.0 → 0.4.2

package/dist/table/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);
@@ -1667,12 +1686,13 @@
         opacity var(--m-motion-fast) var(--m-motion-ease);
 }
 
-.m-pagination__select:hover:not(:disabled) {
+.m-pagination__select:hover:not(:disabled):not(:focus) {
     border-color: var(--m-color-primary-hover);
 }
 
+.m-pagination__select:focus,
 .m-pagination__select:focus-visible {
-    border-color: var(--m-color-primary-hover);
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
@@ -2131,6 +2151,15 @@
     text-align: right;
 }
 
+/* Cell content lives in a flex box, so text-align alone cannot move it. */
+.m-table__cell--center > .m-table__cell-inner {
+    justify-content: center;
+}
+
+.m-table__cell--right > .m-table__cell-inner {
+    justify-content: flex-end;
+}
+
 .m-table__cell-inner {
     box-sizing: border-box;
     display: flex;

package/dist/tabs/index.js

@@ -2,7 +2,7 @@ import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../useMId-BXFYayPP.js";
 import { t as n } from "../Icon-od9Ob-Ay.js";
 import { t as r } from "../Scrollbar-DTeJ8P5b.js";
-import { n as i } from "../locale-Dnk0UIie.js";
+import { n as i } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, watch as w, withCtx as T, withModifiers as E } from "vue";
 //#region src/components/Tabs/Tabs.vue?vue&type=script&setup=true&lang.ts

package/dist/tabs/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/tag/index.js

@@ -1,16 +1,18 @@
-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 { n as i } from "../locale-Dnk0UIie.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { r as t, t as n } from "../types-DGuu4Eg4.js";
+import { t as r } from "../Icon-od9Ob-Ay.js";
+import { o as i } from "../config-CB_TiIvg.js";
+import { n as a } from "../locale-CR2PIaxt.js";
 import "./style.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _ } from "vue";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useAttrs as v } from "vue";
 //#region src/components/Tag/Tag.vue?vue&type=script&setup=true&lang.ts
-var v = [
+var y = [
 	"role",
 	"tabindex",
 	"aria-pressed",
 	"aria-disabled"
-], y = ["disabled", "aria-label"], b = /* @__PURE__ */ d({
+], b = ["disabled", "aria-label"], x = /* @__PURE__ */ f({
+	inheritAttrs: !1,
 	__name: "Tag",
 	props: {
 		value: {},
@@ -41,72 +43,73 @@ var v = [
 		checked: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		pt: {}
 	},
 	emits: [
 		"close",
 		"update:checked",
 		"change"
 	],
-	setup(d, { emit: b }) {
-		let x = d, S = b, C = i(), w = r("Tag", () => x.size), T = a(() => e(w.value)), E = a(() => t(x.severity) ?? "primary"), D = a(() => x.closable && !x.checkable), O = a(() => [
+	setup(f, { emit: x }) {
+		let S = f, C = x, w = v(), { rootAttrs: T } = e(w, () => S.pt), E = a(), D = i("Tag", () => S.size), O = o(() => t(D.value)), k = o(() => n(S.severity) ?? "primary"), A = o(() => S.closable && !S.checkable), j = o(() => [
 			"m-tag",
-			`m-tag--${E.value}`,
-			`m-tag--${w.value}`,
+			`m-tag--${k.value}`,
+			`m-tag--${D.value}`,
 			{
-				"m-tag--rounded": x.rounded,
-				"m-tag--bordered": x.bordered && !x.checkable,
-				"m-tag--closable": D.value,
-				"m-tag--disabled": x.disabled,
-				"m-tag--custom": !!x.color && !x.checkable,
-				"m-tag--checkable": x.checkable,
-				"m-tag--checked": x.checkable && x.checked
+				"m-tag--rounded": S.rounded,
+				"m-tag--bordered": S.bordered && !S.checkable,
+				"m-tag--closable": A.value,
+				"m-tag--disabled": S.disabled,
+				"m-tag--custom": !!S.color && !S.checkable,
+				"m-tag--checkable": S.checkable,
+				"m-tag--checked": S.checkable && S.checked
 			}
-		]), k = a(() => x.color && !x.checkable ? { "--m-tag-color": x.color } : void 0);
-		function A(e) {
-			x.disabled || (e.stopPropagation(), S("close", e));
+		]), M = o(() => S.color && !S.checkable ? { "--m-tag-color": S.color } : void 0);
+		function N(e) {
+			S.disabled || (e.stopPropagation(), C("close", e));
 		}
-		function j(e) {
-			if (!x.checkable || x.disabled || e.target?.closest?.(".m-tag__close")) return;
-			let t = !x.checked;
-			S("update:checked", t), S("change", t);
+		function P(e) {
+			if (!S.checkable || S.disabled || e.target?.closest?.(".m-tag__close")) return;
+			let t = !S.checked;
+			C("update:checked", t), C("change", t);
 		}
-		function M(e) {
-			if (!x.checkable || x.disabled || e.key !== "Enter" && e.key !== " ") return;
+		function F(e) {
+			if (!S.checkable || S.disabled || e.key !== "Enter" && e.key !== " ") return;
 			e.preventDefault();
-			let t = !x.checked;
-			S("update:checked", t), S("change", t);
+			let t = !S.checked;
+			C("update:checked", t), C("change", t);
 		}
-		return (e, t) => (m(), c("span", {
-			class: f(O.value),
-			style: p(k.value),
-			role: d.checkable ? "button" : void 0,
-			tabindex: d.checkable && !d.disabled ? 0 : void 0,
-			"aria-pressed": d.checkable ? d.checked : void 0,
-			"aria-disabled": d.checkable && d.disabled ? !0 : void 0,
-			onClick: j,
-			onKeydown: M
-		}, [
-			d.icon ? (m(), o(n, {
+		return (e, t) => (m(), l("span", p(_(T), {
+			class: j.value,
+			style: M.value,
+			role: f.checkable ? "button" : void 0,
+			tabindex: f.checkable && !f.disabled ? 0 : void 0,
+			"aria-pressed": f.checkable ? f.checked : void 0,
+			"aria-disabled": f.checkable && f.disabled ? !0 : void 0,
+			onClick: P,
+			onKeydown: F
+		}), [
+			f.icon ? (m(), s(r, {
 				key: 0,
 				class: "m-tag__icon",
-				name: d.icon,
-				size: T.value
-			}, null, 8, ["name", "size"])) : s("", !0),
-			h(e.$slots, "default", {}, () => [l(g(d.value), 1)]),
-			D.value ? (m(), c("button", {
+				name: f.icon,
+				size: O.value
+			}, null, 8, ["name", "size"])) : c("", !0),
+			h(e.$slots, "default", {}, () => [u(g(f.value), 1)]),
+			A.value ? (m(), l("button", {
 				key: 1,
 				type: "button",
 				class: "m-tag__close",
-				disabled: d.disabled,
-				"aria-label": _(C).close,
-				onClick: A
-			}, [u(n, {
+				disabled: f.disabled,
+				"aria-label": _(E).close,
+				onClick: N
+			}, [d(r, {
 				name: "close",
-				size: T.value
-			}, null, 8, ["size"])], 8, y)) : s("", !0)
-		], 46, v));
+				size: O.value
+			}, null, 8, ["size"])], 8, b)) : c("", !0)
+		], 16, y));
 	}
 });
 //#endregion
-export { b as MTag };
+export { x as MTag };

package/dist/tag/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);
@@ -1236,11 +1255,11 @@
 }
 
 .m-tag {
-    --m-tag-icon-size: 0.75rem;
-    --m-tag-padding-block: 0;
+    --m-tag-icon-size: 0.875rem;
+    --m-tag-padding-block: var(--m-space-1);
     --m-tag-padding-inline: var(--m-space-2);
     --m-tag-close-gap: calc(var(--m-space-1) - var(--m-border-width));
-    --m-tag-line-height: 1.6667;
+    --m-tag-line-height: 1.4286;
     align-items: center;
     background: color-mix(in srgb, var(--m-color-primary) 12%, transparent);
     border: var(--m-border-width) solid transparent;
@@ -1249,7 +1268,7 @@
     color: var(--m-color-primary);
     display: inline-flex;
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-xs);
+    font-size: var(--m-font-size-sm);
     font-weight: 400;
     gap: var(--m-space-1);
     height: auto;
@@ -1321,17 +1340,19 @@
 }
 
 .m-tag--small {
-    --m-tag-icon-size: 0.625rem;
+    --m-tag-icon-size: 0.75rem;
     --m-tag-padding-block: 0;
-    --m-tag-padding-inline: var(--m-space-1);
+    --m-tag-padding-inline: var(--m-space-2);
+    --m-tag-line-height: 1.6667;
     font-size: var(--m-tag-font-size-small);
 }
 
 .m-tag--large {
-    --m-tag-icon-size: 0.875rem;
+    --m-tag-icon-size: 1rem;
     --m-tag-padding-block: var(--m-space-1);
     --m-tag-padding-inline: var(--m-space-3);
-    font-size: var(--m-font-size-sm);
+    --m-tag-line-height: 1.375;
+    font-size: var(--m-font-size-md);
 }
 
 .m-tag--bordered {

package/dist/terminal/index.js

@@ -1,6 +1,6 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../ScrollBody-5hUnHj_M.js";
-import { n } from "../locale-Dnk0UIie.js";
+import { n } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, nextTick as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useAttrs as _, vModelText as v, withCtx as y, withDirectives as b, withModifiers as x } from "vue";
 //#region src/components/Terminal/Terminal.vue?vue&type=script&setup=true&lang.ts