@sapudex/web-components 2.12.1 → 2.13.0

package/dist/types/PromoTile.d.ts

@@ -1,4 +1,4 @@
-export declare enum UDExPromoTileColorSheme {
+export declare enum UDExPromoTileColorScheme {
     Grey1 = "Grey1",
     Grey2 = "Grey2",
     Grey7 = "Grey7",

package/dist/types/PromoTile.js

@@ -1,60 +1,60 @@
-export var UDExPromoTileColorSheme;
-(function (UDExPromoTileColorSheme) {
-    UDExPromoTileColorSheme["Grey1"] = "Grey1";
-    UDExPromoTileColorSheme["Grey2"] = "Grey2";
-    UDExPromoTileColorSheme["Grey7"] = "Grey7";
-    UDExPromoTileColorSheme["Grey8"] = "Grey8";
-    UDExPromoTileColorSheme["Grey9"] = "Grey9";
-    UDExPromoTileColorSheme["Grey10"] = "Grey10";
-    UDExPromoTileColorSheme["Blue1"] = "Blue1";
-    UDExPromoTileColorSheme["Blue2"] = "Blue2";
-    UDExPromoTileColorSheme["Blue7"] = "Blue7";
-    UDExPromoTileColorSheme["Blue8"] = "Blue8";
-    UDExPromoTileColorSheme["Blue9"] = "Blue9";
-    UDExPromoTileColorSheme["Blue10"] = "Blue10";
-    UDExPromoTileColorSheme["Teal1"] = "Teal1";
-    UDExPromoTileColorSheme["Teal2"] = "Teal2";
-    UDExPromoTileColorSheme["Teal7"] = "Teal7";
-    UDExPromoTileColorSheme["Teal8"] = "Teal8";
-    UDExPromoTileColorSheme["Teal9"] = "Teal9";
-    UDExPromoTileColorSheme["Teal10"] = "Teal10";
-    UDExPromoTileColorSheme["Green1"] = "Green1";
-    UDExPromoTileColorSheme["Green2"] = "Green2";
-    UDExPromoTileColorSheme["Green7"] = "Green7";
-    UDExPromoTileColorSheme["Green8"] = "Green8";
-    UDExPromoTileColorSheme["Green9"] = "Green9";
-    UDExPromoTileColorSheme["Green10"] = "Green10";
-    UDExPromoTileColorSheme["Mango1"] = "Mango1";
-    UDExPromoTileColorSheme["Mango2"] = "Mango2";
-    UDExPromoTileColorSheme["Mango7"] = "Mango7";
-    UDExPromoTileColorSheme["Mango8"] = "Mango8";
-    UDExPromoTileColorSheme["Mango9"] = "Mango9";
-    UDExPromoTileColorSheme["Mango10"] = "Mango10";
-    UDExPromoTileColorSheme["Red1"] = "Red1";
-    UDExPromoTileColorSheme["Red2"] = "Red2";
-    UDExPromoTileColorSheme["Red7"] = "Red7";
-    UDExPromoTileColorSheme["Red8"] = "Red8";
-    UDExPromoTileColorSheme["Red9"] = "Red9";
-    UDExPromoTileColorSheme["Red10"] = "Red10";
-    UDExPromoTileColorSheme["Raspberry1"] = "Raspberry1";
-    UDExPromoTileColorSheme["Raspberry2"] = "Raspberry2";
-    UDExPromoTileColorSheme["Raspberry7"] = "Raspberry7";
-    UDExPromoTileColorSheme["Raspberry8"] = "Raspberry8";
-    UDExPromoTileColorSheme["Raspberry9"] = "Raspberry9";
-    UDExPromoTileColorSheme["Raspberry10"] = "Raspberry10";
-    UDExPromoTileColorSheme["Pink1"] = "Pink1";
-    UDExPromoTileColorSheme["Pink2"] = "Pink2";
-    UDExPromoTileColorSheme["Pink7"] = "Pink7";
-    UDExPromoTileColorSheme["Pink8"] = "Pink8";
-    UDExPromoTileColorSheme["Pink9"] = "Pink9";
-    UDExPromoTileColorSheme["Pink10"] = "Pink10";
-    UDExPromoTileColorSheme["Indigo1"] = "Indigo1";
-    UDExPromoTileColorSheme["Indigo2"] = "Indigo2";
-    UDExPromoTileColorSheme["Indigo7"] = "Indigo7";
-    UDExPromoTileColorSheme["Indigo8"] = "Indigo8";
-    UDExPromoTileColorSheme["Indigo9"] = "Indigo9";
-    UDExPromoTileColorSheme["Indigo10"] = "Indigo10";
-})(UDExPromoTileColorSheme || (UDExPromoTileColorSheme = {}));
+export var UDExPromoTileColorScheme;
+(function (UDExPromoTileColorScheme) {
+    UDExPromoTileColorScheme["Grey1"] = "Grey1";
+    UDExPromoTileColorScheme["Grey2"] = "Grey2";
+    UDExPromoTileColorScheme["Grey7"] = "Grey7";
+    UDExPromoTileColorScheme["Grey8"] = "Grey8";
+    UDExPromoTileColorScheme["Grey9"] = "Grey9";
+    UDExPromoTileColorScheme["Grey10"] = "Grey10";
+    UDExPromoTileColorScheme["Blue1"] = "Blue1";
+    UDExPromoTileColorScheme["Blue2"] = "Blue2";
+    UDExPromoTileColorScheme["Blue7"] = "Blue7";
+    UDExPromoTileColorScheme["Blue8"] = "Blue8";
+    UDExPromoTileColorScheme["Blue9"] = "Blue9";
+    UDExPromoTileColorScheme["Blue10"] = "Blue10";
+    UDExPromoTileColorScheme["Teal1"] = "Teal1";
+    UDExPromoTileColorScheme["Teal2"] = "Teal2";
+    UDExPromoTileColorScheme["Teal7"] = "Teal7";
+    UDExPromoTileColorScheme["Teal8"] = "Teal8";
+    UDExPromoTileColorScheme["Teal9"] = "Teal9";
+    UDExPromoTileColorScheme["Teal10"] = "Teal10";
+    UDExPromoTileColorScheme["Green1"] = "Green1";
+    UDExPromoTileColorScheme["Green2"] = "Green2";
+    UDExPromoTileColorScheme["Green7"] = "Green7";
+    UDExPromoTileColorScheme["Green8"] = "Green8";
+    UDExPromoTileColorScheme["Green9"] = "Green9";
+    UDExPromoTileColorScheme["Green10"] = "Green10";
+    UDExPromoTileColorScheme["Mango1"] = "Mango1";
+    UDExPromoTileColorScheme["Mango2"] = "Mango2";
+    UDExPromoTileColorScheme["Mango7"] = "Mango7";
+    UDExPromoTileColorScheme["Mango8"] = "Mango8";
+    UDExPromoTileColorScheme["Mango9"] = "Mango9";
+    UDExPromoTileColorScheme["Mango10"] = "Mango10";
+    UDExPromoTileColorScheme["Red1"] = "Red1";
+    UDExPromoTileColorScheme["Red2"] = "Red2";
+    UDExPromoTileColorScheme["Red7"] = "Red7";
+    UDExPromoTileColorScheme["Red8"] = "Red8";
+    UDExPromoTileColorScheme["Red9"] = "Red9";
+    UDExPromoTileColorScheme["Red10"] = "Red10";
+    UDExPromoTileColorScheme["Raspberry1"] = "Raspberry1";
+    UDExPromoTileColorScheme["Raspberry2"] = "Raspberry2";
+    UDExPromoTileColorScheme["Raspberry7"] = "Raspberry7";
+    UDExPromoTileColorScheme["Raspberry8"] = "Raspberry8";
+    UDExPromoTileColorScheme["Raspberry9"] = "Raspberry9";
+    UDExPromoTileColorScheme["Raspberry10"] = "Raspberry10";
+    UDExPromoTileColorScheme["Pink1"] = "Pink1";
+    UDExPromoTileColorScheme["Pink2"] = "Pink2";
+    UDExPromoTileColorScheme["Pink7"] = "Pink7";
+    UDExPromoTileColorScheme["Pink8"] = "Pink8";
+    UDExPromoTileColorScheme["Pink9"] = "Pink9";
+    UDExPromoTileColorScheme["Pink10"] = "Pink10";
+    UDExPromoTileColorScheme["Indigo1"] = "Indigo1";
+    UDExPromoTileColorScheme["Indigo2"] = "Indigo2";
+    UDExPromoTileColorScheme["Indigo7"] = "Indigo7";
+    UDExPromoTileColorScheme["Indigo8"] = "Indigo8";
+    UDExPromoTileColorScheme["Indigo9"] = "Indigo9";
+    UDExPromoTileColorScheme["Indigo10"] = "Indigo10";
+})(UDExPromoTileColorScheme || (UDExPromoTileColorScheme = {}));
 export var UDExPromoTileMode;
 (function (UDExPromoTileMode) {
     UDExPromoTileMode["dark"] = "dark";

package/dist/types/PromoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoTile.js","sourceRoot":"","sources":["../../src/types/PromoTile.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,uBAuDX;AAvDD,WAAY,uBAAuB;IACjC,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,4CAAiB,CAAA;IACjB,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,4CAAiB,CAAA;IACjB,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,8CAAmB,CAAA;IACnB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,4CAAiB,CAAA;IACjB,8CAAmB,CAAA;IACnB,wCAAa,CAAA;IACb,wCAAa,CAAA;IACb,wCAAa,CAAA;IACb,wCAAa,CAAA;IACb,wCAAa,CAAA;IACb,0CAAe,CAAA;IACf,oDAAyB,CAAA;IACzB,oDAAyB,CAAA;IACzB,oDAAyB,CAAA;IACzB,oDAAyB,CAAA;IACzB,oDAAyB,CAAA;IACzB,sDAA2B,CAAA;IAC3B,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,0CAAe,CAAA;IACf,4CAAiB,CAAA;IACjB,8CAAmB,CAAA;IACnB,8CAAmB,CAAA;IACnB,8CAAmB,CAAA;IACnB,8CAAmB,CAAA;IACnB,8CAAmB,CAAA;IACnB,gDAAqB,CAAA;AACvB,CAAC,EAvDW,uBAAuB,KAAvB,uBAAuB,QAuDlC;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B","sourcesContent":["export enum UDExPromoTileColorSheme {\n  Grey1 = \"Grey1\",\n  Grey2 = \"Grey2\",\n  Grey7 = \"Grey7\",\n  Grey8 = \"Grey8\",\n  Grey9 = \"Grey9\",\n  Grey10 = \"Grey10\",\n  Blue1 = \"Blue1\",\n  Blue2 = \"Blue2\",\n  Blue7 = \"Blue7\",\n  Blue8 = \"Blue8\",\n  Blue9 = \"Blue9\",\n  Blue10 = \"Blue10\",\n  Teal1 = \"Teal1\",\n  Teal2 = \"Teal2\",\n  Teal7 = \"Teal7\",\n  Teal8 = \"Teal8\",\n  Teal9 = \"Teal9\",\n  Teal10 = \"Teal10\",\n  Green1 = \"Green1\",\n  Green2 = \"Green2\",\n  Green7 = \"Green7\",\n  Green8 = \"Green8\",\n  Green9 = \"Green9\",\n  Green10 = \"Green10\",\n  Mango1 = \"Mango1\",\n  Mango2 = \"Mango2\",\n  Mango7 = \"Mango7\",\n  Mango8 = \"Mango8\",\n  Mango9 = \"Mango9\",\n  Mango10 = \"Mango10\",\n  Red1 = \"Red1\",\n  Red2 = \"Red2\",\n  Red7 = \"Red7\",\n  Red8 = \"Red8\",\n  Red9 = \"Red9\",\n  Red10 = \"Red10\",\n  Raspberry1 = \"Raspberry1\",\n  Raspberry2 = \"Raspberry2\",\n  Raspberry7 = \"Raspberry7\",\n  Raspberry8 = \"Raspberry8\",\n  Raspberry9 = \"Raspberry9\",\n  Raspberry10 = \"Raspberry10\",\n  Pink1 = \"Pink1\",\n  Pink2 = \"Pink2\",\n  Pink7 = \"Pink7\",\n  Pink8 = \"Pink8\",\n  Pink9 = \"Pink9\",\n  Pink10 = \"Pink10\",\n  Indigo1 = \"Indigo1\",\n  Indigo2 = \"Indigo2\",\n  Indigo7 = \"Indigo7\",\n  Indigo8 = \"Indigo8\",\n  Indigo9 = \"Indigo9\",\n  Indigo10 = \"Indigo10\",\n}\n\nexport enum UDExPromoTileMode {\n  dark = \"dark\",\n  light = \"light\"\n}\n"]}
+{"version":3,"file":"PromoTile.js","sourceRoot":"","sources":["../../src/types/PromoTile.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,wBAuDX;AAvDD,WAAY,wBAAwB;IAClC,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,6CAAiB,CAAA;IACjB,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,6CAAiB,CAAA;IACjB,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,+CAAmB,CAAA;IACnB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,6CAAiB,CAAA;IACjB,+CAAmB,CAAA;IACnB,yCAAa,CAAA;IACb,yCAAa,CAAA;IACb,yCAAa,CAAA;IACb,yCAAa,CAAA;IACb,yCAAa,CAAA;IACb,2CAAe,CAAA;IACf,qDAAyB,CAAA;IACzB,qDAAyB,CAAA;IACzB,qDAAyB,CAAA;IACzB,qDAAyB,CAAA;IACzB,qDAAyB,CAAA;IACzB,uDAA2B,CAAA;IAC3B,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,2CAAe,CAAA;IACf,6CAAiB,CAAA;IACjB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,+CAAmB,CAAA;IACnB,iDAAqB,CAAA;AACvB,CAAC,EAvDW,wBAAwB,KAAxB,wBAAwB,QAuDnC;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B","sourcesContent":["export enum UDExPromoTileColorScheme {\n  Grey1 = \"Grey1\",\n  Grey2 = \"Grey2\",\n  Grey7 = \"Grey7\",\n  Grey8 = \"Grey8\",\n  Grey9 = \"Grey9\",\n  Grey10 = \"Grey10\",\n  Blue1 = \"Blue1\",\n  Blue2 = \"Blue2\",\n  Blue7 = \"Blue7\",\n  Blue8 = \"Blue8\",\n  Blue9 = \"Blue9\",\n  Blue10 = \"Blue10\",\n  Teal1 = \"Teal1\",\n  Teal2 = \"Teal2\",\n  Teal7 = \"Teal7\",\n  Teal8 = \"Teal8\",\n  Teal9 = \"Teal9\",\n  Teal10 = \"Teal10\",\n  Green1 = \"Green1\",\n  Green2 = \"Green2\",\n  Green7 = \"Green7\",\n  Green8 = \"Green8\",\n  Green9 = \"Green9\",\n  Green10 = \"Green10\",\n  Mango1 = \"Mango1\",\n  Mango2 = \"Mango2\",\n  Mango7 = \"Mango7\",\n  Mango8 = \"Mango8\",\n  Mango9 = \"Mango9\",\n  Mango10 = \"Mango10\",\n  Red1 = \"Red1\",\n  Red2 = \"Red2\",\n  Red7 = \"Red7\",\n  Red8 = \"Red8\",\n  Red9 = \"Red9\",\n  Red10 = \"Red10\",\n  Raspberry1 = \"Raspberry1\",\n  Raspberry2 = \"Raspberry2\",\n  Raspberry7 = \"Raspberry7\",\n  Raspberry8 = \"Raspberry8\",\n  Raspberry9 = \"Raspberry9\",\n  Raspberry10 = \"Raspberry10\",\n  Pink1 = \"Pink1\",\n  Pink2 = \"Pink2\",\n  Pink7 = \"Pink7\",\n  Pink8 = \"Pink8\",\n  Pink9 = \"Pink9\",\n  Pink10 = \"Pink10\",\n  Indigo1 = \"Indigo1\",\n  Indigo2 = \"Indigo2\",\n  Indigo7 = \"Indigo7\",\n  Indigo8 = \"Indigo8\",\n  Indigo9 = \"Indigo9\",\n  Indigo10 = \"Indigo10\",\n}\n\nexport enum UDExPromoTileMode {\n  dark = \"dark\",\n  light = \"light\"\n}\n"]}

package/dist/vscode.html-custom-data.json

@@ -1180,7 +1180,7 @@
     },
     {
       "name": "udex-hero-banner",
-      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
+      "description": "\n\n\n---\n\n\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
       "attributes": [
         {
           "name": "background-image",
@@ -2508,7 +2508,7 @@
         {
           "name": "color-scheme",
           "description": "Defines the color scheme of the Promo Tile.",
-          "values": [{ "name": "UDExPromoTileColorSheme" }]
+          "values": [{ "name": "UDExPromoTileColorScheme" }]
         },
         {
           "name": "accessible-name",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2709,7 +2709,7 @@
         },
         {
           "name": "udex-hero-banner",
-          "description": "\n---\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
+          "description": "\n---\n\n\n### **Slots:**\n - **content** - Slot for primary content.\n- **mediaContent** - Slot for image or video content.\n- **additionalContent** - Slot for any additional content.\n- **backgroundPicture** - Slot background picture override.",
           "doc-url": "",
           "attributes": [
             {
@@ -2750,6 +2750,10 @@
           ],
           "slots": [
             { "name": "content", "description": "Slot for primary content." },
+            {
+              "name": "mediaContent",
+              "description": "Slot for image or video content."
+            },
             {
               "name": "additionalContent",
               "description": "Slot for any additional content."
@@ -5395,52 +5399,61 @@
             {
               "name": "orientation",
               "description": "Defines the orientation of the Promo Tile component.",
-              "value": { "type": "\"Vertical\" | \"Horizontal\"" }
+              "value": {
+                "type": "\"Vertical\" | \"Horizontal\"",
+                "default": "\"Vertical\""
+              }
             },
             {
               "name": "icon",
               "description": "Defines the UI5 icon name in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "image-label",
               "description": "Defines the image aria label and alt in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "logo-url",
               "description": "Defines the logo URL in the pictogram section.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "header",
               "description": "Defines the header text of the promo tile.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "eyebrow",
               "description": "Defines the eyebrow text of the promo tile.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "button",
               "description": "Defines the CTA button label",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
               "name": "button-design",
               "description": "Defines the CTA button design",
-              "value": { "type": "UDExButtonDesign | undefined" }
+              "value": {
+                "type": "UDExButtonDesign | undefined",
+                "default": "\"\""
+              }
             },
             {
               "name": "color-scheme",
               "description": "Defines the color scheme of the Promo Tile.",
-              "value": { "type": "UDExPromoTileColorSheme | undefined" }
+              "value": {
+                "type": "UDExPromoTileColorScheme | undefined",
+                "default": "\"\""
+              }
             },
             {
               "name": "accessible-name",
               "description": "Defines the accessible name of the component.",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "string | undefined", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -5500,7 +5513,7 @@
               {
                 "name": "color-scheme",
                 "description": "Defines the color scheme of the Promo Tile.",
-                "value": { "type": "UDExPromoTileColorSheme | undefined" }
+                "value": { "type": "UDExPromoTileColorScheme | undefined" }
               },
               {
                 "name": "accessible-name",

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/EventRibbonTemplate.tsx

@@ -3,6 +3,7 @@ import type UDExEventRibbon from "./EventRibbon.js";
 
 export default function EventRibbonTemplate(this: UDExEventRibbon) {
   const rootClass = "udex-event-ribbon";
+  const logoClass = this.customEventLogo?.length ? `${rootClass}__logo-img ${rootClass}__custom-logo` : `${rootClass}__logo-img`;
   const { text, target, url } = this._eventLink;
   return (
     <a
@@ -17,7 +18,7 @@ export default function EventRibbonTemplate(this: UDExEventRibbon) {
       href={url}
       title={text}>
       <div class={`${rootClass}__logo`}>
-        <img class={`${rootClass}__logo-img`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+        <img class={`${logoClass}`} src={this.eventLogoPath} alt={this.eventLogoAlt}/>
       </div>
       {this.eventText && <p class={`${rootClass}__text`}>{this.eventText}</p>}
       <div class={`${rootClass}__link-container`}>

package/src/HeroBanner.hbs

@@ -33,6 +33,9 @@
     </div>
   {{/if}}
 </div>
+{{#if hasMediaContent}}
+  <slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>
+{{/if}}
 
 {{#*inline "hero-content"}}
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>

package/src/HeroBanner.ts

@@ -111,6 +111,15 @@ class UDExHeroBanner extends UI5Element {
   @slot()
     content?: Array<HTMLElement>;
 
+  /**
+   * Slot for image or video content.
+   *
+   * @slot
+   * @public
+   */
+  @slot()
+    mediaContent?: Array<HTMLElement>;
+
   /**
    * Slot for any additional content.
    *
@@ -157,6 +166,11 @@ class UDExHeroBanner extends UI5Element {
     }
     return heroBannerClasses.join(" ");
   }
+
+  get hasMediaContent() {
+    return !!this.mediaContent?.length;
+  }
+
   get hasAdditionalContent() {
     return !!this.additionalContent?.length;
   }

package/src/PromoTile.ts

@@ -15,7 +15,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
-import { UDExPromoTileColorSheme, UDExPromoTileMode } from "./types/PromoTile.js";
+import { UDExPromoTileColorScheme, UDExPromoTileMode } from "./types/PromoTile.js";
 
 // Styles
 import PromoTileCss from "./generated/themes/PromoTile.css.js";
@@ -74,18 +74,16 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the orientation of the Promo Tile component.
    *
-   * @type {string}
-   * @defaultvalue "Vertical"
+   * @default "Vertical"
    * @public
    */
-  @property({ type: String })
+  @property()
     orientation: `${UDExOrientation}` = UDExOrientation.Vertical;
 
   /**
    * Defines the UI5 icon name in the pictogram section.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -94,8 +92,7 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the image aria label and alt in the pictogram section.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -104,8 +101,7 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the logo URL in the pictogram section.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -114,8 +110,7 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the header text of the promo tile.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -124,8 +119,7 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the eyebrow text of the promo tile.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -134,8 +128,7 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the CTA button label
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -144,28 +137,25 @@ class UDExPromoTile extends UI5Element {
   /**
    * Defines the CTA button design
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
-  @property({ type: String })
+  @property()
     buttonDesign?: UDExButtonDesign;
 
   /**
    * Defines the color scheme of the Promo Tile.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
-  @property({ type: String })
-    colorScheme?: UDExPromoTileColorSheme;
+  @property()
+    colorScheme?: UDExPromoTileColorScheme;
 
   /**
    * Defines the accessible name of the component.
    *
-   * @type {string}
-   * @defaultvalue ""
+   * @default ""
    * @public
    */
   @property({ type: String })
@@ -247,7 +237,7 @@ class UDExPromoTile extends UI5Element {
 
   checkEyebrowColor(colorScheme: string): string {
     const number = this.getColorNumber(colorScheme);
-    let color: string = UDExPromoTileColorSheme.Blue8;
+    let color: string = UDExPromoTileColorScheme.Blue8;
 
     if (number === 7) {
       color = "NeutralWhite";

package/src/Search.ts

@@ -896,7 +896,7 @@ class UDExSearch extends UI5Element {
     if (Suggestion) {
       this.Suggestion = new Suggestion(this);
     } else {
-      throw new Error("You have to import '@sapudex/webcomponents/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
+      throw new Error("You have to import '@sapudex/web-components/dist/features/SearchSuggestionsPopover.js' module to use udex-search suggestions");
     }
   }
 

package/src/generated/templates/HeroBannerTemplate.lit.ts

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type HeroBanner from "../../HeroBanner.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div> `;}
+function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>${ this.hasMediaContent ? block8.call(this, context, tags, suffix) : undefined } `;}
 function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.mediaButtonIconName)}"></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><ui5-icon name="${ifDefined(this.mediaButtonIconName)}"></ui5-icon></button></div>`;}
 function block2 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
 function block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-hero-banner__container">${ this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
@@ -13,6 +13,7 @@ function block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix:
 function block5 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBackgroundImage ? block6.call(this, context, tags, suffix) : undefined }`;}
 function block6 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
 function block7 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`;}
+function block8 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>`;}
 
 function template(this: HeroBanner) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/themes/EventRibbon.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);--udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);--udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);--udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);--udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);--udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);--udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);--udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);--udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);--udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);--udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);--udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);--udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);--udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);--udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);--udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);--udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);--udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);--udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);--udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);--udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);--udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);--udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);--udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);--udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);--udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);--udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);--udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);--udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);--udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);--udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);--udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);--udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);--udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);--udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);--udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);--udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);--udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);--udex-event-ribbon-background-color: transparent;--udex-event-ribbon-hover-background-color: transparent;--udex-event-ribbon-margin-xl: 84px;--udex-event-ribbon-margin-m-l: 72px;--udex-event-ribbon-margin-s: 48px;--udex-event-ribbon-margin-xs: 24px;--udex-event-ribbon-logo-height: auto;--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{box-sizing:border-box;position:relative;overflow:hidden;text-decoration:none;background-color:var(--udex-event-ribbon-background-color);color:var(--udex-event-ribbon-light-text-color);height:70px;font-family:var(--sapFontFamily, sans-serif);border-radius:var(--udexSpacer12, 12px);padding-block:var(--udexSpacer12, 12px);padding-inline:var(--udexSpacer36, 36px);margin-block:var(--udexSpacer56, 56px) 84px;margin-inline:auto;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));display:flex;align-items:center;gap:var(--udexSpacer32, 32px)}.udex-event-ribbon__container-with-background-image{background-image:var(--udex-event-ribbon-background-image);background-blend-mode:multiply;background-position:center;background-size:100%;background-repeat:no-repeat;transition:background ease-out .3s}.udex-event-ribbon__container:focus,.udex-event-ribbon__container:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:2px}.udex-event-ribbon__container:hover{background-color:var(--udex-event-ribbon-hover-background-color)}.udex-event-ribbon__container-with-background-image:hover{background-size:112%}:host([mode="dark"]) .udex-event-ribbon__container{color:var(--udex-event-ribbon-dark-text-color)}.udex-event-ribbon__logo{position:relative;display:flex;justify-content:flex-end;width:24.8%}:host([event-logo="sapphire"]){--udex-event-ribbon-logo-height: 40px}:host([event-logo="connect"]){--udex-event-ribbon-logo-height: 18px}:host([event-logo="now"]){--udex-event-ribbon-logo-height: 24px}:host([event-logo="teched"]){--udex-event-ribbon-logo-height: 21px}.udex-event-ribbon__logo-img{max-height:42px;height:var(--udex-event-ribbon-logo-height);max-width:100%}:host([mode="dark"]) .udex-event-ribbon__logo-img{filter:brightness(0) invert(1)}.udex-event-ribbon__text{position:inherit;margin:0;padding:0;font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyBodyLineHeight);width:51%;max-height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.udex-event-ribbon__link-container{position:inherit;display:flex;align-items:center;gap:var(--udexSpacer8, 8px);width:21%}.udex-event-ribbon__link-text{line-height:var(--udexTypographyBodyLineHeight);font-size:var(--udexTypographyBodyXSFontSize);white-space:nowrap}[ui5-icon]{width:20px;height:20px;flex-shrink:0;color:inherit}@media (max-width: 1599px){.udex-event-ribbon__container{max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l))}}@media (max-width: 1279px){.udex-event-ribbon__container{margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);gap:var(--udexSpacer24, 24px);padding-inline:var(--udexSpacer24, 24px)}}@media (max-width: 979px){.udex-event-ribbon__container{flex-direction:column;height:fit-content;padding-block:var(--udexSpacer16, 16px);gap:var(--udexSpacer8, 8px);align-items:flex-start;margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-s))}.udex-event-ribbon__link-container,.udex-event-ribbon__text{width:100%}.udex-event-ribbon__logo{justify-content:flex-start;width:100%}.udex-event-ribbon__link-text{white-space:normal}}@media (max-width: 639px){.udex-event-ribbon__container{padding-inline:var(--udexSpacer16, 16px);margin-block:var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xs))}}
+export default `:host{--udex-event-ribbon-dark-text-color: var(--udexColorNeutralWhite);--udex-event-ribbon-light-text-color: var(--udexColorNeutralBlack);--udex-event-ribbon-light-grey1-default-background-color: var(--udexColorGrey1);--udex-event-ribbon-light-grey1-hover-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-default-background-color: var(--udexColorGrey2);--udex-event-ribbon-light-grey2-hover-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-default-background-color: var(--udexColorGrey3);--udex-event-ribbon-light-grey3-hover-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-default-background-color: var(--udexColorGrey4);--udex-event-ribbon-light-grey4-hover-background-color: var(--udexColorGrey5);--udex-event-ribbon-light-blue1-default-background-color: var(--udexColorBlue1);--udex-event-ribbon-light-blue1-hover-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-default-background-color: var(--udexColorBlue2);--udex-event-ribbon-light-blue2-hover-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-default-background-color: var(--udexColorBlue3);--udex-event-ribbon-light-blue3-hover-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-default-background-color: var(--udexColorBlue4);--udex-event-ribbon-light-blue4-hover-background-color: var(--udexColorBlue5);--udex-event-ribbon-light-teal1-default-background-color: var(--udexColorTeal1);--udex-event-ribbon-light-teal1-hover-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-default-background-color: var(--udexColorTeal2);--udex-event-ribbon-light-teal2-hover-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-default-background-color: var(--udexColorTeal3);--udex-event-ribbon-light-teal3-hover-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-default-background-color: var(--udexColorTeal4);--udex-event-ribbon-light-teal4-hover-background-color: var(--udexColorTeal5);--udex-event-ribbon-light-green1-default-background-color: var(--udexColorGreen1);--udex-event-ribbon-light-green1-hover-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-default-background-color: var(--udexColorGreen2);--udex-event-ribbon-light-green2-hover-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-default-background-color: var(--udexColorGreen3);--udex-event-ribbon-light-green3-hover-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-default-background-color: var(--udexColorGreen4);--udex-event-ribbon-light-green4-hover-background-color: var(--udexColorGreen5);--udex-event-ribbon-light-mango1-default-background-color: var(--udexColorMango1);--udex-event-ribbon-light-mango1-hover-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-default-background-color: var(--udexColorMango2);--udex-event-ribbon-light-mango2-hover-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-default-background-color: var(--udexColorMango3);--udex-event-ribbon-light-mango3-hover-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-default-background-color: var(--udexColorMango4);--udex-event-ribbon-light-mango4-hover-background-color: var(--udexColorMango5);--udex-event-ribbon-light-red1-default-background-color: var(--udexColorRed1);--udex-event-ribbon-light-red1-hover-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-default-background-color: var(--udexColorRed2);--udex-event-ribbon-light-red2-hover-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-default-background-color: var(--udexColorRed3);--udex-event-ribbon-light-red3-hover-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-default-background-color: var(--udexColorRed4);--udex-event-ribbon-light-red4-hover-background-color: var(--udexColorRed5);--udex-event-ribbon-light-raspberry1-default-background-color: var(--udexColorRaspberry1);--udex-event-ribbon-light-raspberry1-hover-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-default-background-color: var(--udexColorRaspberry2);--udex-event-ribbon-light-raspberry2-hover-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-default-background-color: var(--udexColorRaspberry3);--udex-event-ribbon-light-raspberry3-hover-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-default-background-color: var(--udexColorRaspberry4);--udex-event-ribbon-light-raspberry4-hover-background-color: var(--udexColorRaspberry5);--udex-event-ribbon-light-pink1-default-background-color: var(--udexColorPink1);--udex-event-ribbon-light-pink1-hover-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-default-background-color: var(--udexColorPink2);--udex-event-ribbon-light-pink2-hover-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-default-background-color: var(--udexColorPink3);--udex-event-ribbon-light-pink3-hover-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-default-background-color: var(--udexColorPink4);--udex-event-ribbon-light-pink4-hover-background-color: var(--udexColorPink5);--udex-event-ribbon-light-indigo1-default-background-color: var(--udexColorIndigo1);--udex-event-ribbon-light-indigo1-hover-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-default-background-color: var(--udexColorIndigo2);--udex-event-ribbon-light-indigo2-hover-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-default-background-color: var(--udexColorIndigo3);--udex-event-ribbon-light-indigo3-hover-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-default-background-color: var(--udexColorIndigo4);--udex-event-ribbon-light-indigo4-hover-background-color: var(--udexColorIndigo5);--udex-event-ribbon-dark-grey1-default-background-color: var(--udexColorGrey7);--udex-event-ribbon-dark-grey1-hover-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-default-background-color: var(--udexColorGrey8);--udex-event-ribbon-dark-grey2-hover-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-default-background-color: var(--udexColorGrey9);--udex-event-ribbon-dark-grey3-hover-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-default-background-color: var(--udexColorGrey10);--udex-event-ribbon-dark-grey4-hover-background-color: var(--udexColorGrey11);--udex-event-ribbon-dark-blue1-default-background-color: var(--udexColorBlue7);--udex-event-ribbon-dark-blue1-hover-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-default-background-color: var(--udexColorBlue8);--udex-event-ribbon-dark-blue2-hover-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-default-background-color: var(--udexColorBlue9);--udex-event-ribbon-dark-blue3-hover-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-default-background-color: var(--udexColorBlue10);--udex-event-ribbon-dark-blue4-hover-background-color: var(--udexColorBlue11);--udex-event-ribbon-dark-teal1-default-background-color: var(--udexColorTeal7);--udex-event-ribbon-dark-teal1-hover-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-default-background-color: var(--udexColorTeal8);--udex-event-ribbon-dark-teal2-hover-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-default-background-color: var(--udexColorTeal9);--udex-event-ribbon-dark-teal3-hover-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-default-background-color: var(--udexColorTeal10);--udex-event-ribbon-dark-teal4-hover-background-color: var(--udexColorTeal11);--udex-event-ribbon-dark-green1-default-background-color: var(--udexColorGreen7);--udex-event-ribbon-dark-green1-hover-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-default-background-color: var(--udexColorGreen8);--udex-event-ribbon-dark-green2-hover-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-default-background-color: var(--udexColorGreen9);--udex-event-ribbon-dark-green3-hover-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-default-background-color: var(--udexColorGreen10);--udex-event-ribbon-dark-green4-hover-background-color: var(--udexColorGreen11);--udex-event-ribbon-dark-mango1-default-background-color: var(--udexColorMango7);--udex-event-ribbon-dark-mango1-hover-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-default-background-color: var(--udexColorMango8);--udex-event-ribbon-dark-mango2-hover-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-default-background-color: var(--udexColorMango9);--udex-event-ribbon-dark-mango3-hover-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-default-background-color: var(--udexColorMango10);--udex-event-ribbon-dark-mango4-hover-background-color: var(--udexColorMango11);--udex-event-ribbon-dark-red1-default-background-color: var(--udexColorRed7);--udex-event-ribbon-dark-red1-hover-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-default-background-color: var(--udexColorRed8);--udex-event-ribbon-dark-red2-hover-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-default-background-color: var(--udexColorRed9);--udex-event-ribbon-dark-red3-hover-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-default-background-color: var(--udexColorRed10);--udex-event-ribbon-dark-red4-hover-background-color: var(--udexColorRed11);--udex-event-ribbon-dark-raspberry1-default-background-color: var(--udexColorRaspberry7);--udex-event-ribbon-dark-raspberry1-hover-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-default-background-color: var(--udexColorRaspberry8);--udex-event-ribbon-dark-raspberry2-hover-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-default-background-color: var(--udexColorRaspberry9);--udex-event-ribbon-dark-raspberry3-hover-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-default-background-color: var(--udexColorRaspberry10);--udex-event-ribbon-dark-raspberry4-hover-background-color: var(--udexColorRaspberry11);--udex-event-ribbon-dark-pink1-default-background-color: var(--udexColorPink7);--udex-event-ribbon-dark-pink1-hover-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-default-background-color: var(--udexColorPink8);--udex-event-ribbon-dark-pink2-hover-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-default-background-color: var(--udexColorPink9);--udex-event-ribbon-dark-pink3-hover-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-default-background-color: var(--udexColorPink10);--udex-event-ribbon-dark-pink4-hover-background-color: var(--udexColorPink11);--udex-event-ribbon-dark-indigo1-default-background-color: var(--udexColorIndigo7);--udex-event-ribbon-dark-indigo1-hover-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-default-background-color: var(--udexColorIndigo8);--udex-event-ribbon-dark-indigo2-hover-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-default-background-color: var(--udexColorIndigo9);--udex-event-ribbon-dark-indigo3-hover-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-default-background-color: var(--udexColorIndigo10);--udex-event-ribbon-dark-indigo4-hover-background-color: var(--udexColorIndigo11);--udex-event-ribbon-background-color: transparent;--udex-event-ribbon-hover-background-color: transparent;--udex-event-ribbon-background-blend-mode: multiply;--udex-event-ribbon-background-position: center;--udex-event-ribbon-background-size: 100%;--udex-event-ribbon-hover-background-size: 112%;--udex-event-ribbon-margin-xl: 84px;--udex-event-ribbon-margin-m-l: 72px;--udex-event-ribbon-margin-s: 48px;--udex-event-ribbon-margin-xs: 24px;--udex-event-ribbon-logo-height: auto;--udex-event-ribbon-custom-logo-dark-filter: none;--udex-event-ribbon-logo-dark-filter: brightness(0) invert(1);--udex-event-ribbon-column-width: calc((100vw - (2 * var(--udex-event-ribbon-margin-xl)) - (11 * var(--udexGridXLGutters))) / 12)}.udex-event-ribbon__container{box-sizing:border-box;position:relative;overflow:hidden;text-decoration:none;background-color:var(--udex-event-ribbon-background-color);color:var(--udex-event-ribbon-light-text-color);height:70px;font-family:var(--sapFontFamily, sans-serif);border-radius:var(--udexSpacer12, 12px);padding-block:var(--udexSpacer12, 12px);padding-inline:var(--udexSpacer36, 36px);margin-block:var(--udexSpacer56, 56px) 84px;margin-inline:auto;max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xl));display:flex;align-items:center;gap:var(--udexSpacer32, 32px)}.udex-event-ribbon__container-with-background-image{background-image:var(--udex-event-ribbon-background-image);background-blend-mode:var(--udex-event-ribbon-background-blend-mode);background-position:var(--udex-event-ribbon-background-position);background-size:var(--udex-event-ribbon-background-size);background-repeat:no-repeat;transition:background ease-out .3s}.udex-event-ribbon__container:focus,.udex-event-ribbon__container:focus-visible{outline:solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);outline-offset:2px}.udex-event-ribbon__container:hover{background-color:var(--udex-event-ribbon-hover-background-color)}.udex-event-ribbon__container-with-background-image:hover{background-size:var(--udex-event-ribbon-hover-background-size)}:host([mode="dark"]) .udex-event-ribbon__container{color:var(--udex-event-ribbon-dark-text-color)}.udex-event-ribbon__logo{position:relative;display:flex;justify-content:flex-end;width:24.8%}:host([event-logo="sapphire"]){--udex-event-ribbon-logo-height: 40px}:host([event-logo="connect"]){--udex-event-ribbon-logo-height: 18px}:host([event-logo="now"]){--udex-event-ribbon-logo-height: 24px}:host([event-logo="teched"]){--udex-event-ribbon-logo-height: 21px}.udex-event-ribbon__logo-img{max-height:42px;height:var(--udex-event-ribbon-logo-height);max-width:100%}:host([mode="dark"]) .udex-event-ribbon__custom-logo{filter:var(--udex-event-ribbon-custom-logo-dark-filter)}:host([mode="dark"]) .udex-event-ribbon__logo-img:not(.udex-event-ribbon__custom-logo){filter:var(--udex-event-ribbon-logo-dark-filter)}.udex-event-ribbon__text{position:inherit;margin:0;padding:0;font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyBodyLineHeight);width:51%;max-height:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}.udex-event-ribbon__link-container{position:inherit;display:flex;align-items:center;gap:var(--udexSpacer8, 8px);width:21%}.udex-event-ribbon__link-text{line-height:var(--udexTypographyBodyLineHeight);font-size:var(--udexTypographyBodyXSFontSize);white-space:nowrap}[ui5-icon]{width:20px;height:20px;flex-shrink:0;color:inherit}@media (max-width: 1599px){.udex-event-ribbon__container{max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-m-l))}}@media (max-width: 1279px){.udex-event-ribbon__container{margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);gap:var(--udexSpacer24, 24px);padding-inline:var(--udexSpacer24, 24px)}}@media (max-width: 979px){.udex-event-ribbon__container{flex-direction:column;height:fit-content;padding-block:var(--udexSpacer16, 16px);gap:var(--udexSpacer8, 8px);align-items:flex-start;margin-block:var(--udexSpacer40, 40px) var(--udexSpacer64, 64px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-s))}.udex-event-ribbon__link-container,.udex-event-ribbon__text{width:100%}.udex-event-ribbon__logo{justify-content:flex-start;width:100%}.udex-event-ribbon__link-text{white-space:normal}}@media (max-width: 639px){.udex-event-ribbon__container{padding-inline:var(--udexSpacer16, 16px);margin-block:var(--udexSpacer32, 32px) var(--udexSpacer56, 56px);max-width:calc(100vw - 2 * var(--udex-event-ribbon-margin-xs))}}
 `

package/src/generated/themes/Link.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 24px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: var(--sapFontSize);--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:20px}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px)}.ui5-link-end-icon{margin-inline-start:-20px;padding-inline-start:var(--udexSpacer4, 4px)}
+export default `:host{--udex-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 16px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: 16px;--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:20px}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{display:inline-flex;align-items:center;overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px)}.ui5-link-end-icon{margin-inline-start:-20px;padding-inline-start:var(--udexSpacer4, 4px)}
 `