@likable-hair/svelte 3.0.17 → 3.0.19

package/dist/components/composed/search/GlobalSearchTextField.css

@@ -1,7 +1,7 @@
 :root {
-  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-100)); /* rgba(24, 24, 27, .1) */
-  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300)); /* rgba(24, 24, 27, .2) */
-  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600)); /* rgb(113 113 122) */
+  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-200), .5); 
+  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300));
+  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600));
   --global-search-text-field-default-width: 100%;
   --global-search-text-field-default-max-width: 28rem;
   --global-search-text-field-default-height: 2rem;

package/dist/components/composed/search/GlobalSearchTextField.svelte

@@ -168,7 +168,7 @@ async function search() {
       --global-search-text-field-padding,
       var(--global-search-text-field-default-padding)
     );
-    border: 0 solid #e5e7eb;
+    border: 0 solid white;
     cursor: pointer;
     transition-property: box-shadow;
     transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

package/dist/components/layouts/StableDividedSideBarLayout.css

@@ -2,11 +2,11 @@
   --stable-divided-side-bar-layout-default-content-padding: 1rem 2rem 1rem 2rem;
   --stable-divided-side-bar-layout-default-side-bar-width: 18rem;
   --stable-divided-side-bar-layout-default-side-bar-border-color: 
-    rgb(var(--global-color-grey-500));
+    rgb(var(--global-color-grey-500), .3);
   --stable-divided-side-bar-layout-default-side-bar-padding: 1rem 1.5rem 2rem 1.5rem;
   --stable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
   --stable-divided-side-bar-layout-default-header-menu-border-color:
-    rgb(var(--global-color-grey-500));
+    rgb(var(--global-color-grey-500), .3);
   --stable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
   --stable-divided-side-bar-layout-default-inner-header-menu-background-color:
     rgb(var(--global-color-background-100), .5);

package/dist/components/layouts/UnstableDividedSideBarLayout.css

@@ -2,12 +2,12 @@
   --unstable-divided-side-bar-layout-default-content-padding: 1rem 2rem 1rem 2rem;
   --unstable-divided-side-bar-layout-default-side-bar-width: 4rem;
   --unstable-divided-side-bar-layout-default-side-bar-hover-width: 18rem;
-  --unstable-divided-side-bar-layout-default-side-bar-border-color: rgb(var(--global-color-grey-500));
+  --unstable-divided-side-bar-layout-default-side-bar-border: none;
   --unstable-divided-side-bar-layout-default-side-bar-padding: 0rem;
   --unstable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
-  --unstable-divided-side-bar-layout-default-header-menu-border-color: rgb(var(--global-color-grey-500));
+  --unstable-divided-side-bar-layout-default-header-menu-border: none;
   --unstable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
   --unstable-divided-side-bar-layout-default-inner-header-menu-background-color: rgb(var(--global-color-background-100), .5);
-  --unstable-divided-side-bar-layout-default-drawer-background-color: rgb(var(--global-color-background-50));
+  --unstable-divided-side-bar-layout-default-drawer-background-color: rgb(var(--global-color-background-100));
   --unstable-divided-side-bar-layout-default-drawer-width: 24rem;
 }

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -4,9 +4,10 @@ import MediaQuery from "../simple/common/MediaQuery.svelte";
 import Icon from "../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 import { clickOutside } from "../../utils/clickOutside";
+import ColorInvertedSelector, {} from "../simple/lists/ColorInvertedSelector.svelte";
 let clazz = {};
 export { clazz as class };
-export let drawerOpened = false, expandOn = "hover";
+export let drawerOpened = false, expandOn = "hover", options = [], selectedIndex = void 0;
 let dispatch = createEventDispatcher();
 function toggleMenu() {
   drawerOpened = !drawerOpened;
@@ -46,7 +47,7 @@ let sidebarExpanded = false;
       </slot>
     </nav>
     <header
-      class:opened={drawerOpened || sidebarExpanded}
+      class:opened={(mAndDown && drawerOpened) || sidebarExpanded}
       on:mouseleave={() => {if(expandOn == 'hover') sidebarExpanded = false}}
       on:mouseenter={() => {if(expandOn == 'hover') sidebarExpanded = true}}
       on:click={() => {if(expandOn == 'click') sidebarExpanded = true}}
@@ -56,8 +57,36 @@ let sidebarExpanded = false;
       class="side-bar {clazz.header}"
     >
       <div class="side-bar-content">
-        <slot name="sidebar" hamburgerVisible={mAndDown}>
-          Sidebar
+        <slot name="sidebar" hamburgerVisible={mAndDown} {sidebarExpanded}>
+          <div class="sidebar-container">
+            <div class="logo-and-menu">
+              <slot name="logo" hamburgerVisible={mAndDown} {sidebarExpanded}>
+                <div class="logo">logo</div>
+              </slot>
+              <slot name="menu" hamburgerVisible={mAndDown} {sidebarExpanded}>
+                <div 
+                  class="menu-container"
+                  class:expanded={sidebarExpanded}
+                >
+                  <ColorInvertedSelector
+                    options={options}
+                    selectedIndex={selectedIndex}
+                    --color-inverted-selector-default-background-color="transparent"
+                    --color-inverted-selector-default-font-size="1.2rem"
+                    --color-inverted-selector-default-icon-gap="1.2rem"
+                    --color-inverted-selector-default-element-height="3rem"
+                    --color-inverted-selector-default-element-padding="8px 8px 8px 11px"
+                    --color-inverted-selector-default-element-border-radius="16px"
+                    --color-inverted-selector-default-selected-font-weight="400"
+                    --icon-default-size="1.3rem"
+                    deletable={false}
+                  ></ColorInvertedSelector>
+                </div>
+              </slot>
+            </div>
+            <slot name="user" hamburgerVisible={mAndDown} {sidebarExpanded}>
+            </slot>
+          </div>
         </slot>
       </div>
     </header>
@@ -89,9 +118,9 @@ let sidebarExpanded = false;
       --unstable-divided-side-bar-layout-side-bar-width, 
       var(--unstable-divided-side-bar-layout-default-side-bar-width)
     );
-    border-right: 1px solid var(
-      --unstable-divided-side-bar-layout-side-bar-border-color,
-      var(--unstable-divided-side-bar-layout-default-side-bar-border-color)
+    border-right: var(
+      --unstable-divided-side-bar-layout-side-bar-border,
+      var(--unstable-divided-side-bar-layout-default-side-bar-border)
     );
     top: 0;
     bottom: 0;
@@ -167,14 +196,14 @@ let sidebarExpanded = false;
       bottom: 0;
       right: 0;
       z-index: -100;
-      transition-property: backdrop-filter;
+      transition-property: all;
       transition-timing-function: cubic-bezier(.4,0,.2,1);
       transition-duration: .15s;
       display: block;
     }
 
     .overlay.visible {
-      background-color: hsla(240,5%,65%,.2);
+      background-color: rgb(var(--global-color-grey-900), .5);
       backdrop-filter: blur(4px);
       z-index: 20;
     }
@@ -190,9 +219,9 @@ let sidebarExpanded = false;
       --unstable-divided-side-bar-layout-side-bar-width,
       var(--unstable-divided-side-bar-layout-default-side-bar-width)
     );
-    border-bottom: 1px solid var(
-      --unstable-divided-side-bar-layout-header-menu-border-color,
-      var(--unstable-divided-side-bar-layout-default-header-menu-border-color)
+    border-bottom: var(
+      --unstable-divided-side-bar-layout-header-menu-border,
+      var(--unstable-divided-side-bar-layout-default-header-menu-border)
     );
     backdrop-filter: blur(4px);
     background-color: var(
@@ -242,6 +271,10 @@ let sidebarExpanded = false;
     transition: all .2s cubic-bezier(.4,0,.2,1);
   }
 
+  .menu-container {
+    transition: padding .2s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+
   @media (max-width: 1024px) {
   	.main-section {
       padding-left: 0;
@@ -250,6 +283,14 @@ let sidebarExpanded = false;
     .blurred {
       backdrop-filter: blur(4px);
     }
+
+    .sidebar-container {
+      height: calc(100dvh - 3.5rem);
+    }
+
+    .logo {
+      display: none;
+    }
   }
 
   @media (min-width: 1024.1px) {
@@ -259,6 +300,14 @@ let sidebarExpanded = false;
         var(--unstable-divided-side-bar-layout-default-side-bar-hover-width)
       );
     }
+
+    .menu-container.expanded {
+      padding: 1rem;
+    }
+
+    .sidebar-container {
+      height: 100dvh;
+    }
   }
 
   .inner-menu {
@@ -281,4 +330,20 @@ let sidebarExpanded = false;
     border: 0 solid #e5e7eb;
   }
 
+  .sidebar-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    justify-content: space-between;
+  }
+
+  .logo-and-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .logo {
+    height: 3.5rem;
+  }
 </style>

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import '../../css/main.css';
 import './UnstableDividedSideBarLayout.css';
+import { type Option } from '../simple/lists/ColorInvertedSelector.svelte';
 declare const __propDef: {
     props: {
         class?: {
@@ -11,6 +12,8 @@ declare const __propDef: {
         } | undefined;
         drawerOpened?: boolean | undefined;
         expandOn?: "click" | "none" | "hover" | undefined;
+        options?: Option[] | undefined;
+        selectedIndex?: number | undefined;
     };
     events: {
         'drawer-change': CustomEvent<{
@@ -20,12 +23,24 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        menu: {};
+        menu: {
+            hamburgerVisible: boolean;
+            sidebarExpanded: boolean;
+        };
         'inner-menu': {
             hamburgerVisible: boolean;
         };
         sidebar: {
             hamburgerVisible: boolean;
+            sidebarExpanded: boolean;
+        };
+        logo: {
+            hamburgerVisible: boolean;
+            sidebarExpanded: boolean;
+        };
+        user: {
+            hamburgerVisible: boolean;
+            sidebarExpanded: boolean;
         };
         default: {};
     };

package/dist/components/simple/buttons/Button.css

@@ -14,6 +14,8 @@
   --button-default-text-hover-background-color: rgb(var(--global-color-primary-500), 0.2);
   --button-default-active-background-color: rgb(var(--global-color-primary-500));
   --button-default-focus-background-color: rgb(var(--global-color-primary-500));
+  --button-default-disabled-background-color: rgb(var(--global-color-primary-500), .6);
+  --button-default-disabled-color: rgb(var(--global-color-grey-50), .6);
   --button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);
   --button-default-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
   --button-default-text-font-weight: 600;

package/dist/components/simple/buttons/Button.svelte

@@ -38,6 +38,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
   class:button-default={buttonType === "default"}
   class:button-text={buttonType === "text"}
   class:button-icon={buttonType === "icon"}
+  class:disabled={disabled}
   on:click={handleClick}
   on:keypress={handleKeyPress}
   on:keydown={handleKeyDown}
@@ -163,7 +164,19 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
     );
   }
 
-  .button-default:hover {
+  .button-default.disabled {
+    cursor: not-allowed;
+    background-color: var(
+      --button-disabled-background-color,
+      var(--button-default-disabled-background-color)
+    );
+    color: var(
+      --button-disabled-color,
+      var(--button-default-disabled-color)
+    );
+  }
+
+  .button-default:hover:not(.disabled) {
     background-color: var(
       --button-hover-background-color,
       var(--button-default-hover-background-color)
@@ -174,14 +187,14 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
     );
   }
 
-  .button-default:active {
+  .button-default:active:not(.disabled) {
     background-color: var(
       --button-active-background-color,
       var(--button-default-active-background-color)
     );
   }
 
-  .button-default:focus {
+  .button-default:focus:not(.disabled) {
     background-color: var(
       --button-focus-background-color,
       var(--button-default-focus-background-color)

package/dist/components/simple/charts/GanymedeLineChart.svelte

@@ -0,0 +1,85 @@
+<script>import { Line } from "svelte-chartjs";
+let background = void 0;
+onMount(() => {
+  let style = getComputedStyle(document.body);
+  background = style.getPropertyValue("--global-color-background-200");
+});
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale
+} from "chart.js";
+import { onMount } from "svelte";
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale
+);
+export let data = {
+  labels: [],
+  datasets: []
+}, horizontal = false, responsive = true, maintainAspectRatio = true, showLegend = true, showYTicks = false, showXTicks = false;
+$:
+  gridColor = "rgb(" + (background || "200, 200, 200") + ", .3)";
+$:
+  console.log(gridColor);
+</script>
+
+<Line
+  bind:data={data}
+  options={{
+    indexAxis: horizontal ? 'y' : 'x',
+    responsive: responsive,
+    maintainAspectRatio: maintainAspectRatio,
+    plugins: {
+      legend: {
+        display: showLegend
+      }
+    },
+    interaction: {
+      intersect: false,
+    },
+    scales: {
+      x: {
+        display: true,
+        title: {
+          display: true
+        },
+        grid: {
+          display: false
+        },
+        border: {
+          display: false
+        },
+        ticks: {
+          display: showYTicks
+        }
+      },
+      y: {
+        display: true,
+        title: {
+        },
+        grid: {
+          lineWidth: 1,
+          color: gridColor
+        },
+        border: {
+          dash: [10,10],
+          display: false
+        },
+        ticks: {
+          display: showXTicks
+        }
+      }
+    }
+  }}
+></Line>

package/dist/components/simple/charts/GanymedeLineChart.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {
+            labels: string[];
+            datasets: {
+                label: string;
+                data: number[];
+                backgroundColor?: string | undefined;
+                borderColor?: string | undefined;
+                hoverBackgroundColor?: string[] | undefined;
+                tension?: number | undefined;
+            }[];
+        } | undefined;
+        horizontal?: boolean | undefined;
+        responsive?: boolean | undefined;
+        maintainAspectRatio?: boolean | undefined;
+        showLegend?: boolean | undefined;
+        showYTicks?: boolean | undefined;
+        showXTicks?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GanymedeLineChartProps = typeof __propDef.props;
+export type GanymedeLineChartEvents = typeof __propDef.events;
+export type GanymedeLineChartSlots = typeof __propDef.slots;
+export default class GanymedeLineChart extends SvelteComponentTyped<GanymedeLineChartProps, GanymedeLineChartEvents, GanymedeLineChartSlots> {
+}
+export {};

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

@@ -9,7 +9,7 @@ export let value = void 0, type = "text", placeholder = void 0, disabled = false
 <div
   class="textfield-container {clazz.container || ''}"
 >
-  <div class="row {clazz.row}">
+  <div class="row {clazz.row || ''}">
     <slot name="prepend" {prependIcon} {iconSize}>
       {#if !!prependIcon}
         <Icon name={prependIcon} --icon-size={iconSize}></Icon>

package/dist/components/simple/lists/ColorInvertedSelector.css

@@ -2,5 +2,10 @@
   --color-inverted-selector-default-background-color: rgb(var(--global-color-background-200));
   --color-inverted-selector-default-selected-background-color: rgb(var(--global-color-primary-400));
   --color-inverted-selector-default-selected-color: rgb(var(--global-color-grey-50));
-  --color-inverted-selector-default-vertical-gap: 10px;
+  --color-inverted-selector-default-vertical-gap: 8px;
+  --color-inverted-selector-default-icon-gap: 8px;
+  --color-inverted-selector-default-selected-font-weight: 700;
+  --color-inverted-selector-default-element-padding: 8px 8px 8px 16px;
+  --color-inverted-selector-default-element-border-radius: 5px;
+  --color-inverted-selector-default-hover-background-color: rgb(var(--global-color-primary-500), .3)
 }

package/dist/components/simple/lists/ColorInvertedSelector.svelte

@@ -7,7 +7,7 @@ import { createEventDispatcher } from "svelte";
 let clazz = {};
 export { clazz as class };
 let dispatch = createEventDispatcher();
-export let options, selectedIndex;
+export let options, selectedIndex, deletable = true;
 function handleOptionClick(option, index) {
   dispatch("select", {
     option,
@@ -23,33 +23,57 @@ function handleClickClose(option, index) {
 }
 </script>
 
-<div class="selector-container {clazz?.container || ''}">
+<ul 
+  class="selector-container {clazz?.container || ''}" 
+  role="listbox"
+>
   {#each options as option, index}
-    <div
-      class:selected={selectedIndex == index}
-      class="element {clazz?.element || ''} {selectedIndex == index ? clazz.selected : ''}"
-      on:click={() => handleOptionClick(option, index)}
-      on:keydown={() => { }}
-    >
-      <div>
-        <slot name="option" {option}>{option.name}</slot>
-      </div>
-      <div
-        on:click|stopPropagation={() => { }}
+    <li>
+      <button
+        class:selected={selectedIndex == index}
+        class="element {clazz?.element || ''} {selectedIndex == index ? clazz.selected : ''}"
+        on:click={() => handleOptionClick(option, index)}
         on:keydown={() => { }}
       >
-        <slot name="append" {option} {handleClickClose}>
-          <Icon
-            name="mdi-close"
-            click
-            on:click={() => handleClickClose(option, index)}
+        <div class="icon-and-title">
+          {#if !!$$slots.prepend || !!option.icon}
+            <div>
+              <slot name="prepend" {option} {handleClickClose}>
+                {#if !!option.icon}
+                  <Icon
+                    name={option.icon}
+                  ></Icon>
+                {/if}
+              </slot>
+            </div>
+          {/if}
+          <slot name="option" {option}>
+            <div class="label">
+              {option.label}
+            </div>
+          </slot>
+        </div>
+        {#if !!$$slots.append || deletable}
+          <div
+            on:click|stopPropagation={() => { }}
             on:keydown={() => { }}
-          ></Icon>
-        </slot>
-      </div>
-    </div>
+          >
+            <slot name="append" {option} {handleClickClose}>
+              {#if deletable}
+                <Icon
+                  name="mdi-close"
+                  click
+                  on:click={() => handleClickClose(option, index)}
+                  on:keydown={() => { }}
+                ></Icon>
+              {/if}
+            </slot>
+          </div>
+        {/if}
+      </button>
+    </li>
   {/each}
-</div>
+</ul>
 
 <style>
   .selector-container {
@@ -73,16 +97,68 @@ function handleClickClose(option, index) {
       --color-inverted-selector-vertical-gap, 
       var(--color-inverted-selector-default-vertical-gap)
     );
+    list-style: none;
+  }
+
+  .icon-and-title {
+    display: flex;
+    gap: var(
+      --color-inverted-selector-icon-gap, 
+      var(--color-inverted-selector-default-icon-gap)
+    );
+    align-items: center;
+    font-size: var(
+      --color-inverted-selector-font-size, 
+      var(--color-inverted-selector-default-font-size)
+    );
+    max-width: 100%;
   }
 
   .element {
-    padding: 5px 5px 5px 10px;
+    padding: var(
+      --color-inverted-selector-element-padding, 
+      var(--color-inverted-selector-default-element-padding)
+    );
+    height: var(
+      --color-inverted-selector-element-height, 
+      var(--color-inverted-selector-default-element-height)
+    );
     cursor: pointer;
     transition: all .1s ease-in;
-    border-radius: 5px;
+    border-radius: var(
+      --color-inverted-selector-element-border-radius, 
+      var(--color-inverted-selector-default-element-border-radius)
+    );
     display: flex;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  .label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+  .element:not(.selected):hover {
+    color: var(
+      --color-inverted-selector-hover-color,
+      var(--color-inverted-selector-default-hover-color)
+    );
+    background-color: var(
+      --color-inverted-selector-hover-background-color,
+      var(--color-inverted-selector-default-hover-background-color)
+    );
+    font-weight: var(
+      --color-inverted-selector-hover-font-weight,
+      var(--color-inverted-selector-default-hover-font-weight)
+    );
   }
 
   .selected {
@@ -94,6 +170,9 @@ function handleClickClose(option, index) {
       --color-inverted-selector-selected-background-color,
       var(--color-inverted-selector-default-selected-background-color)
     );
-    font-weight: 700;
+    font-weight: var(
+      --color-inverted-selector-selected-font-weight,
+      var(--color-inverted-selector-default-selected-font-weight)
+    );
   }
 </style>

package/dist/components/simple/lists/ColorInvertedSelector.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 export type Option = {
     label: string;
     name: string;
+    icon?: string;
 };
 import '../../../css/main.css';
 import './ColorInvertedSelector.css';
@@ -13,12 +14,13 @@ declare const __propDef: {
             selected?: string | undefined;
         } | undefined;
         options: Option[];
-        selectedIndex: number;
+        selectedIndex: number | undefined;
+        deletable?: boolean | undefined;
     };
     events: {
         select: CustomEvent<{
             option: Option;
-            selectedIndex: number;
+            selectedIndex: number | undefined;
         }>;
         delete: CustomEvent<{
             option: Option;
@@ -28,6 +30,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        prepend: {
+            option: Option;
+            handleClickClose: (option: Option, index: number) => void;
+        };
         option: {
             option: Option;
         };

package/dist/components/simple/lists/SimpleTable.svelte

@@ -5,6 +5,8 @@ import "./SimpleTable.css";
 import { dateToString } from "../dates/utils";
 import Icon from "../media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
+let clazz = {};
+export { clazz as class };
 const dispatch = createEventDispatcher();
 export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc";
 function handleHeaderClick(header) {
@@ -26,9 +28,9 @@ function handleHeaderClick(header) {
 </script>
 
 {#if !!items && Array.isArray(items)}
-  <div class="simple-table-container" >
+  <div class="simple-table-container {clazz.container || ''}" >
     <table class="table">
-      <thead class="thead">
+      <thead class="thead {clazz.header || ''}">
         <tr>
           {#each headers as head}
             <th 
@@ -69,9 +71,9 @@ function handleHeaderClick(header) {
       </thead>
       <tbody>
         {#each items as item, i}
-          <tr class="item-tr">
+          <tr class="item-tr {clazz.row || ''}">
             {#each headers as header, j}
-              <td>
+              <td class="{clazz.cell || ''}">
                 {#if header.type == "custom"}
                   <slot
                     name="custom"
@@ -88,7 +90,7 @@ function handleHeaderClick(header) {
               </td>
             {/each}
             {#if $$slots.rowActions || $$slots.append}
-              <td>
+              <td class="{clazz.cell || ''}">
                 <slot name="rowActions" index={i} {item} />
                 <slot name="append" index={i} {item} />
               </td>

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -14,6 +14,12 @@ import '../../../css/main.css';
 import './SimpleTable.css';
 declare const __propDef: {
     props: {
+        class?: {
+            container?: string | undefined;
+            header?: string | undefined;
+            row?: string | undefined;
+            cell?: string | undefined;
+        } | undefined;
         headers?: Header[] | undefined;
         items?: {
             [key: string]: any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -62,6 +62,7 @@
     "highlightjs-svelte": "^1.0.6",
     "imask": "^7.1.0-alpha.0",
     "lodash": "^4.17.21",
-    "luxon": "^3.3.0"
+    "luxon": "^3.3.0",
+    "svelte-chartjs": "^3.1.2"
   }
 }