@inera/ids-design 6.1.0 → 7.0.0

package/components/stepper/stepper.css

@@ -76,9 +76,30 @@
   font-style: italic;
   color: var(--IDS-STEP--DISABLED__LABEL-COLOR);
 }
-.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline {
-  font-style: italic;
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4 {
+  font-style: italic !important;
+  font-style: normal;
   color: var(--IDS-STEP--DISABLED__HEADLINE-COLOR);
+  font-family: var(--IDS-HEADING-M__FONT-FAMILY);
+  font-size: var(--IDS-HEADING-M__FONT-SIZE);
+  line-height: var(--IDS-HEADING-M__LINE-HEIGHT);
+  letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING);
+  font-weight: var(--IDS-HEADING-M__FONT-WEIGHT);
+}
+@media (min-width: 1024px) {
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h1,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h2,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h3,
+  .ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline h4 {
+    font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
+    line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
+    letter-spacing: var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);
+  }
 }
 .ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron {
   display: none;
@@ -96,6 +117,7 @@
   align-items: flex-start;
   gap: 0.5rem;
   width: calc(100% - 3.75rem);
+  min-height: 2.625rem;
 }
 .ids-step .ids-step__indicator-wrapper {
   display: flex;
@@ -160,6 +182,10 @@
   align-self: flex-start;
 }
 .ids-step .ids-step__headline,
+.ids-step .ids-step__headline h1,
+.ids-step .ids-step__headline h2,
+.ids-step .ids-step__headline h3,
+.ids-step .ids-step__headline h4,
 .ids-step ::slotted([slot=headline]) {
   margin: 0 !important;
   word-break: break-word;
@@ -173,6 +199,10 @@
 }
 @media (min-width: 1024px) {
   .ids-step .ids-step__headline,
+  .ids-step .ids-step__headline h1,
+  .ids-step .ids-step__headline h2,
+  .ids-step .ids-step__headline h3,
+  .ids-step .ids-step__headline h4,
   .ids-step ::slotted([slot=headline]) {
     font-size: var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);
     line-height: var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP);
@@ -203,6 +233,10 @@
 }
 .ids-step .ids-step__content {
   padding: 1rem 0 0 0;
+  display: none;
+}
+.ids-step .ids-step__content.ids-step__content--expanded {
+  display: block;
 }
 @media only screen and (min-width: 1024px) {
   .ids-step {
@@ -212,9 +246,6 @@
     height: 1.25rem;
     bottom: -1.3125rem;
   }
-  .ids-step .ids-step__headline-label {
-    padding-left: 1.25rem;
-  }
   .ids-step .ids-step__content {
     padding: 1.25rem 0 0 4rem;
   }

package/components/tabs/tab-lit.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/tabs/tab-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ":host{border-radius:var(--IDS-TAB__BORDER-RADIUS)}:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem}.ids-tab{-webkit-touch-callout:none;align-items:flex-end;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:.0625rem solid transparent;border-radius:var(--IDS-TAB__BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);box-sizing:border-box;color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;padding:.625rem 1.438rem .75rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{color:var(--IDS-TAB__COLOR);display:flex;justify-content:center}.ids-tab .ids-tab__label{align-items:center;flex-direction:column;font-size:1rem;font-weight:400;gap:.25rem;line-height:1.5rem;text-align:center}.ids-tab .ids-icon,.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!important}.ids-tab:after{background-color:transparent;bottom:var(--IDS-TAB--SELECTED__AFTER-BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED__AFTER-HEIGHT);left:-.063rem;position:absolute;right:0;width:calc(100% + .125rem)}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:var(--IDS-TAB--SELECTED-BORDER);border-right:var(--IDS-TAB--SELECTED-BORDER);border-top:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED__BOX-SHADOW)}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR)}.ids-tab .ids-notification-badge,.ids-tab ids-notification-badge{margin-bottom:-.125rem;margin-left:.375rem}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}";
+var css_248z = ":host{border-radius:var(--IDS-TAB__BORDER-RADIUS)}:host(:focus),:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0;z-index:10}.ids-tab{-webkit-touch-callout:none;align-items:center;background:none;border:none;border-left:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-radius:var(--IDS-TAB__BORDER-RADIUS);border-right:.0625rem solid var(--IDS-TAB__BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB__BORDER-COLOR);color:inherit;color:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.ids-tab:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;z-index:2}.ids-tab:focus{z-index:2}.ids-tab .ids-tab__label{align-items:center;color:var(--IDS-TAB__COLOR);display:flex;flex-direction:row;font-size:1rem;font-weight:400;gap:.5rem;justify-content:center;line-height:1.6875rem;text-align:center}.ids-tab .ids-tab__label:before{background-color:transparent;content:\"\";height:var(--IDS-TAB--SELECTED__BORDER-HEIGHT);left:0;position:absolute;right:0;top:0;width:100%}.ids-tab.ids-tab--selected{background-color:var(--IDS-COLOR-NEUTRAL-100);border-left:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-right:.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);border-top:.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);padding:.4375rem 1.375rem}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected .ids-tab__label:before{background-color:var(--IDS-TAB--SELECTED-BORDER-COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-tab .ids-tab-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-ICON__COLOR);display:flex!important;font-size:1.25rem!important}";
 
 var tabLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel-lit.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/tabs/tab-panel-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ":host([selected=true]){display:block}.ids-tab-panel{display:none;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.125rem;padding-top:1.5rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{padding-top:0}.ids-tab-panel.ids-tab-panel--selected{display:block}";
+var css_248z = ":host([selected=true]){display:block}.ids-tab-panel{display:none;margin-top:1.5rem;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.125rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{margin-top:.125rem}.ids-tab-panel.ids-tab-panel--selected{display:block}";
 
 var tabPanelLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel.css

@@ -4,7 +4,7 @@
 
 .ids-tab-panel {
   display: none;
-  padding-top: 1.5rem;
+  margin-top: 1.5rem;
   outline-offset: 0.125rem;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
 }
@@ -12,7 +12,7 @@
   display: none;
 }
 .ids-tab-panel.ids-tab-panel--compact {
-  padding-top: 0;
+  margin-top: 0.125rem;
 }
 .ids-tab-panel.ids-tab-panel--selected {
   display: block;

package/components/tabs/tab.css

@@ -17,9 +17,11 @@
   border-radius: var(--IDS-TAB__BORDER-RADIUS);
 }
 
-:host(:not([selected]):focus) {
+:host(:not([selected]):focus),
+:host(:focus) {
   outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: 0.125rem;
+  outline-offset: 0;
+  z-index: 10;
 }
 
 .ids-tab {
@@ -40,15 +42,10 @@
   display: flex;
   outline: none;
   justify-content: center;
-  align-items: flex-end;
-  box-sizing: border-box;
-  padding: 0.625rem 1.438rem 0.75rem 1.438rem;
-  background: var(--IDS-TAB_BACKGROUND-COLOR);
-  box-shadow: var(--IDS-TAB_BOX-SHADOW);
-  border: 0.0625rem solid transparent;
-  border-radius: var(--IDS-TAB__BORDER-RADIUS);
+  align-items: center;
   cursor: pointer;
   position: relative;
+  z-index: 1;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -56,63 +53,73 @@
   -ms-user-select: none;
   user-select: none;
   color: var(--IDS-TAB__COLOR);
-  /*   &:has(.ids-tab__icon),
-    &.ids-tab--has-icon {
-      .ids-tab__label {
-        margin-bottom: -0.4375rem;
-      }
-    } */
+  overflow: hidden;
+  padding: 0.4375rem 1.4375rem;
+  border-top: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-left: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-right: 0.0625rem solid var(--IDS-TAB__BORDER-COLOR);
+  border-radius: var(--IDS-TAB__BORDER-RADIUS);
+}
+.ids-tab:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-tab:after {
+  content: "";
+  position: absolute;
+  height: 0.25rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--IDS-TABS__BORDER-BOTTOM-COLOR);
+  z-index: 2;
+}
+.ids-tab:focus {
+  z-index: 2;
 }
 .ids-tab .ids-tab__label {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: center;
   align-items: center;
   color: var(--IDS-TAB__COLOR);
   font-weight: 400;
   font-size: 1rem;
-  line-height: 1.5rem;
+  line-height: 1.6875rem;
   text-align: center;
-  gap: 0.25rem;
-}
-.ids-tab .ids-tab-icon,
-.ids-tab ::slotted([slot=icon]),
-.ids-tab .ids-icon {
-  display: flex !important;
-  align-self: center !important;
-  font-size: 1.25rem !important;
-  color: var(--IDS-ICON__COLOR);
+  gap: 0.5rem;
 }
-.ids-tab:after {
+.ids-tab .ids-tab__label:before {
   content: "";
-  height: var(--IDS-TAB--SELECTED__AFTER-HEIGHT);
   background-color: transparent;
   position: absolute;
-  width: calc(100% + 0.125rem);
-  left: -0.063rem;
+  width: 100%;
+  left: 0;
   right: 0;
-  bottom: var(--IDS-TAB--SELECTED__AFTER-BOTTOM);
+  height: var(--IDS-TAB--SELECTED__BORDER-HEIGHT);
+  top: 0;
 }
 .ids-tab.ids-tab--selected {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border-top: var(--IDS-TAB--SELECTED-BORDER);
-  border-left: var(--IDS-TAB--SELECTED-BORDER);
-  border-right: var(--IDS-TAB--SELECTED-BORDER);
-  box-shadow: var(--IDS-TAB--SELECTED__BOX-SHADOW);
+  padding: 0.4375rem 1.375rem;
   color: var(--IDS-TAB--SELECTED_COLOR);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  border-top: 0.0625rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
+  border-left: 0.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
+  border-right: 0.125rem solid var(--IDS-TAB--SELECTED-BORDER-COLOR);
 }
 .ids-tab.ids-tab--selected .ids-tab__label {
   color: var(--IDS-TAB--SELECTED_COLOR);
 }
-.ids-tab.ids-tab--selected:after {
-  background-color: var(--IDS-TAB--SELECTED__AFTER-BACKGROUND-COLOR);
+.ids-tab.ids-tab--selected .ids-tab__label:before {
+  background-color: var(--IDS-TAB--SELECTED-BORDER-COLOR);
 }
-.ids-tab ids-notification-badge,
-.ids-tab .ids-notification-badge {
-  margin-left: 0.375rem;
-  margin-bottom: -0.125rem;
+.ids-tab.ids-tab--selected:after {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-.ids-tab:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+.ids-tab .ids-tab-icon,
+.ids-tab ::slotted([slot=icon]) {
+  display: flex !important;
+  align-self: center !important;
+  font-size: 1.25rem !important;
+  color: var(--IDS-ICON__COLOR);
 }

package/components/tabs/tabs-lit.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/tabs/tabs-lit.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z$1 = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-tabs .ids-tabs__select{display:block}.ids-tabs .ids-tabs__tabs{align-items:flex-end;border-bottom:var(--IDS-TABS__BORDER-BOTTOM);display:none;flex-wrap:wrap;gap:.25rem;padding:0 1.25rem;position:relative}.ids-tabs .ids-tabs__tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}@media (min-width:1024px){.ids-tabs .ids-tabs__select{display:none}.ids-tabs .ids-tabs__tabs{display:flex}}.ids-tabs.ids-tabs--unresponsive .ids-tabs__select{display:none}.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs{display:flex!important}@media (min-width:640px){.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs{display:flex}}@media (min-width:1024px){.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs{display:flex}}.ids-tabs .ids-tabs__panels{position:relative;z-index:1}";
+var css_248z$1 = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-tabs .ids-tabs__select{display:block}.ids-tabs .ids-tabs__tabs{align-items:flex-end;display:none;flex-wrap:wrap;justify-content:flex-start;padding:0 1.25rem;position:relative}.ids-tabs .ids-tabs__tabs:after{background-color:var(--IDS-TABS__BORDER-BOTTOM-COLOR);bottom:0;content:\"\";height:.25rem;left:0;position:absolute;right:0;width:100%}.ids-tabs .ids-tabs__tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}@media (min-width:1024px){.ids-tabs .ids-tabs__select{display:none}.ids-tabs .ids-tabs__tabs{display:flex}}.ids-tabs.ids-tabs--unresponsive .ids-tabs__select{display:none}.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs{display:flex!important}@media (min-width:640px){.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs{display:flex}}@media (min-width:1024px){.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs{display:flex}}.ids-tabs .ids-tabs__panels{position:relative;z-index:1}";
 
-var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid,.ids-select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid,.ids-select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select[aria-disabled=true]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{color:var(--IDS-ICON__COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;height:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);width:1rem}.ids-select-wrapper:has(.ids-input--invalid):after,.ids-select-wrapper:has([aria-invalid=true]):after{color:var(--IDS-ICON--INVALID-COLOR)}.ids-select-wrapper:has([aria-disabled=true]):after,.ids-select-wrapper:has(select:disabled):after{color:var(--IDS-ICON--DISABLED-COLOR)}";
+var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light:disabled,.ids-select.ids-input--light[readonly],.ids-select:disabled,.ids-select[readonly]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid,.ids-select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid,.ids-select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select[aria-disabled=true]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{color:var(--IDS-ICON__COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;height:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);width:1rem}.ids-select-wrapper:has(.ids-input--invalid):after,.ids-select-wrapper:has([aria-invalid=true]):after{color:var(--IDS-ICON--INVALID-COLOR)}.ids-select-wrapper:has([aria-disabled=true]):after,.ids-select-wrapper:has(select:disabled):after{color:var(--IDS-ICON--DISABLED-COLOR)}";
 
 var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;
 

package/components/tabs/tabs.css

@@ -16,11 +16,20 @@
 .ids-tabs .ids-tabs__tabs {
   display: none;
   flex-wrap: wrap;
-  gap: 0.25rem;
   position: relative;
+  justify-content: flex-start;
   align-items: flex-end;
   padding: 0 1.25rem;
-  border-bottom: var(--IDS-TABS__BORDER-BOTTOM);
+}
+.ids-tabs .ids-tabs__tabs:after {
+  content: "";
+  background-color: var(--IDS-TABS__BORDER-BOTTOM-COLOR);
+  position: absolute;
+  width: 100%;
+  left: 0;
+  right: 0;
+  height: 0.25rem;
+  bottom: 0;
 }
 .ids-tabs .ids-tabs__tabs::before {
   content: var(--IDS-TAB--SELECTED__BEFORE-CONTENT);

package/components/tag/tag-lit.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/tag/tag-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-flex;flex-direction:row;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;gap:.5rem;justify-content:space-between;line-height:1rem;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:1.25rem;color:inherit;cursor:pointer;display:flex;font:inherit;height:.875rem;justify-content:center;margin:-.25rem -.25rem -.5rem;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:.875rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:before{color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
+var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-block;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{background:none;border:none;border-radius:100%;color:inherit;cursor:pointer;font:inherit;height:.875rem;margin:-.25rem -.25rem -.5rem 0;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:.875rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:before{color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn:active,.ids-tag .ids-tag__close-btn:focus,.ids-tag .ids-tag__close-btn:hover{border-radius:100%}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -21,14 +21,15 @@
   border: 0.063rem solid var(--IDS-TAG__BORDER-COLOR);
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
-  display: inline-flex;
-  gap: 0.5rem;
-  flex-direction: row;
-  line-height: 1rem;
-  justify-content: space-between;
+  display: inline-block;
+  line-height: 1rem !important;
+  height: max-content;
 }
 .ids-tag .ids-tag__content {
   display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: space-between;
 }
 .ids-tag.ids-tag--clickable {
   cursor: pointer;
@@ -76,11 +77,8 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  display: flex;
-  border-radius: 1.25rem;
-  margin: -0.25rem -0.25rem -0.5rem -0.25rem;
-  justify-content: center;
-  align-items: center;
+  border-radius: 100%;
+  margin: -0.25rem -0.25rem -0.5rem 0;
   position: relative;
   width: 0.875rem;
   height: 0.875rem;
@@ -97,8 +95,14 @@
   pointer-events: none;
   content: "\e934";
   font-size: 0.875rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   color: var(--IDS-ICON__COLOR);
 }
+.ids-tag .ids-tag__close-btn:hover, .ids-tag .ids-tag__close-btn:focus, .ids-tag .ids-tag__close-btn:active {
+  border-radius: 100%;
+}
 .ids-tag .ids-tag__close-btn:hover:before, .ids-tag .ids-tag__close-btn:focus:before, .ids-tag .ids-tag__close-btn:active:before {
   color: var(--IDS-ICON--ACTIVE-COLOR);
 }

package/components/tooltip/tooltip-lit.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+declare const _default: import("lit").CSSResult;
+export default _default;