npm - @inera/ids-design - Versions diffs - 5.5.1 → 6.0.0 - Mend

@inera/ids-design 5.5.1 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/components/alert/alert.css CHANGED Viewed

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -23,150 +26,31 @@
 }
 .ids-alert {
-  color: var(--IDS-ALERT--INFO__COLOR);
-  background-color: var(--IDS-ALERT--INFO__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--INFO__BORDER-COLOR);
-  padding: 1rem;
+  color: var(--IDS-ALERT__COLOR);
   border-radius: var(--IDS-BORDER-RADIUS);
   border-style: solid;
   border-width: 0.063rem;
   font-size: 1rem;
-  line-height: 1.625rem;
+  line-height: 1.5rem;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-}
-.ids-alert .ids-alert__state-icon {
-  width: 1.875rem;
-  max-width: 1.875rem;
-}
-.ids-alert .ids-alert__content {
-  display: block;
-  margin-top: 0.5rem;
+  padding: 1rem;
 }
 .ids-alert .ids-alert__header {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
 }
-.ids-alert .ids-alert__icon_and_text {
+.ids-alert .ids-alert__header .ids-alert__button {
   display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  flex-grow: 1;
-}
-.ids-alert.ids-alert--collapsed .ids-alert__content {
-  display: none;
-}
-.ids-alert.ids-alert--attention {
-  background-color: var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--ATTENTION__BORDER-COLOR);
-}
-.ids-alert.ids-alert--success {
-  background-color: var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--SUCCESS__BORDER-COLOR);
-}
-.ids-alert.ids-alert--error {
-  background-color: var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--ERROR__BORDER-COLOR);
-}
-.ids-alert.ids-alert--compact {
-  display: block;
-}
-.ids-alert.ids-alert--compact .ids-alert__content {
-  margin-top: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-}
-.ids-alert.ids-alert--compact .ids-alert__icon_and_text {
-  display: block;
-}
-.ids-alert.ids-alert--compact .ids-alert__content__icon,
-.ids-alert.ids-alert--compact .ids-alert__state-icon {
-  float: left;
-  margin-right: 1rem;
-  width: 1.75rem;
-  height: 1.75rem;
-  min-width: 1.75rem;
-  min-height: 1.75rem;
-  max-width: 1.75rem;
-  max-height: 1.75rem;
-}
-@media (min-width: 1024px) {
-  .ids-alert.ids-alert--compact .ids-alert__icon_and_text {
-    margin-top: 0.375rem;
-    margin-bottom: -0.375rem;
-  }
-  .ids-alert.ids-alert--compact .ids-alert__content__icon,
-  .ids-alert.ids-alert--compact .ids-alert__state-icon {
-    margin-top: -0.375rem;
-    margin-right: 1rem;
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    max-width: 3rem;
-    max-height: 3rem;
-  }
-}
-.ids-alert.ids-alert--ribbon {
-  display: block;
-  padding: 0.5rem 0.75rem;
+  align-items: center;
 }
-.ids-alert.ids-alert--ribbon .ids-alert__content {
-  margin-top: 0;
+.ids-alert .ids-alert__icon_and_text {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-wrap: wrap;
   gap: 1rem;
-}
-.ids-alert.ids-alert--ribbon .ids-alert__icon_and_text {
   flex-grow: 1;
-  display: block;
-}
-.ids-alert.ids-alert--ribbon .ids-alert__content__icon {
-  float: left;
-  margin-right: 1rem;
-  margin-top: -0.0625rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
-}
-.ids-alert.ids-alert--ribbon .ids-alert__button {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.ids-alert.ids-alert--ribbon .ids-alert__button .ids-alert__close {
-  height: 1rem;
-  width: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-@media (min-width: 640px) {
-  .ids-alert.ids-alert--ribbon {
-    padding: 1rem;
-  }
-  .ids-alert.ids-alert--ribbon .ids-alert__icon_and_text {
-    flex-grow: 1;
-    display: flex;
-  }
-  .ids-alert.ids-alert--ribbon .ids-alert__content__icon {
-    margin-right: 0;
-  }
-}
-.ids-alert .ids-alert__headline *,
-.ids-alert .ids-alert__headline ::slotted(*) {
-  margin: 0 !important;
-  font-size: 1.17rem !important;
-  line-height: 1.875rem !important;
-  font-weight: var(--IDS-ALERT__HEADLINE-FONT-WEIGHT) !important;
-  font-family: var(--IDS-ALERT__HEADLINE-FONT-FAMILY) !important;
 }
 .ids-alert .ids-alert__expand {
   min-width: 1.5rem;
@@ -183,21 +67,30 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.ids-alert .ids-alert__expand .ids-icon {
-  display: flex;
+  height: 1.5rem;
   width: 1.5rem;
+  display: flex;
   align-items: center;
-  height: 1.5rem;
   justify-content: center;
+  position: relative;
 }
 .ids-alert .ids-alert__expand:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-alert .ids-alert__expand:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e906";
+  font-size: 1.25rem;
+  color: var(--IDS-FONT-COLOR);
+}
+.ids-alert .ids-alert__expand.ids-alert__expand--expanded:before {
+  content: "\e909";
+}
 .ids-alert .ids-alert__close {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -213,13 +106,232 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  width: 1.5rem;
+  height: 1.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
 .ids-alert .ids-alert__close:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-alert .ids-alert__close:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e916";
+  font-size: 1.25rem;
+  color: var(--IDS-ICON__COLOR);
+}
+.ids-alert .ids-alert__close:hover:before, .ids-alert .ids-alert__close:focus:before, .ids-alert .ids-alert__close:active:before {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
+.ids-alert .ids-alert__content {
+  display: block;
+  margin-top: 0.5rem;
+}
+.ids-alert .ids-alert__state-icon,
+.ids-alert .ids-alert__content-icon {
+  width: 1.875rem;
+  height: 1.875rem;
+  position: relative;
+}
+.ids-alert .ids-alert__headline *,
+.ids-alert .ids-alert__headline ::slotted(*) {
+  margin: 0 !important;
+  font-size: 1.17rem !important;
+  line-height: 1.875rem !important;
+  font-weight: var(--IDS-ALERT__HEADLINE-FONT-WEIGHT) !important;
+  font-family: var(--IDS-ALERT__HEADLINE-FONT-FAMILY) !important;
+}
 @media (min-width: 640px) {
   .ids-alert {
     padding: 1.875rem;
   }
+}
+.ids-alert.ids-alert--info {
+  background-color: var(--IDS-ALERT--INFO__BACKGROUND-COLOR);
+  border-color: var(--IDS-ALERT--INFO__BORDER-COLOR);
+}
+.ids-alert.ids-alert--info .ids-alert__state-icon:before,
+.ids-alert.ids-alert--info .ids-alert__content-icon:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e90c";
+  font-size: 1.875rem;
+  color: var(--IDS-ALERT--INFO__ICON-COLOR);
+}
+.ids-alert.ids-alert--attention {
+  background-color: var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);
+  border-color: var(--IDS-ALERT--ATTENTION__BORDER-COLOR);
+}
+.ids-alert.ids-alert--attention .ids-alert__state-icon:before,
+.ids-alert.ids-alert--attention .ids-alert__content-icon:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e905";
+  font-size: 1.875rem;
+  color: var(--IDS-ALERT--ATTENTION__ICON-COLOR);
+}
+.ids-alert.ids-alert--success {
+  background-color: var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);
+  border-color: var(--IDS-ALERT--SUCCESS__BORDER-COLOR);
+}
+.ids-alert.ids-alert--success .ids-alert__state-icon:before,
+.ids-alert.ids-alert--success .ids-alert__content-icon:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e912";
+  font-size: 1.875rem;
+  color: var(--IDS-ALERT--SUCCESS__ICON-COLOR);
+}
+.ids-alert.ids-alert--error {
+  background-color: var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);
+  border-color: var(--IDS-ALERT--ERROR__BORDER-COLOR);
+}
+.ids-alert.ids-alert--error .ids-alert__state-icon:before,
+.ids-alert.ids-alert--error .ids-alert__content-icon:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e913";
+  font-size: 1.875rem;
+  color: var(--IDS-ALERT--ERROR__ICON-COLOR);
+}
+.ids-alert.ids-alert--collapsed .ids-alert__content {
+  display: none;
+}
+.ids-alert.ids-alert--compact {
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.ids-alert.ids-alert--compact .ids-alert__content {
+  display: flex;
+  flex-grow: 1;
+  margin-top: 0;
+  margin-right: 1rem;
+  align-items: flex-start;
+}
+.ids-alert.ids-alert--compact .ids-alert__content-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  margin-bottom: -7px;
+}
+.ids-alert.ids-alert--compact .ids-alert__content-icon::before {
+  font-size: 1.75rem;
+}
+.ids-alert.ids-alert--compact .ids-alert__content-text {
+  display: block;
+  line-height: 1.5rem;
+}
+@media (min-width: 640px) {
+  .ids-alert.ids-alert--compact {
+    padding: 1.875rem;
+  }
+}
+@media (min-width: 1024px) {
+  .ids-alert.ids-alert--compact .ids-alert__content-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: -0.5rem;
+    margin-bottom: 0;
+    margin-right: 1rem;
+  }
+  .ids-alert.ids-alert--compact .ids-alert__content-icon::before {
+    font-size: 2.5rem;
+  }
+  .ids-alert.ids-alert--compact .ids-alert__content-text {
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: flex-start;
+    line-height: 1.75rem;
+  }
+}
+.ids-alert.ids-alert--ribbon {
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content {
+  display: flex;
+  flex-grow: 1;
+  margin-top: 0;
+  margin-right: 1rem;
+  align-items: flex-start;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  margin-bottom: -7px;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
+  font-size: 1.75rem;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content-text {
+  display: block;
+  line-height: 1.5rem;
+}
+@media (min-width: 640px) {
+  .ids-alert.ids-alert--ribbon {
+    padding: 1rem;
+  }
+}
+@media (min-width: 1024px) {
+  .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: -0.5rem;
+    margin-bottom: 0;
+    margin-right: 1rem;
+  }
+  .ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
+    font-size: 2.5rem;
+  }
+  .ids-alert.ids-alert--ribbon .ids-alert__content-text {
+    margin-top: 0.5rem;
+    display: flex;
+    align-items: flex-start;
+    line-height: 1.75rem;
+  }
+}
+.ids-alert.ids-alert--ribbon .ids-alert__close:before {
+  content: "\e934";
+  font-size: 1rem;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
+  font-size: 1.75rem;
+}
+@media (min-width: 1024px) {
+  .ids-alert.ids-alert--ribbon .ids-alert__content-text {
+    line-height: 1.75rem;
+    margin-top: 0;
+  }
+  .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-top: 0;
+  }
+  .ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
+    font-size: 1.75rem;
+  }
 }

package/components/alert-global/alert-global-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-alert-global{align-items:center;background-color:var(--IDS-ALERT-GLOBAL__BACKGROUND-COLOR);border:none;box-shadow:0 0 .625rem rgba(0,0,0,.3);color:var(--IDS-ALERT-GLOBAL__COLOR);display:block;font-size:1rem;line-height:1.625rem;padding:1.875rem;position:relative;z-index:1}.ids-alert-global .ids-alert-global__inner{margin-left:auto;margin-right:auto;max-width:var(--IDS__MAX-WIDTH)}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{height:1.25rem;width:1.25rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__header{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline{display:flex;text-align:left}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline *,.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline ::slotted(*){align-items:center!important;color:var(--IDS-ALERT-GLOBAL-HEADLINE-COLOR);display:flex!important;font-family:var(--IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY)!important;font-size:1.125rem!important;font-weight:var(--IDS-ALERT__HEADLINE-FONT-WEIGHT)!important;line-height:1.75rem!important;margin:0!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand{align-items:center;background:none;border:none;color:inherit;color:var(--IDS-COLOR-NEUTRAL-20);cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-BODY__FONT-FAMILY);font-size:var(--IDS-BODY__FONT-SIZE);font-style:normal;font-weight:400;justify-content:center;justify-self:end;letter-spacing:0;line-height:var(--IDS-BODY__LINE-HEIGHT);min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand .ids-icon{align-items:center;display:flex;height:1.5rem;justify-content:center;width:1.5rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand-text{display:none;margin-right:1rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__content{margin-top:.75rem}@media (min-width:1024px){.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{height:1.875rem;width:1.875rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand-text{display:block}}.ids-alert-global .ids-alert-global__sub-content{margin-top:.75rem}.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__content,.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__sub-content{display:none}@media (max-width:1024px){.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon{display:none}}.ids-alert-global.ids-alert-global--agent{background-color:var(--IDS-ALERT-GLOBAL--AGENT__BACKGROUND-COLOR)!important;color:var(--IDS-ALERT-GLOBAL--AGENT__COLOR)!important}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-alert-global{align-items:center;background-color:var(--IDS-ALERT-GLOBAL__BACKGROUND-COLOR);border:none;box-shadow:0 0 .625rem rgba(0,0,0,.3);color:var(--IDS-ALERT-GLOBAL__COLOR);display:block;font-size:1rem;line-height:1.625rem;padding:1.875rem;position:relative;z-index:1}.ids-alert-global .ids-alert-global__inner{margin-left:auto;margin-right:auto;max-width:var(--IDS__MAX-WIDTH)}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent{padding-left:2.75rem;position:relative}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent:before{content:\"\\e91f\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.75rem;left:0;pointer-events:none;position:absolute;top:0}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{font-size:1.75rem;height:1.75rem;width:1.75rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__header{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline{display:flex;text-align:left}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline *,.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline ::slotted(*){align-items:center!important;color:var(--IDS-ALERT-GLOBAL-HEADLINE-COLOR);display:flex!important;font-family:var(--IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY)!important;font-size:1.125rem!important;font-weight:var(--IDS-ALERT__HEADLINE-FONT-WEIGHT)!important;line-height:1.75rem!important;margin:0!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;justify-content:center;justify-self:end;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0 1.625rem 0 0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:before{content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;pointer-events:none;position:absolute;right:.125rem;top:50%;transform:translateY(-50%)}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button.ids-alert-global__button--expanded:before{content:\"\\e909\"}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text{display:none;margin-right:1rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__content{margin-top:.75rem}@media (min-width:1024px){.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{font-size:1.875rem;height:1.875rem;width:1.875rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text{display:block}}.ids-alert-global .ids-alert-global__sub-content{margin-top:.75rem}.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__content,.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__sub-content{display:none}@media (max-width:1024px){.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent{padding-left:0!important}.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent:before{display:none!important}.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon{display:none}}.ids-alert-global.ids-alert-global--agent{background-color:var(--IDS-ALERT-GLOBAL--AGENT__BACKGROUND-COLOR)!important;color:var(--IDS-ALERT-GLOBAL--AGENT__COLOR)!important}";
 var alertGlobalLit = css`${unsafeCSS(css_248z)}`;

package/components/alert-global/alert-global.css CHANGED Viewed

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -48,9 +51,25 @@
   align-items: center;
   gap: 1.25rem;
 }
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent {
+  padding-left: 2.75rem;
+  position: relative;
+}
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e91f";
+  font-size: 1.75rem;
+  left: 0;
+  top: 0;
+}
 .ids-alert-global .ids-alert-global__inner .ids-alert-global__icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 1.75rem;
 }
 .ids-alert-global .ids-alert-global__inner .ids-alert-global__header {
   display: flex;
@@ -74,7 +93,7 @@
   display: flex !important;
   align-items: center !important;
 }
-.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand {
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__button {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -89,33 +108,38 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-style: normal;
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--IDS-BODY__FONT-FAMILY);
-  font-size: var(--IDS-BODY__FONT-SIZE);
-  line-height: var(--IDS-BODY__LINE-HEIGHT);
-  font-weight: 400;
-  letter-spacing: 0;
   justify-self: end;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  position: relative;
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   min-height: 1.5rem;
   min-width: 1.5rem;
+  padding-right: 1.625rem;
 }
-.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand:focus {
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand .ids-icon {
-  display: flex;
-  width: 1.5rem;
-  align-items: center;
-  height: 1.5rem;
-  justify-content: center;
-}
-.ids-alert-global .ids-alert-global__inner .ids-alert-global__expand-text {
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e906";
+  font-size: 1.25rem;
+  top: 50%;
+  right: 0.125rem;
+  transform: translateY(-50%);
+}
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__button.ids-alert-global__button--expanded:before {
+  content: "\e909";
+}
+.ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text {
   margin-right: 1rem;
   display: none;
 }
@@ -126,8 +150,9 @@
   .ids-alert-global .ids-alert-global__inner .ids-alert-global__icon {
     width: 1.875rem;
     height: 1.875rem;
+    font-size: 1.875rem;
   }
-  .ids-alert-global .ids-alert-global__inner .ids-alert-global__expand-text {
+  .ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text {
     display: block;
   }
 }
@@ -141,6 +166,12 @@
   display: none;
 }
 @media (max-width: 1024px) {
+  .ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent {
+    padding-left: 0 !important;
+  }
+  .ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent:before {
+    display: none !important;
+  }
   .ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon {
     display: none;
   }

package/components/badge/badge-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-badge{align-items:center;border-radius:.313rem;box-sizing:border-box;color:var(--IDS-BADGE__COLOR);display:inline-flex;font-size:.75rem;font-weight:400;height:1.5rem;justify-items:center;padding:.188rem .438rem}.ids-badge .ids-badge__icon{display:inline-block;margin-right:.5rem}.ids-badge.ids-badge--primary{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--PRIMARY__BORDER);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--neutral{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE--NEUTRAL__BORDER)}.ids-badge.ids-badge--info{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE--INFO__BORDER)}.ids-badge.ids-badge--attention{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE--ATTENTION__BORDER)}.ids-badge.ids-badge--success{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE--SUCCESS__BORDER)}.ids-badge.ids-badge--error{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE--ERROR__BORDER)}.ids-badge.ids-badge--secondary{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--SECONDARY__BORDER)}@media (min-width:1024px){.ids-badge{font-size:.875em;height:1.75rem;padding:.375rem .5rem}}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-badge{align-items:center;border-radius:.313rem;box-sizing:border-box;color:var(--IDS-BADGE__COLOR);display:inline-flex;font-size:.75rem;font-weight:400;justify-items:center;line-height:1rem;padding:.188rem .438rem}.ids-badge .ids-badge__icon{display:flex;margin-right:.5rem}.ids-badge.ids-badge--primary{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--PRIMARY__BORDER);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--neutral{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE--NEUTRAL__BORDER)}.ids-badge.ids-badge--info{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE--INFO__BORDER)}.ids-badge.ids-badge--attention{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE--ATTENTION__BORDER)}.ids-badge.ids-badge--success{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE--SUCCESS__BORDER)}.ids-badge.ids-badge--error{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE--ERROR__BORDER)}.ids-badge.ids-badge--secondary{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE--SECONDARY__BORDER)}@media (min-width:1024px){.ids-badge{font-size:.875em;padding:.3125rem .4375rem}}";
 var badgeLit = css`${unsafeCSS(css_248z)}`;

package/components/badge/badge.css CHANGED Viewed

@@ -11,7 +11,7 @@
 }
 .ids-badge {
-  height: 1.5rem;
+  line-height: 1rem;
   box-sizing: border-box;
   padding: 0.188rem 0.438rem;
   display: inline-flex;
@@ -23,8 +23,8 @@
   border-radius: 0.313rem;
 }
 .ids-badge .ids-badge__icon {
-  display: inline-block;
   margin-right: 0.5rem;
+  display: flex;
 }
 .ids-badge.ids-badge--primary {
   background-color: var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);
@@ -57,8 +57,7 @@
 }
 @media (min-width: 1024px) {
   .ids-badge {
-    height: 1.75rem;
-    padding: 0.375rem 0.5rem;
+    padding: 0.3125rem 0.4375rem;
     font-size: 0.875em;
   }
 }

package/components/box-link/box-link-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link{align-items:flex-start;background-color:var(--IDS-LINK--BOX__BACKGROUND-COLOR);border-radius:.3125rem;box-sizing:border-box;display:flex;font-size:1rem;line-height:1.5rem;position:relative}.ids-box-link .ids-box-link__link{cursor:pointer;display:flex;flex-grow:1;padding:.25rem}.ids-box-link .ids-box-link__link .ids-icon{display:block!important}.ids-box-link .ids-box-link__link ::slotted(a),.ids-box-link .ids-box-link__link a{align-items:flex-start;border-radius:.3125rem;color:var(--IDS-LINK--COLORPRESET-1__COLOR);display:inline-flex;flex-grow:1;font-size:1rem;gap:.5rem;line-height:1.5rem;padding:.5rem .25rem .5rem .75rem;text-decoration:none;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-box-link .ids-box-link__link:hover ::slotted(a),.ids-box-link .ids-box-link__link:hover a{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);text-decoration:underline}.ids-box-link .ids-box-link__button{display:flex;padding:.25rem .5rem .25rem .25rem}.ids-box-link .ids-box-link__button ::slotted(button),.ids-box-link .ids-box-link__button button{background:none;border:0;border-radius:.3125rem;cursor:pointer;padding:.5rem}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link{align-items:flex-start;background-color:var(--IDS-LINK--BOX__BACKGROUND-COLOR);border-radius:.3125rem;box-sizing:border-box;display:flex;font-size:1rem;line-height:1.5rem;position:relative}.ids-box-link .ids-box-link__link{cursor:pointer;display:block;flex-grow:1}.ids-box-link .ids-box-link__link:focus ::slotted(a),.ids-box-link .ids-box-link__link:focus a,.ids-box-link .ids-box-link__link:hover ::slotted(a),.ids-box-link .ids-box-link__link:hover a{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);text-decoration:underline!important}.ids-box-link ::slotted(a),.ids-box-link a{border-radius:.3125rem;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);display:block;padding:.75rem;text-decoration:none}.ids-box-link ::slotted(a):focus,.ids-box-link a:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.125rem!important}.ids-box-link ::slotted(a.ids-box-link--old-icon),.ids-box-link a.ids-box-link--old-icon{display:flex;gap:.5rem}.ids-box-link .ids-icon{align-items:center;display:inline-flex;height:1.5rem;justify-content:center}.ids-box-link .ids-box-link__button{color:var(--IDS-ICON__COLOR);display:flex;flex-shrink:0;height:3rem;position:relative;width:3rem}.ids-box-link .ids-box-link__button .ids-contains-icon,.ids-box-link .ids-box-link__button .ids-icon,.ids-box-link .ids-box-link__button ::slotted([slot=old-icon]){display:block!important;position:absolute!important;right:1rem;top:.75rem}.ids-box-link .ids-box-link__button ::slotted(button),.ids-box-link .ids-box-link__button button{background:none;border:0;border-radius:.3125rem;color:var(--IDS-ICON__COLOR);cursor:pointer;font-size:1.5rem!important;height:100%!important;outline-offset:-.125rem!important;padding:0;position:absolute!important;right:0;top:0;width:100%!important}.ids-box-link .ids-box-link__button ::slotted(button):before,.ids-box-link .ids-box-link__button button:before{right:1rem!important;top:.75rem!important}.ids-box-link .ids-box-link__button:hover{color:var(--IDS-ICON--ACTIVE-COLOR)}";
 var boxLinkLit = css`${unsafeCSS(css_248z)}`;