@inera/ids-design 9.1.0 → 9.2.0

package/components/stepper/stepper-shadow.css

@@ -1,4 +1,5 @@
-.ids--light, .ids--dark {
+.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);
@@ -16,10 +17,15 @@
   --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--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--light.ids--inera, .ids--light.ids--inera-general, .ids--light.ids--inera-admin,
+.ids--dark.ids--inera,
+.ids--dark.ids--inera-general,
+.ids--dark.ids--inera-admin {
   --IDS-FONT-FAMILY-BASE: "Open Sans";
   --IDS-FONT-FAMILY-HEADING: "Poppins";
   --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
@@ -31,10 +37,16 @@
   --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
   --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
 }
-.ids--light.ids--dark, .ids--dark.ids--dark {
+.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--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-general, .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-general,
+.ids--dark.ids--dark.ids--inera-admin {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 

package/components/stepper/stepper.css

@@ -10,7 +10,8 @@
   }
 }
 
-.ids--light, .ids--dark {
+.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);
@@ -28,10 +29,15 @@
   --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--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--light.ids--inera, .ids--light.ids--inera-general, .ids--light.ids--inera-admin,
+.ids--dark.ids--inera,
+.ids--dark.ids--inera-general,
+.ids--dark.ids--inera-admin {
   --IDS-FONT-FAMILY-BASE: "Open Sans";
   --IDS-FONT-FAMILY-HEADING: "Poppins";
   --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
@@ -43,10 +49,16 @@
   --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
   --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
 }
-.ids--light.ids--dark, .ids--dark.ids--dark {
+.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--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-general, .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-general,
+.ids--dark.ids--dark.ids--inera-admin {
   --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
 }
 
@@ -56,10 +68,11 @@
   display: flex;
   flex-direction: column;
 }
-.ids-step .ids-step__label {
+.ids-step .ids-step__subtitle {
   font-size: 1rem;
-  color: var(--IDS-STEP__LABEL-COLOR);
+  color: var(--IDS-STEP__SUBTITLE-COLOR);
   font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: left;
 }
 .ids-step .ids-step__button {
   padding: var(--IDS-STEP__BUTTON-PADDING-MOBILE);
@@ -79,7 +92,7 @@
   pointer-events: none;
   cursor: default;
 }
-.ids-step .ids-step__button.ids-step__button--disabled .ids-step__label {
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__subtitle {
   font-style: italic;
   color: var(--IDS-STEP--DISABLED__LABEL-COLOR);
 }
@@ -152,6 +165,7 @@
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e93a";
   color: var(--IDS-STEP--VALID__INDICATOR-ICON-COLOR);
   font-size: 1.25rem !important;
@@ -167,14 +181,11 @@
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e91d";
   color: var(--IDS-STEP--INVALID__INDICATOR-ICON-COLOR);
   font-size: 1.25rem !important;
 }
-.ids-step .ids-step__label {
-  display: flex;
-  align-self: flex-start;
-}
 .ids-step .ids-step__headline,
 .ids-step .ids-step__headline *:is(h1, h2, h3, h4, h5, h6) {
   margin: 0 !important;
@@ -200,6 +211,7 @@
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
   content: "\e936";
   font-size: 1.25rem;
   top: 50%;

package/components/table/table.css

@@ -1,3 +1,67 @@
+.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-general, .ids--light.ids--inera-admin,
+.ids--dark.ids--inera,
+.ids--dark.ids--inera-general,
+.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-general, .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-general,
+.ids--dark.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
 .ids-table {
   table-layout: fixed;
   border-collapse: separate;
@@ -9,6 +73,19 @@
   border-spacing: 0;
   overflow: hidden;
 }
+.ids-table caption {
+  font-style: normal;
+  color: var(--IDS-TABLE__CAPTION-COLOR);
+  font-family: var(--ids-font-family-body-text);
+  font-size: var(--ids-font-size-body-text);
+  line-height: var(--ids-font-line-height-body-text);
+  font-weight: var(--ids-font-weight-body-text);
+  letter-spacing: 0;
+  text-align: left;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+  margin-left: 0.25rem;
+}
 .ids-table thead th {
   background-color: var(--IDS-TABLE__HEAD-BACKGROUND-COLOR);
   text-align: start;
@@ -27,9 +104,15 @@
 .ids-table thead tr:first-child th {
   border-top: 0;
 }
+.ids-table thead tr th:first-child {
+  border-top-left-radius: var(--IDS-TABLE__BORDER-TOP-RADIUS);
+}
+.ids-table thead tr th:last-child {
+  border-top-right-radius: var(--IDS-TABLE__BORDER-TOP-RADIUS);
+}
 .ids-table tbody tr:first-child th,
 .ids-table tbody tr:first-child td {
-  border-top: var(--IDS-TABLE__FIRST-ROW-CELL-BORDER-TOP);
+  border-radius: var(--IDS-TABLE__FIRST-ROW-CELL-BORDER-TOP);
 }
 .ids-table tbody tr td:first-child,
 .ids-table thead tr th:first-child {
@@ -37,6 +120,13 @@
 }
 .ids-table tbody tr th {
   border-bottom: 0;
+  border-left: 0;
   text-align: left;
   background-color: var(--IDS-TABLE__HEAD-BACKGROUND-COLOR);
+}
+.ids-table tbody tr:last-child th:first-child {
+  border-bottom-left-radius: var(--IDS-TABLE__BORDER-TOP-RADIUS);
+}
+.ids-table tbody td {
+  background-color: var(--IDS-TABLE__CELL-BACKGROUND-COLOR);
 }

package/components/tabs/tabs-lit.js

@@ -2,7 +2,7 @@ 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__select .ids-label-wrapper{margin-bottom:.25rem}.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;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}.ids-tab{background:none;border:none;color:inherit;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none}.ids-tab:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab{-webkit-touch-callout:none;align-items:center;background-color:var(--IDS-TABS__BACKGROUND-COLOR);border-left:var(--IDS-TAB__BORDER);border-radius:var(--IDS-TAB__BORDER-RADIUS);border-right:var(--IDS-TAB__BORDER);border-top:var(--IDS-TAB__BORDER);color:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);justify-content:center;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;text-decoration:none!important;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.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-visible{z-index:2}.ids-tab .ids-tab__label{align-items:center;background-color:var(--IDS-TABS__BACKGROUND-COLOR);color:var(--IDS-TAB__COLOR);display:flex;flex-direction:row;font-size:1rem;font-weight:400;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__TOP-BORDER-HEIGHT);left:0;position:absolute;right:0;top:0;width:100%}.ids-tab:hover{border-left:var(--IDS-TAB--HOVER-BORDER);border-right:var(--IDS-TAB--HOVER-BORDER);border-top:var(--IDS-TAB--HOVER-BORDER-TOP);padding:.4375rem 1.375rem}.ids-tab:hover .ids-tab__label{color:var(--IDS-TAB--HOVER-COLOR)}.ids-tab:hover .ids-tab__label:before{background-color:var(--IDS-TAB--HOVER-BEFORE-COLOR)}.ids-tab.ids-tab--selected{border-left:var(--IDS-TAB--SELECTED__BORDER);border-right:var(--IDS-TAB--SELECTED__BORDER);border-top:var(--IDS-TAB--SELECTED__BORDER-TOP);padding:.4375rem 1.375rem}.ids-tab.ids-tab--selected,.ids-tab.ids-tab--selected .ids-tab__label{background-color:var(--IDS-TAB--SELECTED__BACKGROUND-COLOR);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-TAB--SELECTED__BORDER-BOTTOM-COLOR)}.ids-tab .ids-tab-icon{align-self:center!important;color:var(--IDS-TAB-ICON__COLOR);display:flex!important;font-size:1.25rem!important;margin-right:.5rem}.ids-tab .ids-tab-extra{margin-left:.5rem}.ids-tab-panel{color:var(--IDS-TAB-PANEL__COLOR);display:none;font-family:var(--IDS-FONT-FAMILY-BASE);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 css_248z = ".ids-select:has(select:disabled) label{color:var(--IDS-FORM-LABEL--DISABLED-COLOR);cursor:default!important;font-style:italic}.ids-select__select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-radius:var(--IDS-BORDER-RADIUS-MEDIUM);box-sizing:border-box;color:var(--IDS-FORM__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING);width:100%}.ids-select__select:hover{background-color:var(--IDS-INPUT__HOVER-BACKGROUND-COLOR)}.ids-select__select:active{background-color:var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-select__select:focus-visible,.ids-select__select:focus-visible:hover{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-color:var(--IDS-INPUT__FOCUS-BORDER-COLOR)}.ids-select__select:disabled,.ids-select__select[readonly],.ids-select__select[readonly]:focus-visible,.ids-select__select[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;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__select:disabled::placeholder,.ids-select__select[readonly]::placeholder,.ids-select__select[readonly]:focus-visible::placeholder,.ids-select__select[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select.ids-input--light{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light:hover{background-color:var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR)}.ids-select__select.ids-input--light:active{background-color:var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-select__select.ids-input--light:focus-visible,.ids-select__select.ids-input--light:focus-visible:hover{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light:disabled,.ids-select__select.ids-input--light[readonly],.ids-select__select.ids-input--light[readonly]:focus-visible,.ids-select__select.ids-input--light[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;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__select.ids-input--light:disabled::placeholder,.ids-select__select.ids-input--light[readonly]::placeholder,.ids-select__select.ids-input--light[readonly]:focus-visible::placeholder,.ids-select__select.ids-input--light[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select__select{border:var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);cursor:pointer;display:inline-block!important;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding-left:var(--IDS-SELECT__PADDING-LEFT)!important;padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select__select::placeholder{color:var(--IDS-FORM__COLOR)}.ids-select__select.ids-input--invalid,.ids-select__select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-select__select.ids-input--light{background-color:var(--IDS-SELECT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light.ids-input--invalid,.ids-select__select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-select__select[aria-disabled=true]{-webkit-text-fill-color:inherit;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__select[aria-disabled=true]::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:disabled{cursor:default}.ids-select__select:disabled::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:disabled.ids-input--light{-webkit-text-fill-color:inherit;background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);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__select:disabled.ids-input--light::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__wrapper{display:flex;position:relative}.ids-select__wrapper:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);z-index:2}.ids-select__wrapper:has(select:disabled):after,.ids-select__wrapper:has(select[aria-disabled=true]):after{color:var(--IDS-FORM--DISABLED__COLOR)!important}.ids-select__wrapper:has(select[aria-invalid=true]):after{color:var(--IDS-FORM--INVALID__COLOR)!important}";
+var css_248z = ".ids-select:has(select:disabled) label{color:var(--IDS-FORM-LABEL--DISABLED-COLOR);cursor:default!important;font-style:italic}.ids-select__select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-radius:var(--IDS-BORDER-RADIUS-MEDIUM)!important;box-sizing:border-box;color:var(--IDS-FORM__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING);width:100%}.ids-select__select:hover{background-color:var(--IDS-INPUT__HOVER-BACKGROUND-COLOR)}.ids-select__select:active{background-color:var(--IDS-INPUT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-select__select:focus-visible,.ids-select__select:focus-visible:hover{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-color:var(--IDS-INPUT__FOCUS-BORDER-COLOR)}.ids-select__select:disabled,.ids-select__select[readonly],.ids-select__select[readonly]:focus-visible,.ids-select__select[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;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__select:disabled::placeholder,.ids-select__select[readonly]::placeholder,.ids-select__select[readonly]:focus-visible::placeholder,.ids-select__select[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select.ids-input--light{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light:hover{background-color:var(--IDS-INPUT--LIGHT__HOVER-BACKGROUND-COLOR)}.ids-select__select.ids-input--light:active{background-color:var(--IDS-INPUT--LIGHT__ACTIVE-BACKGROUND-COLOR);border-color:var(--IDS-INPUT__ACTIVE-BORDER-COLOR)}.ids-select__select.ids-input--light:focus-visible,.ids-select__select.ids-input--light:focus-visible:hover{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light:disabled,.ids-select__select.ids-input--light[readonly],.ids-select__select.ids-input--light[readonly]:focus-visible,.ids-select__select.ids-input--light[readonly]:focus-visible:hover{-webkit-text-fill-color:inherit;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__select.ids-input--light:disabled::placeholder,.ids-select__select.ids-input--light[readonly]::placeholder,.ids-select__select.ids-input--light[readonly]:focus-visible::placeholder,.ids-select__select.ids-input--light[readonly]:focus-visible:hover::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select__select{border:var(--IDS-INPUT__BORDER-THICKNESS) solid var(--IDS-INPUT__BORDER-COLOR);cursor:pointer;display:inline-block!important;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding-left:var(--IDS-SELECT__PADDING-LEFT)!important;padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select__select::placeholder{color:var(--IDS-FORM__COLOR)}.ids-select__select.ids-input--invalid,.ids-select__select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-select__select.ids-input--light{background-color:var(--IDS-SELECT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light.ids-input--invalid,.ids-select__select.ids-input--light[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER);box-shadow:var(--IDS-FORM--INVALID-BOX-SHADOW)}.ids-select__select[aria-disabled=true]{-webkit-text-fill-color:inherit;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__select[aria-disabled=true]::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:disabled{cursor:default}.ids-select__select:disabled::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__select:disabled.ids-input--light{-webkit-text-fill-color:inherit;background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);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__select:disabled.ids-input--light::placeholder{color:var(--IDS-FORM--DISABLED__COLOR)}.ids-select__wrapper{display:flex;position:relative}.ids-select__wrapper:after{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);z-index:2}.ids-select__wrapper:has(select:disabled):after,.ids-select__wrapper:has(select[aria-disabled=true]):after{color:var(--IDS-FORM--DISABLED__COLOR)!important}.ids-select__wrapper:has(select[aria-invalid=true]):after{color:var(--IDS-FORM--INVALID__COLOR)!important}";
 
 var tabsLit = css`${unsafeCSS(css_248z$1)} ${unsafeCSS(css_248z)}`;
 

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:var(--IDS-TAG__BORDER-THICKNESS) 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-FONT-FAMILY-HEADING);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING);text-align:left}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag.ids-tag--clickable{border:var(--IDS-TAG__BORDER-THICKNESS) solid 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:has(button){padding:0!important}.ids-tag.ids-tag--clickable:has(button) button{background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;height:100%;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);text-align:left;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.ids-tag.ids-tag--clickable:has(button) button:focus-visible:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag.ids-tag--clickable:has(button) button:hover{background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable:has(button) button:active{background-color:var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR)}.ids-tag .ids-tag__close-btn{background:none;border:none;color:inherit;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn{border-radius:var(--IDS-BORDER-RADIUS-100);cursor:pointer;height:.875rem;margin:-.25rem -.25rem -.5rem 0;position:relative;width:.875rem}.ids-tag .ids-tag__close-btn button{background:none;border:none;cursor:pointer;height:100%;width:100%}.ids-tag .ids-tag__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-TAG__ICON-COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn button:focus-visible,.ids-tag .ids-tag__close-btn:focus-visible{border-radius:var(--IDS-BORDER-RADIUS-100)}.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-TAG__ICON-HOVER-COLOR)}button.ids-tag--clickable{background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;height:100%;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);text-align:left;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;width:fit-content}button.ids-tag--clickable:focus-visible:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}button.ids-tag--clickable:hover{background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}button.ids-tag--clickable:active{background-color:var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR)}";
+var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:var(--IDS-TAG__BORDER-THICKNESS) 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-FONT-FAMILY-HEADING);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING);text-align:left}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag .ids-tag__close-btn{background:none;border:none;color:inherit;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn{border-radius:var(--IDS-BORDER-RADIUS-100);margin:-.25rem -.25rem -.5rem 0;position:relative}.ids-tag .ids-tag__close-btn,.ids-tag .ids-tag__close-btn button{align-items:center;cursor:pointer;display:flex;height:1.5rem;justify-content:center;width:1.5rem}.ids-tag .ids-tag__close-btn button{background:none;border:none;border-radius:var(--IDS-BORDER-RADIUS-100)}.ids-tag .ids-tag__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-TAG__ICON-COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn button:focus-visible,.ids-tag .ids-tag__close-btn:focus-visible{border-radius:var(--IDS-BORDER-RADIUS-100)}.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-TAG__ICON-HOVER-COLOR)}.ids-tag.ids-tag--clickable{border:var(--IDS-TAG__BORDER-THICKNESS) solid 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:has(button){padding:0!important}.ids-tag.ids-tag--clickable .ids-tag__content>button{background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;height:100%;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);text-align:left;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%}.ids-tag.ids-tag--clickable .ids-tag__content>button:focus-visible:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag.ids-tag--clickable .ids-tag__content>button:hover{background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable .ids-tag__content>button:active{background-color:var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR)}button.ids-tag--clickable{background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;height:100%;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);text-align:left;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;width:fit-content}button.ids-tag--clickable:focus-visible:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}button.ids-tag--clickable:hover{background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}button.ids-tag--clickable:active{background-color:var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR)}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -17,50 +17,6 @@
   gap: 0.5rem;
   justify-content: space-between;
 }
-.ids-tag.ids-tag--clickable {
-  cursor: pointer;
-  border: var(--IDS-TAG__BORDER-THICKNESS) solid var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);
-  color: var(--IDS-TAG--INTERACTIVE__COLOR);
-  font-weight: var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT);
-}
-.ids-tag.ids-tag--clickable:has(button) {
-  padding: 0 !important;
-}
-.ids-tag.ids-tag--clickable:has(button) button {
-  background: none;
-  border: none;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  -moz-user-select: -moz-none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  border-radius: var(--IDS-TAG__BORDER-RADIUS);
-  padding: var(--IDS-TAG__PADDING);
-  text-align: left;
-  width: 100%;
-  height: 100%;
-}
-.ids-tag.ids-tag--clickable:has(button) button:focus-visible:focus-visible {
-  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-tag.ids-tag--clickable:has(button) button:hover {
-  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
-  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
-}
-.ids-tag.ids-tag--clickable:has(button) button:active {
-  color: var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR);
-  background-color: var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);
-}
 .ids-tag .ids-tag__close-btn {
   min-width: 1.5rem;
   min-height: 1.5rem;
@@ -84,17 +40,25 @@
 .ids-tag .ids-tag__close-btn {
   margin: -0.25rem -0.25rem -0.5rem 0;
   position: relative;
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: var(--IDS-BORDER-RADIUS-100);
   cursor: pointer;
+  border-radius: var(--IDS-BORDER-RADIUS-100);
 }
 .ids-tag .ids-tag__close-btn button {
   cursor: pointer;
   background: none;
   border: none;
-  width: 100%;
-  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--IDS-BORDER-RADIUS-100);
 }
 .ids-tag .ids-tag__close-btn:before {
   font: icon;
@@ -103,12 +67,15 @@
   position: absolute;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
+  position: absolute;
   content: "\e934";
-  font-size: 0.875rem;
+  font-size: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--IDS-TAG__ICON-COLOR);
+  pointer-events: none;
 }
 .ids-tag .ids-tag__close-btn:focus-visible,
 .ids-tag .ids-tag__close-btn button:focus-visible {
@@ -117,6 +84,50 @@
 .ids-tag .ids-tag__close-btn:hover:before {
   color: var(--IDS-TAG__ICON-HOVER-COLOR);
 }
+.ids-tag.ids-tag--clickable {
+  cursor: pointer;
+  border: var(--IDS-TAG__BORDER-THICKNESS) solid var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);
+  color: var(--IDS-TAG--INTERACTIVE__COLOR);
+  font-weight: var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT);
+}
+.ids-tag.ids-tag--clickable:has(button) {
+  padding: 0 !important;
+}
+.ids-tag.ids-tag--clickable .ids-tag__content > button {
+  background: none;
+  border: none;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: var(--IDS-TAG__BORDER-RADIUS);
+  padding: var(--IDS-TAG__PADDING);
+  text-align: left;
+  width: 100%;
+  height: 100%;
+}
+.ids-tag.ids-tag--clickable .ids-tag__content > button:focus-visible:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-tag.ids-tag--clickable .ids-tag__content > button:hover {
+  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
+}
+.ids-tag.ids-tag--clickable .ids-tag__content > button:active {
+  color: var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);
+}
 
 button.ids-tag--clickable {
   background: none;

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

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

package/components/toolbar/toolbar-lit.js

@@ -0,0 +1,7 @@
+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-toolbar{background-color:var(--IDS-TOOLBAR__BACKGROUND-COLOR);border-bottom:.0625rem solid var(--IDS-TOOLBAR__BORDER-COLOR);box-sizing:border-box;padding:1rem;width:100%}.ids-toolbar .ids-toolbar__content{margin:0 auto;max-width:var(--IDS__MAX-WIDTH)}@media (min-width:640px){.ids-toolbar{padding:1.25rem}}";
+
+var toolbarLit = css`${unsafeCSS(css_248z)}`;
+
+export { toolbarLit as default };

package/components/toolbar/toolbar.css

@@ -0,0 +1,28 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-toolbar {
+  padding: 1rem;
+  border-bottom: 0.0625rem solid var(--IDS-TOOLBAR__BORDER-COLOR);
+  background-color: var(--IDS-TOOLBAR__BACKGROUND-COLOR);
+  box-sizing: border-box;
+  width: 100%;
+}
+.ids-toolbar .ids-toolbar__content {
+  max-width: var(--IDS__MAX-WIDTH);
+  margin: 0 auto;
+}
+@media (min-width: 640px) {
+  .ids-toolbar {
+    padding: 1.25rem;
+  }
+}

package/components/tooltip/tooltip-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tooltip{position:relative!important;width:max-content}.ids-tooltip,.ids-tooltip .ids-tooltip__trigger{display:inline-flex}.ids-tooltip .ids-tooltip__content{background-color:var(--IDS-TOOLTIP__BACKGROUND-COLOR);border:var(--IDS-TOOLTIP__BORDER-THICKNESS) solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS-MEDIUM);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-1);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;padding:var(--IDS-TOOLTIP__PADDING);position:absolute;text-align:left;width:max-content;z-index:2000}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.5rem;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.5rem;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.5rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.5rem;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
+var css_248z = ".ids-tooltip{display:inline-flex;position:relative!important;width:max-content}.ids-tooltip .ids-tooltip__content{background-color:var(--IDS-TOOLTIP__BACKGROUND-COLOR);border:var(--IDS-TOOLTIP__BORDER-THICKNESS) solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS-MEDIUM);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-1);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;padding:var(--IDS-TOOLTIP__PADDING);position:absolute;text-align:left;width:max-content;z-index:2000}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.5rem;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.5rem;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.5rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.5rem;right:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__trigger{display:inline-flex}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}.ids-tooltip__content{background-color:var(--IDS-TOOLTIP__BACKGROUND-COLOR);border:var(--IDS-TOOLTIP__BORDER-THICKNESS) solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS-MEDIUM);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-1);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;line-height:1.5rem;padding:var(--IDS-TOOLTIP__PADDING);position:absolute;text-align:left;width:max-content;z-index:2000}.ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.5rem;transform:translate(-50%,-100%)}.ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.5rem;transform:translateY(-100%)}.ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.5rem;left:0;transform:translateY(100%)}.ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.5rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.5rem;right:0;transform:translateY(100%)}";
 
 var tooltipLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tooltip/tooltip.css

@@ -3,9 +3,6 @@
   position: relative !important;
   width: max-content;
 }
-.ids-tooltip .ids-tooltip__trigger {
-  display: inline-flex;
-}
 .ids-tooltip .ids-tooltip__content {
   display: none;
   color: var(--IDS-TOOLTIP__COLOR);
@@ -54,6 +51,58 @@
   transform: translateY(100%);
   bottom: -0.5rem;
 }
+.ids-tooltip .ids-tooltip__trigger {
+  display: inline-flex;
+}
 .ids-tooltip:focus-within .ids-tooltip__content, .ids-tooltip:hover .ids-tooltip__content {
   display: inline-block;
+}
+
+.ids-tooltip__content {
+  display: none;
+  color: var(--IDS-TOOLTIP__COLOR);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  box-sizing: border-box;
+  position: absolute;
+  text-align: left;
+  width: max-content;
+  z-index: 2000;
+  background-color: var(--IDS-TOOLTIP__BACKGROUND-COLOR);
+  border: var(--IDS-TOOLTIP__BORDER-THICKNESS) solid var(--IDS-TOOLTIP__BORDER-COLOR);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
+  border-radius: var(--IDS-BORDER-RADIUS-MEDIUM);
+  padding: var(--IDS-TOOLTIP__PADDING);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+}
+.ids-tooltip__content.ids-tooltip__content--top-left {
+  left: 0;
+  transform: translateY(-100%);
+  top: -0.5rem;
+}
+.ids-tooltip__content.ids-tooltip__content--top {
+  left: 50%;
+  transform: translate(-50%, -100%);
+  top: -0.5rem;
+}
+.ids-tooltip__content.ids-tooltip__content--top-right {
+  right: 0;
+  transform: translateY(-100%);
+  top: -0.5rem;
+}
+.ids-tooltip__content.ids-tooltip__content--bottom-left {
+  left: 0;
+  transform: translateY(100%);
+  bottom: -0.5rem;
+}
+.ids-tooltip__content.ids-tooltip__content--bottom {
+  left: 50%;
+  right: auto;
+  transform: translate(-50%, 100%);
+  bottom: -0.5rem;
+}
+.ids-tooltip__content.ids-tooltip__content--bottom-right {
+  right: 0;
+  transform: translateY(100%);
+  bottom: -0.5rem;
 }