@txstate-mws/svelte-components 1.6.10 → 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

@@ -25,7 +25,7 @@ export let menuClass = '';
 export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let inputClass = '';
-export let menuDividerClass = '';
+export let menuCategoryClass = '';
 /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */
 export let maxSelections = 0;
 /** Consuming components may need to make decisions about what to display or return as options in the popup based
@@ -41,6 +41,13 @@ export let usePortal = undefined;
 export let descid = undefined;
 /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */
 export let PopupMenu = DefaultPopupMenu;
+/** Add a Delete All button to clear all selected items */
+export let includeDeleteAll = false;
+/** Show a confirmation message before clearing all selections */
+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;
 let menushown;
 let loading = false;
 let options = [];
@@ -51,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));
@@ -135,8 +140,24 @@ function inputfocus() {
 }
 function inputblur() {
     active = false;
+    hilitedpill = undefined;
     dispatch('blur');
 }
+function removeAllSelections() {
+    selected = [];
+    dispatch('change', selected);
+}
+function confirmRemoveAllSelections() {
+    if (confirmDelete) {
+        // eslint-disable-next-line no-alert -- just doing something super simple here
+        if (window.confirm(confirmDelete)) {
+            removeAllSelections();
+        }
+    }
+    else {
+        removeAllSelections();
+    }
+}
 let popuphilited;
 $: if (popuphilited != null)
     hilitedpill = undefined;
@@ -156,11 +177,18 @@ 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>
 
 <div class="multiselect" class:disabled role="combobox" aria-controls={menushown ? menuid : undefined} aria-expanded={menushown}>
+  {#if includeDeleteAll && selected.length}
+    <div class="delete-all-container">
+      <button on:click|preventDefault|stopPropagation={confirmRemoveAllSelections}>
+        <slot name="deleteall">Delete All <ScreenReaderOnly>{selected.length} items</ScreenReaderOnly></slot>
+      </button>
+    </div>
+  {/if}
   {#if selected.length}
     <div class="multiselect-selected" role="listbox" aria-label="selected options">
       {#each selected as option, i (option.value)}
@@ -168,14 +196,13 @@ onMount(() => {
         <div id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
           on:click|preventDefault|stopPropagation={() => { !disabled && removeSelection(option, i, 1) }} on:mousedown={e => { disabled && e.preventDefault() }}
           aria-selected="true" aria-posinset={i + 1} aria-setsize={selected.length}>
-          {option.label || option.value}
+          {selectedItemLabel(option)}
           <i aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path fill="currentColor" d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128L50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg></i>
           <ScreenReaderOnly>, click to deselect</ScreenReaderOnly>
         </div>
       {/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}
@@ -188,7 +215,7 @@ onMount(() => {
 
 <svelte:component this={PopupMenu} bind:menushown bind:menuid bind:hilited={popuphilited} bind:value={popupvalue} align='bottomleft'
  {usePortal} {loading} {emptyText} {gap}
- {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuDividerClass}
+ {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} {menuCategoryClass}
  items={options} buttonelement={inputelement}
  on:change={addSelection}/>
 
@@ -257,4 +284,9 @@ onMount(() => {
     border: var(--multiselect-pill-selected-border, 1px solid transparent);
     color: var(--multiselect-pill-selected-text, white);
   }
+  .delete-all-container {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
 </style>

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

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import DefaultPopupMenu from './PopupMenu.svelte';
-import type { PopupMenuItem, PopupMenuTypes } from '../types';
+import type { PopupMenuItem } from '../types';
 declare const __propDef: {
     props: {
         name: string;
         /**
            * Function to pass to the component that tells it how to use the text in the text input to determine what
            * `PopupMenuItem[]` should be displayed in the `PopupMenu`. Items already 'selected' from the popup menu will
-           * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuTypes[]> | PopupMenuTypes[];
+           * be tracked and automatically filtered from the popup if returned as one of the `PopupMenuItem[]` by `getOptions`. */ getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
         id?: string;
         disabled?: boolean;
         menuContainerClass?: string;
@@ -15,7 +15,7 @@ declare const __propDef: {
         menuItemClass?: string;
         menuItemHilitedClass?: string;
         inputClass?: string;
-        menuDividerClass?: string;
+        menuCategoryClass?: string;
         /** The maximum number of selections allowed before making new selections is disabled. Default of 0 is unlimited. */ maxSelections?: number;
         /** Consuming components may need to make decisions about what to display or return as options in the popup based
            * on what's already selected. This component property can be used to both pass an initial set of selections but
@@ -26,6 +26,10 @@ declare const __propDef: {
         usePortal?: HTMLElement | true | undefined;
         descid?: string | undefined;
         /** You can define your own PopupMenu and pass for that to be used or accept DefaultPopupMenu. */ PopupMenu?: typeof DefaultPopupMenu;
+        /** Add a Delete All button to clear all selected items */ includeDeleteAll?: boolean;
+        /** Show a confirmation message before clearing all selections */ confirmDelete?: string | 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. */ selectedItemLabel?: (item: PopupMenuItem) => string;
     };
     events: {
         change: CustomEvent<any>;
@@ -35,6 +39,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        deleteall: {};
         default: {};
     };
 };

package/dist/components/PopupMenu.svelte

@@ -2,8 +2,8 @@
   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';
-import { isNotBlank, randomid } from 'txstate-utils';
+<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';
 import ScreenReaderOnly from './ScreenReaderOnly.svelte';
@@ -60,22 +60,40 @@ export let menuClass = '';
 export let menuItemClass = '';
 export let menuItemHilitedClass = '';
 export let menuItemSelectedClass = '';
-export let menuDividerClass = '';
+export let menuCategoryClass = '';
 export let hideSelectedIndicator = false;
 export let hideEmptyText = false;
+/** If true, the role for the popup menu will be 'menu' instead of the default 'listbox' value */
 export let usemenurole = false;
 let menuelement;
 const itemelements = [];
 let firstactive = 0;
 let lastactive = items.length - 1;
-$: hasMeaningfulItems = showSelected ? !!items.filter(itm => 'value' in itm).length : !!items.filter(itm => 'value' in itm && itm.value !== value).length;
+$: hasMeaningfulItems = showSelected ? !!items.length : !!items.filter(itm => itm.value !== value).length;
 function hiddenItem(item) {
     return !!item && !showSelected && item.value === value;
 }
+$: grouped = groupby(items, item => item.group ?? 'default-group');
+let itemsOrderedByGroup = [];
+function getItemIndex(item) {
+    return itemsOrderedByGroup.findIndex(itm => {
+        // need to handle default group options
+        if (itm.value === item.value) {
+            if (item.group === 'default-group') {
+                return isNull(itm.group);
+            }
+            else {
+                return item.group === itm.group;
+            }
+        }
+        return false;
+    });
+}
 async function reactToItems(..._) {
-    firstactive = items.findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm));
-    lastactive = items.length - [...items].reverse().findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm)) - 1;
-    if (hilited && items[hilited]?.disabled)
+    itemsOrderedByGroup = Object.values(grouped).flat();
+    firstactive = itemsOrderedByGroup.findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm));
+    lastactive = itemsOrderedByGroup.length - [...itemsOrderedByGroup].reverse().findIndex(itm => 'value' in itm && !itm.disabled && !hiddenItem(itm)) - 1;
+    if (hilited && (itemsOrderedByGroup[hilited])?.disabled)
         hilited = firstactive;
 }
 $: void reactToItems(items, value);
@@ -107,13 +125,11 @@ $: void reactToMenuShown(menushown);
 function move(idx) {
     if (!menushown)
         return;
-    while (idx <= lastactive && items[idx] != null && 'divider' in items[idx])
-        idx++;
-    if (items[idx] == null || items[idx]?.disabled)
+    if (itemsOrderedByGroup[idx] == null || (itemsOrderedByGroup[idx])?.disabled)
         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);
@@ -125,8 +141,8 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? firstactive - 1) + 1;
-            while (items[i] && !isSelectable(items[i]))
-                i++;
+            while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
+                i += 1;
             move(i);
         }
         else {
@@ -138,8 +154,8 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? lastactive + 1) - 1;
-            while (items[i] && !isSelectable(items[i]))
-                i--;
+            while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
+                i -= 1;
             move(i);
         }
         else {
@@ -164,8 +180,8 @@ function onkeydown(e) {
         if (menushown) {
             menushown = false;
             if (typeof hilited !== 'undefined') {
-                value = items[hilited]?.value;
-                dispatch('change', items[hilited]);
+                value = (itemsOrderedByGroup[hilited])?.value;
+                dispatch('change', itemsOrderedByGroup[hilited]);
             }
         }
         else {
@@ -180,23 +196,19 @@ function onkeydown(e) {
             if (typeof hilited !== 'undefined') {
                 e.preventDefault();
                 menushown = false;
-                value = items[hilited]?.value;
-                dispatch('change', items[hilited]);
+                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();
@@ -247,13 +259,16 @@ function reactToButtonElement(buttonelement) {
     if (buttonelement) {
         buttonelement.setAttribute('aria-haspopup', (usemenurole ? 'true' : 'listbox'));
         buttonelement.setAttribute('aria-expanded', menushown ? 'true' : 'false');
+        if (!usemenurole) {
+            buttonelement.setAttribute('role', 'combobox');
+        }
         buttonelement.addEventListener('click', onbuttonclick);
         buttonelement.addEventListener('keydown', onkeydown);
         buttonelement.addEventListener('blur', onblur);
         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;
@@ -278,41 +293,62 @@ $: 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}>
-    <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 items as item, i ('value' in item ? item.value : `popupmenu_divider_${i}`)}
-        {#if 'value' in item && (showSelected || item.value !== value)}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <li
-            id={`${menuid}-${i}`}
-            bind:this={itemelements[i]}
-            class={`${menuItemClass} ${i === hilited ? menuItemHilitedClass : ''} ${value === item.value ? menuItemSelectedClass : ''}`}
-            class:disabled={!!item.disabled}
-            class:hilited={!menuItemHilitedClass && i === hilited}
-            class:selected={showSelected && !hideSelectedIndicator && value === item.value}
-            on:click={onclick(item)}
-            role={usemenurole ? 'menuitem' : 'option'}
-            tabindex=-1
-            aria-selected={usemenurole ? undefined : (value === item.value)}
-            aria-disabled={item.disabled}
-          ><slot {item} label={item.label || item.value} hilited={i === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
-        {:else if 'divider' in item && item.divider}
-          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-          <li class={`divider ${menuDividerClass}`} on:mousedown|stopPropagation|preventDefault={() => {}} class:group={isNotBlank(item.label)}>{item.label}</li>
+  <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] (group)}
+        {#if group === 'default-group'}
+          {#each groupitems as item, i (item.value)}
+            {@const itemIndex = getItemIndex(item)}
+            {#if (showSelected || item.value !== value)}
+              <li
+                id={`${menuid}-${itemIndex}`}
+                bind:this={itemelements[itemIndex]}
+                class={`${menuItemClass} ${itemIndex === hilited ? menuItemHilitedClass : ''} ${value === item.value ? menuItemSelectedClass : ''}`}
+                class:disabled={!!item.disabled}
+                class:hilited={!menuItemHilitedClass && itemIndex === hilited}
+                class:selected={showSelected && !hideSelectedIndicator && value === item.value}
+                on:click={onclick(item)}
+                role={usemenurole ? 'menuitem' : 'option'}
+                tabindex=-1
+                aria-selected={usemenurole ? undefined : (value === item.value)}
+                aria-disabled={item.disabled}
+                ><slot {item} label={item.label || item.value} hilited={itemIndex === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
+            {/if}
+          {/each}
+        {:else}
+          <li role="group" aria-labelledby="{menuid}-{group}" class="group">
+            <span id="{menuid}-{group}" class="category {menuCategoryClass}">{group}</span>
+            <ul role="presentation">
+              {#each groupitems as item, i (item.value)}
+                {@const itemIndex = getItemIndex(item)}
+                {#if (showSelected || item.value !== value)}
+                  <li
+                  id={`${menuid}-${itemIndex}`}
+                  bind:this={itemelements[itemIndex]}
+                  class={`${menuItemClass} ${itemIndex === hilited ? menuItemHilitedClass : ''} ${value === item.value ? menuItemSelectedClass : ''}`}
+                  class:disabled={!!item.disabled}
+                  class:hilited={!menuItemHilitedClass && itemIndex === hilited}
+                  class:selected={showSelected && !hideSelectedIndicator && value === item.value}
+                  on:click={onclick(item)}
+                  role={usemenurole ? 'menuitem' : 'option'}
+                  tabindex=-1
+                  aria-selected={usemenurole ? undefined : (value === item.value)}
+                  aria-disabled={item.disabled}
+                  ><slot {item} label={item.label || item.value} hilited={itemIndex === hilited} selected={value === item.value}>{item.label || item.value}</slot></li>
+                {/if}
+              {/each}
+            </ul>
+          </li>
         {/if}
       {/each}
       {#if !hasMeaningfulItems}
         <li role={usemenurole ? 'menuitem' : 'option'} class={`${menuItemClass} disabled`} aria-live="assertive" aria-selected={usemenurole ? undefined : false}>
           <slot name="noresults">
-            {#if !emptyText}
-              <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'no results found'}</ScreenReaderOnly>
-            {:else}
-              {emptyText}
-            {/if}
+          {#if !emptyText}
+            <span aria-hidden="true">{'¯\\_(ツ)_/¯'}</span><ScreenReaderOnly>{emptyText || 'no results found'}</ScreenReaderOnly>
+          {:else}
+            {emptyText}
+          {/if}
           </slot>
         </li>
       {/if}
@@ -389,4 +425,11 @@ $: hasSelected = showSelected && !hideSelectedIndicator && items.some(itm => 'va
     border-right: 0.2em solid;
     box-sizing: border-box;
   }
+  span.category {
+    display: block;
+    font-weight: bold;
+  }
+  .group ul {
+    padding-inline-start: 20px;
+  }
 </style>

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

@@ -1,13 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import { Store } from '@txstate-mws/svelte-store';
 import type { GlueAlignOpts, GlueAlignStore } from '../actions';
-import type { PopupMenuItem, PopupMenuTypes } from '../types';
-declare const __propDef: {
-    props: {
+import type { PopupMenuItem } from '../types';
+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?: PopupMenuTypes[];
+          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
@@ -41,31 +41,31 @@ declare const __propDef: {
         menuItemClass?: string;
         menuItemHilitedClass?: string;
         menuItemSelectedClass?: string;
-        menuDividerClass?: string;
+        menuCategoryClass?: string;
         hideSelectedIndicator?: boolean;
         hideEmptyText?: boolean;
-        usemenurole?: 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: PopupMenuTypes;
-            label: any;
+            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/PopupMenu.d.ts

@@ -7,8 +7,12 @@ export interface PopupMenuItem {
     /** Toggles the choice as one that's visible but is disabled and unclickable until conditions
      * are met that would cause it to become enabled. */
     disabled?: boolean;
+    /** Allows PopupMenuItems to be grouped by categories in the menu */
+    group?: string;
 }
-/** A PopupMenu list native type for displaying */
+/** A PopupMenu list native type for displaying
+ * @note Not currently in use
+ */
 export interface PopupMenuDivider {
     /** Toggle for whether this instance of this type is shown. */
     divider: boolean;
@@ -23,7 +27,7 @@ export interface PopupMenuDivider {
  * @note Not currently in use. */
 export interface PopupMenuGroup {
     /** The label for the group. */
-    lable: string;
+    label: string;
     /** The listing of options that would be listed under the parent `<ul>`. */
     options: PopupMenuTypes[];
 }

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.10",
+  "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"