morya-ui 0.4.3 → 0.4.4

package/dist/components/Message/styles.css

@@ -1,248 +1,248 @@
-/* —— Feedback: Message —— */
-.m-message-host {
-    --m-message-host-max-width: 28rem;
-    display: flex;
-    flex-direction: column;
-    gap: var(--m-space-2);
-    left: 50%;
-    max-width: min(
-        var(--m-message-host-max-width),
-        calc(100vw - 2 * var(--m-space-4))
-    );
-    pointer-events: none;
-    position: fixed;
-    top: var(--m-space-4);
-    transform: translateX(-50%);
-    width: max-content;
-    z-index: var(--m-z-toast);
-}
-
-.m-message-host--top-left {
-    left: var(--m-space-4);
-    transform: none;
-}
-
-.m-message-host--top-right {
-    left: auto;
-    right: var(--m-space-4);
-    transform: none;
-}
-
-.m-message-host--bottom,
-.m-message-host--bottom-left,
-.m-message-host--bottom-right {
-    bottom: var(--m-space-4);
-    flex-direction: column-reverse;
-    top: auto;
-}
-
-.m-message-host--bottom-left {
-    left: var(--m-space-4);
-    transform: none;
-}
-
-.m-message-host--bottom-right {
-    left: auto;
-    right: var(--m-space-4);
-    transform: none;
-}
-
-.m-message {
-    --m-message-min-width: 16rem;
-    background: color-mix(
-        in srgb,
-        var(--m-color-info) 10%,
-        var(--m-color-surface)
-    );
-    border: var(--m-border-width) solid
-        color-mix(in srgb, var(--m-color-info) 28%, var(--m-color-border));
-    border-radius: var(--m-radius-md);
-    box-shadow: var(--m-shadow-md);
-    color: var(--m-color-text);
-    display: flex;
-    align-items: center;
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-md);
-    gap: var(--m-space-3);
-    line-height: 1.45;
-    min-width: var(--m-message-min-width);
-    padding: var(--m-space-3) var(--m-space-4);
-    pointer-events: auto;
-}
-
-.m-message__icon {
-    color: var(--m-color-info);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.m-message__content {
-    flex: 1 1 auto;
-    min-width: 0;
-}
-
-.m-message__close {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-text-muted);
-    cursor: pointer;
-    display: inline-flex;
-    flex-shrink: 0;
-    font: inherit;
-    height: var(--m-control-affix-size);
-    justify-content: center;
-    line-height: 1;
-    padding: 0;
-    transition:
-        background-color var(--m-motion-fast) var(--m-motion-ease),
-        color var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-control-affix-size);
-}
-
-.m-message__close:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
-    color: var(--m-color-text);
-}
-
-.m-message__close:focus-visible {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-message--success {
-    background: color-mix(
-        in srgb,
-        var(--m-color-success) 10%,
-        var(--m-color-surface)
-    );
-    border-color: color-mix(
-        in srgb,
-        var(--m-color-success) 28%,
-        var(--m-color-border)
-    );
-}
-
-.m-message--success .m-message__icon {
-    color: var(--m-color-success);
-}
-
-.m-message--info {
-    background: color-mix(
-        in srgb,
-        var(--m-color-info) 10%,
-        var(--m-color-surface)
-    );
-    border-color: color-mix(
-        in srgb,
-        var(--m-color-info) 28%,
-        var(--m-color-border)
-    );
-}
-
-.m-message--info .m-message__icon {
-    color: var(--m-color-info);
-}
-
-.m-message--warning {
-    background: color-mix(
-        in srgb,
-        var(--m-color-warning) 10%,
-        var(--m-color-surface)
-    );
-    border-color: color-mix(
-        in srgb,
-        var(--m-color-warning) 28%,
-        var(--m-color-border)
-    );
-}
-
-.m-message--warning .m-message__icon {
-    color: var(--m-color-warning);
-}
-
-.m-message--danger {
-    background: color-mix(
-        in srgb,
-        var(--m-color-danger) 10%,
-        var(--m-color-surface)
-    );
-    border-color: color-mix(
-        in srgb,
-        var(--m-color-danger) 28%,
-        var(--m-color-border)
-    );
-}
-
-.m-message--danger .m-message__icon {
-    color: var(--m-color-danger);
-}
-
-.m-message--secondary {
-    background: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 10%,
-        var(--m-color-surface)
-    );
-    border-color: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 22%,
-        var(--m-color-border)
-    );
-}
-
-.m-message--secondary .m-message__icon {
-    color: var(--m-color-text-muted);
-}
-
-.m-message--contrast {
-    background: var(--m-color-contrast);
-    border-color: var(--m-color-contrast);
-    color: var(--m-color-contrast-fg);
-}
-
-.m-message--contrast .m-message__icon,
-.m-message--contrast .m-message__close {
-    color: var(--m-color-contrast-fg);
-}
-
-.m-message-slide-enter-active {
-    transition:
-        opacity var(--m-motion-enter) var(--m-motion-ease),
-        transform var(--m-motion-enter) var(--m-motion-ease);
-}
-
-.m-message-slide-leave-active {
-    transition:
-        opacity var(--m-motion-exit) var(--m-motion-ease),
-        transform var(--m-motion-exit) var(--m-motion-ease);
-}
-
-.m-message-slide-enter-from,
-.m-message-slide-leave-to {
-    opacity: 0;
-    transform: translateY(calc(var(--m-motion-distance) * -1));
-}
-
-.m-message-slide-move {
-    transition: transform var(--m-motion-enter) var(--m-motion-ease);
-}
-
-[data-m-motion="reduced"] .m-message-slide-enter-active,
-[data-m-motion="reduced"] .m-message-slide-leave-active,
-[data-m-motion="reduced"] .m-message-slide-move,
-[data-m-motion="none"] .m-message-slide-enter-active,
-[data-m-motion="none"] .m-message-slide-leave-active,
-[data-m-motion="none"] .m-message-slide-move {
-    transition: none;
-}
-
-[data-m-motion="reduced"] .m-message-slide-enter-from,
-[data-m-motion="reduced"] .m-message-slide-leave-to,
-[data-m-motion="none"] .m-message-slide-enter-from,
-[data-m-motion="none"] .m-message-slide-leave-to {
-    transform: none;
-}
+/* —— Feedback: Message —— */
+.m-message-host {
+    --m-message-host-max-width: 28rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-2);
+    left: 50%;
+    max-width: min(
+        var(--m-message-host-max-width),
+        calc(100vw - 2 * var(--m-space-4))
+    );
+    pointer-events: none;
+    position: fixed;
+    top: var(--m-space-4);
+    transform: translateX(-50%);
+    width: max-content;
+    z-index: var(--m-z-toast);
+}
+
+.m-message-host--top-left {
+    left: var(--m-space-4);
+    transform: none;
+}
+
+.m-message-host--top-right {
+    left: auto;
+    right: var(--m-space-4);
+    transform: none;
+}
+
+.m-message-host--bottom,
+.m-message-host--bottom-left,
+.m-message-host--bottom-right {
+    bottom: var(--m-space-4);
+    flex-direction: column-reverse;
+    top: auto;
+}
+
+.m-message-host--bottom-left {
+    left: var(--m-space-4);
+    transform: none;
+}
+
+.m-message-host--bottom-right {
+    left: auto;
+    right: var(--m-space-4);
+    transform: none;
+}
+
+.m-message {
+    --m-message-min-width: 16rem;
+    background: color-mix(
+        in srgb,
+        var(--m-color-info) 10%,
+        var(--m-color-surface)
+    );
+    border: var(--m-border-width) solid
+        color-mix(in srgb, var(--m-color-info) 28%, var(--m-color-border));
+    border-radius: var(--m-radius-md);
+    box-shadow: var(--m-shadow-md);
+    color: var(--m-color-text);
+    display: flex;
+    align-items: center;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-md);
+    gap: var(--m-space-3);
+    line-height: 1.45;
+    min-width: var(--m-message-min-width);
+    padding: var(--m-space-3) var(--m-space-4);
+    pointer-events: auto;
+}
+
+.m-message__icon {
+    color: var(--m-color-info);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.m-message__content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.m-message__close {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text-muted);
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    font: inherit;
+    height: var(--m-control-affix-size);
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        color var(--m-motion-fast) var(--m-motion-ease);
+    width: var(--m-control-affix-size);
+}
+
+.m-message__close:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    color: var(--m-color-text);
+}
+
+.m-message__close:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-message--success {
+    background: color-mix(
+        in srgb,
+        var(--m-color-success) 10%,
+        var(--m-color-surface)
+    );
+    border-color: color-mix(
+        in srgb,
+        var(--m-color-success) 28%,
+        var(--m-color-border)
+    );
+}
+
+.m-message--success .m-message__icon {
+    color: var(--m-color-success);
+}
+
+.m-message--info {
+    background: color-mix(
+        in srgb,
+        var(--m-color-info) 10%,
+        var(--m-color-surface)
+    );
+    border-color: color-mix(
+        in srgb,
+        var(--m-color-info) 28%,
+        var(--m-color-border)
+    );
+}
+
+.m-message--info .m-message__icon {
+    color: var(--m-color-info);
+}
+
+.m-message--warning {
+    background: color-mix(
+        in srgb,
+        var(--m-color-warning) 10%,
+        var(--m-color-surface)
+    );
+    border-color: color-mix(
+        in srgb,
+        var(--m-color-warning) 28%,
+        var(--m-color-border)
+    );
+}
+
+.m-message--warning .m-message__icon {
+    color: var(--m-color-warning);
+}
+
+.m-message--danger {
+    background: color-mix(
+        in srgb,
+        var(--m-color-danger) 10%,
+        var(--m-color-surface)
+    );
+    border-color: color-mix(
+        in srgb,
+        var(--m-color-danger) 28%,
+        var(--m-color-border)
+    );
+}
+
+.m-message--danger .m-message__icon {
+    color: var(--m-color-danger);
+}
+
+.m-message--secondary {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 10%,
+        var(--m-color-surface)
+    );
+    border-color: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 22%,
+        var(--m-color-border)
+    );
+}
+
+.m-message--secondary .m-message__icon {
+    color: var(--m-color-text-muted);
+}
+
+.m-message--contrast {
+    background: var(--m-color-contrast);
+    border-color: var(--m-color-contrast);
+    color: var(--m-color-contrast-fg);
+}
+
+.m-message--contrast .m-message__icon,
+.m-message--contrast .m-message__close {
+    color: var(--m-color-contrast-fg);
+}
+
+.m-message-slide-enter-active {
+    transition:
+        opacity var(--m-motion-enter) var(--m-motion-ease),
+        transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+.m-message-slide-leave-active {
+    transition:
+        opacity var(--m-motion-exit) var(--m-motion-ease),
+        transform var(--m-motion-exit) var(--m-motion-ease);
+}
+
+.m-message-slide-enter-from,
+.m-message-slide-leave-to {
+    opacity: 0;
+    transform: translateY(calc(var(--m-motion-distance) * -1));
+}
+
+.m-message-slide-move {
+    transition: transform var(--m-motion-enter) var(--m-motion-ease);
+}
+
+[data-m-motion="reduced"] .m-message-slide-enter-active,
+[data-m-motion="reduced"] .m-message-slide-leave-active,
+[data-m-motion="reduced"] .m-message-slide-move,
+[data-m-motion="none"] .m-message-slide-enter-active,
+[data-m-motion="none"] .m-message-slide-leave-active,
+[data-m-motion="none"] .m-message-slide-move {
+    transition: none;
+}
+
+[data-m-motion="reduced"] .m-message-slide-enter-from,
+[data-m-motion="reduced"] .m-message-slide-leave-to,
+[data-m-motion="none"] .m-message-slide-enter-from,
+[data-m-motion="none"] .m-message-slide-leave-to {
+    transform: none;
+}

package/dist/components/MeterGroup/styles.css

@@ -1,49 +1,49 @@
-/* —— Misc: MeterGroup —— */
-.m-metergroup {
-    --m-metergroup-meter-height: var(--m-meter-track-height);
-    --m-metergroup-swatch-size: var(--m-space-3);
-    display: flex;
-    flex-direction: column;
-    gap: var(--m-space-3);
-    width: 100%;
-}
-
-.m-metergroup__meter {
-    background: color-mix(in srgb, var(--m-color-border) 55%, transparent);
-    border-radius: var(--m-radius-full, 999px);
-    display: flex;
-    height: var(--m-metergroup-meter-height);
-    overflow: hidden;
-    width: 100%;
-}
-
-.m-metergroup__segment {
-    background: var(--m-color-primary);
-    height: 100%;
-}
-
-.m-metergroup__legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--m-space-3);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.m-metergroup__legend-item {
-    align-items: center;
-    display: inline-flex;
-    font-size: var(--m-font-size-md);
-    gap: var(--m-space-2);
-}
-
-.m-metergroup__swatch {
-    border-radius: var(--m-radius-sm);
-    height: var(--m-metergroup-swatch-size);
-    width: var(--m-metergroup-swatch-size);
-}
-
-.m-metergroup__value {
-    color: var(--m-color-text-muted);
-}
+/* —— Misc: MeterGroup —— */
+.m-metergroup {
+    --m-metergroup-meter-height: var(--m-meter-track-height);
+    --m-metergroup-swatch-size: var(--m-space-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--m-space-3);
+    width: 100%;
+}
+
+.m-metergroup__meter {
+    background: color-mix(in srgb, var(--m-color-border) 55%, transparent);
+    border-radius: var(--m-radius-full, 999px);
+    display: flex;
+    height: var(--m-metergroup-meter-height);
+    overflow: hidden;
+    width: 100%;
+}
+
+.m-metergroup__segment {
+    background: var(--m-color-primary);
+    height: 100%;
+}
+
+.m-metergroup__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--m-space-3);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.m-metergroup__legend-item {
+    align-items: center;
+    display: inline-flex;
+    font-size: var(--m-font-size-md);
+    gap: var(--m-space-2);
+}
+
+.m-metergroup__swatch {
+    border-radius: var(--m-radius-sm);
+    height: var(--m-metergroup-swatch-size);
+    width: var(--m-metergroup-swatch-size);
+}
+
+.m-metergroup__value {
+    color: var(--m-color-text-muted);
+}