@txstate-mws/svelte-components 0.0.61 → 0.0.65

package/dist/actions/a11y.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.button = void 0;
+exports.buttonify = void 0;
 /**
  * Turns any HTML element into an accessible button that responds to keyboard events and has
  * role="button" and the tabindex attribute set. You are still responsible for making sure it has
  * readable content or a good label.
  */
-function button(node) {
+function buttonify(node) {
     function keydown(e) {
         if (e.key === 'Enter') {
             if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
@@ -16,14 +16,6 @@ function button(node) {
             }
         }
     }
-    function click(e) {
-        if (!(e instanceof CustomEvent)) {
-            e.preventDefault();
-            e.stopPropagation();
-            node.dispatchEvent(new CustomEvent('click'));
-        }
-    }
-    node.addEventListener('click', click);
     node.addEventListener('keydown', keydown);
     if (node.tabIndex < 0)
         node.tabIndex = 0;
@@ -31,9 +23,8 @@ function button(node) {
     node.style.cursor = 'pointer';
     return {
         destroy() {
-            node.removeEventListener('click', click);
             node.removeEventListener('keydown', keydown);
         }
     };
 }
-exports.button = button;
+exports.buttonify = buttonify;

package/dist/actions/glue.js

@@ -10,12 +10,12 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
     }
     let halign;
     let valign;
-    let sharedOffset = lib_1.sharedOffsetParent(el, target);
+    let sharedOffset = (0, lib_1.sharedOffsetParent)(el, target);
     function reposition(offset) {
         if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement))
             return;
         let autoalign = align;
-        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : lib_1.targetOffset(el.offsetParent, sharedOffset);
+        const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : (0, lib_1.targetOffset)(el.offsetParent, sharedOffset);
         if (align === 'auto') {
             const rect = target.getBoundingClientRect();
             const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right';
@@ -65,7 +65,7 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
         }
         store === null || store === void 0 ? void 0 : store.update(v => (Object.assign(Object.assign({}, v), { valign, halign })));
     }
-    const { destroy, update } = lib_1.watchForPositionChangeInContainer(target, sharedOffset, reposition);
+    const { destroy, update } = (0, lib_1.watchForPositionChangeInContainer)(target, sharedOffset, reposition);
     return {
         update({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }) {
             align = ualign;
@@ -75,7 +75,7 @@ function glue(el, { target, align = 'auto', cover = false, store }) {
                 store = ustore;
             }
             if (target !== utarget) {
-                sharedOffset = lib_1.sharedOffsetParent(el, utarget);
+                sharedOffset = (0, lib_1.sharedOffsetParent)(el, utarget);
                 target = utarget;
                 update(target, sharedOffset, reposition);
             }

package/dist/actions/offset.js

@@ -12,8 +12,8 @@ function offset(el, config) {
             config.store.update(v => (Object.assign(Object.assign({}, v), current)));
         el.dispatchEvent(new CustomEvent('offset', { detail: current }));
     }
-    let resolvedchange = (config === null || config === void 0 ? void 0 : config.debounce) ? lib_1.debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
-    const { destroy, update } = lib_1.watchForPositionChange(el, resolvedchange);
+    let resolvedchange = (config === null || config === void 0 ? void 0 : config.debounce) ? (0, lib_1.debounced)(lookforoffsetchange, config.debounce) : lookforoffsetchange;
+    const { destroy, update } = (0, lib_1.watchForPositionChange)(el, resolvedchange);
     return {
         update(newConfig) {
             var _a;
@@ -23,7 +23,7 @@ function offset(el, config) {
                 (_a = newConfig === null || newConfig === void 0 ? void 0 : newConfig.store) === null || _a === void 0 ? void 0 : _a.update(v => (Object.assign(Object.assign({}, v), lastOffset)));
             }
             if ((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) !== (config === null || config === void 0 ? void 0 : config.debounce)) {
-                resolvedchange = (newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? lib_1.debounced(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
+                resolvedchange = (newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? (0, lib_1.debounced)(lookforoffsetchange, newConfig.debounce) : lookforoffsetchange;
                 update(el, resolvedchange);
             }
             config = newConfig;

package/dist/actions/resize.js

@@ -12,7 +12,7 @@ function resize(el, config) {
     let lastSize = {};
     function watch() {
         const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight };
-        if (!fast_deep_equal_1.default(lastSize, current)) {
+        if (!(0, fast_deep_equal_1.default)(lastSize, current)) {
             lastSize = current;
             if (config === null || config === void 0 ? void 0 : config.store)
                 config.store.set(current);
@@ -21,7 +21,7 @@ function resize(el, config) {
     }
     if (!ResizeObserver)
         return watch(); // support SSR
-    let observer = new ResizeObserver((config === null || config === void 0 ? void 0 : config.debounce) ? lib_1.debounced(watch, config.debounce) : watch);
+    let observer = new ResizeObserver((config === null || config === void 0 ? void 0 : config.debounce) ? (0, lib_1.debounced)(watch, config.debounce) : watch);
     observer.observe(el);
     watch();
     return {
@@ -34,7 +34,7 @@ function resize(el, config) {
             }
             if (!!(newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) !== !!(config === null || config === void 0 ? void 0 : config.debounce)) {
                 observer.disconnect();
-                observer = new ResizeObserver((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? lib_1.debounced(watch, newConfig.debounce) : watch);
+                observer = new ResizeObserver((newConfig === null || newConfig === void 0 ? void 0 : newConfig.debounce) ? (0, lib_1.debounced)(watch, newConfig.debounce) : watch);
                 observer.observe(el);
             }
             config = newConfig;

package/dist/actions/sticky.js

@@ -60,7 +60,7 @@ function sticky(el, config) {
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = lib_1.bodyOffset(offsetParent);
+            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -69,7 +69,7 @@ function sticky(el, config) {
         scrollend = Math.max(scrollstart, containeroffset.top + ((_a = config === null || config === void 0 ? void 0 : config.target) !== null && _a !== void 0 ? _a : offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = lib_1.watchForPositionChange([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     window.addEventListener('wheel', onwheel, { passive: false });
     function stickyUpdate(newConfig) {

package/dist/actions/stickyfixed.js

@@ -127,7 +127,7 @@ function stickyfixed(el, config) {
         if (!(offsetParent instanceof HTMLElement))
             return;
         if (lastOffsetParent !== offsetParent) {
-            offset[0] = lib_1.bodyOffset(offsetParent);
+            offset[0] = (0, lib_1.bodyOffset)(offsetParent);
             update(offsetParent, onpositionchange);
             lastOffsetParent = offsetParent;
         }
@@ -142,7 +142,7 @@ function stickyfixed(el, config) {
         scrollend = Math.max(scrollstart, containeroffset.top + ((_b = config === null || config === void 0 ? void 0 : config.target) !== null && _b !== void 0 ? _b : offsetParent).clientHeight - el.offsetHeight);
         recalc(window.scrollY);
     }
-    const { destroy, update } = lib_1.watchForPositionChange([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
+    const { destroy, update } = (0, lib_1.watchForPositionChange)([el.offsetParent, config === null || config === void 0 ? void 0 : config.target], onpositionchange);
     window.addEventListener('scroll', onscroll, { passive: true });
     function stickyUpdate(newConfig) {
         var _a;

package/dist/components/CollapsingTable.svelte

@@ -1,6 +1,5 @@
 <script>var _a;
 import { DeepStore, classes } from '../lib';
-;
 import { derived } from 'svelte/store';
 import DefaultPopupMenu from './PopupMenu.svelte';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
@@ -113,7 +112,9 @@ $: menubuttonelement = headers[$state.keepcolumns.length - 1];
     {#if slots.footer}<tfoot><slot name="footer" item={undefined} key={undefined} value={undefined}></slot></tfoot>{/if}
   </table>
 </div>
+{#if $menuitems.length > 0}
 <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} bind:selected></svelte:component>
+{/if}
 
 <style>
   table { width: 100%; }

package/dist/components/FocusLock.svelte

@@ -1,30 +1,23 @@
-<script context="module">"use strict";
-const FocusLockStack = [];
+<script context="module">const FocusLockStack = [];
 </script>
 
-<script>var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-export let returnfocusto = null;
+<script>export let returnfocusto = undefined;
+export let initialfocus = undefined;
 export let hidefocus = true;
-export let hidefocuslabel = "focus is above dialog";
+export let hidefocuslabel = "focus is above modal dialog, start tabbing";
 export let escapable = true;
 let className = '';
 export { className as class };
 import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte';
 import { tabbable } from 'tabbable';
-import { button } from '../actions';
+import { buttonify } from '../actions';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 let lockelement;
 let abovelockelement;
 let active = true;
+if (initialfocus)
+    hidefocus = false;
 onMount(() => {
     const prevFocusLock = FocusLockStack.slice(-1)[0];
     if (prevFocusLock)
@@ -33,23 +26,31 @@ onMount(() => {
         pause: () => { active = false; },
         unpause: () => { active = true; }
     });
-    if (!returnfocusto) {
+    if (typeof returnfocusto === 'undefined') {
         returnfocusto = document.querySelector(':focus');
     }
-    setInitialFocus();
+    if (initialfocus) {
+        const focusEl = lockelement.querySelector(initialfocus);
+        if (focusEl instanceof HTMLElement)
+            focusEl.focus();
+    }
+    else {
+        setInitialFocus();
+    }
 });
-onDestroy(() => __awaiter(void 0, void 0, void 0, function* () {
+onDestroy(async () => {
     const wasactive = active;
+    const focuswasinside = lockelement.matches(':focus-within');
     active = false;
-    yield tick();
-    if (returnfocusto && wasactive) {
+    await tick();
+    if (returnfocusto && wasactive && focuswasinside) {
         returnfocusto.focus();
     }
     FocusLockStack.pop();
     const prevFocusLock = FocusLockStack.slice(-1)[0];
     if (prevFocusLock)
         prevFocusLock.unpause();
-}));
+});
 const setInitialFocus = () => {
     const firstfocus = tabbable(lockelement)[0];
     if (firstfocus && firstfocus.focus) {
@@ -81,7 +82,7 @@ const focusin = (e) => {
 <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}>
-    {#if hidefocus}<div class="hiddenfocus" use:button on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
+    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
     <slot></slot>
   </div>
   <div tabindex="0"></div>

package/dist/components/Modal.svelte

@@ -2,6 +2,7 @@
 export let hidefocus = true;
 export let hidefocuslabel = undefined;
 export let returnfocusto = undefined;
+export let initialfocus = undefined;
 import FocusLock from './FocusLock.svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { portal } from '../actions';
@@ -18,7 +19,7 @@ onMount(() => {
 </script>
 
 <div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} on:escape={() => lockbackdrop || endmodal()}>
+  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
     <slot></slot>
   </FocusLock>
 </div>

package/dist/components/PopupMenu.svelte

@@ -1,18 +1,7 @@
-<script>var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-;
-import { glue, portal } from '../actions';
+<script>import { glue, portal } from '../actions';
 import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { randomid } from 'txstate-utils';
-;
-import { DeepStore, SettableSubject } from '../lib';
+import { DeepStore } from '../lib';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
 const dispatch = createEventDispatcher();
 export let menushown = false;
@@ -40,34 +29,30 @@ let lastactive = items.length - 1;
 function hiddenItem(item) {
     return !!item && !showSelected && item.value === (selected === null || selected === void 0 ? void 0 : selected.value);
 }
-function reactToItems(..._) {
+async function reactToItems(..._) {
     var _a;
-    return __awaiter(this, void 0, void 0, function* () {
-        firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
-        lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
-        if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
-            hilited = firstactive;
-    });
+    firstactive = items.findIndex(itm => !itm.disabled && !hiddenItem(itm));
+    lastactive = items.length - [...items].reverse().findIndex(itm => !itm.disabled && !hiddenItem(itm)) - 1;
+    if (hilited && ((_a = items[hilited]) === null || _a === void 0 ? void 0 : _a.disabled))
+        hilited = firstactive;
 }
 $: reactToItems(items, selected);
-function reactToMenuShown(_) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!buttonelement) {
-            hilited = undefined;
-            return;
-        }
-        yield tick();
-        if (!menushown) {
-            hilited = undefined;
-            buttonelement.removeAttribute('aria-controls');
-            buttonelement.setAttribute('aria-expanded', 'false');
-        }
-        else {
-            buttonelement.setAttribute('aria-controls', menuid);
-            buttonelement.setAttribute('aria-expanded', 'true');
-        }
-        buttonelement.focus();
-    });
+async function reactToMenuShown(_) {
+    if (!buttonelement) {
+        hilited = undefined;
+        return;
+    }
+    await tick();
+    if (!menushown) {
+        hilited = undefined;
+        buttonelement.removeAttribute('aria-controls');
+        buttonelement.setAttribute('aria-expanded', 'false');
+    }
+    else {
+        buttonelement.setAttribute('aria-controls', menuid);
+        buttonelement.setAttribute('aria-expanded', 'true');
+    }
+    buttonelement.focus();
 }
 $: reactToMenuShown(menushown);
 function move(idx) {
@@ -157,12 +142,10 @@ function onbuttonclick(e) {
     e.preventDefault();
     menushown = !menushown;
 }
-function onblur(e) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // tabindex=-1 on our menu elements means e.relatedTarget will be set
-        if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
-            menushown = false;
-    });
+async function onblur(e) {
+    // tabindex=-1 on our menu elements means e.relatedTarget will be set
+    if (!(e.relatedTarget instanceof HTMLElement && (menuelement === null || menuelement === void 0 ? void 0 : menuelement.contains(e.relatedTarget))))
+        menushown = false;
 }
 function cleanup(element) {
     if (element) {

package/dist/lib/deepstore.js

@@ -45,7 +45,7 @@ class DeepStore {
     set(value) {
         if (this.pause)
             return;
-        if (!fast_deep_equal_1.default(value, this.value)) {
+        if (!(0, fast_deep_equal_1.default)(value, this.value)) {
             this.value = this.clone(value);
             for (const [id, run] of this.subscribers) {
                 run(value);

package/dist/lib/derivedstore.js

@@ -18,7 +18,7 @@ class DerivedStore extends deepstore_1.DeepStore {
     constructor(store, getter) {
         if (typeof getter === 'string') {
             const accessor = getter;
-            getter = (parentValue) => txstate_utils_1.get(parentValue, accessor);
+            getter = (parentValue) => (0, txstate_utils_1.get)(parentValue, accessor);
         }
         super({});
         if (Array.isArray(store)) {

package/dist/lib/repositioned.js

@@ -24,7 +24,7 @@ function watchForMutations(cb) {
             characterData: true
         });
     }
-    const id = txstate_utils_1.randomid();
+    const id = (0, txstate_utils_1.randomid)();
     observers.set(id, cb);
     cb();
     return {
@@ -40,10 +40,10 @@ function watchForMutations(cb) {
 exports.watchForMutations = watchForMutations;
 function watchForPositionChange(el, cb) {
     let lastoffsets = [];
-    let els = txstate_utils_1.toArray(el).filter(txstate_utils_1.isNotNull);
+    let els = (0, txstate_utils_1.toArray)(el).filter(txstate_utils_1.isNotNull);
     function watch() {
         const offsets = els.map(bodyoffset_1.bodyOffset);
-        if (offsets.some((offset, i) => !fast_deep_equal_1.default(offset, lastoffsets[i]))) {
+        if (offsets.some((offset, i) => !(0, fast_deep_equal_1.default)(offset, lastoffsets[i]))) {
             lastoffsets = offsets;
             Array.isArray(el) ? cb(offsets) : cb(offsets[0]);
         }
@@ -54,7 +54,7 @@ function watchForPositionChange(el, cb) {
             const changed = newEl !== el || newCb !== cb;
             if (changed) {
                 el = newEl;
-                els = txstate_utils_1.toArray(el).filter(txstate_utils_1.isNotNull);
+                els = (0, txstate_utils_1.toArray)(el).filter(txstate_utils_1.isNotNull);
                 cb = newCb;
                 watch();
             }
@@ -68,8 +68,8 @@ function watchForPositionChangeInContainer(el, container, cb) {
     function watch() {
         if (!el || !container)
             return;
-        const offset = bodyoffset_1.targetOffset(el, container);
-        if (!fast_deep_equal_1.default(offset, lastoffset)) {
+        const offset = (0, bodyoffset_1.targetOffset)(el, container);
+        if (!(0, fast_deep_equal_1.default)(offset, lastoffset)) {
             lastoffset = offset;
             cb(offset);
         }

package/dist/lib/safestore.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SafeStore = void 0;
 const deepstore_1 = require("./deepstore");
 const rfdc_1 = __importDefault(require("rfdc"));
-const cloneDeep = rfdc_1.default();
+const cloneDeep = (0, rfdc_1.default)();
 class SafeStore extends deepstore_1.DeepStore {
     clone(value) {
         return cloneDeep(value);

package/dist/lib/substore.js

@@ -21,8 +21,8 @@ class SubStore extends deepstore_1.DeepStore {
     constructor(store, getter, setter) {
         if (typeof getter === 'string') {
             const accessor = getter;
-            getter = parentValue => txstate_utils_1.get(parentValue, accessor);
-            setter = (newValue, parentValue) => txstate_utils_1.set(parentValue, accessor, newValue);
+            getter = parentValue => (0, txstate_utils_1.get)(parentValue, accessor);
+            setter = (newValue, parentValue) => (0, txstate_utils_1.set)(parentValue, accessor, newValue);
         }
         super({});
         this.parentStore = store;

package/dist/ts/actions/a11y.d.ts

@@ -3,6 +3,6 @@
  * role="button" and the tabindex attribute set. You are still responsible for making sure it has
  * readable content or a good label.
  */
-export declare function button(node: HTMLElement): {
+export declare function buttonify(node: HTMLElement): {
     destroy(): void;
 };

package/dist/ts/components/CollapsingTable.svelte

@@ -112,7 +112,9 @@
     {#if slots.footer}<tfoot><slot name="footer" item={undefined} key={undefined} value={undefined}></slot></tfoot>{/if}
   </table>
 </div>
+{#if $menuitems.length > 0}
 <svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} bind:selected></svelte:component>
+{/if}
 
 <style>
   table { width: 100%; }

package/dist/ts/components/FocusLock.svelte

@@ -3,21 +3,23 @@
 </script>
 
 <script lang="ts">
-  export let returnfocusto: HTMLElement|null = null
+  export let returnfocusto: HTMLElement|null|undefined = undefined
+  export let initialfocus: string|undefined = undefined
   export let hidefocus = true
-  export let hidefocuslabel = "focus is above dialog"
+  export let hidefocuslabel = "focus is above modal dialog, start tabbing"
   export let escapable = true
   let className = ''
   export { className as class }
 
   import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte'
   import { tabbable } from 'tabbable'
-  import { button } from '../actions'
+  import { buttonify } from '../actions'
   import ScreenReaderOnly from './ScreenReaderOnly.svelte'
   const dispatch = createEventDispatcher()
   let lockelement: HTMLElement
   let abovelockelement: HTMLElement
   let active = true
+  if (initialfocus) hidefocus = false
   onMount(() => {
     const prevFocusLock = FocusLockStack.slice(-1)[0]
     if (prevFocusLock) prevFocusLock.pause()
@@ -25,16 +27,22 @@
       pause: () => { active = false },
       unpause: () => { active = true }
     })
-    if (!returnfocusto) {
-      returnfocusto = document.querySelector(':focus')
+    if (typeof returnfocusto === 'undefined') {
+      returnfocusto = document.querySelector(':focus') as HTMLElement
+    }
+    if (initialfocus) {
+      const focusEl = lockelement.querySelector(initialfocus)
+      if (focusEl instanceof HTMLElement) focusEl.focus()
+    } else {
+      setInitialFocus()
     }
-    setInitialFocus()
   })
   onDestroy(async () => {
     const wasactive = active
+    const focuswasinside = lockelement.matches(':focus-within')
     active = false
     await tick()
-    if (returnfocusto && wasactive) {
+    if (returnfocusto && wasactive && focuswasinside) {
       returnfocusto.focus()
     }
     FocusLockStack.pop()
@@ -70,7 +78,7 @@
 <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}>
-    {#if hidefocus}<div class="hiddenfocus" use:button on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
+    {#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
     <slot></slot>
   </div>
   <div tabindex="0"></div>

package/dist/ts/components/Modal.svelte

@@ -3,6 +3,7 @@
   export let hidefocus = true
   export let hidefocuslabel: string|undefined = undefined
   export let returnfocusto: HTMLElement|undefined = undefined
+  export let initialfocus: string|undefined = undefined
   import FocusLock from './FocusLock.svelte'
   import { createEventDispatcher, onMount } from 'svelte'
   import { portal } from '../actions';
@@ -20,7 +21,7 @@
 </script>
 
 <div use:portal class="modal-backdrop" on:click={() => lockbackdrop || endmodal()}>
-  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} on:escape={() => lockbackdrop || endmodal()}>
+  <FocusLock class="modal-container" escapable={!lockbackdrop} on:escape={endmodal} {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:escape={() => lockbackdrop || endmodal()}>
     <slot></slot>
   </FocusLock>
 </div>

package/dist/ts/tests/Modal/ModalTest.svelte

@@ -4,7 +4,7 @@
 </script>
 
 {#if shown}
-<Modal on:dismiss={() => shown = false}>
+<Modal initialfocus='input[type="submit"]' on:dismiss={() => shown = false}>
   <form>
     <div class="formfield">
       <label for="firstname">First Name:</label><input id="firstname" type="text" name="firstname">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "0.0.61",
+  "version": "0.0.65",
   "description": "Svelte components that are generically useful.",
   "main": "dist/index.js",
   "module": "esm/index.js",