morya-ui 0.2.7 → 0.2.9

package/dist/components/Input/styles.css

@@ -46,16 +46,156 @@
     position: relative;
 }
 
+/*
+ * Affix/clear shell: prefix/suffix participate in flex flow so long slot
+ * content reserves real width instead of fighting fixed input padding.
+ */
 .m-input-field__control--prefixed,
-.m-input-field__control--suffixed {
+.m-input-field__control--suffixed,
+.m-input-field__control--clearable {
     align-items: center;
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-control);
+    box-sizing: border-box;
     display: flex;
+    max-width: 100%;
+    min-height: var(--m-control-height-medium);
+    transition:
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease),
+        background-color var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-input-field--fluid .m-input-field__control--prefixed,
+.m-input-field--fluid .m-input-field__control--suffixed,
+.m-input-field--fluid .m-input-field__control--clearable {
+    width: 100%;
+}
+
+.m-input-field__control--prefixed:has(.m-input--small),
+.m-input-field__control--suffixed:has(.m-input--small),
+.m-input-field__control--clearable:has(.m-input--small),
+.m-input-field__control--prefixed:has(.m-input--sm),
+.m-input-field__control--suffixed:has(.m-input--sm),
+.m-input-field__control--clearable:has(.m-input--sm) {
+    min-height: var(--m-control-height-small);
+}
+
+.m-input-field__control--prefixed:has(.m-input--large),
+.m-input-field__control--suffixed:has(.m-input--large),
+.m-input-field__control--clearable:has(.m-input--large),
+.m-input-field__control--prefixed:has(.m-input--lg),
+.m-input-field__control--suffixed:has(.m-input--lg),
+.m-input-field__control--clearable:has(.m-input--lg) {
+    min-height: var(--m-control-height-large);
+}
+
+.m-input-field__control--prefixed:has(.m-input--filled),
+.m-input-field__control--suffixed:has(.m-input--filled),
+.m-input-field__control--clearable:has(.m-input--filled) {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        var(--m-color-surface)
+    );
+    border-color: transparent;
+}
+
+.m-input-field__control--prefixed:has(.m-input--invalid),
+.m-input-field__control--suffixed:has(.m-input--invalid),
+.m-input-field__control--clearable:has(.m-input--invalid) {
+    border-color: var(--m-color-danger);
+}
+
+.m-input-field__control--prefixed:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ),
+.m-input-field__control--suffixed:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ),
+.m-input-field__control--clearable:hover:not(:focus-within):has(
+        .m-input:not(:disabled)
+    ) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-input-field__control--prefixed:focus-within,
+.m-input-field__control--suffixed:focus-within,
+.m-input-field__control--clearable:focus-within {
+    border-color: var(--m-color-primary-hover);
+    box-shadow: var(--m-focus-shadow);
+}
+
+.m-input-field__control--prefixed:has(.m-input--invalid):focus-within,
+.m-input-field__control--suffixed:has(.m-input--invalid):focus-within,
+.m-input-field__control--clearable:has(.m-input--invalid):focus-within {
+    border-color: var(--m-color-danger);
+    box-shadow: var(--m-focus-shadow-danger);
+}
+
+.m-input-field__control--prefixed:has(.m-input:disabled),
+.m-input-field__control--suffixed:has(.m-input:disabled),
+.m-input-field__control--clearable:has(.m-input:disabled) {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
 }
 
 .m-input-field__control--prefixed .m-input,
-.m-input-field__control--suffixed .m-input {
+.m-input-field__control--suffixed .m-input,
+.m-input-field__control--clearable .m-input {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
     flex: 1 1 auto;
+    height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    min-height: 0;
     min-width: 0;
+    width: auto;
+}
+
+.m-input-field__control--prefixed:has(.m-input--small) .m-input,
+.m-input-field__control--suffixed:has(.m-input--small) .m-input,
+.m-input-field__control--clearable:has(.m-input--small) .m-input,
+.m-input-field__control--prefixed:has(.m-input--sm) .m-input,
+.m-input-field__control--suffixed:has(.m-input--sm) .m-input,
+.m-input-field__control--clearable:has(.m-input--sm) .m-input {
+    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+}
+
+.m-input-field__control--prefixed:has(.m-input--large) .m-input,
+.m-input-field__control--suffixed:has(.m-input--large) .m-input,
+.m-input-field__control--clearable:has(.m-input--large) .m-input,
+.m-input-field__control--prefixed:has(.m-input--lg) .m-input,
+.m-input-field__control--suffixed:has(.m-input--lg) .m-input,
+.m-input-field__control--clearable:has(.m-input--lg) .m-input {
+    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+}
+
+.m-input-field__control--prefixed .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--suffixed .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--clearable .m-input:hover:not(:disabled):not(:focus),
+.m-input-field__control--prefixed .m-input:focus-visible,
+.m-input-field__control--suffixed .m-input:focus-visible,
+.m-input-field__control--clearable .m-input:focus-visible,
+.m-input-field__control--prefixed .m-input--invalid:focus-visible,
+.m-input-field__control--suffixed .m-input--invalid:focus-visible,
+.m-input-field__control--clearable .m-input--invalid:focus-visible {
+    border-color: transparent;
+    box-shadow: none;
+}
+
+.m-input-field__control--prefixed .m-input {
+    padding-left: 0;
+}
+
+.m-input-field__control--suffixed .m-input,
+.m-input-field__control--clearable.m-input-field__control--suffixed .m-input {
+    padding-right: 0;
 }
 
 .m-input__prefix,
@@ -64,41 +204,33 @@
     color: var(--m-color-text-muted);
     display: inline-flex;
     flex: 0 0 auto;
-    font-size: var(--m-font-size-md);
+    font-size: inherit;
     gap: var(--m-space-1);
     line-height: 1;
+    padding-inline: var(--m-space-2);
     pointer-events: none;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-}
-
-.m-input__prefix {
-    left: var(--m-control-padding-x-medium);
-}
-
-.m-input__suffix {
-    right: var(--m-control-padding-x-medium);
-}
-
-.m-input-field__control--clearable .m-input__suffix {
-    right: var(--m-control-affix-gap);
+    white-space: nowrap;
 }
 
-.m-input--has-prefix {
-    padding-left: var(--m-control-affix-gap);
+.m-input-field__control--prefixed .m-input__prefix,
+.m-input-field__control--suffixed .m-input__suffix {
+    font-size: var(--m-control-font-medium);
 }
 
-.m-input--has-suffix {
-    padding-right: var(--m-control-affix-gap);
+.m-input-field__control:has(.m-input--small) .m-input__prefix,
+.m-input-field__control:has(.m-input--small) .m-input__suffix,
+.m-input-field__control:has(.m-input--sm) .m-input__prefix,
+.m-input-field__control:has(.m-input--sm) .m-input__suffix {
+    font-size: var(--m-control-font-small);
+    padding-inline: var(--m-space-2);
 }
 
-.m-input-field__control--clearable.m-input-field__control--suffixed
-    .m-input--has-suffix {
-    padding-right: calc(
-        var(--m-control-affix-padding) + var(--m-control-affix-gap)
-    );
+.m-input-field__control:has(.m-input--large) .m-input__prefix,
+.m-input-field__control:has(.m-input--large) .m-input__suffix,
+.m-input-field__control:has(.m-input--lg) .m-input__prefix,
+.m-input-field__control:has(.m-input--lg) .m-input__suffix {
+    font-size: var(--m-control-font-large);
+    padding-inline: var(--m-space-3);
 }
 
 .m-input__prefix button,
@@ -115,6 +247,7 @@
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
     font-size: var(--m-control-font-medium);
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
     min-height: var(--m-control-height-medium);
     padding: 0 var(--m-control-padding-x-medium);
     transition:
@@ -144,12 +277,14 @@
 .m-input--small,
 .m-input--sm {
     font-size: var(--m-control-font-small);
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
     min-height: var(--m-control-height-small);
     padding: 0 var(--m-control-padding-x-small);
 }
 
 .m-input--normal {
     font-size: var(--m-control-font-medium);
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
     min-height: var(--m-control-height-medium);
     padding: 0 var(--m-control-padding-x-medium);
 }
@@ -157,6 +292,7 @@
 .m-input--large,
 .m-input--lg {
     font-size: var(--m-control-font-large);
+    line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
     min-height: var(--m-control-height-large);
     padding: 0 var(--m-control-padding-x-large);
 }
@@ -165,24 +301,27 @@
     width: 100%;
 }
 
+.m-input-field__control--prefixed .m-input,
+.m-input-field__control--suffixed .m-input,
+.m-input-field__control--clearable .m-input {
+    width: auto;
+}
+
 .m-input__clear {
     align-items: center;
+    align-self: center;
     background: transparent;
     border: 0;
     border-radius: var(--m-radius-sm);
     color: var(--m-color-text-muted);
     cursor: pointer;
     display: flex;
+    flex: 0 0 auto;
     font-size: var(--m-font-size-lg);
     height: var(--m-control-affix-size);
     justify-content: center;
     padding: 0;
-    position: absolute;
-    right: var(--m-space-1);
-    top: 50%;
-    transform: translateY(-50%);
     width: var(--m-control-affix-size);
-    z-index: 1;
 }
 
 .m-input__clear:hover:not(:disabled) {

package/dist/components/InputNumber/styles.css

@@ -39,99 +39,163 @@
 
 .m-inputnumber__input-wrap {
     align-items: center;
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-control);
+    box-sizing: border-box;
     display: flex;
-    position: relative;
+    max-width: 100%;
+    min-height: var(--m-control-height-medium);
+    transition:
+        border-color var(--m-motion-fast) var(--m-motion-ease),
+        box-shadow var(--m-motion-fast) var(--m-motion-ease);
     width: var(--m-inputnumber-width);
 }
 
+.m-inputnumber--fluid .m-inputnumber__input-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+}
+
+.m-inputnumber__input-wrap:hover:has(.m-inputnumber__input:not(:disabled)):not(
+        :focus-within
+    ) {
+    border-color: var(--m-color-primary-hover);
+}
+
+.m-inputnumber__input-wrap:focus-within {
+    border-color: var(--m-color-primary-hover);
+    box-shadow: var(--m-focus-shadow);
+}
+
+.m-inputnumber--invalid .m-inputnumber__input-wrap {
+    border-color: var(--m-color-danger);
+}
+
+.m-inputnumber--invalid .m-inputnumber__input-wrap:focus-within {
+    box-shadow: var(--m-focus-shadow-danger);
+}
+
+.m-inputnumber--buttons .m-inputnumber__input-wrap {
+    border-radius: 0;
+}
+
 .m-inputnumber__prefix,
 .m-inputnumber__suffix {
+    align-items: center;
     color: var(--m-color-text-muted);
+    display: inline-flex;
     flex: 0 0 auto;
     padding-inline: var(--m-space-2);
+    white-space: nowrap;
 }
 
-.m-inputnumber--fluid .m-inputnumber__input-wrap {
+.m-inputnumber__input {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: var(--m-color-text);
     flex: 1 1 auto;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-medium) - 2 * var(--m-border-width));
+    min-height: 0;
     min-width: 0;
-    width: auto;
+    padding: 0 var(--m-control-padding-x-medium);
+    width: 100%;
 }
 
-.m-inputnumber__input-wrap .m-inputnumber__input {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
+.m-inputnumber__input-wrap:has(.m-inputnumber__prefix) .m-inputnumber__input {
+    padding-left: 0;
 }
 
-.m-inputnumber__input-wrap .m-inputnumber__clear {
+.m-inputnumber__input-wrap:has(.m-inputnumber__suffix) .m-inputnumber__input {
+    padding-right: 0;
+}
+
+.m-inputnumber__input:focus,
+.m-inputnumber__input:focus-visible {
+    box-shadow: none;
+    outline: none;
+}
+
+.m-inputnumber__clear {
     align-items: center;
+    align-self: center;
     background: transparent;
     border: 0;
     border-radius: var(--m-radius-sm);
     color: var(--m-color-text-muted);
     cursor: pointer;
     display: flex;
+    flex: 0 0 auto;
     height: var(--m-control-affix-size);
     justify-content: center;
     padding: 0;
-    position: absolute;
-    right: var(--m-space-1);
-    top: 50%;
-    transform: translateY(-50%);
     width: var(--m-control-affix-size);
-    z-index: 1;
 }
 
-.m-inputnumber__input-wrap .m-inputnumber__clear:hover:not(:disabled) {
+.m-inputnumber__clear:hover:not(:disabled) {
     color: var(--m-color-text);
 }
 
-.m-inputnumber__input-wrap .m-inputnumber__clear:focus-visible {
+.m-inputnumber__clear:focus-visible {
     box-shadow: var(--m-focus-shadow);
     outline: none;
 }
 
-.m-inputnumber__input-wrap .m-inputnumber__clear:disabled {
+.m-inputnumber__clear:disabled {
     cursor: not-allowed;
     opacity: var(--m-opacity-disabled);
 }
 
-.m-inputnumber__input {
-    background: var(--m-color-surface);
-    border: var(--m-border-width) solid var(--m-color-border);
-    border-radius: var(--m-radius-control);
-    color: var(--m-color-text);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-control-font-medium);
-    min-height: var(--m-control-height-medium);
-    min-width: 0;
-    padding: 0 var(--m-control-padding-x-medium);
-    transition:
-        border-color var(--m-motion-fast) var(--m-motion-ease),
-        box-shadow var(--m-motion-fast) var(--m-motion-ease),
-        background-color var(--m-motion-fast) var(--m-motion-ease),
-        opacity var(--m-motion-fast) var(--m-motion-ease);
-}
-
 .m-inputnumber--buttons .m-inputnumber__input {
-    border-radius: 0;
     text-align: center;
 }
 
 .m-inputnumber--small .m-inputnumber__input,
 .m-inputnumber--small .m-inputnumber__button {
-    min-height: var(--m-control-height-small);
     font-size: var(--m-control-font-small);
+    min-height: var(--m-control-height-small);
+}
+
+.m-inputnumber--small .m-inputnumber__input {
+    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    min-height: 0;
+}
+
+.m-inputnumber--small .m-inputnumber__input-wrap {
+    min-height: var(--m-control-height-small);
+}
+
+.m-inputnumber--small .m-inputnumber__prefix,
+.m-inputnumber--small .m-inputnumber__suffix {
+    padding-inline: var(--m-space-2);
 }
 
 .m-inputnumber--large .m-inputnumber__input,
 .m-inputnumber--large .m-inputnumber__button {
-    min-height: var(--m-control-height-large);
     font-size: var(--m-control-font-large);
+    min-height: var(--m-control-height-large);
 }
 
-.m-inputnumber--invalid .m-inputnumber__input {
-    border-color: var(--m-color-danger);
+.m-inputnumber--large .m-inputnumber__input {
+    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    line-height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    min-height: 0;
+}
+
+.m-inputnumber--large .m-inputnumber__input-wrap {
+    min-height: var(--m-control-height-large);
+}
+
+.m-inputnumber--large .m-inputnumber__prefix,
+.m-inputnumber--large .m-inputnumber__suffix {
+    padding-inline: var(--m-space-3);
 }
 
 .m-inputnumber__button {
@@ -175,12 +239,11 @@
 }
 
 .m-inputnumber__button:disabled,
-.m-inputnumber--disabled .m-inputnumber__input {
+.m-inputnumber--disabled .m-inputnumber__input-wrap {
     cursor: not-allowed;
     opacity: var(--m-opacity-disabled);
 }
 
-.m-inputnumber__input:focus-visible,
 .m-inputnumber__button:focus-visible {
     box-shadow: var(--m-focus-shadow);
     outline: none;

package/dist/components/InputPassword/InputPassword.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputPassword.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputPassword/InputPassword.vue"],"names":[],"mappings":"AA6RA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAoLjD,iBAAS,KAAK,SAEb;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,MAAM,SAEd;AAyOD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOjD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"InputPassword.vue.d.ts","sourceRoot":"","sources":["../../../src/components/InputPassword/InputPassword.vue"],"names":[],"mappings":"AA8RA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAC;AAEnC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAqLjD,iBAAS,KAAK,SAEb;AAED,iBAAS,IAAI,SAEZ;AAED,iBAAS,MAAM,SAEd;AAyOD,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAOjD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAKd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}