@inera/ids-design 8.2.1 → 9.0.0

package/components/alert/alert-shadow.css

@@ -0,0 +1,63 @@
+.ids--light, .ids--dark {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
+  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
+}
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
+  --IDS-PAGE-LIST__LETTER-SPACING: 0;
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
+  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
+}
+.ids--light.ids--dark, .ids--dark.ids--dark {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
+}
+.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-alert .ids-alert__headline ::slotted(*) {
+  margin-top: 0.125rem !important;
+  margin: 0.125rem 0 0 0 !important;
+  font-style: normal;
+  color: var(--IDS-ALERT--INFO__COLOR);
+  font-family: var(--ids-font-family-heading);
+  font-size: var(--ids-font-size-heading-s);
+  line-height: var(--ids-font-line-height-heading-s);
+  letter-spacing: var(--ids-font-letter-spacing-heading-s);
+  font-weight: var(--ids-font-weight-heading-s);
+}

package/components/alert/alert.css

@@ -53,7 +53,7 @@
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -78,11 +78,11 @@
 .ids-alert .ids-alert__header {
   display: flex;
   flex-grow: 1;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 .ids-alert .ids-alert__icon_and_text {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
   flex-grow: 1;
 }
 .ids-alert .ids-alert__close {
@@ -119,7 +119,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e916";
@@ -138,7 +137,7 @@
   color: var(--ids-color-surface-text-on-default);
   font-family: var(--ids-font-family-body-text);
   font-size: var(--ids-font-size-body-text);
-  line-height: var(--ids-line-height-body-text);
+  line-height: var(--ids-font-line-height-body-text);
   font-weight: var(--ids-font-weight-body-text);
   letter-spacing: 0;
 }
@@ -149,8 +148,7 @@
   min-width: 1.75rem;
   position: relative;
 }
-.ids-alert .ids-alert__headline *,
-.ids-alert .ids-alert__headline ::slotted(*) {
+.ids-alert .ids-alert__headline * {
   margin-top: 0.125rem !important;
   margin: 0.125rem 0 0 0 !important;
   font-style: normal;
@@ -188,7 +186,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e90c";
@@ -206,7 +203,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e905";
@@ -224,7 +220,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e912";
@@ -242,7 +237,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e913";
@@ -287,7 +281,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e936";
@@ -342,7 +335,6 @@
 .ids-alert.ids-alert--compact .ids-alert__content {
   display: inline;
   flex-grow: 1;
-  margin-right: 1rem;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -352,6 +344,9 @@
     align-items: flex-start;
   }
 }
+.ids-alert.ids-alert--compact.ids-alert--dismissible .ids-alert__content {
+  margin-right: 0.5rem;
+}
 .ids-alert.ids-alert--compact .ids-alert__content-icon {
   position: relative;
   width: 1.75rem;
@@ -371,14 +366,13 @@
   line-height: 1.5rem;
   position: relative;
   top: -0.125rem;
+  margin-left: -0.25rem;
 }
 @media (min-width: 1024px) {
-  .ids-alert.ids-alert--compact .ids-alert__content-icon {
-    margin-right: 0.75rem;
-  }
   .ids-alert.ids-alert--compact .ids-alert__content-text {
     display: block;
     top: -0.0625rem;
+    margin-left: 0;
   }
 }
 .ids-alert.ids-alert--ribbon {
@@ -389,7 +383,6 @@
 .ids-alert.ids-alert--ribbon .ids-alert__content {
   display: inline;
   flex-grow: 1;
-  margin-right: 1rem;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -399,6 +392,9 @@
     align-items: flex-start;
   }
 }
+.ids-alert.ids-alert--ribbon.ids-alert--dismissible .ids-alert__content {
+  margin-right: 0.5rem;
+}
 .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
   position: relative;
   width: 1.75rem;
@@ -418,16 +414,22 @@
   line-height: 1.5rem;
   position: relative;
   top: -0.125rem;
+  margin-left: -0.25rem;
 }
 @media (min-width: 1024px) {
-  .ids-alert.ids-alert--ribbon .ids-alert__content-icon {
-    margin-right: 0.75rem;
-  }
   .ids-alert.ids-alert--ribbon .ids-alert__content-text {
     display: block;
     top: -0.0625rem;
+    margin-left: 0;
   }
 }
+.ids-alert.ids-alert--ribbon .ids-alert__content-icon {
+  width: 1.5rem !important;
+  margin-right: 0.5rem !important;
+}
+.ids-alert.ids-alert--ribbon .ids-alert__content-icon::before {
+  font-size: 1.5rem;
+}
 .ids-alert.ids-alert--ribbon .ids-alert__close {
   width: 1rem;
   height: 1rem;
@@ -436,4 +438,9 @@
 .ids-alert.ids-alert--ribbon .ids-alert__close:before {
   content: "\e934";
   font-size: 1rem;
+}
+@media (max-width: 1024px) {
+  .ids-alert.ids-alert--ribbon {
+    padding: var(--IDS-ALERT__PADDING-RIBBON-MOBILE);
+  }
 }

package/components/badge/badge-lit.js

@@ -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{display:inline}.ids-badge .ids-badge__inner{align-items:center;border-radius:.313rem;box-sizing:border-box;display:inline-flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:400;justify-items:center;line-height:1rem;padding:var(--IDS-BADGE__PADDING-DESKTOP)}.ids-badge .ids-badge__icon{display:flex;margin-right:.5rem}.ids-badge.ids-badge--primary .ids-badge__inner{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--PRIMARY__BORDER-COLOR);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--secondary .ids-badge__inner{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SECONDARY__BORDER-COLOR);color:var(--IDS-BADGE--SECONDARY__COLOR)}.ids-badge.ids-badge--neutral .ids-badge__inner{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--NEUTRAL__BORDER-COLOR);color:var(--IDS-BADGE--NEUTRAL__COLOR)}.ids-badge.ids-badge--info .ids-badge__inner{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--INFO__BORDER-COLOR);color:var(--IDS-BADGE--INFO__COLOR)}.ids-badge.ids-badge--attention .ids-badge__inner{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ATTENTION__BORDER-COLOR);color:var(--IDS-BADGE--ATTENTION__COLOR)}.ids-badge.ids-badge--success .ids-badge__inner{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SUCCESS__BORDER-COLOR);color:var(--IDS-BADGE--SUCCESS__COLOR)}.ids-badge.ids-badge--error .ids-badge__inner{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ERROR__BORDER-COLOR);color:var(--IDS-BADGE--ERROR__COLOR)}@media (min-width:1024px){.ids-badge .ids-badge__inner{font-size:.875rem;padding:var(--IDS-BADGE__PADDING-MOBILE)}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-badge{display:inline}.ids-badge .ids-badge__inner{align-items:center;border-radius:.313rem;box-sizing:border-box;display:inline-flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-weight:400;justify-items:center;line-height:1rem;padding:var(--IDS-BADGE__PADDING-DESKTOP)}.ids-badge .ids-badge__icon{display:flex;margin-right:.5rem}.ids-badge.ids-badge--primary .ids-badge__inner{background-color:var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--PRIMARY__BORDER-COLOR);color:var(--IDS-BADGE--PRIMARY__COLOR)}.ids-badge.ids-badge--secondary .ids-badge__inner{background-color:var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SECONDARY__BORDER-COLOR);color:var(--IDS-BADGE--SECONDARY__COLOR)}.ids-badge.ids-badge--neutral .ids-badge__inner{background-color:var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--NEUTRAL__BORDER-COLOR);color:var(--IDS-BADGE--NEUTRAL__COLOR)}.ids-badge.ids-badge--info .ids-badge__inner{background-color:var(--IDS-BADGE--INFO__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--INFO__BORDER-COLOR);color:var(--IDS-BADGE--INFO__COLOR)}.ids-badge.ids-badge--attention .ids-badge__inner{background-color:var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ATTENTION__BORDER-COLOR);color:var(--IDS-BADGE--ATTENTION__COLOR)}.ids-badge.ids-badge--success .ids-badge__inner{background-color:var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--SUCCESS__BORDER-COLOR);color:var(--IDS-BADGE--SUCCESS__COLOR)}.ids-badge.ids-badge--error .ids-badge__inner{background-color:var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);border:var(--IDS-BADGE__BORDER-THICKNESS) solid var(--IDS-BADGE--ERROR__BORDER-COLOR);color:var(--IDS-BADGE--ERROR__COLOR)}@media (min-width:1024px){.ids-badge .ids-badge__inner{font-size:.875rem;padding:var(--IDS-BADGE__PADDING-MOBILE)}}";
 
 var badgeLit = css`${unsafeCSS(css_248z)}`;
 

package/components/badge/badge.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }

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

@@ -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 .ids-box-link__inner{align-items:stretch;background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);border:.0625rem solid var(--IDS-BOX-LINK__BORDER-COLOR);border-radius:.25rem;box-sizing:border-box;display:flex;font-size:1rem;height:auto;line-height:1.5rem;position:relative;z-index:0}.ids-box-link .ids-box-link__inner .ids-box-link__link{cursor:pointer;display:block;flex:1}.ids-box-link .ids-box-link__inner ::slotted(a):focus-visible,.ids-box-link .ids-box-link__inner a:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:0!important}.ids-box-link .ids-box-link__inner ::slotted(a),.ids-box-link .ids-box-link__inner a{border:0;border-radius:.1875rem;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);gap:.5rem;padding:.75rem 1rem;position:relative;text-decoration:none;z-index:2}.ids-box-link .ids-box-link__inner ::slotted(a:hover),.ids-box-link .ids-box-link__inner a:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR);color:var(--IDS-BOX-LINK__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem!important}.ids-box-link .ids-box-link__inner ::slotted(a:focus-visible),.ids-box-link .ids-box-link__inner a:focus-visible{border-radius:.1875rem!important}.ids-box-link .ids-box-link__inner ::slotted(a:active),.ids-box-link .ids-box-link__inner a:active{background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK--ACTIVE__BORDER-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner .ids-box-link__button{align-items:stretch;border:0;border-radius:.3125rem;display:flex;flex-shrink:0;width:3rem}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button),.ids-box-link .ids-box-link__inner .ids-box-link__button button{background:none;background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);border:0;border-bottom-right-radius:.25rem;border-top-right-radius:.25rem;box-sizing:border-box;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-size:1.25rem!important;height:100%!important;padding:0;position:relative!important;width:100%!important}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):before,.ids-box-link .ids-box-link__inner .ids-box-link__button button:before{right:.875rem!important;top:50%!important;transform:translateY(-50%)}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):after,.ids-box-link .ids-box-link__inner .ids-box-link__button button:after{background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);bottom:0;content:\"\";display:block;left:0;position:absolute;top:0;width:1px}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:focus-visible),.ids-box-link .ids-box-link__inner .ids-box-link__button button:focus-visible{border-radius:.25rem!important;z-index:3}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:hover),.ids-box-link .ids-box-link__inner .ids-box-link__button button:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:active),.ids-box-link .ids-box-link__inner .ids-box-link__button button:active{background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner .ids-box-link__button:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR)!important}.ids-box-link .ids-box-link__inner:hover{border-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link .ids-box-link__inner:hover ::slotted(button):after,.ids-box-link .ids-box-link__inner:hover button:after{background-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link.ids-box-link--has-button .ids-box-link__inner ::slotted(a),.ids-box-link.ids-box-link--has-button .ids-box-link__inner a{border-bottom-right-radius:0;border-top-right-radius:0}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link .ids-box-link__inner{align-items:stretch;background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);border:.0625rem solid var(--IDS-BOX-LINK__BORDER-COLOR);border-radius:.25rem;box-sizing:border-box;display:flex;font-size:1rem;height:auto;line-height:1.5rem;position:relative;z-index:0}.ids-box-link .ids-box-link__inner .ids-box-link__link{cursor:pointer;display:block;flex:1}.ids-box-link .ids-box-link__inner a:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:0!important}.ids-box-link .ids-box-link__inner a{border:0;border-radius:.1875rem;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);gap:.5rem;padding:.75rem 1rem;position:relative;text-decoration:none;z-index:2}.ids-box-link .ids-box-link__inner a:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR);color:var(--IDS-BOX-LINK__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem!important}.ids-box-link .ids-box-link__inner a:focus-visible{border-radius:.1875rem!important}.ids-box-link .ids-box-link__inner a:active{background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK--ACTIVE__BORDER-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner .ids-box-link__button{align-items:stretch;border:0;border-radius:.3125rem;display:flex;flex-shrink:0;width:3rem}.ids-box-link .ids-box-link__inner .ids-box-link__button button{background:none;background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);border:0;border-bottom-right-radius:.25rem;border-top-right-radius:.25rem;box-sizing:border-box;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-size:1.25rem!important;height:100%!important;padding:0;position:relative!important;width:100%;width:100%!important}.ids-box-link .ids-box-link__inner .ids-box-link__button button:before{right:.875rem!important;top:50%!important;transform:translateY(-50%)}.ids-box-link .ids-box-link__inner .ids-box-link__button button:after{background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);bottom:0;content:\"\";display:block;left:0;position:absolute;top:0;width:1px}.ids-box-link .ids-box-link__inner .ids-box-link__button button:focus-visible{border-radius:.25rem!important;z-index:3}.ids-box-link .ids-box-link__inner .ids-box-link__button button:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link .ids-box-link__inner .ids-box-link__button button:active{background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner .ids-box-link__button:hover{background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR)!important}.ids-box-link .ids-box-link__inner:hover{border-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link .ids-box-link__inner:hover button:after{background-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link.ids-box-link--has-button .ids-box-link__inner a{border-bottom-right-radius:0;border-top-right-radius:0}";
 
 var boxLinkLit = css`${unsafeCSS(css_248z)}`;
 

package/components/box-link/box-link-shadow-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-box-link .ids-box-link__inner ::slotted(a):focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:0!important}.ids-box-link .ids-box-link__inner ::slotted(a){border:0;border-radius:.1875rem;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);gap:.5rem;padding:.75rem 1rem;position:relative;text-decoration:none;z-index:2}.ids-box-link .ids-box-link__inner ::slotted(a:hover){background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR);color:var(--IDS-BOX-LINK__HOVER-COLOR);text-decoration:underline!important;text-underline-offset:.125rem!important}.ids-box-link .ids-box-link__inner ::slotted(a:focus-visible){border-radius:.1875rem!important}.ids-box-link .ids-box-link__inner ::slotted(a:active){background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK--ACTIVE__BORDER-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button){background:none;background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);border:0;border-bottom-right-radius:.25rem;border-top-right-radius:.25rem;box-sizing:border-box;color:var(--IDS-BOX-LINK__COLOR);cursor:pointer;display:flex;font-size:1.25rem!important;height:100%!important;padding:0;position:relative!important;width:100%;width:100%!important}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):before{right:.875rem!important;top:50%!important;transform:translateY(-50%)}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button):after{background-color:var(--IDS-BOX-LINK__BACKGROUND-COLOR);bottom:0;content:\"\";display:block;left:0;position:absolute;top:0;width:1px}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:focus-visible){border-radius:.25rem!important;z-index:3}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:hover){background-color:var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR)!important;border-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:active){background-color:var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR)!important;color:var(--IDS-BOX-LINK--ACTIVE-COLOR)!important}.ids-box-link .ids-box-link__inner:hover ::slotted(button):after{background-color:var(--IDS-BOX-LINK__HOVER-BORDER-COLOR)}.ids-box-link.ids-box-link--has-button .ids-box-link__inner ::slotted(a){border-bottom-right-radius:0;border-top-right-radius:0}";
+
+var boxLinkShadowLit = css`${unsafeCSS(css_248z)}`;
+
+export { boxLinkShadowLit as default };

package/components/box-link/box-link-shadow.css

@@ -0,0 +1,109 @@
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-box-link .ids-box-link__inner ::slotted(a):focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0 !important;
+}
+.ids-box-link .ids-box-link__inner ::slotted(a) {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  cursor: pointer;
+  color: var(--IDS-BOX-LINK__COLOR);
+  display: flex;
+  padding: 0.75rem 1rem;
+  gap: 0.5rem;
+  border: 0;
+  border-radius: 0.1875rem;
+  text-decoration: none;
+  position: relative;
+  z-index: 2;
+}
+.ids-box-link .ids-box-link__inner ::slotted(a:hover) {
+  color: var(--IDS-BOX-LINK__HOVER-COLOR);
+  background-color: var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem !important;
+}
+.ids-box-link .ids-box-link__inner ::slotted(a:focus-visible) {
+  border-radius: 0.1875rem !important;
+}
+.ids-box-link .ids-box-link__inner ::slotted(a:active) {
+  color: var(--IDS-BOX-LINK--ACTIVE-COLOR) !important;
+  border-color: var(--IDS-BOX-LINK--ACTIVE__BORDER-COLOR) !important;
+  background-color: var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR) !important;
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button) {
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+  box-sizing: border-box;
+  background: none;
+  width: 100%;
+  color: var(--IDS-BOX-LINK__COLOR);
+  background-color: var(--IDS-BOX-LINK__BACKGROUND-COLOR);
+  font-size: 1.25rem !important;
+  position: relative !important;
+  height: 100% !important;
+  width: 100% !important;
+  border: 0;
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button)::before {
+  top: 50% !important;
+  right: 0.875rem !important;
+  transform: translateY(-50%);
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button)::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--IDS-BOX-LINK__BACKGROUND-COLOR);
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:focus-visible) {
+  border-radius: 0.25rem !important;
+  z-index: 3;
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:hover) {
+  border-color: var(--IDS-BOX-LINK__HOVER-BORDER-COLOR);
+  background-color: var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR) !important;
+}
+.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:active) {
+  color: var(--IDS-BOX-LINK--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR) !important;
+}
+.ids-box-link .ids-box-link__inner:hover ::slotted(button):after {
+  background-color: var(--IDS-BOX-LINK__HOVER-BORDER-COLOR);
+}
+.ids-box-link.ids-box-link--has-button .ids-box-link__inner ::slotted(a) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/components/box-link/box-link.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -43,13 +43,12 @@
   display: block;
   flex: 1;
 }
-.ids-box-link .ids-box-link__inner a:focus-visible,
-.ids-box-link .ids-box-link__inner ::slotted(a):focus-visible {
+.ids-box-link .ids-box-link__inner a:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: 0 !important;
 }
-.ids-box-link .ids-box-link__inner a,
-.ids-box-link .ids-box-link__inner ::slotted(a) {
+.ids-box-link .ids-box-link__inner a {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   cursor: pointer;
   color: var(--IDS-BOX-LINK__COLOR);
   display: flex;
@@ -58,23 +57,19 @@
   border: 0;
   border-radius: 0.1875rem;
   text-decoration: none;
-  font-family: var(--IDS-FONT-FAMILY-BASE);
   position: relative;
   z-index: 2;
 }
-.ids-box-link .ids-box-link__inner a:hover,
-.ids-box-link .ids-box-link__inner ::slotted(a:hover) {
+.ids-box-link .ids-box-link__inner a:hover {
   color: var(--IDS-BOX-LINK__HOVER-COLOR);
   background-color: var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR);
   text-decoration: underline !important;
   text-underline-offset: 0.125rem !important;
 }
-.ids-box-link .ids-box-link__inner a:focus-visible,
-.ids-box-link .ids-box-link__inner ::slotted(a:focus-visible) {
+.ids-box-link .ids-box-link__inner a:focus-visible {
   border-radius: 0.1875rem !important;
 }
-.ids-box-link .ids-box-link__inner a:active,
-.ids-box-link .ids-box-link__inner ::slotted(a:active) {
+.ids-box-link .ids-box-link__inner a:active {
   color: var(--IDS-BOX-LINK--ACTIVE-COLOR) !important;
   border-color: var(--IDS-BOX-LINK--ACTIVE__BORDER-COLOR) !important;
   background-color: var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR) !important;
@@ -87,13 +82,13 @@
   width: 3rem;
   flex-shrink: 0;
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button) {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button {
   cursor: pointer;
   display: flex;
   padding: 0;
   box-sizing: border-box;
   background: none;
+  width: 100%;
   color: var(--IDS-BOX-LINK__COLOR);
   background-color: var(--IDS-BOX-LINK__BACKGROUND-COLOR);
   font-size: 1.25rem !important;
@@ -104,14 +99,12 @@
   border-top-right-radius: 0.25rem;
   border-bottom-right-radius: 0.25rem;
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button::before,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button)::before {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button::before {
   top: 50% !important;
   right: 0.875rem !important;
   transform: translateY(-50%);
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button::after,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button)::after {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button::after {
   content: "";
   display: block;
   position: absolute;
@@ -121,18 +114,15 @@
   width: 1px;
   background-color: var(--IDS-BOX-LINK__BACKGROUND-COLOR);
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button:focus-visible,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:focus-visible) {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button:focus-visible {
   border-radius: 0.25rem !important;
   z-index: 3;
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button:hover,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:hover) {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button:hover {
   border-color: var(--IDS-BOX-LINK__HOVER-BORDER-COLOR);
   background-color: var(--IDS-BOX-LINK__HOVER-BACKGROUND-COLOR) !important;
 }
-.ids-box-link .ids-box-link__inner .ids-box-link__button button:active,
-.ids-box-link .ids-box-link__inner .ids-box-link__button ::slotted(button:active) {
+.ids-box-link .ids-box-link__inner .ids-box-link__button button:active {
   color: var(--IDS-BOX-LINK--ACTIVE-COLOR) !important;
   background-color: var(--IDS-BOX-LINK--ACTIVE__BACKGROUND-COLOR) !important;
 }
@@ -142,12 +132,10 @@
 .ids-box-link .ids-box-link__inner:hover {
   border-color: var(--IDS-BOX-LINK__HOVER-BORDER-COLOR);
 }
-.ids-box-link .ids-box-link__inner:hover button::after,
-.ids-box-link .ids-box-link__inner:hover ::slotted(button)::after {
+.ids-box-link .ids-box-link__inner:hover button:after {
   background-color: var(--IDS-BOX-LINK__HOVER-BORDER-COLOR);
 }
-.ids-box-link.ids-box-link--has-button .ids-box-link__inner a,
-.ids-box-link.ids-box-link--has-button .ids-box-link__inner ::slotted(a) {
+.ids-box-link.ids-box-link--has-button .ids-box-link__inner a {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/components/breadcrumbs/breadcrumbs-lit.js

@@ -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-breadcrumbs{color:var(--IDS-BREADCRUMBS__COLOR);line-height:1.625rem}.ids-breadcrumbs ol{list-style:none;margin:0;padding:0}.ids-breadcrumbs ol li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__lead{font-family:var(--IDS-FONT-FAMILY-BASE);margin-right:.5rem}.ids-breadcrumbs .ids-breadcrumbs__desktop{display:flex;flex-wrap:wrap}@media (max-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__desktop{display:none}}.ids-breadcrumbs .ids-breadcrumbs__mobile{align-items:center;display:flex}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__mobile-links{align-items:center;display:inline-flex;gap:.5rem}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__icon{position:relative;text-decoration:none;width:1rem}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__icon:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e93c\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__mobile-link{color:var(--IDS-BREADCRUMBS-LINK__COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);text-decoration:none}.ids-breadcrumbs .ids-breadcrumbs__mobile:hover .ids-breadcrumbs__icon:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-breadcrumbs .ids-breadcrumbs__mobile:hover .ids-breadcrumbs__mobile-link{color:var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR);text-decoration:underline}@media (min-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__mobile{display:none}}.ids-breadcrumbs__crumb{align-items:center;display:flex;justify-content:center}.ids-breadcrumbs__crumb ::slotted(*),.ids-breadcrumbs__crumb :not(.ids-breadcrumbs__crumb__separator){border-radius:.0313rem;color:var(--IDS-BREADCRUMBS-LINK__COLOR);cursor:pointer;display:inline-block;font-family:var(--IDS-FONT-FAMILY-BASE);line-height:1.625rem;text-decoration:underline;text-underline-offset:.125rem}.ids-breadcrumbs__crumb:hover ::slotted(*),.ids-breadcrumbs__crumb:hover a{color:var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE)}.ids-breadcrumbs__crumb .ids-breadcrumbs__crumb__separator{margin-left:.5rem;margin-right:.5rem}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile ::slotted(*),.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile a{text-decoration:none}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current ::slotted(*),.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current a{color:var(--IDS-BREADCRUMBS__COLOR);text-decoration:none}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-breadcrumbs{color:var(--IDS-BREADCRUMBS__COLOR);line-height:1.625rem}.ids-breadcrumbs ol{list-style:none;margin:0;padding:0}.ids-breadcrumbs ol li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__lead{font-family:var(--IDS-FONT-FAMILY-BASE);margin-right:.5rem}.ids-breadcrumbs .ids-breadcrumbs__desktop{display:none;flex-wrap:wrap}.ids-breadcrumbs .ids-breadcrumbs__mobile{align-items:center;display:flex}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__mobile-links{align-items:center;display:inline-flex;gap:.5rem}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__icon{position:relative;text-decoration:none;width:1rem}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__icon:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e93c\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:0;position:absolute;top:50%;transform:translateY(-50%)}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-breadcrumbs__mobile-link{color:var(--IDS-BREADCRUMBS-LINK__COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);text-decoration:none}.ids-breadcrumbs .ids-breadcrumbs__mobile:hover .ids-breadcrumbs__icon:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-breadcrumbs .ids-breadcrumbs__mobile:hover .ids-breadcrumbs__mobile-link{color:var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR);text-decoration:underline}@media (min-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__mobile{display:none}.ids-breadcrumbs .ids-breadcrumbs__desktop{display:flex}}.ids-breadcrumbs__crumb{align-items:center;display:flex;justify-content:center}.ids-breadcrumbs__crumb a{border-radius:.0313rem;color:var(--IDS-BREADCRUMBS-LINK__COLOR);cursor:pointer;display:inline-block;font-family:var(--IDS-FONT-FAMILY-BASE);line-height:1.625rem;text-decoration:underline;text-underline-offset:.125rem}.ids-breadcrumbs__crumb a:hover{color:var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR)}.ids-breadcrumbs__crumb .ids-breadcrumbs__crumb__separator{margin-left:.5rem;margin-right:.5rem}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile a{text-decoration:none}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current a{color:var(--IDS-BREADCRUMBS__COLOR);text-decoration:none}";
 
 var breadcrumbsLit = css`${unsafeCSS(css_248z)}`;
 

package/components/breadcrumbs/breadcrumbs-shadow-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-breadcrumbs__crumb ::slotted(a){border-radius:.0313rem;color:var(--IDS-BREADCRUMBS-LINK__COLOR);cursor:pointer;display:inline-block;font-family:var(--IDS-FONT-FAMILY-BASE);line-height:1.625rem;text-decoration:underline;text-underline-offset:.125rem}.ids-breadcrumbs__crumb ::slotted(a:hover){color:var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR)}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile ::slotted(a){text-decoration:none}.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current ::slotted(a){color:var(--IDS-BREADCRUMBS__COLOR);text-decoration:none}";
+
+var breadcrumbsShadowLit = css`${unsafeCSS(css_248z)}`;
+
+export { breadcrumbsShadowLit as default };

package/components/breadcrumbs/breadcrumbs-shadow.css

@@ -0,0 +1,35 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-breadcrumbs__crumb ::slotted(a) {
+  color: var(--IDS-BREADCRUMBS-LINK__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.625rem;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+  border-radius: 0.0313rem;
+}
+.ids-breadcrumbs__crumb ::slotted(a:hover) {
+  color: var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR);
+}
+.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile ::slotted(a) {
+  text-decoration: none;
+}
+.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current ::slotted(a) {
+  text-decoration: none;
+  color: var(--IDS-BREADCRUMBS__COLOR);
+}

package/components/breadcrumbs/breadcrumbs.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -42,14 +42,9 @@
   font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids-breadcrumbs .ids-breadcrumbs__desktop {
-  display: flex;
+  display: none;
   flex-wrap: wrap;
 }
-@media (max-width: 1024px) {
-  .ids-breadcrumbs .ids-breadcrumbs__desktop {
-    display: none;
-  }
-}
 .ids-breadcrumbs .ids-breadcrumbs__mobile {
   display: flex;
   align-items: center;
@@ -69,7 +64,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e93c";
@@ -95,6 +89,9 @@
   .ids-breadcrumbs .ids-breadcrumbs__mobile {
     display: none;
   }
+  .ids-breadcrumbs .ids-breadcrumbs__desktop {
+    display: flex;
+  }
 }
 
 .ids-breadcrumbs__crumb {
@@ -102,8 +99,7 @@
   align-items: center;
   justify-content: center;
 }
-.ids-breadcrumbs__crumb ::slotted(*),
-.ids-breadcrumbs__crumb *:not(.ids-breadcrumbs__crumb__separator) {
+.ids-breadcrumbs__crumb a {
   color: var(--IDS-BREADCRUMBS-LINK__COLOR);
   font-family: var(--IDS-FONT-FAMILY-BASE);
   line-height: 1.625rem;
@@ -113,20 +109,16 @@
   text-underline-offset: 0.125rem;
   border-radius: 0.0313rem;
 }
-.ids-breadcrumbs__crumb:hover ::slotted(*),
-.ids-breadcrumbs__crumb:hover a {
+.ids-breadcrumbs__crumb a:hover {
   color: var(--IDS-BREADCRUMBS-LINK__HOVER-COLOR);
-  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids-breadcrumbs__crumb .ids-breadcrumbs__crumb__separator {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile ::slotted(*),
 .ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--mobile a {
   text-decoration: none;
 }
-.ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current ::slotted(*),
 .ids-breadcrumbs__crumb.ids-breadcrumbs__crumb--current a {
   text-decoration: none;
   color: var(--IDS-BREADCRUMBS__COLOR);

package/components/button-group/button-group-lit.js

@@ -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-button-group{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:1.25rem}.ids-button-group.ids-button-group--start{align-content:start;justify-content:start}.ids-button-group.ids-button-group--end{align-content:end;justify-content:end}.ids-button-group.ids-button-group--center{align-content:center;justify-content:center}.ids-button-group.ids-button-group--rtl{direction:rtl}@media (max-width:1024px){.ids-button-group.ids-button-group--break-m:not(.ids-button-group--unresponsive){align-content:center!important;flex-direction:column;justify-content:center!important;width:100%}}@media (max-width:640px){.ids-button-group.ids-button-group--break-s:not(.ids-button-group--unresponsive){align-content:center!important;flex-direction:column;justify-content:center!important;width:100%}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-button-group{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem}.ids-button-group.ids-button-group--start{align-content:start;justify-content:start}.ids-button-group.ids-button-group--end{align-content:end;justify-content:end}.ids-button-group.ids-button-group--center{align-content:center;justify-content:center}.ids-button-group.ids-button-group--rtl{direction:rtl}@media (max-width:1024px){.ids-button-group.ids-button-group--break-m:not(.ids-button-group--unresponsive){align-content:center!important;flex-direction:column;justify-content:center!important;width:100%}}@media (max-width:640px){.ids-button-group.ids-button-group--break-s:not(.ids-button-group--unresponsive){align-content:center!important;flex-direction:column;justify-content:center!important;width:100%}}";
 
 var buttonGroupLit = css`${unsafeCSS(css_248z)}`;