@inera/ids-design 8.2.0 → 9.0.0

package/components/tabs/tabs.css

@@ -1,4 +1,19 @@
-@media (max-width: 1023px) {
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -75,4 +90,143 @@
 }
 .ids-tabs .ids-tabs__panels {
   position: relative;
+}
+
+.ids-tab {
+  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;
+}
+.ids-tab:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-tab {
+  display: flex;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: var(--IDS-TAB__COLOR);
+  overflow: hidden;
+  padding: 0.4375rem 1.4375rem;
+  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);
+  text-decoration: none !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  background-color: var(--IDS-TABS__BACKGROUND-COLOR);
+}
+.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-visible {
+  z-index: 2;
+}
+.ids-tab .ids-tab__label {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: var(--IDS-TAB__COLOR);
+  background-color: var(--IDS-TABS__BACKGROUND-COLOR);
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.6875rem;
+  text-align: center;
+}
+.ids-tab .ids-tab__label:before {
+  content: "";
+  background-color: transparent;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  right: 0;
+  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-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);
+  background-color: var(--IDS-TAB--SELECTED__BACKGROUND-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 {
+  display: flex !important;
+  align-self: center !important;
+  font-size: 1.25rem !important;
+  color: var(--IDS-TAB-ICON__COLOR);
+  margin-right: 0.5rem;
+}
+.ids-tab .ids-tab-extra {
+  margin-left: 0.5rem;
+}
+
+.ids-tab-panel {
+  display: none;
+  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;
+}
+.ids-tab-panel.ids-tab-panel--compact {
+  margin-top: 0.125rem;
+}
+.ids-tab-panel.ids-tab-panel--selected {
+  display: block;
 }

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: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: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--clickable ::slotted(button:active),.ids-tag.ids-tag--clickable: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;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-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: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:focus-visible{border-radius:100%}.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-TAG__ICON-HOVER-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: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: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: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 tagLit = css`${unsafeCSS(css_248z)}`;
 

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

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

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ":host(.ids-tag){border-radius:var(--IDS-TAG__BORDER-RADIUS);display:inline-block}.ids-tag.ids-tag--clickable{padding:0!important}.ids-tag.ids-tag--clickable ::slotted(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 ::slotted(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 ::slotted(button:hover){background-color:var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button:active){background-color:var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);color:var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR)}";
+
+var tagShadowLit = css`${unsafeCSS(css_248z)}`;
+
+export { tagShadowLit as default };

package/components/tag/tag-shadow.css

@@ -0,0 +1,58 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+:host(.ids-tag) {
+  display: inline-block;
+  border-radius: var(--IDS-TAG__BORDER-RADIUS);
+}
+
+.ids-tag.ids-tag--clickable {
+  padding: 0 !important;
+}
+.ids-tag.ids-tag--clickable ::slotted(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 ::slotted(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 ::slotted(button:hover) {
+  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
+}
+.ids-tag.ids-tag--clickable ::slotted(button:active) {
+  color: var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);
+}

package/components/tag/tag.css

@@ -38,15 +38,12 @@
   color: var(--IDS-TAG--INTERACTIVE__COLOR);
   font-weight: var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT);
 }
-.ids-tag.ids-tag--clickable: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:hover {
-  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
-  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
+.ids-tag.ids-tag--clickable:has(button) {
+  padding: 0 !important;
 }
-.ids-tag.ids-tag--clickable ::slotted(button) {
+.ids-tag.ids-tag--clickable:has(button) button {
+  background: none;
+  border: none;
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -64,9 +61,18 @@
   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:active,
-.ids-tag.ids-tag--clickable ::slotted(button:active) {
+.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);
 }
@@ -96,13 +102,20 @@
   width: 0.875rem;
   height: 0.875rem;
   border-radius: 100%;
+  cursor: pointer;
+}
+.ids-tag .ids-tag__close-btn button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  height: 100%;
 }
 .ids-tag .ids-tag__close-btn:before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e934";
@@ -112,9 +125,47 @@
   transform: translate(-50%, -50%);
   color: var(--IDS-TAG__ICON-COLOR);
 }
-.ids-tag .ids-tag__close-btn:focus-visible {
+.ids-tag .ids-tag__close-btn:focus-visible,
+.ids-tag .ids-tag__close-btn button:focus-visible {
   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;
+  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%;
+  width: fit-content;
+}
+button.ids-tag--clickable:focus-visible:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+button.ids-tag--clickable:hover {
+  color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-HOVER__BACKGROUND-COLOR);
+}
+button.ids-tag--clickable:active {
+  color: var(--IDS-TAG--INTERACTIVE-ACTIVE__COLOR);
+  background-color: var(--IDS-TAG--INTERACTIVE-ACTIVE__BACKGROUND-COLOR);
 }

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);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-1);box-sizing:border-box;color:var(--IDS-TOOLTIP__COLOR);display:none;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{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);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 tooltipLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tooltip/tooltip.css

@@ -21,6 +21,7 @@
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
   border-radius: var(--IDS-BORDER-RADIUS);
   padding: var(--IDS-TOOLTIP__PADDING);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left {
   left: 0;