@kws3/ui 4.5.5 → 4.5.7

package/CHANGELOG.mdx

@@ -1,3 +1,10 @@
+## 4.5.7
+ - Fix SCSS deprecation warnings
+
+## 4.5.6
+ - Fix chart tooltip box shadow colors
+ - Add docs for LLMs
+
 ## 4.5.5
   - Fix type of `ToggleButtons` value, it can be any type
   - Fix Charts axis text colours to match theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.5",
+  "version": "4.5.7",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -67,5 +67,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "a22a25813f02e97dfa7907f9192b75f4340d4855"
+  "gitHead": "ac1f52cbab18e465f845a3366f6b13a00ce331c0"
 }

package/styles/AutoComplete.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -26,7 +27,7 @@ $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") {
+@if meta.variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 

package/styles/Chart.scss

@@ -4,6 +4,7 @@ $background-color: cv.getVar("scheme-main") !default;
 $foreground-color: cv.getVar("text") !default;
 $axis-lines-color: cv.getVar("border") !default;
 $grid-lines-color: cv.getVar("border-weak") !default;
+$tooltip-box-shadow: cv.getVar("shadow") !default;
 
 .kws-chart {
   .apexcharts-gridlines-horizontal {
@@ -25,6 +26,7 @@ $grid-lines-color: cv.getVar("border-weak") !default;
     border: 0;
     background: $background-color;
     border-radius: 0;
+    box-shadow: $tooltip-box-shadow;
     .apexcharts-tooltip-title {
       background: $background-color;
       color: $foreground-color;

package/styles/Select.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -27,7 +28,7 @@ $selected-background: cv.getVar("primary-light") !default;
 $options-background: cv.getVar("scheme-main-ter") !default;
 
 $__modal-z: 41 !default;
-@if variable-exists("modal-z") {
+@if meta.variable-exists("modal-z") {
   $__modal-z: $modal-z;
 }
 

package/styles/ToggleButtons.scss

@@ -7,10 +7,10 @@ $count-color: cv.getVar("danger-invert") !default;
 .kws-toggle-buttons {
   .button,
   .button:focus {
+    box-shadow: none;
     .icon {
       margin: 0;
     }
-    box-shadow: none;
     &.is-active {
       box-shadow: 0 0 0.6rem
         hsla(

package/styles/Tooltip.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/derived-variables" as dv;
 
@@ -7,7 +8,8 @@ $color: cv.getVar("text-invert") !default;
 $arrow-size: 8px !default;
 $padding: 0.5rem !default;
 $radius: cv.getVar("radius-small") !default;
-$shadow: 0 5px 10px -5px hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
+$shadow: 0 5px 10px -5px
+  hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
 $popover-background: cv.getVar("background") !default;
 $popover-color: cv.getVar("text") !default;
 $popover-arrow-color: cv.getVar("border") !default;
@@ -50,7 +52,10 @@ $popover-radius: $radius !default;
   &[data-animation="scale"] {
     @each $placement in $placements {
       &[data-placement^="#{$placement}"] {
-        transform-origin: nth($origins, index($placements, $placement));
+        transform-origin: list.nth(
+          $origins,
+          list.index($placements, $placement)
+        );
       }
     }