@kws3/ui 1.6.6 → 1.7.0

package/CHANGELOG.mdx

@@ -0,0 +1,90 @@
+## 1.7.0
+- Ensure uniform usage of $kws-theme-colors across all components, this means $kws-theme-colors can be indepnedent of the global $colors SCSS variable.
+- `DataSearch` component: Expand filters to fill area when main search input is not present.
+- `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
+- New `Skeleton` component.
+
+## 1.6.9
+- New `Timeline`, `TimelineItem` and `TimelineHeader` components.
+
+## 1.6.8
+- Vertically align `is-icon` cells in `Grid`
+
+## 1.6.7
+- Added granular events `showing`, `shown`, `hiding` and `hidden` for `Popover`.
+- Added `is-checked` class on `Grid` when a row is checked using the multiselect checkboxes.
+- New colors for `is-checked` class on `Grid`
+
+## 1.6.6
+- Enhance `Popover` with native `show` `hide` `enable` `disable` methods
+
+## 1.6.5
+- Filter fix on `DataSearch`
+
+## 1.6.4
+- Add support for `dropdown_portal` prop in `SearchableSelect`
+
+## 1.6.3
+- Prevent submit call on `MultiSelect` when `Enter` key is pressed while searching
+- Fix filter items going blank after search is initiated in `DataSearch`
+
+## 1.6.2
+- Add `dropdown_portal` prop on `MultiSelect` to allow rendering dropdown in alternative locations
+
+## 1.6.1
+- New `Portal` component
+- Use `Portal` for `MultiSelect` and `SearchableSelect` components
+
+## 1.6.0
+- Fix `DataSearch` responsiveness for mobile
+- Fix `Pagination` CSS for mobile
+- Fix `DataSort`  responsiveness for mobile
+- Fix functionality of `DataSearch`
+
+## 1.5.9
+- Fix `z-index` issue with `SearchableSelect`
+
+## 1.5.8
+- Showing `undefined` on total in `Pagination`
+
+## 1.5.7
+- Width calculation on `DataSearch`
+- More `text` validation `Nl2br`
+
+## 1.5.6
+- Fix attribute of `MultiSelect`
+- Fix `text` checking on `Nl2br`
+
+## 1.5.5
+- Added `BarChart`
+- Added `LineChart`
+- Added `AreaChart`
+- Added `RadialChart`
+- Support `sparklines` in `Charts`
+- Add `yAxisOptions` and `horizontal` bar for `Charts`
+- Fix attribute of `ConfirmButton`
+- Fix error Handling in `MixedChart`
+
+## 1.5.1
+- Chart bugfixes
+- Fix attribute of `NumberInput` for UI testing
+
+## 1.5.0
+- Added `DonutChart`
+- Added `MixedChart`
+- Added `PieChart`
+
+## 1.4.7
+- Fix value mismatch on `NumberInput`
+
+## 1.4.6
+- Fix Typing bug on `NumberInput`
+
+## 1.4.5
+- Fix **on:change** event on `NumberInput`
+
+## 1.4.4
+- import  `Floatie`, `FloatingUIOutput`, `FloatiesStore` from `@kws3/ui` for `FloatingUIOutput`
+
+## 1.4.3
+- Rename `completion_timeout` to `error_timeout` in `Buttons`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 KWS3 Media Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
 UI components for use with Svelte v3 applications.
 
-Docs: [https://ui.kws3.media](https://ui.kws3.media)
+[Demo and Documentation](https://ui.kws3.media)

package/buttons/SubmitButton.svelte

@@ -15,9 +15,9 @@
   @param {number} [completion_timeout=600] - How long to wait before `saved` event is fired, and the UI state reverts back to normal, Default: `600`
   @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for Button container, Default: `""`
-  @param {function} [saving()] - call this function on form saving state
-  @param {function} [saved(callback, timeout)] - call this function after form saved
-  @param {function} [error(callback, timeout)] - call this function on form error state
+  @method `saving()` - call this method on form saving state
+  @method `saved(callback, timeout)` - call this method after form saved
+  @method `error(callback, timeout)` - call this method on form error state
 
   ### Events
   - `saved` - Fired on successful submission
@@ -115,7 +115,7 @@
   export { klass as class };
 
   /**
-   * call this function on form saving state
+   * call this method on form saving state
    */
   export function saving() {
     tracker = {
@@ -126,7 +126,7 @@
   }
 
   /**
-   * call this function after form saved
+   * call this method after form saved
    */
   export function saved(callback, timeout = completion_timeout) {
     tracker = {
@@ -150,7 +150,7 @@
   }
 
   /**
-   * call this function on form error state
+   * call this method on form error state
    */
   export function error(callback, timeout = error_timeout) {
     tracker = {

package/datagrid/DataSearch/SearchFilter.svelte

@@ -11,7 +11,10 @@
 -->
 
 {#if filter.type == "multiselect"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <MultiSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -23,14 +26,20 @@
       class={hilightClass} />
   </div>
 {:else if filter.type == "date"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
 {:else if filter.type == "daterange"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
@@ -38,7 +47,10 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <SearchableSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -50,12 +62,13 @@
 {:else}
   <div
     class="select control search-control {hilightClass}"
+    class:is-expanded={shouldExpandToFill}
     style={filterWidthStyle}
     data-cy="select-container">
     <select
       bind:value={filterVals[filter.name]}
       class="is-radiusless {hilightClass}"
-      style="max-width:100%"
+      style="max-width:100%;width:100%;"
       data-cy={cy}>
       {#each sanitizedOptions as option}
         {#if option}
@@ -103,6 +116,8 @@
 
   $: filterVals, filter, convertToValuesArray();
 
+  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() == "";
+
   function convertValuesToString() {
     tick().then(() => {
       filterVals[filter.name] = multiSelectValue

package/datagrid/GridView/GridRow.svelte

@@ -29,7 +29,8 @@
   <tr
     in:fly={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}>
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox
@@ -55,7 +56,10 @@
     {/each}
   </tr>
 {:else}
-  <tr on:click|stopPropagation={rowClick} class:is-selected={rowActive}>
+  <tr
+    on:click|stopPropagation={rowClick}
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox

package/helpers/Popover.svelte

@@ -23,15 +23,17 @@ When set to `null`, it will use the content of the `popover` slot, Default: `nul
 It can be any CSS value associated with `max-width` property, including `"none"`, Default: `"none"`
   @param {string} [style=""] - Inline CSS for Popover trigger, Default: `""`
   @param {string} [class=""] - CSS classes for Popover trigger, Default: `""`
-  @param {function} [open()] - Open function
-  @param {function} [close()] - Close function
-  @param {function} [enable()] - Enable function
-  @param {function} [disable()] - Disable function
-  @param {function} [setProps(props)] - SetProps function
+  @method `open()` - Open method
+  @method `close()` - Close method
+  @method `enable()` - Enable method
+  @method `disable()` - Disable method
+  @method `setProps(props)` - SetProps method
 
   ### Events
-  - `open` - Triggered when popoper is shown
-  - `close` - Triggered when popoper is hidden
+  - `opening` - Triggered when popover is opening
+  - `open` - Triggered when popover is opened
+  - `closing` - Triggered when popover is closing
+  - `close` - Triggered when popover is closed
   - `trigger` - Triggered when popover is triggered either programatically or by user interaction
 
   ### Slots
@@ -42,7 +44,9 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 <span
   use:popover={{ content: targetNode }}
   bind:this={popoverParent}
+  on:showing={popoverShowing}
   on:shown={popoverShown}
+  on:hiding={popoverHiding}
   on:hidden={popoverHidden}
   on:triggered={popoverTriggered}
   data-tippy-trigger={trigger}
@@ -160,16 +164,30 @@ It can be any CSS value associated with `max-width` property, including `"none"`
     getInstance().setProps(props);
   }
 
+  const popoverShowing = ({ detail }) => {
+    /**
+     * Triggered when popover is opening
+     */
+    fire("opening", detail);
+  };
+
   const popoverShown = ({ detail }) => {
     /**
-     * Triggered when popoper is shown
+     * Triggered when popover is opened
      */
     fire("open", detail);
   };
 
+  const popoverHiding = ({ detail }) => {
+    /**
+     * Triggered when popover is closing
+     */
+    fire("closing", detail);
+  };
+
   const popoverHidden = ({ detail }) => {
     /**
-     * Triggered when popoper is hidden
+     * Triggered when popover is closed
      */
     fire("close", detail);
   };

package/helpers/Skeleton.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component
+
+
+  @param {number} [lines=1] - Lines property, Default: `1`
+  @param {string} [width="100%"] - CSS string denoting width of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh`, Default: `"100%"`
+  @param {string} [height="auto"] - CSS string denoting height of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh` | `auto`, Default: `"auto"`
+  @param {string} [radius="0px"] - CSS string denoting border-radius of the Skeleton
+**Examples:** `10px` | `5rem`, Default: `"0px"`
+  @param {boolean} [circle=false] - Whether the Skeleton should be rendered as a circle.
+If this is set to `true`, the `radius` property will be ignored., Default: `false`
+  @param {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [color=""] - Color of the Skeleton lines, Default: `""`
+  @param {string} [class=""] - CSS class for Skeleton, Default: `""`
+
+-->
+{#each { length: lines } as _, i}
+  <span
+    class="kws-skeleton is-{color} {klass}"
+    style="width:{width};height:{height};border-radius:{border_radius}">
+    &zwnj;
+  </span>
+{/each}
+
+<script>
+  export let /**
+     * Number of lines of text to display.
+     */
+    lines = 1,
+    /**
+     * CSS string denoting width of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh`
+     */
+    width = "100%",
+    /**
+     * CSS string denoting height of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh` | `auto`
+     */
+    height = "auto",
+    /**
+     * CSS string denoting border-radius of the Skeleton
+     * **Examples:** `10px` | `5rem`
+     */
+    radius = "0px",
+    /**
+     * Whether the Skeleton should be rendered as a circle.
+     * If this is set to `true`, the `radius` property will be ignored.
+     */
+    circle = false,
+    /**
+     * Color of the Skeleton lines
+     * @type {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     */
+    color = "";
+
+  /**
+   * CSS class for Skeleton
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: border_radius = circle ? "50%" : radius;
+</script>

package/helpers/Timeline/Timeline.svelte

@@ -0,0 +1,28 @@
+<!--
+  @component
+
+
+  @param {'left'|'center'|'right'} [align="left"] - Alignment of the Timeline child items, Default: `"left"`
+  @param {string} [class=""] - CSS classes for the Timeline container, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Default slot for placing all TimelineItem and TimelineHeader components
+
+-->
+<ul class="kws-timeline is-{align} {klass}">
+  <!--Default slot for placing all TimelineItem and TimelineHeader components--><slot />
+</ul>
+
+<script>
+  /**
+   * Alignment of the Timeline child items
+   * @type {'left'|'center'|'right'}
+   */
+  export let align = "left";
+
+  /**
+   * CSS classes for the Timeline container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/Timeline/TimelineHeader.svelte

@@ -0,0 +1,21 @@
+<!--
+  @component
+
+
+  @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Content of the header, recommended to wrap with a `.tag` element.
+
+-->
+<header class="kws-timeline-header {klass}">
+  <!--Content of the header, recommended to wrap with a `.tag` element.--><slot />
+</header>
+
+<script>
+  /**
+   * CSS classes for the TimelineItem container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/Timeline/TimelineItem.svelte

@@ -0,0 +1,70 @@
+<!--
+  @component
+
+
+  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of marker and border, Default: `"primary"`
+  @param {string} [marker_icon="null"] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_image="null"] - Any image URL, the image will be placed inside the marker, Default: `"null"`
+  @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
+
+  ### Slots
+  - `<slot name="above"  />` - Optional text to be displayed above the main text
+  - `<slot name="default"  />` - Default slot containing the main text
+  - `<slot name="below"  />` - Optional text to be displayed below the main text
+  - `<slot name="thumbnail"  />` - Optional thumbnail image do be displayed next to the main content
+
+-->
+<li class="kws-timeline-item is-{color} {klass}">
+  <div class="kws-timeline-marker">
+    {#if marker_icon && !marker_image}
+      <Icon icon={marker_icon} />
+    {/if}{#if marker_image && !marker_icon}
+      <figure class="image is-32x32"><img src={marker_image} alt="" /></figure>
+    {/if}
+  </div>
+  <div class="kws-timeline-content">
+    <span class="is-block has-text-grey"
+      ><!--Optional text to be displayed above the main text--><slot
+        name="above" /></span>
+    <span class="is-block description">
+      <!--Default slot containing the main text--><slot />
+    </span>
+
+    <span class="is-block has-text-grey">
+      <!--Optional text to be displayed below the main text--><slot
+        name="below" />
+    </span>
+  </div>
+  {#if $$slots.thumbnail}
+    <div class="kws-timeline-image">
+      <!--Optional thumbnail image do be displayed next to the main content--><slot
+        name="thumbnail" />
+    </div>
+  {/if}
+</li>
+
+<script>
+  import { Icon } from "@kws3/ui";
+
+  /**
+   * Color of marker and border
+   * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   */
+  export let color = "primary";
+  /**
+   * Any icon name accepted by the Icon component, icon will be placed inside the marker
+   * @type {string}
+   */
+  export let marker_icon = null;
+  /**
+   * Any image URL, the image will be placed inside the marker
+   * @type {string}
+   */
+  export let marker_image = null;
+
+  /**
+   * CSS classes for the TimelineItem container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/Tooltip.js

@@ -31,9 +31,15 @@ function createTippyAction(defaultOpts) {
     function makeOptions() {
       return Object.assign({}, defaultOpts, opts, {
         onShow(instance) {
+          dispatch("showing", { instance });
+        },
+        onShown(instance) {
           dispatch("shown", { instance });
         },
         onHide(instance) {
+          dispatch("hiding", { instance });
+        },
+        onHidden(instance) {
           dispatch("hidden", { instance });
         },
         onTrigger(instance) {

package/index.js

@@ -10,6 +10,10 @@ export { default as Panel } from "./helpers/Panel.svelte";
 export { default as Notification } from "./helpers/Notification.svelte";
 export { default as Loader } from "./helpers/Loader.svelte";
 export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
+export { default as Skeleton } from "./helpers/Skeleton.svelte";
+export { default as Timeline } from "./helpers/Timeline/Timeline.svelte";
+export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte";
+export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -29,5 +29,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "0f6862d3aefc099de5ccc7df5eaca60c47bbcdab"
+  "gitHead": "2da51d63a233a8129e31898f0a134f3a68d7f1ec"
 }

package/sliding-panes/SlidingPane.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {boolean} [active=false] - Used to set the active pane., Default: `false`
+  @param {boolean} [active=false] - Used to set the active pane, Default: `false`
   @param {string} [style=""] - Inline CSS of component, Default: `""`
   @param {boolean} [v_center=true] - Vertical alignment of content inside the active pane., Default: `true`
   @param {boolean} [h_center=true] - Horizontal alignment of content inside the active pane., Default: `true`
@@ -40,7 +40,7 @@ This will work only when `track_height` is set to `true`
   const fire = createEventDispatcher();
 
   /**
-   * Used to set the active pane.
+   * Used to set the active pane
    */
   export let active = false,
     /**

package/sliding-panes/SlidingPaneSet.svelte

@@ -2,34 +2,31 @@
   @component
 
 
-  @param {string} [classes=""] - Additional classes, Default: `""`
   @param {string} [style=""] - Inline style of component, Default: `""`
-  @param {boolean} [vertical=false] - Vertical Aligned - true/false, Default: `false`
+  @param {boolean} [vertical=false] - Vertical transform of SlidingPane., Default: `false`
+  @param {string} [class=""] - CSS classes for the SlidingPaneSet, Default: `""`
 
   ### Slots
   - `<slot name="default"  />`
 
 -->
-<div
-  class="sliding-pane-set {vertical ? 'is-vertical' : ''}  {classes}"
-  {style}>
+<div class="sliding-pane-set {vertical ? 'is-vertical' : ''}  {klass}" {style}>
   <slot />
 </div>
 
 <script>
   /**
-   * Additional classes
-   * @type {string}
+   * Inline style of component
    */
-  export let classes = "",
+  export let style = "",
     /**
-     * Inline style of component
-     * @type {string}
-     */
-    style = "",
-    /**
-     * Vertical Aligned - true/false
-     * @type {boolean}
+     * Vertical transform of SlidingPane.
      */
     vertical = false;
+
+  /**
+   * CSS classes for the SlidingPaneSet
+   */
+  let klass = "";
+  export { klass as class };
 </script>

package/styles/DataSort.scss

@@ -9,6 +9,8 @@
     &:first-child {
       padding-left: calc(0.625rem - 1px);
       border-radius: 0 0 0 $radius-large;
+      background: darken($input-border-color, 5%);
+      padding-right: calc(0.625rem - 1px);
     }
     &:last-child {
       border-radius: 0 0 $radius-large 0;
@@ -29,6 +31,9 @@
         border: none;
         box-shadow: none;
       }
+      &.is-fullwidth {
+        width: 100%;
+      }
     }
     &::after {
       border-color: $primary;

package/styles/Grid.scss

@@ -4,12 +4,14 @@ $kws-gridview-th-background: $table-background-color !default;
 $kws-gridview-th-color: $text !default;
 $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
 $kws-gridview-icon-size: 1.5em !default;
+$kws-gridview-checked-row-background: $primary-light !default;
 
 .data-table .table {
   box-shadow: $kws-gridview-box-shadow;
   th {
     background: $kws-gridview-th-background;
     color: $kws-gridview-th-color;
+    vertical-align: middle;
   }
   &.is-bordered {
     tr {
@@ -34,6 +36,7 @@ $kws-gridview-icon-size: 1.5em !default;
   }
   td.is-icon {
     width: 25px;
+    vertical-align: middle;
     .icon {
       font-size: $kws-gridview-icon-size;
     }
@@ -43,4 +46,11 @@ $kws-gridview-icon-size: 1.5em !default;
       cursor: pointer;
     }
   }
+
+  tr.is-checked {
+    background-color: $kws-gridview-checked-row-background !important;
+    td {
+      background-color: $kws-gridview-checked-row-background !important;
+    }
+  }
 }

package/styles/Loader.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-loader-width: 2rem !default;
 $kws-loader-height: 2rem !default;
 $kws-loader-width-medium: ($kws-loader-width * 1.5) !default;
@@ -5,45 +6,45 @@ $kws-loader-height-medium: ($kws-loader-height * 1.5) !default;
 $kws-loader-width-large: ($kws-loader-width * 3) !default;
 $kws-loader-height-large: ($kws-loader-height * 3) !default;
 $kws-loader-color: #ccc !default;
-$kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
+$kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
 
-.kws-loader{
-  .hero-body{
-    position:relative;
-    &:after{
+.kws-loader {
+  .hero-body {
+    position: relative;
+    &:after {
       @include loader();
-      border-left-color:$kws-loader-color;
-      border-bottom-color:$kws-loader-color;
+      border-left-color: $kws-loader-color;
+      border-bottom-color: $kws-loader-color;
       position: absolute !important;
-      width:$kws-loader-width;
-      height:$kws-loader-height;
+      width: $kws-loader-width;
+      height: $kws-loader-height;
       left: calc(50% - (#{$kws-loader-width} / 2));
       top: calc(50% - (#{$kws-loader-height} / 2));
     }
 
-    @each $name, $pair in $colors{
+    @each $name, $pair in $kws-theme-colors {
       $color: nth($pair, 1);
-      &.is-#{$name}{
-        &:after{
-          border-left-color:$color !important;
-          border-bottom-color:$color !important;
+      &.is-#{$name} {
+        &:after {
+          border-left-color: $color !important;
+          border-bottom-color: $color !important;
         }
       }
     }
 
-    &.is-medium{
-      &:after{
-        width:$kws-loader-width-medium;
-        height:$kws-loader-height-medium;
+    &.is-medium {
+      &:after {
+        width: $kws-loader-width-medium;
+        height: $kws-loader-height-medium;
         left: calc(50% - (#{$kws-loader-width-medium} / 2));
         top: calc(50% - (#{$kws-loader-height-medium} / 2));
       }
     }
 
-    &.is-large{
-      &:after{
-        width:$kws-loader-width-large;
-        height:$kws-loader-height-large;
+    &.is-large {
+      &:after {
+        width: $kws-loader-width-large;
+        height: $kws-loader-height-large;
         left: calc(50% - (#{$kws-loader-width-large} / 2));
         top: calc(50% - (#{$kws-loader-height-large} / 2));
       }
@@ -51,17 +52,17 @@ $kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
   }
 }
 
-.is-overlay{
-  z-index:4;
-  .kws-loader{
-    padding:0;
-    height:100%;
-    width:100%;
-    position:relative;
-    background:$kws-loader-overlay-background;
-    z-index:3;
-    .hero-body{
-      padding:0;
+.is-overlay {
+  z-index: 4;
+  .kws-loader {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: $kws-loader-overlay-background;
+    z-index: 3;
+    .hero-body {
+      padding: 0;
     }
   }
-}
+}

package/styles/Pagination.scss

@@ -14,7 +14,7 @@ $kws-pagination-item-active-color: findColorInvert(
 
 $kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
-$kws-pagination-frame-background: linear-gradient(#fff, #fafafa);
+$kws-pagination-frame-background: linear-gradient(#fff, #fafafa) !default;
 
 .pagination {
   &.is-small {

package/styles/RangeSlider.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-slider-radius: $radius !default;
 $kws-slider-track-background: $grey-lighter !default;
 $kws-slider-track-radius: $radius !default;
@@ -222,7 +223,7 @@ $kws-slider-output-radius: $radius !default;
       &.is-large {
         @include slider-size($size-large);
       }
-      @each $name, $pair in $colors {
+      @each $name, $pair in $kws-theme-colors {
         $color: nth($pair, 1);
         $color-invert: nth($pair, 2);
         $color-light: findLightColor($color);

package/styles/Skeleton.scss

@@ -0,0 +1,52 @@
+$kws-theme-colors: $colors !default;
+$kws-skeleton-color: lighten($text, 60%) !default;
+$kws-skeleton-hilight-color: lighten($text, 65%) !default;
+
+.kws-skeleton {
+  width: 100%;
+  line-height: 1;
+  display: inline-block;
+  background-color: $kws-skeleton-color;
+  background-image: linear-gradient(
+    90deg,
+    $kws-skeleton-color,
+    $kws-skeleton-hilight-color,
+    $kws-skeleton-color
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: kws-skeleton-shine 1.2s infinite;
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-light: findLightColor($color);
+    &.is-#{$name} {
+      background-color: $color-light;
+      background-image: linear-gradient(
+        90deg,
+        $color-light,
+        darken($color-light, 10%),
+        $color-light
+      );
+    }
+  }
+
+  &.is-transparent {
+    background-color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      transparentize($kws-skeleton-hilight-color, 0.6),
+      transparent
+    );
+  }
+}
+
+@keyframes kws-skeleton-shine {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}

package/styles/Timeline.scss

@@ -0,0 +1,165 @@
+$kws-theme-colors: $colors !default;
+$kws-timeline-default-color: $grey !default;
+$kws-timeline-default-color-invert: $light !default;
+
+@mixin right-aligned-timeline-item {
+  flex-direction: row-reverse;
+  .kws-timeline-marker {
+    right: 0;
+    left: auto;
+    transform: translateX(50%);
+  }
+  .kws-timeline-content {
+    text-align: right;
+    padding-left: 0;
+    padding-right: 1.75rem;
+  }
+  &:before {
+    right: -0.5px;
+    left: auto;
+  }
+}
+
+.kws-timeline-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0.5rem 0;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 0;
+  }
+  .kws-timeline-marker {
+    position: absolute;
+    left: 0;
+    background: $kws-timeline-default-color;
+    border: 1px solid $kws-timeline-default-color;
+    border-radius: 100%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    overflow: hidden;
+    &:empty {
+      min-height: 1rem;
+      min-width: 1rem;
+      padding: 0;
+      border-width: 4px;
+      background: $kws-timeline-default-color-invert;
+    }
+    .icon {
+      color: $kws-timeline-default-color-invert;
+      width: 16px;
+      height: 16px;
+      font-size: 0.75rem !important;
+    }
+    .image {
+      margin: -0.25rem;
+      img {
+        border-radius: 100%;
+      }
+    }
+  }
+  .kws-timeline-content {
+    padding-left: 1.75rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .kws-timeline-image {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 32px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: $radius;
+      box-shadow: 0 0.125rem 0.1875rem rgba(10, 10, 10, 0.1),
+        0 0 0 0.0625rem rgba(10, 10, 10, 0.1);
+    }
+  }
+
+  &:before {
+    content: "";
+    background-color: $kws-timeline-default-color;
+    display: block;
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: -0.5px;
+    top: 0;
+  }
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      .kws-timeline-marker {
+        border-color: $color;
+        background-color: $color;
+        &:empty {
+          background-color: $color-invert;
+        }
+        .icon {
+          color: $color-invert;
+        }
+      }
+      &:before {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+.kws-timeline-header {
+  width: 4em;
+  min-width: 4em;
+  word-wrap: normal;
+  text-align: center;
+  transform: translateX(-25px);
+  + .kws-timeline-header {
+    padding-top: 0.5rem;
+  }
+}
+
+.kws-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+
+  &.is-center {
+    .kws-timeline-item {
+      width: 50%;
+      align-self: flex-end;
+      flex-direction: row;
+      &:nth-of-type(2n) {
+        align-self: flex-start;
+        @include right-aligned-timeline-item;
+      }
+    }
+    .kws-timeline-header {
+      width: 100%;
+      transform: none;
+    }
+  }
+
+  &.is-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+    .kws-timeline-item {
+      width: 100%;
+      align-self: flex-end;
+      @include right-aligned-timeline-item;
+    }
+    .kws-timeline-header {
+      transform: translateX(25px);
+      width: 100%;
+      text-align: right;
+    }
+  }
+}