@likable-hair/svelte 3.3.13 → 3.3.15

package/dist/components/composed/forms/AvatarDropdown.svelte

@@ -80,14 +80,21 @@ let tooltipsActivator = [];
                   src={avatar.src}
                   --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
                 ></Avatar>
-                <button 
+                <div 
                   on:click|stopPropagation={() => {
                     handleCloseClick({ index: i })
                   }}
+                  on:keypress={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      handleCloseClick({ index: i })
+                    }
+                  }}
                   class="unstyled-button remove-button"
+                  role="button"
+                  tabindex="0"
                 >
                   <Icon --icon-default-size="10px" name="mdi-close"></Icon>
-                </button>
+                </div>
               </div>
             {/each}
           </div>

package/dist/components/composed/list/DynamicTable.css

@@ -1,10 +1,10 @@
 :root {
-  --dynamic-table-cell-editor-default-background-color: rgb(var(--global-color-background-300));
-  --dynamic-table-quick-filter-default-background-color: rgb(var(--global-color-background-300));
-  --dynamic-table-row-default-background-color-hover: rgb(var(--global-color-background-400));
-  --dynamic-table-expanded-row-default-background-color: rgb(var(--global-color-background-500));
-  --dynamic-table-selected-row-default-background-color: rgb(var(--global-color-primary-200));
-  --dynamic-table-row-default-disabled-background-color: rgb(var(--global-color-primary-400));
+  --dynamic-table-default-cell-editor-background-color: rgb(var(--global-color-background-300));
+  --dynamic-table-default-quick-filter-background-color: rgb(var(--global-color-background-300));
+  --dynamic-table-default-row-background-color-hover: rgb(var(--global-color-background-400));
+  --dynamic-table-default-expanded-row-background-color: rgb(var(--global-color-background-500));
+  --dynamic-table-default-selected-row-background-color: rgb(var(--global-color-primary-200));
+  --dynamic-table-default-row-disabled-background-color: rgb(var(--global-color-primary-400));
   --dynamic-table-default-header-background-color: rgb(var(--global-color-background-500));
   --dynamic-table-default-background-color: transparent;
   --dynamic-table-default-max-height: 70vh;
@@ -16,4 +16,7 @@
   --dynamic-table-default-header-border-radius: 5px;
   --dynamic-table-default-header-height: 30px;
   --dynamic-table-default-row-min-height: auto;
+  --dynamic-table-default-end-line-background-color: transparent;
+  --dynamic-table-default-end-line-color: rgb(var(--global-color-contrast-500));
+  --dynamic-table-default-end-line-text-color: rgb(var(--global-color-contrast-500));
 }

package/dist/components/composed/list/DynamicTable.svelte

@@ -13,7 +13,7 @@
   ToolTip
 } from "../../..";
 import { DateTime } from "luxon";
-import { createEventDispatcher, onMount } from "svelte";
+import { createEventDispatcher, onMount, tick } from "svelte";
 import { quintOut } from "svelte/easing";
 import { crossfade, fade } from "svelte/transition";
 import Filters from "../search/Filters.svelte";
@@ -35,10 +35,10 @@ import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
 onMount(() => {
   updateHeaderHeight();
   window.addEventListener("resize", updateHeaderHeight);
-  tableContainer.addEventListener("scroll", setReachedBottom);
+  tableContainer.addEventListener("scroll", setReachedBottomOrTop);
   return () => {
     window.removeEventListener("resize", updateHeaderHeight);
-    tableContainer.removeEventListener("scroll", setReachedBottom);
+    tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
   };
 });
 let mainHeader;
@@ -48,9 +48,26 @@ function updateHeaderHeight() {
     document.documentElement.style.setProperty("--main-header-height", headerHeight + "px");
   }
 }
-function setReachedBottom() {
+function setReachedBottomOrTop() {
   reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
+  reachedTop = tableContainer.scrollTop === 0;
 }
+$:
+  if (reachedBottom && rows.length < totalRows) {
+    setTimeout(() => {
+      if (reachedBottom) {
+        handleLoadForward();
+      }
+    }, 30);
+  }
+$:
+  if (reachedTop && currentSectionNumber > 0) {
+    setTimeout(() => {
+      if (reachedTop) {
+        handleLoadBackward();
+      }
+    }, 30);
+  }
 const [send, receive] = crossfade({
   duration: 500,
   fallback(node, params) {
@@ -70,7 +87,7 @@ let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
 export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false;
 $:
   totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
 $:
@@ -578,7 +595,7 @@ function handleRemoveFilter(filter) {
   dispatch("removeFilter", { filter });
   handleSearchChange(searchText);
 }
-function handleLoadForward() {
+async function handleLoadForward() {
   if (renderedRows.length >= renderedRowsNumber) {
     userScrolling = false;
     const anchorIndex = renderedRowsNumber - 1;
@@ -596,19 +613,18 @@ function handleLoadForward() {
       }
     }
     currentSectionNumber = currentSectionNumber + 1;
-    setTimeout(() => {
-      const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-      tableContainer.scrollTop += offsetDiff;
-      userScrolling = true;
-    }, 10);
+    await tick();
+    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+    tableContainer.scrollTop += offsetDiff;
+    userScrolling = true;
   }
   if (totalCachedSections - sectionThreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
     dispatch("fetchData", {});
   }
 }
-function handleLoadBackward() {
+async function handleLoadBackward() {
   userScrolling = false;
   const anchorIndex = 0;
   const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
@@ -625,13 +641,12 @@ function handleLoadBackward() {
     }
   }
   currentSectionNumber = currentSectionNumber - 1;
-  setTimeout(() => {
-    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-    tableContainer.scrollTop += offsetDiff;
-    userScrolling = true;
-  }, 10);
+  await tick();
+  const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+  const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+  const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+  tableContainer.scrollTop += offsetDiff;
+  userScrolling = true;
 }
 function findAnchorElement(key) {
   for (let i = 0; i < tableBody.children.length; i++) {
@@ -658,75 +673,78 @@ function findAnchorElement(key) {
   />
 
   <slot name="search-bar" {handleSearchChange}>
-    <div class="search-bar-container">
-      {#if searchBarVisible}
-        <SimpleTextField
-          placeholder={searchBarPlaceholder}
-          appendInnerIcon="mdi-magnify"
-          bind:value={searchText}
-          bind:input={searchBarInput}
-          on:keydown={handleSearchBoxKeydown}
-          --simple-textfield-default-width="450px"
-          --simple-textfield-border-radius= 0.5rem
-          --simple-textfield-background-color= transparent
-          --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-          --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-        />
-      {/if}
+    {#if searchBarVisible || filtersVisible}
+      <div class="search-bar-container">
+        {#if searchBarVisible}
+          <SimpleTextField
+            placeholder={searchBarPlaceholder}
+            appendInnerIcon="mdi-magnify"
+            bind:value={searchText}
+            bind:input={searchBarInput}
+            on:keydown={handleSearchBoxKeydown}
+            --simple-textfield-default-width="450px"
+            --simple-textfield-border-radius= 0.5rem
+            --simple-textfield-background-color= transparent
+            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+          />
+        {/if}
 
-      {#if filtersVisible}
-        <div style="margin-left: 20px;">
-          <Filters
-            bind:filters
-            on:applyFilter={() => {
-              handleSearchChange(searchText);
-            }}
-            on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
-            on:removeAllFilters={() => handleRemoveAllFilters()}
-            --filters-default-wrapper-width="100%"
-            {lang}
-            {editFilterMode}
-            {showActiveFilters}
-          >
-            <svelte:fragment slot="append">
-              <slot name="filter-append" />
-            </svelte:fragment>
-            <svelte:fragment slot="custom-chip" let:filter>
-              <slot name="custom-filter-chip" {filter} />
-            </svelte:fragment>
-            <svelte:fragment
-              slot="custom"
-              let:filter
-              let:updateFunction
-              let:mAndDown
+        {#if filtersVisible}
+          <div style="margin-left: 20px;">
+            <Filters
+              bind:filters
+              on:applyFilter={() => {
+                handleSearchChange(searchText);
+              }}
+              on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+              on:removeAllFilters={() => handleRemoveAllFilters()}
+              --filters-default-wrapper-width="100%"
+              {lang}
+              {editFilterMode}
+              {showActiveFilters}
             >
-              <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
-            </svelte:fragment>
+              <svelte:fragment slot="append">
+                <slot name="filter-append" />
+              </svelte:fragment>
+              <svelte:fragment slot="custom-chip" let:filter>
+                <slot name="custom-filter-chip" {filter} />
+              </svelte:fragment>
+              <svelte:fragment
+                slot="custom"
+                let:filter
+                let:updateFunction
+                let:mAndDown
+              >
+                <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
+              </svelte:fragment>
 
-            <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
-              {#key filters}
-                <DynamicFilters
-                  {lang}
-                  {filters}                      
-                  {mAndDown}
-                  on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                  on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
-                >
-                  <svelte:fragment slot="custom" let:filter let:mAndDown>
-                    <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
-                  </svelte:fragment>
-                </DynamicFilters>
-              {/key}
-            </svelte:fragment>
-          </Filters>
-        </div>
-      {/if}
-    </div>
+              <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
+                {#key filters}
+                  <DynamicFilters
+                    {lang}
+                    {filters}                      
+                    {mAndDown}
+                    on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                    on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
+                  >
+                    <svelte:fragment slot="custom" let:filter let:mAndDown>
+                      <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
+                    </svelte:fragment>
+                  </DynamicFilters>
+                {/key}
+              </svelte:fragment>
+            </Filters>
+          </div>
+        {/if}
+      </div>
+    {/if}
   </slot>
 
-  {#if quickFiltersVisible}
+  {#if quickFiltersVisible || numberOfResultsVisible}
+  <div class="quick-filters-results-container">
     <div class="quick-filters">
-      {#if !!quickFilters && quickFilters.length > 0}
+      {#if !!quickFilters && quickFilters.length > 0 && quickFiltersVisible}
         {#each quickFilters as quickFilter}
           <div
             class={quickFilter.active ? "active-quick-filters" : "non-active-quick-filters"}
@@ -757,23 +775,24 @@ function findAnchorElement(key) {
         {/each}
       {/if}
     </div>
+    {#if numberOfResultsVisible}
+      <div class='results-number'>
+        { lang == 'en' ? 'Results: ' : 'Risultati: '}
+        {#if !loading}
+          {totalRows || rows.length}
+        {:else}
+          <CircularLoader 
+            {loading}
+            --circular-loader-height='10px'
+          ></CircularLoader>
+        {/if}
+      </div>
+    {/if}
+  </div>
   {/if}
 
-  {#if numberOfResultsVisible}
-    <div class='results-number'>
-      { lang == 'en' ? 'Results: ' : 'Risultati: '}
-      {#if !loading}
-        {totalRows || rows.length}
-      {:else}
-        <CircularLoader 
-          {loading}
-          --circular-loader-height='10px'
-        ></CircularLoader>
-      {/if}
-    </div>
-  {/if}
   <div class="outer-container">
-    <div class="inner-container" bind:this={tableContainer}>
+    <div class="inner-container" bind:this={tableContainer} on:scroll>
   <!-- <div class="table-container" bind:this={tableContainer}> -->
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
@@ -915,11 +934,11 @@ function findAnchorElement(key) {
                 !!row.item.disableEdit ?
                   !!row.item.rowDisableBackgroundColor ?
                     row.item.rowDisableBackgroundColor : 
-                    'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-row-default-disabled-background-color))' : 
+                    'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-default-row-disabled-background-color))' : 
                 expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey] ) != -1 ? 
-                  'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-expanded-row-default-background-color))' :
+                  'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-default-expanded-row-background-color))' :
                   !!selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey]) ?
-                    'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-selected-row-default-background-color))' :
+                    'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))' :
                     ""
                 }
               class:row-activator={cellEditorIndexRow == indexRow && !cellEditorSubItem}
@@ -1314,6 +1333,7 @@ function findAnchorElement(key) {
             multiple
             items={quickFilterActive.type.items}
             bind:values={quickFilterActive.type.values}
+            --autocomplete-border-radius= 0.5rem
             --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
             --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
           >
@@ -1574,7 +1594,6 @@ function findAnchorElement(key) {
   .inner-container {
     overflow-y: auto;
     margin-right: -15px;
-    padding-right: 15px;
     max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
   }
 
@@ -1717,7 +1736,7 @@ function findAnchorElement(key) {
   .item-row:hover {
     background-color: var(
       --dynamic-table-row-background-color-hover,
-      var(--dynamic-table-row-default-background-color-hover)
+      var(--dynamic-table-default-row-background-color-hover)
     );
   }
 
@@ -1732,7 +1751,7 @@ function findAnchorElement(key) {
     border-radius: 10px;
     background-color: var(
       --dynamic-table-cell-editor-background-color,
-      var(--dynamic-table-cell-editor-default-background-color)
+      var(--dynamic-table-default-cell-editor-background-color)
     );
     height: 200px;
     width: 500px;
@@ -1741,7 +1760,7 @@ function findAnchorElement(key) {
   .row-activator {
     background-color: var(
       --dynamic-table-row-background-color-hover,
-      var(--dynamic-table-row-default-background-color-hover)
+      var(--dynamic-table-default-row-background-color-hover)
     );
   }
 
@@ -1756,7 +1775,7 @@ function findAnchorElement(key) {
     border-radius: 10px;
     background-color: var(
       --dynamic-table-quick-filter-background-color,
-      var(--dynamic-table-quick-filter-default-background-color)
+      var(--dynamic-table-default-quick-filter-background-color)
     );
   }
 
@@ -1803,6 +1822,11 @@ function findAnchorElement(key) {
     margin-bottom: 10px;
   }
 
+  .quick-filters-results-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .vertical-quick-filters {
     display: flex;
     flex-direction: column;
@@ -1866,7 +1890,10 @@ function findAnchorElement(key) {
     bottom: 0;
     left: 0;
     width: 100%;
-    background: white;
+    background: var(
+      --dynamic-table-end-line-background-color,
+      var(--dynamic-table-default-end-line-background-color)
+    );
     display: flex;
     justify-content: center;
     align-items: center;
@@ -1876,10 +1903,20 @@ function findAnchorElement(key) {
   .line {
     flex-grow: 1;
     height: 1px;
-    background: rgb(var(--global-color-contrast-800));
+    background: var(
+      --dynamic-table-end-line-color,
+      var(--dynamic-table-default-end-line-color)
+    );
     margin: 0 10px;
   }
 
+  .text {
+    color: var(
+      --dynamic-table-end-line-text-color,
+      var(--dynamic-table-default-end-line-text-color)
+    );
+  }
+
   .results-number {
     margin: 0px 0px 4px 4px;
     display: flex;

package/dist/components/composed/list/DynamicTable.svelte.d.ts

@@ -165,6 +165,7 @@ declare const __propDef: {
         endLineVisible?: boolean | undefined;
     };
     events: {
+        scroll: Event;
         click: MouseEvent;
         sort: CustomEvent<{
             sortedBy: string | undefined;

package/dist/components/simple/forms/Autocomplete.svelte

@@ -221,104 +221,106 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   </slot>
 </div>
 
-<slot name="menu">
-  {#if !mobileDrawer}
-    <Menu
-      {activator}
-      _width={localMenuWidth || ""}
-      _height={menuHeight}
-      _maxHeight="300px"
-      _boxShadow={menuBoxShadow}
-      _borderRadius={menuBorderRadius}
-      bind:open={menuOpened}
-      anchor="bottom-center"
-      closeOnClickOutside
-      bind:refreshPosition
-      bind:menuElement
-      bind:openingId={openingId}
-      flipOnOverflow
-    >
-      <ul
-        class={clazz.menu || ''}
-        style:background-color="rgb(var(--global-color-background-100))"
+{#key searchText}
+  <slot name="menu">
+    {#if !mobileDrawer}
+      <Menu
+        {activator}
+        _width={localMenuWidth || ""}
+        _height={menuHeight}
+        _maxHeight="300px"
+        _boxShadow={menuBoxShadow}
+        _borderRadius={menuBorderRadius}
+        bind:open={menuOpened}
+        anchor="bottom-center"
+        closeOnClickOutside
+        bind:refreshPosition
+        bind:menuElement
+        bind:openingId={openingId}
+        flipOnOverflow
       >
-        {#each filteredItems as item, index}
-          <li class="item-{index}">
-            <slot
-              name="item"
-              {item}
-              {index}
-              selected={(values || []).findIndex((i) => {
-                return i.value == item.value;
-              }) != -1}
-            >
-              <div
-                class:selection-item={true}
-                class:focused={index == focusedIndex}
-                class:selected={(values || []).findIndex((i) => {
+        <ul
+          class={clazz.menu || ''}
+          style:background-color="rgb(var(--global-color-background-100))"
+        >
+          {#each filteredItems as item, index}
+            <li class="item-{index}">
+              <slot
+                name="item"
+                {item}
+                {index}
+                selected={(values || []).findIndex((i) => {
                   return i.value == item.value;
                 }) != -1}
-                on:click={() => toggle(item)}
-                on:keypress={() => toggle(item)}
-                role="button"
-                tabindex="0"
               >
-                <slot name="item-label" {item}>
-                  {item.label}
-                </slot>
-              </div>
-            </slot>
-          </li>
-        {/each}
-      </ul>
-    </Menu>
-  {:else}
-    <MenuOrDrawer
-      {activator}
-      _width={localMenuWidth || ""}
-      _height={menuHeight}
-      _maxHeight="300px"
-      _boxShadow={menuBoxShadow}
-      _borderRadius={menuBorderRadius}
-      bind:open={menuOpened}
-      on:close
-    >
-      <ul
-        class={clazz.menu || ''}
-        style:background-color="rgb(var(--global-color-background-100))"
+                <div
+                  class:selection-item={true}
+                  class:focused={index == focusedIndex}
+                  class:selected={(values || []).findIndex((i) => {
+                    return i.value == item.value;
+                  }) != -1}
+                  on:click={() => toggle(item)}
+                  on:keypress={() => toggle(item)}
+                  role="button"
+                  tabindex="0"
+                >
+                  <slot name="item-label" {item}>
+                    {item.label}
+                  </slot>
+                </div>
+              </slot>
+            </li>
+          {/each}
+        </ul>
+      </Menu>
+    {:else}
+      <MenuOrDrawer
+        {activator}
+        _width={localMenuWidth || ""}
+        _height={menuHeight}
+        _maxHeight="300px"
+        _boxShadow={menuBoxShadow}
+        _borderRadius={menuBorderRadius}
+        bind:open={menuOpened}
+        on:close
       >
-        {#each filteredItems as item, index}
-          <li class="item-{index}">
-            <slot
-              name="item"
-              {item}
-              {index}
-              selected={(values || []).findIndex((i) => {
-                return i.value == item.value;
-              }) != -1}
-            >
-              <div
-                class:selection-item={true}
-                class:focused={index == focusedIndex}
-                class:selected={(values || []).findIndex((i) => {
+        <ul
+          class={clazz.menu || ''}
+          style:background-color="rgb(var(--global-color-background-100))"
+        >
+          {#each filteredItems as item, index}
+            <li class="item-{index}">
+              <slot
+                name="item"
+                {item}
+                {index}
+                selected={(values || []).findIndex((i) => {
                   return i.value == item.value;
                 }) != -1}
-                on:click={() => toggle(item)}
-                on:keypress={() => toggle(item)}
-                role="button"
-                tabindex="0"
               >
-                <slot name="item-label" {item}>
-                  {item.label}
-                </slot>
-              </div>
-            </slot>
-          </li>
-        {/each}
-      </ul>
-    </MenuOrDrawer>
-  {/if}
-</slot>
+                <div
+                  class:selection-item={true}
+                  class:focused={index == focusedIndex}
+                  class:selected={(values || []).findIndex((i) => {
+                    return i.value == item.value;
+                  }) != -1}
+                  on:click={() => toggle(item)}
+                  on:keypress={() => toggle(item)}
+                  role="button"
+                  tabindex="0"
+                >
+                  <slot name="item-label" {item}>
+                    {item.label}
+                  </slot>
+                </div>
+              </slot>
+            </li>
+          {/each}
+        </ul>
+      </MenuOrDrawer>
+    {/if}
+  </slot>
+{/key}
 
 <style>
   ul {

package/dist/components/simple/media/Icon.svelte

@@ -5,16 +5,13 @@ import "../common/materialDesign.css";
 </script>
 
 {#if click}
-  <button
+  <span
+    role="button"
     on:click
     on:keypress
-    class="{clazz}"
+    class="icon mdi {name} {clazz} click"
     {tabindex}
-  >
-    <span
-      class="icon mdi {name} {clazz}"
-    />
-  </button>
+  />
 {:else}
   <span
     class="icon mdi {name} {clazz}"
@@ -22,31 +19,6 @@ import "../common/materialDesign.css";
 {/if}
 
 <style>
-  button {
-    background: none; 
-    border: none; 
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-    outline: inherit;
-    height: var(
-      --icon-container-height,
-      var(--icon-default-container-height)
-    );
-    width: var(
-      --icon-container-width,
-      var(--icon-default-container-width)
-    )
-  }
-
-  button:active, button:focus {
-    color: var(
-      --icon-active-color,
-      rgb(var(--global-color-primary-500))
-    );
-  }
-
   .icon {
     font-size: var(
       --icon-size,
@@ -60,9 +32,25 @@ import "../common/materialDesign.css";
   .icon.click {
     cursor: var(--icon-cursor, pointer);
     pointer-events: var(--icon-pointer-events, auto);
+    height: var(
+      --icon-container-height,
+      var(--icon-default-container-height)
+    );
+    width: var(
+      --icon-container-width,
+      var(--icon-default-container-width)
+    );
   }
   .icon.click:not(.click) {
     cursor: var(--icon-cursor, default);
     pointer-events: var(--icon-pointer-events, none);
   }
+
+  .click:focus, .click:active {
+    color: var(
+      --icon-active-color,
+      rgb(var(--global-color-primary-500))
+    );
+    outline: none;
+  }
 </style>

package/dist/components/simple/navigation/Chip.svelte

@@ -6,7 +6,15 @@ import { createEventDispatcher } from "svelte";
 export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null, truncateText = false;
 const dispatch = createEventDispatcher();
 function handleChipClick(e) {
-  dispatch("click", { native: e });
+  let native;
+  if (e instanceof KeyboardEvent) {
+    if (e.key !== "Enter" && e.key !== " ")
+      return;
+    native = new PointerEvent("click", { bubbles: true, cancelable: true });
+    e.currentTarget?.dispatchEvent(native);
+  } else {
+    dispatch("click", { native: e });
+  }
 }
 function handleCloseClick(e) {
   e.detail.nativeEvent.stopPropagation();
@@ -16,14 +24,15 @@ function handleCloseClick(e) {
 }
 </script>
 
-<button
+<div
   class="chip"
   class:label
   class:outlined
   class:disabled
-  disabled={disabled}
-  tabindex={buttonTabIndex}
+  role="button"
+  tabindex={disabled ? -1 : buttonTabIndex}
   on:click={handleChipClick}
+  on:keydown={handleChipClick}
 >
   {#if filter}
     <div class="icon-before">
@@ -52,7 +61,7 @@ function handleCloseClick(e) {
       />
     </div>
   {/if}
-</button>
+</div>
 
 <style>
   .chip {

package/dist/css/main.css

@@ -84,6 +84,18 @@
   --global-color-warning-800: var(--global-color-light-warning-800, 114, 75, 14);
   --global-color-warning-900: var(--global-color-light-warning-900, 55, 36, 7);
   --global-color-warning-950: var(--global-color-light-warning-950, 27, 18, 3);
+
+  --global-color-success-50: var(--global-color-light-success-50, 231, 253, 237);
+  --global-color-success-100: var(--global-color-light-success-100, 212, 252, 225);
+  --global-color-success-200: var(--global-color-light-success-200, 170, 249, 200);
+  --global-color-success-300: var(--global-color-light-success-300, 122, 245, 170);
+  --global-color-success-400: var(--global-color-light-success-400, 80, 242, 140);
+  --global-color-success-500: var(--global-color-light-success-500, 37, 238, 110);
+  --global-color-success-600: var(--global-color-light-success-600, 16, 211, 89);
+  --global-color-success-700: var(--global-color-light-success-700, 12, 156, 66);
+  --global-color-success-800: var(--global-color-light-success-800, 8, 104, 44);
+  --global-color-success-900: var(--global-color-light-success-900, 4, 52, 22);
+  --global-color-success-950: var(--global-color-light-success-950, 2, 28, 12);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -171,6 +183,18 @@
     --global-color-warning-800: var(--global-color-dark-warning-800, 114, 75, 14);
     --global-color-warning-900: var(--global-color-dark-warning-900, 55, 36, 7);
     --global-color-warning-950: var(--global-color-dark-warning-950, 27, 18, 3);
+
+    --global-color-success-50: var(--global-color-dark-success-50, 231, 253, 237);
+    --global-color-success-100: var(--global-color-dark-success-100, 212, 252, 225);
+    --global-color-success-200: var(--global-color-dark-success-200, 170, 249, 200);
+    --global-color-success-300: var(--global-color-dark-success-300, 122, 245, 170);
+    --global-color-success-400: var(--global-color-dark-success-400, 80, 242, 140);
+    --global-color-success-500: var(--global-color-dark-success-500, 37, 238, 110);
+    --global-color-success-600: var(--global-color-dark-success-600, 16, 211, 89);
+    --global-color-success-700: var(--global-color-dark-success-700, 12, 156, 66);
+    --global-color-success-800: var(--global-color-dark-success-800, 8, 104, 44);
+    --global-color-success-900: var(--global-color-dark-success-900, 4, 52, 22);
+    --global-color-success-950: var(--global-color-dark-success-950, 2, 28, 12);
   }
 }
 
@@ -258,4 +282,16 @@
   --global-color-warning-800: var(--global-color-dark-warning-800, 114, 75, 14);
   --global-color-warning-900: var(--global-color-dark-warning-900, 55, 36, 7);
   --global-color-warning-950: var(--global-color-dark-warning-950, 27, 18, 3);
+
+  --global-color-success-50: var(--global-color-dark-success-50, 231, 253, 237);
+  --global-color-success-100: var(--global-color-dark-success-100, 212, 252, 225);
+  --global-color-success-200: var(--global-color-dark-success-200, 170, 249, 200);
+  --global-color-success-300: var(--global-color-dark-success-300, 122, 245, 170);
+  --global-color-success-400: var(--global-color-dark-success-400, 80, 242, 140);
+  --global-color-success-500: var(--global-color-dark-success-500, 37, 238, 110);
+  --global-color-success-600: var(--global-color-dark-success-600, 16, 211, 89);
+  --global-color-success-700: var(--global-color-dark-success-700, 12, 156, 66);
+  --global-color-success-800: var(--global-color-dark-success-800, 8, 104, 44);
+  --global-color-success-900: var(--global-color-dark-success-900, 4, 52, 22);
+  --global-color-success-950: var(--global-color-dark-success-950, 2, 28, 12);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.13",
+  "version": "3.3.15",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",