@txstate-mws/svelte-components 1.6.9 → 1.6.11

package/dist/actions/glue.js

@@ -20,17 +20,18 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
     }
     let lastrect;
+    let timer;
     function reposition() {
         const fixedParent = fixedContainingBlock(el);
         let fixedRect = { left: 0, top: 0, right: 0, bottom: 0 };
         if (fixedParent) {
             const tmpRect = fixedParent.getBoundingClientRect();
-            fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: window.innerHeight - tmpRect.bottom };
+            fixedRect = { left: tmpRect.left, right: document.documentElement.clientWidth - tmpRect.right, top: tmpRect.top, bottom: document.documentElement.clientHeight - tmpRect.bottom };
         }
         if (!target)
             return;
         const tmpRect = target.getBoundingClientRect();
-        const rect = { left: tmpRect.left - fixedRect.left, right: document.documentElement.clientWidth - tmpRect.right - fixedRect.right, top: tmpRect.top - fixedRect.top, bottom: window.innerHeight - tmpRect.bottom - fixedRect.bottom, width: tmpRect.width, height: tmpRect.height };
+        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;
         let autoalign = align;
@@ -41,7 +42,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
         }
         const targetHeight = rect.height;
         if (autoalign === 'bottomleft') {
-            requestAnimationFrame(() => {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.left = `${rect.left}px`;
                 el.style.removeProperty('bottom');
@@ -52,7 +54,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
             halign = 'left';
         }
         else if (autoalign === 'bottomright') {
-            requestAnimationFrame(() => {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
                 el.style.top = `${rect.top + (cover ? 0 : targetHeight) + gap}px`;
                 el.style.removeProperty('left');
                 el.style.removeProperty('bottom');
@@ -63,7 +66,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
             halign = 'right';
         }
         else if (autoalign === 'topleft') {
-            requestAnimationFrame(() => {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
                 el.style.removeProperty('top');
                 el.style.left = `${rect.left}px`;
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;
@@ -74,7 +78,8 @@ export function glue(el, { target, align = 'auto', cover = false, gap = 0, adjus
             halign = 'left';
         }
         else if (autoalign === 'topright') {
-            requestAnimationFrame(() => {
+            cancelAnimationFrame(timer);
+            timer = requestAnimationFrame(() => {
                 el.style.removeProperty('top');
                 el.style.removeProperty('left');
                 el.style.bottom = `${rect.bottom + (cover ? 0 : targetHeight) + gap}px`;

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 = [];
@@ -137,6 +144,20 @@ function inputblur() {
     active = false;
     dispatch('blur');
 }
+function removeAllSelections() {
+    selected = [];
+    dispatch('change', selected);
+}
+function confirmRemoveAllSelections() {
+    if (confirmDelete) {
+        if (confirm(confirmDelete)) {
+            removeAllSelections();
+        }
+    }
+    else {
+        removeAllSelections();
+    }
+}
 let popuphilited;
 $: if (popuphilited != null)
     hilitedpill = undefined;
@@ -161,6 +182,13 @@ onMount(() => {
 </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,7 +196,7 @@ 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>
@@ -188,7 +216,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 +285,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

@@ -3,7 +3,7 @@
   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';
+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,9 +125,7 @@ $: 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' });
@@ -125,7 +141,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? firstactive - 1) + 1;
-            while (items[i] && !isSelectable(items[i]))
+            while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
                 i++;
             move(i);
         }
@@ -138,7 +154,7 @@ function onkeydown(e) {
         e.preventDefault();
         if (menushown) {
             let i = (hilited ?? lastactive + 1) - 1;
-            while (items[i] && !isSelectable(items[i]))
+            while (itemsOrderedByGroup[i] && !isSelectable(itemsOrderedByGroup[i]))
                 i--;
             move(i);
         }
@@ -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,8 +196,8 @@ 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') {
@@ -247,6 +263,9 @@ 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);
@@ -255,10 +274,10 @@ function reactToButtonElement(buttonelement) {
         for (const parent of [...parents, undefined]) {
             const observer = new IntersectionObserver((entries) => {
                 for (const entry of entries) {
-                    if (entry.intersectionRatio < 1)
+                    if (entry.intersectionRatio < 0.1)
                         menushown = false;
                 }
-            }, { root: parent, threshold: 1 });
+            }, { root: parent, threshold: 0.1 });
             observer.observe(buttonelement);
             observers.push(observer);
         }
@@ -278,41 +297,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]}
+        {#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 +429,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';
+import type { PopupMenuItem } from '../types';
 declare const __propDef: {
     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[];
+        /** The list of menu items to be shown. Parent may change this at any time based on user activity. */ items?: PopupMenuItem[];
         menushown?: boolean;
         value?: string | undefined;
         /** Control where the menu will appear. Default is to use the current viewport to make a decision to
@@ -41,15 +41,15 @@ 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: {
         default: {
-            item: PopupMenuTypes;
-            label: any;
+            item: PopupMenuItem;
+            label: string;
             hilited: boolean;
             selected: boolean;
         };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.6.9",
+  "version": "1.6.11",
   "description": "Svelte components that are generically useful.",
   "scripts": {
     "prepublishOnly": "svelte-package",