@kws3/ui 4.4.0-alpha.2 → 4.4.0-alpha.4

package/controls/FileUpload.svelte

@@ -32,7 +32,10 @@ The following functions are returned in `event.detail`:
   class="kws-file-upload {klass} is-{color} is-{size} is-{_error
     ? 'danger'
     : ''} {disabled ? 'is-disabled' : ''} {_is_finished ? 'is-success' : ''}">
-  <div class="file-upload-inner">
+  <div
+    class="file-upload-inner input is-{color} is-{size} is-{_error
+      ? 'danger'
+      : ''}">
     <div class="up-icon">
       {#if _is_uploading}
         <span class="loader" />
@@ -42,7 +45,7 @@ The following functions are returned in `event.detail`:
         <Icon size="" icon="upload" class="fa-lg" />
       {/if}
     </div>
-    <div class="file">
+    <div class="file-target">
       {#if _is_uploading}
         <div class="upload-progress">
           <div class="progress-inner">
@@ -51,9 +54,9 @@ The following functions are returned in `event.detail`:
         </div>
         <div class="progress-caption">{_progress}% - Uploading...</div>
       {:else if _is_finished}
-        <div class="filename">Upload complete!</div>
+        <div class="file-name">Upload complete!</div>
       {:else}
-        <div class="filename"><span>{_filename}</span></div>
+        <div class="file-name"><span>{_filename}</span></div>
       {/if}
     </div>
     <input

package/controls/RangeSlider.svelte

@@ -127,7 +127,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   $: {
     let range = max - min;
     let position = ((value - min) / range) * 100;
-    let positionOffset = Math.round(position * 0.4);
+    let positionOffset = Math.round(position * 0.5);
     computedStyle = `left:calc(${position}% - ${positionOffset}px`;
   }
 

package/controls/Toggle.svelte

@@ -29,12 +29,6 @@ This property can be bound to, to fetch the current value, Default: `false`
   </div>
 </div>
 
-<style lang="scss">
-  .disabled {
-    opacity: 0.5;
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
 

package/controls/ToggleButtons.svelte

@@ -43,8 +43,7 @@ This property can be bound to, to fetch the current value, Default: `null`
             (option.active_class ? option.active_class : active_class)
           : option.inactive_class
             ? option.inactive_class
-            : inactive_class}"
-        style="height:auto">
+            : inactive_class}">
         <span>
           {#if option.icon}
             <Icon icon={option.icon} size="small" class="marginless" />
@@ -62,46 +61,6 @@ This property can be bound to, to fetch the current value, Default: `null`
   {/each}
 </div>
 
-<style lang="scss">
-  .kws-toggle-buttons {
-    .button,
-    .button:focus {
-      :global(.icon) {
-        margin: 0;
-      }
-      box-shadow: none;
-      &.is-active {
-        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3) inset !important;
-      }
-    }
-    .button {
-      position: relative;
-      .option-subtitle {
-        font-size: 0.7em;
-        display: block;
-        margin-top: -0.3em;
-        opacity: 0.7;
-      }
-      .count {
-        position: absolute;
-        font-weight: 600;
-        font-size: 0.8em;
-        border-radius: 999px;
-        padding: 0.15em 0.2em;
-        min-width: 1.8em;
-        min-height: 1.5em;
-        top: -0.75em;
-        right: 0.2em;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: #ca0303;
-        color: #fff;
-      }
-    }
-  }
-</style>
-
 <script>
   import { createEventDispatcher } from "svelte";
   import { Icon } from "@kws3/ui";
@@ -151,7 +110,7 @@ This property can be bound to, to fetch the current value, Default: `null`
     /**
      * CSS classes to apply when a button is inactive (not pressed)
      */
-    inactive_class = "is-outlined",
+    inactive_class = "",
     /**
      * Size of the Toggle Buttons
      * @type {SizeOptions}

package/forms/AutoComplete.svelte

@@ -65,7 +65,7 @@ Default value: `<span>{option.label}</span>`
     <button
       type="button"
       style="border: none;"
-      class="button paddingless delete is-medium is-loading" />
+      class="button delete paddingless is-small is-loading" />
   {/if}
   {#if rootContainer}
     <div

package/forms/actions.d.ts

@@ -1,9 +1,32 @@
 /**
- * @type {import("svelte/action").Action}
- */
-export let datepicker: import("svelte/action").Action;
+ * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * opts:object,
+ * value:string,
+ * placeholder:string,
+ * klass:string,
+ * style:string,
+ * disabled:boolean,
+ * color: ColorOptions
+ * }>} FlatpickerAction
+*/
 /**
- * @type {import("svelte/action").Action}
+ * @type {FlatpickerAction}
  */
-export let timepicker: import("svelte/action").Action;
+export let datepicker: FlatpickerAction;
+/**
+ * @type {FlatpickerAction}
+*/
+export let timepicker: FlatpickerAction;
+export type ColorOptions = import('@kws3/ui/types').ColorOptions;
+export type FlatpickerAction = import("svelte/action").Action<HTMLElement, {
+    opts: object;
+    value: string;
+    placeholder: string;
+    klass: string;
+    style: string;
+    disabled: boolean;
+    color: ColorOptions;
+}>;
 //# sourceMappingURL=actions.d.ts.map

package/forms/actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["actions.js"],"names":[],"mappings":"AAiHA;;GAEG;AACH,uBAFU,OAAO,eAAe,EAAE,MAAM,CAUtC;AAEF;;GAEG;AACH,uBAFU,OAAO,eAAe,EAAE,MAAM,CAYtC"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["actions.js"],"names":[],"mappings":"AAiHA;;;;;;;;;;;;EAYE;AAEF;;GAEG;AACH,uBAFU,gBAAgB,CAUxB;AAEF;;EAEE;AACF,uBAFU,gBAAgB,CAYxB;2BAvCW,OAAO,gBAAgB,EAAE,YAAY;+BAErC,OAAO,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE;IACxD,IAAM,EAAC,MAAM,CAAC;IACd,KAAO,EAAC,MAAM,CAAC;IACf,WAAa,EAAC,MAAM,CAAC;IACrB,KAAO,EAAC,MAAM,CAAC;IACf,KAAO,EAAC,MAAM,CAAC;IACf,QAAU,EAAC,OAAO,CAAC;IACnB,KAAO,EAAE,YAAY,CAAA;CAClB,CAAC"}

package/forms/actions.js

@@ -4,7 +4,7 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
   return function (
     node,
     // eslint-disable-next-line no-unused-vars
-    { opts, value, placeholder, klass, style, disabled, color }
+    { opts, value, placeholder, klass, style, disabled, color },
   ) {
     const _opts = {};
 
@@ -47,7 +47,7 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
         node.dispatchEvent(
           new CustomEvent(name, {
             detail: [selectedDates, dateStr, instance],
-          })
+          }),
         );
       };
     }
@@ -112,7 +112,21 @@ function createFlatpickrAction(defaultOpts, hooks, type) {
 }
 
 /**
- * @type {import("svelte/action").Action}
+ * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+ *
+ * @typedef {import("svelte/action").Action<HTMLElement, {
+ * opts:object,
+ * value:string,
+ * placeholder:string,
+ * klass:string,
+ * style:string,
+ * disabled:boolean,
+ * color: ColorOptions
+ * }>} FlatpickerAction
+*/
+
+/**
+ * @type {FlatpickerAction}
  */
 export let datepicker = createFlatpickrAction(
   {
@@ -121,12 +135,12 @@ export let datepicker = createFlatpickrAction(
     dateFormat: "Y-m-d",
   },
   ["onOpen", "onClose", "onMonthChange", "onYearChange", "onReady"],
-  "date"
+  "date",
 );
 
 /**
- * @type {import("svelte/action").Action}
- */
+ * @type {FlatpickerAction}
+*/
 export let timepicker = createFlatpickrAction(
   {
     altInput: true,
@@ -136,5 +150,5 @@ export let timepicker = createFlatpickrAction(
     noCalendar: true,
   },
   ["onOpen", "onClose", "onReady"],
-  "time"
+  "time",
 );

package/forms/colorpicker/Colorpicker.svelte

@@ -15,7 +15,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
   - `change` - Triggered when color changes
 
 -->
-<div class="color-picker-wrapper">
+<div class="kws-color-picker">
   <div class="field">
     <div
       class="control {mini ? 'mini' : 'has-icons-left'} {dragover &&

package/helpers/Skeleton.svelte

@@ -11,7 +11,7 @@
 **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 {ColorOptions} [color=] - Color of the Skeleton lines, Default: ``
+  @param {ExtendedColorOptions} [color=] - Color of the Skeleton lines, Default: ``
   @param {string} [class=""] - CSS class for Skeleton, Default: `""`
 
 -->
@@ -26,7 +26,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
 
 <script>
   /**
-   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').ExtendedColorOptions} ExtendedColorOptions
    */
   export let /**
      * Number of lines of text to display.
@@ -54,7 +54,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
     circle = false,
     /**
      * Color of the Skeleton lines
-     * @type {ColorOptions}
+     * @type {ExtendedColorOptions}
      */
     color = "";
 

package/helpers/Timeline/TimelineItem.svelte

@@ -23,14 +23,14 @@
     {/if}
   </div>
   <div class="kws-timeline-content">
-    <span class="is-block has-text-grey"
+    <span class="is-block above-description"
       ><!--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">
+    <span class="is-block below-description">
       <!--Optional text to be displayed below the main text--><slot
         name="below" />
     </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.4.0-alpha.2",
+  "version": "4.4.0-alpha.4",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -39,5 +39,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "67ef949462d49fde55b07a24d2a484f9840771dd"
+  "gitHead": "4273214f77bd46fe7d02867a47646f5ab8fac962"
 }

package/styles/ActionSheet.scss

@@ -1,9 +1,9 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/mixins" as mx;
 
-$kws-actionsheet-background: #{cv.getVar("background")} !default;
-$kws-actionsheet-box-shadow: #{cv.getVar("card-shadow")} !default;
-$kws-actionsheet-box-radius: #{cv.getVar("radius")} !default;
+$background: cv.getVar("background") !default;
+$box-shadow: cv.getVar("shadow") !default;
+$box-radius: cv.getVar("radius") !default;
 
 .kws-action-sheet-outer {
   display: flex;
@@ -16,16 +16,17 @@ $kws-actionsheet-box-radius: #{cv.getVar("radius")} !default;
   }
 }
 .kws-action-sheet {
-  border-radius: $kws-actionsheet-box-radius $kws-actionsheet-box-radius 0 0;
-  box-shadow: $kws-actionsheet-box-shadow;
+  border-radius: $box-radius $box-radius 0 0;
+  box-shadow: $box-shadow;
   position: fixed;
   bottom: 0;
   width: 100%;
   max-height: 90%;
+  min-height: -moz-fit-content;
   min-height: fit-content;
   max-width: 650px;
   margin: 0 auto;
-  background: $kws-actionsheet-background;
+  background: $background;
   transition: all 0.3s;
   z-index: 50;
   padding: 1.25em 1.5em;

package/styles/AutoComplete.scss

@@ -1,41 +1,36 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
-@use "bulma/sass/utilities/functions" as fn;
 
-$kws-theme-colors: dv.$colors !default;
-$kws-autocomplete-radius: #{cv.getVar("radius")} !default;
-$kws-autocomplete-border-color: #{cv.getVar("border")} !default;
-$kws-autocomplete-box-shadow:
-  0 0.5em 1em -0.125em rgb(10 10 10 / 10%),
-  0 0px 0 1px rgb(10 10 10 / 2%) !default;
-$kws-autocomplete-focus-border-color: #{cv.getVar("input-focus-border-color")} !default;
-$kws-autocomplete-focus-box-shadow-size: #{cv.getVar("focus-shadow-size")} !default;
-$kws-autocomplete-focus-box-shadow-color: hsl(
-  #{cv.getVar("focus-h")},
-  #{cv.getVar("focus-s")},
-  #{cv.getVar("focus-l")},
-  #{cv.getVar("focus-shadow-alpha")}
+$theme-colors: dv.$colors !default;
+$radius: cv.getVar("radius") !default;
+$border-color: cv.getVar("border") !default;
+$box-shadow: cv.getVar("shadow") !default;
+$focus-border-color: cv.getVar("input-focus-border-color") !default;
+$focus-box-shadow-size: cv.getVar("focus-shadow-size") !default;
+$focus-box-shadow-color: hsl(
+  cv.getVar("focus-h"),
+  cv.getVar("focus-s"),
+  cv.getVar("focus-l"),
+  cv.getVar("focus-shadow-alpha")
 ) !default;
-$kws-autocomplete-disabled-background-color: #{cv.getVar(
-    "input-disabled-background-color"
-  )} !default;
-$kws-autocomplete-disabled-border-color: #{cv.getVar(
-    "input-disabled-border-color"
-  )} !default;
-$kws-autocomplete-disabled-color: #{cv.getVar("input-disabled-color")} !default;
-$kws-autocomplete-selecting-color: #{cv.getVar("primary-invert")} !default;
-$kws-autocomplete-selecting-background: #{cv.getVar("primary")} !default;
-$kws-autocomplete-text-matches-color: currentColor !default;
-$kws-autocomplete-text-matches-background: transparent !default;
-$kws-autocomplete-text-matches-font-weight: #{cv.getVar("weight-bold")} !default;
-$kws-autocomplete-options-background: #{cv.getVar("scheme-main-ter")} !default;
+$disabled-background-color: cv.getVar(
+  "input-disabled-background-color"
+) !default;
+$disabled-border-color: cv.getVar("input-disabled-border-color") !default;
+$disabled-color: cv.getVar("input-disabled-color") !default;
+$selecting-color: cv.getVar("primary-invert") !default;
+$selecting-background: cv.getVar("primary") !default;
+$text-matches-color: currentColor !default;
+$text-matches-background: transparent !default;
+$text-matches-font-weight: cv.getVar("weight-bold") !default;
+$options-background: cv.getVar("scheme-main-ter") !default;
 
 $__modal-z: 41 !default;
 @if variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 
-$kws-autocomplete-options-z-index: $__modal-z + 1 !default;
+$options-z-index: $__modal-z + 1 !default;
 
 .kws-autocomplete {
   position: relative;
@@ -47,14 +42,13 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !default;
   padding-top: calc(0.4em - 1px);
   padding-bottom: calc(0.4em - 1px);
   &:focus-within {
-    border-color: $kws-autocomplete-focus-border-color;
-    box-shadow: $kws-autocomplete-focus-box-shadow-size
-      $kws-autocomplete-focus-box-shadow-color;
+    border-color: $focus-border-color;
+    box-shadow: $focus-box-shadow-size $focus-box-shadow-color;
   }
   &.is-disabled {
-    background-color: $kws-autocomplete-disabled-background-color;
-    border-color: $kws-autocomplete-disabled-border-color;
-    color: $kws-autocomplete-disabled-color;
+    background-color: $disabled-background-color;
+    border-color: $disabled-border-color;
+    color: $disabled-color;
     cursor: not-allowed;
   }
   &.is-readonly {
@@ -80,14 +74,14 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !default;
     padding: 0;
     cursor: pointer;
     overflow: auto;
-    background: $kws-autocomplete-options-background;
-    border: 1px solid $kws-autocomplete-border-color;
-    box-shadow: $kws-autocomplete-box-shadow;
+    background: $options-background;
+    border: 1px solid $border-color;
+    box-shadow: $box-shadow;
     position: relative;
+    border-radius: 0 0 $radius $radius;
     z-index: 4;
     &[data-popper-placement="top"] {
-      border-radius: $kws-autocomplete-radius $kws-autocomplete-radius 0 0;
-      box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.4);
+      border-radius: $radius $radius 0 0;
     }
     &.hidden {
       display: none;
@@ -99,29 +93,29 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !default;
       word-break: break-all;
       &.active {
         // keyboard focused item
-        color: $kws-autocomplete-selecting-color;
-        background: $kws-autocomplete-selecting-background;
+        color: $selecting-color;
+        background: $selecting-background;
       }
       span.h {
         // highlight text matches
-        font-weight: $kws-autocomplete-text-matches-font-weight;
-        color: $kws-autocomplete-text-matches-color;
-        background: $kws-autocomplete-text-matches-background;
+        font-weight: $text-matches-font-weight;
+        color: $text-matches-color;
+        background: $text-matches-background;
       }
     }
   }
 }
 
-@each $name, $pair in $kws-theme-colors {
-  $color: nth($pair, 1);
-  $color-invert: fn.bulmaFindColorInvert($color);
-  $color-light: fn.bulmaFindLightColor($color);
-  $color-dark: fn.bulmaFindDarkColor($color);
+@each $name, $pair in $theme-colors {
+  $color: cv.getVar($name);
+  $color-invert: cv.getVar($name, "", "-invert");
+  $color-light: cv.getVar($name, "", "-light");
+  $color-dark: cv.getVar($name, "", "-dark");
   .kws-autocomplete {
     &.is-#{$name} {
       border-color: $color;
       &:focus-within {
-        box-shadow: $kws-autocomplete-focus-box-shadow-size
+        box-shadow: $focus-box-shadow-size
           hsla(
             cv.getVar($name, "", "-h"),
             cv.getVar($name, "", "-s"),
@@ -148,6 +142,6 @@ $kws-autocomplete-options-z-index: $__modal-z + 1 !default;
 #kws-overlay-root {
   .kws-autocomplete {
     position: absolute;
-    z-index: $kws-autocomplete-options-z-index;
+    z-index: $options-z-index;
   }
 }

package/styles/Canvas.scss

@@ -1,5 +1,4 @@
 @use "bulma/sass/utilities/css-variables" as cv;
-@use "bulma/sass/utilities/initial-variables" as iv;
 
 :root {
   --kws-peninput-height: 350px;
@@ -24,7 +23,7 @@
     position: absolute;
     width: 100%;
     min-height: var(--kws-peninput-controls-height);
-    background: transparentize(iv.$grey-light, 0.5);
+    background: cv.getVar("grey-lighter");
     padding: 0.25rem;
     margin: 0 auto;
     .control {
@@ -60,9 +59,9 @@
     &.expanded {
       z-index: 999;
       position: relative;
-      box-shadow: cv.getVar("card-shadow");
+      box-shadow: cv.getVar("shadow");
       .kws-pen-controls {
-        background: iv.$grey-lighter;
+        background: cv.getVar("grey-lighter");
       }
     }
   }

package/styles/Chart.scss

@@ -1,17 +1,17 @@
 @use "bulma/sass/utilities/css-variables" as cv;
 
-$kws-chart-tooltip-background-color: #{cv.getVar("scheme-main")} !default;
-$kws-chart-tooltip-foreground-color: #{cv.getVar("scheme-invert-ter")} !default;
+$background-color: cv.getVar("scheme-main") !default;
+$foreground-color: cv.getVar("text") !default;
 
 .kws-chart {
   .apexcharts-tooltip {
     display: flex;
     border: 0;
-    background: $kws-chart-tooltip-background-color;
+    background: $background-color;
     border-radius: 0;
     .apexcharts-tooltip-title {
-      background: $kws-chart-tooltip-background-color;
-      color: $kws-chart-tooltip-foreground-color;
+      background: $background-color;
+      color: $foreground-color;
       border: none;
     }
     .apexcharts-tooltip-series-group.apexcharts-active,