@inera/ids-design 4.9.1 → 5.0.0

package/components/notification-badge/notification-badge-lit.d.ts

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

package/components/notification-badge/notification-badge-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-notification-badge{align-items:center;background-color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border-radius:1.5rem;box-sizing:border-box;color:var(--IDS-NOTIFICATION-BADGE__COLOR);display:inline-block;font-size:.875rem;font-weight:400;justify-content:center;line-height:1.5rem;min-height:1.5rem;min-width:1.5rem;padding:0 .5rem;text-align:center}.ids-notification-badge.ids-notification-badge--outlined{background-color:#fff;border:1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR)}";
+var css_248z = ".ids-notification-badge{align-items:center;background-color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border:1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);border-radius:1.5rem;box-sizing:border-box;color:var(--IDS-NOTIFICATION-BADGE__COLOR);display:inline-block;font-size:.875rem;font-weight:400;justify-content:center;line-height:1.5rem;min-height:1.5rem;min-width:1.5rem;padding:0 .5rem;text-align:center}.ids-notification-badge.ids-notification-badge--outlined{background-color:#fff;color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR)}";
 
 var notificationBadgeLit = css`${unsafeCSS(css_248z)}`;
 

package/components/notification-badge/notification-badge.css

@@ -1 +1,21 @@
-.ids-notification-badge{background-color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);color:var(--IDS-NOTIFICATION-BADGE__COLOR);font-size:0.875rem;font-weight:normal;min-width:1.5rem;min-height:1.5rem;padding:0 0.5rem;box-sizing:border-box;border-radius:1.5rem;text-align:center;display:inline-block;line-height:1.5rem;align-items:center;justify-content:center}.ids-notification-badge.ids-notification-badge--outlined{color:var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);background-color:white;border:1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR)}
+.ids-notification-badge {
+  background-color: var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
+  border: 1px solid var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
+  color: var(--IDS-NOTIFICATION-BADGE__COLOR);
+  font-size: 0.875rem;
+  font-weight: normal;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
+  border-radius: 1.5rem;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+}
+.ids-notification-badge.ids-notification-badge--outlined {
+  color: var(--IDS-NOTIFICATION-BADGE__BACKGROUND-COLOR);
+  background-color: white;
+}

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

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

package/components/popover/popover-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-popover{display:inline-block;position:relative}.ids-popover .ids-popover__trigger{background:none;border:none;color:inherit;cursor:pointer;outline:inherit;padding:0}.ids-popover .ids-popover__trigger:focus{border-radius:var(--btn_border-radius);outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}";
+
+var popoverLit = css`${unsafeCSS(css_248z)}`;
+
+export { popoverLit as default };

package/components/popover/popover.css

@@ -0,0 +1,24 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+.ids-popover {
+  position: relative;
+  display: inline-block;
+}
+.ids-popover .ids-popover__trigger {
+  cursor: pointer;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  outline: inherit;
+}
+.ids-popover .ids-popover__trigger:focus {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+  border-radius: var(--btn_border-radius);
+}

package/components/popover-content/popover-content-lit.d.ts

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

package/components/popover-content/popover-content-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ":host([visible]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background:#fff;border:1px solid var(--popover_border);border-radius:var(--popover-content_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;max-height:260px;padding:20px;position:relative;width:260px;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-BASE__FONT-COLOR)}.ids-popover-content .ids-headline-4,.ids-popover-content ::slotted(h3){color:var(--IDS-BASE__FONT-COLOR);font-family:var(--header-4-font-family);font-size:var(--header-4-font-size);font-style:normal;font-weight:var(--header-4-font-weight);letter-spacing:var(--header-4-letter-spacing);line-height:var(--header-4-line-height);margin-bottom:8px!important}.ids-popover-content .ids-popover-content__caret{position:absolute}.ids-popover-content .ids-popover-content__caret.hide{display:none}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top{bottom:-27px;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-28px;left:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-28px;right:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:2px;right:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-28px;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:2px;left:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-28px;top:2px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:2px;top:-28px}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:2px;top:-28px}.ids-popover-content .ids-popover-content__caret-body{background:#fff;display:block;position:absolute;z-index:4}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right{bottom:0;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top{clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top{clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:0;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:0;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border{background-color:var(--popover_border);position:absolute;z-index:1}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right{background-color:var(--popover_border);bottom:-2px;clip-path:polygon(0 0,50% 100%,100% 0);height:.6rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top{background-color:var(--popover_border);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top{background-color:var(--popover_border);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-2px;transform:translateY(-50%);width:.6rem}.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right{clip-path:polygon(0 100%,50% 0,100% 100%);height:.6rem;top:-2px;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(3px);height:0;position:absolute;width:0;z-index:1}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right{border-left:.625rem solid transparent;border-right:.625rem solid transparent;border-top:.625rem solid rgba(0,0,0,.15);bottom:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;right:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top{border-bottom:.5625rem solid transparent;border-right:.5625rem solid rgba(53,53,53,.15);border-top:.5625rem solid transparent;left:-7px;transform:translateY(-50%)}.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right{border-bottom:.625rem solid rgba(0,0,0,.15);border-left:.625rem solid transparent;border-right:.625rem solid transparent;top:-7px;transform:translateX(-50%)}.ids-popover-content .ids-popover-content__inner-wrapper{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row-reverse;flex-wrap:wrap;position:relative;z-index:4}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:20px;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__text-wrapper{display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 20px);margin-right:-17px;max-width:100%;overflow:auto;overflow-x:hidden;padding-right:20px;position:relative;text-align:left;width:100%;width:calc(100% - 20px)}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--focus_outline);outline-offset:10px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-20px;position:absolute;width:14px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-SCROLL_BACKGROUND-COLOR);border-radius:10px;margin-bottom:10px;margin-top:35px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border-radius:10px}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:#555}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;color:inherit;cursor:pointer;outline:inherit;padding:0}.ids-popover-content .ids-popover-content__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}";
+
+var popoverContentLit = css`${unsafeCSS(css_248z)}`;
+
+export { popoverContentLit as default };

package/components/popover-content/popover-content.css

@@ -0,0 +1,306 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+:host([visible]) {
+  display: block;
+}
+
+:host {
+  display: none;
+  position: absolute;
+  width: max-content;
+  color: var(--IDS-BASE__FONT-COLOR);
+}
+
+.ids-popover-content {
+  background: white;
+  border: 1px solid var(--popover_border);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  border-radius: var(--popover-content_border-radius);
+  padding: 20px;
+  position: relative;
+  z-index: 2;
+  max-height: 260px;
+  width: 260px;
+  box-sizing: border-box;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  /* Handle on hover */
+}
+.ids-popover-content ::slotted(*) {
+  color: var(--IDS-BASE__FONT-COLOR);
+}
+.ids-popover-content .ids-headline-4,
+.ids-popover-content ::slotted(h3) {
+  margin-bottom: 8px !important;
+  color: var(--IDS-BASE__FONT-COLOR);
+  font-style: normal;
+  font-family: var(--header-4-font-family);
+  font-size: var(--header-4-font-size);
+  font-weight: var(--header-4-font-weight);
+  letter-spacing: var(--header-4-letter-spacing);
+  line-height: var(--header-4-line-height);
+}
+.ids-popover-content .ids-popover-content__caret {
+  position: absolute;
+}
+.ids-popover-content .ids-popover-content__caret.hide {
+  display: none;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--top {
+  left: 50%;
+  bottom: -27px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left {
+  left: 2px;
+  bottom: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right {
+  right: 2px;
+  bottom: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--left {
+  top: 50%;
+  right: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top {
+  bottom: 2px;
+  right: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom {
+  top: 2px;
+  right: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--right {
+  top: 50%;
+  left: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top {
+  bottom: 2px;
+  left: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom {
+  top: 2px;
+  left: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom {
+  left: 50%;
+  top: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left {
+  left: 2px;
+  top: -28px;
+}
+.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right {
+  right: 2px;
+  top: -28px;
+}
+.ids-popover-content .ids-popover-content__caret-body {
+  background: white;
+  display: block;
+  position: absolute;
+  z-index: 4;
+}
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-left,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--top-right {
+  height: 0.6rem;
+  width: 1.2rem;
+  clip-path: polygon(0 0, 50% 100%, 100% 0);
+  transform: translateX(-50%);
+  bottom: 0;
+}
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-top,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--left-bottom {
+  height: 1.2rem;
+  width: 0.6rem;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+  transform: translateY(-50%);
+  right: 0;
+}
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-top,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--right-bottom {
+  height: 1.2rem;
+  width: 0.6rem;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  transform: translateY(-50%);
+  left: 0;
+}
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-left,
+.ids-popover-content .ids-popover-content__caret-body.ids-popover-content--bottom-right {
+  height: 0.6rem;
+  width: 1.2rem;
+  clip-path: polygon(0 100%, 50% 0, 100% 100%);
+  transform: translateX(-50%);
+  top: 0;
+}
+.ids-popover-content .ids-popover-content__caret-border {
+  background-color: var(--popover_border);
+  position: absolute;
+  z-index: 1;
+}
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-left,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--top-right {
+  background-color: var(--popover_border);
+  height: 0.6rem;
+  width: 1.2rem;
+  clip-path: polygon(0 0, 50% 100%, 100% 0);
+  transform: translateX(-50%);
+  bottom: -2px;
+}
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-top,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--left-bottom {
+  background-color: var(--popover_border);
+  height: 1.2rem;
+  width: 0.6rem;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+  transform: translateY(-50%);
+  right: -2px;
+}
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-top,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--right-bottom {
+  background-color: var(--popover_border);
+  height: 1.2rem;
+  width: 0.6rem;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+  transform: translateY(-50%);
+  left: -2px;
+}
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-left,
+.ids-popover-content .ids-popover-content__caret-border.ids-popover-content--bottom-right {
+  height: 0.6rem;
+  width: 1.2rem;
+  clip-path: polygon(0 100%, 50% 0, 100% 100%);
+  transform: translateX(-50%);
+  top: -2px;
+}
+.ids-popover-content .ids-popover-content__caret-shadow {
+  height: 0px;
+  width: 0px;
+  filter: blur(3px);
+  position: absolute;
+  z-index: 1;
+}
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-left,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--top-right {
+  border-left: 0.625rem solid transparent;
+  border-right: 0.625rem solid transparent;
+  border-top: 0.625rem solid rgba(0, 0, 0, 0.15);
+  transform: translateX(-50%);
+  bottom: -7px;
+}
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-top,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--left-bottom {
+  border-top: 0.5625rem solid transparent;
+  border-bottom: 0.5625rem solid transparent;
+  border-right: 0.5625rem solid rgba(53, 53, 53, 0.15);
+  transform: translateY(-50%);
+  right: -7px;
+}
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-top,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--right-bottom {
+  border-top: 0.5625rem solid transparent;
+  border-bottom: 0.5625rem solid transparent;
+  border-right: 0.5625rem solid rgba(53, 53, 53, 0.15);
+  transform: translateY(-50%);
+  left: -7px;
+}
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-left,
+.ids-popover-content .ids-popover-content__caret-shadow.ids-popover-content--bottom-right {
+  border-left: 0.625rem solid transparent;
+  border-right: 0.625rem solid transparent;
+  border-bottom: 0.625rem solid rgba(0, 0, 0, 0.15);
+  transform: translateX(-50%);
+  top: -7px;
+}
+.ids-popover-content .ids-popover-content__inner-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 4;
+  flex-direction: row-reverse;
+}
+.ids-popover-content .ids-popover-content__close-btn-wrapper {
+  display: block;
+  max-width: 100%;
+  z-index: 1;
+  height: 20px;
+}
+.ids-popover-content .ids-popover-content__text-wrapper {
+  display: block;
+  max-width: 100%;
+  flex-basis: 0;
+  flex-grow: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+  overflow: auto;
+  overflow-x: hidden;
+  padding-right: 20px;
+  margin-right: -17px;
+  height: calc(100% - 20px);
+  width: calc(100% - 20px);
+}
+.ids-popover-content .ids-popover-content__text-wrapper:focus {
+  outline: var(--focus_outline);
+  outline-offset: 10px;
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar {
+  width: 14px;
+  position: absolute;
+  margin-left: -20px;
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_BACKGROUND-COLOR);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  margin-top: 35px;
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb {
+  background: var(--IDS-SCROLL_COLOR);
+  border-radius: 10px;
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.ids-popover-content .ids-popover-content__close-btn {
+  cursor: pointer;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  outline: inherit;
+}
+.ids-popover-content .ids-popover-content__close-btn:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+.ids-popover-content .ids-popover-content__close-btn:focus,
+.ids-popover-content .ids-popover-content__close-icon:focus {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}

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

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

package/components/progressbar/progressbar-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-progressbar{border:var(--progressbar_border);border-radius:10px;box-sizing:border-box;height:15px;position:relative}@media (max-width:1024px){.ids-progressbar{height:10px}}.ids-progressbar .ids-progressbar__progress{background-color:var(--progressbar-fill_background-color);border-radius:10px;display:block;height:15px;left:0;margin-left:-1px;margin-top:-1px;transition:width .3s ease;width:15%}@media (max-width:1024px){.ids-progressbar .ids-progressbar__progress{height:10px}}.ids-progressbar .ids-progressbar__progress--none{display:none}.ids-progressbar .ids-progressbar__label{color:var(--progressbar_color);display:flex;font-size:1.25rem;font-weight:700;justify-content:center;letter-spacing:-.4px;line-height:24px;margin-top:15px}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-progressbar{border:var(--progressbar_border);border-radius:10px;box-sizing:border-box;height:15px;position:relative}@media (max-width:1024px){.ids-progressbar{height:10px}}.ids-progressbar .ids-progressbar__progress{background-color:var(--progressbar-fill_background-color);border-radius:10px;display:block;height:15px;left:0;margin-left:-1px;margin-top:-1px;transition:width .3s ease;width:15%}@media (max-width:1024px){.ids-progressbar .ids-progressbar__progress{height:10px}}.ids-progressbar .ids-progressbar__progress--none{display:none}.ids-progressbar .ids-progressbar__label{color:var(--progressbar_color);display:flex;font-size:1.25rem;font-weight:700;justify-content:center;letter-spacing:-.4px;line-height:24px;margin-top:15px}";
 
 var progressbarLit = css`${unsafeCSS(css_248z)}`;
 

package/components/progressbar/progressbar.css

@@ -1 +1,53 @@
-.ids-progressbar{border:var(--progressbar_border);height:15px;box-sizing:border-box;border-radius:10px;position:relative}@media (max-width: 1024px){.ids-progressbar{height:10px}}.ids-progressbar .ids-progressbar__progress{left:0px;background-color:var(--progressbar-fill_background-color);width:15%;display:block;height:15px;border-radius:10px;transition:width 0.3s ease;margin-top:-1px;margin-left:-1px}@media (max-width: 1024px){.ids-progressbar .ids-progressbar__progress{height:10px}}.ids-progressbar .ids-progressbar__progress--none{display:none}.ids-progressbar .ids-progressbar__label{display:flex;justify-content:center;margin-top:15px;font-size:1.25rem;line-height:24px;letter-spacing:-0.4px;color:var(--progressbar_color);font-weight:700}
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-progressbar {
+  border: var(--progressbar_border);
+  height: 15px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  position: relative;
+}
+@media (max-width: 1024px) {
+  .ids-progressbar {
+    height: 10px;
+  }
+}
+.ids-progressbar .ids-progressbar__progress {
+  left: 0px;
+  background-color: var(--progressbar-fill_background-color);
+  width: 15%;
+  display: block;
+  height: 15px;
+  border-radius: 10px;
+  transition: width 0.3s ease;
+  margin-top: -1px;
+  margin-left: -1px;
+}
+@media (max-width: 1024px) {
+  .ids-progressbar .ids-progressbar__progress {
+    height: 10px;
+  }
+}
+.ids-progressbar .ids-progressbar__progress--none {
+  display: none;
+}
+.ids-progressbar .ids-progressbar__label {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  font-size: 1.25rem;
+  line-height: 24px;
+  letter-spacing: -0.4px;
+  color: var(--progressbar_color);
+  font-weight: 700;
+}

package/components/table/table.css

@@ -1 +1,31 @@
-.ids-table{table-layout:fixed;border-collapse:separate;border-radius:var(--table_broder-radius);border-top:var(--table_border-top);border-left:var(--table_border-lr);border-right:var(--table_border-lr);border-bottom:var(--table_border-bottom);border-spacing:0px;overflow:hidden}.ids-table th{background-color:var(--table-head_background-color);text-align:start;color:var(--table-head_color)}.ids-table th,.ids-table td{padding:10px}.ids-table td,.ids-table th{border-left:var(--table-cell_border);border-top:var(--table-cell_border);color:var(--table-cell_color)}.ids-table tr:first-child th{border-top:0}.ids-table tr td:first-child,.ids-table tr th:first-child{border-left:0}
+.ids-table {
+  table-layout: fixed;
+  border-collapse: separate;
+  border-radius: var(--table_broder-radius);
+  border-top: var(--table_border-top);
+  border-left: var(--table_border-lr);
+  border-right: var(--table_border-lr);
+  border-bottom: var(--table_border-bottom);
+  border-spacing: 0px;
+  overflow: hidden;
+}
+.ids-table th {
+  background-color: var(--table-head_background-color);
+  text-align: start;
+  color: var(--table-head_color);
+}
+.ids-table th, .ids-table td {
+  padding: 10px;
+}
+.ids-table td, .ids-table th {
+  border-left: var(--table-cell_border);
+  border-top: var(--table-cell_border);
+  color: var(--table-cell_color);
+}
+.ids-table tr:first-child th {
+  border-top: 0;
+}
+.ids-table tr td:first-child,
+.ids-table tr th:first-child {
+  border-left: 0;
+}

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

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

package/components/tabs/tabs-lit.js

@@ -1,8 +1,8 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z$2 = ".ids-tabs{align-items:flex-end;border-bottom:var(--IDS-TABS_BORDER-BOTTOM);display:flex;gap:3px;height:3rem;padding:0 20px;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7em}.ids-tabs:before{bottom:0;box-shadow:inset 0 -4px 4px -4px rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED--BEFORE_CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}.ids-tab{-webkit-touch-callout:none;align-items:center;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:none;border-radius:var(--IDS-TAB_BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;color:var(--IDS-TAB_COLOR);cursor:pointer;display:flex;flex-direction:column;font:inherit;font-size:1rem;font-weight:400;height:2.7rem;justify-content:center;line-height:20px;min-height:24px;min-width:24px;outline:inherit;padding:0 23px;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab.ids-tab--has-icon,.ids-tab:has(.ids-tab__icon){height:4.4rem}.ids-tab.ids-tab--selected{background-color:#fff;border:var(--IDS-TAB_BORDER);box-shadow:var(--IDS-TAB--SELECTED_BOX-SHADOW);padding:0 22px!important}.ids-tab.ids-tab--selected.ids-tab--has-icon,.ids-tab.ids-tab--selected:has(.ids-tab__icon){height:4.6rem}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);bottom:var(--IDS-TAB--SELECTED--AFTER_BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED--AFTER_HEIGHT);left:-1px;position:absolute;right:0;width:calc(100% + 2px)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tab .ids-tab__icon,.ids-tab ::slotted([slot=icon]){margin-bottom:4px}.ids-tab-panels{position:relative;z-index:1}.ids-tab-panel{display:none;outline-color:var(--focus-outline_color);outline-offset:2px;padding-top:1.5rem}.ids-tab-panel.ids-tab-panel--compact{padding-top:0}.ids-tab-panel.ids-tab-panel--selected{display:block}.ids-tab-panel .ids-tab-panel--hidden{display:none}";
+var css_248z$2 = ".ids-tabs{align-items:flex-end;border-bottom:var(--IDS-TABS_BORDER-BOTTOM);display:flex;gap:3px;height:3rem;padding:0 20px;position:relative}.ids-tabs.ids-tabs--unresponsive{display:flex!important}.ids-tabs.ids-tabs--has-icons{height:4.7em}.ids-tabs:before{bottom:0;box-shadow:inset 0 -4px 4px -4px rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED--BEFORE_CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}.ids-tab{-webkit-touch-callout:none;align-items:center;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:none;border-radius:var(--IDS-TAB_BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;color:var(--IDS-TAB_COLOR);cursor:pointer;display:flex;flex-direction:column;font:inherit;font-size:1rem;font-weight:400;height:2.7rem;justify-content:center;line-height:20px;min-height:24px;min-width:24px;outline:inherit;padding:0 23px;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab.ids-tab--has-icon,.ids-tab:has(.ids-tab__icon){height:4.4rem}.ids-tab.ids-tab--selected{background-color:#fff;border:var(--IDS-TAB_BORDER);box-shadow:var(--IDS-TAB--SELECTED_BOX-SHADOW);padding:0 22px!important}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected.ids-tab--has-icon,.ids-tab.ids-tab--selected:has(.ids-tab__icon){height:4.6rem}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);bottom:var(--IDS-TAB--SELECTED--AFTER_BOTTOM);content:\"\";height:var(--IDS-TAB--SELECTED--AFTER_HEIGHT);left:-1px;position:absolute;right:0;width:calc(100% + 2px)}.ids-tab .ids-tab__icon,.ids-tab ::slotted([slot=icon]){margin-bottom:4px}.ids-tab:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-tab-panels{position:relative;z-index:1}.ids-tab-panel{display:none;outline-color:var(--focus-outline_color);outline-offset:2px;padding-top:1.5rem}.ids-tab-panel .ids-tab-panel--hidden{display:none}.ids-tab-panel.ids-tab-panel--compact{padding-top:0}.ids-tab-panel.ids-tab-panel--selected{display:block}";
 
-var css_248z$1 = ".ids-select:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-select{background:var(--IDS-INPUT_BACKGROUND);border:var(--IDS-INPUT_BORDER);border-radius:var(--IDS-INPUT_BORDER-RADIUS);color:var(--IDS-INPUT_COLOR);display:block;font-family:var(--font-family_1)!important;font-size:16px;padding:.75rem 1.25rem}.ids-select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:none}.ids-label-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-select :after,.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:25px;top:0;transform:rotate(90deg);width:12px}.ids-select{-webkit-appearance:none!important;-moz-appearance:none!important;border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);display:inline-block!important;overflow:hidden;padding-right:40px;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:none}.ids-select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--light{background-color:#fff}.ids-select-wrapper{position:relative}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}";
+var css_248z$1 = ".ids-select{background-color:var(--IDS-INPUT_BACKGROUND);border:var(--IDS-INPUT_BORDER);border-radius:var(--IDS-INPUT_BORDER-RADIUS);color:var(--IDS-INPUT_COLOR);display:block;font-family:var(--font-family_1)!important;font-size:16px;padding:.75rem 1.25rem}.ids-select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:1px solid transparent}.ids-label-wrapper{align-items:center;display:inline-flex;gap:10px}.ids-select :after,.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:25px;top:0;transform:rotate(90deg);width:12px}.ids-select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:1px solid transparent}.ids-select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);cursor:pointer;display:inline-block!important;overflow:hidden;padding-right:50px!important;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light{background-color:#fff}.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:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select:disabled{cursor:default}";
 
 var css_248z = ".ids-label{color:var(--IDS-FORM__LABEL__COLOR);display:inline-block;font-family:var(--IDS-FORM__LABEL__FONT-FAMILY);font-size:var(--IDS-FORM__LABEL__FONT-SIZE);font-style:normal;font-weight:var(--IDS-FORM__LABEL__FONT-WEIGHT);letter-spacing:var(--IDS-FORM__LABEL__LETTER-SPACING);line-height:var(--IDS-FORM__LABEL__HEIGHT);margin-bottom:5px;min-height:24px;min-width:24px}.ids-label.ids-label--disabled{color:var(--IDS-FORM__LABEL--DISABLED__COLOR);font-style:italic}";
 

package/components/tabs/tabs.css

@@ -1 +1,124 @@
-.ids-tab:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tabs{display:flex;border-bottom:var(--IDS-TABS_BORDER-BOTTOM);gap:3px;position:relative;align-items:flex-end;height:3rem;padding:0px 20px}.ids-tabs.ids-tabs--unresponsive{display:flex !important}.ids-tabs.ids-tabs--has-icons{height:4.7em}.ids-tabs::before{content:var(--IDS-TAB--SELECTED--BEFORE_CONTENT);box-shadow:0 -4px 4px -4px rgba(0,0,0,0.2) inset;position:absolute;left:0;right:0;bottom:0;height:0.625rem;pointer-events:none}.ids-tab{min-width:24px;min-height:24px;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;flex-direction:column;justify-content:center;align-items:center;padding:0px 23px;background:var(--IDS-TAB_BACKGROUND-COLOR);box-shadow:var(--IDS-TAB_BOX-SHADOW);border-radius:var(--IDS-TAB_BORDER-RADIUS);display:flex;cursor:pointer;position:relative;height:2.7rem;font-weight:400;font-size:1rem;line-height:20px;-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)}.ids-tab:has(.ids-tab__icon),.ids-tab.ids-tab--has-icon{height:4.4rem}.ids-tab.ids-tab--selected{background-color:white;border:var(--IDS-TAB_BORDER);box-shadow:var(--IDS-TAB--SELECTED_BOX-SHADOW);padding:0px 22px !important}.ids-tab.ids-tab--selected:has(.ids-tab__icon),.ids-tab.ids-tab--selected.ids-tab--has-icon{height:4.6rem}.ids-tab.ids-tab--selected:after{content:"";height:var(--IDS-TAB--SELECTED--AFTER_HEIGHT);background-color:var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);position:absolute;width:calc(100% + 2px);left:-1px;right:0px;bottom:var(--IDS-TAB--SELECTED--AFTER_BOTTOM)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tab .ids-tab__icon,.ids-tab ::slotted([slot="icon"]){margin-bottom:4px}.ids-tab-panels{z-index:1;position:relative}.ids-tab-panel{display:none;padding-top:1.5rem;outline-offset:2px;outline-color:var(--focus-outline_color)}.ids-tab-panel.ids-tab-panel--compact{padding-top:0px}.ids-tab-panel.ids-tab-panel--selected{display:block}.ids-tab-panel .ids-tab-panel--hidden{display:none}
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+.ids-tabs {
+  display: flex;
+  border-bottom: var(--IDS-TABS_BORDER-BOTTOM);
+  gap: 3px;
+  position: relative;
+  align-items: flex-end;
+  height: 3rem;
+  padding: 0px 20px;
+}
+.ids-tabs.ids-tabs--unresponsive {
+  display: flex !important;
+}
+.ids-tabs.ids-tabs--has-icons {
+  height: 4.7em;
+}
+.ids-tabs::before {
+  content: var(--IDS-TAB--SELECTED--BEFORE_CONTENT);
+  box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.2) inset;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0.625rem;
+  pointer-events: none;
+}
+
+.ids-tab {
+  min-width: 24px;
+  min-height: 24px;
+  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;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 23px;
+  background: var(--IDS-TAB_BACKGROUND-COLOR);
+  box-shadow: var(--IDS-TAB_BOX-SHADOW);
+  border-radius: var(--IDS-TAB_BORDER-RADIUS);
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  height: 2.7rem;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 20px;
+  -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);
+}
+.ids-tab:has(.ids-tab__icon), .ids-tab.ids-tab--has-icon {
+  height: 4.4rem;
+}
+.ids-tab.ids-tab--selected {
+  background-color: white;
+  border: var(--IDS-TAB_BORDER);
+  box-shadow: var(--IDS-TAB--SELECTED_BOX-SHADOW);
+  padding: 0px 22px !important;
+}
+.ids-tab.ids-tab--selected .ids-tab__label {
+  color: var(--IDS-TAB--SELECTED_COLOR);
+}
+.ids-tab.ids-tab--selected:has(.ids-tab__icon), .ids-tab.ids-tab--selected.ids-tab--has-icon {
+  height: 4.6rem;
+}
+.ids-tab.ids-tab--selected:after {
+  content: "";
+  height: var(--IDS-TAB--SELECTED--AFTER_HEIGHT);
+  background-color: var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);
+  position: absolute;
+  width: calc(100% + 2px);
+  left: -1px;
+  right: 0px;
+  bottom: var(--IDS-TAB--SELECTED--AFTER_BOTTOM);
+}
+.ids-tab .ids-tab__icon,
+.ids-tab ::slotted([slot=icon]) {
+  margin-bottom: 4px;
+}
+.ids-tab:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
+.ids-tab-panels {
+  z-index: 1;
+  position: relative;
+}
+
+.ids-tab-panel {
+  display: none;
+  padding-top: 1.5rem;
+  outline-offset: 2px;
+  outline-color: var(--focus-outline_color);
+}
+.ids-tab-panel .ids-tab-panel--hidden {
+  display: none;
+}
+.ids-tab-panel.ids-tab-panel--compact {
+  padding-top: 0px;
+}
+.ids-tab-panel.ids-tab-panel--selected {
+  display: block;
+}