morya-ui 0.2.7 → 0.2.9

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 (226) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/README.md +1 -0
  3. package/README.zh-CN.md +1 -0
  4. package/dist/{Button--RkQybU-.js → Button-DO5oukfg.js} +1 -1
  5. package/dist/Icon-B6IBrJ5S.js +606 -0
  6. package/dist/{Pagination-BKvR-RUW.js → Pagination-CUwCtWhz.js} +1 -1
  7. package/dist/Renderable-DHU4Jcfw.js +20 -0
  8. package/dist/accordion/style.css +26 -23
  9. package/dist/auto-complete/index.js +1 -1
  10. package/dist/auto-complete/style.css +64 -40
  11. package/dist/avatar/index.js +1 -1
  12. package/dist/avatar/style.css +26 -23
  13. package/dist/badge/style.css +26 -23
  14. package/dist/block-ui/style.css +26 -23
  15. package/dist/breadcrumb/style.css +26 -23
  16. package/dist/button/index.js +1 -1
  17. package/dist/button/style.css +26 -23
  18. package/dist/card/style.css +26 -23
  19. package/dist/carousel/index.js +1 -1
  20. package/dist/carousel/style.css +26 -23
  21. package/dist/cascade-select/index.js +1 -1
  22. package/dist/cascade-select/style.css +27 -24
  23. package/dist/checkbox/style.css +26 -23
  24. package/dist/chip/index.js +1 -1
  25. package/dist/chip/style.css +26 -23
  26. package/dist/command-menu/index.js +2 -2
  27. package/dist/command-menu/style.css +26 -23
  28. package/dist/component-registry.d.ts.map +1 -1
  29. package/dist/components/AutoComplete/styles.css +38 -17
  30. package/dist/components/Carousel/Carousel.vue.d.ts +1 -1
  31. package/dist/components/ConfirmPopup/ConfirmPopup.vue.d.ts +1 -1
  32. package/dist/components/DatePicker/styles.css +65 -21
  33. package/dist/components/Icon/icon-categories.d.ts +21 -0
  34. package/dist/components/Icon/icon-categories.d.ts.map +1 -0
  35. package/dist/components/Icon/icons-tabler.d.ts +77 -0
  36. package/dist/components/Icon/icons-tabler.d.ts.map +1 -0
  37. package/dist/components/Icon/icons-types.d.ts +36 -0
  38. package/dist/components/Icon/icons-types.d.ts.map +1 -0
  39. package/dist/components/Icon/icons.d.ts +75 -32
  40. package/dist/components/Icon/icons.d.ts.map +1 -1
  41. package/dist/components/Icon/index.d.ts +2 -0
  42. package/dist/components/Icon/index.d.ts.map +1 -1
  43. package/dist/components/IconField/IconField.vue.d.ts +3 -1
  44. package/dist/components/IconField/IconField.vue.d.ts.map +1 -1
  45. package/dist/components/IconField/styles.css +306 -31
  46. package/dist/components/Input/Input.vue.d.ts.map +1 -1
  47. package/dist/components/Input/styles.css +172 -33
  48. package/dist/components/InputNumber/styles.css +103 -40
  49. package/dist/components/InputPassword/InputPassword.vue.d.ts.map +1 -1
  50. package/dist/components/InputPassword/styles.css +79 -79
  51. package/dist/components/Layout/LayoutContent.vue.d.ts +4 -8
  52. package/dist/components/Layout/LayoutContent.vue.d.ts.map +1 -1
  53. package/dist/components/Layout/LayoutSider.vue.d.ts +4 -6
  54. package/dist/components/Layout/LayoutSider.vue.d.ts.map +1 -1
  55. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts +2 -0
  56. package/dist/components/Layout/composables/useLayoutRegionStyle.d.ts.map +1 -1
  57. package/dist/components/Layout/styles.css +7 -42
  58. package/dist/components/Layout/types.d.ts +4 -7
  59. package/dist/components/Layout/types.d.ts.map +1 -1
  60. package/dist/components/Loading/Loading.vue.d.ts +25 -0
  61. package/dist/components/Loading/Loading.vue.d.ts.map +1 -0
  62. package/dist/components/Loading/LoadingIndicator.vue.d.ts +13 -0
  63. package/dist/components/Loading/LoadingIndicator.vue.d.ts.map +1 -0
  64. package/dist/components/Loading/directive.d.ts +12 -0
  65. package/dist/components/Loading/directive.d.ts.map +1 -0
  66. package/dist/components/Loading/index.d.ts +8 -0
  67. package/dist/components/Loading/index.d.ts.map +1 -0
  68. package/dist/components/Loading/loading.d.ts +35 -0
  69. package/dist/components/Loading/loading.d.ts.map +1 -0
  70. package/dist/components/Loading/styles.css +386 -0
  71. package/dist/components/Loading/types.d.ts +74 -0
  72. package/dist/components/Loading/types.d.ts.map +1 -0
  73. package/dist/components/Loading/useLoading.d.ts +11 -0
  74. package/dist/components/Loading/useLoading.d.ts.map +1 -0
  75. package/dist/components/Menu/styles.css +4 -1
  76. package/dist/components/Page/PageContent.vue.d.ts +2 -2
  77. package/dist/components/ProgressSpinner/ProgressSpinner.vue.d.ts +1 -1
  78. package/dist/components/Rating/Rating.vue.d.ts +1 -1
  79. package/dist/components/Table/Table.vue.d.ts +1 -1
  80. package/dist/components/Textarea/styles.css +15 -1
  81. package/dist/config-provider/style.css +198 -56
  82. package/dist/confirm-dialog/index.js +11 -11
  83. package/dist/confirm-dialog/style.css +26 -23
  84. package/dist/confirm-popup/index.js +2 -2
  85. package/dist/confirm-popup/style.css +26 -23
  86. package/dist/content-h8POj44-.js +28 -0
  87. package/dist/context-menu/index.js +2 -2
  88. package/dist/context-menu/style.css +26 -23
  89. package/dist/data-view/index.js +1 -1
  90. package/dist/data-view/style.css +26 -23
  91. package/dist/date-picker/index.js +1 -1
  92. package/dist/date-picker/style.css +91 -44
  93. package/dist/dialog/index.js +2 -2
  94. package/dist/dialog/style.css +26 -23
  95. package/dist/divider/style.css +26 -23
  96. package/dist/dock/index.js +2 -2
  97. package/dist/dock/style.css +26 -23
  98. package/dist/drawer/index.js +1 -1
  99. package/dist/drawer/style.css +26 -23
  100. package/dist/dropdown/index.js +2 -2
  101. package/dist/dropdown/style.css +26 -23
  102. package/dist/empty/index.js +1 -1
  103. package/dist/empty/style.css +26 -23
  104. package/dist/fieldset/index.js +1 -1
  105. package/dist/fieldset/style.css +26 -23
  106. package/dist/file-upload/index.js +1 -1
  107. package/dist/file-upload/style.css +26 -23
  108. package/dist/flex/style.css +26 -23
  109. package/dist/float-label/style.css +26 -23
  110. package/dist/fluid/style.css +26 -23
  111. package/dist/form/style.css +26 -23
  112. package/dist/gallery/index.js +1 -1
  113. package/dist/gallery/style.css +26 -23
  114. package/dist/grid/style.css +26 -23
  115. package/dist/icon/index.js +212 -2
  116. package/dist/icon/style.css +26 -23
  117. package/dist/icon-field/index.js +41 -7
  118. package/dist/icon-field/style.css +672 -54
  119. package/dist/icon-field/style.js +1 -0
  120. package/dist/{icon-xUOyawgJ.js → icon-iOBeyIRp.js} +1 -1
  121. package/dist/index.d.ts +10 -1
  122. package/dist/index.d.ts.map +1 -1
  123. package/dist/index.js +4722 -3962
  124. package/dist/inplace/style.css +26 -23
  125. package/dist/input/index.js +78 -80
  126. package/dist/input/style.css +198 -56
  127. package/dist/input-color/style.css +26 -23
  128. package/dist/input-group/style.css +26 -23
  129. package/dist/input-number/index.js +1 -1
  130. package/dist/input-number/style.css +129 -63
  131. package/dist/input-otp/style.css +26 -23
  132. package/dist/input-password/index.js +83 -82
  133. package/dist/input-password/style.css +105 -102
  134. package/dist/input-tags/index.js +1 -1
  135. package/dist/input-tags/style.css +26 -23
  136. package/dist/knob/style.css +26 -23
  137. package/dist/label/style.css +26 -23
  138. package/dist/layout/index.js +60 -83
  139. package/dist/layout/style.css +33 -65
  140. package/dist/listbox/style.css +26 -23
  141. package/dist/loading/index.js +467 -0
  142. package/dist/loading/style.css +1380 -0
  143. package/dist/loading/style.js +3 -0
  144. package/dist/mega-menu/index.js +2 -2
  145. package/dist/mega-menu/style.css +26 -23
  146. package/dist/menu/index.js +2 -2
  147. package/dist/menu/style.css +30 -24
  148. package/dist/menubar/index.js +2 -2
  149. package/dist/menubar/style.css +26 -23
  150. package/dist/message/index.js +8 -7
  151. package/dist/message/style.css +26 -23
  152. package/dist/meter-group/style.css +26 -23
  153. package/dist/order-list/index.js +1 -1
  154. package/dist/order-list/style.css +26 -23
  155. package/dist/page/index.js +1 -1
  156. package/dist/page/style.css +26 -23
  157. package/dist/pagination/index.js +1 -1
  158. package/dist/pagination/style.css +26 -23
  159. package/dist/panel/index.js +1 -1
  160. package/dist/panel/style.css +26 -23
  161. package/dist/pick-list/index.js +1 -1
  162. package/dist/pick-list/style.css +26 -23
  163. package/dist/popover/style.css +26 -23
  164. package/dist/progress-bar/style.css +26 -23
  165. package/dist/progress-spinner/style.css +26 -23
  166. package/dist/radio/style.css +26 -23
  167. package/dist/rating/index.js +1 -1
  168. package/dist/rating/style.css +26 -23
  169. package/dist/resolver-map.d.ts.map +1 -1
  170. package/dist/resolver.js +1 -0
  171. package/dist/result/index.js +1 -1
  172. package/dist/result/style.css +26 -23
  173. package/dist/scroll-top/index.js +1 -1
  174. package/dist/scroll-top/style.css +26 -23
  175. package/dist/scrollbar/style.css +26 -23
  176. package/dist/select/index.js +1 -1
  177. package/dist/select/style.css +27 -24
  178. package/dist/select-button/style.css +26 -23
  179. package/dist/shared/config.d.ts.map +1 -1
  180. package/dist/shared/styles/control-suffix.css +1 -1
  181. package/dist/sidebar/index.js +2 -2
  182. package/dist/sidebar/style.css +26 -23
  183. package/dist/skeleton/style.css +26 -23
  184. package/dist/slider/style.css +26 -23
  185. package/dist/space/style.css +26 -23
  186. package/dist/speed-dial/index.js +2 -2
  187. package/dist/speed-dial/style.css +26 -23
  188. package/dist/split-button/index.js +1 -1
  189. package/dist/split-button/style.css +26 -23
  190. package/dist/splitter/style.css +26 -23
  191. package/dist/status/index.js +1 -1
  192. package/dist/status/style.css +26 -23
  193. package/dist/stepper/index.js +1 -1
  194. package/dist/stepper/style.css +26 -23
  195. package/dist/styles/base.css +26 -23
  196. package/dist/styles.css +1 -1
  197. package/dist/switch/style.css +26 -23
  198. package/dist/table/index.js +2 -2
  199. package/dist/table/style.css +26 -23
  200. package/dist/tabs/index.js +1 -1
  201. package/dist/tabs/style.css +26 -23
  202. package/dist/tag/index.js +1 -1
  203. package/dist/tag/style.css +26 -23
  204. package/dist/terminal/style.css +26 -23
  205. package/dist/textarea/index.js +1 -1
  206. package/dist/textarea/style.css +41 -24
  207. package/dist/tiered-menu/index.js +1 -1
  208. package/dist/tiered-menu/style.css +26 -23
  209. package/dist/timeline/index.js +1 -1
  210. package/dist/timeline/style.css +26 -23
  211. package/dist/toast/index.js +13 -12
  212. package/dist/toast/style.css +26 -23
  213. package/dist/toggle-button/index.js +2 -2
  214. package/dist/toggle-button/style.css +26 -23
  215. package/dist/toolbar/style.css +26 -23
  216. package/dist/tooltip/style.css +26 -23
  217. package/dist/tree/index.js +1 -1
  218. package/dist/tree/style.css +26 -23
  219. package/dist/tree-select/index.js +1 -1
  220. package/dist/tree-select/style.css +27 -24
  221. package/dist/tree-table/index.js +1 -1
  222. package/dist/tree-table/style.css +26 -23
  223. package/dist/virtual-scroller/style.css +26 -23
  224. package/package.json +9 -2
  225. package/dist/Icon-DfpIfo2L.js +0 -521
  226. package/dist/Renderable-BaaCI4tS.js +0 -45
@@ -373,6 +373,17 @@
373
373
  opacity: var(--m-opacity-disabled);
374
374
  }
375
375
 
376
+ .m-input-field__control--prefixed .m-input:disabled,
377
+ .m-input-field__control--suffixed .m-input:disabled,
378
+ .m-input-field__control--clearable .m-input:disabled,
379
+ .m-password--disabled .m-password__input,
380
+ .m-inputnumber--disabled .m-inputnumber__input,
381
+ .m-datepicker--disabled .m-datepicker__input,
382
+ .m-icon-field--anchored .m-input:disabled,
383
+ .m-icon-field--anchored .m-textarea:disabled {
384
+ opacity: 1;
385
+ }
386
+
376
387
  .m-input::placeholder,
377
388
  .m-textarea::placeholder,
378
389
  .m-password__input::placeholder,
@@ -692,14 +703,6 @@
692
703
  opacity: var(--m-opacity-disabled);
693
704
  }
694
705
 
695
- .m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
696
- padding-left: var(--m-control-affix-padding);
697
- }
698
-
699
- .m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
700
- padding-right: var(--m-control-affix-padding);
701
- }
702
-
703
706
  .m-inputgroup > .m-input,
704
707
  .m-inputgroup > .m-input-field,
705
708
  .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
718
721
 
719
722
  .m-inputgroup > .m-input,
720
723
  .m-inputgroup .m-input,
721
- .m-inputgroup .m-password__input,
722
- .m-inputgroup .m-inputnumber__input {
724
+ .m-inputgroup .m-password,
725
+ .m-inputgroup .m-inputnumber__input-wrap,
726
+ .m-inputgroup .m-input-field__control--prefixed,
727
+ .m-inputgroup .m-input-field__control--suffixed,
728
+ .m-inputgroup .m-input-field__control--clearable {
723
729
  border-radius: 0;
724
730
  width: 100%;
725
731
  }
726
732
 
727
733
  .m-inputgroup > :first-child.m-input,
728
734
  .m-inputgroup > :first-child .m-input,
729
- .m-inputgroup > :first-child .m-password__input,
730
- .m-inputgroup > :first-child .m-inputnumber__input,
735
+ .m-inputgroup > :first-child .m-password,
736
+ .m-inputgroup > :first-child .m-inputnumber__input-wrap,
737
+ .m-inputgroup > :first-child .m-input-field__control--prefixed,
738
+ .m-inputgroup > :first-child .m-input-field__control--suffixed,
739
+ .m-inputgroup > :first-child .m-input-field__control--clearable,
731
740
  .m-inputgroup > :first-child.m-inputgroup-addon {
732
741
  border-bottom-left-radius: var(--m-radius-control);
733
742
  border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
735
744
 
736
745
  .m-inputgroup > :last-child.m-input,
737
746
  .m-inputgroup > :last-child .m-input,
738
- .m-inputgroup > :last-child .m-password__input,
739
- .m-inputgroup > :last-child .m-inputnumber__input,
747
+ .m-inputgroup > :last-child .m-password,
748
+ .m-inputgroup > :last-child .m-inputnumber__input-wrap,
749
+ .m-inputgroup > :last-child .m-input-field__control--prefixed,
750
+ .m-inputgroup > :last-child .m-input-field__control--suffixed,
751
+ .m-inputgroup > :last-child .m-input-field__control--clearable,
740
752
  .m-inputgroup > :last-child.m-inputgroup-addon {
741
753
  border-bottom-right-radius: var(--m-radius-control);
742
754
  border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
887
899
  }
888
900
 
889
901
  /* Shared Naive-like hover/focus for remaining form triggers */
890
- .m-inputnumber__input:hover:not(:disabled):not(:focus),
891
- .m-password__input:hover:not(:disabled):not(:focus),
892
- .m-datepicker__input:hover:not(:disabled):not(:focus),
893
902
  .m-inputotp__input:hover:not(:disabled):not(:focus),
894
903
  .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
895
904
  .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
900
909
  border-color: var(--m-color-primary-hover);
901
910
  }
902
911
 
903
- .m-inputnumber__input:focus-visible,
904
- .m-password__input:focus-visible,
905
- .m-datepicker__input:focus-visible,
906
912
  .m-inputotp__input:focus-visible,
907
913
  .m-cascadeselect__trigger:focus-visible,
908
914
  .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
919
925
  outline: none;
920
926
  }
921
927
 
922
- .m-inputnumber--invalid .m-inputnumber__input:focus-visible,
923
- .m-password--invalid .m-password__input:focus-visible,
924
- .m-datepicker--invalid .m-datepicker__input:focus-visible,
925
928
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
926
929
  .m-inputtags--invalid:focus-within,
927
930
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
@@ -1092,16 +1095,156 @@
1092
1095
  position: relative;
1093
1096
  }
1094
1097
 
1098
+ /*
1099
+ * Affix/clear shell: prefix/suffix participate in flex flow so long slot
1100
+ * content reserves real width instead of fighting fixed input padding.
1101
+ */
1095
1102
  .m-input-field__control--prefixed,
1096
- .m-input-field__control--suffixed {
1103
+ .m-input-field__control--suffixed,
1104
+ .m-input-field__control--clearable {
1097
1105
  align-items: center;
1106
+ background: var(--m-color-surface);
1107
+ border: var(--m-border-width) solid var(--m-color-border);
1108
+ border-radius: var(--m-radius-control);
1109
+ box-sizing: border-box;
1098
1110
  display: flex;
1111
+ max-width: 100%;
1112
+ min-height: var(--m-control-height-medium);
1113
+ transition:
1114
+ border-color var(--m-motion-fast) var(--m-motion-ease),
1115
+ box-shadow var(--m-motion-fast) var(--m-motion-ease),
1116
+ background-color var(--m-motion-fast) var(--m-motion-ease);
1117
+ }
1118
+
1119
+ .m-input-field--fluid .m-input-field__control--prefixed,
1120
+ .m-input-field--fluid .m-input-field__control--suffixed,
1121
+ .m-input-field--fluid .m-input-field__control--clearable {
1122
+ width: 100%;
1123
+ }
1124
+
1125
+ .m-input-field__control--prefixed:has(.m-input--small),
1126
+ .m-input-field__control--suffixed:has(.m-input--small),
1127
+ .m-input-field__control--clearable:has(.m-input--small),
1128
+ .m-input-field__control--prefixed:has(.m-input--sm),
1129
+ .m-input-field__control--suffixed:has(.m-input--sm),
1130
+ .m-input-field__control--clearable:has(.m-input--sm) {
1131
+ min-height: var(--m-control-height-small);
1132
+ }
1133
+
1134
+ .m-input-field__control--prefixed:has(.m-input--large),
1135
+ .m-input-field__control--suffixed:has(.m-input--large),
1136
+ .m-input-field__control--clearable:has(.m-input--large),
1137
+ .m-input-field__control--prefixed:has(.m-input--lg),
1138
+ .m-input-field__control--suffixed:has(.m-input--lg),
1139
+ .m-input-field__control--clearable:has(.m-input--lg) {
1140
+ min-height: var(--m-control-height-large);
1141
+ }
1142
+
1143
+ .m-input-field__control--prefixed:has(.m-input--filled),
1144
+ .m-input-field__control--suffixed:has(.m-input--filled),
1145
+ .m-input-field__control--clearable:has(.m-input--filled) {
1146
+ background: color-mix(
1147
+ in srgb,
1148
+ var(--m-color-text-muted) 12%,
1149
+ var(--m-color-surface)
1150
+ );
1151
+ border-color: transparent;
1152
+ }
1153
+
1154
+ .m-input-field__control--prefixed:has(.m-input--invalid),
1155
+ .m-input-field__control--suffixed:has(.m-input--invalid),
1156
+ .m-input-field__control--clearable:has(.m-input--invalid) {
1157
+ border-color: var(--m-color-danger);
1158
+ }
1159
+
1160
+ .m-input-field__control--prefixed:hover:not(:focus-within):has(
1161
+ .m-input:not(:disabled)
1162
+ ),
1163
+ .m-input-field__control--suffixed:hover:not(:focus-within):has(
1164
+ .m-input:not(:disabled)
1165
+ ),
1166
+ .m-input-field__control--clearable:hover:not(:focus-within):has(
1167
+ .m-input:not(:disabled)
1168
+ ) {
1169
+ border-color: var(--m-color-primary-hover);
1170
+ }
1171
+
1172
+ .m-input-field__control--prefixed:focus-within,
1173
+ .m-input-field__control--suffixed:focus-within,
1174
+ .m-input-field__control--clearable:focus-within {
1175
+ border-color: var(--m-color-primary-hover);
1176
+ box-shadow: var(--m-focus-shadow);
1177
+ }
1178
+
1179
+ .m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
1180
+ .m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
1181
+ .m-input-field__control--clearable:has(.m-input--invalid):focus-within {
1182
+ border-color: var(--m-color-danger);
1183
+ box-shadow: var(--m-focus-shadow-danger);
1184
+ }
1185
+
1186
+ .m-input-field__control--prefixed:has(.m-input:disabled),
1187
+ .m-input-field__control--suffixed:has(.m-input:disabled),
1188
+ .m-input-field__control--clearable:has(.m-input:disabled) {
1189
+ cursor: not-allowed;
1190
+ opacity: var(--m-opacity-disabled);
1099
1191
  }
1100
1192
 
1101
1193
  .m-input-field__control--prefixed .m-input,
1102
- .m-input-field__control--suffixed .m-input {
1194
+ .m-input-field__control--suffixed .m-input,
1195
+ .m-input-field__control--clearable .m-input {
1196
+ background: transparent;
1197
+ border: 0;
1198
+ border-radius: 0;
1199
+ box-shadow: none;
1103
1200
  flex: 1 1 auto;
1201
+ height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
1202
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
1203
+ min-height: 0;
1104
1204
  min-width: 0;
1205
+ width: auto;
1206
+ }
1207
+
1208
+ .m-input-field__control--prefixed:has(.m-input--small) .m-input,
1209
+ .m-input-field__control--suffixed:has(.m-input--small) .m-input,
1210
+ .m-input-field__control--clearable:has(.m-input--small) .m-input,
1211
+ .m-input-field__control--prefixed:has(.m-input--sm) .m-input,
1212
+ .m-input-field__control--suffixed:has(.m-input--sm) .m-input,
1213
+ .m-input-field__control--clearable:has(.m-input--sm) .m-input {
1214
+ height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
1215
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
1216
+ }
1217
+
1218
+ .m-input-field__control--prefixed:has(.m-input--large) .m-input,
1219
+ .m-input-field__control--suffixed:has(.m-input--large) .m-input,
1220
+ .m-input-field__control--clearable:has(.m-input--large) .m-input,
1221
+ .m-input-field__control--prefixed:has(.m-input--lg) .m-input,
1222
+ .m-input-field__control--suffixed:has(.m-input--lg) .m-input,
1223
+ .m-input-field__control--clearable:has(.m-input--lg) .m-input {
1224
+ height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
1225
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
1226
+ }
1227
+
1228
+ .m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
1229
+ .m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
1230
+ .m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
1231
+ .m-input-field__control--prefixed .m-input:focus-visible,
1232
+ .m-input-field__control--suffixed .m-input:focus-visible,
1233
+ .m-input-field__control--clearable .m-input:focus-visible,
1234
+ .m-input-field__control--prefixed .m-input--invalid:focus-visible,
1235
+ .m-input-field__control--suffixed .m-input--invalid:focus-visible,
1236
+ .m-input-field__control--clearable .m-input--invalid:focus-visible {
1237
+ border-color: transparent;
1238
+ box-shadow: none;
1239
+ }
1240
+
1241
+ .m-input-field__control--prefixed .m-input {
1242
+ padding-left: 0;
1243
+ }
1244
+
1245
+ .m-input-field__control--suffixed .m-input,
1246
+ .m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
1247
+ padding-right: 0;
1105
1248
  }
1106
1249
 
1107
1250
  .m-input__prefix,
@@ -1110,41 +1253,33 @@
1110
1253
  color: var(--m-color-text-muted);
1111
1254
  display: inline-flex;
1112
1255
  flex: 0 0 auto;
1113
- font-size: var(--m-font-size-md);
1256
+ font-size: inherit;
1114
1257
  gap: var(--m-space-1);
1115
1258
  line-height: 1;
1259
+ padding-inline: var(--m-space-2);
1116
1260
  pointer-events: none;
1117
- position: absolute;
1118
- top: 50%;
1119
- transform: translateY(-50%);
1120
- z-index: 1;
1121
- }
1122
-
1123
- .m-input__prefix {
1124
- left: var(--m-control-padding-x-medium);
1125
- }
1126
-
1127
- .m-input__suffix {
1128
- right: var(--m-control-padding-x-medium);
1129
- }
1130
-
1131
- .m-input-field__control--clearable .m-input__suffix {
1132
- right: var(--m-control-affix-gap);
1261
+ white-space: nowrap;
1133
1262
  }
1134
1263
 
1135
- .m-input--has-prefix {
1136
- padding-left: var(--m-control-affix-gap);
1264
+ .m-input-field__control--prefixed .m-input__prefix,
1265
+ .m-input-field__control--suffixed .m-input__suffix {
1266
+ font-size: var(--m-control-font-medium);
1137
1267
  }
1138
1268
 
1139
- .m-input--has-suffix {
1140
- padding-right: var(--m-control-affix-gap);
1269
+ .m-input-field__control:has(.m-input--small) .m-input__prefix,
1270
+ .m-input-field__control:has(.m-input--small) .m-input__suffix,
1271
+ .m-input-field__control:has(.m-input--sm) .m-input__prefix,
1272
+ .m-input-field__control:has(.m-input--sm) .m-input__suffix {
1273
+ font-size: var(--m-control-font-small);
1274
+ padding-inline: var(--m-space-2);
1141
1275
  }
1142
1276
 
1143
- .m-input-field__control--clearable.m-input-field__control--suffixed
1144
- .m-input--has-suffix {
1145
- padding-right: calc(
1146
- var(--m-control-affix-padding) + var(--m-control-affix-gap)
1147
- );
1277
+ .m-input-field__control:has(.m-input--large) .m-input__prefix,
1278
+ .m-input-field__control:has(.m-input--large) .m-input__suffix,
1279
+ .m-input-field__control:has(.m-input--lg) .m-input__prefix,
1280
+ .m-input-field__control:has(.m-input--lg) .m-input__suffix {
1281
+ font-size: var(--m-control-font-large);
1282
+ padding-inline: var(--m-space-3);
1148
1283
  }
1149
1284
 
1150
1285
  .m-input__prefix button,
@@ -1161,6 +1296,7 @@
1161
1296
  color: var(--m-color-text);
1162
1297
  font-family: var(--m-font-sans);
1163
1298
  font-size: var(--m-control-font-medium);
1299
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
1164
1300
  min-height: var(--m-control-height-medium);
1165
1301
  padding: 0 var(--m-control-padding-x-medium);
1166
1302
  transition:
@@ -1190,12 +1326,14 @@
1190
1326
  .m-input--small,
1191
1327
  .m-input--sm {
1192
1328
  font-size: var(--m-control-font-small);
1329
+ line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
1193
1330
  min-height: var(--m-control-height-small);
1194
1331
  padding: 0 var(--m-control-padding-x-small);
1195
1332
  }
1196
1333
 
1197
1334
  .m-input--normal {
1198
1335
  font-size: var(--m-control-font-medium);
1336
+ line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
1199
1337
  min-height: var(--m-control-height-medium);
1200
1338
  padding: 0 var(--m-control-padding-x-medium);
1201
1339
  }
@@ -1203,6 +1341,7 @@
1203
1341
  .m-input--large,
1204
1342
  .m-input--lg {
1205
1343
  font-size: var(--m-control-font-large);
1344
+ line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
1206
1345
  min-height: var(--m-control-height-large);
1207
1346
  padding: 0 var(--m-control-padding-x-large);
1208
1347
  }
@@ -1211,24 +1350,27 @@
1211
1350
  width: 100%;
1212
1351
  }
1213
1352
 
1353
+ .m-input-field__control--prefixed .m-input,
1354
+ .m-input-field__control--suffixed .m-input,
1355
+ .m-input-field__control--clearable .m-input {
1356
+ width: auto;
1357
+ }
1358
+
1214
1359
  .m-input__clear {
1215
1360
  align-items: center;
1361
+ align-self: center;
1216
1362
  background: transparent;
1217
1363
  border: 0;
1218
1364
  border-radius: var(--m-radius-sm);
1219
1365
  color: var(--m-color-text-muted);
1220
1366
  cursor: pointer;
1221
1367
  display: flex;
1368
+ flex: 0 0 auto;
1222
1369
  font-size: var(--m-font-size-lg);
1223
1370
  height: var(--m-control-affix-size);
1224
1371
  justify-content: center;
1225
1372
  padding: 0;
1226
- position: absolute;
1227
- right: var(--m-space-1);
1228
- top: 50%;
1229
- transform: translateY(-50%);
1230
1373
  width: var(--m-control-affix-size);
1231
- z-index: 1;
1232
1374
  }
1233
1375
 
1234
1376
  .m-input__clear:hover:not(:disabled) {
@@ -373,6 +373,17 @@
373
373
  opacity: var(--m-opacity-disabled);
374
374
  }
375
375
 
376
+ .m-input-field__control--prefixed .m-input:disabled,
377
+ .m-input-field__control--suffixed .m-input:disabled,
378
+ .m-input-field__control--clearable .m-input:disabled,
379
+ .m-password--disabled .m-password__input,
380
+ .m-inputnumber--disabled .m-inputnumber__input,
381
+ .m-datepicker--disabled .m-datepicker__input,
382
+ .m-icon-field--anchored .m-input:disabled,
383
+ .m-icon-field--anchored .m-textarea:disabled {
384
+ opacity: 1;
385
+ }
386
+
376
387
  .m-input::placeholder,
377
388
  .m-textarea::placeholder,
378
389
  .m-password__input::placeholder,
@@ -692,14 +703,6 @@
692
703
  opacity: var(--m-opacity-disabled);
693
704
  }
694
705
 
695
- .m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
696
- padding-left: var(--m-control-affix-padding);
697
- }
698
-
699
- .m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
700
- padding-right: var(--m-control-affix-padding);
701
- }
702
-
703
706
  .m-inputgroup > .m-input,
704
707
  .m-inputgroup > .m-input-field,
705
708
  .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
718
721
 
719
722
  .m-inputgroup > .m-input,
720
723
  .m-inputgroup .m-input,
721
- .m-inputgroup .m-password__input,
722
- .m-inputgroup .m-inputnumber__input {
724
+ .m-inputgroup .m-password,
725
+ .m-inputgroup .m-inputnumber__input-wrap,
726
+ .m-inputgroup .m-input-field__control--prefixed,
727
+ .m-inputgroup .m-input-field__control--suffixed,
728
+ .m-inputgroup .m-input-field__control--clearable {
723
729
  border-radius: 0;
724
730
  width: 100%;
725
731
  }
726
732
 
727
733
  .m-inputgroup > :first-child.m-input,
728
734
  .m-inputgroup > :first-child .m-input,
729
- .m-inputgroup > :first-child .m-password__input,
730
- .m-inputgroup > :first-child .m-inputnumber__input,
735
+ .m-inputgroup > :first-child .m-password,
736
+ .m-inputgroup > :first-child .m-inputnumber__input-wrap,
737
+ .m-inputgroup > :first-child .m-input-field__control--prefixed,
738
+ .m-inputgroup > :first-child .m-input-field__control--suffixed,
739
+ .m-inputgroup > :first-child .m-input-field__control--clearable,
731
740
  .m-inputgroup > :first-child.m-inputgroup-addon {
732
741
  border-bottom-left-radius: var(--m-radius-control);
733
742
  border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
735
744
 
736
745
  .m-inputgroup > :last-child.m-input,
737
746
  .m-inputgroup > :last-child .m-input,
738
- .m-inputgroup > :last-child .m-password__input,
739
- .m-inputgroup > :last-child .m-inputnumber__input,
747
+ .m-inputgroup > :last-child .m-password,
748
+ .m-inputgroup > :last-child .m-inputnumber__input-wrap,
749
+ .m-inputgroup > :last-child .m-input-field__control--prefixed,
750
+ .m-inputgroup > :last-child .m-input-field__control--suffixed,
751
+ .m-inputgroup > :last-child .m-input-field__control--clearable,
740
752
  .m-inputgroup > :last-child.m-inputgroup-addon {
741
753
  border-bottom-right-radius: var(--m-radius-control);
742
754
  border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
887
899
  }
888
900
 
889
901
  /* Shared Naive-like hover/focus for remaining form triggers */
890
- .m-inputnumber__input:hover:not(:disabled):not(:focus),
891
- .m-password__input:hover:not(:disabled):not(:focus),
892
- .m-datepicker__input:hover:not(:disabled):not(:focus),
893
902
  .m-inputotp__input:hover:not(:disabled):not(:focus),
894
903
  .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
895
904
  .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
900
909
  border-color: var(--m-color-primary-hover);
901
910
  }
902
911
 
903
- .m-inputnumber__input:focus-visible,
904
- .m-password__input:focus-visible,
905
- .m-datepicker__input:focus-visible,
906
912
  .m-inputotp__input:focus-visible,
907
913
  .m-cascadeselect__trigger:focus-visible,
908
914
  .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
919
925
  outline: none;
920
926
  }
921
927
 
922
- .m-inputnumber--invalid .m-inputnumber__input:focus-visible,
923
- .m-password--invalid .m-password__input:focus-visible,
924
- .m-datepicker--invalid .m-datepicker__input:focus-visible,
925
928
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
926
929
  .m-inputtags--invalid:focus-within,
927
930
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
@@ -373,6 +373,17 @@
373
373
  opacity: var(--m-opacity-disabled);
374
374
  }
375
375
 
376
+ .m-input-field__control--prefixed .m-input:disabled,
377
+ .m-input-field__control--suffixed .m-input:disabled,
378
+ .m-input-field__control--clearable .m-input:disabled,
379
+ .m-password--disabled .m-password__input,
380
+ .m-inputnumber--disabled .m-inputnumber__input,
381
+ .m-datepicker--disabled .m-datepicker__input,
382
+ .m-icon-field--anchored .m-input:disabled,
383
+ .m-icon-field--anchored .m-textarea:disabled {
384
+ opacity: 1;
385
+ }
386
+
376
387
  .m-input::placeholder,
377
388
  .m-textarea::placeholder,
378
389
  .m-password__input::placeholder,
@@ -692,14 +703,6 @@
692
703
  opacity: var(--m-opacity-disabled);
693
704
  }
694
705
 
695
- .m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
696
- padding-left: var(--m-control-affix-padding);
697
- }
698
-
699
- .m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
700
- padding-right: var(--m-control-affix-padding);
701
- }
702
-
703
706
  .m-inputgroup > .m-input,
704
707
  .m-inputgroup > .m-input-field,
705
708
  .m-inputgroup > .m-password-field,
@@ -718,16 +721,22 @@
718
721
 
719
722
  .m-inputgroup > .m-input,
720
723
  .m-inputgroup .m-input,
721
- .m-inputgroup .m-password__input,
722
- .m-inputgroup .m-inputnumber__input {
724
+ .m-inputgroup .m-password,
725
+ .m-inputgroup .m-inputnumber__input-wrap,
726
+ .m-inputgroup .m-input-field__control--prefixed,
727
+ .m-inputgroup .m-input-field__control--suffixed,
728
+ .m-inputgroup .m-input-field__control--clearable {
723
729
  border-radius: 0;
724
730
  width: 100%;
725
731
  }
726
732
 
727
733
  .m-inputgroup > :first-child.m-input,
728
734
  .m-inputgroup > :first-child .m-input,
729
- .m-inputgroup > :first-child .m-password__input,
730
- .m-inputgroup > :first-child .m-inputnumber__input,
735
+ .m-inputgroup > :first-child .m-password,
736
+ .m-inputgroup > :first-child .m-inputnumber__input-wrap,
737
+ .m-inputgroup > :first-child .m-input-field__control--prefixed,
738
+ .m-inputgroup > :first-child .m-input-field__control--suffixed,
739
+ .m-inputgroup > :first-child .m-input-field__control--clearable,
731
740
  .m-inputgroup > :first-child.m-inputgroup-addon {
732
741
  border-bottom-left-radius: var(--m-radius-control);
733
742
  border-top-left-radius: var(--m-radius-control);
@@ -735,8 +744,11 @@
735
744
 
736
745
  .m-inputgroup > :last-child.m-input,
737
746
  .m-inputgroup > :last-child .m-input,
738
- .m-inputgroup > :last-child .m-password__input,
739
- .m-inputgroup > :last-child .m-inputnumber__input,
747
+ .m-inputgroup > :last-child .m-password,
748
+ .m-inputgroup > :last-child .m-inputnumber__input-wrap,
749
+ .m-inputgroup > :last-child .m-input-field__control--prefixed,
750
+ .m-inputgroup > :last-child .m-input-field__control--suffixed,
751
+ .m-inputgroup > :last-child .m-input-field__control--clearable,
740
752
  .m-inputgroup > :last-child.m-inputgroup-addon {
741
753
  border-bottom-right-radius: var(--m-radius-control);
742
754
  border-top-right-radius: var(--m-radius-control);
@@ -887,9 +899,6 @@
887
899
  }
888
900
 
889
901
  /* Shared Naive-like hover/focus for remaining form triggers */
890
- .m-inputnumber__input:hover:not(:disabled):not(:focus),
891
- .m-password__input:hover:not(:disabled):not(:focus),
892
- .m-datepicker__input:hover:not(:disabled):not(:focus),
893
902
  .m-inputotp__input:hover:not(:disabled):not(:focus),
894
903
  .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
895
904
  .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +909,6 @@
900
909
  border-color: var(--m-color-primary-hover);
901
910
  }
902
911
 
903
- .m-inputnumber__input:focus-visible,
904
- .m-password__input:focus-visible,
905
- .m-datepicker__input:focus-visible,
906
912
  .m-inputotp__input:focus-visible,
907
913
  .m-cascadeselect__trigger:focus-visible,
908
914
  .m-treeselect__trigger:focus-visible,
@@ -919,9 +925,6 @@
919
925
  outline: none;
920
926
  }
921
927
 
922
- .m-inputnumber--invalid .m-inputnumber__input:focus-visible,
923
- .m-password--invalid .m-password__input:focus-visible,
924
- .m-datepicker--invalid .m-datepicker__input:focus-visible,
925
928
  .m-inputotp--invalid .m-inputotp__input:focus-visible,
926
929
  .m-inputtags--invalid:focus-within,
927
930
  .m-inputcolor--invalid .m-inputcolor__text:focus-visible {
@@ -1,5 +1,5 @@
1
1
  import { n as e } from "../useComponentAttrs-BTYEe61P.js";
2
- import { t } from "../Icon-DfpIfo2L.js";
2
+ import { t } from "../Icon-B6IBrJ5S.js";
3
3
  import { t as n } from "../useMId-BXFYayPP.js";
4
4
  import { t as r } from "../useFieldFeedback-C5qIqYMK.js";
5
5
  import { o as i } from "../config-BdK5ccNT.js";