morya-ui 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (195) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/dist/{Pagination-BkPBWEQq.js → Pagination-DLphD6LC.js} +1 -1
  3. package/dist/{Select-DzfyO0FE.js → Select-DxMlpgc5.js} +4 -2
  4. package/dist/accordion/style.css +39 -20
  5. package/dist/affix/style.css +39 -20
  6. package/dist/alert/style.css +39 -20
  7. package/dist/anchor/style.css +39 -20
  8. package/dist/auto-complete/style.css +42 -21
  9. package/dist/avatar/style.css +39 -20
  10. package/dist/badge/index.js +29 -28
  11. package/dist/badge/style.css +39 -20
  12. package/dist/block-ui/style.css +39 -20
  13. package/dist/breadcrumb/style.css +39 -20
  14. package/dist/button/style.css +40 -21
  15. package/dist/calendar/index.js +1 -1
  16. package/dist/calendar/style.css +49 -24
  17. package/dist/card/style.css +40 -21
  18. package/dist/carousel/index.js +313 -119
  19. package/dist/carousel/style.css +1305 -117
  20. package/dist/carousel/style.js +1 -1
  21. package/dist/cascade-select/style.css +54 -22
  22. package/dist/checkbox/style.css +41 -21
  23. package/dist/chip/index.js +39 -36
  24. package/dist/chip/style.css +39 -20
  25. package/dist/command-menu/style.css +39 -20
  26. package/dist/component-registry.d.ts.map +1 -1
  27. package/dist/components/Badge/Badge.vue.d.ts.map +1 -1
  28. package/dist/components/Badge/types.d.ts +3 -0
  29. package/dist/components/Badge/types.d.ts.map +1 -1
  30. package/dist/components/Button/styles.css +1 -1
  31. package/dist/components/Card/styles.css +1 -1
  32. package/dist/components/Carousel/Carousel.vue.d.ts +41 -11
  33. package/dist/components/Carousel/Carousel.vue.d.ts.map +1 -1
  34. package/dist/components/Carousel/CarouselItem.vue.d.ts +16 -0
  35. package/dist/components/Carousel/CarouselItem.vue.d.ts.map +1 -0
  36. package/dist/components/Carousel/context.d.ts +10 -0
  37. package/dist/components/Carousel/context.d.ts.map +1 -0
  38. package/dist/components/Carousel/index.d.ts +2 -1
  39. package/dist/components/Carousel/index.d.ts.map +1 -1
  40. package/dist/components/Carousel/styles.css +250 -49
  41. package/dist/components/Carousel/types.d.ts +64 -9
  42. package/dist/components/Carousel/types.d.ts.map +1 -1
  43. package/dist/components/CascadeSelect/styles.css +12 -1
  44. package/dist/components/Checkbox/styles.css +2 -1
  45. package/dist/components/Chip/Chip.vue.d.ts.map +1 -1
  46. package/dist/components/Chip/types.d.ts +3 -0
  47. package/dist/components/Chip/types.d.ts.map +1 -1
  48. package/dist/components/DatePicker/styles.css +2 -1
  49. package/dist/components/Divider/Divider.vue.d.ts.map +1 -1
  50. package/dist/components/Divider/types.d.ts +3 -0
  51. package/dist/components/Divider/types.d.ts.map +1 -1
  52. package/dist/components/IconField/styles.css +1 -1
  53. package/dist/components/Input/styles.css +20 -8
  54. package/dist/components/InputColor/styles.css +10 -0
  55. package/dist/components/InputNumber/styles.css +2 -1
  56. package/dist/components/InputOtp/styles.css +8 -0
  57. package/dist/components/InputPassword/styles.css +1 -1
  58. package/dist/components/InputTags/styles.css +9 -0
  59. package/dist/components/Layout/styles.css +1 -1
  60. package/dist/components/Listbox/styles.css +3 -0
  61. package/dist/components/Mentions/styles.css +13 -4
  62. package/dist/components/Pagination/styles.css +3 -2
  63. package/dist/components/ProgressBar/ProgressBar.vue.d.ts.map +1 -1
  64. package/dist/components/ProgressBar/types.d.ts +3 -0
  65. package/dist/components/ProgressBar/types.d.ts.map +1 -1
  66. package/dist/components/Radio/styles.css +2 -1
  67. package/dist/components/Result/styles.css +1 -1
  68. package/dist/components/Select/Select.vue.d.ts.map +1 -1
  69. package/dist/components/Select/styles.css +8 -3
  70. package/dist/components/SelectButton/styles.css +2 -0
  71. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  72. package/dist/components/Tag/styles.css +10 -8
  73. package/dist/components/Tag/types.d.ts +3 -0
  74. package/dist/components/Tag/types.d.ts.map +1 -1
  75. package/dist/components/Terminal/styles.css +1 -0
  76. package/dist/components/Textarea/styles.css +18 -7
  77. package/dist/components/ToggleButton/styles.css +2 -1
  78. package/dist/components/Tree/Tree.vue.d.ts +1 -1
  79. package/dist/components/TreeSelect/styles.css +12 -1
  80. package/dist/config-provider/index.js +140 -119
  81. package/dist/config-provider/style.css +60 -29
  82. package/dist/confirm-dialog/style.css +40 -21
  83. package/dist/confirm-popup/style.css +40 -21
  84. package/dist/context-menu/style.css +39 -20
  85. package/dist/data-view/index.js +1 -1
  86. package/dist/data-view/style.css +42 -22
  87. package/dist/date-picker/style.css +41 -21
  88. package/dist/descriptions/style.css +39 -20
  89. package/dist/dialog/style.css +40 -21
  90. package/dist/divider/index.js +25 -22
  91. package/dist/divider/style.css +39 -20
  92. package/dist/dock/style.css +39 -20
  93. package/dist/drawer/style.css +39 -20
  94. package/dist/dropdown/style.css +39 -20
  95. package/dist/empty/style.css +39 -20
  96. package/dist/fieldset/style.css +39 -20
  97. package/dist/file-upload/style.css +39 -20
  98. package/dist/flex/index.js +7 -7
  99. package/dist/flex/style.css +39 -20
  100. package/dist/float-label/style.css +39 -20
  101. package/dist/fluid/style.css +39 -20
  102. package/dist/form/style.css +39 -20
  103. package/dist/gallery/style.css +39 -20
  104. package/dist/grid/index.js +5 -5
  105. package/dist/grid/style.css +39 -20
  106. package/dist/icon/style.css +39 -20
  107. package/dist/icon-field/style.css +60 -29
  108. package/dist/image/style.css +39 -20
  109. package/dist/index.d.ts +2 -1
  110. package/dist/index.d.ts.map +1 -1
  111. package/dist/index.js +4723 -4496
  112. package/dist/inplace/style.css +39 -20
  113. package/dist/input/style.css +59 -28
  114. package/dist/input-color/style.css +49 -20
  115. package/dist/input-group/style.css +39 -20
  116. package/dist/input-number/style.css +41 -21
  117. package/dist/input-otp/style.css +47 -20
  118. package/dist/input-password/style.css +40 -21
  119. package/dist/input-tags/style.css +48 -20
  120. package/dist/knob/style.css +39 -20
  121. package/dist/label/style.css +39 -20
  122. package/dist/layout/style.css +40 -21
  123. package/dist/list/index.js +1 -1
  124. package/dist/list/style.css +42 -22
  125. package/dist/listbox/style.css +42 -20
  126. package/dist/loading/style.css +39 -20
  127. package/dist/mega-menu/style.css +39 -20
  128. package/dist/mentions/style.css +52 -24
  129. package/dist/menu/style.css +39 -20
  130. package/dist/menubar/style.css +39 -20
  131. package/dist/message/style.css +39 -20
  132. package/dist/meter-group/style.css +39 -20
  133. package/dist/order-list/style.css +39 -20
  134. package/dist/page/style.css +41 -22
  135. package/dist/pagination/index.js +1 -1
  136. package/dist/pagination/style.css +50 -25
  137. package/dist/panel/style.css +39 -20
  138. package/dist/pick-list/style.css +39 -20
  139. package/dist/popover/style.css +39 -20
  140. package/dist/progress-bar/index.js +38 -35
  141. package/dist/progress-bar/style.css +39 -20
  142. package/dist/progress-spinner/style.css +39 -20
  143. package/dist/qr-code/style.css +40 -21
  144. package/dist/radio/style.css +41 -21
  145. package/dist/rating/style.css +39 -20
  146. package/dist/resolver-map.d.ts.map +1 -1
  147. package/dist/resolver.js +1 -0
  148. package/dist/result/style.css +40 -21
  149. package/dist/scroll-top/style.css +39 -20
  150. package/dist/scrollbar/style.css +39 -20
  151. package/dist/segmented/style.css +39 -20
  152. package/dist/select/index.js +1 -1
  153. package/dist/select/style.css +50 -24
  154. package/dist/select-button/style.css +41 -20
  155. package/dist/shared/styles/select-overlay.css +3 -1
  156. package/dist/sidebar/style.css +39 -20
  157. package/dist/skeleton/style.css +39 -20
  158. package/dist/slider/style.css +39 -20
  159. package/dist/space/index.js +7 -7
  160. package/dist/space/style.css +39 -20
  161. package/dist/speed-dial/style.css +39 -20
  162. package/dist/split-button/style.css +40 -21
  163. package/dist/splitter/style.css +39 -20
  164. package/dist/statistic/style.css +39 -20
  165. package/dist/status/style.css +39 -20
  166. package/dist/stepper/style.css +39 -20
  167. package/dist/styles/base.css +19 -7
  168. package/dist/styles.css +1 -1
  169. package/dist/switch/style.css +39 -20
  170. package/dist/table/index.js +1 -1
  171. package/dist/table/style.css +42 -22
  172. package/dist/tabs/style.css +39 -20
  173. package/dist/tag/index.js +57 -54
  174. package/dist/tag/style.css +49 -28
  175. package/dist/terminal/style.css +40 -20
  176. package/dist/textarea/style.css +57 -27
  177. package/dist/theme/color.d.ts +5 -0
  178. package/dist/theme/color.d.ts.map +1 -1
  179. package/dist/theme/derive.d.ts.map +1 -1
  180. package/dist/theme/seed.d.ts +2 -2
  181. package/dist/theme/styles.css +20 -13
  182. package/dist/tiered-menu/style.css +39 -20
  183. package/dist/time-picker/style.css +41 -21
  184. package/dist/timeline/style.css +39 -20
  185. package/dist/toast/style.css +40 -21
  186. package/dist/toggle-button/style.css +41 -21
  187. package/dist/toolbar/style.css +39 -20
  188. package/dist/tooltip/style.css +39 -20
  189. package/dist/tour/style.css +40 -21
  190. package/dist/tree/style.css +41 -21
  191. package/dist/tree-select/style.css +56 -23
  192. package/dist/typography/style.css +57 -27
  193. package/dist/virtual-scroller/style.css +39 -20
  194. package/dist/watermark/style.css +39 -20
  195. package/package.json +1 -1
package/dist/config-provider/style.css CHANGED
@@ -9,6 +9,10 @@
9
9
  --m-color-border: #d9d9d9;
10
10
  --m-color-split: #f0f0f0;
11
11
  --m-color-focus-ring: #1677ff;
12
+ /* Soft translucent control-outline ring (primary bg composited over container) */
13
+ --m-color-control-outline: rgba(5, 145, 255, 0.1);
14
+ --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
15
+ --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
12
16
  /* Control sizing: medium control height 32px */
13
17
  --m-control-height-small: 24px;
14
18
  --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
22
26
 
23
27
  --m-radius-control: 6px;
24
28
  --m-border-width: 1px;
25
- --m-focus-shadow: 0 0 0 2px
26
- color-mix(in srgb, var(--m-color-primary) 45%, transparent);
27
- --m-focus-shadow-danger: 0 0 0 2px
28
- color-mix(in srgb, var(--m-color-danger) 45%, transparent);
29
- --m-focus-shadow-warning: 0 0 0 2px
30
- color-mix(in srgb, var(--m-color-warning) 45%, transparent);
29
+ --m-focus-outline-width: 2px;
30
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
31
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
32
+ var(--m-color-control-outline-danger);
33
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
34
+ var(--m-color-control-outline-warning);
31
35
  --m-color-success: #52c41a;
32
36
  --m-color-info: #1677ff;
33
37
  --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
253
257
  animation-play-state: paused !important;
254
258
  }
255
259
 
256
- /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
260
+ /* Global density: scales spacing + control heights (WD tokens) */
257
261
  :root,
258
262
  [data-m-density="comfortable"] {
259
263
  --m-density-scale: 1;
@@ -348,12 +352,15 @@
348
352
  --m-color-border: #424242;
349
353
  --m-color-split: #303030;
350
354
  --m-color-focus-ring: #3c89e8;
351
- --m-focus-shadow: 0 0 0 2px
352
- color-mix(in srgb, var(--m-color-primary) 50%, transparent);
353
- --m-focus-shadow-danger: 0 0 0 2px
354
- color-mix(in srgb, var(--m-color-danger) 50%, transparent);
355
- --m-focus-shadow-warning: 0 0 0 2px
356
- color-mix(in srgb, var(--m-color-warning) 50%, transparent);
355
+ /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
356
+ --m-color-control-outline: rgba(23, 117, 249, 0.31);
357
+ --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
358
+ --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
359
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
360
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
361
+ var(--m-color-control-outline-danger);
362
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
363
+ var(--m-color-control-outline-warning);
357
364
  /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
358
365
  --m-color-success: #49aa19;
359
366
  --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
893
900
  width: 100%;
894
901
  }
895
902
 
903
+ .m-textarea--invalid:focus,
896
904
  .m-textarea--invalid:focus-visible,
897
905
  .m-select--invalid.m-select--open,
906
+ .m-select--invalid:focus,
898
907
  .m-select--invalid:focus-visible {
899
908
  border-color: var(--m-color-danger);
900
909
  box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
1103
1112
  opacity: var(--m-opacity-disabled);
1104
1113
  }
1105
1114
 
1106
- /* Shared Naive-like hover/focus for remaining form triggers */
1115
+ /* Shared hover/focus for remaining form triggers */
1107
1116
  .m-inputotp__input:hover:not(:disabled):not(:focus),
1108
- .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
1109
- .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
1117
+ .m-cascadeselect:not(.m-cascadeselect--open)
1118
+ .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1119
+ .m-treeselect:not(.m-treeselect--open)
1120
+ .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1110
1121
  .m-inputcolor__text:hover:not(:disabled):not(:focus),
1111
- .m-inputtags:hover:not(.m-inputtags--disabled),
1112
- .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
1113
- .m-inplace__display:hover {
1122
+ .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
1123
+ .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
1124
+ .m-inplace__display:hover:not(:focus-visible) {
1114
1125
  border-color: var(--m-color-primary-hover);
1115
1126
  }
1116
1127
 
1128
+ .m-inputotp__input:focus,
1117
1129
  .m-inputotp__input:focus-visible,
1130
+ .m-cascadeselect--open .m-cascadeselect__trigger,
1131
+ .m-cascadeselect__trigger:focus,
1118
1132
  .m-cascadeselect__trigger:focus-visible,
1133
+ .m-treeselect--open .m-treeselect__trigger,
1134
+ .m-treeselect__trigger:focus,
1119
1135
  .m-treeselect__trigger:focus-visible,
1136
+ .m-inputcolor__text:focus,
1120
1137
  .m-inputcolor__text:focus-visible,
1121
1138
  .m-inputtags:focus-within,
1122
1139
  .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
1125
1142
  .m-splitbutton__trigger:focus-visible,
1126
1143
  .m-inplace__display:focus-visible,
1127
1144
  .m-pagination__button:focus-visible {
1128
- border-color: var(--m-color-primary-hover);
1145
+ border-color: var(--m-color-primary);
1129
1146
  box-shadow: var(--m-focus-shadow);
1130
1147
  outline: none;
1131
1148
  }
1132
1149
 
1150
+ .m-inputotp--invalid .m-inputotp__input:focus,
1133
1151
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
1134
1152
  .m-inputtags--invalid:focus-within,
1153
+ .m-inputcolor--invalid .m-inputcolor__text:focus,
1135
1154
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
1136
1155
  border-color: var(--m-color-danger);
1137
1156
  box-shadow: var(--m-focus-shadow-danger);
@@ -1249,7 +1268,7 @@
1249
1268
  transform: scale(0.97);
1250
1269
  }
1251
1270
 
1252
- /* Naive-style focus: soft glow, not outline-offset ring */
1271
+ /* Soft glow focus, not outline-offset ring */
1253
1272
  .m-button:focus {
1254
1273
  outline: none;
1255
1274
  }
@@ -2203,28 +2222,40 @@
2203
2222
  display: none;
2204
2223
  }
2205
2224
 
2206
- .m-input:focus {
2207
- outline: none;
2208
- }
2209
-
2210
- .m-input:hover:not(:disabled):not(:focus) {
2225
+ .m-input:hover:not(:disabled):not(:focus):not(.m-input--invalid):not(
2226
+ .m-input--warning
2227
+ ) {
2211
2228
  border-color: var(--m-color-primary-hover);
2212
2229
  }
2213
2230
 
2231
+ /* Outlined active state: border color + soft control-outline shadow */
2232
+ .m-input:focus,
2214
2233
  .m-input:focus-visible {
2215
- border-color: var(--m-color-primary-hover);
2234
+ border-color: var(--m-color-primary);
2216
2235
  box-shadow: var(--m-focus-shadow);
2217
- outline: none;
2236
+ outline: 0;
2218
2237
  }
2219
2238
 
2239
+ .m-input--invalid:hover:not(:disabled):not(:focus) {
2240
+ border-color: var(--m-color-danger);
2241
+ }
2242
+
2243
+ .m-input--invalid:focus,
2220
2244
  .m-input--invalid:focus-visible {
2221
2245
  border-color: var(--m-color-danger);
2222
2246
  box-shadow: var(--m-focus-shadow-danger);
2247
+ outline: 0;
2248
+ }
2249
+
2250
+ .m-input--warning:hover:not(:disabled):not(:focus) {
2251
+ border-color: var(--m-color-warning);
2223
2252
  }
2224
2253
 
2254
+ .m-input--warning:focus,
2225
2255
  .m-input--warning:focus-visible {
2226
2256
  border-color: var(--m-color-warning);
2227
2257
  box-shadow: var(--m-focus-shadow-warning);
2258
+ outline: 0;
2228
2259
  }
2229
2260
 
2230
2261
  .m-input-field {
@@ -2339,7 +2370,7 @@
2339
2370
  .m-input-field__control--prefixed:focus-within,
2340
2371
  .m-input-field__control--suffixed:focus-within,
2341
2372
  .m-input-field__control--clearable:focus-within {
2342
- border-color: var(--m-color-primary-hover);
2373
+ border-color: var(--m-color-primary);
2343
2374
  box-shadow: var(--m-focus-shadow);
2344
2375
  }
2345
2376
 
package/dist/confirm-dialog/style.css CHANGED
@@ -9,6 +9,10 @@
9
9
  --m-color-border: #d9d9d9;
10
10
  --m-color-split: #f0f0f0;
11
11
  --m-color-focus-ring: #1677ff;
12
+ /* Soft translucent control-outline ring (primary bg composited over container) */
13
+ --m-color-control-outline: rgba(5, 145, 255, 0.1);
14
+ --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
15
+ --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
12
16
  /* Control sizing: medium control height 32px */
13
17
  --m-control-height-small: 24px;
14
18
  --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
22
26
 
23
27
  --m-radius-control: 6px;
24
28
  --m-border-width: 1px;
25
- --m-focus-shadow: 0 0 0 2px
26
- color-mix(in srgb, var(--m-color-primary) 45%, transparent);
27
- --m-focus-shadow-danger: 0 0 0 2px
28
- color-mix(in srgb, var(--m-color-danger) 45%, transparent);
29
- --m-focus-shadow-warning: 0 0 0 2px
30
- color-mix(in srgb, var(--m-color-warning) 45%, transparent);
29
+ --m-focus-outline-width: 2px;
30
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
31
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
32
+ var(--m-color-control-outline-danger);
33
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
34
+ var(--m-color-control-outline-warning);
31
35
  --m-color-success: #52c41a;
32
36
  --m-color-info: #1677ff;
33
37
  --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
253
257
  animation-play-state: paused !important;
254
258
  }
255
259
 
256
- /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
260
+ /* Global density: scales spacing + control heights (WD tokens) */
257
261
  :root,
258
262
  [data-m-density="comfortable"] {
259
263
  --m-density-scale: 1;
@@ -348,12 +352,15 @@
348
352
  --m-color-border: #424242;
349
353
  --m-color-split: #303030;
350
354
  --m-color-focus-ring: #3c89e8;
351
- --m-focus-shadow: 0 0 0 2px
352
- color-mix(in srgb, var(--m-color-primary) 50%, transparent);
353
- --m-focus-shadow-danger: 0 0 0 2px
354
- color-mix(in srgb, var(--m-color-danger) 50%, transparent);
355
- --m-focus-shadow-warning: 0 0 0 2px
356
- color-mix(in srgb, var(--m-color-warning) 50%, transparent);
355
+ /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
356
+ --m-color-control-outline: rgba(23, 117, 249, 0.31);
357
+ --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
358
+ --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
359
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
360
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
361
+ var(--m-color-control-outline-danger);
362
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
363
+ var(--m-color-control-outline-warning);
357
364
  /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
358
365
  --m-color-success: #49aa19;
359
366
  --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
893
900
  width: 100%;
894
901
  }
895
902
 
903
+ .m-textarea--invalid:focus,
896
904
  .m-textarea--invalid:focus-visible,
897
905
  .m-select--invalid.m-select--open,
906
+ .m-select--invalid:focus,
898
907
  .m-select--invalid:focus-visible {
899
908
  border-color: var(--m-color-danger);
900
909
  box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
1103
1112
  opacity: var(--m-opacity-disabled);
1104
1113
  }
1105
1114
 
1106
- /* Shared Naive-like hover/focus for remaining form triggers */
1115
+ /* Shared hover/focus for remaining form triggers */
1107
1116
  .m-inputotp__input:hover:not(:disabled):not(:focus),
1108
- .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
1109
- .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
1117
+ .m-cascadeselect:not(.m-cascadeselect--open)
1118
+ .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1119
+ .m-treeselect:not(.m-treeselect--open)
1120
+ .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1110
1121
  .m-inputcolor__text:hover:not(:disabled):not(:focus),
1111
- .m-inputtags:hover:not(.m-inputtags--disabled),
1112
- .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
1113
- .m-inplace__display:hover {
1122
+ .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
1123
+ .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
1124
+ .m-inplace__display:hover:not(:focus-visible) {
1114
1125
  border-color: var(--m-color-primary-hover);
1115
1126
  }
1116
1127
 
1128
+ .m-inputotp__input:focus,
1117
1129
  .m-inputotp__input:focus-visible,
1130
+ .m-cascadeselect--open .m-cascadeselect__trigger,
1131
+ .m-cascadeselect__trigger:focus,
1118
1132
  .m-cascadeselect__trigger:focus-visible,
1133
+ .m-treeselect--open .m-treeselect__trigger,
1134
+ .m-treeselect__trigger:focus,
1119
1135
  .m-treeselect__trigger:focus-visible,
1136
+ .m-inputcolor__text:focus,
1120
1137
  .m-inputcolor__text:focus-visible,
1121
1138
  .m-inputtags:focus-within,
1122
1139
  .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
1125
1142
  .m-splitbutton__trigger:focus-visible,
1126
1143
  .m-inplace__display:focus-visible,
1127
1144
  .m-pagination__button:focus-visible {
1128
- border-color: var(--m-color-primary-hover);
1145
+ border-color: var(--m-color-primary);
1129
1146
  box-shadow: var(--m-focus-shadow);
1130
1147
  outline: none;
1131
1148
  }
1132
1149
 
1150
+ .m-inputotp--invalid .m-inputotp__input:focus,
1133
1151
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
1134
1152
  .m-inputtags--invalid:focus-within,
1153
+ .m-inputcolor--invalid .m-inputcolor__text:focus,
1135
1154
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
1136
1155
  border-color: var(--m-color-danger);
1137
1156
  box-shadow: var(--m-focus-shadow-danger);
@@ -1249,7 +1268,7 @@
1249
1268
  transform: scale(0.97);
1250
1269
  }
1251
1270
 
1252
- /* Naive-style focus: soft glow, not outline-offset ring */
1271
+ /* Soft glow focus, not outline-offset ring */
1253
1272
  .m-button:focus {
1254
1273
  outline: none;
1255
1274
  }
package/dist/confirm-popup/style.css CHANGED
@@ -9,6 +9,10 @@
9
9
  --m-color-border: #d9d9d9;
10
10
  --m-color-split: #f0f0f0;
11
11
  --m-color-focus-ring: #1677ff;
12
+ /* Soft translucent control-outline ring (primary bg composited over container) */
13
+ --m-color-control-outline: rgba(5, 145, 255, 0.1);
14
+ --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
15
+ --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
12
16
  /* Control sizing: medium control height 32px */
13
17
  --m-control-height-small: 24px;
14
18
  --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
22
26
 
23
27
  --m-radius-control: 6px;
24
28
  --m-border-width: 1px;
25
- --m-focus-shadow: 0 0 0 2px
26
- color-mix(in srgb, var(--m-color-primary) 45%, transparent);
27
- --m-focus-shadow-danger: 0 0 0 2px
28
- color-mix(in srgb, var(--m-color-danger) 45%, transparent);
29
- --m-focus-shadow-warning: 0 0 0 2px
30
- color-mix(in srgb, var(--m-color-warning) 45%, transparent);
29
+ --m-focus-outline-width: 2px;
30
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
31
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
32
+ var(--m-color-control-outline-danger);
33
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
34
+ var(--m-color-control-outline-warning);
31
35
  --m-color-success: #52c41a;
32
36
  --m-color-info: #1677ff;
33
37
  --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
253
257
  animation-play-state: paused !important;
254
258
  }
255
259
 
256
- /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
260
+ /* Global density: scales spacing + control heights (WD tokens) */
257
261
  :root,
258
262
  [data-m-density="comfortable"] {
259
263
  --m-density-scale: 1;
@@ -348,12 +352,15 @@
348
352
  --m-color-border: #424242;
349
353
  --m-color-split: #303030;
350
354
  --m-color-focus-ring: #3c89e8;
351
- --m-focus-shadow: 0 0 0 2px
352
- color-mix(in srgb, var(--m-color-primary) 50%, transparent);
353
- --m-focus-shadow-danger: 0 0 0 2px
354
- color-mix(in srgb, var(--m-color-danger) 50%, transparent);
355
- --m-focus-shadow-warning: 0 0 0 2px
356
- color-mix(in srgb, var(--m-color-warning) 50%, transparent);
355
+ /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
356
+ --m-color-control-outline: rgba(23, 117, 249, 0.31);
357
+ --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
358
+ --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
359
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
360
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
361
+ var(--m-color-control-outline-danger);
362
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
363
+ var(--m-color-control-outline-warning);
357
364
  /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
358
365
  --m-color-success: #49aa19;
359
366
  --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
893
900
  width: 100%;
894
901
  }
895
902
 
903
+ .m-textarea--invalid:focus,
896
904
  .m-textarea--invalid:focus-visible,
897
905
  .m-select--invalid.m-select--open,
906
+ .m-select--invalid:focus,
898
907
  .m-select--invalid:focus-visible {
899
908
  border-color: var(--m-color-danger);
900
909
  box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
1103
1112
  opacity: var(--m-opacity-disabled);
1104
1113
  }
1105
1114
 
1106
- /* Shared Naive-like hover/focus for remaining form triggers */
1115
+ /* Shared hover/focus for remaining form triggers */
1107
1116
  .m-inputotp__input:hover:not(:disabled):not(:focus),
1108
- .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
1109
- .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
1117
+ .m-cascadeselect:not(.m-cascadeselect--open)
1118
+ .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1119
+ .m-treeselect:not(.m-treeselect--open)
1120
+ .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1110
1121
  .m-inputcolor__text:hover:not(:disabled):not(:focus),
1111
- .m-inputtags:hover:not(.m-inputtags--disabled),
1112
- .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
1113
- .m-inplace__display:hover {
1122
+ .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
1123
+ .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
1124
+ .m-inplace__display:hover:not(:focus-visible) {
1114
1125
  border-color: var(--m-color-primary-hover);
1115
1126
  }
1116
1127
 
1128
+ .m-inputotp__input:focus,
1117
1129
  .m-inputotp__input:focus-visible,
1130
+ .m-cascadeselect--open .m-cascadeselect__trigger,
1131
+ .m-cascadeselect__trigger:focus,
1118
1132
  .m-cascadeselect__trigger:focus-visible,
1133
+ .m-treeselect--open .m-treeselect__trigger,
1134
+ .m-treeselect__trigger:focus,
1119
1135
  .m-treeselect__trigger:focus-visible,
1136
+ .m-inputcolor__text:focus,
1120
1137
  .m-inputcolor__text:focus-visible,
1121
1138
  .m-inputtags:focus-within,
1122
1139
  .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
1125
1142
  .m-splitbutton__trigger:focus-visible,
1126
1143
  .m-inplace__display:focus-visible,
1127
1144
  .m-pagination__button:focus-visible {
1128
- border-color: var(--m-color-primary-hover);
1145
+ border-color: var(--m-color-primary);
1129
1146
  box-shadow: var(--m-focus-shadow);
1130
1147
  outline: none;
1131
1148
  }
1132
1149
 
1150
+ .m-inputotp--invalid .m-inputotp__input:focus,
1133
1151
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
1134
1152
  .m-inputtags--invalid:focus-within,
1153
+ .m-inputcolor--invalid .m-inputcolor__text:focus,
1135
1154
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
1136
1155
  border-color: var(--m-color-danger);
1137
1156
  box-shadow: var(--m-focus-shadow-danger);
@@ -1249,7 +1268,7 @@
1249
1268
  transform: scale(0.97);
1250
1269
  }
1251
1270
 
1252
- /* Naive-style focus: soft glow, not outline-offset ring */
1271
+ /* Soft glow focus, not outline-offset ring */
1253
1272
  .m-button:focus {
1254
1273
  outline: none;
1255
1274
  }
package/dist/context-menu/style.css CHANGED
@@ -9,6 +9,10 @@
9
9
  --m-color-border: #d9d9d9;
10
10
  --m-color-split: #f0f0f0;
11
11
  --m-color-focus-ring: #1677ff;
12
+ /* Soft translucent control-outline ring (primary bg composited over container) */
13
+ --m-color-control-outline: rgba(5, 145, 255, 0.1);
14
+ --m-color-control-outline-danger: rgba(255, 38, 5, 0.06);
15
+ --m-color-control-outline-warning: rgba(255, 215, 5, 0.1);
12
16
  /* Control sizing: medium control height 32px */
13
17
  --m-control-height-small: 24px;
14
18
  --m-control-height-medium: 32px;
@@ -22,12 +26,12 @@
22
26
 
23
27
  --m-radius-control: 6px;
24
28
  --m-border-width: 1px;
25
- --m-focus-shadow: 0 0 0 2px
26
- color-mix(in srgb, var(--m-color-primary) 45%, transparent);
27
- --m-focus-shadow-danger: 0 0 0 2px
28
- color-mix(in srgb, var(--m-color-danger) 45%, transparent);
29
- --m-focus-shadow-warning: 0 0 0 2px
30
- color-mix(in srgb, var(--m-color-warning) 45%, transparent);
29
+ --m-focus-outline-width: 2px;
30
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
31
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
32
+ var(--m-color-control-outline-danger);
33
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
34
+ var(--m-color-control-outline-warning);
31
35
  --m-color-success: #52c41a;
32
36
  --m-color-info: #1677ff;
33
37
  --m-color-warning: #faad14;
@@ -253,7 +257,7 @@
253
257
  animation-play-state: paused !important;
254
258
  }
255
259
 
256
- /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
260
+ /* Global density: scales spacing + control heights (WD tokens) */
257
261
  :root,
258
262
  [data-m-density="comfortable"] {
259
263
  --m-density-scale: 1;
@@ -348,12 +352,15 @@
348
352
  --m-color-border: #424242;
349
353
  --m-color-split: #303030;
350
354
  --m-color-focus-ring: #3c89e8;
351
- --m-focus-shadow: 0 0 0 2px
352
- color-mix(in srgb, var(--m-color-primary) 50%, transparent);
353
- --m-focus-shadow-danger: 0 0 0 2px
354
- color-mix(in srgb, var(--m-color-danger) 50%, transparent);
355
- --m-focus-shadow-warning: 0 0 0 2px
356
- color-mix(in srgb, var(--m-color-warning) 50%, transparent);
355
+ /* Dark: getAlphaColor(color*Bg, colorBgContainer) */
356
+ --m-color-control-outline: rgba(23, 117, 249, 0.31);
357
+ --m-color-control-outline-danger: rgba(249, 75, 78, 0.31);
358
+ --m-color-control-outline-warning: rgba(250, 173, 20, 0.3);
359
+ --m-focus-shadow: 0 0 0 var(--m-focus-outline-width) var(--m-color-control-outline);
360
+ --m-focus-shadow-danger: 0 0 0 var(--m-focus-outline-width)
361
+ var(--m-color-control-outline-danger);
362
+ --m-focus-shadow-warning: 0 0 0 var(--m-focus-outline-width)
363
+ var(--m-color-control-outline-warning);
357
364
  /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
358
365
  --m-color-success: #49aa19;
359
366
  --m-color-info: #1668dc;
@@ -893,8 +900,10 @@
893
900
  width: 100%;
894
901
  }
895
902
 
903
+ .m-textarea--invalid:focus,
896
904
  .m-textarea--invalid:focus-visible,
897
905
  .m-select--invalid.m-select--open,
906
+ .m-select--invalid:focus,
898
907
  .m-select--invalid:focus-visible {
899
908
  border-color: var(--m-color-danger);
900
909
  box-shadow: var(--m-focus-shadow-danger);
@@ -1103,20 +1112,28 @@
1103
1112
  opacity: var(--m-opacity-disabled);
1104
1113
  }
1105
1114
 
1106
- /* Shared Naive-like hover/focus for remaining form triggers */
1115
+ /* Shared hover/focus for remaining form triggers */
1107
1116
  .m-inputotp__input:hover:not(:disabled):not(:focus),
1108
- .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
1109
- .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
1117
+ .m-cascadeselect:not(.m-cascadeselect--open)
1118
+ .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1119
+ .m-treeselect:not(.m-treeselect--open)
1120
+ .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
1110
1121
  .m-inputcolor__text:hover:not(:disabled):not(:focus),
1111
- .m-inputtags:hover:not(.m-inputtags--disabled),
1112
- .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked),
1113
- .m-inplace__display:hover {
1122
+ .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
1123
+ .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
1124
+ .m-inplace__display:hover:not(:focus-visible) {
1114
1125
  border-color: var(--m-color-primary-hover);
1115
1126
  }
1116
1127
 
1128
+ .m-inputotp__input:focus,
1117
1129
  .m-inputotp__input:focus-visible,
1130
+ .m-cascadeselect--open .m-cascadeselect__trigger,
1131
+ .m-cascadeselect__trigger:focus,
1118
1132
  .m-cascadeselect__trigger:focus-visible,
1133
+ .m-treeselect--open .m-treeselect__trigger,
1134
+ .m-treeselect__trigger:focus,
1119
1135
  .m-treeselect__trigger:focus-visible,
1136
+ .m-inputcolor__text:focus,
1120
1137
  .m-inputcolor__text:focus-visible,
1121
1138
  .m-inputtags:focus-within,
1122
1139
  .m-togglebutton:focus-visible,
@@ -1125,13 +1142,15 @@
1125
1142
  .m-splitbutton__trigger:focus-visible,
1126
1143
  .m-inplace__display:focus-visible,
1127
1144
  .m-pagination__button:focus-visible {
1128
- border-color: var(--m-color-primary-hover);
1145
+ border-color: var(--m-color-primary);
1129
1146
  box-shadow: var(--m-focus-shadow);
1130
1147
  outline: none;
1131
1148
  }
1132
1149
 
1150
+ .m-inputotp--invalid .m-inputotp__input:focus,
1133
1151
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
1134
1152
  .m-inputtags--invalid:focus-within,
1153
+ .m-inputcolor--invalid .m-inputcolor__text:focus,
1135
1154
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
1136
1155
  border-color: var(--m-color-danger);
1137
1156
  box-shadow: var(--m-focus-shadow-danger);
package/dist/data-view/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
2
2
  import { t } from "../Loading-BPpR-jGa.js";
3
- import { t as n } from "../Pagination-BkPBWEQq.js";
3
+ import { t as n } from "../Pagination-DLphD6LC.js";
4
4
  import { n as r } from "../locale-Dnk0UIie.js";
5
5
  import "./style.js";
6
6
  import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useSlots as x, watch as S, withCtx as C } from "vue";