@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-magic-box/kup-magic-box.css

@@ -1,35 +1,3 @@
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
 :host {
   background-color: var(--kup-background-color);
   color: var(--kup-text-color);
@@ -37,14 +5,12 @@
   height: 300px;
   min-width: 700px;
   width: 700px;
-  overflow: auto;
 }
 
 #kup-component,
 .magic-box-wrapper {
   height: 100%;
   width: 100%;
-  overflow: auto;
 }
 
 .magic-box-wrapper {
@@ -55,12 +21,14 @@
 }
 
 .actions {
+  align-items: center;
   background-color: var(--kup-title-background-color);
-  position: absolute;
-  top: 0;
-  left: 0;
   display: inline-flex;
+  height: 52px;
   justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
   width: 100%;
   z-index: 1;
 }
@@ -81,7 +49,9 @@
 .content {
   box-sizing: border-box;
   height: 100%;
-  padding-top: 52px;
+  margin-top: 52px;
+  overflow: auto;
+  transition: background-color 125ms ease;
 }
 
 .empty {
@@ -94,11 +64,15 @@
   opacity: 0.5;
   transition: opacity 0.25s ease-out;
 }
-.empty .f-image--wrapper {
+.empty .f-image {
   margin: 0;
 }
 
 .json {
   font-family: var(--kup-font-family-monospace);
   margin: 0;
+}
+
+[kup-drag-over] {
+  background-color: rgba(var(--kup-success-color-rgb), 0.25);
 }

package/dist/collection/components/kup-magic-box/kup-magic-box.js

@@ -1,7 +1,5 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { setKetchupDroppable } from '../../utils/drag-and-drop';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { KupDataTableColumnDragType, KupDataTableRowDragType, } from '../kup-data-table/kup-data-table-declarations';
 import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupMagicBoxProps, MagicBoxDisplay, } from './kup-magic-box-declarations';
@@ -10,6 +8,7 @@ import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declar
 import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../utils/kup-interact/kup-interact-declarations';
 export class KupMagicBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -45,6 +44,7 @@ export class KupMagicBox {
      * Element which enables the drag on move feature.
      */
     this.dragHandler = null;
+    this.wrapperRef = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -155,6 +155,7 @@ export class KupMagicBox {
           break;
         case MagicBoxDisplay.DATATABLE:
           props['data'] = this.data;
+          props['autoFillMissingCells'] = true;
           content.push(h("kup-data-table", Object.assign({}, props)));
           break;
         case MagicBoxDisplay.JSON:
@@ -215,10 +216,16 @@ export class KupMagicBox {
     this.kupManager.theme.register(this);
   }
   componentDidLoad() {
-    this.rootElement.addEventListener('kup-drop', (e) => this.updateData(e));
+    this.rootElement.addEventListener(kupDropEvent, (e) => this.updateData(e));
     this.dragHandler =
       this.rootElement.shadowRoot.querySelector('#drag-handle');
-    this.kupManager.dialog.register(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dialogify(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dropzone(this.wrapperRef, {
+      accept: `[${kupDraggableColumnAttr}],[${kupDraggableRowAttr}]`,
+    }, {
+      dispatcher: this.rootElement,
+      type: KupDropEventTypes.MAGICBOX,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -228,29 +235,10 @@ export class KupMagicBox {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const handlers = {
-      // Had to define leave and over, otherwise drop wasn't working.
-      onDragLeave: () => { },
-      onDragOver: () => {
-        return true;
-      },
-      onDrop: () => {
-        return KupDataTableRowDragType;
-      },
-    };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
-        h("div", Object.assign({ class: "magic-box-wrapper" }, setKetchupDroppable(handlers, [
-          KupDataTableRowDragType,
-          KupDataTableColumnDragType,
-        ], this.rootElement, {
-          row: null,
-          cell: null,
-          column: null,
-          id: this.rootElement.id,
-        })),
+        h("div", { class: "magic-box-wrapper" },
           h("div", { class: "actions", id: "drag-handle" },
             h("kup-combobox", Object.assign({}, this.comboboxProps())),
             h("kup-button", { styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
@@ -259,10 +247,13 @@ export class KupMagicBox {
             h("kup-button", { id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
               } })),
-          h("div", { class: "content" }, this.setContent())))));
+          h("div", { class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
   }
   disconnectedCallback() {
-    this.kupManager.dialog.unregister([this.rootElement]);
+    this.kupManager.interact.unregister([
+      this.rootElement,
+      this.wrapperRef,
+    ]);
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
   }
@@ -287,11 +278,11 @@ export class KupMagicBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -301,7 +292,7 @@ export class KupMagicBox {
     },
     "data": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "MagicBoxData",
         "resolved": "MagicBoxData",
@@ -316,8 +307,8 @@ export class KupMagicBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the data that will be used to display different components."
       },
@@ -333,8 +324,8 @@ export class KupMagicBox {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -381,8 +372,8 @@ export class KupMagicBox {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],

package/dist/collection/components/kup-nav-bar/kup-nav-bar.js

@@ -110,9 +110,8 @@ export class KupNavBar {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { class: "header" },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId },
         h("header", { class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` },
           h("div", { class: `${navbarClass}__row` }, this.content())))));
@@ -143,11 +142,11 @@ export class KupNavBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -172,8 +171,8 @@ export class KupNavBar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupNavBarStyling.STANDARD",
-            "name": "default"
+            "name": "default",
+            "text": "KupNavBarStyling.STANDARD"
           }],
         "text": "Defines the style of the nav bar."
       },
@@ -229,8 +228,8 @@ export class KupNavBar {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -293,8 +292,8 @@ export class KupNavBar {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],

package/dist/collection/components/kup-paginator/kup-paginator.css

@@ -1,335 +1,3 @@
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
-.f-button--wrapper {
-  --kup_button_border_radius: var(--kup-button-border-radius, 4px);
-  --kup_button_disabled_color: var(
-    --kup-button-disabled-color,
-    var(--kup-disabled-color)
-  );
-  --kup_button_font_family: var(
-    --kup-button-font-family,
-    var(--kup-font-family)
-  );
-  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
-  --kup_button_font_weight: var(--kup-button-font-weight, 400);
-  --kup_button_height: var(--kup-button-height, 3em);
-  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
-  --kup_button_primary_color: var(
-    --kup-button-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_button_primary_color_h: var(
-    --kup-button-primary-color-h,
-    var(--kup-primary-color-h)
-  );
-  --kup_button_primary_color_s: var(
-    --kup-button-primary-color-s,
-    var(--kup-primary-color-s)
-  );
-  --kup_button_primary_color_l: var(
-    --kup-button-primary-color-l,
-    var(--kup-primary-color-l)
-  );
-  --kup_button_primary_color_rgb: var(
-    --kup-button-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup-spinner-color: var(--kup_button_primary_color);
-  font-family: var(--kup_button_font_family);
-  font-size: var(--kup_button_font_size);
-}
-.f-button--wrapper .button {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-appearance: none;
-  -webkit-font-smoothing: antialiased;
-  align-items: center;
-  background-color: transparent;
-  border: none;
-  border-radius: var(--kup_button_border_radius);
-  box-sizing: border-box;
-  color: var(--kup_button_primary_color);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 0.775em;
-  font-weight: var(--kup_button_font_weight);
-  height: var(--kup_button_height);
-  justify-content: center;
-  letter-spacing: 0.0892857143em;
-  line-height: inherit;
-  min-width: 64px;
-  outline: none;
-  overflow: visible;
-  padding: var(--kup_button_padding);
-  position: relative;
-  text-decoration: none;
-  text-transform: uppercase;
-  transition: background-color 80ms linear, box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  user-select: none;
-  vertical-align: middle;
-}
-.f-button--wrapper .button:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button .button__icon {
-  margin-left: -0.25em;
-  margin-right: 0.75em;
-}
-.f-button--wrapper .button .button__label + .button__icon {
-  margin-left: 0.75em;
-  margin-right: -0.25em;
-}
-.f-button--wrapper .button.button--floating, .f-button--wrapper .button.button--raised {
-  --kup-spinner-color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:not(.button--disabled), .f-button--wrapper .button.button--raised:not(.button--disabled) {
-  --kup-spinner-border-color: hsl(
-    var(--kup_button_primary_color_h),
-    calc(var(--kup_button_primary_color_s) * 0.75),
-    calc(var(--kup_button_primary_color_l) * 0.85)
-  );
-  background-color: var(--kup_button_primary_color);
-  color: var(--kup_button_text_on_primary_color);
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--raised:hover {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.93), calc(var(--kup_button_primary_color_l) * 1.07));
-}
-.f-button--wrapper .button.button--floating:focus, .f-button--wrapper .button.button--raised:focus {
-  background-color: hsl(var(--kup_button_primary_color_h), calc(var(--kup_button_primary_color_s) * 0.88), calc(var(--kup_button_primary_color_l) * 1.12));
-}
-.f-button--wrapper .button.button--floating.button--disabled, .f-button--wrapper .button.button--raised.button--disabled {
-  background-color: var(--kup-disabled-background-color);
-  box-shadow: none;
-}
-.f-button--wrapper .button.button--floating {
-  border-radius: 24px;
-  box-shadow: 0 0.215em 0.35em -1px rgba(var(--kup-text-color-rgb), 0.2), 0 0.43em 0.71em 0 rgba(var(--kup-text-color-rgb), 0.14), 0 0.07em 1.285em 0 rgba(var(--kup-text-color-rgb), 0.12);
-  font-weight: 500;
-  font-size: 1em;
-  height: 3.4em;
-  width: auto;
-  padding: 0 1.5em;
-}
-.f-button--wrapper .button.button--floating.button--no-label {
-  border-radius: 50%;
-  height: 4em;
-  padding: 0;
-  width: 4em;
-}
-.f-button--wrapper .button.button--floating:hover, .f-button--wrapper .button.button--floating:focus {
-  box-shadow: 0 0.35em 0.35em -3px rgba(var(--kup-text-color-rgb), 0.2), 0 0.57em 0.71em 0.07em rgba(var(--kup-text-color-rgb), 0.14), 0 0.21em 1em 0.14em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--floating:active {
-  box-shadow: 0 0.5em 0.57em -4px rgba(var(--kup-text-color-rgb), 0.2), 0 0.85em 1.21em 0.14em rgba(var(--kup-text-color-rgb), 0.14), 0 0.35em 1.57em 0.28em rgba(var(--kup-text-color-rgb), 0.12);
-}
-.f-button--wrapper .button.button--raised {
-  box-shadow: 0px 0.1em 0.1em 0 rgba(var(--kup-text-color-rgb), 0.125), 0px 0.2em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0px 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--raised:hover {
-  box-shadow: 0 0.25em 0.25em 0 rgba(var(--kup-text-color-rgb), 0.125), 0 0.75em 1em 0.1em rgba(var(--kup-text-color-rgb), 0.1), 0 0.25em 1.5em 0.2em rgba(var(--kup-text-color-rgb), 0.075);
-}
-.f-button--wrapper .button.button--outlined {
-  border-width: 1px;
-  border-style: solid;
-}
-.f-button--wrapper .button.button--outlined:not(.button--disabled) {
-  border-color: var(--kup_button_primary_color);
-  background-color: transparent;
-  color: var(--kup_button_primary_color);
-}
-.f-button--wrapper .button.button--outlined:hover {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .button.button--outlined:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.175);
-}
-.f-button--wrapper .button.button--outlined.button--disabled {
-  opacity: 0.75;
-  border-color: var(--kup_button_disabled_color);
-}
-.f-button--wrapper .button.button--no-label {
-  min-width: unset;
-  padding: 0 0.5em;
-}
-.f-button--wrapper .button.button--no-label .button__icon {
-  margin: 0;
-}
-.f-button--wrapper .button.button--disabled {
-  color: var(--kup_button_disabled_color);
-  cursor: auto;
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .button .button__spinner-container {
-  width: 100%;
-  height: var(--kup_button_spinner_height);
-  left: 0;
-  position: absolute;
-}
-.f-button--wrapper .icon-button {
-  background-color: transparent;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  font-size: var(--kup_button_font_size);
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  padding: 0.75em;
-  border-radius: 50%;
-}
-.f-button--wrapper .icon-button:hover, .f-button--wrapper .icon-button:focus {
-  background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
-}
-.f-button--wrapper .icon-button .icon-button__icon {
-  display: flex;
-  margin: auto;
-}
-.f-button--wrapper .icon-button .icon-button__icon.icon-button__icon--on {
-  display: none;
-}
-.f-button--wrapper .icon-button.button--disabled {
-  opacity: 0.75;
-  pointer-events: none;
-}
-.f-button--wrapper .icon-button .icon-button__spinner-container {
-  width: var(--kup_button_spinner_width);
-  height: var(--kup_button_spinner_height);
-}
-.f-button--wrapper .button--with-spinner {
-  opacity: 0.8;
-  pointer-events: none;
-}
-.f-button--wrapper .content--hidden {
-  visibility: hidden;
-}
-.f-button--wrapper.kup-full-height {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-height .button {
-  height: 100%;
-}
-.f-button--wrapper.kup-full-width {
-  width: 100%;
-}
-.f-button--wrapper.kup-full-width .button {
-  width: 100%;
-}
-.f-button--wrapper.kup-large button {
-  font-size: 1.25em;
-}
-.f-button--wrapper.kup-shaped .button {
-  border-radius: 18px;
-}
-.f-button--wrapper.kup-shaped .button.button--floating {
-  border-radius: 50% 0;
-}
-.f-button--wrapper.kup-slim button {
-  font-size: 0.675em;
-}
-.f-button--wrapper.kup-pulsating .icon-button--on:after {
-  content: "";
-  animation: pulsating 1250ms infinite;
-  position: absolute;
-  height: 2px;
-  width: 2px;
-  top: calc(50% - 1px);
-  left: calc(50% - 1px);
-  border-radius: 50%;
-}
-.f-button--wrapper.kup-danger {
-  --kup-button-primary-color: var(--kup-danger-color);
-  --kup-button-primary-color-h: var(--kup-danger-color-h);
-  --kup-button-primary-color-s: var(--kup-danger-color-s);
-  --kup-button-primary-color-l: var(--kup-danger-color-l);
-  --kup-button-primary-color-rgb: var(--kup-danger-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-info {
-  --kup-button-primary-color: var(--kup-info-color);
-  --kup-button-primary-color-h: var(--kup-info-color-h);
-  --kup-button-primary-color-s: var(--kup-info-color-s);
-  --kup-button-primary-color-l: var(--kup-info-color-l);
-  --kup-button-primary-color-rgb: var(--kup-info-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-secondary {
-  --kup-button-primary-color: var(--kup-secondary-color);
-  --kup-button-primary-color-h: var(--kup-secondary-color-h);
-  --kup-button-primary-color-s: var(--kup-secondary-color-s);
-  --kup-button-primary-color-l: var(--kup-secondary-color-l);
-  --kup-button-primary-color-rgb: var(--kup-secondary-color-rgb);
-  --kup-button-text-on-primary-color: var(--kup-text-on-secondary-color);
-}
-.f-button--wrapper.kup-success {
-  --kup-button-primary-color: var(--kup-success-color);
-  --kup-button-primary-color-h: var(--kup-success-color-h);
-  --kup-button-primary-color-s: var(--kup-success-color-s);
-  --kup-button-primary-color-l: var(--kup-success-color-l);
-  --kup-button-primary-color-rgb: var(--kup-success-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-.f-button--wrapper.kup-warning {
-  --kup-button-primary-color: var(--kup-warning-color);
-  --kup-button-primary-color-h: var(--kup-warning-color-h);
-  --kup-button-primary-color-s: var(--kup-warning-color-s);
-  --kup-button-primary-color-l: var(--kup-warning-color-l);
-  --kup-button-primary-color-rgb: var(--kup-warning-color-rgb);
-  --kup-button-text-on-primary-color: white;
-}
-
-@keyframes pulsating {
-  0% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0.7);
-  }
-  70% {
-    transform: scale(2.75);
-    box-shadow: 0 0 0 10px rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-  100% {
-    transform: scale(2);
-    box-shadow: 0 0 0 0 rgba(var(--kup_button_primary_color_rgb), 0);
-  }
-}
 :host {
   display: block;
 }