@txstate-mws/svelte-components 1.6.11 → 1.6.12

package/dist/actions/elementqueries.js

@@ -7,15 +7,15 @@ class ElementQueries {
     #subscribers = 0;
     #stores = new Map();
     #processwidths() {
-        for (let i = 0; i < this.#watchlist.length; i++) {
+        for (const layer of this.#watchlist) {
             const widths = [];
             const attrs = [];
-            for (let j = 0; j < this.#watchlist[i].length; j++) {
-                widths.push(this.#watchlist[i][j].offsetWidth);
-                attrs.push(this.#watchlist[i][j].getAttribute('data-eq'));
+            for (const el of layer) {
+                widths.push(el.offsetWidth);
+                attrs.push(el.getAttribute('data-eq'));
             }
-            for (let j = 0; j < this.#watchlist[i].length; j++) {
-                const el = this.#watchlist[i][j];
+            for (let j = 0; j < layer.length; j++) {
+                const el = layer[j];
                 const w = widths[j];
                 let attrstr = '';
                 let finalw = 1600;
@@ -62,10 +62,10 @@ class ElementQueries {
     #gotoanchor() {
         // since we are dramatically resizing, we need to scroll to the proper place for an
         // anchor tag
-        const m = document.location.hash.match(/^#([a-z][\w:.-]*)$/i);
+        const m = document.location.hash.match(/^#([a-z][a-zA-Z0-9_:.\-]*)$/iv);
         if (m) {
             const id = m[1];
-            requestAnimationFrame(() => { (document.getElementById(id) || document.querySelector(`[name="${id}"]`))?.scrollIntoView(true); });
+            requestAnimationFrame(() => { (document.getElementById(id) ?? document.querySelector(`[name="${id}"]`))?.scrollIntoView(true); });
         }
     }
     fullresync() {
@@ -100,7 +100,7 @@ class ElementQueries {
     // instead of faithfully subscribing and unsubscribing, so we'll add a subscriber that can't be
     // decremented and it will stay activated forever
     activate() {
-        this.#subscribers++;
+        this.#subscribers += 1;
         this.#activateRaw();
     }
     #deactivate() {
@@ -111,14 +111,15 @@ class ElementQueries {
         this.#hasInit = false;
     }
     subscribe(el, store) {
-        this.#subscribers++;
+        this.#subscribers += 1;
         if (store)
             this.#stores.set(el, store);
         else
             this.#stores.delete(el);
         this.#activateRaw();
         return () => {
-            if (--this.#subscribers === 0)
+            this.#subscribers -= 1;
+            if (this.#subscribers === 0)
                 this.#deactivate();
         };
     }

package/dist/actions/glue.d.ts

@@ -1,17 +1,74 @@
 import type { SettableSubject } from '@txstate-mws/svelte-store';
-export type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright';
+export type GlueAlignOpts = 'auto' | 'bottomleft' | 'bottomright' | 'topleft' | 'topright' | 'top' | 'bottom' | 'left' | 'right' | 'autoleft' | 'autoright' | 'topauto' | 'bottomauto' | 'automiddle' | 'middleauto' | 'middle';
 export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
-    target: HTMLElement;
+    /**
+     * The HTML element to which the element should be glued. The target remains where
+     * it is; the element you placed the glue action on will become position: fixed and
+     * move to align with the target.
+     */
+    target?: HTMLElement;
+    /**
+     * How to align the element relative to the target.
+     *
+     * Corner alignments:
+     * - `topleft`: element's bottom-left corner meets target's top-left corner
+     * - `topright`: element's bottom-right corner meets target's top-right corner
+     * - `bottomleft`: element's top-left corner meets target's bottom-left corner
+     * - `bottomright`: element's top-right corner meets target's bottom-right corner
+     *
+     * Side alignments (centered on the midpoint of the side):
+     * - `top`: element centered above target
+     * - `bottom`: element centered below target
+     * - `left`: element centered to the left of target
+     * - `right`: element centered to the right of target
+     *
+     * Auto alignments (choose based on available viewport space):
+     * - `auto`: choose between all four corners
+     * - `autoleft`: choose between `topleft` and `bottomleft`
+     * - `autoright`: choose between `topright` and `bottomright`
+     * - `topauto`: choose between `topleft` and `topright`
+     * - `bottomauto`: choose between `bottomleft` and `bottomright`
+     * - `automiddle`: choose between `top` and `bottom`
+     * - `middleauto`: choose between `left` and `right`
+     * - `middle`: choose between `top`, `bottom`, `left`, and `right`, or with `cover` set to true, simply center over the target
+     *
+     * When `cover` is false (default), the element is placed adjacent to the target.
+     * When `cover` is true, the element overlaps the target from the aligned side.
+     *
+     * @default 'auto'
+     */
     align?: GlueAlignOpts;
+    /**
+     * Adjusts the alignment setting behavior such that now the element will cover the target.
+     */
     cover?: boolean;
+    /**
+     * A pixel margin between the element and the target. When used with `cover`, will reveal
+     * a gap's worth of pixels of the target.
+     */
     gap?: number;
+    /**
+     * When true, increases the parent element's `min-height` to account for
+     * the positioned element's size, preventing the parent from collapsing
+     * when its child becomes `position: fixed`. Ignored if the parent has
+     * `overflow-y: auto`. The original `min-height` is restored on destroy.
+     *
+     * @default false
+     */
     adjustparentheight?: boolean;
+    /**
+     * The store that contains information about the alignment of the element. With align
+     * set to `auto`, this will tell you quickly which alignment is currently active.
+     */
     store?: SettableSubject<T>;
 }
 export interface GlueAlignStore {
-    valign: 'bottom' | 'top';
-    halign: 'left' | 'right';
+    valign: 'bottom' | 'top' | 'center';
+    halign: 'left' | 'right' | 'center';
 }
+/**
+ * Make this element `position: fixed` and move it around to align with the target element.
+ */
 export declare function glue(el: HTMLElement, { target, align, cover, gap, adjustparentheight, store }: GlueArgs): {
     update({ target: utarget, align: ualign, cover: ucover, gap: ugap, store: ustore }: GlueArgs): void;
     destroy(): void;

package/dist/actions/glue.js

@@ -1,22 +1,23 @@
 import { watchForMutations } from '../util/index.js';
 import { equal } from 'txstate-utils';
+/**
+ * Make this element `position: fixed` and move it around to align with the target element.
+ */
 export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjustparentheight = false, store }) {
     let halign;
     let valign;
-    const parent = el.offsetParent;
+    const parent = el.offsetParent instanceof HTMLElement ? el.offsetParent : undefined;
     const formerMinHeight = parent?.style.minHeight;
     if (target)
         el.style.position = 'fixed';
-    function adjustParentHeight() {
+    function adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY) {
         if (!adjustparentheight)
             return;
-        if (parent?.style.overflowY === 'auto')
+        if (parentOverflowY === 'auto')
             return;
-        const minHeight = el.offsetTop + el.offsetHeight;
-        if (minHeight > (parent?.clientHeight ?? 0)) {
-            requestAnimationFrame(() => {
-                parent.style.minHeight = String(minHeight) + 'px';
-            });
+        const minHeight = elOffsetTop + elOffsetHeight;
+        if (minHeight > parentClientHeight) {
+            parent.style.minHeight = String(minHeight) + 'px';
         }
     }
     let lastrect;
@@ -34,13 +35,55 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
         if (equal(rect, lastrect))
             return;
+        lastrect = rect;
         let autoalign = align;
+        const leftright = rect.right > rect.left ? 'left' : 'right';
+        const topbottom = rect.bottom > rect.top ? 'bottom' : 'top';
         if (align === 'auto') {
-            const leftright = rect.right > rect.left ? 'left' : 'right';
-            const topbottom = rect.bottom > rect.top ? 'bottom' : 'top';
             autoalign = topbottom + leftright;
         }
+        else if (align === 'autoleft') {
+            autoalign = topbottom + 'left';
+        }
+        else if (align === 'autoright') {
+            autoalign = topbottom + 'right';
+        }
+        else if (align === 'topauto') {
+            autoalign = 'top' + leftright;
+        }
+        else if (align === 'bottomauto') {
+            autoalign = 'bottom' + leftright;
+        }
+        else if (align === 'automiddle') {
+            autoalign = topbottom;
+        }
+        else if (align === 'middleauto') {
+            autoalign = leftright;
+        }
+        else if (align === 'middle') {
+            if (cover) {
+                autoalign = 'middle';
+            }
+            else {
+                const maxSpace = Math.max(rect.top, rect.bottom, rect.left, rect.right);
+                if (maxSpace === rect.bottom)
+                    autoalign = 'bottom';
+                else if (maxSpace === rect.top)
+                    autoalign = 'top';
+                else if (maxSpace === rect.right)
+                    autoalign = 'right';
+                else
+                    autoalign = 'left';
+            }
+        }
         const targetHeight = rect.height;
+        const elRect = el.getBoundingClientRect();
+        const elWidth = elRect.width;
+        const elHeight = elRect.height;
+        const elOffsetTop = el.offsetTop;
+        const elOffsetHeight = el.offsetHeight;
+        const parentClientHeight = parent?.clientHeight ?? 0;
+        const parentOverflowY = parent?.style.overflowY;
         if (autoalign === 'bottomleft') {
             cancelAnimationFrame(timer);
             timer = requestAnimationFrame(() => {
@@ -48,7 +91,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.left = `${rect.left}px`;
                 el.style.removeProperty('bottom');
                 el.style.removeProperty('right');
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'bottom';
             halign = 'left';
@@ -60,7 +103,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.removeProperty('left');
                 el.style.removeProperty('bottom');
                 el.style.right = `${rect.right}px`;
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'bottom';
             halign = 'right';
@@ -72,7 +115,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('right');
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'top';
             halign = 'left';
@@ -84,14 +127,85 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
                 el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.right = `${rect.right}px`;
-                adjustParentHeight();
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
             });
             valign = 'top';
             halign = 'right';
         }
+        else if (autoalign === 'top') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.removeProperty('top');
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'top';
+            halign = 'center';
+        }
+        else if (autoalign === 'bottom') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.removeProperty('bottom');
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'bottom';
+            halign = 'center';
+        }
+        else if (autoalign === 'left') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.removeProperty('bottom');
+                if (cover) {
+                    el.style.left = `${rect.left + gap}px`;
+                    el.style.removeProperty('right');
+                }
+                else {
+                    el.style.removeProperty('left');
+                    el.style.right = `${rect.right + rect.width + gap}px`;
+                }
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'left';
+        }
+        else if (autoalign === 'right') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.removeProperty('bottom');
+                if (cover) {
+                    el.style.removeProperty('left');
+                    el.style.right = `${rect.right + gap}px`;
+                }
+                else {
+                    el.style.left = `${rect.left + rect.width + gap}px`;
+                    el.style.removeProperty('right');
+                }
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'right';
+        }
+        else if (autoalign === 'middle') {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
+                el.style.top = `${rect.top + rect.height / 2 - elHeight / 2}px`;
+                el.style.left = `${rect.left + rect.width / 2 - elWidth / 2}px`;
+                el.style.removeProperty('bottom');
+                el.style.removeProperty('right');
+                adjustParentHeight(elOffsetTop, elOffsetHeight, parentClientHeight, parentOverflowY);
+            });
+            valign = 'center';
+            halign = 'center';
+        }
         store?.update(v => ({ ...v, valign, halign }));
     }
-    // eslint-disable-next-line @typescript-eslint/unbound-method
     const { destroy: watchDestroy } = watchForMutations(reposition);
     document.addEventListener('scroll', reposition, { capture: true });
     return {
@@ -116,7 +230,7 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         destroy() {
             watchDestroy();
             document.removeEventListener('scroll', reposition);
-            if (adjustparentheight) {
+            if (adjustparentheight && parent) {
                 if (formerMinHeight)
                     parent.style.minHeight = formerMinHeight;
                 parent.style.removeProperty('min-height');

package/dist/actions/offset.js

@@ -16,11 +16,11 @@ export function offset(el, config) {
         el.dispatchEvent(new CustomEvent('offset', { detail: current }));
     }
     let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange;
-    const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
+    const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent instanceof HTMLElement ? el.offsetParent : document.body : config.container);
     const { destroy, update } = watchForPositionChangeInContainer(el, offsetContainer, resolvedchange);
     return {
         update(newConfig) {
-            const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent ?? document.body : config.container);
+            const offsetContainer = !config?.container ? document.body : (config.container === 'nearest' ? el.offsetParent instanceof HTMLElement ? el.offsetParent : document.body : config.container);
             if (newConfig?.debounce === true)
                 newConfig.debounce = 100;
             if (newConfig?.store !== config?.store) {

package/dist/actions/passactions.d.ts

@@ -6,5 +6,5 @@ export type SvelteHTMLActionType<P = any> = (node: HTMLElement, params?: P) => S
 export type HTMLActionEntry<P = any> = SvelteHTMLActionType<P> | [SvelteHTMLActionType<P>, P];
 export type SvelteSVGActionType<P = any> = (node: SVGElement, params?: P) => SvelteActionReturnType<P> | undefined;
 export type SVGActionEntry<P = any> = SvelteSVGActionType<P> | [SvelteSVGActionType<P>, P];
-export declare function passActions(node: HTMLElement, actions: HTMLActionEntry[]): SvelteActionReturnType<HTMLActionEntry[]>;
-export declare function passActions(node: SVGElement, actions: SVGActionEntry[]): SvelteActionReturnType<SVGActionEntry[]>;
+export declare function passActions(node: HTMLElement, actions: HTMLActionEntry[] | undefined): SvelteActionReturnType<HTMLActionEntry[]>;
+export declare function passActions(node: SVGElement, actions: SVGActionEntry[] | undefined): SvelteActionReturnType<SVGActionEntry[]>;

package/dist/actions/stickyfixed.js

@@ -63,10 +63,10 @@ export function stickyfixed(el, config) {
                 const cell = el.querySelector('th:last-child,td:last-child');
                 if (cell) {
                     const tstyle = window.getComputedStyle(table);
-                    extrawidth = tstyle.borderCollapse === 'collapse' ? parseInt(window.getComputedStyle(cell).borderRightWidth) : 0;
+                    extrawidth = tstyle.borderCollapse === 'collapse' ? parseInt(window.getComputedStyle(cell).borderRightWidth, 10) : 0;
                 }
             }
-            const width = `${parseInt(window.getComputedStyle(spacer).width) + extrawidth}px`;
+            const width = `${parseInt(window.getComputedStyle(spacer).width, 10) + extrawidth}px`;
             elheight = spacer.offsetHeight;
             for (let i = 0; i < tds.length; i++)
                 tds[i].style.width = widths[i];
@@ -126,7 +126,7 @@ export function stickyfixed(el, config) {
             lastOffsetParent = offsetParent;
         }
         const table = el.closest('table');
-        const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing) : 0);
+        const borderspacing = (table ? parseInt(window.getComputedStyle(table).borderSpacing, 10) : 0);
         scrollstart = offset[0].top + el.offsetTop;
         left = offset[0].left + (spacer.parentElement ? spacer.offsetLeft : el.offsetLeft);
         if (el.tagName === 'TR') {

package/dist/components/ButtonMenu.svelte

@@ -22,7 +22,6 @@ export let menuClass = '';
 export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let menuItemSelectedClass = '';
-export let menuDividerClass = '';
 const usemenurole = true;
 </script>
 
@@ -49,4 +48,4 @@ const usemenurole = true;
   {menuItemClass}
   {menuItemHilitedClass}
   {menuItemSelectedClass}
-  {menuDividerClass}/>
+/>

package/dist/components/ButtonMenu.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import { Store } from '@txstate-mws/svelte-store';
 import type { GlueAlignOpts, GlueAlignStore } from '../actions';
-import type { PopupMenuTypes } from '../types';
+import type { PopupMenuItem } from '../types';
 declare const __propDef: {
     props: {
         buttonelement: HTMLButtonElement;
-        items?: PopupMenuTypes[];
+        items?: PopupMenuItem[];
         menushown?: boolean;
         value?: string | undefined;
         align?: GlueAlignOpts;
@@ -25,7 +25,6 @@ declare const __propDef: {
         menuItemClass?: string;
         menuItemHilitedClass?: string;
         menuItemSelectedClass?: string;
-        menuDividerClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CardLayout.svelte

@@ -22,7 +22,8 @@ setContext(CARDLAYOUT, {
             blocks.splice(blocks.indexOf(block), 1);
             hardrecalc();
         });
-        block.order = writable(defaultOrder++);
+        block.order = writable(defaultOrder);
+        defaultOrder += 1;
         block.linebreak = writable(false);
         const cols = savecolumns || Math.ceil(1024 / maxwidth);
         block.width = writable(`calc(${100.0 / cols}% - ${gutter * (cols - 1) / cols}px)`);
@@ -63,7 +64,7 @@ async function recalculate(realw) {
     const cycling = detectcycle(realw);
     if (columns !== savecolumns) {
         for (const block of blocks)
-            block.width.set(`calc(${100.0 / columns}% - ${guttereach}px`);
+            block.width.set(`calc(${100.0 / columns}% - ${guttereach}px)`);
         await tick();
     }
     // collect all the card heights at this new column width
@@ -93,11 +94,10 @@ async function recalculate(realw) {
                                 tallestcol = colheight;
                                 tallestcolidx = colidx;
                             }
-                            colidx++;
+                            colidx += 1;
                             colheight = 0;
                         }
-                        if (!arrangement[colidx])
-                            arrangement[colidx] = [];
+                        arrangement[colidx] ??= [];
                         arrangement[colidx].push(block);
                         colheight += block.height + gutter;
                     }
@@ -117,7 +117,7 @@ async function recalculate(realw) {
         }
         else {
             optimal = [];
-            const heights = Array.apply(null, Array(columns)).map((_) => 0); // initializes heights to an array of zeroes
+            const heights = [...Array(columns)].map((_) => 0); // initializes heights to an array of zeroes
             // begin sorting blocks into columns
             for (const block of blocks) {
                 // find the column with the smallest current height
@@ -125,8 +125,7 @@ async function recalculate(realw) {
                 // record the height we are adding to the chosen column
                 heights[colidx] += block.height + gutter;
                 // move the current card to the chosen column
-                if (!optimal[colidx])
-                    optimal[colidx] = [];
+                optimal[colidx] ??= [];
                 optimal[colidx].push(block);
             }
         }
@@ -136,7 +135,8 @@ async function recalculate(realw) {
         for (let i = 0; i < optimal.length; i++) {
             for (let j = 0; j < optimal[i].length; j++) {
                 const block = optimal[i][j];
-                block.order.set(order++);
+                block.order.set(order);
+                order += 1;
                 block.linebreak.set(j === optimal[i].length - 1 && i < optimal.length - 1);
             }
         }

package/dist/components/ConditionalWrapper.svelte

@@ -35,7 +35,6 @@ $: passthrough = (({ condition, component, a, span, element, ...passthrough }) =
     <svelte:component this={component} bind:element {...passthrough}><slot></slot></svelte:component>
   {:else}
     {#if a}
-      <!-- svelte-ignore a11y-missing-attribute -->
       <a bind:this={element} {...passthrough}><slot></slot></a>
     {:else if span}
       <span bind:this={element} {...passthrough}><slot></slot></span>

package/dist/components/ConditionalWrapper.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         condition: boolean | undefined;
-        component?: any | undefined;
+        component?: any;
         a?: boolean | undefined;
         span?: boolean | undefined;
         element?: HTMLElement | undefined;

package/dist/components/FocusLock.svelte

@@ -13,7 +13,7 @@ When they do, the escape event will be fired, allowing you to remove the dialog.
 When it goes away, they'll be trapped inside the previous `FocusLock`, and so on.
 -->
 <script context="module" lang="ts">export const FocusLockStack = [];
-const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve) => requestAnimationFrame(resolve) : resolve => resolve(0);
+const waitAtick = typeof requestAnimationFrame !== 'undefined' ? (resolve) => requestAnimationFrame(resolve) : (resolve) => resolve(0);
 </script>
 
 <script lang="ts">import { onMount, onDestroy, createEventDispatcher } from 'svelte';
@@ -48,7 +48,7 @@ onMount(async () => {
         pause: () => { state = 'paused'; },
         unpause: () => { if (state === 'paused')
             state = 'active'; },
-        update: () => dispatch('focuslockupdate')
+        update: () => { dispatch('focuslockupdate'); }
     });
     for (const entry of FocusLockStack)
         entry.update();
@@ -123,7 +123,7 @@ const windowclick = (e) => {
 };
 </script>
 <svelte:window on:mousedown={windowclick} />
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y_interactive_supports_focus -->
 <div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:mousedown|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div bind:this={abovelockelement} tabindex="0"></div>

package/dist/components/FocusLock.svelte.d.ts

@@ -19,7 +19,7 @@ declare const __propDef: {
         focusId?: string;
     };
     events: {
-        click: MouseEvent;
+        click: PointerEvent;
         mousedown: MouseEvent;
         escape: CustomEvent<any>;
         focuslockupdate: CustomEvent<any>;

package/dist/components/Modal.svelte

@@ -41,7 +41,6 @@ onMount(() => {
 });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div use:portal={usePortal} class="modal-backdrop" style:--modal-z={stackPosition * 10 + 3000} class:opaque on:mousedown|stopPropagation|preventDefault={() => { escapable && endmodal() }}>
   <FocusLock bind:focusId class="modal-container {containerClass}" {includeselector} {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus} on:focuslockupdate={onFocusLockUpdate}>

package/dist/components/MultiSelect.svelte

@@ -47,7 +47,7 @@ export let includeDeleteAll = false;
 export let confirmDelete = undefined;
 /** A function that can be used to customize the labels on the selected item pills. Default is a function
  * that takes a PopupMenuItem and returns its label, if available, or its value when no label is provided. */
-export let selectedItemLabel = (item) => item.label || item.value;
+export let selectedItemLabel = item => item.label || item.value;
 let menushown;
 let loading = false;
 let options = [];
@@ -58,9 +58,7 @@ let menuid;
 let announcement = '';
 const instructionid = randomid();
 const dispatch = createEventDispatcher();
-const optionsCache = new Cache(async (ipt) => {
-    return await getOptions(ipt);
-}, { freshseconds: 5 });
+const optionsCache = new Cache(async (ipt) => await getOptions(ipt), { freshseconds: 5 });
 const selectedStore = new SafeStore(selected);
 $: $selectedStore = selected;
 $: selectedSet = new Set($selectedStore.map(s => s.value));
@@ -142,6 +140,7 @@ function inputfocus() {
 }
 function inputblur() {
     active = false;
+    hilitedpill = undefined;
     dispatch('blur');
 }
 function removeAllSelections() {
@@ -150,7 +149,8 @@ function removeAllSelections() {
 }
 function confirmRemoveAllSelections() {
     if (confirmDelete) {
-        if (confirm(confirmDelete)) {
+        // eslint-disable-next-line no-alert -- just doing something super simple here
+        if (window.confirm(confirmDelete)) {
             removeAllSelections();
         }
     }
@@ -177,7 +177,7 @@ let gap = 0;
 onMount(() => {
     const ul = inputelement.closest('.multiselect-selected');
     if (ul != null)
-        gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom);
+        gap = ((ul.offsetHeight - ul.clientHeight) / 2) + parseInt(window.getComputedStyle(ul).paddingBottom, 10);
 });
 </script>
 
@@ -203,7 +203,6 @@ onMount(() => {
       {/each}
     </div>
   {/if}
-  <!-- svelte-ignore a11y-role-has-required-aria-props -->
   <input type="text" class={inputClass} {id} {name} {disabled} {placeholder}
     bind:this={inputelement} on:input={reactToInput} on:blur={inputblur}
     on:focus={inputfocus} on:keydown={inputkeydown}

package/dist/components/PopupMenu.svelte

@@ -2,7 +2,7 @@
   The purpose of [`PopupMenu`](https://github.com/txstate-etc/svelte-components/blob/main/docs/PopupMenu.md) is to display a menu of options to the user, activated by clicking any element
   bound to `buttonelement`. It can also be controlled from the parent, by binding the `menushown` boolean.
 -->
-<script lang="ts">import { createEventDispatcher, onDestroy, tick } from 'svelte';
+<script lang="ts" generics="MenuItem extends PopupMenuItem = PopupMenuItem">import { createEventDispatcher, onDestroy, tick } from 'svelte';
 import { groupby, isNull, randomid } from 'txstate-utils';
 import { Store } from '@txstate-mws/svelte-store';
 import { glue, portal } from '../actions';
@@ -129,7 +129,7 @@ function move(idx) {
         return;
     hilited = Math.max(firstactive, Math.min(lastactive, idx));
     itemelements[hilited].scrollIntoView({ block: 'center' });
-    buttonelement.setAttribute('aria-activedescendant', `${menuid}-${hilited}`);
+    buttonelement?.setAttribute('aria-activedescendant', `${menuid}-${hilited}`);
 }
 function isSelectable(itm) {
     return 'value' in itm && !itm.disabled && !hiddenItem(itm);
@@ -142,7 +142,7 @@ function onkeydown(e) {
         if (menushown) {
             let i = (hilited ?? firstactive - 1) + 1;
             while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
-                i++;
+                i += 1;
             move(i);
         }
         else {
@@ -155,7 +155,7 @@ function onkeydown(e) {
         if (menushown) {
             let i = (hilited ?? lastactive + 1) - 1;
             while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
-                i--;
+                i -= 1;
             move(i);
         }
         else {
@@ -199,20 +199,16 @@ function onkeydown(e) {
                 value = (itemsOrderedByGroup[hilited])?.value;
                 dispatch('change', itemsOrderedByGroup[hilited]);
             }
-            else {
-                if (buttonelement.tagName !== 'INPUT') {
-                    e.preventDefault();
-                    menushown = false;
-                }
-            }
-        }
-        else {
-            if (buttonelement.tagName !== 'INPUT') {
+            else if (buttonelement?.tagName !== 'INPUT') {
                 e.preventDefault();
-                menushown = true;
-                tick().then(() => { move(firstactive); }).catch(console.error);
+                menushown = false;
             }
         }
+        else if (buttonelement?.tagName !== 'INPUT') {
+            e.preventDefault();
+            menushown = true;
+            tick().then(() => { move(firstactive); }).catch(console.error);
+        }
     }
     else if (menushown && e.key === 'Escape') {
         e.preventDefault();
@@ -272,7 +268,7 @@ function reactToButtonElement(buttonelement) {
         buttonelement.addEventListener('input', oninput);
         const parents = getScrollParents(buttonelement);
         for (const parent of [...parents, undefined]) {
-            const observer = new IntersectionObserver((entries) => {
+            const observer = new IntersectionObserver(entries => {
                 for (const entry of entries) {
                     if (entry.intersectionRatio < 0.1)
                         menushown = false;
@@ -297,9 +293,9 @@ $: hasSelected = showSelected && !hideSelectedIndicator && items.some(itm => 'va
 </script>
 
 {#if menushown && !loading && (hasMeaningfulItems || !hideEmptyText)}
-  <div use:portal={usePortal === true ? undefined : (usePortal || null)} use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }} class={menuContainerClass}>
+  <div use:portal={usePortal === true ? undefined : (usePortal ?? null)} use:glue={{ target: buttonelement, align, cover, gap, adjustparentheight, store: computedalign }} class={menuContainerClass}>
     <ul bind:this={menuelement} id={menuid} role={usemenurole ? 'menu' : 'listbox'} tabindex="-1" style={width ? `width: ${width}` : ''} class={menuClass} class:hasSelected class:defaultmenu={!menuClass && !menuContainerClass} on:keydown={onkeydown}>
-      {#each Object.entries(grouped) as [group, groupitems]}
+      {#each Object.entries(grouped) as [group, groupitems] (group)}
         {#if group === 'default-group'}
           {#each groupitems as item, i (item.value)}
             {@const itemIndex = getItemIndex(item)}

package/dist/components/PopupMenu.svelte.d.ts

@@ -2,12 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 import { Store } from '@txstate-mws/svelte-store';
 import type { GlueAlignOpts, GlueAlignStore } from '../actions';
 import type { PopupMenuItem } from '../types';
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<MenuItem extends PopupMenuItem = PopupMenuItem> {
+    props(): {
         /** The DOM element that will act as the "button" for this menu. The menu will be placed next to the
           button and be controlled by the button. Keyboard access will be enabled when the button has focus.
-          This component adds all appropriate attributes (tabindex, roles, and aria) automatically. */ buttonelement: HTMLElement;
-        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuItem[];
+          This component adds all appropriate attributes (tabindex, roles, and aria) automatically. */ buttonelement: HTMLElement | undefined;
+        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: MenuItem[] | undefined;
         menushown?: boolean;
         value?: string | undefined;
         /** Control where the menu will appear. Default is to use the current viewport to make a decision to
@@ -46,26 +46,26 @@ declare const __propDef: {
         hideEmptyText?: boolean;
         /** If true, the role for the popup menu will be 'menu' instead of the default 'listbox' value */ usemenurole?: boolean;
     };
-    slots: {
+    events(): {
+        change: CustomEvent<MenuItem>;
+    };
+    slots(): {
         default: {
-            item: PopupMenuItem;
+            item: MenuItem;
             label: string;
             hilited: boolean;
             selected: boolean;
         };
         noresults: {};
     };
-    events: {
-        change: CustomEvent<PopupMenuItem>;
-    };
-};
-export type PopupMenuProps = typeof __propDef.props;
-export type PopupMenuEvents = typeof __propDef.events;
-export type PopupMenuSlots = typeof __propDef.slots;
+}
+export type PopupMenuProps<MenuItem extends PopupMenuItem = PopupMenuItem> = ReturnType<__sveltets_Render<MenuItem>['props']>;
+export type PopupMenuEvents<MenuItem extends PopupMenuItem = PopupMenuItem> = ReturnType<__sveltets_Render<MenuItem>['events']>;
+export type PopupMenuSlots<MenuItem extends PopupMenuItem = PopupMenuItem> = ReturnType<__sveltets_Render<MenuItem>['slots']>;
 /**
  * The purpose of [`PopupMenu`](https://github.com/txstate-etc/svelte-components/blob/main/docs/PopupMenu.md) is to display a menu of options to the user, activated by clicking any element
  * bound to `buttonelement`. It can also be controlled from the parent, by binding the `menushown` boolean.
  */
-export default class PopupMenu extends SvelteComponentTyped<PopupMenuProps, PopupMenuEvents, PopupMenuSlots> {
+export default class PopupMenu<MenuItem extends PopupMenuItem = PopupMenuItem> extends SvelteComponentTyped<PopupMenuProps<MenuItem>, PopupMenuEvents<MenuItem>, PopupMenuSlots<MenuItem>> {
 }
 export {};

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export * from './CardLayout.js';
-export * from './CollapsingTable.js';
-export * from './PopupMenu.js';
+export type * from './CollapsingTable.js';
+export type * from './PopupMenu.js';

package/dist/types/index.js

@@ -1,3 +1 @@
 export * from './CardLayout.js';
-export * from './CollapsingTable.js';
-export * from './PopupMenu.js';

package/dist/util/bodyoffset.js

@@ -44,7 +44,7 @@ function getTranslate(element) {
     }
     // Can either be 2d or 3d transform
     const matrixType = matrix.includes('3d') ? '3d' : '2d';
-    const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+    const matrixValues = matrix.match(/matrix.*\((.+)\)/v)[1].split(', ');
     // 2d matrices have 6 values
     // Last 2 values are X and Y.
     // 2d matrices does not have Z value.

package/dist/util/util.js

@@ -5,7 +5,6 @@ export function debounced(fn, timeout) {
     let timer;
     return (...args) => {
         clearTimeout(timer);
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         timer = setTimeout(() => fn(...args), timeout);
     };
 }
@@ -25,7 +24,7 @@ export function getScrollParents(element) {
         if (excludeStaticParent && style.position === 'static') {
             continue;
         }
-        if (/(auto|scroll|hidden)/.test(style.overflow + style.overflowY + style.overflowX))
+        if (/(auto|scroll|hidden)/v.test(style.overflow + style.overflowY + style.overflowX))
             return [parent, ...getScrollParents(parent)];
     }
     return [document.body];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.11",
+  "version": "1.6.12",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",
@@ -10,7 +10,7 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint --ignore-path .gitignore .",
+    "lint": "eslint .",
     "test": "playwright test tests"
   },
   "dependencies": {
@@ -20,16 +20,18 @@
     "txstate-utils": "^1.7.12"
   },
   "devDependencies": {
+    "@eslint/compat": "^2.0.3",
     "@playwright/test": "^1.18.1",
-    "@sveltejs/adapter-auto": "^3.0.0",
+    "@stylistic/eslint-plugin": "^2.10.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.2",
-    "@types/tabbable": "^3.1.2",
-    "eslint-config-standard-with-typescript": "^43.0.0",
-    "eslint-plugin-svelte": "^2.0.0",
-    "svelte-check": "^3.0.1",
-    "svelte-preprocess": "^5.0.0",
-    "svelte2tsx": "^0.7.0",
+    "@types/tabbable": "^5.0.0",
+    "eslint-config-love": "^151.0.0",
+    "eslint-plugin-svelte": "^3.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.0",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -46,7 +48,9 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "git@github.com:txstate-etc/svelte-components.git"