morya-ui 0.4.2 → 0.4.4

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%;
+}