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

@inera/ids-design 5.5.1 → 6.0.1

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/header-1177/header-1177-avatar-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-header-1177--unresponsive .ids-header-1177__avatar{align-items:center;align-self:flex-end;display:flex;flex-wrap:wrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;padding-left:2rem;padding-right:2rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem;min-height:1rem;min-width:1rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar{align-items:center;align-self:flex-end;display:flex;flex-wrap:wrap}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:2rem;margin-left:.75rem;margin-right:.75rem;padding-left:1rem;padding-right:1rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem;min-height:1rem;min-width:1rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{max-height:1.25rem;max-width:1.25rem;min-height:1rem;min-width:1rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive){align-items:center;align-self:flex-end;display:flex;flex-wrap:wrap}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:2rem;margin-left:.75rem;margin-right:.75rem;padding-left:1rem;padding-right:1rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem;min-height:1rem;min-width:1rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{max-height:1.25rem;max-width:1.25rem;min-height:1rem;min-width:1rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive{align-items:center;align-self:flex-end;display:flex;flex-wrap:wrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;padding-left:2rem;padding-right:2rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:2.75rem;max-width:2.25rem;min-height:1rem;min-width:1rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177--unresponsive .ids-header-1177__avatar{align-items:center;display:flex;flex-wrap:wrap;justify-self:flex-end}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;overflow:hidden;padding-left:2rem;padding-right:2rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column;padding-left:2.75rem;position:relative}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{color:var(--IDS-COLOR-PRIMARY-40);content:\"\\e923\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:2.25rem;left:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:calc(100vw - 22rem);overflow:hidden;position:relative;text-align:start;text-align:left;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-underline-offset:.125rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar{align-items:center;display:flex;flex-wrap:wrap;justify-self:flex-end}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;overflow:hidden;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:2rem;justify-content:flex-start;margin-left:.75rem;margin-right:.75rem;max-width:calc(100vw - 11rem);padding-left:1rem;padding-right:1rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column;padding-left:2.75rem;position:relative}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{color:var(--IDS-COLOR-PRIMARY-40);content:\"\\e923\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:2.25rem;left:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{padding-left:2rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{font-size:1.5rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:calc(100vw - 22rem);overflow:hidden;position:relative;text-align:start;text-align:left;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:calc(100vw - 14.875rem)}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-underline-offset:.125rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive){align-items:center;display:flex;flex-wrap:wrap;justify-self:flex-end}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;overflow:hidden;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:2rem;justify-content:flex-start;margin-left:.75rem;margin-right:.75rem;max-width:calc(100vw - 11rem);padding-left:1rem;padding-right:1rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column;padding-left:2.75rem;position:relative}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{color:var(--IDS-COLOR-PRIMARY-40);content:\"\\e923\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:2.25rem;left:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{padding-left:2rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{font-size:1.5rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:calc(100vw - 22rem);overflow:hidden;position:relative;text-align:start;text-align:left;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:calc(100vw - 14.875rem)}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-underline-offset:.125rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive{align-items:center;display:flex;flex-wrap:wrap;justify-self:flex-end}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box{align-items:center;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:3.125rem;display:flex;gap:1rem;height:5rem;justify-content:center;max-height:5rem;overflow:hidden;padding-left:2rem;padding-right:2rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:flex;flex-direction:column;padding-left:2.75rem;position:relative}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before{color:var(--IDS-COLOR-PRIMARY-40);content:\"\\e923\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:2.25rem;left:0;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);font-size:1rem;max-width:calc(100vw - 22rem);overflow:hidden;position:relative;text-align:start;text-align:left;text-overflow:ellipsis;white-space:nowrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap;font-size:1rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLOR-PRESET-2__COLOR);text-underline-offset:.125rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:.063rem solid var(--IDS-COLOR-NEUTRAL-90);margin-right:.5rem;padding-right:.5rem}";
 var header1177AvatarLit = css`${unsafeCSS(css_248z)}`;

package/components/header-1177/header-1177-avatar.css CHANGED Viewed

@@ -10,8 +10,23 @@
   }
 }
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 .ids-header-1177--unresponsive .ids-header-1177__avatar {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -27,26 +42,36 @@
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
-}
-.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-  display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  overflow: hidden;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
   flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -55,8 +80,9 @@
   font-size: 1rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -65,7 +91,7 @@
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -81,9 +107,11 @@
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
+  overflow: hidden;
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box {
+    justify-content: flex-start;
     gap: 0.5rem;
     height: 2rem;
     font-size: 0.75rem;
@@ -91,40 +119,50 @@
     padding-left: 1rem;
     margin-left: 0.75rem;
     margin-right: 0.75rem;
+    max-width: calc(100vw - 11rem);
   }
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 @media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    min-width: 1rem;
-    min-height: 1rem;
-    max-width: 1.25rem;
-    max-height: 1.25rem;
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
+    padding-left: 2rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+    font-size: 1.5rem;
   }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: flex;
-  flex-direction: column;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
-    max-width: 100%;
+    max-width: calc(100vw - 14.875rem);
   }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -138,8 +176,9 @@
   }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -148,7 +187,7 @@
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -164,9 +203,11 @@
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
+  overflow: hidden;
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box {
+    justify-content: flex-start;
     gap: 0.5rem;
     height: 2rem;
     font-size: 0.75rem;
@@ -174,40 +215,50 @@
     padding-left: 1rem;
     margin-left: 0.75rem;
     margin-right: 0.75rem;
+    max-width: calc(100vw - 11rem);
   }
 }
-:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
+:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    min-width: 1rem;
-    min-height: 1rem;
-    max-width: 1.25rem;
-    max-height: 1.25rem;
+  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
+    padding-left: 2rem;
+  }
+  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+    font-size: 1.5rem;
   }
-}
-:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: flex;
-  flex-direction: column;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
-    max-width: 100%;
+    max-width: calc(100vw - 14.875rem);
   }
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -221,8 +272,9 @@
   }
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -230,7 +282,7 @@
   margin-right: 0.5rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -246,26 +298,36 @@
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
-}
-:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-  display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  overflow: hidden;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
   flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -274,8 +336,9 @@
   font-size: 1rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;

package/components/header-1177/header-1177-item-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-header-1177--unresponsive .ids-header-1177__items__item{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;gap:.5rem;position:relative;text-decoration:none}.ids-header-1177--unresponsive .ids-header-1177__items__item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;gap:.5rem;position:relative;text-decoration:none}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:not(.ids-header-1177__items__item--mobile){display:none;outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}@media (min-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text{display:none}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive){align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;gap:.5rem;position:relative;text-decoration:none}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):not(.ids-header-1177__items__item--mobile){display:none;outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}@media (min-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}@media (max-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text{display:none}}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;gap:.5rem;position:relative;text-decoration:none}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177--unresponsive .ids-header-1177__items__item{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;margin-left:1.25rem;position:relative;text-decoration:none}.ids-header-1177--unresponsive .ids-header-1177__items__item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;margin-left:1.25rem;position:relative;text-decoration:none}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:not(.ids-header-1177__items__item--mobile){display:none;margin-left:.5rem;outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}@media (min-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-]{font-size:2rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text{display:none}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive){align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;margin-left:1.25rem;position:relative;text-decoration:none}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}@media (max-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):not(.ids-header-1177__items__item--mobile){display:none;margin-left:.5rem;outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}@media (min-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon{margin-left:0;margin-right:0;max-height:2rem;max-width:2rem}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-]{font-size:2rem}}:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}@media (max-width:1024px){:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text{display:none}}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive{align-items:center;background-color:transparent;border:0;display:flex;flex-direction:column;margin-left:1.25rem;position:relative;text-decoration:none}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon{display:flex;margin-left:.25rem;margin-right:.25rem;max-height:1.5rem;max-width:1.5rem}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon [class^=ids-icon-]{color:var(--IDS-COLOR-PRIMARY-40);font-size:1.5rem}:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-text{color:var(--IDS-COLOR-PRIMARY-35);font-size:1.125rem;text-align:center}";
 var header1177ItemLit = css`${unsafeCSS(css_248z)}`;

package/components/header-1177/header-1177-item.css CHANGED Viewed

@@ -10,6 +10,9 @@
   }
 }
+/*******
+* ICONS
+********/
 /*******
 * BUTTONS
 ********/
@@ -26,7 +29,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -43,6 +46,11 @@
   margin-right: 0.25rem;
   display: flex;
 }
+.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
   font-size: 1.125rem;
@@ -53,7 +61,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -67,6 +75,7 @@
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:not(.ids-header-1177__items__item--mobile) {
     outline: var(--IDS-FOCUS__OUTLINE);
     outline-offset: -0.25rem !important;
+    margin-left: 0.5rem;
     display: none;
   }
 }
@@ -77,6 +86,11 @@
   margin-right: 0.25rem;
   display: flex;
 }
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 @media (min-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon {
     max-width: 2rem;
@@ -84,6 +98,10 @@
     margin-left: 0;
     margin-right: 0;
   }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+    font-size: 2rem;
+  }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
@@ -100,7 +118,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -114,6 +132,7 @@
   :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):not(.ids-header-1177__items__item--mobile) {
     outline: var(--IDS-FOCUS__OUTLINE);
     outline-offset: -0.25rem !important;
+    margin-left: 0.5rem;
     display: none;
   }
 }
@@ -124,6 +143,11 @@
   margin-right: 0.25rem;
   display: flex;
 }
+:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 @media (min-width: 1024px) {
   :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon {
     max-width: 2rem;
@@ -131,6 +155,10 @@
     margin-left: 0;
     margin-right: 0;
   }
+  :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+  :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
+    font-size: 2rem;
+  }
 }
 :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
@@ -146,7 +174,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -163,6 +191,11 @@
   margin-right: 0.25rem;
   display: flex;
 }
+:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
   font-size: 1.125rem;