@likable-hair/svelte 3.0.56 → 3.0.58

package/dist/components/composed/common/ToolTip.svelte

@@ -0,0 +1,42 @@
+<script>import "../../../css/main.css";
+import Menu from "../../simple/common/Menu.svelte";
+export let activator, menuOpen = false, menuProps = {}, appearTimeout = void 0;
+let mouseEnterHandler = void 0, mouseLeaveHandler = void 0, appearTimeoutId = void 0;
+$:
+  if (!!activator) {
+    if (!!mouseEnterHandler)
+      activator.removeEventListener("mouseenter", mouseEnterHandler);
+    if (!!mouseLeaveHandler)
+      activator.removeEventListener("mouseleave", mouseLeaveHandler);
+    mouseEnterHandler = () => {
+      if (appearTimeout !== void 0) {
+        if (appearTimeoutId !== void 0)
+          clearTimeout(appearTimeoutId);
+        appearTimeoutId = setTimeout(() => {
+          menuOpen = true;
+        }, appearTimeout);
+      } else {
+        menuOpen = true;
+      }
+    };
+    activator.addEventListener("mouseenter", mouseEnterHandler);
+    mouseLeaveHandler = () => {
+      if (appearTimeoutId !== void 0)
+        clearTimeout(appearTimeoutId);
+      menuOpen = false;
+    };
+    activator.addEventListener("mouseleave", mouseLeaveHandler);
+  }
+</script>
+
+<Menu
+  bind:open={menuOpen}
+  bind:activator
+  anchor="bottom-center"
+  stayInViewport={true}
+  flipOnOverflow={true}
+  {...menuProps}
+>
+  <slot></slot>
+</Menu>
+

package/dist/components/composed/common/ToolTip.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+declare const __propDef: {
+    props: {
+        activator: HTMLElement;
+        menuOpen?: boolean | undefined;
+        menuProps?: {
+            _top?: number | undefined;
+            _left?: number | undefined;
+            _width?: string | undefined;
+            _height?: string | undefined;
+            _maxHeight?: string | undefined;
+            _minWidth?: string | undefined;
+            _overflow?: string | undefined;
+            _boxShadow?: string | undefined;
+            _borderRadius?: string | undefined;
+            _activatorGap?: number | undefined;
+            open?: boolean | undefined;
+            refreshPosition?: boolean | undefined;
+            activator?: HTMLElement | undefined;
+            anchor?: "bottom" | "bottom-center" | "right-center" | undefined;
+            closeOnClickOutside?: boolean | undefined;
+            inAnimation?: ((node: Element, params?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined) => import("svelte/transition").TransitionConfig) | undefined;
+            inAnimationConfig?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined;
+            outAnimation?: ((node: Element, params?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined) => import("svelte/transition").TransitionConfig) | undefined;
+            outAnimationConfig?: import("svelte/transition").SlideParams | import("svelte/transition").FlyParams | import("svelte/transition").FadeParams | undefined;
+            menuElement?: HTMLElement | undefined;
+            flipOnOverflow?: boolean | undefined;
+            stayInViewport?: boolean | undefined;
+            openingId?: string | undefined;
+        } | undefined;
+        appearTimeout?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToolTipProps = typeof __propDef.props;
+export type ToolTipEvents = typeof __propDef.events;
+export type ToolTipSlots = typeof __propDef.slots;
+export default class ToolTip extends SvelteComponentTyped<ToolTipProps, ToolTipEvents, ToolTipSlots> {
+}
+export {};

package/dist/components/composed/forms/CountriesAutocomplete.svelte.d.ts

@@ -31,6 +31,7 @@ declare const __propDef: {
             searchText?: string | undefined;
             maxVisibleChips?: number | undefined;
             menuOpened?: boolean | undefined;
+            closeOnSelect?: boolean | undefined;
             menuBoxShadow?: string | undefined;
             menuBorderRadius?: string | undefined;
             mobileDrawer?: boolean | undefined;

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

@@ -11,7 +11,7 @@ import Dialog from "../../simple/dialogs/Dialog.svelte";
 let clazz = {};
 export { clazz as class };
 let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true;
+export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
   value: void 0
 }, maskFactoryArgs = {
@@ -26,8 +26,8 @@ let activator, refreshPosition = false, menuElement, inputElement, mask = {
   blocks: {
     yyyy: {
       mask: IMask.MaskedRange,
-      from: 1970,
-      to: 2030
+      from: minYearInRange,
+      to: maxYearInRange
     },
     MM: {
       mask: IMask.MaskedRange,

package/dist/components/composed/forms/DatePickerTextField.svelte.d.ts

@@ -18,6 +18,8 @@ declare const __propDef: {
         selectedDate?: Date | undefined;
         placeholder?: string | undefined;
         mobileDialog?: boolean | undefined;
+        maxYearInRange?: number | undefined;
+        minYearInRange?: number | undefined;
     };
     events: {
         'day-click': CustomEvent<{

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

@@ -2,6 +2,8 @@
 
 <script>import Dropdown, {} from "./Dropdown.svelte";
 import Icon from "../../simple/media/Icon.svelte";
+import { createEventDispatcher } from "svelte";
+let dispatch = createEventDispatcher();
 export let items = [], values = [], clearable = false;
 let dropdownValues = [];
 $:
@@ -26,6 +28,19 @@ function handleChange(event) {
     icon: e.data.icon,
     data: e.data
   }));
+  dispatch("change", {
+    unselect: !!event.detail.unselect ? {
+      value: event.detail.unselect.value,
+      icon: event.detail.unselect.data.icon,
+      data: event.detail.unselect.data
+    } : void 0,
+    select: !!event.detail.select ? {
+      value: event.detail.select.value,
+      icon: event.detail.select.data.icon,
+      data: event.detail.select.data
+    } : void 0,
+    selection: values
+  });
 }
 </script>
 

package/dist/components/composed/forms/IconsDropdown.svelte.d.ts

@@ -11,6 +11,12 @@ declare const __propDef: {
         clearable?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<{
+            unselect: IconItem | undefined;
+            select: IconItem | undefined;
+            selection: IconItem[];
+        }>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/composed/progress/HorizontalStackedProgress.css

@@ -0,0 +1,3 @@
+:root {
+  --horizontal-stacked-progress-default-gap: 4px
+}

package/dist/components/composed/progress/HorizontalStackedProgress.svelte

@@ -0,0 +1,117 @@
+<script context="module">export function isProgressItem(obj) {
+  return (obj.label === void 0 || typeof obj.label === "string") && (obj.color === void 0 || typeof obj.color === "string") && typeof obj.value === "number";
+}
+</script>
+
+<script>import "./HorizontalStackedProgress.css";
+import ProgressBar from "../../simple/progress/ProgressBar.svelte";
+export let progresses = [], labelVisible = true;
+let colors = [
+  "rgb(var(--global-color-primary-500))",
+  "rgb(var(--global-color-primary-300))",
+  "rgb(var(--global-color-primary-700))",
+  "rgb(var(--global-color-primary-500), .5)",
+  "rgb(var(--global-color-primary-600), .5)",
+  "rgb(var(--global-color-primary-700), .5)"
+];
+$:
+  total = progresses.reduce((p, c, i, a) => {
+    if (isProgressItem(c)) {
+      return p + c.value;
+    } else {
+      return p + c;
+    }
+  }, 0);
+$:
+  progressesItems = progresses.map((p, i) => {
+    let item;
+    let value = isProgressItem(p) ? p.value : p;
+    let percentage = Number((100 * value / total).toFixed(2));
+    let color = isProgressItem(p) ? p.color : colors[i % colors.length];
+    item = {
+      ...isProgressItem(p) ? p : {},
+      color,
+      value,
+      percentage
+    };
+    return item;
+  }).filter((p) => p.value !== 0);
+</script>
+
+<div
+  class="stacked-container"
+>
+  {#each progressesItems as progress}
+    <div
+      style:width={progress.percentage + '%'}
+      class="single-progress-container"
+    >
+      <ProgressBar
+        total={progress.value}
+        value={progress.value}
+        --progress-bar-highlight-color={progress.color}
+      ></ProgressBar>
+      {#if progress.label && labelVisible}
+        <div class="label">
+          <div class="label-text">{progress.label}</div>
+          <div class="label-value">
+            <div 
+              class="dot" 
+              style:background-color={progress.color || 'rgb(var(--global-color-background-300))'}
+            ></div>
+            <div class="value-text">
+              {progress.value}
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .stacked-container {
+    overflow: hidden;
+    display: flex;
+    gap: var(
+      --horizontal-stacked-progress-gap,
+      var(--horizontal-stacked-progress-default-gap)
+    );
+    width: var(
+      --horizontal-stacked-progress-width,
+      var(--horizontal-stacked-progress-default-width)
+    );
+  }
+
+  .single-progress-container {
+    transition: width 300ms cubic-bezier(0.215, 0.610, 0.355, 1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .label-text {
+    font-size: .8rem;
+    font-weight: 300;
+  }
+
+  .label {
+    margin-top: 12px;
+  }
+
+  .label-value {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .value-text {
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+
+  .dot {
+    height: 10px;
+    width: 10px;
+    border-radius: 9999px;
+  }
+</style>

package/dist/components/composed/progress/HorizontalStackedProgress.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+export type ProgressItem = {
+    label?: string;
+    color?: string;
+    value: number;
+};
+export declare function isProgressItem(obj: any): obj is ProgressItem;
+import './HorizontalStackedProgress.css';
+declare const __propDef: {
+    props: {
+        progresses?: (number | ProgressItem)[] | undefined;
+        labelVisible?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HorizontalStackedProgressProps = typeof __propDef.props;
+export type HorizontalStackedProgressEvents = typeof __propDef.events;
+export type HorizontalStackedProgressSlots = typeof __propDef.slots;
+export default class HorizontalStackedProgress extends SvelteComponentTyped<HorizontalStackedProgressProps, HorizontalStackedProgressEvents, HorizontalStackedProgressSlots> {
+}
+export {};

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

@@ -5,7 +5,7 @@ import "./Autocomplete.css";
 import { scrollInMenu } from "../common/scroller";
 let clazz = {};
 export { clazz as class };
-export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
+export let values = [], items, searchFunction = void 0, multiple = false, disabled = false, mandatory = false, placeholder = "", width = "auto", height = "auto", maxWidth = void 0, openingId = "autocomplete-menu", searchText = void 0, maxVisibleChips = void 0, menuOpened = false, closeOnSelect = false, menuBoxShadow = "rgb(var(--global-color-background-300), .5) 0px 2px 4px", menuBorderRadius = "5px", mobileDrawer = false;
 let dispatch = createEventDispatcher();
 function select(item) {
   const alreadyPresent = values.findIndex((i) => i.value === item.value) != -1;
@@ -21,6 +21,8 @@ function select(item) {
       selection: values
     });
   }
+  if (!multiple && closeOnSelect)
+    menuOpened = false;
 }
 function unselect(item) {
   if (values.length == 1 && mandatory)

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

@@ -29,6 +29,7 @@ declare const __propDef: {
         searchText?: string | undefined;
         maxVisibleChips?: number | undefined;
         menuOpened?: boolean | undefined;
+        closeOnSelect?: boolean | undefined;
         menuBoxShadow?: string | undefined;
         menuBorderRadius?: string | undefined;
         mobileDrawer?: boolean | undefined;

package/dist/components/simple/forms/FileInput.css

@@ -0,0 +1,7 @@
+:root {
+  --file-input-default-height: 64px;
+  --file-input-default-background-color: rgb(var(--global-color-background-300));
+  --file-input-default-color: rgb(var(--global-color-contrast-900));
+  --file-input-default-focus-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --file-input-default-border-radius: 5px;
+}

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

@@ -1,5 +1,9 @@
-<script>import { createEventDispatcher } from "svelte";
-export let files = void 0, persistOverUpload = true, height = "100%", width = "100%", backgroundColor = "rgba(255,255,255,0)", textColor = "black", rounded = true, disabled = false, focusShadow = "inset 0 0 0 1px rgb(255 255 255/0.1), 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+<script>import "../../../css/main.css";
+import "./FileInput.css";
+import { createEventDispatcher } from "svelte";
+let clazz = "";
+export { clazz as class };
+export let files = void 0, placeholder = void 0, persistOverUpload = true, disabled = false;
 let inputElement = void 0;
 let dropAreaActive = false;
 const highlight = (highlighted) => {
@@ -35,7 +39,6 @@ function handleFileFromInput(event) {
 </script>
 
 <div
-  class="drop-area"
   on:click={() => inputElement?.click()}
   on:keypress={() => inputElement?.click()}
   on:dragover|preventDefault={() => highlight(true)}
@@ -44,18 +47,11 @@ function handleFileFromInput(event) {
   on:drop|preventDefault={(e) => {
     if (!disabled) handleFileDrop(e);
   }}
-  on:mouseenter={() => highlight(true)}
-  on:mouseleave={() => highlight(false)}
-  style:height
-  style:width
-  style:background-color={backgroundColor}
-  style:color={textColor}
-  class:rounded
   class:disabled
-  style:--file-input-focus-shadow={focusShadow}
+  class="drop-area {clazz}"
 >
   <slot name="body" active={dropAreaActive}>
-    <span> Drop file here or click to upload </span>
+    <span> { placeholder || 'Drop file here or click to upload'} </span>
   </slot>
 
   <input
@@ -69,6 +65,26 @@ function handleFileFromInput(event) {
 
 <style>
   .drop-area {
+    border-radius: var(
+      --file-input-border-radius,
+      var(--file-input-default-border-radius)
+    );
+    height: var(
+      --file-input-height,
+      var(--file-input-default-height)
+    );
+    width: var(
+      --file-input-width,
+      var(--file-input-default-width)
+    );
+    color: var(
+      --file-input-color,
+      var(--file-input-default-color)
+    );
+    background-color: var(
+      --file-input-background-color,
+      var(--file-input-default-background-color)
+    );
     display: flex;
     align-items: center;
     justify-content: center;
@@ -76,6 +92,7 @@ function handleFileFromInput(event) {
     cursor: pointer;
     transition: 0.2s;
   }
+
   .disabled {
     opacity: 0.5;
     cursor: default;
@@ -83,10 +100,10 @@ function handleFileFromInput(event) {
   .drop-area > input {
     display: none;
   }
-  .drop-area:hover:not(.disabled) {
-    box-shadow: var(--file-input-focus-shadow);
-  }
-  .rounded {
-    border-radius: 5px;
+  .drop-area:hover:not(.disabled) {    
+    box-shadow: var(
+    --file-input-focus-shadow,
+    var(--file-input-default-focus-shadow)
+    );
   }
 </style>

package/dist/components/simple/forms/FileInput.svelte.d.ts

@@ -1,15 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+import './FileInput.css';
 declare const __propDef: {
     props: {
+        class?: string | undefined;
         files?: File[] | undefined;
+        placeholder?: string | undefined;
         persistOverUpload?: boolean | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        backgroundColor?: string | undefined;
-        textColor?: string | undefined;
-        rounded?: boolean | undefined;
         disabled?: boolean | undefined;
-        focusShadow?: string | undefined;
     };
     events: {
         fileDrop: CustomEvent<{

package/dist/components/simple/forms/FileInputList.css

@@ -0,0 +1,11 @@
+:root {
+    --file-input-list-default-height : 64px;
+    --file-input-list-default-background-color : rgb(var(--global-color-background-300));
+    --file-input-list-default-color : rgb(var(--global-color-contrast-900));
+    --file-input-list-default-selected-row-color : rgb(var(--global-color-contrast-1000));
+    --file-input-list-default-selected-row-background : rgb(var(--global-color-background-500));
+    --file-input-list-default-hover-color : rgb(var(--global-color-contrast-900));
+    --file-input-list-default-border-color : rgb(var(--global-color-primary-100));
+    --file-input-list-default-border-radius : 5px
+}
+

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

@@ -1,7 +1,11 @@
-<script>import Button from "../buttons/Button.svelte";
+<script>import "../../../css/main.css";
+import "./FileInputList.css";
+import Button from "../buttons/Button.svelte";
 import FileInput from "./FileInput.svelte";
 import Icon from "../media/Icon.svelte";
-export let files = [], persistOverUpload = true, height = "100%", width = "100%", backgroundColor = "rgba(255,255,255,0)", textColor = "rgba(0,0,0,0.7)", rounded = true, focusShadow = void 0, dropAreaActive = true, icon = "mdi-folder", iconSize = 30, selectedRowColor = "red", selectedRowBackground = "rgba(0,0,0,0.1)", hoverColor = "rgba(255,0,0,0.5)", borderColor = "rgba(0, 0, 0, 0.2)";
+let clazz = "";
+export { clazz as class };
+export let files = [], persistOverUpload = true, dropAreaActive = true, icon = "mdi-folder";
 let fileActive = null;
 function handleFileMouseEnter(file) {
   dropAreaActive = false;
@@ -21,20 +25,15 @@ function handleRemove(file) {
 }
 </script>
 
-<div
-  class="card-container"
-  style:--file-input-list-hover-color={hoverColor}
-  style:--file-input-list-border-color={borderColor}
->
+<div class="card-container {clazz}">
   <FileInput
-    {persistOverUpload}
-    {height}
-    {width}
-    {backgroundColor}
-    {rounded}
     bind:files
-    {focusShadow}
-    {textColor}
+    {persistOverUpload}
+    --file-input-border-radius="var(--file-input-list-border-radius,var(--file-input-list-default-border-radius))"
+    --file-input-background-color="var(--file-input-list-background-color,var(--file-input-list-default-background-color))"
+    --file-input-color="var(--file-input-list-color,var(--file-input-list-default-color))"
+    --file-input-height="var(--file-input-list-height,var(--file-input-list-default-height))"
+    --file-input-width="var(--file-input-list-width,var(--file-input-list-default-width))"
   >
     <span
       slot="body"
@@ -60,11 +59,9 @@ function handleRemove(file) {
                   handleFileMouseLeave();
                 }}
                 class:file-active={fileActive == file}
-                style:--selected-color={selectedRowColor}
-                style:--selected-background={selectedRowBackground}
               >
                 <td>
-                  <Icon name={icon} size={iconSize} />
+                  <Icon name={icon} />
                 </td>
                 <td class="file-name">
                   {file.name}
@@ -91,6 +88,11 @@ function handleRemove(file) {
 </div>
 
 <style>
+  .body-span {
+    height: 100px;
+    width: 100%;
+    display: flex;
+  }
   .card-container {
     display: flex;
     justify-content: center;
@@ -98,13 +100,34 @@ function handleRemove(file) {
     flex-direction: column;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
       Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    border-color: var(
+      --file-input-list-border-color,
+      var(--file-input-list-default-border-color)
+    );
+    height: var(--file-input-list-height,var(--file-input-list-default-height));
+    width: var(--file-input-list-background-width,var(--file-input-list-default-width));
+  }
+
+  .card-container:hover {
+    color: var(
+      --file-input-list-hover-color,
+      var(--file-input-list-default-hover-color)
+    );
   }
+  
   .body-container {
-    border: dotted var(--file-input-list-border-color);
-    border-radius: 5px;
-    box-sizing: border-box;
+    border: dotted;
+    border-color: var(
+      --file-input-list-border-color,
+      var(--file-input-list-default-border-color)
+    );
+    border-radius: var(
+      --file-input-list-border-radius,
+      var(--file-input-list-default-border-radius)
+    );
     width: calc(100% - 20px);
     height: calc(100% - 20px);
+    box-sizing: border-box;    
     margin: auto;
     position: relative;
     display: flex;
@@ -113,12 +136,26 @@ function handleRemove(file) {
     transition: 0.2s;
     overflow-y: auto;
   }
+
   .active {
-    border-color: var(--file-input-list-hover-color);
+    border-color: var(
+      --file-input-list-selected-row-background,
+      var(--file-input-list-default-selected-row-background)
+    );
+    color: var(
+      --file-input-list-selected-row-color,
+      var(--file-input-list-default-selected-row-color)
+    );
   }
   .file-active {
-    color: var(--selected-color);
-    background-color: var(--selected-background);
+    color: var(
+      --file-input-list-selected-row-color,
+      var(--file-input-list-default-selected-row-color)
+    );
+    background-color: var(
+      --file-input-list-selected-row-background,
+      var(--file-input-list-default-selected-row-background)
+    );
   }
   .file-list {
     width: 100%;

package/dist/components/simple/forms/FileInputList.svelte.d.ts

@@ -1,21 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import "../../../css/main.css";
+import "./FileInputList.css";
 declare const __propDef: {
     props: {
+        class?: string | undefined;
         files?: File[] | undefined;
         persistOverUpload?: boolean | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        backgroundColor?: string | undefined;
-        textColor?: string | undefined;
-        rounded?: boolean | undefined;
-        focusShadow?: string | undefined;
         dropAreaActive?: boolean | undefined;
         icon?: string | undefined;
-        iconSize?: number | undefined;
-        selectedRowColor?: string | undefined;
-        selectedRowBackground?: string | undefined;
-        hoverColor?: string | undefined;
-        borderColor?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/simple/progress/ProgressBar.css

@@ -0,0 +1,7 @@
+:root {
+  --progress-bar-default-background-color: rgb(var(--global-color-background-300), .3);
+  --progress-bar-default-highlight-color: rgb(var(--global-color-primary-500));
+  --progress-bar-default-height: 5px;
+  --progress-bar-default-width: 100%;
+  --progress-bar-default-border-radius: 2px;
+}

package/dist/components/simple/progress/ProgressBar.svelte

@@ -1,4 +1,6 @@
-<script>export let value = 0, total = 100, height = "5px", width = "100%", radius = "2px", backgroundColor = void 0, color = void 0;
+<script>import "../../../css/main.css";
+import "./ProgressBar.css";
+export let value = 0, total = 100;
 $:
   hundredBasedProgress = total === 0 ? 100 : value * 100 / total;
 $:
@@ -11,16 +13,10 @@ $:
 
 <div
   style={cssVariables}
-  style:height
-  style:width
-  style:border-radius={radius}
-  style:background-color={backgroundColor}
   class="progress-bar-container"
 >
   <div
-    style:height
     style:width={hundredBasedProgress + "%"}
-    style:background-color={color}
     class="progress"
   />
 </div>
@@ -28,10 +24,34 @@ $:
 <style>
   .progress-bar-container {
     overflow: hidden;
+    background-color: var(
+      --progress-bar-background-color,
+      var(--progress-bar-default-background-color)
+    );
+    height: var(
+      --progress-bar-height,
+      var(--progress-bar-default-height)
+    );
+    width: var(
+      --progress-bar-width,
+      var(--progress-bar-default-width)
+    );
+    border-radius: var(
+      --progress-bar-border-radius,
+      var(--progress-bar-default-border-radius)
+    );
   }
 
   .progress {
     max-width: 100%;
-    transition: width 300ms ease-in;
+    height: var(
+      --progress-bar-height,
+      var(--progress-bar-default-height)
+    );
+    background-color: var(
+      --progress-bar-highlight-color,
+      var(--progress-bar-default-highlight-color)
+    );
+    transition: width 300ms cubic-bezier(0.215, 0.610, 0.355, 1);
   }
 </style>

package/dist/components/simple/progress/ProgressBar.svelte.d.ts

@@ -1,13 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import '../../../css/main.css';
+import './ProgressBar.css';
 declare const __propDef: {
     props: {
         value?: number | undefined;
         total?: number | undefined;
-        height?: string | undefined;
-        width?: string | undefined;
-        radius?: string | undefined;
-        backgroundColor?: string | undefined;
-        color?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
 export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
+export { default as HorizontalStackedProgress } from './components/composed/progress/HorizontalStackedProgress.svelte';
 export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
 export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';

package/dist/index.js

@@ -47,6 +47,7 @@ export { default as TabSwitcher } from './components/simple/navigation/TabSwitch
 export { default as ProgressBar } from './components/simple/progress/ProgressBar.svelte';
 export { default as ProductCard } from './components/composed/shop/ProductCard.svelte';
 export { default as ProductsGrid } from './components/composed/shop/ProductsGrid.svelte';
+export { default as HorizontalStackedProgress } from './components/composed/progress/HorizontalStackedProgress.svelte';
 export { default as ActivableButton } from './components/composed/buttons/ActivableButton.svelte';
 export { default as IconsDropdown } from './components/composed/forms/IconsDropdown.svelte';
 export { default as PaginatedTable } from './components/composed/list/PaginatedTable.svelte';

package/package.json

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