@inera/ids-design 5.0.2 → 5.1.0

package/components/pagination/list-pagination/list-pagination.css

@@ -0,0 +1,152 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button) {
+  cursor: pointer;
+  background-size: 16px 16px;
+  height: 28px !important;
+  width: 28px !important;
+  background-color: transparent !important;
+  border: 1px solid transparent !important;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :hover::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :hover::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-within,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-within::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-within,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-within::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:focus-visible,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :focus-visible::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:focus-visible,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :focus-visible::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:active,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button :active::slotted(button), .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:active,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :active::slotted(button) {
+  outline: var(--IDS-FOCUS_OUTLINE) !important;
+  outline-offset: 2px;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON--HOVER) !important;
+}
+
+.ids-list-pagination {
+  text-align: center;
+}
+.ids-list-pagination .ids-list-pagination__summary {
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  text-align: center;
+  font-family: var(--font-family_1) !important;
+  line-height: 24px;
+  margin-bottom: 8px;
+}
+.ids-list-pagination .ids-list-pagination__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0 2px;
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+  border-radius: 1.75rem;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden] {
+  display: none;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item[hidden-before]:before {
+  content: "..";
+  display: block;
+  margin-right: 4px;
+  margin-left: -3px;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current {
+  background-color: var(--link-colorpreset-1_color);
+  border: 1px solid var(--link-colorpreset-1_color);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button {
+  display: block;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 0 0.5rem;
+  background-color: transparent;
+  border: 0;
+  text-align: center;
+  font-family: var(--IDS-LIST-PAGINATION-LINK--FONT-FAMILY);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: var(--link-colorpreset-1_color);
+  text-decoration-color: var(--link-colorpreset-1_color);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: 2px !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:hover, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-within, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus-visible, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active {
+  color: var(--link-colorpreset-1-hover_color);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current {
+  cursor: default;
+  color: white;
+  font-weight: 400;
+  text-decoration: none;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-within, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:focus-visible, .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current:hover {
+  color: white;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button {
+  display: flex;
+  margin-right: 4px;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button) {
+  rotate: 180deg;
+  background-position: 5px 5px !important;
+  background-repeat: no-repeat !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled) {
+  cursor: default;
+  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON) !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button {
+  display: flex;
+  margin-left: 4px;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button) {
+  background-position: 5px 6px !important;
+  background-repeat: no-repeat !important;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled) {
+  cursor: default;
+  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON) !important;
+}

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

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

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ":host([show]){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 ::slotted(h3),.ids-popover-content h3{color:var(--IDS-BASE__FONT-COLOR);font-family:var(--heading-4-font-family)!important;font-size:var(--heading-4-font-size)!important;font-style:normal!important;font-weight:var(--heading-4-font-weight)!important;letter-spacing:var(--heading-4-letter-spacing)!important;line-height:var(--heading-4-line-height)!important;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}/popover-content.css

@@ -5,7 +5,8 @@
 /*******
 * Accessibility
 ********/
-:host([visible]) {
+/* headings */
+:host([show]) {
   display: block;
 }
 
@@ -36,16 +37,16 @@
 .ids-popover-content ::slotted(*) {
   color: var(--IDS-BASE__FONT-COLOR);
 }
-.ids-popover-content .ids-headline-4,
+.ids-popover-content h3,
 .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);
+  font-style: normal !important;
+  font-family: var(--heading-4-font-family) !important;
+  font-size: var(--heading-4-font-size) !important;
+  font-weight: var(--heading-4-font-weight) !important;
+  letter-spacing: var(--heading-4-letter-spacing) !important;
+  line-height: var(--heading-4-line-height) !important;
 }
 .ids-popover-content .ids-popover-content__caret {
   position: absolute;

package/components/popover/popover-lit.js

@@ -1,6 +1,6 @@
 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 css_248z = ".ids-popover{position:relative}.ids-popover,.ids-popover .ids-popover-trigger{display:inline-block}";
 
 var popoverLit = css`${unsafeCSS(css_248z)}`;
 

package/components/popover/popover.css

@@ -5,20 +5,11 @@
 /*******
 * Accessibility
 ********/
+/* headings */
 .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);
+.ids-popover .ids-popover-trigger {
+  display: inline-block;
 }

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

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

package/components/stepper/stepper-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([last]) .ids-step:after{content:none}.ids-stepper .ids-step:last-child:after{display:none}.ids-step{background-color:#fff;border:var(--stepper-step_border);border-radius:5px;display:flex;flex-direction:column;margin-bottom:16px;padding:16px;position:relative}.ids-step:after{background-color:var(--stepper-step--after_background-color);bottom:-17px;content:\" \";height:16px;left:36px;position:absolute;width:4px}.ids-step .ids-step__label{color:var(--stepper-step-label_color);font-size:1rem}.ids-step .ids-step__button{background:none;border:none;border-radius:5px;cursor:pointer;display:block;width:100%}.ids-step .ids-step__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-step .ids-step__button.ids-step__button--disabled{cursor:default;pointer-events:none}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__label{color:var(--stepper-step-label--disabled_color);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline{color:var(--stepper-step-headline--disabled_color);font-style:italic}.ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron{display:none}.ids-step .ids-step__button-inner{align-items:center;display:flex;justify-content:space-between}.ids-step .ids-step__button-text{display:flex;flex:1 auto}.ids-step .ids-step__indicator-wrapper{align-items:flex-start;display:flex}.ids-step .ids-step__indicator{align-items:center;background-color:var(--stepper-step-indicator_background-color);border:var(--stepper-step-indicator_border);border-radius:100px;color:var(--stepper-step-indicator_color);display:flex;flex-direction:column;font-family:var(--stepper-step-indicator_font-family);font-size:1.25rem;font-weight:400!important;height:42px;justify-content:center;width:42px}.ids-step .ids-step__indicator.ids-step__indicator--selected{background-color:var(--stepper-step-indicator-selected_background-color);color:#fff}.ids-step .ids-step__indicator.ids-step__indicator--valid{background-color:var(--stepper-step-indicator-valid_background-color);border:var(--stepper-step-indicator-valid_border)}.ids-step .ids-step__indicator.ids-step__indicator--invalid{background-color:var(--stepper-step-indicator-invalid_background-color);border:var(--stepper-step-indicator-invalid_border)}.ids-step .ids-step__headline-label{align-self:center;display:flex;flex-direction:column;padding-left:16px}.ids-step .ids-step__label{align-self:flex-start;display:flex}.ids-step .ids-step__headline,.ids-step ::slotted([slot=headline]){color:var(--stepper-step-headline_color);font-family:var(--stepper-step-headline_font-family);font-size:1.25rem;font-style:normal;font-weight:700;line-height:1.5rem;margin:0}.ids-step .ids-step__chevron{padding-left:10px;padding-right:10px}.ids-step .ids-step__content{padding:16px 0 0}@media only screen and (min-width:1024px){.ids-step{margin-bottom:20px}.ids-step:after{bottom:-21px;height:20px}.ids-step .ids-step__headline-label{padding-left:20px}.ids-step .ids-step__content{padding:20px 0 0 64px}}";
+
+var stepperLit = css`${unsafeCSS(css_248z)}`;
+
+export { stepperLit as default };

package/components/stepper/stepper.css

@@ -0,0 +1,160 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+:host([last]) .ids-step::after {
+  content: none;
+}
+
+.ids-stepper .ids-step:last-child::after {
+  display: none;
+}
+
+.ids-step {
+  margin-bottom: 16px;
+  padding: 16px;
+  position: relative;
+  border: var(--stepper-step_border);
+  border-radius: 5px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+}
+.ids-step::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--stepper-step--after_background-color);
+  width: 4px;
+  height: 16px;
+  left: 36px;
+  bottom: -17px;
+}
+.ids-step .ids-step__label {
+  font-size: 1rem;
+  color: var(--stepper-step-label_color);
+}
+.ids-step .ids-step__button {
+  width: 100%;
+  display: block;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.ids-step .ids-step__button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+.ids-step .ids-step__button.ids-step__button--disabled {
+  pointer-events: none;
+  cursor: default;
+}
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__label {
+  font-style: italic;
+  color: var(--stepper-step-label--disabled_color);
+}
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__headline {
+  font-style: italic;
+  color: var(--stepper-step-headline--disabled_color);
+}
+.ids-step .ids-step__button.ids-step__button--disabled .ids-step__chevron {
+  display: none;
+}
+.ids-step .ids-step__button-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ids-step .ids-step__button-text {
+  display: flex;
+  flex: 1 auto;
+}
+.ids-step .ids-step__indicator-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+.ids-step .ids-step__indicator {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 100px;
+  background-color: var(--stepper-step-indicator_background-color);
+  border: var(--stepper-step-indicator_border);
+  color: var(--stepper-step-indicator_color);
+  font-family: var(--stepper-step-indicator_font-family);
+  font-weight: 400 !important;
+  font-size: 1.25rem;
+}
+.ids-step .ids-step__indicator.ids-step__indicator--selected {
+  background-color: var(--stepper-step-indicator-selected_background-color);
+  color: white;
+}
+.ids-step .ids-step__indicator.ids-step__indicator--valid {
+  background-color: var(--stepper-step-indicator-valid_background-color);
+  border: var(--stepper-step-indicator-valid_border);
+}
+.ids-step .ids-step__indicator.ids-step__indicator--invalid {
+  background-color: var(--stepper-step-indicator-invalid_background-color);
+  border: var(--stepper-step-indicator-invalid_border);
+}
+.ids-step .ids-step__headline-label {
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
+.ids-step .ids-step__label {
+  display: flex;
+  align-self: flex-start;
+}
+.ids-step .ids-step__headline,
+.ids-step ::slotted([slot=headline]) {
+  font-family: var(--stepper-step-headline_font-family);
+  font-style: normal;
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  color: var(--stepper-step-headline_color);
+  margin: 0;
+}
+.ids-step .ids-step__chevron {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+.ids-step .ids-step__content {
+  padding: 16px 0 0 0;
+}
+@media only screen and (min-width: 1024px) {
+  .ids-step {
+    margin-bottom: 20px;
+  }
+  .ids-step::after {
+    height: 20px;
+    bottom: -21px;
+  }
+  .ids-step .ids-step__headline-label {
+    padding-left: 20px;
+  }
+  .ids-step .ids-step__content {
+    padding: 20px 0 0 64px;
+  }
+}

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

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

package/components/tabs/tab-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ":host{border-radius:var(--IDS-TAB_BORDER-RADIUS)}:host(:not([selected]):focus){outline:var(--focus_outline);outline-offset:2px}.ids-tab{-webkit-touch-callout:none;align-items:flex-end;background:none;background:var(--IDS-TAB_BACKGROUND-COLOR);border:none;border:var(--IDS-TAB_BORDER);border-radius:var(--IDS-TAB_BORDER-RADIUS);box-shadow:var(--IDS-TAB_BOX-SHADOW);color:inherit;cursor:pointer;font:inherit;min-height:24px;min-width:24px;outline:inherit;outline:none;padding:10px 23px 14px;position:relative;-moz-user-select:-moz-none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ids-tab,.ids-tab .ids-tab__label{display:flex;justify-content:center}.ids-tab .ids-tab__label{color:var(--IDS-TAB_COLOR);flex-direction:column;font-size:1rem;font-weight:400}.ids-tab ids-notification-badge{margin-bottom:-2px;margin-left:6px}.ids-tab.ids-tab--has-icon .ids-tab__label,.ids-tab:has(.ids-tab__icon) .ids-tab__label{line-height:35px;margin-bottom:-7px}.ids-tab .ids-icon,.ids-tab ::slotted([slot=icon]){align-self:center!important;display:flex!important}.ids-tab:after{background-color:transparent;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{background-color:#fff;border:var(--IDS-TAB--SELECTED-BORDER);box-shadow:var(--IDS-TAB--SELECTED_BOX-SHADOW)}.ids-tab.ids-tab--selected .ids-tab__label{color:var(--IDS-TAB--SELECTED_COLOR)}.ids-tab.ids-tab--selected:after{background-color:var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR)}.ids-tab:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}";
+
+var tabLit = css`${unsafeCSS(css_248z)}`;
+
+export { tabLit as default };

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

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

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ":host([selected=true]){display:block}.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 tabPanelLit = css`${unsafeCSS(css_248z)}`;
+
+export { tabPanelLit as default };

package/components/tabs/tab-panel.css

@@ -0,0 +1,27 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+:host([selected=true]) {
+  display: block;
+}
+
+.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: 0;
+}
+.ids-tab-panel.ids-tab-panel--selected {
+  display: block;
+}

package/components/tabs/tab.css

@@ -0,0 +1,96 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+:host {
+  border-radius: var(--IDS-TAB_BORDER-RADIUS);
+}
+
+:host(:not([selected]):focus) {
+  outline: var(--focus_outline);
+  outline-offset: 2px;
+}
+
+.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;
+  display: flex;
+  outline: none;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 10px 23px 14px 23px;
+  background: var(--IDS-TAB_BACKGROUND-COLOR);
+  box-shadow: var(--IDS-TAB_BOX-SHADOW);
+  border-radius: var(--IDS-TAB_BORDER-RADIUS);
+  border: var(--IDS-TAB_BORDER);
+  cursor: pointer;
+  position: relative;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ids-tab .ids-tab__label {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--IDS-TAB_COLOR);
+  font-weight: 400;
+  font-size: 1rem;
+}
+.ids-tab ids-notification-badge {
+  margin-left: 6px;
+  margin-bottom: -2px;
+}
+.ids-tab:has(.ids-tab__icon) .ids-tab__label, .ids-tab.ids-tab--has-icon .ids-tab__label {
+  margin-bottom: -7px;
+  line-height: 35px;
+}
+.ids-tab ::slotted([slot=icon]),
+.ids-tab .ids-icon {
+  display: flex !important;
+  align-self: center !important;
+}
+.ids-tab:after {
+  content: "";
+  height: var(--IDS-TAB--SELECTED--AFTER_HEIGHT);
+  background-color: transparent;
+  position: absolute;
+  width: calc(100% + 2px);
+  left: -1px;
+  right: 0px;
+  bottom: var(--IDS-TAB--SELECTED--AFTER_BOTTOM);
+}
+.ids-tab.ids-tab--selected {
+  background-color: white;
+  border: var(--IDS-TAB--SELECTED-BORDER);
+  box-shadow: var(--IDS-TAB--SELECTED_BOX-SHADOW);
+}
+.ids-tab.ids-tab--selected .ids-tab__label {
+  color: var(--IDS-TAB--SELECTED_COLOR);
+}
+.ids-tab.ids-tab--selected:after {
+  background-color: var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);
+}
+.ids-tab:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}

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__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$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-panels{position:relative;z-index:1}";
 
-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$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: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.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}";