morya-ui 0.3.3 → 0.3.5

package/dist/shared/gap.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'vue';
 export type MGapToken = 'small' | 'medium' | 'large';
-export type MGapSize = MGapToken | number | [number, number];
+/** Token, px number, CSS length string (`8px`, `1rem`, `var(--m-space-4)`), or `[col, row]`. */
+export type MGapSize = MGapToken | number | string | [number | string, number | string];
 export interface ResolvedGap {
     /** CSS length for row gap (vertical). */
     row: string;
@@ -9,6 +10,8 @@ export interface ResolvedGap {
     /** Combined `gap` shorthand. */
     css: string;
 }
+/** Resolve one gap axis to a CSS length. */
+export declare function resolveGapLength(size: string | number): string;
 /** Resolve Space / Flex / Grid gap tokens to CSS lengths. */
 export declare function resolveGapCSSValue(size: MGapSize | string | number | undefined | null): string;
 /** Resolve Space / Flex size prop into CSS gap lengths. */

package/dist/shared/gap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gap.d.ts","sourceRoot":"","sources":["../../src/shared/gap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAQ5D,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAA;IACX,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAClD,MAAM,CAcR;AACD,2DAA2D;AAC3D,wBAAgB,UAAU,CAAC,IAAI,GAAE,QAAmB,GAAG,WAAW,CAYjE;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAC5E,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAA;AAElB,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC,YAAY,CAAC,CAK5E;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,YAAsB,GAC9B,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAI9C;AAED,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,GACf,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAG7C"}
+{"version":3,"file":"gap.d.ts","sourceRoot":"","sources":["../../src/shared/gap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AACpD,gGAAgG;AAChG,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAQtC,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAA;IACX,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,gCAAgC;IAChC,GAAG,EAAE,MAAM,CAAA;CACZ;AAMD,4CAA4C;AAC5C,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAO9D;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAClD,MAAM,CAIR;AAED,2DAA2D;AAC3D,wBAAgB,UAAU,CAAC,IAAI,GAAE,QAAmB,GAAG,WAAW,CAQjE;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAC5E,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,KAAK,GACL,QAAQ,GACR,cAAc,GACd,eAAe,GACf,cAAc,CAAA;AAElB,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,aAAa,CAAC,YAAY,CAAC,CAK5E;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,YAAsB,GAC9B,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAI9C;AAED,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,GACf,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAG7C"}

package/dist/shared/styles/control-affix-icon.css

@@ -1,110 +1,110 @@
-/* Normalize inline icons inside compact control affordances (clear, toggle, chevrons). */
-.m-input__clear,
-.m-password__clear,
-.m-password__toggle,
-.m-textarea__clear,
-.m-select__clear,
-.m-select__indicator,
-.m-autocomplete__clear,
-.m-autocomplete__dropdown,
-.m-datepicker__clear,
-.m-datepicker__nav,
-.m-inputnumber__clear,
-.m-inputnumber__button,
-.m-inputtags__remove,
-.m-treeselect__clear,
-.m-treeselect__indicator,
-.m-cascadeselect__clear,
-.m-cascadeselect__indicator {
-    --m-affix-icon-size: 1rem;
-}
-
-.m-input-field__control:has(.m-input--small) .m-input__clear,
-.m-password--small .m-password__clear,
-.m-password--small .m-password__toggle,
-.m-textarea-field__control:has(.m-textarea--small) .m-textarea__clear,
-.m-select__control:has(.m-select--small) .m-select__clear,
-.m-select__control:has(.m-select--small) .m-select__indicator,
-.m-autocomplete--small .m-autocomplete__clear,
-.m-autocomplete--small .m-autocomplete__dropdown,
-.m-datepicker--small .m-datepicker__clear,
-.m-datepicker--small .m-datepicker__nav,
-.m-inputnumber--small .m-inputnumber__clear,
-.m-inputnumber--small .m-inputnumber__button,
-.m-select__control:has(.m-treeselect--small) .m-treeselect__clear,
-.m-select__control:has(.m-treeselect--small) .m-treeselect__indicator,
-.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__clear,
-.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__indicator {
-    --m-affix-icon-size: 0.875rem;
-}
-
-.m-input-field__control:has(.m-input--large) .m-input__clear,
-.m-password--large .m-password__clear,
-.m-password--large .m-password__toggle,
-.m-textarea-field__control:has(.m-textarea--large) .m-textarea__clear,
-.m-select__control:has(.m-select--large) .m-select__clear,
-.m-select__control:has(.m-select--large) .m-select__indicator,
-.m-autocomplete--large .m-autocomplete__clear,
-.m-autocomplete--large .m-autocomplete__dropdown,
-.m-datepicker--large .m-datepicker__clear,
-.m-datepicker--large .m-datepicker__nav,
-.m-inputnumber--large .m-inputnumber__clear,
-.m-inputnumber--large .m-inputnumber__button,
-.m-select__control:has(.m-treeselect--large) .m-treeselect__clear,
-.m-select__control:has(.m-treeselect--large) .m-treeselect__indicator,
-.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__clear,
-.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__indicator {
-    --m-affix-icon-size: 1.125rem;
-}
-
-.m-control-affix-icon,
-.m-input__clear,
-.m-password__clear,
-.m-password__toggle,
-.m-textarea__clear,
-.m-autocomplete__clear,
-.m-autocomplete__dropdown,
-.m-datepicker__clear,
-.m-datepicker__nav,
-.m-inputnumber__clear,
-.m-inputnumber__button,
-.m-inputtags__remove,
-.m-treeselect__clear,
-.m-treeselect__indicator,
-.m-cascadeselect__clear,
-.m-cascadeselect__indicator {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    line-height: 0;
-}
-
-.m-control-affix-icon {
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size, 1rem);
-    width: var(--m-affix-icon-size, 1rem);
-}
-
-.m-input__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-password__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-password__toggle :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-textarea__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-select__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-select__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-autocomplete__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-autocomplete__dropdown :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-datepicker__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-datepicker__nav :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputnumber__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputnumber__button :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-inputtags__remove :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-treeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-treeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-cascadeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-cascadeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
-.m-control-affix-icon :is(.m-icon, .m-control-affix-icon__graphic, svg) {
-    display: block;
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size, 1rem);
-    width: var(--m-affix-icon-size, 1rem);
-}
+/* Normalize inline icons inside compact control affordances (clear, toggle, chevrons). */
+.m-input__clear,
+.m-password__clear,
+.m-password__toggle,
+.m-textarea__clear,
+.m-select__clear,
+.m-select__indicator,
+.m-autocomplete__clear,
+.m-autocomplete__dropdown,
+.m-datepicker__clear,
+.m-datepicker__nav,
+.m-inputnumber__clear,
+.m-inputnumber__button,
+.m-inputtags__remove,
+.m-treeselect__clear,
+.m-treeselect__indicator,
+.m-cascadeselect__clear,
+.m-cascadeselect__indicator {
+    --m-affix-icon-size: 1rem;
+}
+
+.m-input-field__control:has(.m-input--small) .m-input__clear,
+.m-password--small .m-password__clear,
+.m-password--small .m-password__toggle,
+.m-textarea-field__control:has(.m-textarea--small) .m-textarea__clear,
+.m-select__control:has(.m-select--small) .m-select__clear,
+.m-select__control:has(.m-select--small) .m-select__indicator,
+.m-autocomplete--small .m-autocomplete__clear,
+.m-autocomplete--small .m-autocomplete__dropdown,
+.m-datepicker--small .m-datepicker__clear,
+.m-datepicker--small .m-datepicker__nav,
+.m-inputnumber--small .m-inputnumber__clear,
+.m-inputnumber--small .m-inputnumber__button,
+.m-select__control:has(.m-treeselect--small) .m-treeselect__clear,
+.m-select__control:has(.m-treeselect--small) .m-treeselect__indicator,
+.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__clear,
+.m-select__control:has(.m-cascadeselect--small) .m-cascadeselect__indicator {
+    --m-affix-icon-size: 0.875rem;
+}
+
+.m-input-field__control:has(.m-input--large) .m-input__clear,
+.m-password--large .m-password__clear,
+.m-password--large .m-password__toggle,
+.m-textarea-field__control:has(.m-textarea--large) .m-textarea__clear,
+.m-select__control:has(.m-select--large) .m-select__clear,
+.m-select__control:has(.m-select--large) .m-select__indicator,
+.m-autocomplete--large .m-autocomplete__clear,
+.m-autocomplete--large .m-autocomplete__dropdown,
+.m-datepicker--large .m-datepicker__clear,
+.m-datepicker--large .m-datepicker__nav,
+.m-inputnumber--large .m-inputnumber__clear,
+.m-inputnumber--large .m-inputnumber__button,
+.m-select__control:has(.m-treeselect--large) .m-treeselect__clear,
+.m-select__control:has(.m-treeselect--large) .m-treeselect__indicator,
+.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__clear,
+.m-select__control:has(.m-cascadeselect--large) .m-cascadeselect__indicator {
+    --m-affix-icon-size: 1.125rem;
+}
+
+.m-control-affix-icon,
+.m-input__clear,
+.m-password__clear,
+.m-password__toggle,
+.m-textarea__clear,
+.m-autocomplete__clear,
+.m-autocomplete__dropdown,
+.m-datepicker__clear,
+.m-datepicker__nav,
+.m-inputnumber__clear,
+.m-inputnumber__button,
+.m-inputtags__remove,
+.m-treeselect__clear,
+.m-treeselect__indicator,
+.m-cascadeselect__clear,
+.m-cascadeselect__indicator {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+}
+
+.m-control-affix-icon {
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size, 1rem);
+    width: var(--m-affix-icon-size, 1rem);
+}
+
+.m-input__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-password__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-password__toggle :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-textarea__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-select__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-select__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-autocomplete__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-autocomplete__dropdown :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-datepicker__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-datepicker__nav :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputnumber__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputnumber__button :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-inputtags__remove :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-treeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-treeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-cascadeselect__clear :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-cascadeselect__indicator :is(.m-icon, .m-control-affix-icon__graphic, svg),
+.m-control-affix-icon :is(.m-icon, .m-control-affix-icon__graphic, svg) {
+    display: block;
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size, 1rem);
+    width: var(--m-affix-icon-size, 1rem);
+}

package/dist/shared/styles/control-suffix.css

@@ -1,118 +1,118 @@
-/* Shared picker suffix slot: clear + dropdown indicator (Select, TreeSelect). */
-.m-select__control {
-    --m-control-end-padding: var(--m-control-affix-padding);
-    position: relative;
-    width: 100%;
-}
-
-.m-select__suffix {
-    align-items: center;
-    display: block;
-    height: min(
-        var(--m-control-affix-size),
-        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
-    );
-    max-height: 100%;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: min(
-        var(--m-control-affix-size),
-        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
-    );
-}
-
-.m-select__clear {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text-muted);
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    inset: 0;
-    justify-content: center;
-    opacity: 0;
-    padding: 0;
-    pointer-events: none;
-    position: absolute;
-    transition: opacity var(--m-motion-fast) var(--m-motion-ease);
-    width: 100%;
-    z-index: 1;
-}
-
-.m-select__control--clearable:not(.m-select__control--open):hover .m-select__clear,
-.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.m-select__clear:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-select__indicator {
-    align-items: center;
-    color: var(--m-color-text-muted);
-    display: flex;
-    height: 100%;
-    inset: 0;
-    justify-content: center;
-    pointer-events: none;
-    position: absolute;
-    transition:
-        opacity var(--m-motion-fast) var(--m-motion-ease),
-        transform var(--m-motion-fast) var(--m-motion-ease);
-    width: 100%;
-}
-
-.m-select__control--clearable:not(.m-select__control--open):hover .m-select__indicator,
-.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible ~ .m-select__indicator {
-    opacity: 0;
-}
-
-.m-select__indicator--open {
-    transform: rotate(180deg);
-}
-
-.m-select__suffix {
-    --m-affix-icon-size: 1rem;
-}
-
-.m-select__control:has(.m-select--small) .m-select__suffix,
-.m-select__control:has(.m-select--sm) .m-select__suffix,
-.m-select__control:has(.m-treeselect--small) .m-select__suffix,
-.m-select__control:has(.m-cascadeselect--small) .m-select__suffix {
-    --m-affix-icon-size: 0.875rem;
-    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
-    width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
-}
-
-.m-select__control:has(.m-select--large) .m-select__suffix,
-.m-select__control:has(.m-select--lg) .m-select__suffix,
-.m-select__control:has(.m-treeselect--large) .m-select__suffix,
-.m-select__control:has(.m-cascadeselect--large) .m-select__suffix {
-    --m-affix-icon-size: 1.125rem;
-    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
-    width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
-}
-
-.m-select__suffix .m-select__clear .m-icon,
-.m-select__suffix .m-select__indicator .m-icon,
-.m-select__suffix .m-control-affix-icon {
-    flex-shrink: 0;
-    height: var(--m-affix-icon-size);
-    width: var(--m-affix-icon-size);
-}
-
-.m-select__suffix .m-select__clear .m-icon svg,
-.m-select__suffix .m-select__indicator .m-icon svg,
-.m-select__suffix .m-control-affix-icon svg {
-    display: block;
-    height: 100%;
-    width: 100%;
-}
+/* Shared picker suffix slot: clear + dropdown indicator (Select, TreeSelect). */
+.m-select__control {
+    --m-control-end-padding: var(--m-control-affix-padding);
+    position: relative;
+    width: 100%;
+}
+
+.m-select__suffix {
+    align-items: center;
+    display: block;
+    height: min(
+        var(--m-control-affix-size),
+        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
+    );
+    max-height: 100%;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: min(
+        var(--m-control-affix-size),
+        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
+    );
+}
+
+.m-select__clear {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    inset: 0;
+    justify-content: center;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: opacity var(--m-motion-fast) var(--m-motion-ease);
+    width: 100%;
+    z-index: 1;
+}
+
+.m-select__control--clearable:not(.m-select__control--open):hover .m-select__clear,
+.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.m-select__clear:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-select__indicator {
+    align-items: center;
+    color: var(--m-color-text-muted);
+    display: flex;
+    height: 100%;
+    inset: 0;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    transition:
+        opacity var(--m-motion-fast) var(--m-motion-ease),
+        transform var(--m-motion-fast) var(--m-motion-ease);
+    width: 100%;
+}
+
+.m-select__control--clearable:not(.m-select__control--open):hover .m-select__indicator,
+.m-select__control--clearable:not(.m-select__control--open) .m-select__clear:focus-visible ~ .m-select__indicator {
+    opacity: 0;
+}
+
+.m-select__indicator--open {
+    transform: rotate(180deg);
+}
+
+.m-select__suffix {
+    --m-affix-icon-size: 1rem;
+}
+
+.m-select__control:has(.m-select--small) .m-select__suffix,
+.m-select__control:has(.m-select--sm) .m-select__suffix,
+.m-select__control:has(.m-treeselect--small) .m-select__suffix,
+.m-select__control:has(.m-cascadeselect--small) .m-select__suffix {
+    --m-affix-icon-size: 0.875rem;
+    height: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+    width: calc(var(--m-control-height-small) - 2 * var(--m-border-width));
+}
+
+.m-select__control:has(.m-select--large) .m-select__suffix,
+.m-select__control:has(.m-select--lg) .m-select__suffix,
+.m-select__control:has(.m-treeselect--large) .m-select__suffix,
+.m-select__control:has(.m-cascadeselect--large) .m-select__suffix {
+    --m-affix-icon-size: 1.125rem;
+    height: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+    width: calc(var(--m-control-height-large) - 2 * var(--m-border-width));
+}
+
+.m-select__suffix .m-select__clear .m-icon,
+.m-select__suffix .m-select__indicator .m-icon,
+.m-select__suffix .m-control-affix-icon {
+    flex-shrink: 0;
+    height: var(--m-affix-icon-size);
+    width: var(--m-affix-icon-size);
+}
+
+.m-select__suffix .m-select__clear .m-icon svg,
+.m-select__suffix .m-select__indicator .m-icon svg,
+.m-select__suffix .m-control-affix-icon svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}