morya-ui 0.4.0 → 0.4.2

package/dist/knob/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/label/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/layout/index.js

@@ -2,7 +2,7 @@ import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
 import { t as n } from "../Scrollbar-DTeJ8P5b.js";
 import { r, t as i } from "../responsive-DA5bxylA.js";
-import { n as a } from "../locale-Dnk0UIie.js";
+import { n as a } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, inject as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, openBlock as _, provide as v, ref as y, renderSlot as b, toValue as x, unref as S, useAttrs as C, watch as w, withCtx as T } from "vue";
 //#region src/components/Layout/context.ts

package/dist/layout/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);
@@ -1436,7 +1455,7 @@
 
 .m-layout__scroll--has-sider,
 .m-layout__scroll-view--has-sider {
-    /* direction set inline (matches naive hasSiderStyle) */
+    /* direction set inline */
     align-items: stretch;
     flex-wrap: nowrap;
 }

package/dist/list/index.js

@@ -1,8 +1,8 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Loading-BPpR-jGa.js";
-import { t as n } from "../Pagination-BkPBWEQq.js";
-import { t as r } from "../Empty-iNcc0G-q.js";
-import { o as i } from "../config-COgrsSV2.js";
+import { t } from "../Loading-BK4dQPCS.js";
+import { t as n } from "../Pagination-tdrlaZ3u.js";
+import { t as r } from "../Empty-2_f_FgyK.js";
+import { o as i } from "../config-CB_TiIvg.js";
 import "./style.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, mergeProps as h, normalizeClass as g, openBlock as _, provide as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, toRef as w, unref as T, useAttrs as E, useSlots as D, watch as O, withCtx as k } from "vue";
 //#region src/components/List/types.ts

package/dist/list/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);
@@ -1814,12 +1833,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;
 }

package/dist/listbox/index.js

@@ -4,8 +4,8 @@ import { t as n } from "../useFieldFeedback-C5qIqYMK.js";
 import { t as r } from "../Scrollbar-DTeJ8P5b.js";
 import { t as i } from "../VirtualScroller-CHoFCmpP.js";
 import { t as a } from "../useMenuKeyboard-BedmYE4W.js";
-import { o } from "../config-COgrsSV2.js";
-import { n as s } from "../locale-Dnk0UIie.js";
+import { o } from "../config-CB_TiIvg.js";
+import { n as s } from "../locale-CR2PIaxt.js";
 import "./style.js";
 import { Fragment as ee, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as te, defineComponent as m, mergeProps as ne, nextTick as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, vModelText as w, watch as re, withCtx as T, withDirectives as ie } from "vue";
 //#region src/components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts