npm - @inera/ids-design - Versions diffs - 5.5.0 → 6.0.0 - Mend

@inera/ids-design 5.5.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/components/pagination/data-pagination/data-pagination.css CHANGED Viewed

@@ -1,30 +1,18 @@
-.ids-data-pagination .ids-data-pagination__next-button button,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
-  cursor: pointer;
-  background-size: 1rem 1rem;
-  height: 1.938rem !important;
-  width: 1.938rem !important;
-  background-color: transparent !important;
-  border: 0.063rem solid transparent !important;
-}
-.ids-data-pagination .ids-data-pagination__next-button button:hover,
-.ids-data-pagination .ids-data-pagination__next-button :hover::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:hover,
-.ids-data-pagination .ids-data-pagination__prev-button :hover::slotted(button) {
-  background-image: var(--IDS-SELECT__CHEVRON-ICON--HOVER) !important;
-}
-.ids-data-pagination .ids-data-pagination__next-button button:focus,
-.ids-data-pagination .ids-data-pagination__next-button :focus::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:focus,
-.ids-data-pagination .ids-data-pagination__prev-button :focus::slotted(button), .ids-data-pagination .ids-data-pagination__next-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__next-button :focus-within::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:focus-within,
-.ids-data-pagination .ids-data-pagination__prev-button :focus-within::slotted(button), .ids-data-pagination .ids-data-pagination__next-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__next-button :focus-visible::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__prev-button :focus-visible::slotted(button), .ids-data-pagination .ids-data-pagination__next-button button:active,
-.ids-data-pagination .ids-data-pagination__next-button :active::slotted(button), .ids-data-pagination .ids-data-pagination__prev-button button:active,
-.ids-data-pagination .ids-data-pagination__prev-button :active::slotted(button) {
-  outline: var(--IDS-FOCUS__OUTLINE) !important;
-}
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 .ids-data-pagination {
   display: flex;
   flex-wrap: wrap;
@@ -38,18 +26,16 @@
   margin-right: 2.5rem;
 }
 .ids-data-pagination .ids-data-pagination__select::after {
-  content: "";
-  width: 0.5rem;
-  height: 100%;
+  font: icon;
+  font-family: "Inera-Design-Icons";
   display: block;
   position: absolute;
-  transform: rotate(90deg);
-  right: 0.625rem;
-  top: 0;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
   pointer-events: none;
+  content: "\e936";
+  color: var(--IDS-ICON__COLOR);
+  right: 0.5625rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .ids-data-pagination .ids-data-pagination__select label,
 .ids-data-pagination .ids-data-pagination__select ::slotted(label) {
@@ -68,7 +54,7 @@
   box-sizing: border-box;
   color: var(--IDS-INPUT__COLOR);
   cursor: pointer !important;
-  padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
+  padding: 0.25rem 2.125rem 0.25rem 0.5rem !important;
   border: var(--IDS-INPUT__BORDER) !important;
   border-radius: 0.313rem !important;
   width: 100% !important;
@@ -98,15 +84,55 @@
 }
 .ids-data-pagination .ids-data-pagination__prev-button button,
 .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
-  rotate: 180deg;
-  background-position: 0.438rem 0.438rem !important;
-  background-repeat: no-repeat !important;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 1.938rem !important;
+  width: 1.938rem !important;
+  background-color: transparent !important;
+  border: 0.063rem solid transparent !important;
+  border-radius: 0.313rem !important;
+  color: var(--IDS-ICON__COLOR);
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:after,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e937";
+  font-size: 1rem;
+  color: var(--IDS-ICON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover):after {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:focus,
+.ids-data-pagination .ids-data-pagination__prev-button button:focus-within,
+.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__prev-button button:active,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus),
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-within),
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-visible),
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:active) {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-data-pagination .ids-data-pagination__prev-button button:disabled,
 .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled) {
   cursor: default;
-  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON) !important;
+}
+.ids-data-pagination .ids-data-pagination__prev-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover,
 .ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover) {
@@ -118,14 +144,55 @@
 }
 .ids-data-pagination .ids-data-pagination__next-button button,
 .ids-data-pagination .ids-data-pagination__next-button ::slotted(button) {
-  background-position: 0.438rem 0.438rem !important;
-  background-repeat: no-repeat !important;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON) !important;
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 1.938rem !important;
+  width: 1.938rem !important;
+  background-color: transparent !important;
+  border: 0.063rem solid transparent !important;
+  border-radius: 0.313rem !important;
+  color: var(--IDS-ICON__COLOR);
+}
+.ids-data-pagination .ids-data-pagination__next-button button:after,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e938";
+  font-size: 1rem;
+  color: var(--IDS-ICON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__next-button button:hover:after,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover):after {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__next-button button:focus,
+.ids-data-pagination .ids-data-pagination__next-button button:focus-within,
+.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,
+.ids-data-pagination .ids-data-pagination__next-button button:active,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus),
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-within),
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-visible),
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:active) {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-data-pagination .ids-data-pagination__next-button button:disabled,
 .ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled) {
   cursor: default;
-  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON) !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button button:disabled:after,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .ids-data-pagination .ids-data-pagination__next-button button:disabled:hover,
 .ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover) {

package/components/pagination/list-pagination/list-pagination-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:transparent!important;background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-size:1rem 1rem;border:.063rem solid transparent!important;cursor:pointer;height:1.75rem!important;width:1.75rem!important}.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__next-button :focus-visible::slotted(button),.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__next-button :focus::slotted(button),.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__next-button button:active,.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 button:focus-visible,.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 button:hover,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button :active::slotted(button),.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__prev-button :focus-within::slotted(button),.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__prev-button :hover::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 button:focus,.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 button:focus-within,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important;border-radius:1.75rem;outline:var(--IDS-FOCUS__OUTLINE)!important;outline-offset:.125rem}.ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE)!important;line-height:1.5rem;margin-bottom:.5rem;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;border:.063rem solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 .125rem;min-height:1.75rem;min-width:1.75rem;text-align:center}.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{color:var(--IDS-COLOR-NEUTRAL-20);content:\"..\";display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.5rem;margin-left:-.188rem;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LINK--COLORPRESET-1__COLOR);border:.063rem solid var(--IDS-LINK--COLORPRESET-1__COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;border-radius:1.75rem;color:var(--IDS-LINK--COLORPRESET-1__COLOR);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:700;line-height:1.5rem;min-height:1.75rem;min-width:1.75rem;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LINK--COLORPRESET-1__COLOR);text-decoration:underline;text-underline-offset:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:active,.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-visible,.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:hover{color:var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:var(--IDS-COLOR-NEUTRAL-100);cursor:default;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-visible,.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:hover{color:var(--IDS-COLOR-NEUTRAL-100)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-position:.313rem .313rem!important;background-repeat:no-repeat!important;rotate:180deg}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-position:.313rem .375rem!important;background-repeat:no-repeat!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}";
+var css_248z = ".ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-FONT-FAMILY-BASE)!important;line-height:1.5rem;margin-bottom:.5rem;text-align:center}.ids-list-pagination .ids-list-pagination__content{align-items:center;display:flex;justify-content:center}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list{align-items:center;display:flex;justify-content:center;margin:0;padding:0}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item{align-items:center;border:.063rem solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 .125rem;min-height:1.75rem;min-width:1.75rem;text-align:center}.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{color:var(--IDS-COLOR-NEUTRAL-20);content:\"..\";display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1.5rem;font-style:normal;font-weight:700;line-height:1.5rem;margin-left:-.188rem;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);border:.063rem solid var(--IDS-LINK--COLOR-PRESET-1__COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;border-radius:1.75rem;color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION__LINK-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:700;line-height:1.5rem;min-height:1.75rem;min-width:1.75rem;padding:0 .5rem;text-align:center;text-decoration-color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);text-decoration:underline;text-underline-offset:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.125rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button :active,.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-visible,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button :focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:var(--IDS-COLOR-NEUTRAL-100);cursor:default;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-visible,.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:hover{color:var(--IDS-COLOR-NEUTRAL-100)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-color:transparent!important;background-size:1rem 1rem;border:.063rem solid transparent!important;border-radius:1.75rem!important;color:var(--IDS-ICON__COLOR);cursor:pointer;height:1.938rem!important;position:relative;width:1.938rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:after{color:var(--IDS-ICON__COLOR);content:\"\\e937\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover:after{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-within),.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 button:focus,.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 button:focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled{cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:disabled:after{color:var(--IDS-ICON--DISABLED-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button{display:flex;margin-left:.25rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button{background-color:transparent!important;background-size:1rem 1rem;border:.063rem solid transparent!important;border-radius:1.75rem!important;color:var(--IDS-ICON__COLOR);cursor:pointer;height:1.938rem!important;position:relative;width:1.938rem!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:after{color:var(--IDS-ICON__COLOR);content:\"\\e938\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1rem;height:1rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:1rem}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover:after{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:active),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-within),.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 button:focus,.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 button:focus-within{color:var(--IDS-ICON--ACTIVE-COLOR);outline:var(--IDS-FOCUS__OUTLINE)!important;outline-color:var(--IDS-FOCUS__OUTLINE-COLOR)!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled{cursor:default}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled):after,.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled:after{color:var(--IDS-ICON--DISABLED-COLOR)}";
 var listPaginationLit = css`
   ${unsafeCSS(css_248z)}

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

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -10,34 +13,6 @@
 /*******
 * A11Y
 ********/
-.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: 1rem 1rem;
-  height: 1.75rem !important;
-  width: 1.75rem !important;
-  background-color: transparent !important;
-  border: 0.063rem 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: 0.125rem;
-  border-radius: 1.75rem;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON--HOVER) !important;
-}
 .ids-list-pagination {
   text-align: center;
 }
@@ -88,8 +63,8 @@
   line-height: 1.5rem;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current {
-  background-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  border: 0.063rem solid var(--IDS-LINK--COLORPRESET-1__COLOR);
+  background-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  border: 0.063rem solid var(--IDS-LINK--COLOR-PRESET-1__COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button {
   display: block;
@@ -106,8 +81,8 @@
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
   text-decoration: underline;
   text-underline-offset: 0.25rem;
   cursor: pointer;
@@ -116,8 +91,13 @@
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: 0.125rem !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(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+.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(--IDS-ICON--ACTIVE-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current {
   cursor: default;
@@ -134,14 +114,55 @@
 }
 .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: 0.313rem 0.313rem !important;
-  background-repeat: no-repeat !important;
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 1.938rem !important;
+  width: 1.938rem !important;
+  background-color: transparent !important;
+  border: 0.063rem solid transparent !important;
+  border-radius: 1.75rem !important;
+  color: var(--IDS-ICON__COLOR);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e937";
+  font-size: 1rem;
+  color: var(--IDS-ICON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button:hover:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:hover):after {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
+.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 button:focus-within,
+.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 button:active,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-within),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:focus-visible),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:active) {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !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__prev-button button:disabled:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }
 .ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button {
   display: flex;
@@ -149,11 +170,53 @@
 }
 .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: 0.313rem 0.375rem !important;
-  background-repeat: no-repeat !important;
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 1.938rem !important;
+  width: 1.938rem !important;
+  background-color: transparent !important;
+  border: 0.063rem solid transparent !important;
+  border-radius: 1.75rem !important;
+  color: var(--IDS-ICON__COLOR);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e938";
+  font-size: 1rem;
+  color: var(--IDS-ICON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:hover:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:hover):after {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
+.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 button:focus-within,
+.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 button:active,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-within),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:focus-visible),
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:active) {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !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;
+}
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button button:disabled:after,
+.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__next-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
 }

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

@@ -1,6 +1,6 @@
 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([show]){display:block}:host{color:var(--IDS-BASE__FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);border-radius:var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:border-box;max-height:16.25rem;padding:1.25rem;position:relative;width:16.25rem;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)!important;color:var(--IDS-HEADING-XS__COLOR);font-family:var(--IDS-HEADING-XS__FONT-FAMILY)!important;font-size:var(--IDS-HEADING-XS__FONT-SIZE)!important;font-style:normal!important;font-weight:var(--IDS-HEADING-XS__FONT-WEIGHT)!important;letter-spacing:var(--IDS-HEADING-XS__LETTER-SPACING)!important;line-height:var(--IDS-HEADING-XS__LINE-HEIGHT)!important;margin-bottom:.5rem!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:-1.688rem;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-1.75rem;left:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-1.75rem;right:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:.125rem;right:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:.125rem;left:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret-body{background:var(--IDS-COLOR-NEUTRAL-100);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(--IDS-POPOVER-CONTENT__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(--IDS-POPOVER-CONTENT__BORDER);bottom:-.125rem;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(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-.125rem;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(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-.125rem;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:-.125rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(.188rem);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:-.438rem;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:-.438rem;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:-.438rem;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:-.438rem;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:1.25rem;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__text-wrapper{box-sizing:border-box;display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 1.25rem);margin-bottom:-.125rem;margin-left:-.125rem;margin-right:-1.3125rem;max-width:100%;overflow:auto;overflow-x:hidden;padding-bottom:.375rem;padding-left:.375rem;padding-right:1.25rem;position:relative;text-align:left;width:100%;width:calc(100% - 1.25rem)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0;margin-top:1.5rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.625rem}.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(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}:host([show]){display:block}:host{color:var(--IDS-FONT-COLOR);display:none;position:absolute;width:max-content}.ids-popover-content{background-color:var(--IDS-COLOR-NEUTRAL-100);border:.063rem solid var(--IDS-POPOVER-CONTENT__BORDER);border-radius:var(--IDS-POPOVER-CONTENT__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);box-sizing:border-box;max-height:16.25rem;padding:1.25rem;position:relative;width:16.25rem;z-index:2}.ids-popover-content ::slotted(*){color:var(--IDS-FONT-COLOR)}.ids-popover-content ::slotted(h3),.ids-popover-content h3{color:var(--IDS-FONT-COLOR)!important;color:var(--IDS-HEADING-XS__COLOR);font-family:var(--IDS-HEADING-XS__FONT-FAMILY)!important;font-size:var(--IDS-HEADING-XS__FONT-SIZE)!important;font-style:normal!important;font-weight:var(--IDS-HEADING-XS__FONT-WEIGHT)!important;letter-spacing:var(--IDS-HEADING-XS__LETTER-SPACING)!important;line-height:var(--IDS-HEADING-XS__LINE-HEIGHT)!important;margin-bottom:.5rem!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:-1.688rem;left:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-left{bottom:-1.75rem;left:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--top-right{bottom:-1.75rem;right:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left{right:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-top{bottom:.125rem;right:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--left-bottom{right:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right{left:-1.75rem;top:50%}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-top{bottom:.125rem;left:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--right-bottom{left:-1.75rem;top:.125rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom{left:50%;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-left{left:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret.ids-popover-content--bottom-right{right:.125rem;top:-1.75rem}.ids-popover-content .ids-popover-content__caret-body{background:var(--IDS-COLOR-NEUTRAL-100);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(--IDS-POPOVER-CONTENT__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(--IDS-POPOVER-CONTENT__BORDER);bottom:-.125rem;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(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 0,100% 50%,0 100%);height:1.2rem;right:-.125rem;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(--IDS-POPOVER-CONTENT__BORDER);clip-path:polygon(0 50%,100% 0,100% 100%);height:1.2rem;left:-.125rem;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:-.125rem;transform:translateX(-50%);width:1.2rem}.ids-popover-content .ids-popover-content__caret-shadow{filter:blur(.188rem);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:-.438rem;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:-.438rem;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:-.438rem;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:-.438rem;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__text-wrapper{box-sizing:border-box;display:block;flex-basis:0;flex-grow:1;height:100%;height:calc(100% - 1.25rem);margin-bottom:-.125rem;margin-left:-.125rem;margin-right:-1.3125rem;max-width:100%;overflow:auto;overflow-x:hidden;padding-bottom:.375rem;padding-left:.375rem;padding-right:1.25rem;position:relative;text-align:left;width:100%;width:calc(100% - 1.25rem)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0;margin-top:1.5rem}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__COLOR);border:.125rem solid var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;box-sizing:border-box;cursor:auto}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-popover-content .ids-popover-content__text-wrapper::-webkit-scrollbar-corner{background-color:transparent}.ids-popover-content .ids-popover-content__text-wrapper:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:.625rem}.ids-popover-content .ids-popover-content__close-btn-wrapper{display:block;height:1.25rem;max-width:100%;z-index:1}.ids-popover-content .ids-popover-content__close-btn{background:none;border:none;cursor:pointer;height:1.25rem;padding:0;position:relative;width:1.25rem}.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:before{color:var(--IDS-ICON__COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons;font-size:1.25rem;left:0;pointer-events:none;position:absolute;top:0}.ids-popover-content .ids-popover-content__close-btn:active:before,.ids-popover-content .ids-popover-content__close-btn:focus:before,.ids-popover-content .ids-popover-content__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}.ids-popover-content .ids-popover-content__close-btn:focus,.ids-popover-content .ids-popover-content__close-icon:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}";
 var popoverContentLit = css`${unsafeCSS(css_248z)}`;

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

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -30,7 +33,7 @@
   display: none;
   position: absolute;
   width: max-content;
-  color: var(--IDS-BASE__FONT-COLOR);
+  color: var(--IDS-FONT-COLOR);
 }
 .ids-popover-content {
@@ -46,12 +49,12 @@
   box-sizing: border-box;
 }
 .ids-popover-content ::slotted(*) {
-  color: var(--IDS-BASE__FONT-COLOR);
+  color: var(--IDS-FONT-COLOR);
 }
 .ids-popover-content h3,
 .ids-popover-content ::slotted(h3) {
   margin-bottom: 0.5rem !important;
-  color: var(--IDS-BASE__FONT-COLOR) !important;
+  color: var(--IDS-FONT-COLOR) !important;
   font-style: normal !important;
   color: var(--IDS-HEADING-XS__COLOR);
   font-family: var(--IDS-HEADING-XS__FONT-FAMILY) !important;
@@ -252,12 +255,6 @@
   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: 1.25rem;
-}
 .ids-popover-content .ids-popover-content__text-wrapper {
   display: block;
   max-width: 100%;
@@ -307,18 +304,40 @@
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: 0.625rem;
 }
+.ids-popover-content .ids-popover-content__close-btn-wrapper {
+  display: block;
+  max-width: 100%;
+  z-index: 1;
+  height: 1.25rem;
+}
 .ids-popover-content .ids-popover-content__close-btn {
   cursor: pointer;
   background: none;
-  color: inherit;
   border: none;
   padding: 0;
-  outline: inherit;
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .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:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e916";
+  font-size: 1.25rem;
+  color: var(--IDS-ICON__COLOR);
+  top: 0;
+  left: 0;
+}
+.ids-popover-content .ids-popover-content__close-btn:hover:before, .ids-popover-content .ids-popover-content__close-btn:focus:before, .ids-popover-content .ids-popover-content__close-btn:active:before {
+  color: var(--IDS-ICON--ACTIVE-COLOR);
+}
 .ids-popover-content .ids-popover-content__close-btn:focus,
 .ids-popover-content .ids-popover-content__close-icon:focus {
   outline: var(--IDS-FOCUS__OUTLINE);

package/components/puff-list/puff-list-lit.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-puff-list{border-top:.063rem solid var(--IDS-LIST__BORDER);display:flex;flex-direction:column}.ids-puff-list-item-separator{background-color:var(--IDS-LIST__BORDER);height:.0625rem;width:100%}.ids-puff-list-item{color:var(--IDS-LIST__COLOR)!important;display:flex;gap:1.25rem;margin:1.25rem 0;padding:0;position:relative}.ids-puff-list-item .ids-puff-list-item__date{font-family:Open Sans;font-size:.875rem;font-style:normal;font-weight:400;letter-spacing:.0625rem;line-height:1.25rem;text-transform:uppercase}.ids-puff-list-item .date-label-col{padding-right:1.25rem}.ids-puff-list-item .ids-puff-list-item__header,.ids-puff-list-item ::slotted([slot=headline]){color:var(--IDS-LINK--COLOR-PRESET-1__COLOR);cursor:pointer;display:inline-flex!important;font-family:var(--IDS-HEADING-M__FONT-FAMILY);font-size:var(--IDS-HEADING-M__FONT-SIZE);font-style:normal;font-weight:var(--IDS-HEADING-M__FONT-WEIGHT);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING);line-height:var(--IDS-HEADING-M__LINE-HEIGHT);margin-bottom:0!important;margin-top:0!important;position:relative;text-decoration:none!important}@media (min-width:1024px){.ids-puff-list-item .ids-puff-list-item__header,.ids-puff-list-item ::slotted([slot=headline]){font-size:var(--IDS-HEADING-M__FONT-SIZE-DESKTOP);letter-spacing:var(--IDS-HEADING-M__LETTER-SPACING-DESKTOP);line-height:var(--IDS-HEADING-M__LINE-HEIGHT-DESKTOP)}}.ids-puff-list-item .ids-puff-list-item__header{padding-left:1.375rem}.ids-puff-list-item .ids-puff-list-item__header:before{content:\"\\e947\";display:block;font:icon;font-family:Inera-Design-Icons;left:0;pointer-events:none;position:absolute;top:.4375rem}.ids-puff-list-item .ids-puff-list-item__body{margin-top:.5rem}.ids-puff-list-item.ids-puff-list-item--interactive{cursor:pointer}.ids-puff-list-item.ids-puff-list-item--interactive ::slotted([slot=interactive]){bottom:0!important;left:0!important;opacity:0!important;position:absolute!important;right:0!important;top:0!important}.ids-puff-list-item.ids-puff-list-item--interactive:focus-within{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-puff-list-item.ids-puff-list-item--interactive:focus-within .ids-puff-list-item__icon{display:none}.ids-puff-list-item.ids-puff-list-item--interactive:focus-within .ids-puff-list-item__icon--hover{display:flex}.ids-puff-list-item.ids-puff-list-item--interactive:hover .ids-puff-list-item__header,.ids-puff-list-item.ids-puff-list-item--interactive:hover ::slotted([slot=headline]){color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR)!important;text-decoration:underline!important}.ids-puff-list-item.ids-puff-list-item--interactive:hover .ids-puff-list-item__icon{display:none}.ids-puff-list-item.ids-puff-list-item--interactive:hover .ids-puff-list-item__icon--hover{display:flex}.ids-puff-list-item.ids-puff-list-item--interactive .ids-puff-list-item__header{outline:none}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header{position:relative}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header ::slotted([slot=interactive]){bottom:.1875rem!important;left:0!important;position:absolute!important;right:0!important;top:.1875rem!important}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header:focus{outline-offset:0}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header:hover{color:var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR)!important;text-decoration:underline!important}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header:hover .ids-puff-list-item__icon{display:none}.ids-puff-list-item:not(.ids-puff-list-item--interactive) .ids-puff-list-item__header:hover .ids-puff-list-item__icon--hover{display:flex}.ids-puff-list-item__info{color:var(--IDS-LIST__ITEM-INFO-COLOR);display:block;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-style:italic;font-weight:400;margin-bottom:0;margin-top:.625rem}";
+var puffListLit = css`${unsafeCSS(css_248z)}`;
+export { puffListLit as default };