morya-ui 0.2.8 → 0.3.0

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

@@ -8,13 +8,20 @@
 .m-select__suffix {
     align-items: center;
     display: block;
-    height: var(--m-control-affix-size);
+    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: var(--m-space-1);
+    right: 0;
     top: 50%;
     transform: translateY(-50%);
-    width: var(--m-control-affix-size);
+    width: min(
+        var(--m-control-affix-size),
+        calc(var(--m-control-height-medium) - 2 * var(--m-border-width))
+    );
 }
 
 .m-select__clear {
@@ -81,6 +88,8 @@
 .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,
@@ -88,6 +97,8 @@
 .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,

package/dist/shared/styles/select-overlay.css

@@ -0,0 +1,167 @@
+/* Shared floating option-list chrome for form select-likes. */
+
+.m-select__menu,
+.m-autocomplete__panel,
+.m-cascadeselect__panel,
+.m-treeselect__panel {
+    background: var(--m-color-surface);
+    border: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-md);
+    box-shadow: var(--m-shadow-md);
+    margin-top: var(--m-space-2);
+    overflow: hidden;
+    z-index: var(--m-z-popper);
+}
+
+.m-select__menu--teleported,
+.m-autocomplete__panel--teleported,
+.m-cascadeselect__panel--teleported,
+.m-treeselect__panel--teleported {
+    margin-top: 0;
+    position: fixed;
+    z-index: var(--m-z-dropdown);
+}
+
+.m-select__list-view,
+.m-autocomplete__panel-list,
+.m-cascadeselect__column-list {
+    display: grid;
+    gap: var(--m-space-1);
+}
+
+.m-select__option,
+.m-autocomplete__item,
+.m-cascadeselect__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text);
+    cursor: pointer;
+    display: flex;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    gap: var(--m-space-3);
+    justify-content: space-between;
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    text-align: left;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        color var(--m-motion-fast) var(--m-motion-ease);
+    white-space: nowrap;
+}
+
+.m-select__option:hover:not(:disabled),
+.m-select__option--highlighted:not(:disabled),
+.m-autocomplete__item:hover,
+.m-autocomplete__item--active,
+.m-cascadeselect__option:hover:not(:disabled),
+.m-cascadeselect__option--highlighted:not(:disabled) {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    color: var(--m-color-primary);
+}
+
+.m-select__option--selected,
+.m-cascadeselect__option--selected {
+    color: var(--m-color-primary);
+    font-weight: 600;
+}
+
+.m-cascadeselect__option--in-path {
+    font-weight: 600;
+}
+
+.m-select__check,
+.m-cascadeselect__check {
+    color: var(--m-color-primary);
+    flex: 0 0 auto;
+}
+
+.m-select__option:disabled,
+.m-cascadeselect__option:disabled {
+    color: var(--m-color-text-muted);
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-select__option:focus-visible,
+.m-autocomplete__item:focus-visible,
+.m-cascadeselect__option:focus-visible {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
+    outline: none;
+}
+
+.m-select__empty,
+.m-autocomplete__status {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-md);
+    list-style: none;
+    padding: var(--m-space-3);
+    text-align: center;
+}
+
+/* TreeSelect options share interaction chrome; row layout keeps the expand toggler. */
+.m-treeselect__option {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-text);
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    font-family: var(--m-font-sans);
+    font-size: var(--m-control-font-medium);
+    min-height: var(--m-control-height-medium);
+    padding: 0 var(--m-control-padding-x-medium);
+    text-align: left;
+    transition:
+        background-color var(--m-motion-fast) var(--m-motion-ease),
+        color var(--m-motion-fast) var(--m-motion-ease);
+}
+
+.m-treeselect__option:hover:not(:disabled),
+.m-treeselect__node--active > .m-treeselect__row .m-treeselect__option:not(:disabled) {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    color: var(--m-color-primary);
+}
+
+.m-treeselect__option--selected {
+    color: var(--m-color-primary);
+    font-weight: 600;
+}
+
+.m-treeselect__option:focus-visible {
+    background: color-mix(in srgb, var(--m-color-primary) 10%, transparent);
+    box-shadow: none;
+    outline: none;
+}
+
+.m-treeselect__option:disabled {
+    color: var(--m-color-text-muted);
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+}
+
+.m-select__filter,
+.m-treeselect__filter {
+    background: var(--m-color-surface);
+    border: 0;
+    border-bottom: var(--m-border-width) solid var(--m-color-border);
+    border-radius: var(--m-radius-sm);
+    box-sizing: border-box;
+    color: var(--m-color-text);
+    flex: 0 0 auto;
+    font: inherit;
+    margin: calc(var(--m-space-1) * -1) calc(var(--m-space-1) * -1) 0;
+    padding: var(--m-space-2) var(--m-space-3);
+    width: calc(100% + var(--m-space-1) * 2);
+}
+
+.m-select__filter:focus-visible,
+.m-treeselect__filter:focus-visible {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}

package/dist/shared/useFloatingViewportSync.d.ts

@@ -0,0 +1,10 @@
+import { WatchSource } from 'vue';
+/**
+ * Attach window resize + capture-phase scroll listeners while a floating overlay is active.
+ * Callers supply the reposition callback; this only owns attach/detach lifecycle.
+ */
+export declare function useFloatingViewportSync(active: WatchSource<boolean>, onChange: () => void): {
+    attach: () => void;
+    detach: () => void;
+};
+//# sourceMappingURL=useFloatingViewportSync.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingViewportSync.d.ts","sourceRoot":"","sources":["../../src/shared/useFloatingViewportSync.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,KAAK,CAAA;AAE9D;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI;;;EA6BzF"}

package/dist/shared/usePauseOffscreen.d.ts

@@ -0,0 +1,14 @@
+import { MaybeRefOrGetter, Ref, ComputedRef } from 'vue';
+/**
+ * Pause CSS animations on looping indicators while the target is off-screen.
+ * Bind `pauseAttrs` on the animated root (supports `::before` / `::after` via theme CSS).
+ */
+export declare function usePauseOffscreen(el: Ref<Element | null | undefined>, enabled?: MaybeRefOrGetter<boolean>): {
+    paused: Ref<boolean, boolean>;
+    pauseAttrs: ComputedRef<{
+        readonly 'data-m-anim-paused': "";
+    } | {
+        readonly 'data-m-anim-paused'?: undefined;
+    }>;
+};
+//# sourceMappingURL=usePauseOffscreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePauseOffscreen.d.ts","sourceRoot":"","sources":["../../src/shared/usePauseOffscreen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAGhD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EACnC,OAAO,GAAE,gBAAgB,CAAC,OAAO,CAAQ;;;;;;;EAmC1C"}

package/dist/sidebar/index.js

@@ -1,7 +1,7 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-DfpIfo2L.js";
-import { t as n } from "../icon-xUOyawgJ.js";
-import { n as r } from "../locale-B36KH7c3.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-lcN1rS87.js";
+import { t as n } from "../icon-DWXkh-RM.js";
+import { n as r } from "../locale-Bzm2nbEp.js";
 import "./style.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _, useSlots as v } from "vue";
 //#region src/components/Sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts