morya-ui 0.2.8 → 0.3.0

package/dist/inplace/index.js

@@ -1,4 +1,4 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import "./style.js";
 import { computed as t, createElementBlock as n, defineComponent as r, mergeProps as i, nextTick as a, onBeforeUnmount as o, openBlock as s, ref as c, renderSlot as l, unref as u, useAttrs as d, watch as f, withKeys as p, withModifiers as m } from "vue";
 //#region src/components/Inplace/Inplace.vue?vue&type=script&setup=true&lang.ts

package/dist/inplace/style.css

@@ -60,9 +60,22 @@
     --m-z-toast: calc(var(--m-z-base) + 100);
     --m-z-popper: 40;
 
-    --m-control-affix-size: 2rem;
+    /* Affix hitbox tracks control height so small/compact shells do not overflow */
+    --m-control-affix-size: calc(
+        var(--m-control-height-medium) - 2 * var(--m-border-width)
+    );
     --m-control-affix-gap: 2.35rem;
     --m-control-affix-padding: 2.5rem;
+    --m-meter-track-height: var(--m-space-5);
+    --m-tree-toggler-size: var(--m-checkbox-control-size);
+    --m-nav-rail-width: 12.5rem;
+    --m-nav-rail-collapsed-width: 4rem;
+    --m-layout-header-height: calc(
+        var(--m-control-height-medium) + 2 * var(--m-space-3)
+    );
+    --m-layout-footer-height: calc(
+        var(--m-control-height-medium) + 2 * var(--m-space-2)
+    );
     --m-space-1: 0.25rem;
     --m-space-2: 0.5rem;
     --m-space-3: 0.75rem;
@@ -80,7 +93,7 @@
     --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
     --m-motion-enter: 180ms;
     --m-motion-exit: 130ms;
-    --m-motion-distance: 0.5rem;
+    --m-motion-distance: 1rem;
     --m-motion-spin: 1s;
     --m-motion-spin-dash: 1.5s;
     --m-motion-spin-fast: 0.8s;
@@ -89,6 +102,11 @@
     --m-motion-pulse: 1.2s;
     --m-motion-scrollbar-show: 340ms;
     --m-motion-scrollbar-hide: 120ms;
+    --m-motion-loading-aurora: 3s;
+    --m-motion-loading-bounce: 0.6s;
+    --m-motion-loading-pulse: 1.8s;
+    --m-motion-loading-stardust: 1.6s;
+    --m-motion-loading-circular-rotate: 2s;
     --m-dataview-grid-min: 10rem;
     --m-tree-indent: 0.7rem;
     --m-tree-indent-padding: var(--m-space-3);
@@ -135,6 +153,20 @@
     --m-motion-enter: 100ms;
     --m-motion-exit: 80ms;
     --m-motion-distance: 0;
+    /* Looping indicators: keep a short pulse so state is still perceptible */
+    --m-motion-spin: 0ms;
+    --m-motion-spin-dash: 0ms;
+    --m-motion-spin-fast: 0ms;
+    --m-motion-spin-medium: 0ms;
+    --m-motion-skeleton: 0ms;
+    --m-motion-pulse: 0ms;
+    --m-motion-scrollbar-show: 160ms;
+    --m-motion-scrollbar-hide: 80ms;
+    --m-motion-loading-aurora: 0ms;
+    --m-motion-loading-bounce: 0ms;
+    --m-motion-loading-pulse: 0ms;
+    --m-motion-loading-stardust: 0ms;
+    --m-motion-loading-circular-rotate: 0ms;
 }
 
 :root[data-m-motion="none"] {
@@ -143,6 +175,64 @@
     --m-motion-enter: 0ms;
     --m-motion-exit: 0ms;
     --m-motion-distance: 0;
+    --m-motion-spin: 0ms;
+    --m-motion-spin-dash: 0ms;
+    --m-motion-spin-fast: 0ms;
+    --m-motion-spin-medium: 0ms;
+    --m-motion-skeleton: 0ms;
+    --m-motion-pulse: 0ms;
+    --m-motion-scrollbar-show: 0ms;
+    --m-motion-scrollbar-hide: 0ms;
+    --m-motion-loading-aurora: 0ms;
+    --m-motion-loading-bounce: 0ms;
+    --m-motion-loading-pulse: 0ms;
+    --m-motion-loading-stardust: 0ms;
+    --m-motion-loading-circular-rotate: 0ms;
+}
+
+/*
+ * Global motion policy (complements per-component rules):
+ * - `reduced` / OS prefers-reduced-motion: keep short paint transitions; stop loops
+ *   and layout/transform size animation.
+ * - `none`: zero all transition/animation durations.
+ */
+@media (prefers-reduced-motion: reduce) {
+    html:not([data-m-ignore-reduced-motion]) *,
+    html:not([data-m-ignore-reduced-motion]) *::before,
+    html:not([data-m-ignore-reduced-motion]) *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-property: background-color, border-color, color, opacity, box-shadow,
+            outline, fill, stroke, stroke-dashoffset !important;
+    }
+}
+
+[data-m-motion="reduced"] *,
+[data-m-motion="reduced"] *::before,
+[data-m-motion="reduced"] *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property: background-color, border-color, color, opacity, box-shadow, outline,
+        fill, stroke, stroke-dashoffset !important;
+}
+
+[data-m-motion="none"] *,
+[data-m-motion="none"] *::before,
+[data-m-motion="none"] *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+}
+
+/* Off-screen looping indicators (usePauseOffscreen → data-m-anim-paused) */
+[data-m-anim-paused],
+[data-m-anim-paused]::before,
+[data-m-anim-paused]::after,
+[data-m-anim-paused] *,
+[data-m-anim-paused] *::before,
+[data-m-anim-paused] *::after {
+    animation-play-state: paused !important;
 }
 
 /* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
@@ -158,6 +248,8 @@
     --m-control-affix-padding: 2.15rem;
     --m-control-affix-gap: 2rem;
     --m-checkbox-control-size: 1rem;
+    --m-nav-rail-width: 15rem;
+    --m-nav-rail-collapsed-width: 3.25rem;
     --m-space-1: 0.2rem;
     --m-space-2: 0.4rem;
     --m-space-3: 0.6rem;
@@ -185,6 +277,8 @@
     --m-control-affix-padding: 2.85rem;
     --m-control-affix-gap: 2.65rem;
     --m-checkbox-control-size: 1.25rem;
+    --m-nav-rail-width: 18rem;
+    --m-nav-rail-collapsed-width: 4.5rem;
     --m-space-1: 0.3rem;
     --m-space-2: 0.6rem;
     --m-space-3: 0.9rem;
@@ -215,11 +309,6 @@
     --m-layout-footer-height: 2.5rem;
 }
 
-[data-m-density="compact"] .m-layout-sider {
-    --m-layout-sider-width: 15rem;
-    --m-layout-sider-collapsed-width: 3.25rem;
-}
-
 [data-m-density="spacious"] .m-layout-header {
     --m-layout-header-height: 4rem;
 }
@@ -228,11 +317,6 @@
     --m-layout-footer-height: 3.5rem;
 }
 
-[data-m-density="spacious"] .m-layout-sider {
-    --m-layout-sider-width: 18rem;
-    --m-layout-sider-collapsed-width: 4.5rem;
-}
-
 [data-theme="dark"] {
     --m-color-primary: #60a5fa;
     --m-color-primary-hover: #93c5fd;
@@ -319,6 +403,8 @@
 .m-datepicker,
 .m-listbox,
 .m-togglebutton,
+.m-select,
+.m-textarea,
 .m-selectbutton,
 .m-inputotp,
 .m-knob,
@@ -373,6 +459,17 @@
     opacity: var(--m-opacity-disabled);
 }
 
+.m-input-field__control--prefixed .m-input:disabled,
+.m-input-field__control--suffixed .m-input:disabled,
+.m-input-field__control--clearable .m-input:disabled,
+.m-password--disabled .m-password__input,
+.m-inputnumber--disabled .m-inputnumber__input,
+.m-datepicker--disabled .m-datepicker__input,
+.m-icon-field--anchored .m-input:disabled,
+.m-icon-field--anchored .m-textarea:disabled {
+    opacity: 1;
+}
+
 .m-input::placeholder,
 .m-textarea::placeholder,
 .m-password__input::placeholder,
@@ -477,7 +574,7 @@
 .m-scale-fade-enter-from,
 .m-scale-fade-leave-to {
     opacity: 0;
-    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.98);
+    transform: translateY(calc(var(--m-motion-distance) * -1)) scale(0.96);
 }
 
 .m-slide-fade-enter-active {
@@ -498,20 +595,101 @@
     transform: translateY(calc(var(--m-motion-distance) * -1));
 }
 
+/* Generic center zoom (opacity + scale on the transitioning root) */
+.m-zoom-enter-active {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-zoom-leave-active {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-zoom-enter-from,
+.m-zoom-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.m-slide-up-enter-active,
+.m-slide-down-enter-active,
+.m-slide-left-enter-active,
+.m-slide-right-enter-active {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-slide-up-leave-active,
+.m-slide-down-leave-active,
+.m-slide-left-leave-active,
+.m-slide-right-leave-active {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-slide-up-enter-from,
+.m-slide-up-leave-to {
+    opacity: 0;
+    transform: translateY(var(--m-motion-distance));
+}
+
+.m-slide-down-enter-from,
+.m-slide-down-leave-to {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-slide-left-enter-from,
+.m-slide-left-leave-to {
+    opacity: 0;
+    transform: translateX(var(--m-motion-distance));
+}
+
+.m-slide-right-enter-from,
+.m-slide-right-leave-to {
+    opacity: 0;
+    transform: translateX(calc(var(--m-motion-distance) * -1));
+}
+
 @media (prefers-reduced-motion: reduce) {
     html:not([data-m-ignore-reduced-motion]) .m-fade-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-fade-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-active,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-active,
     html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-active,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active {
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-active,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-active {
         transition: none;
     }
 
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-enter-from,
     html:not([data-m-ignore-reduced-motion]) .m-scale-fade-leave-to,
     html:not([data-m-ignore-reduced-motion]) .m-slide-fade-enter-from,
-    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to {
+    html:not([data-m-ignore-reduced-motion]) .m-slide-fade-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-zoom-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-up-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-down-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-left-leave-to,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-enter-from,
+    html:not([data-m-ignore-reduced-motion]) .m-slide-right-leave-to {
         transform: none;
     }
 }
@@ -522,12 +700,32 @@
 [data-m-motion="reduced"] .m-scale-fade-leave-active,
 [data-m-motion="reduced"] .m-slide-fade-enter-active,
 [data-m-motion="reduced"] .m-slide-fade-leave-active,
+[data-m-motion="reduced"] .m-zoom-enter-active,
+[data-m-motion="reduced"] .m-zoom-leave-active,
+[data-m-motion="reduced"] .m-slide-up-enter-active,
+[data-m-motion="reduced"] .m-slide-up-leave-active,
+[data-m-motion="reduced"] .m-slide-down-enter-active,
+[data-m-motion="reduced"] .m-slide-down-leave-active,
+[data-m-motion="reduced"] .m-slide-left-enter-active,
+[data-m-motion="reduced"] .m-slide-left-leave-active,
+[data-m-motion="reduced"] .m-slide-right-enter-active,
+[data-m-motion="reduced"] .m-slide-right-leave-active,
 [data-m-motion="none"] .m-fade-enter-active,
 [data-m-motion="none"] .m-fade-leave-active,
 [data-m-motion="none"] .m-scale-fade-enter-active,
 [data-m-motion="none"] .m-scale-fade-leave-active,
 [data-m-motion="none"] .m-slide-fade-enter-active,
-[data-m-motion="none"] .m-slide-fade-leave-active {
+[data-m-motion="none"] .m-slide-fade-leave-active,
+[data-m-motion="none"] .m-zoom-enter-active,
+[data-m-motion="none"] .m-zoom-leave-active,
+[data-m-motion="none"] .m-slide-up-enter-active,
+[data-m-motion="none"] .m-slide-up-leave-active,
+[data-m-motion="none"] .m-slide-down-enter-active,
+[data-m-motion="none"] .m-slide-down-leave-active,
+[data-m-motion="none"] .m-slide-left-enter-active,
+[data-m-motion="none"] .m-slide-left-leave-active,
+[data-m-motion="none"] .m-slide-right-enter-active,
+[data-m-motion="none"] .m-slide-right-leave-active {
     transition: none;
 }
 
@@ -535,10 +733,30 @@
 [data-m-motion="reduced"] .m-scale-fade-leave-to,
 [data-m-motion="reduced"] .m-slide-fade-enter-from,
 [data-m-motion="reduced"] .m-slide-fade-leave-to,
+[data-m-motion="reduced"] .m-zoom-enter-from,
+[data-m-motion="reduced"] .m-zoom-leave-to,
+[data-m-motion="reduced"] .m-slide-up-enter-from,
+[data-m-motion="reduced"] .m-slide-up-leave-to,
+[data-m-motion="reduced"] .m-slide-down-enter-from,
+[data-m-motion="reduced"] .m-slide-down-leave-to,
+[data-m-motion="reduced"] .m-slide-left-enter-from,
+[data-m-motion="reduced"] .m-slide-left-leave-to,
+[data-m-motion="reduced"] .m-slide-right-enter-from,
+[data-m-motion="reduced"] .m-slide-right-leave-to,
 [data-m-motion="none"] .m-scale-fade-enter-from,
 [data-m-motion="none"] .m-scale-fade-leave-to,
 [data-m-motion="none"] .m-slide-fade-enter-from,
-[data-m-motion="none"] .m-slide-fade-leave-to {
+[data-m-motion="none"] .m-slide-fade-leave-to,
+[data-m-motion="none"] .m-zoom-enter-from,
+[data-m-motion="none"] .m-zoom-leave-to,
+[data-m-motion="none"] .m-slide-up-enter-from,
+[data-m-motion="none"] .m-slide-up-leave-to,
+[data-m-motion="none"] .m-slide-down-enter-from,
+[data-m-motion="none"] .m-slide-down-leave-to,
+[data-m-motion="none"] .m-slide-left-enter-from,
+[data-m-motion="none"] .m-slide-left-leave-to,
+[data-m-motion="none"] .m-slide-right-enter-from,
+[data-m-motion="none"] .m-slide-right-leave-to {
     transform: none;
 }
 
@@ -692,14 +910,6 @@
     opacity: var(--m-opacity-disabled);
 }
 
-.m-icon-field--left :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-left: var(--m-control-affix-padding);
-}
-
-.m-icon-field--right :is(.m-input, .m-password__input, .m-inputnumber__input, input) {
-    padding-right: var(--m-control-affix-padding);
-}
-
 .m-inputgroup > .m-input,
 .m-inputgroup > .m-input-field,
 .m-inputgroup > .m-password-field,
@@ -718,16 +928,22 @@
 
 .m-inputgroup > .m-input,
 .m-inputgroup .m-input,
-.m-inputgroup .m-password__input,
-.m-inputgroup .m-inputnumber__input {
+.m-inputgroup .m-password,
+.m-inputgroup .m-inputnumber__input-wrap,
+.m-inputgroup .m-input-field__control--prefixed,
+.m-inputgroup .m-input-field__control--suffixed,
+.m-inputgroup .m-input-field__control--clearable {
     border-radius: 0;
     width: 100%;
 }
 
 .m-inputgroup > :first-child.m-input,
 .m-inputgroup > :first-child .m-input,
-.m-inputgroup > :first-child .m-password__input,
-.m-inputgroup > :first-child .m-inputnumber__input,
+.m-inputgroup > :first-child .m-password,
+.m-inputgroup > :first-child .m-inputnumber__input-wrap,
+.m-inputgroup > :first-child .m-input-field__control--prefixed,
+.m-inputgroup > :first-child .m-input-field__control--suffixed,
+.m-inputgroup > :first-child .m-input-field__control--clearable,
 .m-inputgroup > :first-child.m-inputgroup-addon {
     border-bottom-left-radius: var(--m-radius-control);
     border-top-left-radius: var(--m-radius-control);
@@ -735,8 +951,11 @@
 
 .m-inputgroup > :last-child.m-input,
 .m-inputgroup > :last-child .m-input,
-.m-inputgroup > :last-child .m-password__input,
-.m-inputgroup > :last-child .m-inputnumber__input,
+.m-inputgroup > :last-child .m-password,
+.m-inputgroup > :last-child .m-inputnumber__input-wrap,
+.m-inputgroup > :last-child .m-input-field__control--prefixed,
+.m-inputgroup > :last-child .m-input-field__control--suffixed,
+.m-inputgroup > :last-child .m-input-field__control--clearable,
 .m-inputgroup > :last-child.m-inputgroup-addon {
     border-bottom-right-radius: var(--m-radius-control);
     border-top-right-radius: var(--m-radius-control);
@@ -887,9 +1106,6 @@
 }
 
 /* Shared Naive-like hover/focus for remaining form triggers */
-.m-inputnumber__input:hover:not(:disabled):not(:focus),
-.m-password__input:hover:not(:disabled):not(:focus),
-.m-datepicker__input:hover:not(:disabled):not(:focus),
 .m-inputotp__input:hover:not(:disabled):not(:focus),
 .m-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
 .m-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
@@ -900,9 +1116,6 @@
     border-color: var(--m-color-primary-hover);
 }
 
-.m-inputnumber__input:focus-visible,
-.m-password__input:focus-visible,
-.m-datepicker__input:focus-visible,
 .m-inputotp__input:focus-visible,
 .m-cascadeselect__trigger:focus-visible,
 .m-treeselect__trigger:focus-visible,
@@ -919,9 +1132,6 @@
     outline: none;
 }
 
-.m-inputnumber--invalid .m-inputnumber__input:focus-visible,
-.m-password--invalid .m-password__input:focus-visible,
-.m-datepicker--invalid .m-datepicker__input:focus-visible,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
 .m-inputtags--invalid:focus-within,
 .m-inputcolor--invalid .m-inputcolor__text:focus-visible {

package/dist/input/index.js

@@ -1,15 +1,15 @@
-import { n as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
 import { t as n } from "../useMId-BXFYayPP.js";
-import { i as r, o as i, s as a } from "../config-BdK5ccNT.js";
-import { n as o } from "../locale-B36KH7c3.js";
+import { i as r, o as i, s as ee } from "../config-CapALqt3.js";
+import { n as a } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useSlots as x } from "vue";
+import { computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useAttrs as y, useSlots as b } from "vue";
 //#region src/components/Input/Input.vue?vue&type=script&setup=true&lang.ts
-var S = ["for"], C = {
+var x = ["for"], S = {
 	key: 0,
 	class: "m-input__prefix"
-}, w = [
+}, C = [
 	"id",
 	"type",
 	"value",
@@ -22,13 +22,13 @@ var S = ["for"], C = {
 	"autofocus",
 	"aria-invalid",
 	"aria-describedby"
-], T = {
+], w = {
 	key: 1,
 	class: "m-input__suffix"
-}, E = ["aria-label", "disabled"], D = {
+}, T = ["aria-label", "disabled"], E = {
 	key: 1,
 	class: "m-input-field__meta"
-}, O = ["id", "role"], k = ["id"], A = /* @__PURE__ */ f({
+}, D = ["id", "role"], te = ["id"], O = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "Input",
 	props: {
@@ -78,100 +78,98 @@ var S = ["for"], C = {
 		"blur",
 		"change"
 	],
-	setup(f, { expose: A, emit: j }) {
-		let M = f, N = j, P = b(), { rootAttrs: F, controlAttrs: I } = e(P, () => M.pt), L = x(), R = r("Input"), z = o(), B = g(null), V = n("m-input"), H = s(() => M.id ?? V), U = s(() => M.invalid || !!M.errorMessage), W = i("Input", () => M.size), ee = a("Input", () => M.variant), G = s(() => M.clearable ?? R.value.clearable ?? !1), K = s(() => M.showCount ?? R.value.showCount ?? !1), q = s(() => M.fluid ?? R.value.fluid ?? !1), J = s(() => M.modelValue.length), Y = s(() => M.maxlength == null ? String(J.value) : `${J.value} / ${M.maxlength}`), X = s(() => M.errorMessage || M.helpText), Z = s(() => !!M.errorMessage || U.value && !!M.helpText), Q = s(() => !!L.prefix), $ = s(() => !!L.suffix), te = s(() => {
+	setup(d, { expose: O, emit: k }) {
+		let A = d, j = k, M = y(), { rootAttrs: N, controlAttrs: P } = e(M, () => A.pt), F = b(), I = r("Input"), L = a(), R = h(null), z = n("m-input"), B = o(() => A.id ?? z), V = o(() => A.invalid || !!A.errorMessage), H = i("Input", () => A.size), U = ee("Input", () => A.variant), ne = o(() => A.clearable ?? I.value.clearable ?? !1), W = o(() => A.showCount ?? I.value.showCount ?? !1), G = o(() => A.fluid ?? I.value.fluid ?? !1), K = o(() => A.modelValue.length), q = o(() => A.maxlength == null ? String(K.value) : `${K.value} / ${A.maxlength}`), J = o(() => A.errorMessage || A.helpText), Y = o(() => !!A.errorMessage || V.value && !!A.helpText), X = o(() => !!F.prefix), Z = o(() => !!F.suffix), re = o(() => {
 			let e = [];
-			return X.value && e.push(`${H.value}-help`), K.value && e.push(`${H.value}-count`), e.length ? e.join(" ") : void 0;
-		}), ne = s(() => [
+			return J.value && e.push(`${B.value}-help`), W.value && e.push(`${B.value}-count`), e.length ? e.join(" ") : void 0;
+		}), ie = o(() => [
 			"m-input",
-			`m-input--${W.value}`,
+			`m-input--${H.value}`,
 			{
-				"m-input--filled": ee.value === "filled",
-				"m-input--fluid": q.value,
-				"m-input--invalid": U.value,
-				"m-input--has-prefix": Q.value,
-				"m-input--has-suffix": $.value
+				"m-input--filled": U.value === "filled",
+				"m-input--fluid": G.value,
+				"m-input--invalid": V.value
 			}
-		]);
-		function re(e) {
-			N("update:modelValue", e.target.value);
+		]), Q = o(() => ne.value && !!A.modelValue), ae = o(() => ({
+			"m-input-field__control--clearable": Q.value,
+			"m-input-field__control--counted": W.value,
+			"m-input-field__control--prefixed": X.value,
+			"m-input-field__control--suffixed": Z.value
+		}));
+		function oe(e) {
+			j("update:modelValue", e.target.value);
 		}
-		function ie() {
-			M.disabled || M.readonly || (N("update:modelValue", ""), N("clear"), B.value?.focus());
+		function $() {
+			A.disabled || A.readonly || (j("update:modelValue", ""), j("clear"), R.value?.focus());
 		}
-		function ae() {
-			B.value?.focus();
+		function se() {
+			R.value?.focus();
 		}
-		function oe() {
-			B.value?.blur();
+		function ce() {
+			R.value?.blur();
 		}
-		function se() {
-			B.value?.select();
+		function le() {
+			R.value?.select();
 		}
-		return A({
-			focus: ae,
-			blur: oe,
-			select: se
-		}), (e, n) => (h(), l("div", p(y(F), { class: ["m-input-field", { "m-input-field--fluid": q.value }] }), [
-			f.label ? (h(), l("label", {
+		return O({
+			focus: se,
+			blur: ce,
+			select: le
+		}), (e, n) => (m(), c("div", f(v(N), { class: ["m-input-field", { "m-input-field--fluid": G.value }] }), [
+			d.label ? (m(), c("label", {
 				key: 0,
 				class: "m-input-field__label",
-				for: H.value
-			}, v(f.label), 9, S)) : c("", !0),
-			u("div", { class: m(["m-input-field__control", {
-				"m-input-field__control--clearable": G.value && f.modelValue,
-				"m-input-field__control--counted": K.value,
-				"m-input-field__control--prefixed": Q.value,
-				"m-input-field__control--suffixed": !!e.$slots.suffix
-			}]) }, [
-				e.$slots.prefix ? (h(), l("span", C, [_(e.$slots, "prefix")])) : c("", !0),
-				u("input", p(y(I), {
-					id: H.value,
+				for: B.value
+			}, _(d.label), 9, x)) : s("", !0),
+			l("div", { class: p(["m-input-field__control", ae.value]) }, [
+				X.value ? (m(), c("span", S, [g(e.$slots, "prefix")])) : s("", !0),
+				l("input", f(v(P), {
+					id: B.value,
 					ref_key: "inputElement",
-					ref: B,
-					class: ne.value,
-					type: f.type,
-					value: f.modelValue,
-					disabled: f.disabled,
-					readonly: f.readonly,
-					maxlength: f.maxlength,
-					placeholder: f.placeholder,
-					name: f.name,
-					autocomplete: f.autocomplete,
-					autofocus: f.autofocus || void 0,
-					"aria-invalid": U.value || void 0,
-					"aria-describedby": te.value,
-					onInput: re,
-					onFocus: n[0] ||= (e) => N("focus", e),
-					onBlur: n[1] ||= (e) => N("blur", e),
-					onChange: n[2] ||= (e) => N("change", e.target.value)
-				}), null, 16, w),
-				e.$slots.suffix ? (h(), l("span", T, [_(e.$slots, "suffix")])) : c("", !0),
-				G.value && f.modelValue ? (h(), l("button", {
+					ref: R,
+					class: ie.value,
+					type: d.type,
+					value: d.modelValue,
+					disabled: d.disabled,
+					readonly: d.readonly,
+					maxlength: d.maxlength,
+					placeholder: d.placeholder,
+					name: d.name,
+					autocomplete: d.autocomplete,
+					autofocus: d.autofocus || void 0,
+					"aria-invalid": V.value || void 0,
+					"aria-describedby": re.value,
+					onInput: oe,
+					onFocus: n[0] ||= (e) => j("focus", e),
+					onBlur: n[1] ||= (e) => j("blur", e),
+					onChange: n[2] ||= (e) => j("change", e.target.value)
+				}), null, 16, C),
+				Z.value ? (m(), c("span", w, [g(e.$slots, "suffix")])) : s("", !0),
+				Q.value ? (m(), c("button", {
 					key: 2,
 					class: "m-input__clear",
 					type: "button",
-					"aria-label": y(z).clearInput,
-					disabled: f.disabled || f.readonly,
-					onClick: ie
-				}, [d(t, {
+					"aria-label": v(L).clearInput,
+					disabled: d.disabled || d.readonly,
+					onClick: $
+				}, [u(t, {
 					name: "close",
 					size: "sm"
-				})], 8, E)) : c("", !0)
+				})], 8, T)) : s("", !0)
 			], 2),
-			X.value || K.value ? (h(), l("div", D, [X.value ? (h(), l("span", {
+			J.value || W.value ? (m(), c("div", E, [J.value ? (m(), c("span", {
 				key: 0,
-				id: `${H.value}-help`,
-				class: m(["m-input-field__help", { "m-input-field__help--invalid": Z.value }]),
-				role: Z.value ? "alert" : void 0
-			}, v(X.value), 11, O)) : c("", !0), K.value ? (h(), l("span", {
+				id: `${B.value}-help`,
+				class: p(["m-input-field__help", { "m-input-field__help--invalid": Y.value }]),
+				role: Y.value ? "alert" : void 0
+			}, _(J.value), 11, D)) : s("", !0), W.value ? (m(), c("span", {
 				key: 1,
-				id: `${H.value}-count`,
+				id: `${B.value}-count`,
 				class: "m-input-field__count",
 				"aria-live": "polite"
-			}, v(Y.value), 9, k)) : c("", !0)])) : c("", !0)
+			}, _(q.value), 9, te)) : s("", !0)])) : s("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { A as MInput };
+export { O as MInput };