@inera/ids-design 7.2.2 → 8.0.0

package/components/stepper/stepper.css

@@ -17,7 +17,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -25,6 +25,149 @@
 /*******
 * A11Y
 ********/
+:root {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
+  --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XXL__FONT-SIZE: 2rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
+  --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 700;
+  --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
+  --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 700;
+  --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
+  --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 700;
+  --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
+  --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
+  --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 700;
+  --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
+  --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
+  --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 700;
+  --IDS-HEADING-XS__LETTER-SPACING: 0;
+  --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
+  --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
+  --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
+  --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
+  --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
+  --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
+  --IDS-BODY__FONT-SIZE: 1rem;
+  --IDS-BODY__LINE-HEIGHT: 1.5rem;
+  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
+  --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);
+}
+:root.ids--1177-pro, :root.ids--1177-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+:root.ids--inera, :root.ids--inera-admin {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+  --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
+  --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
+  --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
+  --IDS-HEADING-XXL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XXL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
+  --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
+  --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
+  --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
+  --IDS-HEADING-XL__FONT-WEIGHT: 600;
+  --IDS-HEADING-XL__LETTER-SPACING: inherit;
+  --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-L__FONT-SIZE: 1.5rem;
+  --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
+  --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
+  --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
+  --IDS-HEADING-L__FONT-WEIGHT: 600;
+  --IDS-HEADING-L__LETTER-SPACING: inherit;
+  --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-M__FONT-SIZE: 1.375rem;
+  --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
+  --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
+  --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
+  --IDS-HEADING-M__FONT-WEIGHT: 600;
+  --IDS-HEADING-M__LETTER-SPACING: inherit;
+  --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-S__FONT-SIZE: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
+  --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
+  --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
+  --IDS-HEADING-S__FONT-WEIGHT: 600;
+  --IDS-HEADING-S__LETTER-SPACING: inherit;
+  --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
+  --IDS-HEADING-XS__FONT-SIZE: 1rem;
+  --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
+  --IDS-HEADING-XS__FONT-WEIGHT: 600;
+  --IDS-HEADING-XS__LETTER-SPACING: inherit;
+  --IDS-BODY__LINE-HEIGHT: 1.625rem;
+  --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
+  --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;
+}
+:root.ids--dark {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
+}
+:root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
 :host([last]) .ids-step::after {
   content: none;
 }
@@ -35,11 +178,10 @@
 
 .ids-step {
   margin-bottom: 1rem;
-  padding: 1rem;
   position: relative;
-  border: var(--IDS-STEP__BORDER);
+  border: var(--IDS-STEP__BORDER-THICKNESS) solid var(--IDS-STEP__BORDER-COLOR);
   border-radius: 0.3125rem;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-STEP__BACKGROUND-COLOR);
   display: flex;
   flex-direction: column;
 }
@@ -57,16 +199,18 @@
   color: var(--IDS-STEP__LABEL-COLOR);
 }
 .ids-step .ids-step__button {
+  padding: var(--IDS-STEP__BUTTON-PADDING-MOBILE);
+  box-sizing: border-box;
   width: 100%;
   display: block;
   background: none;
   border: none;
-  border-radius: 0.3125rem;
+  border-radius: 0.1875rem;
   cursor: pointer;
 }
 .ids-step .ids-step__button:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+  outline-offset: 0 !important;
 }
 .ids-step .ids-step__button.ids-step__button--disabled {
   pointer-events: none;
@@ -107,7 +251,6 @@
 .ids-step .ids-step__button-inner {
   display: flex;
   align-items: flex-start;
-  flex-wrap: wrap;
   gap: 1rem;
   width: 100%;
 }
@@ -119,6 +262,11 @@
   width: calc(100% - 3.75rem);
   min-height: 2.625rem;
 }
+.ids-step .ids-step__headline-label {
+  display: flex;
+  flex-direction: column;
+  align-self: center !important;
+}
 .ids-step .ids-step__indicator-wrapper {
   display: flex;
   align-items: flex-start;
@@ -133,7 +281,7 @@
   height: 2.625rem;
   border-radius: 6.25rem;
   background-color: var(--IDS-STEP__INDICATOR-BACKGROUND-COLOR);
-  border: var(--IDS-STEP__INDICATOR-BORDER);
+  border: var(--IDS-STEP__BORDER-THICKNESS) solid var(--IDS-STEP__INDICATOR-BORDER-COLOR);
   color: var(--IDS-STEP__INDICATOR-COLOR);
   font-family: var(--IDS-STEP__INDICATOR-FONT-FAMILY);
   font-weight: 400 !important;
@@ -141,11 +289,12 @@
 }
 .ids-step .ids-step__indicator.ids-step__indicator--selected {
   background-color: var(--IDS-STEP--SELECTED__INDICATOR-BACKGROUND-COLOR);
-  color: var(--IDS-COLOR-NEUTRAL-100);
+  border: var(--IDS-STEP__BORDER-THICKNESS) solid var(--IDS-STEP__SELECTED__INDICATOR-BORDER-COLOR);
+  color: var(--IDS-STEP--SELECTED__INDICATOR-COLOR);
 }
 .ids-step .ids-step__indicator.ids-step__indicator--valid {
   background-color: var(--IDS-STEP--VALID__INDICATOR-BACKGROUND-COLOR);
-  border: var(--IDS-STEP--VALID__INDICATOR-BORDER);
+  border: var(--IDS-STEP__BORDER-THICKNESS) solid var(--IDS-STEP--VALID__INDICATOR-BORDER-COLOR);
 }
 .ids-step .ids-step__indicator.ids-step__indicator--valid:before {
   font: icon;
@@ -161,7 +310,7 @@
 }
 .ids-step .ids-step__indicator.ids-step__indicator--invalid {
   background-color: var(--IDS-STEP--INVALID__INDICATOR-BACKGROUND-COLOR);
-  border: var(--IDS-STEP--INVALID__INDICATOR-BORDER);
+  border: var(--IDS-STEP__BORDER-THICKNESS) solid var(--IDS-STEP--INVALID__INDICATOR-BORDER-COLOR);
   box-shadow: inset 0 0 0 0.0625rem var(--IDS-STEP--INVALID__INDICATOR-ICON-COLOR);
 }
 .ids-step .ids-step__indicator.ids-step__indicator--invalid:before {
@@ -176,11 +325,6 @@
   color: var(--IDS-STEP--INVALID__INDICATOR-ICON-COLOR);
   font-size: 1.25rem !important;
 }
-.ids-step .ids-step__headline-label {
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-}
 .ids-step .ids-step__label {
   display: flex;
   align-self: flex-start;
@@ -227,19 +371,20 @@
   pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  content: "\e906";
+  content: "\e936";
   font-size: 1.25rem;
-  top: 50%;
+  top: 0.625rem;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   color: var(--IDS-STEP__CHEVRON-COLOR);
 }
 .ids-step .ids-step__chevron.ids-step__chevron--expanded:before {
-  content: "\e909";
+  content: "\e939";
 }
 .ids-step .ids-step__content {
-  padding: 1rem 0 0 0;
+  padding: var(--IDS-STEP__CONTENT-PADDING-MOBILE);
   display: none;
+  color: var(--IDS-FONT-COLOR);
 }
 .ids-step .ids-step__content.ids-step__content--expanded {
   display: block;
@@ -252,7 +397,10 @@
     height: 1.25rem;
     bottom: -1.3125rem;
   }
+  .ids-step .ids-step__button {
+    padding: var(--IDS-STEP__BUTTON-PADDING-DESKTOP);
+  }
   .ids-step .ids-step__content {
-    padding: 1.25rem 0 0 4rem;
+    padding: var(--IDS-STEP__CONTENT-PADDING-DESKTOP);
   }
 }

package/components/table/table.css

@@ -12,21 +12,24 @@
 .ids-table th {
   background-color: var(--IDS-TABLE__HEAD-BACKGROUND-COLOR);
   text-align: start;
-  color: var(--IDS-COLOR-NEUTRAL-20);
+  border-bottom: var(--IDS-TABLE__HEAD-BORDER-BOTTOM);
 }
 .ids-table th,
 .ids-table td {
-  padding: 0.625rem;
+  padding: 0.75rem 1.25rem;
 }
 .ids-table td,
 .ids-table th {
   border-left: var(--IDS-TABLE__CELL-BORDER);
   border-top: var(--IDS-TABLE__CELL-BORDER);
-  color: var(--IDS-COLOR-NEUTRAL-20);
+  color: var(--IDS-TABLE__CELL-COLOR);
 }
 .ids-table tr:first-child th {
   border-top: 0;
 }
+.ids-table tbody tr:first-child td {
+  border-top: var(--IDS-TABLE__FIRST-ROW-CELL-BORDER-TOP);
+}
 .ids-table tr td:first-child,
 .ids-table tr th:first-child {
   border-left: 0;

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(:focus),:host(:not([selected]):focus){outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0;z-index:10}.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{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab{-webkit-touch-callout:none;align-items:center;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:var(--IDS-TAB__COLOR);cursor:pointer;display:flex;justify-content:center;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;-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{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 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{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{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tab{-webkit-touch-callout:none;align-items:center;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;justify-content:center;outline:none;overflow:hidden;padding:.4375rem 1.4375rem;position:relative;-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{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__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{background-color:var(--IDS-TAB--SELECTED__BACKGROUND-COLOR);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{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,.ids-tab ::slotted([slot=icon]){align-self:center!important;color:var(--IDS-TAB-ICON__COLOR);display:flex!important;font-size:1.25rem!important}";
 
 var tabLit = css`${unsafeCSS(css_248z)}`;
 

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;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 = ":host([selected=true]){display:block}.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 tabPanelLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tabs/tab-panel.css

@@ -7,6 +7,8 @@
   margin-top: 1.5rem;
   outline-offset: 0.125rem;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR);
+  color: var(--IDS-TAB-PANEL__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids-tab-panel .ids-tab-panel--hidden {
   display: none;

package/components/tabs/tab.css

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -61,9 +61,9 @@
   color: var(--IDS-TAB__COLOR);
   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-top: var(--IDS-TAB__BORDER);
+  border-left: var(--IDS-TAB__BORDER);
+  border-right: var(--IDS-TAB__BORDER);
   border-radius: var(--IDS-TAB__BORDER-RADIUS);
 }
 .ids-tab:after {
@@ -98,30 +98,42 @@
   width: 100%;
   left: 0;
   right: 0;
-  height: var(--IDS-TAB--SELECTED__BORDER-HEIGHT);
+  height: var(--IDS-TAB--SELECTED__TOP-BORDER-HEIGHT);
   top: 0;
 }
+.ids-tab:hover {
+  padding: 0.4375rem 1.375rem;
+  border-top: var(--IDS-TAB--HOVER-BORDER-TOP);
+  border-left: var(--IDS-TAB--HOVER-BORDER);
+  border-right: var(--IDS-TAB--HOVER-BORDER);
+}
+.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 {
   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);
+  color: var(--IDS-TAB--SELECTED__COLOR);
+  background-color: var(--IDS-TAB--SELECTED__BACKGROUND-COLOR);
+  border-top: var(--IDS-TAB--SELECTED__BORDER-TOP);
+  border-left: var(--IDS-TAB--SELECTED__BORDER);
+  border-right: var(--IDS-TAB--SELECTED__BORDER);
 }
 .ids-tab.ids-tab--selected .ids-tab__label {
-  color: var(--IDS-TAB--SELECTED_COLOR);
+  color: var(--IDS-TAB--SELECTED__COLOR);
 }
 .ids-tab.ids-tab--selected .ids-tab__label:before {
-  background-color: var(--IDS-TAB--SELECTED-BORDER-COLOR);
+  background-color: var(--IDS-TAB--SELECTED__BORDER-COLOR);
 }
 .ids-tab.ids-tab--selected:after {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-TAB--SELECTED__BORDER-BOTTOM-COLOR);
 }
 .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);
+  color: var(--IDS-TAB-ICON__COLOR);
 }

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__select.ids-tabs__select--light select{background-color:var(--IDS-COLOR-NEUTRAL-100)}.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$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-tabs__select--light select{background-color:var(--IDS-TABS--LIGHT__BACKGROUND)}.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-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING)}.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{border:var(--IDS-INPUT__BORDER);cursor:pointer;display:inline-block!important;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.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{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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__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);color:var(--IDS-INPUT__COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;padding:var(--IDS-INPUT__PADDING)}.ids-select__select:disabled,.ids-select__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__select.ids-input--light{background-color:var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR)}.ids-select__select.ids-input--light:disabled,.ids-select__select.ids-input--light[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__select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.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.ids-input--invalid,.ids-select__select[aria-invalid=true]{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)!important;border:var(--IDS-FORM--INVALID__BORDER)}.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)}.ids-select__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__select:disabled{cursor:default}.ids-select__select:disabled.ids-input--light{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: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{-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:20}.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)} ${unsafeCSS(css_248z$1)}`;
 

package/components/tabs/tabs.css

@@ -14,7 +14,7 @@
   display: block;
 }
 .ids-tabs .ids-tabs__select.ids-tabs__select--light select {
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  background-color: var(--IDS-TABS--LIGHT__BACKGROUND);
 }
 .ids-tabs .ids-tabs__tabs {
   display: none;

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-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;color:inherit;cursor:pointer;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{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn{border-radius:100%;height:.875rem;margin:-.25rem -.25rem -.5rem 0;position:relative;width:.875rem}.ids-tag .ids-tag__close-btn:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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 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:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);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);text-align:left;-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;color:inherit;cursor:pointer;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{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn{border-radius:100%;height:.875rem;margin:-.25rem -.25rem -.5rem 0;position:relative;width:.875rem}.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%;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-TAG__ICON-HOVER-COLOR)}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -14,16 +14,17 @@
 * A11Y
 ********/
 .ids-tag {
-  font-family: var(--IDS-TAG__FONT-FAMILY);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
   font-weight: 400;
   color: var(--IDS-TAG__COLOR);
   padding: var(--IDS-TAG__PADDING);
-  border: 0.063rem solid var(--IDS-TAG__BORDER-COLOR);
+  border: var(--IDS-TAG__BORDER-THICKNESS) solid var(--IDS-TAG__BORDER-COLOR);
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
   display: inline-block;
   line-height: 1rem !important;
   height: max-content;
+  text-align: left;
 }
 .ids-tag .ids-tag__content {
   display: flex;
@@ -33,7 +34,7 @@
 }
 .ids-tag.ids-tag--clickable {
   cursor: pointer;
-  border-color: var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);
+  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);
 }
@@ -43,6 +44,7 @@
 }
 .ids-tag.ids-tag--clickable:hover {
   color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
 }
 .ids-tag.ids-tag--clickable ::slotted(button) {
   min-width: 1.5rem;
@@ -61,6 +63,7 @@
   user-select: none;
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
   padding: var(--IDS-TAG__PADDING);
+  text-align: left;
 }
 .ids-tag .ids-tag__close-btn {
   min-width: 1.5rem;
@@ -83,11 +86,11 @@
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-tag .ids-tag__close-btn {
-  border-radius: 100%;
   margin: -0.25rem -0.25rem -0.5rem 0;
   position: relative;
   width: 0.875rem;
   height: 0.875rem;
+  border-radius: 100%;
 }
 .ids-tag .ids-tag__close-btn:before {
   font: icon;
@@ -102,11 +105,11 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--IDS-ICON__COLOR);
+  color: var(--IDS-TAG__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);
+  color: var(--IDS-TAG__ICON-HOVER-COLOR);
 }

package/components/tooltip/tooltip-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tooltip{display:inline-block;position:relative!important}.ids-tooltip .ids-tooltip__trigger{display:inline}.ids-tooltip .ids-tooltip__content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-TOOLTIP__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;max-width:90vw;padding:.625rem 1.25rem;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.625rem;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.625rem;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.625rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.625rem;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-block;position:relative!important;width:max-content}.ids-tooltip .ids-tooltip__trigger{display:inline}.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);box-shadow:var(--IDS-BOX-SHADOW);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;font-size:1rem;line-height:1.5rem;max-width:90vw;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:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-.625rem;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-.625rem;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-.625rem;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-.625rem;left:50%;right:auto;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-.625rem;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
 
 var tooltipLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tooltip/tooltip.css

@@ -1,6 +1,7 @@
 .ids-tooltip {
   display: inline-block;
   position: relative !important;
+  width: max-content;
 }
 .ids-tooltip .ids-tooltip__trigger {
   display: inline;
@@ -8,17 +9,19 @@
 .ids-tooltip .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;
   max-width: 90vw;
-  z-index: 2;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  border: 0.063rem solid var(--IDS-TOOLTIP__BORDER-COLOR);
-  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
+  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);
   border-radius: var(--IDS-BORDER-RADIUS);
-  padding: 0.625rem 1.25rem;
+  padding: var(--IDS-TOOLTIP__PADDING);
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left {
   left: 0;

package/global/_partials.css

@@ -0,0 +1,15 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/