morya-ui 0.4.0 → 0.4.2

package/dist/toggle-button/index.js

@@ -1,6 +1,6 @@
 import { t as e } from "../Icon-od9Ob-Ay.js";
 import { t } from "../icon-COrt_N8A.js";
-import { o as n } from "../config-COgrsSV2.js";
+import { o as n } from "../config-CB_TiIvg.js";
 import "./style.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f } from "vue";
 //#region src/components/ToggleButton/ToggleButton.vue?vue&type=script&setup=true&lang.ts

package/dist/toggle-button/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);
@@ -1279,7 +1298,7 @@
 
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--disabled):not(
         .m-togglebutton--checked
-    ) {
+    ):not(:focus-visible) {
     background: color-mix(in srgb, var(--m-color-text-muted) 22%, var(--m-color-surface));
     border-color: var(--m-color-primary-hover);
 }
@@ -1302,6 +1321,7 @@
 }
 
 .m-togglebutton:focus-visible {
+    border-color: var(--m-color-primary);
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }

package/dist/toolbar/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/tooltip/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../Tooltip-BJp-ZMqQ.js";
+import { t as e } from "../Tooltip-DKsXxU_B.js";
 import "./style.js";
 export { e as MTooltip };

package/dist/tooltip/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/tour/index.js

@@ -2,9 +2,9 @@ import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { n as t } from "../overlay-oR-5MDuE.js";
 import { t as ee } from "../overlayPlacement-qwEJPVS4.js";
 import { t as n } from "../Icon-od9Ob-Ay.js";
-import { t as r } from "../Button-TaJ0LKtP.js";
-import { c as te } from "../config-COgrsSV2.js";
-import { n as ne } from "../locale-Dnk0UIie.js";
+import { t as r } from "../Button-BaYLh91a.js";
+import { l as te } from "../config-CB_TiIvg.js";
+import { n as ne } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as re, openBlock as _, ref as v, toDisplayString as y, unref as b, useAttrs as x, watch as S, withCtx as C } from "vue";
 //#region src/components/Tour/Tour.vue?vue&type=script&setup=true&lang.ts
@@ -193,20 +193,19 @@ var w = ["aria-label"], T = {
 			l("div", k, [l("span", ie, y(z.value + 1) + " / " + y(B.value), 1), l("div", ae, [z.value > 0 ? (_(), o(r, {
 				key: 0,
 				size: "small",
-				severity: "secondary",
-				variant: "text",
+				type: "text",
 				onClick: Z
 			}, {
 				default: C(() => [u(y(V.value?.prevButtonProps?.children ?? G.value.prev), 1)]),
 				_: 1
 			})) : s("", !0), d(r, {
 				size: "small",
-				severity: H.value === "primary" ? "primary" : "secondary",
-				onClick: Q
+				onClick: Q,
+				type: H.value === "primary" ? "primary" : "default"
 			}, {
 				default: C(() => [u(y($.value ? V.value?.nextButtonProps?.children ?? G.value.finish : V.value?.nextButtonProps?.children ?? G.value.next), 1)]),
 				_: 1
-			}, 8, ["severity"])])])
+			}, 8, ["type"])])])
 		], 6)], 16)], 8, ["to", "disabled"])) : s("", !0);
 	}
 });