@txstate-mws/svelte-components 0.0.66 → 1.0.2

package/dist/lib/derivedstore.js

@@ -1,53 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DerivedStore = void 0;
-const deepstore_1 = require("./deepstore");
+exports.derivedStore = exports.DerivedStore = void 0;
+const store_1 = require("./store");
 const txstate_utils_1 = require("txstate-utils");
-const store_1 = require("svelte/store");
 /**
  * Watch one or more parent stores for changes. Each time, run a function to derive
  * a new state from the parent state(s). Subscribers will only be notified if the
  * derived state has changed (uses fast-deep-equal).
  *
  * If only one parent store, it's possible to use a dot-prop string as the getter.
- *
- * If you create one of these in a component, be sure to call .complete() in onDestroy
- * to free up memory.
  */
-class DerivedStore extends deepstore_1.DeepStore {
-    constructor(store, getter) {
+class DerivedStore extends store_1.Store {
+    constructor(store, getter, options) {
         if (typeof getter === 'string') {
             const accessor = getter;
             getter = (parentValue) => (0, txstate_utils_1.get)(parentValue, accessor);
         }
         super({});
         if (Array.isArray(store)) {
-            const values = store.map(store_1.get);
+            const values = [];
+            let timer;
+            const superSet = () => super.set(getter(values));
+            const superSetDebounced = (options === null || options === void 0 ? void 0 : options.debounce) == null || (options === null || options === void 0 ? void 0 : options.debounce) === false || (options === null || options === void 0 ? void 0 : options.debounce) < 0
+                ? superSet
+                : () => {
+                    clearTimeout(timer);
+                    timer = setTimeout(superSet, options.debounce === true ? 0 : options.debounce);
+                };
             for (let i = 0; i < store.length; i++) {
-                let unsubscribe;
-                if (store instanceof deepstore_1.DeepStore) {
-                    unsubscribe = store[i].subscribe(v => {
-                        values[i] = store.clone(v);
-                        super.set(getter(values));
-                    });
+                const idx = i;
+                const st = store[i];
+                if (st instanceof store_1.Store) {
+                    this.registerSource(() => st.subscribe(v => {
+                        values[idx] = st.clone(v);
+                        superSetDebounced();
+                    }));
                 }
                 else {
-                    unsubscribe = store[i].subscribe(v => {
-                        values[i] = v;
-                        super.set(getter(values));
-                    });
+                    this.registerSource(() => st.subscribe(v => {
+                        values[idx] = v;
+                        superSetDebounced();
+                    }));
                 }
-                this.cleanup(unsubscribe);
             }
-            super.set(getter(values));
         }
         else {
-            const unsubscribe = store.subscribe(v => {
-                super.set(getter(v));
-            });
-            this.cleanup(unsubscribe);
+            let timer;
+            const superSet = (v) => super.set(getter(v));
+            const superSetDebounced = (options === null || options === void 0 ? void 0 : options.debounce) == null || (options === null || options === void 0 ? void 0 : options.debounce) === false || (options === null || options === void 0 ? void 0 : options.debounce) < 0
+                ? superSet
+                : (v) => {
+                    clearTimeout(timer);
+                    timer = setTimeout(() => superSet(v), options.debounce === true ? 0 : options.debounce);
+                };
+            this.registerSource(() => store.subscribe(superSetDebounced));
         }
     }
 }
 exports.DerivedStore = DerivedStore;
+function derivedStore(store, getter, options) {
+    return new DerivedStore(store, getter, options);
+}
+exports.derivedStore = derivedStore;
 //# sourceMappingURL=derivedstore.js.map

package/dist/lib/derivedstore.js.map

@@ -1 +1 @@
-{"version":3,"file":"derivedstore.js","sourceRoot":"","sources":["../../src/lib/derivedstore.ts"],"names":[],"mappings":";;;AAAA,2CAAsD;AACtD,iDAAmC;AACnC,wCAA4C;AAE5C;;;;;;;;;GASG;AACH,MAAa,YAA4C,SAAQ,qBAAsB;IAIrF,YAAa,KAA8C,EAAE,MAA6E;QACxI,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC9B,MAAM,QAAQ,GAAG,MAAM,CAAA;YACvB,MAAM,GAAG,CAAC,WAAgB,EAAE,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;SAC1D;QACD,KAAK,CAAC,EAAS,CAAC,CAAA;QAChB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,WAAM,CAAC,CAAA;YAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACrC,IAAI,WAAW,CAAA;gBACf,IAAI,KAAK,YAAY,qBAAS,EAAE;oBAC9B,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;wBACnC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;wBAC1B,KAAK,CAAC,GAAG,CAAE,MAAyC,CAAC,MAAM,CAAC,CAAC,CAAA;oBAC/D,CAAC,CAAC,CAAA;iBACH;qBAAM;oBACL,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;wBACnC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;wBACb,KAAK,CAAC,GAAG,CAAE,MAAyC,CAAC,MAAM,CAAC,CAAC,CAAA;oBAC/D,CAAC,CAAC,CAAA;iBACH;gBACD,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;aAC1B;YACD,KAAK,CAAC,GAAG,CAAE,MAAyC,CAAC,MAAM,CAAC,CAAC,CAAA;SAC9D;aAAM;YACL,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;gBACtC,KAAK,CAAC,GAAG,CAAE,MAAsC,CAAC,CAAC,CAAC,CAAC,CAAA;YACvD,CAAC,CAAC,CAAA;YACF,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;SAC1B;IACH,CAAC;CACF;AAnCD,oCAmCC"}
+{"version":3,"file":"derivedstore.js","sourceRoot":"","sources":["../../src/lib/derivedstore.ts"],"names":[],"mappings":"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"}

package/dist/lib/index.js

@@ -11,10 +11,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./bodyoffset"), exports);
-__exportStar(require("./deepstore"), exports);
+__exportStar(require("./convertedstore"), exports);
 __exportStar(require("./derivedstore"), exports);
+__exportStar(require("./activestore"), exports);
 __exportStar(require("./repositioned"), exports);
 __exportStar(require("./safestore"), exports);
+__exportStar(require("./store"), exports);
 __exportStar(require("./substore"), exports);
 __exportStar(require("./util"), exports);
 //# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA4B;AAC5B,8CAA2B;AAC3B,iDAA8B;AAC9B,iDAA8B;AAC9B,8CAA2B;AAC3B,6CAA0B;AAC1B,yCAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA4B;AAC5B,mDAAgC;AAChC,iDAA8B;AAC9B,gDAA6B;AAC7B,iDAA8B;AAC9B,8CAA2B;AAC3B,0CAAuB;AACvB,6CAA0B;AAC1B,yCAAsB"}

package/dist/lib/safestore.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SafeStore = void 0;
-const deepstore_1 = require("./deepstore");
+const store_1 = require("./store");
 const rfdc_1 = __importDefault(require("rfdc"));
 const cloneDeep = (0, rfdc_1.default)();
-class SafeStore extends deepstore_1.DeepStore {
+class SafeStore extends store_1.Store {
     clone(value) {
         return cloneDeep(value);
     }

package/dist/lib/safestore.js.map

@@ -1 +1 @@
-{"version":3,"file":"safestore.js","sourceRoot":"","sources":["../../src/lib/safestore.ts"],"names":[],"mappings":";;;;;;AAAA,2CAAuC;AACvC,gDAAuB;AACvB,MAAM,SAAS,GAAG,IAAA,cAAI,GAAE,CAAA;AAExB,MAAa,SAAa,SAAQ,qBAAY;IAC5C,KAAK,CAAE,KAAQ;QACb,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;CACF;AAJD,8BAIC"}
+{"version":3,"file":"safestore.js","sourceRoot":"","sources":["../../src/lib/safestore.ts"],"names":[],"mappings":";;;;;;AAAA,mCAA+B;AAC/B,gDAAuB;AACvB,MAAM,SAAS,GAAG,IAAA,cAAI,GAAE,CAAA;AAExB,MAAa,SAAa,SAAQ,aAAQ;IACxC,KAAK,CAAE,KAAQ;QACb,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;CACF;AAJD,8BAIC"}

package/dist/lib/store.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Store = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+const activestore_1 = require("./activestore");
+/**
+ * An alternative to svelte's "writable" that also checks deep equality (fast-deep-equal) before
+ * notifying subscribers. A writable will notify subscribers after a shallow equality check, which
+ * only works for scalars.
+ *
+ * Note that this strategy is weak against mutable state updates:
+ * store.update(v => { v.someprop = 'newvalue'; return v })
+ *
+ * This line would NOT notify subscribers because the state will be compared against
+ * itself and always found to be equal. If you are making updates in a mutable fashion,
+ * use a SafeStore instead.
+ */
+class Store extends activestore_1.ActiveStore {
+    equal(a, b) {
+        return (0, fast_deep_equal_1.default)(a, b);
+    }
+}
+exports.Store = Store;
+//# sourceMappingURL=store.js.map

package/dist/lib/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/lib/store.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAuC;AACvC,+CAA2C;AAE3C;;;;;;;;;;;GAWG;AACH,MAAa,KAAS,SAAQ,yBAAc;IAC1C,KAAK,CAAE,CAAI,EAAE,CAAI;QACf,OAAO,IAAA,yBAAS,EAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACxB,CAAC;CACF;AAJD,sBAIC"}

package/dist/lib/substore.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubStore = void 0;
+exports.subStore = exports.SubStore = void 0;
 const txstate_utils_1 = require("txstate-utils");
-const deepstore_1 = require("./deepstore");
+const store_1 = require("./store");
 /**
  * Create a store that represents a part of a larger store. Updates to the parent store will propagate
  * down to the SubStore as appropriate, and updates to the SubStore will propagate
@@ -14,23 +14,20 @@ const deepstore_1 = require("./deepstore");
  * generated. For example, a parent store containing state { deep: { value: 'here' }, hello: 'world' }
  * could be used with the getter string "deep.value". The SubStore's initial state would be "here", and
  * updating it to "there" would update the parent store state to { deep: { value: 'there' }, hello: 'world' }
- *
- * If you create one of these in a component, be sure to call .complete() in onDestroy to free up memory.
  */
-class SubStore extends deepstore_1.DeepStore {
+class SubStore extends store_1.Store {
     constructor(store, getter, setter) {
+        super({});
         if (typeof getter === 'string') {
             const accessor = getter;
             getter = parentValue => (0, txstate_utils_1.get)(parentValue, accessor);
             setter = (newValue, parentValue) => (0, txstate_utils_1.set)(parentValue, accessor, newValue);
         }
-        super({});
         this.parentStore = store;
         this.setter = setter;
-        const unsubscribe = store.subscribe(v => {
+        this.registerSource(() => store.subscribe(v => {
             super.set(getter(v));
-        });
-        this.cleanup(unsubscribe);
+        }));
     }
     set(value) {
         this.parentStore.update(parentValue => this.setter(value, parentValue));
@@ -43,4 +40,8 @@ class SubStore extends deepstore_1.DeepStore {
     }
 }
 exports.SubStore = SubStore;
+function subStore(store, getter, setter) {
+    return new SubStore(store, getter, setter);
+}
+exports.subStore = subStore;
 //# sourceMappingURL=substore.js.map

package/dist/lib/substore.js.map

@@ -1 +1 @@
-{"version":3,"file":"substore.js","sourceRoot":"","sources":["../../src/lib/substore.ts"],"names":[],"mappings":";;;AAAA,iDAAwC;AACxC,2CAAwD;AAExD;;;;;;;;;;;;;GAaG;AACH,MAAa,QAAoC,SAAQ,qBAAkB;IAMzE,YAAa,KAAkC,EAAE,MAA+C,EAAE,MAA0D;QAC1J,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC9B,MAAM,QAAQ,GAAG,MAAM,CAAA;YACvB,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAClD,MAAM,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;SACzE;QACD,KAAK,CAAC,EAAS,CAAC,CAAA;QAChB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;QACxB,IAAI,CAAC,MAAM,GAAG,MAAO,CAAA;QACrB,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YACtC,KAAK,CAAC,GAAG,CAAE,MAAc,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/B,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;IAC3B,CAAC;IAED,GAAG,CAAE,KAAc;QACjB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IACzE,CAAC;IAED,KAAK,CAAE,KAAc;;QACnB,6EAA6E;QAC7E,sDAAsD;QACtD,OAAO,MAAA,MAAA,MAAC,IAAI,CAAC,WAA8B,0CAAE,KAAK,mDAAG,KAAK,CAAC,mCAAI,KAAK,CAAA;IACtE,CAAC;CACF;AA9BD,4BA8BC"}
+{"version":3,"file":"substore.js","sourceRoot":"","sources":["../../src/lib/substore.ts"],"names":[],"mappings":";;;AAAA,iDAAwC;AACxC,mCAA+B;AAG/B;;;;;;;;;;;GAWG;AACH,MAAa,QAAoC,SAAQ,aAAc;IAIrE,YAAa,KAAkC,EAAE,MAAgE,EAAE,MAA0D;QAC3K,KAAK,CAAC,EAAS,CAAC,CAAA;QAChB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC9B,MAAM,QAAQ,GAAG,MAAM,CAAA;YACvB,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAClD,MAAM,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;SACzE;QACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;QACxB,IAAI,CAAC,MAAM,GAAG,MAAO,CAAA;QACrB,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAC5C,KAAK,CAAC,GAAG,CAAE,MAAc,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/B,CAAC,CAAC,CAAC,CAAA;IACL,CAAC;IAED,GAAG,CAAE,KAAc;QACjB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IACzE,CAAC;IAED,KAAK,CAAE,KAAc;;QACnB,6EAA6E;QAC7E,sDAAsD;QACtD,OAAO,MAAA,MAAA,MAAC,IAAI,CAAC,WAA0B,0CAAE,KAAK,mDAAG,KAAK,CAAC,mCAAI,KAAK,CAAA;IAClE,CAAC;CACF;AA3BD,4BA2BC;AAKD,SAAgB,QAAQ,CAAwB,KAAkC,EAAE,MAAgE,EAAE,MAA0D;IAC9M,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC5C,CAAC;AAFD,4BAEC"}

package/dist/ts/actions/glue.d.ts

@@ -12,5 +12,5 @@ export interface GlueAlignStore {
 }
 export declare function glue(el: HTMLElement, { target, align, cover, store }: GlueArgs): {
     update({ target: utarget, align: ualign, cover: ucover, store: ustore }: GlueArgs): void;
-    destroy(): void;
+    destroy: () => void;
 };

package/dist/ts/actions/index.d.ts

@@ -1,4 +1,4 @@
-export * from './a11y';
+export * from './buttonify';
 export * from './glue';
 export * from './offset';
 export * from './portal';

package/dist/ts/actions/stickyfixed.d.ts

@@ -1,6 +1,6 @@
 import { StickyArgs } from './sticky';
 /**
- * An implementation of stickyness based on `transform: translateY()`. Only use when
+ * An implementation of stickyness based on `positon: fixed`. Only use when
  * `position: sticky` won't work for you. If `position: sticky` does work for you, use it,
  * it performs better.
  *
@@ -10,10 +10,10 @@ import { StickyArgs } from './sticky';
  * 3) it always stays within the boundaries of the closest parent element that has a `position`
  *     * use:sticky accepts a `target` element as a parameter, defining the bounding container
  *
- * Note that this implementation sacrifices simplicity for animation performance. It does a lot of
- * work like cloning the element you place it on, placing the cloned element next to yours in the DOM,
- * setting widths to match between them, watching for mutations to keep them in sync, etc. Some of
- * this work may get foiled if you have a complex html/css/js situation.
+ * Note that this implementation gets great animation performance at the cost of extra complexity.
+ * It does a lot of work like cloning the element you place it on, placing the cloned element next
+ * to yours in the DOM, setting widths to match between them, watching for mutations to keep them
+ * in sync, etc. Some of this work may get foiled if you have a complex html/css/js situation.
  *
  * You may also want to try use:sticky. It is based on setting `transform: translateY()` as appropriate,
  * and is less fragile than this. However, it cannot do its work before the scroll on mobile, only after,

package/dist/ts/components/CollapsingTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { DeepStore, classes } from '../lib'
+  import { Store, classes } from '../lib'
   import type { CollapsingTableColumn, PopupMenuItem } from '../types'
   import { derived } from 'svelte/store'
   import DefaultPopupMenu from './PopupMenu.svelte'
@@ -45,7 +45,7 @@
 
   $: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'))
 
-  const state = new DeepStore({
+  const state = new Store({
     keepcolumns: [] as (CollapsingTableColumn & { widthPercent?: number })[],
     hiddencolumns: [] as CollapsingTableColumn[],
     dropdowncolumn: undefined as (CollapsingTableColumn & { widthPercent?: number }) | undefined
@@ -113,7 +113,7 @@
   </table>
 </div>
 {#if $menuitems.length > 0}
-<svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} bind:selected></svelte:component>
+  <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => selected = e.detail}></svelte:component>
 {/if}
 
 <style>

package/dist/ts/components/ConditionalWrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  export let condition: boolean|undefined = undefined
+  export let condition: boolean|undefined
   export let component: Function|undefined = undefined
   export let a = false
   export let span = false

package/dist/ts/components/FocusLock.svelte

@@ -13,14 +13,16 @@
 
   import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte'
   import { tabbable } from 'tabbable'
+  import { sleep } from 'txstate-utils'
   import { buttonify } from '../actions'
   import ScreenReaderOnly from './ScreenReaderOnly.svelte'
   const dispatch = createEventDispatcher()
   let lockelement: HTMLElement
   let abovelockelement: HTMLElement
   let active = true
+  let listenforescape = false
   if (initialfocus) hidefocus = false
-  onMount(() => {
+  onMount(async () => {
     const prevFocusLock = FocusLockStack.slice(-1)[0]
     if (prevFocusLock) prevFocusLock.pause()
     FocusLockStack.push({
@@ -30,25 +32,20 @@
     if (typeof returnfocusto === 'undefined') {
       returnfocusto = document.querySelector(':focus') as HTMLElement
     }
+    await sleep(1) // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
     if (initialfocus) {
       const focusEl = lockelement.querySelector(initialfocus)
       if (focusEl instanceof HTMLElement) focusEl.focus()
     } else {
       setInitialFocus()
     }
+    setTimeout(() => listenforescape = true, 0)
   })
   onDestroy(async () => {
     const wasactive = active
-    let focuswasinside
-    try {
-      focuswasinside = lockelement.matches(':focus-within')
-    } catch (e: any) {
-      // browser doesn't support :focus-within
-      focuswasinside = true
-    }
     active = false
     await tick()
-    if (returnfocusto && wasactive && focuswasinside) {
+    if (returnfocusto && wasactive) {
       returnfocusto.focus()
     }
     FocusLockStack.pop()
@@ -79,8 +76,14 @@
       else setInitialFocus()
     }
   }
+  const windowclick = (_: MouseEvent) => {
+    if (listenforescape && active) {
+      returnfocusto = undefined
+      dispatch('escape')
+    }
+  }
 </script>
-
+<svelte:window on:click={windowclick} />
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
   <div bind:this={abovelockelement} tabindex="0"></div>
   <div bind:this={lockelement} on:keydown={keydown}>

package/dist/ts/components/Modal.svelte

@@ -1,26 +1,31 @@
 <script lang="ts">
-  export let lockbackdrop = false
+  export let escapable = true
   export let hidefocus = true
   export let hidefocuslabel: string|undefined = undefined
   export let returnfocusto: HTMLElement|undefined = undefined
   export let initialfocus: string|undefined = undefined
+  export let containerClass = ''
+  export let opaque = false
   import FocusLock from './FocusLock.svelte'
   import { createEventDispatcher, onMount } from 'svelte'
   import { portal } from '../actions';
+
   const dispatch = createEventDispatcher()
   const endmodal = () => {
-    dispatch('dismiss')
+    dispatch('escape')
   }
   onMount(() => {
+    document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px'
     document.body.style.overflow = 'hidden'
     return () => {
       document.body.style.overflow = ''
+      document.body.style.marginRight = ''
     }
   })
 </script>
 
-<div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
+<div use:portal class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
+  <FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
     <slot></slot>
   </FocusLock>
 </div>
@@ -30,16 +35,20 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
-    overflow: auto;
     z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center
+  }
+  .modal-backdrop.opaque {
+    background-color: var(--modal-bg-opaque, #4c4c4c);
   }
   .modal-backdrop :global(.modal-container) {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    max-width: 100vw;
+    max-height: 100vh;
+    overflow: auto;
   }
 </style>

package/dist/ts/components/PopupMenu.svelte

@@ -4,7 +4,7 @@
   import { createEventDispatcher, onDestroy, tick } from 'svelte'
   import { randomid } from 'txstate-utils'
   import type { PopupMenuItem } from '../types'
-  import { DeepStore, SettableSubject } from '../lib'
+  import { Store } from '../lib'
   import ScreenReaderOnly from './ScreenReaderOnly.svelte'
   const dispatch = createEventDispatcher()
 
@@ -20,12 +20,12 @@
   export let cover = false
   export let showSelected = true
   export let width:string|undefined = undefined
-  export let computedalign: SettableSubject<GlueAlignStore> = new DeepStore<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
+  export let computedalign = new Store<GlueAlignStore>({ valign: 'bottom', halign: 'left' })
   export let usePortal: HTMLElement|true|undefined = undefined
   export let emptyText: string|undefined = undefined
-  export let hilited: number|undefined = undefined
-  export let selected: PopupMenuItem|undefined = undefined
+  export let value: string|undefined = undefined
 
+  let hilited: number|undefined = undefined
   let menuelement: HTMLElement|undefined
   let itemelements: HTMLElement[] = []
   const menuid = randomid()
@@ -33,7 +33,7 @@
   let lastactive = items.length - 1
 
   function hiddenItem (item: PopupMenuItem) {
-    return !!item && !showSelected && item.value === selected?.value
+    return !!item && !showSelected && item.value === value
   }
 
   async function reactToItems (..._: any[]) {
@@ -41,7 +41,7 @@
     lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1
     if (hilited && items[hilited]?.disabled) hilited = firstactive
   }
-  $: reactToItems(items, selected)
+  $: reactToItems(items, value)
 
   async function reactToMenuShown (_: boolean) {
     if (!buttonelement) {
@@ -95,8 +95,8 @@
       if (menushown) {
         menushown = false
         if (typeof hilited !== 'undefined') {
-          selected = items[hilited]
-          dispatch('change', items[hilited].value)
+          value = items[hilited]?.value
+          dispatch('change', items[hilited])
         }
       } else {
         menushown = true
@@ -109,8 +109,8 @@
         if (typeof hilited !== 'undefined') {
           e.preventDefault()
           menushown = false
-          selected = items[hilited]
-          dispatch('change', items[hilited].value)
+          value = items[hilited]?.value
+          dispatch('change', items[hilited])
         } else {
           if (buttonelement.tagName !== 'INPUT') {
             e.preventDefault()
@@ -146,6 +146,7 @@
       element.removeEventListener('click', onbuttonclick)
       element.removeEventListener('keydown', onkeydown)
       element.removeEventListener('blur', onblur)
+      element.removeAttribute('aria-disabled')
       element.removeAttribute('aria-haspopup')
       element.removeAttribute('aria-expanded')
       element.removeAttribute('aria-controls')
@@ -174,30 +175,30 @@
     e.preventDefault()
     if (item.disabled) return
     menushown = false
-    selected = item
-    dispatch('change', item.value)
+    value = item.value
+    dispatch('change', item)
   }
 
-  $: hasSelected = showSelected && !!items.find(itm => itm.value === selected?.value)
+  $: hasSelected = showSelected && items.some(itm => itm.value === value)
 </script>
 
 {#if menushown}
   <div use:portal={usePortal === true ? document.body : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, store: computedalign }} class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role='listbox' style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
       {#each items as item, i (item.value)}
-        {#if showSelected || !selected || item.value !== selected.value}
+        {#if showSelected || item.value !== value}
           <li
             id={`${menuid}-${i}`}
             bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${selected && selected.value === item.value ? menuItemSelectedClass || '' : ''}`}
+            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass || '' : ''} ${value === item.value ? menuItemSelectedClass || '' : ''}`}
             class:disabled={!!item.disabled}
             class:hilited={!menuItemHilitedClass && i === hilited}
-            class:selected={showSelected && !menuItemSelectedClass && selected && selected.value === item.value}
+            class:selected={showSelected && !menuItemSelectedClass && value === item.value}
             on:click={onclick(item)}
             role="option"
             tabindex=-1
             aria-disabled={item.disabled}
-          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={selected && selected.value === item.value}>{item.label || item.value}</slot></li>
+          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
         {/if}
       {/each}
       {#if items.length === 0}

package/dist/ts/components/ScreenReaderOnly.svelte

@@ -1,7 +1,7 @@
-<script>
-  export let id = ''
-  export let arialive = ''
-  export let ariaatomic = ''
+<script lang="ts">
+  export let id: string|undefined = undefined
+  export let arialive: svelte.JSX.AriaAttributes['aria-live'] = undefined
+  export let ariaatomic: svelte.JSX.AriaAttributes['aria-atomic'] = undefined
 </script>
 
 <style>
@@ -23,4 +23,4 @@
   }
 </style>
 
-<span id={id} class="sr-only" aria-live={arialive} aria-atomic={ariaatomic}><slot/></span>
+<span {id} class="sr-only" aria-live={arialive} aria-atomic={ariaatomic}><slot/></span>

package/dist/ts/lib/activestore.d.ts

@@ -0,0 +1,60 @@
+import { Writable } from 'svelte/store';
+export interface UsableSubject<T> {
+    subscribe: (observer: (value: T) => void) => () => void;
+}
+export interface WritableSubject<T> extends UsableSubject<T> {
+    update: (updater: (value: T) => T) => void;
+}
+export interface SettableSubject<T> extends WritableSubject<T> {
+    set: (value: T) => void;
+}
+export declare function isUsable<T>(value: T | UsableSubject<T> | undefined): value is UsableSubject<T>;
+export declare function isWritable<T>(value: T | UsableSubject<T> | undefined): value is WritableSubject<T>;
+export declare function isSettable<T>(value: T | UsableSubject<T> | undefined): value is SettableSubject<T>;
+/**
+ * An alternative to svelte's "writable" that does not check equality before notifying
+ * subscribers. A writable will notify subscribers after a shallow equality check, which
+ * does not work with mutated states:
+ * store.update(v => { v.someprop = 'newvalue'; return v })
+ *
+ * With a writable, this line would NOT notify subscribers because the state will be compared
+ * against itself and always found to be equal.
+ *
+ * An alternative to this store type is SafeStore, which will do a deep equality check but
+ * clone data so that it is safe against mutations. It costs more CPU cycles but results in
+ * fewer notifications to subscribers which could be an overall win.
+ */
+export declare class ActiveStore<T> implements Writable<T> {
+    protected value: T;
+    protected subscribers: Map<string, (s: T) => void>;
+    private cleanups;
+    private sourceInits;
+    constructor(value: T);
+    clone(value: T): T;
+    equal(a: T, b: T): boolean;
+    set(value: T): void;
+    update(updater: (value: T) => T): void;
+    subscribe(run: (s: T) => any): () => void;
+    /**
+     * Provided as a last ditch avenue to clean up memory after rogue subscribers forget
+     * to unsubscribe themselves. For example, in an SSR environment one could clear out
+     * global stores anytime a request finishes and no other requests are being processed.
+     */
+    clearSubscribers(): void;
+    /**
+     * Stores that subscribe to external events should set it up with a start/stop mentality
+     * so that the external events can be unsubscribed when the store itself has no listeners
+     * to notify. This helps ensure unused stores can be garbage collected.
+     *
+     * To do this, pass registerSource a function that initializes the subscription to the external
+     * event, and returns a function that can unsubscribe from the external event. This parent
+     * class will take care of running those functions at appropriate times.
+     */
+    protected registerSource(fn: () => () => void): void;
+    /**
+     * Provided in case a child class has a need to change out the external resources
+     */
+    protected unregisterSources(): void;
+    private subscribeToSources;
+    private unsubscribeFromSources;
+}

package/dist/ts/lib/convertedstore.d.ts

@@ -0,0 +1,16 @@
+import { Store } from './store';
+import { UsableSubject } from './activestore';
+/**
+ * A store that allows you to pass in a traditional svelte store in the constructor.
+ *
+ * Updates to the original store will be sent to subscribers of this store, but only after a deep equality check.
+ *
+ * Updates to this store will also be sent to the original store after a deep equality check.
+ */
+export declare class ConvertedStore<T> extends Store<T> {
+    private valueStore;
+    private pause;
+    constructor(value: UsableSubject<T>);
+    set(value: T): void;
+}
+export declare function convertStore<T>(store: UsableSubject<T>): ConvertedStore<T>;