@kws3/ui 2.0.4 → 2.1.0

package/forms/colorpicker/Colorpicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colorpicker.d.ts","sourceRoot":"","sources":["Colorpicker.js"],"names":[],"mappings":""}

package/forms/colorpicker/Colorpicker.js

@@ -1,6 +1,16 @@
+/**
+ *
+ * @param {window} win
+ * @param {document} doc
+ * @returns {any}
+ */
 function initialize(win, doc) {
-  var CP,
-    instance = "__instance__",
+  /**
+   * @type {any}
+   */
+  var CP;
+
+  var instance = "__instance__",
     first = "firstChild",
     scroll_left = "scrollLeft",
     scroll_top = "scrollTop",

package/forms/colorpicker/Colorpicker.svelte

@@ -9,7 +9,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
   @param {boolean} [readonly=false] - Enables read-only mode, Default: `false`
   @param {boolean} [mini=false] - Alternate mini colour picker without typeable input, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
-  @param {''|'small'|'medium'|'large'} [size=""] - Size of the colour picker trigger, Default: `""`
+  @param {SizeOptions} [size=] - Size of the colour picker trigger, Default: ``
 
   ### Events
   - `change` - Triggered when color changes
@@ -36,7 +36,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
         on:focus={focused}
         {disabled}
         bind:value={color}
-        use:colorpicker />
+        use:colorpicker={color} />
       {#if !mini}
         <Icon icon="hashtag" class="is-left" inner_style="color:#{color}" />
       {/if}
@@ -60,6 +60,10 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     fire("change");
   }, 300);
 
+  /**
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Current selected colour (hex format only)
    *
@@ -84,13 +88,16 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     disabled = false,
     /**
      * Size of the colour picker trigger
-     * @type {import('@kws3/ui/types').SizeOptions}
+     * @type {SizeOptions}
      */
     size = "";
 
   let dragover = false,
     _colorpicker;
 
+  /**
+   * @type {import("svelte/action").Action}
+   */
   function colorpicker(node) {
     _colorpicker = new ColorPicker(node);
 

package/forms/select/MultiSelect.svelte

@@ -5,7 +5,7 @@
   @param {Array|?string} [value=undefined] - Value of the Input
 
 This property can be bound to, to fetch the current value, Default: `undefined`
-  @param {object} [max=null] - Maximum number of selectable items from dropdown list.
+  @param {?number} [max=null] - Maximum number of selectable items from dropdown list.
 
 Accepts a `null` value for unlimited selected items.
 Or a number value, Default: `null`
@@ -22,9 +22,10 @@ Only send this prop if you want to fetch `options` asynchronously.
 `options` prop will be ignored if this prop is set., Default: `null`
   @param {string|'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
-  @param {number} [scoreThreshold=3] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
-  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {number} [score_threshold=3] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
+  @param {number} [scoreThreshold=undefined] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `undefined`
+  @param {SizeOptions} [size=] - Size of the input, Default: ``
+  @param {ColorOptions} [color=] - Color of the input, Default: ``
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
@@ -70,8 +71,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         <li class="tag summary-count is-{size} is-{color || 'primary'}">
           {selectedOptions.length}
         </li>
-        <li
-          class="tag is-{size} summary-text  is-{color || 'primary'} is-light">
+        <li class="tag is-{size} summary-text is-{color || 'primary'} is-light">
           Item{selectedOptions.length === 1 ? "" : "s"} selected
         </li>
       {:else}
@@ -260,15 +260,20 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
    * @type {number}
    */
-  export let scoreThreshold = 3;
+  export let score_threshold = 3;
+  /**
+   * (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
+   */
+  export let scoreThreshold = score_threshold;
   /**
    * Size of the input
-   *  @type {import('@kws3/ui/types').SizeOptions}
+   *  @type {SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   *  @type {import('@kws3/ui/types').ColorOptions}
+   *  @type {ColorOptions}
    */
   export let color = "";
   /**

package/forms/select/SearchableSelect.svelte

@@ -12,15 +12,15 @@ Used to populate the list of options in the dropdown, Default: `[]`
 this property of each object will be searched, Default: `"name"`
   @param {string} [value_key="id"] - If `options` is an array of objects,
 this property of each object will be returned as the value, Default: `"id"`
-  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @param {SizeOptions} [size=] - Size of the input, Default: ``
+  @param {ColorOptions} [color=] - Color of the input, Default: ``
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {function|null} [search=null] - Async function to fetch options
 
 Only send this prop if you want to fetch `options` asynchronously.
 `options` prop will be ignored if this prop is set., Default: `null`
-  @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+  @param {string|'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
@@ -84,6 +84,11 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   const rootContainerId = "kws-overlay-root";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Value of the Input
    *
@@ -113,12 +118,12 @@ Default value: `<span>{option[search_key] || option}</span>`
   export let value_key = "id";
   /**
    * Size of the input
-   *  @type {import('@kws3/ui/types').SizeOptions}
+   *  @type {SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   * @type {import('@kws3/ui/types').ColorOptions}
+   * @type {ColorOptions}
    */
   export let color = "";
   /**

package/helpers/CardModal.svelte

@@ -3,7 +3,7 @@
 
 
   @param {string} [title=""] - Title of the modal, Default: `""`
-  @param {'small'|'medium'|'large'} [size="small"] - Size of the modal, Default: `"small"`
+  @param {SizeOptions} [size=small] - Size of the modal, Default: `small`
   @param {boolean} [is_active=false] - Determines whether modal is displayed or not, Default: `false`
   @param {boolean} [closable=true] - If this is set to false, the modal cannot be closed using the UI
 
@@ -110,6 +110,11 @@ Only visible when the
 <script>
   import { fade, scale } from "svelte/transition";
   import { hasTransitions } from "../settings";
+
+  /**
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Title of the modal
    * @type {string}
@@ -117,7 +122,7 @@ Only visible when the
   export let title = "",
     /**
      * Size of the modal
-     * @type {import('@kws3/ui/types').SizeOptions}
+     * @type {SizeOptions}
      */
     size = "small",
     /**

package/helpers/ClipboardCopier.svelte

@@ -8,9 +8,9 @@
   @param {string} [copied_icon="check"] - Icon displayed on successful copy operation, Default: `"check"`
   @param {string} [copy=""] - Text to be copied into clipboard, Default: `""`
   @param {boolean} [copied=false] - Determines if the copy operation has taken place, Default: `false`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [copied_icon_color="success"] - Colour of the `copied_icon` after a succesful copy operation
+  @param {ColorOptions} [copied_icon_color=success] - Colour of the `copied_icon` after a succesful copy operation
 
-If `''` is selected, Icon will not change colour after copying, Default: `"success"`
+If `''` is selected, Icon will not change colour after copying, Default: `success`
   @param {string} [class=""] - CSS classes for the whole component, Default: `""`
 
   ### Slots
@@ -73,7 +73,7 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
      *
      * If `''` is selected, Icon will not change colour after copying
      *
-     * @type {import('@kws3/ui/types').ColorOptions}
+     * @type {ColorOptions}
      */
     copied_icon_color = "success";
 

package/helpers/Dialog/Dialog.svelte

@@ -2,18 +2,19 @@
   @component
 
 
-  @param {string} [title=""] - Title text of the Dialog box, Default: `""`
+  @param {string} [title=""] - Title text of the Dialog box.
+Will default to `Alert`, `Confirm` or `Prompt` depending on the dialog type, Default: `""`
   @param {string} [help_text=""] - Additional text to provide further context to the user, Default: `""`
-  @param {'small'|'medium'|'large'} [size="small"] - Size of the Dialog box, Default: `"small"`
+  @param {SizeOptions} [size=small] - Size of the Dialog box, Default: `small`
   @param {string} [input_value=""] - Default value inside text input displayed on `prompt()` Dialogs, Default: `""`
   @param {string} [icon=""] - Icon in the Dialog box, Default: `""`
-  @param {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [icon_color="primary"] - Color of the Icon in the Dialog box, Default: `"primary"`
-  @param {'small'|'medium'|'large'} [icon_size=""] - Size of the Icon in the Dialog box, Default: `""`
+  @param {ColorOptions} [icon_color=primary] - Color of the Icon in the Dialog box, Default: `primary`
+  @param {SizeOptions} [icon_size=] - Size of the Icon in the Dialog box, Default: ``
   @param {string} [ok_button_text="Ok"] - Text to be displayed in the OK button, Default: `"Ok"`
-  @param {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [ok_button_color="primary"] - Color of OK button, Default: `"primary"`
+  @param {ColorOptions} [ok_button_color=primary] - Color of OK button, Default: `primary`
   @param {string} [ok_button_icon="check"] - Icon in the OK button, Default: `"check"`
   @param {string} [cancel_button_text="Cancel"] - Text to be displayed in the Cancel button, Default: `"Cancel"`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [cancel_button_color=""] - Color of Cancel button, Default: `""`
+  @param {ColorOptions} [cancel_button_color=] - Color of Cancel button, Default: ``
   @param {string} [cancel_button_icon="ban"] - Icon in the Cancel button, Default: `"ban"`
   @param {string} [_type=""] - Determines the type of Dialog.
 
@@ -99,7 +100,8 @@ For internal use only - not part of config object, Default: `""`
    */
 
   /**
-   * Title text of the Dialog box
+   * Title text of the Dialog box.
+   * Will default to `Alert`, `Confirm` or `Prompt` depending on the dialog type
    * @type {string}
    */
   export let title = "",

package/helpers/Dialog/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
+export function alert(msg: string, props?: DialogProps): Promise<any>;
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
+export function prompt(msg: string, props?: DialogProps): Promise<any>;
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
+export function confirm(msg: string, props?: DialogProps): Promise<any>;
+declare const _default: Dialog;
+export default _default;
+export type DialogProps = import('@kws3/ui/types').DialogProps;
+declare class Dialog {
+    /**
+     *
+     * @param {string} msg
+     * @param {DialogProps} [props={}]
+     */
+    alert(msg: string, props?: DialogProps): Promise<any>;
+    /**
+     *
+     * @param {string} msg
+     * @param {DialogProps} [props={}]
+     */
+    prompt(msg: string, props?: DialogProps): Promise<any>;
+    /**
+     *
+     * @param {string} msg
+     * @param {DialogProps} [props={}]
+     */
+    confirm(msg: string, props?: DialogProps): Promise<any>;
+}
+//# sourceMappingURL=index.d.ts.map

package/helpers/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AA4DA;;;;GAIG;AACH,2BAHW,MAAM,UACN,WAAW,gBAKrB;AAED;;;;GAIG;AACH,4BAHW,MAAM,UACN,WAAW,gBAKrB;AAED;;;;GAIG;AACH,6BAHW,MAAM,UACN,WAAW,gBAKrB;;;0BArFY,OAAO,gBAAgB,EAAE,WAAW;AA2BjD;IACE;;;;OAIG;IAEH,WAJW,MAAM,UACN,WAAW,gBAKrB;IAED;;;;OAIG;IACH,YAHW,MAAM,UACN,WAAW,gBAIrB;IAED;;;;OAIG;IACH,aAHW,MAAM,UACN,WAAW,gBAIrB;CACF"}

package/helpers/Dialog/index.js

@@ -1,11 +1,15 @@
-import Dialog from "./Dialog.svelte";
+import { default as _Dialog } from "./Dialog.svelte";
+
+/**
+ * @typedef {import('@kws3/ui/types').DialogProps} DialogProps
+ */
 
 function createDialog(msg, props) {
   props = Object.assign(props, { _text: msg });
 
   const promise = new Promise((fulfil) => {
     //@ts-ignore
-    const dialog = new Dialog({
+    const dialog = new _Dialog({
       target: document.body,
       props,
       intro: true,
@@ -24,29 +28,64 @@ function createDialog(msg, props) {
   return promise;
 }
 
+class Dialog {
+  /**
+   *
+   * @param {string} msg
+   * @param {DialogProps} [props={}]
+   */
+
+  alert(msg, props = {}) {
+    return createDialog(msg, { ...props, _type: "alert" });
+  }
+
+  /**
+   *
+   * @param {string} msg
+   * @param {DialogProps} [props={}]
+   */
+  prompt(msg, props) {
+    return createDialog(msg, { ...props, _type: "prompt" });
+  }
+
+  /**
+   *
+   * @param {string} msg
+   * @param {DialogProps} [props={}]
+   */
+  confirm(msg, props) {
+    return createDialog(msg, { ...props, _type: "confirm" });
+  }
+}
+
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
 export function alert(msg, props) {
-  props = props || {};
-  props._type = "alert";
-  return createDialog(msg, props);
+  let dialog = new Dialog();
+  return dialog.alert(msg, props);
 }
 
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
 export function prompt(msg, props) {
-  props = props || {};
-  props._type = "prompt";
-  return createDialog(msg, props);
+  let dialog = new Dialog();
+  return dialog.prompt(msg, props);
 }
 
+/**
+ *
+ * @param {string} msg
+ * @param {DialogProps} [props={}]
+ */
 export function confirm(msg, props) {
-  props = props || {};
-  props._type = "confirm";
-  return createDialog(msg, props);
+  let dialog = new Dialog();
+  return dialog.confirm(msg, props);
 }
 
-//@ts-ignore
-Dialog.alert = alert;
-//@ts-ignore
-Dialog.confirm = confirm;
-//@ts-ignore
-Dialog.prompt = prompt;
-
-export default Dialog;
+export default new Dialog();

package/helpers/Divider.svelte

@@ -2,10 +2,10 @@
   @component
 
 
-  @param {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'} [color=""] - Color of the Divider lines, Default: `""`
+  @param {ColorOptions} [color=] - Color of the Divider lines, Default: ``
   @param {boolean} [light=false] - Whether to display a lighter variant of the `color`, Default: `false`
   @param {boolean} [vertical=false] - Whether to orient the Divider vertically. Vertical Divider take up the height of their parent., Default: `false`
-  @param {'center' | 'left' | 'right' | 'top' | 'bottom'} [alignment="center"] - Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers, Default: `"center"`
+  @param {Exclude<Positions, 'start'|'end'>} [alignment=center] - Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers, Default: `center`
   @param {string} [style=""] - Inline CSS styles for the Divider, Default: `""`
   @param {string} [class=""] - CSS class for Divider, Default: `""`
 
@@ -23,9 +23,15 @@
 </div>
 
 <script>
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').Positions} Positions
+   */
+
   /**
    * Color of the Divider lines
-   * @type {import('@kws3/ui/types').ColorOptions}
+   * @type {ColorOptions}
    */
   export let color = "",
     /**
@@ -38,7 +44,7 @@
     vertical = false,
     /**
      * Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers
-     * @type {string|'center' | 'left' | 'right' | 'top' | 'bottom'}
+     * @type {Exclude<Positions, 'start'|'end'>}
      */
     alignment = "center",
     /**

package/helpers/FloatingUI/Floatie.svelte

@@ -6,7 +6,7 @@
   @param {string} [message=""] - Message in the notification, Default: `""`
   @param {'notification'|'snackbar'|'toast'} [variant="notification"] - variation of floating UI, Default: `"notification"`
   @param {number} [duration=3000] - Duration of the notification, Default: `3000`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color="primary"] - Toast notification background color, Default: `"primary"`
+  @param {ColorOptions} [color=primary] - Toast notification background color, Default: `primary`
   @param {boolean} [light=false] - Inverted colors for notification box and contents, Default: `false`
   @param {boolean} [dismissable=true] - Determines if notification is dismissable, Default: `true`
   @param {boolean} [persistent=false] - A persistent notification without duration, stays till dismissed, Default: `false`

package/helpers/FloatingUI/index.d.ts

@@ -0,0 +1,51 @@
+export namespace FloatiesStore {
+    export { create };
+    export { remove };
+    export { subscribe };
+}
+/**
+ * @typedef {import("@kws3/ui/types").FloatieType} FloatieType
+ */
+/**
+ * @type {FloatieType}
+ */
+export const Notifications: FloatieType;
+/**
+ * @type {FloatieType}
+ */
+export const Toasts: FloatieType;
+/**
+ * @type {FloatieType}
+ */
+export const Snackbars: FloatieType;
+export type FloatieType = import("@kws3/ui/types").FloatieType;
+declare function create(newItem: any): {
+    props: any;
+    destroy: () => void;
+};
+declare function remove(props: any): void;
+declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
+    top: {
+        notification: any[];
+        snackbar: any[];
+        toast: any[];
+    };
+    bottom: {
+        notification: any[];
+        snackbar: any[];
+        toast: any[];
+    };
+}>, invalidate?: (value?: {
+    top: {
+        notification: any[];
+        snackbar: any[];
+        toast: any[];
+    };
+    bottom: {
+        notification: any[];
+        snackbar: any[];
+        toast: any[];
+    };
+}) => void) => import("svelte/store").Unsubscriber;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/helpers/FloatingUI/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;;;;AA4GA;;GAEG;AAEH;;GAEG;AACH,4BAFU,WAAW,CAgBnB;AAEF;;GAEG;AACH,qBAFU,WAAW,CAiBnB;AAEF;;GAEG;AACH,wBAFU,WAAW,CAiBnB;0BA5DW,OAAO,gBAAgB,EAAE,WAAW;AAxD/C;;;EA6BC;AAED,0CAYC"}

package/helpers/FloatingUI/index.js

@@ -106,6 +106,13 @@ const buildInitialiser = (defaultOpts, mandatoryOpts) => {
   };
 };
 
+/**
+ * @typedef {import("@kws3/ui/types").FloatieType} FloatieType
+ */
+
+/**
+ * @type {FloatieType}
+ */
 export const Notifications = {
   create: buildInitialiser(
     {
@@ -122,6 +129,9 @@ export const Notifications = {
   remove: FloatiesStore.remove,
 };
 
+/**
+ * @type {FloatieType}
+ */
 export const Toasts = {
   create: buildInitialiser(
     {
@@ -139,6 +149,9 @@ export const Toasts = {
   remove: FloatiesStore.remove,
 };
 
+/**
+ * @type {FloatieType}
+ */
 export const Snackbars = {
   create: buildInitialiser(
     {

package/helpers/Icon.svelte

@@ -2,12 +2,12 @@
   @component
 
 
-  @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the Icon, Default: `""`
-  @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the Icon, Default: `""`
+  @param {SizeOptions} [size=] - Size of the Icon, Default: ``
+  @param {ExtendedColorOptions} [color=] - Color of the Icon, Default: ``
   @param {string} [icon=""] - The name of the icon that is to be displayed, from the relevant icon family, Default: `""`
-  @param {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'} [family=""] - Icon family, can be modified globally in framework settings
+  @param {FontFamilies} [family=] - Icon family, can be modified globally in framework settings
 
-Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
+Ultimately defaults to `fa`, if family is not set anywhere, Default: ``
   @param {string} [style=""] - Inline CSS for icon container, Default: `""`
   @param {string} [inner_class=""] - CSS classes for icon, Default: `""`
   @param {string} [inner_style=""] - Inline CSS for icon, Default: `""`
@@ -65,14 +65,21 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 <script>
   import { defaultIconFamily } from "../settings";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').FontFamilies} FontFamilies
+   *
+   */
+
   /**
    * Size of the Icon
-   *  @type {import('@kws3/ui/types').SizeOptions}
+   *  @type {SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Icon
-     * @type {import('@kws3/ui/types').ColorOptions | 'grey'}
+     * @type {ExtendedColorOptions}
      */
     color = "",
     /**
@@ -83,7 +90,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
      * Icon family, can be modified globally in framework settings
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
-     * @type {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'}
+     * @type {FontFamilies}
      */
     family = "",
     /**

package/helpers/Loader.svelte

@@ -2,9 +2,9 @@
   @component
 
 
-  @param {'grey' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [spinner_color="grey"] - Color of the Spinner, Default: `"grey"`
-  @param {'small'|'medium'|'large'} [spinner_size="medium"] - Size of the Spinner, Default: `"medium"`
-  @param {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [background_color="transparent"] - Backgound color of the Spinner container, Default: `"transparent"`
+  @param {ExtendedColorOptions} [spinner_color=grey] - Color of the Spinner, Default: `grey`
+  @param {SizeOptions} [spinner_size=medium] - Size of the Spinner, Default: `medium`
+  @param {BGColorOptions} [background_color=transparent] - Backgound color of the Spinner container, Default: `transparent`
   @param {string} [background_size="medium"] - Size of the Spinner container. It can also accept css units
 
 **Examples:** `small` | `medium` | `large` | `halfheight` | `fullheight` | `10px` | `5rem` | `100vh`, Default: `"medium"`
@@ -33,7 +33,7 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
 <script>
   /**
 
-   * @typedef {import('@kws3/ui/types').SpinnerColorOptions} SpinnerColorOptions
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
    * @typedef {import('@kws3/ui/types').BGColorOptions} BGColorOptions
    *
@@ -41,7 +41,7 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
   /**
    * Color of the Spinner
    * @link https://bulma.io/documentation/helpers/color-helpers/
-   * @type {SpinnerColorOptions}
+   * @type {ExtendedColorOptions}
    */
   export let spinner_color = "grey",
     /**