@scania/tegel 1.47.2 → 1.48.0

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -5,19 +5,28 @@ import inheritAttributes from "../../utils/inheritAttributes";
  */
 export class TdsPopoverCanvas {
     constructor() {
-        this.inheritedAttributes = {};
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
         this.placement = 'auto';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
         this.modifiers = [];
+        /** Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
         this.tdsAlertDialog = 'dialog';
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = {};
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -66,8 +75,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the Popover"
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -87,7 +98,9 @@ export class TdsPopoverCanvas {
                 "docs": {
                     "tags": [],
                     "text": "Element that will trigger the Popover (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "defaultShow": {
                 "type": "boolean",
@@ -103,8 +116,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Decides if the component should be visible from the start."
                 },
-                "attribute": "default-show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-show",
                 "defaultValue": "false"
             },
             "show": {
@@ -121,8 +136,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop."
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show",
                 "defaultValue": "null"
             },
             "placement": {
@@ -135,7 +152,8 @@ export class TdsPopoverCanvas {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "node_modules::Placement"
+                            "id": "node_modules::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -145,8 +163,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'auto'"
             },
             "offsetSkidding": {
@@ -163,8 +183,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Sets the offset skidding"
                 },
-                "attribute": "offset-skidding",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-skidding",
                 "defaultValue": "0"
             },
             "animation": {
@@ -181,8 +203,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Whether the popover should animate when being opened/closed or not"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "offsetDistance": {
@@ -199,8 +223,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Sets the offset distance"
                 },
-                "attribute": "offset-distance",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-distance",
                 "defaultValue": "8"
             },
             "modifiers": {
@@ -217,6 +243,8 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "tdsAlertDialog": {
@@ -233,8 +261,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
                 },
-                "attribute": "tds-alert-dialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-alert-dialog",
                 "defaultValue": "'dialog'"
             },
             "modeVariant": {
@@ -251,8 +281,10 @@ export class TdsPopoverCanvas {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             }
         };

package/dist/collection/components/popover-core/popover-core.js

@@ -4,6 +4,34 @@ import generateUniqueId from "../../utils/generateUniqueId";
 import { generateClassList } from "../../utils/classList";
 export class TdsPopoverCore {
     constructor() {
+        /** Decides if the component should be visible from the start. */
+        this.defaultShow = false;
+        /** Whether the popover should animate when being opened/closed or not */
+        this.animation = 'none';
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
+        this.show = null;
+        /** Decides the placement of the Popover Menu */
+        this.placement = 'auto';
+        /** Sets the offset skidding */
+        this.offsetSkidding = 0;
+        /** Sets the offset distance */
+        this.offsetDistance = 8;
+        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+        this.modifiers = [];
+        /** What triggers the popover to show */
+        this.trigger = 'click';
+        /** Decides if the popover should hide automatically.
+         * Alternatevly it can be hidden externally based on emitted events. */
+        this.autoHide = true;
+        this.renderedShowValue = false;
+        this.popperInstance = null;
+        this.isShown = false;
+        this.disableLogic = false;
+        this.hasShownAtLeastOnce = false;
+        this.openedByKeyboard = false;
         this.uuid = generateUniqueId();
         this.setIsShown = (isShown) => {
             if (typeof isShown === 'function') {
@@ -40,24 +68,6 @@ export class TdsPopoverCore {
             event.stopPropagation();
             this.setIsShown(false);
         };
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.defaultShow = false;
-        this.animation = 'none';
-        this.show = null;
-        this.placement = 'auto';
-        this.offsetSkidding = 0;
-        this.offsetDistance = 8;
-        this.modifiers = [];
-        this.trigger = 'click';
-        this.autoHide = true;
-        this.renderedShowValue = false;
-        this.popperInstance = null;
-        this.target = undefined;
-        this.isShown = false;
-        this.disableLogic = false;
-        this.hasShownAtLeastOnce = false;
-        this.openedByKeyboard = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -256,8 +266,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the pop-over"
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -277,7 +289,9 @@ export class TdsPopoverCore {
                 "docs": {
                     "tags": [],
                     "text": "Element that will trigger the pop-over (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "defaultShow": {
                 "type": "boolean",
@@ -293,8 +307,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Decides if the component should be visible from the start."
                 },
-                "attribute": "default-show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-show",
                 "defaultValue": "false"
             },
             "animation": {
@@ -311,8 +327,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Whether the popover should animate when being opened/closed or not"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "show": {
@@ -329,8 +347,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop."
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show",
                 "defaultValue": "null"
             },
             "placement": {
@@ -343,7 +363,8 @@ export class TdsPopoverCore {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "node_modules::Placement"
+                            "id": "node_modules::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -353,8 +374,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Decides the placement of the Popover Menu"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'auto'"
             },
             "offsetSkidding": {
@@ -371,8 +394,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Sets the offset skidding"
                 },
-                "attribute": "offset-skidding",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-skidding",
                 "defaultValue": "0"
             },
             "offsetDistance": {
@@ -389,8 +414,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Sets the offset distance"
                 },
-                "attribute": "offset-distance",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-distance",
                 "defaultValue": "8"
             },
             "modifiers": {
@@ -407,6 +434,8 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "trigger": {
@@ -423,8 +452,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "What triggers the popover to show"
                 },
-                "attribute": "trigger",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "trigger",
                 "defaultValue": "'click'"
             },
             "autoHide": {
@@ -441,8 +472,10 @@ export class TdsPopoverCore {
                     "tags": [],
                     "text": "Decides if the popover should hide automatically.\nAlternatevly it can be hidden externally based on emitted events."
                 },
-                "attribute": "auto-hide",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "auto-hide",
                 "defaultValue": "true"
             }
         };

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class TdsPopoverMenuItem {
     constructor() {
+        /** Disables the Popover Menu Item */
         this.disabled = false;
     }
     render() {
@@ -37,8 +38,10 @@ export class TdsPopoverMenuItem {
                     "tags": [],
                     "text": "Disables the Popover Menu Item"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/popover-menu/popover-menu.js

@@ -5,18 +5,26 @@ import inheritAttributes from "../../utils/inheritAttributes";
  */
 export class TdsPopoverMenu {
     constructor() {
-        this.inheritedAttributes = {};
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = {};
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -66,8 +74,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "The CSS-selector for an element that will trigger the pop-over"
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -87,7 +97,9 @@ export class TdsPopoverMenu {
                 "docs": {
                     "tags": [],
                     "text": "Element that will trigger the pop-over (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "show": {
                 "type": "boolean",
@@ -103,8 +115,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop."
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show",
                 "defaultValue": "null"
             },
             "defaultShow": {
@@ -121,8 +135,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides if the component should be visible from the start."
                 },
-                "attribute": "default-show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-show",
                 "defaultValue": "false"
             },
             "placement": {
@@ -135,7 +151,8 @@ export class TdsPopoverMenu {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": "node_modules::Placement"
+                            "id": "node_modules::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -145,8 +162,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Decides the placement of the Popover Menu"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "placement",
                 "defaultValue": "'auto'"
             },
             "animation": {
@@ -163,8 +182,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Whether the popover should animate when being opened/closed or not"
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "offsetSkidding": {
@@ -181,8 +202,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset skidding"
                 },
-                "attribute": "offset-skidding",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-skidding",
                 "defaultValue": "0"
             },
             "offsetDistance": {
@@ -199,8 +222,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Sets the offset distance"
                 },
-                "attribute": "offset-distance",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "offset-distance",
                 "defaultValue": "8"
             },
             "fluidWidth": {
@@ -217,8 +242,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "If true this unsets the width (160px) of the Popover Menu"
                 },
-                "attribute": "fluid-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "fluid-width",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -235,8 +262,10 @@ export class TdsPopoverMenu {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             }
         };

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

@@ -15,7 +15,7 @@
   outline: none;
   margin: 0;
   border: 0;
-  width: 24px;
+  width: 20px;
   height: 24px;
   border-radius: 50%;
   position: relative;
@@ -24,7 +24,7 @@
   align-self: flex-start;
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
-  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) 6px;
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
@@ -34,25 +34,26 @@
   box-sizing: border-box;
 }
 .tds-radio-button .tds-form-input[type=radio]::before {
-  width: 22px;
-  height: 22px;
-  left: 1px;
-  top: 1px;
+  width: 20px;
+  height: 20px;
+  top: 2px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
   border: 1px solid var(--tds-radio-button-interaction-01);
   background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
-  left: 4px;
-  top: 4px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .tds-radio-button .tds-form-input[type=radio]:hover::before {
   background-color: var(--tds-radio-button-background-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::before {
   background-color: var(--tds-radio-button-background-focus);
-  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
+  box-shadow: 0 0 0 1px var(--tds-radio-button-background-focus);
+  animation: rb-focus var(--tds-motion-duration-moderate-02) var(--tds-motion-easing-enter) forwards;
 }
 .tds-radio-button .tds-form-input[type=radio]:focus-visible::after {
   outline: 1px solid var(--tds-radio-button-interaction-outline);
@@ -77,18 +78,17 @@
 }
 .tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
   display: block;
+  background-color: transparent;
   width: 16px;
   height: 16px;
-  left: 4px;
+  left: 2px;
   top: 4px;
-  border: 1px solid var(--tds-radio-button-color-disabled-before);
-  box-sizing: content-box;
+  box-shadow: inset 0 0 0 1px var(--tds-radio-button-border-color-disabled-after);
 }
 .tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
   border: 4px solid var(--tds-radio-button-interaction-02);
   background-color: var(--tds-radio-button-color-disabled-after);
-  left: 5px;
-  top: 5px;
+  clip-path: inset(1px 1px round 50%);
 }
 @keyframes rb-focus {
   0% {