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/tree-select/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);
@@ -1585,9 +1604,11 @@
1585
1604
  width: auto;
1586
1605
  }
1587
1606
 
1607
+ .m-select__filter:focus,
1588
1608
  .m-select__filter:focus-visible,
1609
+ .m-treeselect__filter:focus,
1589
1610
  .m-treeselect__filter:focus-visible {
1590
- border-color: var(--m-color-primary-hover);
1611
+ border-color: var(--m-color-primary);
1591
1612
  box-shadow: var(--m-focus-shadow);
1592
1613
  outline: none;
1593
1614
  }
@@ -1612,7 +1633,8 @@
1612
1633
  }
1613
1634
 
1614
1635
  .m-checkbox__input:focus-visible + .m-checkbox__control {
1615
- border-color: var(--m-color-primary-hover);
1636
+ border-color: var(--m-color-primary);
1637
+ box-shadow: var(--m-focus-shadow);
1616
1638
  }
1617
1639
 
1618
1640
  .m-checkbox--invalid .m-checkbox__input:focus-visible + .m-checkbox__control {
@@ -1977,7 +1999,15 @@
1977
1999
  padding-right: var(--m-control-end-padding);
1978
2000
  }
1979
2001
 
2002
+ .m-treeselect:not(.m-treeselect--disabled):not(.m-treeselect--open)
2003
+ .m-treeselect__trigger:hover:not(:focus):not(:focus-visible) {
2004
+ border-color: var(--m-color-primary-hover);
2005
+ }
2006
+
2007
+ .m-treeselect--open .m-treeselect__trigger,
2008
+ .m-treeselect__trigger:focus,
1980
2009
  .m-treeselect__trigger:focus-visible {
2010
+ border-color: var(--m-color-primary);
1981
2011
  box-shadow: var(--m-focus-shadow);
1982
2012
  outline: none;
1983
2013
  }
@@ -2084,6 +2114,9 @@
2084
2114
  border-color: var(--m-color-danger);
2085
2115
  }
2086
2116
 
2087
- .m-treeselect--invalid .m-treeselect__trigger:focus-visible {
2117
+ .m-treeselect--invalid .m-treeselect__trigger:focus,
2118
+ .m-treeselect--invalid .m-treeselect__trigger:focus-visible,
2119
+ .m-treeselect--invalid.m-treeselect--open .m-treeselect__trigger {
2120
+ border-color: var(--m-color-danger);
2088
2121
  box-shadow: var(--m-focus-shadow-danger);
2089
2122
  }
package/dist/typography/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);
@@ -1343,32 +1362,43 @@
1343
1362
  border-color: var(--m-color-danger);
1344
1363
  }
1345
1364
 
1365
+ .m-textarea--invalid:hover:not(:disabled):not(:focus) {
1366
+ border-color: var(--m-color-danger);
1367
+ }
1368
+
1369
+ .m-textarea--invalid:focus,
1346
1370
  .m-textarea--invalid:focus-visible {
1347
1371
  border-color: var(--m-color-danger);
1348
1372
  box-shadow: var(--m-focus-shadow-danger);
1373
+ outline: 0;
1349
1374
  }
1350
1375
 
1351
1376
  .m-textarea--warning {
1352
1377
  border-color: var(--m-color-warning);
1353
1378
  }
1354
1379
 
1355
- .m-textarea--warning:focus-visible {
1380
+ .m-textarea--warning:hover:not(:disabled):not(:focus) {
1356
1381
  border-color: var(--m-color-warning);
1357
- box-shadow: var(--m-focus-shadow-warning);
1358
1382
  }
1359
1383
 
1360
- .m-textarea:focus {
1361
- outline: none;
1384
+ .m-textarea--warning:focus,
1385
+ .m-textarea--warning:focus-visible {
1386
+ border-color: var(--m-color-warning);
1387
+ box-shadow: var(--m-focus-shadow-warning);
1388
+ outline: 0;
1362
1389
  }
1363
1390
 
1364
- .m-textarea:hover:not(:disabled):not(:focus) {
1391
+ .m-textarea:hover:not(:disabled):not(:focus):not(.m-textarea--invalid):not(
1392
+ .m-textarea--warning
1393
+ ) {
1365
1394
  border-color: var(--m-color-primary-hover);
1366
1395
  }
1367
1396
 
1397
+ .m-textarea:focus,
1368
1398
  .m-textarea:focus-visible {
1369
- border-color: var(--m-color-primary-hover);
1399
+ border-color: var(--m-color-primary);
1370
1400
  box-shadow: var(--m-focus-shadow);
1371
- outline: none;
1401
+ outline: 0;
1372
1402
  }
1373
1403
 
1374
1404
  /* —— Primitive: Typography (Title / Text / Paragraph / Link) —— */
package/dist/virtual-scroller/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/watermark/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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "morya-ui",
3
3
  "type": "module",
4
- "version": "0.4.0",
4
+ "version": "0.4.1",
5
5
  "description": "Open-source Vue 3 component library with design tokens, themes, and interactive docs.",
6
6
  "license": "MIT",
7
7
  "homepage": "https://morya-space.github.io/morya-ui/",