@scania/tegel 1.21.1-header-dropdown-click-event-testing-beta.1 → 1.21.1-header-dropdown-click-event-testing-2-beta.0

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

@@ -13,6 +13,7 @@
   width: 100%;
   display: flex;
   align-items: center;
+  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
 }
 :host .wrapper:hover {
   cursor: pointer;

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

@@ -11,6 +11,7 @@ export class TdsPopoverMenu {
         this.show = null;
         this.defaultShow = false;
         this.placement = 'auto';
+        this.animation = 'none';
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
         this.fluidWidth = false;
@@ -26,13 +27,13 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6d8453ed1c0559e82d2ae66fd35b35ebfb128513' }, h("tds-popover-core", { key: 'e4bc80378b8ee064cc684351e23f8a6862426493', class: {
+        return (h(Host, { key: '51845cbec6357e794a8bc4a9be6fba399f6cfd65' }, h("tds-popover-core", { key: 'ff9deb3164f9e80efb10bcb2bb0e2022d0df2254', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow }, h("div", { key: '23bd0706be88113710d9bf30d1a5340db14dd33c', role: "list" }, h("slot", { key: '46b609352446c4c7bc1d427f1bbc918ea5fc7c4e' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'b5bc5851c06ce2bc874c76d9229b3efa3effd33a', role: "list" }, h("slot", { key: '1628c60e504a749863c3f000ec12a6e25a0a2da8' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -145,6 +146,24 @@ export class TdsPopoverMenu {
                 "reflect": false,
                 "defaultValue": "'auto'"
             },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'fade' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover should animate when being opened/closed or not"
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
             "offsetSkidding": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/toggle/toggle.css

@@ -24,7 +24,7 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+  transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
 }
 .tds-toggle input[type=checkbox]::before {
   /* Slider */

package/dist/collection/utils/classList.js

@@ -0,0 +1,22 @@
+/**
+ * Generates a string of class names by filtering out keys from the `classes` object
+ * whose values evaluate to `false`. The keys that remain will be joined with a space.
+ *
+ * @param classes - An object where keys represent class names and values are boolean
+ *                  flags indicating whether to include the class name.
+ * @returns A string of class names separated by spaces.
+ *
+ * @example
+ * const classes = {
+ *   'active': true,
+ *   'disabled': false,
+ *   'highlighted': true,
+ * };
+ * const classList = generateClassList(classes);
+ * console.log(classList); // Output: "active highlighted"
+ */
+export const generateClassList = (classes) => {
+    return Object.keys(classes)
+        .filter((key) => classes[key])
+        .join(' ');
+};