@tet/tet-components 1.4.3-testing → 1.4.4-staging

package/dist/collection/components/simple/menu/tet-menu-mobile/tet-menu-mobile.css

@@ -380,7 +380,7 @@
   * @prop --menu-dropdown-animation-speed: The speed of the dropdown animation.
   * @prop --menu-link-border-radius: The border-radius of the menu elements.
   * @prop --menu-text-color: The text color of the menu elements.
-  * @prop --menu-background-color: The background color of the menu.
+  * @prop --menu-item-theme-bg: The background color of the menu.
   * @prop --menu-first-level-text-color-active: The text color of the first level menu element when active.
   * @prop --menu-third-level-text-color-active: The text color of the third level menu element when active.
   * @prop --menu-border-bottom: The styling of the menu bottom border.
@@ -395,20 +395,83 @@
   --menu-dropdown-animation-speed: 0.2s;
   --menu-link-border-radius: 0.625rem;
   --menu-text-color: var(--tc-text-primary);
-  --menu-background-color: var(--tc-layer-primary);
+  --menu-item-theme-bg: var(--tc-layer-primary);
   --menu-first-level-text-color-active: var(--tc-text-tertiary);
   --menu-third-level-text-color-active: var(--tc-blue-40);
   --menu-border-bottom: 0.03125rem solid var(--tc-border-quaternary);
   --menu-link-active-background-color: var(--tc-menu-item-active);
   --menu-link-hover-background-color: var(--tc-menu-item-hover);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-hover);
   --menu-focus-outline-color: var(--tc-blue-40);
+  --menu-badge-background: var(--tc-yellow-20);
+  --menu-item-theme-gradient: transparent;
   display: inline-block;
   position: relative;
   width: 100%;
 }
+:host .theme-yellow {
+  --menu-item-theme-bg: var(--tc-menu-item-yellow-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-yellow-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-yellow-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-yellow-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-yellow-gradient-main) 30%,
+      var(--tc-menu-item-yellow-gradient-accent) 50%,
+      var(--tc-menu-item-yellow-gradient-main) 70%
+  );
+}
+:host .theme-red {
+  --menu-item-theme-bg: var(--tc-menu-item-red-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-red-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-red-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-red-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-red-gradient-main) 30%,
+      var(--tc-menu-item-red-gradient-accent) 50%,
+      var(--tc-menu-item-red-gradient-main) 70%
+  );
+}
+:host .theme-green {
+  --menu-item-theme-bg: var(--tc-menu-item-green-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-green-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-green-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-green-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-green-gradient-main) 30%,
+      var(--tc-menu-item-green-gradient-accent) 50%,
+      var(--tc-menu-item-green-gradient-main) 70%
+  );
+}
+:host .theme-violet {
+  --menu-item-theme-bg: var(--tc-menu-item-violet-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-violet-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-violet-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-violet-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-violet-gradient-main) 30%,
+      var(--tc-menu-item-violet-gradient-accent) 50%,
+      var(--tc-menu-item-violet-gradient-main) 70%
+  );
+}
+:host .theme-blue {
+  --menu-item-theme-bg: var(--tc-menu-item-blue-background-default);
+  --menu-item-theme-border: var(--tc-menu-item-blue-gradient-main);
+  --menu-item-theme-active-bg: var(--tc-menu-item-blue-background-active);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-blue-background-hover);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-blue-gradient-main) 30%,
+      var(--tc-menu-item-blue-gradient-accent) 50%,
+      var(--tc-menu-item-blue-gradient-main) 70%
+  );
+}
 
 .menu {
-  background-color: var(--menu-background-color);
+  background-color: var(--menu-item-theme-bg);
   border-bottom: var(--menu-border-bottom);
   color: var(--menu-text-color);
   line-height: var(--menu-line-height);
@@ -418,13 +481,77 @@
 }
 .menu--dark {
   --menu-text-color: var(--tc-text-primary-dark);
-  --menu-background-color: var(--tc-layer-primary-dark);
+  --menu-item-theme-bg: var(--tc-layer-primary-dark);
   --menu-first-level-text-color-active: var(--tc-text-tertiary-dark);
   --menu-third-level-text-color-active: var(--tc-blue-40-dark);
   --menu-border-bottom: 0.03125rem solid var(--tc-border-quaternary-dark);
+  --menu-highlited-item-background-color: var(--tc-layer-primary-dark);
   --menu-link-active-background-color: var(--tc-menu-item-active-dark);
   --menu-link-hover-background-color: var(--tc-menu-item-hover-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-hover-dark);
   --menu-focus-outline-color: var(--tc-blue-40-dark);
+  --menu-badge-background: var(--tc-grey-40-dark);
+  --menu-item-theme-gradient: transparent;
+}
+.menu--dark .theme-yellow {
+  --menu-item-theme-bg: var(--tc-menu-item-yellow-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-yellow-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-yellow-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-yellow-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-yellow-gradient-main-dark) 30%,
+      var(--tc-menu-item-yellow-gradient-accent-dark) 50%,
+      var(--tc-menu-item-yellow-gradient-main-dark) 70%
+  );
+}
+.menu--dark .theme-red {
+  --menu-item-theme-bg: var(--tc-menu-item-red-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-red-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-red-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-red-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-red-gradient-main-dark) 30%,
+      var(--tc-menu-item-red-gradient-accent-dark) 50%,
+      var(--tc-menu-item-red-gradient-main-dark) 70%
+  );
+}
+.menu--dark .theme-green {
+  --menu-item-theme-bg: var(--tc-menu-item-green-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-green-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-green-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-green-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-green-gradient-main-dark) 30%,
+      var(--tc-menu-item-green-gradient-accent-dark) 50%,
+      var(--tc-menu-item-green-gradient-main-dark) 70%
+  );
+}
+.menu--dark .theme-violet {
+  --menu-item-theme-bg: var(--tc-menu-item-violet-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-violet-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-violet-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-violet-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-violet-gradient-main-dark) 30%,
+      var(--tc-menu-item-violet-gradient-accent-dark) 50%,
+      var(--tc-menu-item-violet-gradient-main-dark) 70%
+  );
+}
+.menu--dark .theme-blue {
+  --menu-item-theme-bg: var(--tc-menu-item-blue-background-default-dark);
+  --menu-item-theme-border: var(--tc-menu-item-blue-gradient-main-dark);
+  --menu-item-theme-active-bg: var(--tc-menu-item-blue-background-active-dark);
+  --menu-item-theme-hover-bg: var(--tc-menu-item-blue-background-hover-dark);
+  --menu-item-theme-gradient: linear-gradient(
+      135deg,
+      var(--tc-menu-item-blue-gradient-main-dark) 30%,
+      var(--tc-menu-item-blue-gradient-accent-dark) 50%,
+      var(--tc-menu-item-blue-gradient-main-dark) 70%
+  );
 }
 .menu--expanded {
   border-bottom-color: transparent;
@@ -438,10 +565,48 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  padding: 0.625rem 1rem;
+  padding: 0.5rem 1rem;
+  border: 0.125rem solid transparent;
+  background-color: var(--menu-item-theme-bg);
+  border-radius: 0.375rem;
+}
+.menu__first-level-themed {
+  position: relative;
+  isolation: isolate;
+  color: var(--menu-text-color);
+  background-image: linear-gradient(var(--menu-item-theme-bg)), var(--menu-item-theme-gradient);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-size: 100% 100%, 300% 100%;
+  background-position: 0 0, 120% 120%;
+}
+.menu__first-level-themed.show-animation:not(:active, .menu--active) {
+  animation: gradient-border-cycle 4s ease-in-out infinite;
+}
+.menu__first-level-themed:hover {
+  border-color: var(--menu-item-theme-hover-bg);
+  background-image: linear-gradient(var(--menu-item-theme-hover-bg), var(--menu-item-theme-hover-bg));
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-clip: border-box;
+}
+.menu__first-level-icon {
+  --icon-size: 1.25rem;
+  display: flex;
+  align-self: center;
+  padding-right: 0.25rem;
 }
 .menu--active .menu__first-level {
   color: var(--menu-first-level-text-color-active);
+  background-color: var(--menu-item-theme-active-bg);
+}
+.menu--active .menu__first-level-themed {
+  color: var(--menu-text-color);
+  border-color: var(--menu-item-theme-active-bg);
+  background-image: linear-gradient(var(--menu-item-theme-active-bg), var(--menu-item-theme-active-bg));
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-clip: border-box;
 }
 .menu__first-level:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
@@ -474,6 +639,8 @@
 }
 .menu__dropdown__list li {
   list-style: none;
+  padding: 1px;
+  border-radius: var(--menu-link-border-radius);
 }
 .menu__dropdown__list .sublist a {
   padding: 0.75rem 1rem 0.75rem 3rem;
@@ -484,11 +651,18 @@
   border-radius: var(--menu-link-border-radius);
 }
 .menu__dropdown a:hover {
-  background-color: var(--menu-link-hover-background-color);
+  background-color: var(--menu-item-theme-hover-bg);
 }
 .menu__dropdown a.menu__second-level {
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.menu__dropdown a.menu__second-level:has(span) {
+  display: inline-block;
+  width: 100%;
+}
+.menu__dropdown a.menu__second-level.menu--active {
+  background-color: transparent;
+}
 .menu__dropdown a.menu__second-level:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125rem;
@@ -498,6 +672,13 @@
 .menu__dropdown a.menu__third-level {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.menu__dropdown a.menu__third-level:has(span) {
+  display: inline-block;
+  width: 100%;
+}
+.menu__dropdown a.menu__third-level.menu--active {
+  background-color: transparent;
+}
 .menu__dropdown a.menu__third-level:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125rem;
@@ -505,7 +686,7 @@
   outline-color: var(--menu-focus-outline-color);
 }
 .menu__dropdown a.menu--active {
-  background-color: var(--menu-link-active-background-color);
+  background-color: var(--menu-item-theme-active-bg);
 }
 .menu__dropdown a.menu--active.menu__third-level {
   color: var(--menu-third-level-text-color-active);
@@ -517,5 +698,34 @@
   padding-left: 0.5rem;
 }
 .menu__dropdown a.menu--active:hover {
-  background-color: var(--menu-link-hover-background-color);
+  background-color: var(--menu-item-theme-hover-bg);
+}
+
+.badge {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--menu-text-color);
+  background-color: var(--menu-badge-background);
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+  align-self: flex-end;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+}
+
+@keyframes gradient-border-cycle {
+  0%, 100% {
+    background-position: 0 0, 0% 0%;
+  }
+  20% {
+    background-position: 0 0, 70% 70%;
+  }
+  30% {
+    background-position: 0 0, 100% 100%;
+  }
+  40% {
+    background-position: 0 0, 120% 120%;
+  }
+  40%, 100% {
+    background-position: 0 0, 120% 120%;
+  }
 }

package/dist/collection/components/simple/menu/tet-menu-mobile/tet-menu-mobile.js

@@ -10,6 +10,9 @@ export class TetMenuMobile {
         this.firstLevelId = null;
         this.subLevels = [];
         this.darkMode = false;
+        this.highlightTheme = undefined;
+        this.showAnimation = false;
+        this.firstLevelIcon = '';
         this.isExpanded = false;
         this.hasDropdownContent = false;
         this.subMenuState = [];
@@ -56,10 +59,14 @@ export class TetMenuMobile {
         if (canBeClicked) {
             href = firstLevelLink;
         }
+        const isThemed = !!this.highlightTheme;
         return (h("a", { id: firstLevelId, href: href, class: {
                 'menu__first-level': true,
                 'tet-font__label--l': true,
-            }, onClick: this.firstLevelClick }, h("span", null, firstLevelTitle), this.renderChevron()));
+                'menu__first-level-themed': !!this.highlightTheme,
+                'show-animation': this.showAnimation,
+                ...(this.highlightTheme && { [`theme-${this.highlightTheme}`]: true }),
+            }, onClick: this.firstLevelClick }, this.firstLevelIcon && h("tet-icon", { class: "menu__first-level-icon", name: this.firstLevelIcon, theme: this.darkMode ? 'dark' : 'light', type: this.isActive && !isThemed ? "secondary" : "primary" }), h("span", null, firstLevelTitle), this.renderChevron()));
     }
     /**
      * Renders the dropdown of the menu.
@@ -91,17 +98,19 @@ export class TetMenuMobile {
         return (h("li", null, h("a", { id: subLevel.id, href: href, class: {
                 'menu--active': subLevel.active,
                 'menu__second-level': !isSubLevel,
-                'menu__third-level': isSubLevel,
-            }, onClick: () => this.secondLevelClick(subLevel.title, canBeClicked), inert: !this.isExpanded }, subLevel.title, " ", subLevel.active && isSubLevel && h("tet-icon", { class: "menu--active-check", name: "check", theme: this.darkMode ? "dark" : "light" }), !!canBeClicked && this.renderSubChevron(subLevel.title)), !!this.subMenuState.includes(subLevel.title) && h("ul", { class: "sublist" }, subMenuItems)));
+                'menu__third-level': isSubLevel
+            }, onClick: () => this.secondLevelClick(subLevel.title, canBeClicked), inert: !this.isExpanded }, subLevel.title, " ", !!subLevel.badge && h("span", { class: "badge" }, subLevel.badge), " ", subLevel.active && isSubLevel
+            && h("tet-icon", { class: "menu--active-check", name: "tc-check", theme: this.darkMode ? "dark" : "light" }), !!canBeClicked && this.renderSubChevron(subLevel.title)), !!this.subMenuState.includes(subLevel.title) && h("ul", { class: "sublist" }, subMenuItems)));
     }
     /**
      * Renders the chevron icon if the menu has content.
      */
     renderChevron() {
+        const isThemed = !!this.highlightTheme;
         if (!this.hasDropdownContent) {
             return null;
         }
-        return (h("tet-icon", { class: "menu__chevron", name: this.isExpanded ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light", type: this.isActive ? "secondary" : "primary" }));
+        return (h("tet-icon", { class: "menu__chevron", name: this.isExpanded ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light", type: this.isActive && !isThemed ? "secondary" : "primary" }));
     }
     /**
      * Renders the chevron icon if the menu has content.
@@ -110,11 +119,11 @@ export class TetMenuMobile {
         return (h("tet-icon", { class: "menu__chevron", name: this.subMenuState.includes(key) ? "chevron-up" : "chevron-down", theme: this.darkMode ? "dark" : "light" }));
     }
     render() {
-        return (h(Host, { key: 'd41cf033e4f2ee0bd3177a256b8df66492719c98' }, h("div", { key: 'e3405e72a3fdbeb49b04abf0699d9403da8bf1f5', class: {
+        return (h(Host, { key: '8b7ad7a4849a52bc24a612eee7c300f6a0672dc8' }, h("div", { key: 'e74b250aec51cf5f7367979447ab4b14ff3718ec', class: {
                 'menu': true,
                 'menu--expanded': this.isExpanded,
                 'menu--active': this.isActive,
-                'menu--dark': this.darkMode
+                'menu--dark': this.darkMode,
             } }, this.renderFirstLevel(), this.renderSubLevels())));
     }
     static get is() { return "tet-menu-mobile"; }
@@ -242,6 +251,65 @@ export class TetMenuMobile {
                 "attribute": "dark-mode",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "highlightTheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuItemTheme",
+                    "resolved": "\"blue\" | \"green\" | \"red\" | \"violet\" | \"yellow\"",
+                    "references": {
+                        "MenuItemTheme": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/simple/menu/tet-menu-mobile/tet-menu-mobile.tsx",
+                            "id": "src/components/simple/menu/tet-menu-mobile/tet-menu-mobile.tsx::MenuItemTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for highlighting item"
+                },
+                "attribute": "highlight-theme",
+                "reflect": false
+            },
+            "showAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether to show border animation on highlighted menu items."
+                },
+                "attribute": "show-animation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "firstLevelIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon of the first Level menu."
+                },
+                "attribute": "first-level-icon",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }