@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -153,16 +153,19 @@
   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);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px 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);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px 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);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.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--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;

package/dist/collection/components/kup-button/kup-button.js

@@ -245,8 +245,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the icon button state will be on."
       },
@@ -266,11 +266,11 @@ export class KupButton {
       "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."
       },
@@ -290,8 +290,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -311,8 +311,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, the button will show this icon."
       },
@@ -332,8 +332,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, the icon button off state will show this icon. Otherwise, an outlined version of the icon prop will be displayed."
       },
@@ -353,8 +353,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, the button will show this text."
       },
@@ -379,8 +379,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FButtonStyling.RAISED",
-            "name": "default"
+            "name": "default",
+            "text": "FButtonStyling.RAISED"
           }],
         "text": "Defines the style of the button. Styles available: \"flat\", \"outlined\" and \"raised\" which is also the default."
       },
@@ -400,8 +400,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the button show a spinner received in slot."
       },
@@ -421,8 +421,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the icon button will be toggable on/off."
       },
@@ -442,8 +442,8 @@ export class KupButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set, the icon will be shown after the text."
       },
@@ -522,8 +522,8 @@ export class KupButton {
         "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."
           }],
@@ -570,8 +570,8 @@ export class KupButton {
         "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-button-list/kup-button-list.css

@@ -153,16 +153,19 @@
   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);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px 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);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px 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);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.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--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;

package/dist/collection/components/kup-button-list/kup-button-list.js

@@ -301,8 +301,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "0",
-            "name": "default"
+            "name": "default",
+            "text": "0"
           }],
         "text": "Number of columns."
       },
@@ -322,11 +322,11 @@ export class KupButtonList {
       "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."
       },
@@ -351,8 +351,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "[]",
-            "name": "default"
+            "name": "default",
+            "text": "[]"
           }],
         "text": "Props of the sub-components."
       },
@@ -370,8 +370,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the sub-components are disabled."
       },
@@ -391,8 +391,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When set to true, highlights the selected button with the secondary color of KupTheme."
       },
@@ -417,8 +417,8 @@ export class KupButtonList {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "FButtonStyling.RAISED",
-            "name": "default"
+            "name": "default",
+            "text": "FButtonStyling.RAISED"
           }],
         "text": "Defines the style of the buttons. Available styles are \"flat\", \"outlined\" and \"raised\" (which is the default)."
       },
@@ -457,8 +457,8 @@ export class KupButtonList {
         "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."
           }],
@@ -505,8 +505,8 @@ export class KupButtonList {
         "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-calendar/kup-calendar.css

@@ -157,16 +157,19 @@
   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);
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px 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);
+  box-shadow: 0 7px 8px -4px rgba(var(--kup-text-color-rgb), 0.2), 0 12px 17px 2px rgba(var(--kup-text-color-rgb), 0.14), 0 5px 22px 4px 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);
+  box-shadow: 0 3px 1px -2px rgba(var(--kup-text-color-rgb), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb), 0.12);
 }
-.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--raised:focus, .f-button--wrapper .button.button--raised:hover {
+  box-shadow: 0 2px 4px -1px rgba(var(--kup-text-color-rgb), 0.2), 0 4px 5px 0 rgba(var(--kup-text-color-rgb), 0.14), 0 1px 10px 0 rgba(var(--kup-text-color-rgb), 0.12);
+}
+.f-button--wrapper .button.button--raised:active {
+  box-shadow: 0 5px 5px -3px rgba(var(--kup-text-color-rgb), 0.2), 0 8px 10px 1px rgba(var(--kup-text-color-rgb), 0.14), 0 3px 14px 2px rgba(var(--kup-text-color-rgb), 0.12);
 }
 .f-button--wrapper .button.button--outlined {
   border-width: 1px;
@@ -387,7 +390,6 @@
   border-width: 0;
   outline: none;
   cursor: pointer;
-  will-change: transform, opacity;
   margin: var(--kup_chip_margin);
 }
 .f-chip--wrapper .chip-set .chip .chip__icon--leading {

package/dist/collection/components/kup-calendar/kup-calendar.js

@@ -409,11 +409,11 @@ export class KupCalendar {
       "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."
       },
@@ -438,8 +438,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Actual data of the calendar."
       },
@@ -457,8 +457,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' dates."
       },
@@ -478,8 +478,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' descriptions."
       },
@@ -499,8 +499,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' ending time."
       },
@@ -520,8 +520,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When disabled, the navigation toolbar won't be displayed."
       },
@@ -541,8 +541,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' icons. There can be multiple icons, divided by \";\"."
       },
@@ -562,8 +562,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' images. There can be multiple images, divided by \";\"."
       },
@@ -583,8 +583,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Sets the initial date of the calendar. Must be in ISO format (YYYY-MM-DD)."
       },
@@ -604,8 +604,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' starting time."
       },
@@ -625,8 +625,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Column containing events' CSS styles."
       },
@@ -651,8 +651,8 @@ export class KupCalendar {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupCalendarViewTypes.MONTH",
-            "name": "default"
+            "name": "default",
+            "text": "KupCalendarViewTypes.MONTH"
           }],
         "text": "Type of the view."
       },
@@ -748,8 +748,8 @@ export class KupCalendar {
         "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."
           }],
@@ -812,8 +812,8 @@ export class KupCalendar {
         "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-card/kup-card-helper.js

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupCardCSSClasses, KupCardIds, KupCardSubEvents, } from './kup-card-declarations';
 import { KupColumnMenuIds } from '../../utils/kup-column-menu/kup-column-menu-declarations';
+import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
 /**
  * This function returns a list of components.
  * @param {GenericObject[]} compArray - Components' props.
@@ -57,7 +58,7 @@ export function compList(compArray, compType) {
 export function dialogHeader(title) {
   return (h("div", { id: KupCardIds.DRAG_HANDLE, class: KupCardCSSClasses.HEADER_BAR },
     title ? (h("div", { class: KupCardCSSClasses.DIALOG_TITLE }, title)) : null,
-    h(FImage, { sizeX: "1.25em", sizeY: "2em", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
+    h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, sizeX: "1.25em", sizeY: "2em", resource: "clear", id: KupCardIds.DIALOG_CLOSE })));
 }
 /**
  * Creates the bar used to expand/collapse the card.

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

@@ -340,6 +340,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-1 .section-1 .text {
   min-width: max-content;
@@ -358,6 +359,7 @@
 }
 .dialog-layout-2 .section-1 {
   text-align: center;
+  touch-action: none;
   padding-bottom: 1em;
 }
 .dialog-layout-2 .section-1 .text {
@@ -375,6 +377,7 @@
   height: 100%;
   padding: 0.5em;
   overflow: auto;
+  touch-action: none;
 }
 .dialog-layout-2 .section-2 .text {
   min-width: max-content;
@@ -389,7 +392,7 @@
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
   display: flex;
-  overflow: auto;
+  overflow: visible;
   flex-direction: column;
   height: 100%;
   position: relative;
@@ -408,6 +411,7 @@
   height: 52px;
   width: 100%;
   text-align: right;
+  touch-action: none;
 }
 .dialog-layout-3 .section-1 kup-button {
   margin-right: 0.25em;
@@ -441,6 +445,8 @@
 .dialog-layout-4 .section-2 {
   height: 100%;
   overflow: auto;
+  padding: 0.25em;
+  touch-action: none;
 }
 
 .dialog-layout-5 {
@@ -460,6 +466,17 @@
   overflow: auto;
 }
 
+#drag-handle {
+  -ms-touch-action: none;
+  touch-action: none;
+}
+#drag-handle:not(.header-bar) {
+  display: flex;
+  height: 100%;
+}
+#drag-handle:not(.header-bar) .f-image--wrapper {
+  margin: auto;
+}
 #drag-handle.header-bar {
   background-color: var(--kup-title-background-color);
   color: var(--kup-title-color);
@@ -1547,6 +1564,7 @@
   margin-bottom: 0.5em;
 }
 .standard-layout-12 .section-3 {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;
@@ -1659,6 +1677,7 @@
   margin: 0;
 }
 .standard-layout-14 .sub-checkbox {
+  backface-visibility: hidden;
   display: flex;
   flex-direction: column;
   max-height: 20vh;