npm - @inera/ids-design - Versions diffs - 8.2.1 → 9.0.0 - Mend

@inera/ids-design 8.2.1 → 9.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 (385) hide show

package/components/data-pagination/data-pagination-shadow.css ADDED Viewed

@@ -0,0 +1,251 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-data-pagination ::slotted(label) {
+  display: flex !important;
+  margin-right: 0.5rem !important;
+  white-space: nowrap !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  color: var(--IDS-DATA-PAGINATION-SELECT__COLOR);
+}
+.ids-data-pagination ::slotted(select) {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  display: flex !important;
+  box-sizing: border-box;
+  color: var(--IDS-DATA-PAGINATION-SELECT__COLOR);
+  cursor: pointer !important;
+  padding: var(--IDS-DATA-PAGINATION-SELECT__PADDING) !important;
+  border: var(--IDS-DATA-PAGINATION-SELECT__BORDER-THICKNESS) solid var(--IDS-DATA-PAGINATION-SELECT__BORDER-COLOR) !important;
+  border-radius: 0.313rem !important;
+  width: 100% !important;
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
+}
+.ids-data-pagination ::slotted(select) option {
+  height: 1.25rem !important;
+}
+.ids-data-pagination.ids-data-pagination--light ::slotted(select) {
+  background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button) {
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 2rem !important;
+  width: 2rem !important;
+  background-color: transparent;
+  border: 0.063rem solid transparent !important;
+  border-radius: 100% !important;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e6ff";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover):after {
+  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+  background-color: transparent;
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 2rem !important;
+  width: 2rem !important;
+  background-color: transparent;
+  border: 0.063rem solid transparent !important;
+  border-radius: 100% !important;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e937";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover):after {
+  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+  background-color: transparent;
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button) {
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 2rem !important;
+  width: 2rem !important;
+  background-color: transparent;
+  border: 0.063rem solid transparent !important;
+  border-radius: 100% !important;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e938";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover):after {
+  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+  background-color: transparent;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button) {
+  position: relative;
+  cursor: pointer;
+  background-size: 1rem 1rem;
+  height: 2rem !important;
+  width: 2rem !important;
+  background-color: transparent;
+  border: 0.063rem solid transparent !important;
+  border-radius: 100% !important;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  flex-shrink: 0;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button):after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e6fe";
+  font-size: 1rem;
+  line-height: 1rem;
+  color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
+  width: 1rem;
+  height: 1rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover):after {
+  color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:active) {
+  color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
+  background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE) !important;
+  outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled):after {
+  color: var(--IDS-ICON--DISABLED-COLOR);
+  background-color: transparent;
+}

package/components/{pagination/data-pagination → data-pagination}/data-pagination.css RENAMED Viewed

@@ -30,7 +30,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e936";
@@ -40,16 +39,14 @@
   transform: translateY(-50%);
   z-index: 20;
 }
-.ids-data-pagination .ids-data-pagination__select label,
-.ids-data-pagination .ids-data-pagination__select ::slotted(label) {
+.ids-data-pagination .ids-data-pagination__select label {
   display: flex !important;
   margin-right: 0.5rem !important;
   white-space: nowrap !important;
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   color: var(--IDS-DATA-PAGINATION-SELECT__COLOR);
 }
-.ids-data-pagination .ids-data-pagination__select select,
-.ids-data-pagination .ids-data-pagination__select ::slotted(select) {
+.ids-data-pagination .ids-data-pagination__select select {
   appearance: none !important;
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
@@ -64,12 +61,10 @@
   font-family: var(--IDS-FONT-FAMILY-BASE) !important;
   background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__select select option,
-.ids-data-pagination .ids-data-pagination__select ::slotted(select) option {
+.ids-data-pagination .ids-data-pagination__select select option {
   height: 1.25rem !important;
 }
-.ids-data-pagination.ids-data-pagination--light select,
-.ids-data-pagination.ids-data-pagination--light ::slotted(select) {
+.ids-data-pagination.ids-data-pagination--light select {
   background-color: var(--IDS-INPUT--LIGHT__BACKGROUND-COLOR);
 }
 .ids-data-pagination .ids-data-pagination__summary {
@@ -86,8 +81,7 @@
   display: flex;
   margin-left: 0.5rem;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button) {
+.ids-data-pagination .ids-data-pagination__first-page-button button {
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
@@ -99,13 +93,11 @@
   color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   flex-shrink: 0;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:after,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button):after {
+.ids-data-pagination .ids-data-pagination__first-page-button button:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e6ff";
@@ -118,32 +110,26 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:hover,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:hover {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__first-page-button button:hover:after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:active,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:active) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:active {
   color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:focus-visible) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:disabled,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled) {
+.ids-data-pagination .ids-data-pagination__first-page-button button:disabled {
   cursor: default;
   pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__first-page-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__first-page-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__first-page-button button:disabled:after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
@@ -151,8 +137,7 @@
   display: flex;
   margin-left: 0.5rem;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
+.ids-data-pagination .ids-data-pagination__prev-button button {
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
@@ -164,13 +149,11 @@
   color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   flex-shrink: 0;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:after,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button):after {
+.ids-data-pagination .ids-data-pagination__prev-button button:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e937";
@@ -183,32 +166,26 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:hover,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__prev-button button:hover {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__prev-button button:hover:after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:active,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:active) {
+.ids-data-pagination .ids-data-pagination__prev-button button:active {
   color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:focus-visible) {
+.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible {
   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) {
+.ids-data-pagination .ids-data-pagination__prev-button button:disabled {
   cursor: default;
   pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__prev-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__prev-button button:disabled:after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
@@ -216,8 +193,7 @@
   display: flex;
   margin-left: 0.5rem;
 }
-.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__next-button button {
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
@@ -229,13 +205,11 @@
   color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   flex-shrink: 0;
 }
-.ids-data-pagination .ids-data-pagination__next-button button:after,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button):after {
+.ids-data-pagination .ids-data-pagination__next-button button:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e938";
@@ -248,32 +222,26 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__next-button button:hover,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__next-button button:hover {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__next-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__next-button button:hover:after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__next-button button:active,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:active) {
+.ids-data-pagination .ids-data-pagination__next-button button:active {
   color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:focus-visible) {
+.ids-data-pagination .ids-data-pagination__next-button button:focus-visible {
   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) {
+.ids-data-pagination .ids-data-pagination__next-button button:disabled {
   cursor: default;
   pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__next-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__next-button button:disabled:after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }
@@ -281,8 +249,7 @@
   display: flex;
   margin-left: 0.5rem;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button) {
+.ids-data-pagination .ids-data-pagination__last-page-button button {
   position: relative;
   cursor: pointer;
   background-size: 1rem 1rem;
@@ -294,13 +261,11 @@
   color: var(--IDS-DATA-PAGINATION-BUTTON__COLOR);
   flex-shrink: 0;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:after,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button):after {
+.ids-data-pagination .ids-data-pagination__last-page-button button:after {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e6fe";
@@ -313,32 +278,26 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:hover,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover) {
+.ids-data-pagination .ids-data-pagination__last-page-button button:hover {
   color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-COLOR);
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--HOVER-BACKGROUND-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:hover:after,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:hover):after {
+.ids-data-pagination .ids-data-pagination__last-page-button button:hover:after {
   color: var(--IDS-DATA-PAGINATION-BUTTON-HOVER-COLOR);
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:active,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:active) {
+.ids-data-pagination .ids-data-pagination__last-page-button button:active {
   color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-COLOR) !important;
   background-color: var(--IDS-DATA-PAGINATION-BUTTON--ACTIVE-BACKGROUND-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:focus-visible,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:focus-visible) {
+.ids-data-pagination .ids-data-pagination__last-page-button button:focus-visible {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-color: var(--IDS-FOCUS__OUTLINE-COLOR) !important;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:disabled,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled) {
+.ids-data-pagination .ids-data-pagination__last-page-button button:disabled {
   cursor: default;
   pointer-events: none;
 }
-.ids-data-pagination .ids-data-pagination__last-page-button button:disabled:after,
-.ids-data-pagination .ids-data-pagination__last-page-button ::slotted(button:disabled):after {
+.ids-data-pagination .ids-data-pagination__last-page-button button:disabled:after {
   color: var(--IDS-ICON--DISABLED-COLOR);
   background-color: transparent;
 }

package/components/data-table/data-table-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}}.ids-data-table table{border:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;margin:1.25rem auto 3.125rem;overflow:visible;width:100%}.ids-data-table td,.ids-data-table th{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-right:none;line-height:1.25rem;padding:.5rem;position:relative;text-align:left;white-space:nowrap}.ids-data-table td:first-child,.ids-data-table th:first-child{padding-left:1rem}.ids-data-table td:last-child,.ids-data-table th:last-child{padding-right:1rem}.ids-data-table td.ids-data-table__col--wide,.ids-data-table th.ids-data-table__col--wide{width:30em}.ids-data-table td .ids-data-table__icon,.ids-data-table th .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-COLOR);margin-bottom:-.125rem;margin-left:.5rem}.ids-data-table td:hover .ids-data-table__icon,.ids-data-table th:hover .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-HOVER-COLOR)}.ids-data-table th{background-color:var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);border-bottom:.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);color:var(--IDS-DATA-TABLE__HEAD-COLOR);cursor:pointer;font-family:var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);font-weight:700}.ids-data-table th:not(:first-child):not(:last-child){padding:.75rem .5rem}.ids-data-table th:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.313rem!important;z-index:2}.ids-data-table thead tr{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr,.ids-data-table thead tr th:first-child{border-top-left-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table thead tr th:last-child{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}.ids-data-table tbody tr{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR)}.ids-data-table tbody tr td{color:var(--IDS-DATA-TABLE__CELL-COLOR)}.ids-data-table tbody tr[selected]{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR)}.ids-data-table tbody tr:last-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td{border-bottom:none}.ids-data-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--interactive tbody tr:hover{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);cursor:pointer;position:relative;z-index:2}.ids-data-table.ids-data-table--interactive tbody tr:focus-visible{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.25rem!important}.ids-data-table.ids-data-table--interactive tbody tr:focus-visible:last-child{border-radius:0 0 var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS) var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}.ids-data-table.ids-data-table--empty td{padding:1em}.ids-data-table.ids-data-table--empty .empty-message{text-align:left}@media (max-width:1024px){.ids-data-table table{width:100%}}@media (max-width:640px){.ids-data-table .ids-data-table__col--wide{width:auto}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}table.ids-data-table{border:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;overflow:visible;width:100%}table.ids-data-table td,table.ids-data-table th{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);border-right:none;line-height:1.25rem;padding:.5rem;text-align:left}table.ids-data-table td:first-child,table.ids-data-table th:first-child{padding-left:1rem}table.ids-data-table td:last-child,table.ids-data-table th:last-child{padding-right:1rem}table.ids-data-table td.ids-data-table__col--wide,table.ids-data-table th.ids-data-table__col--wide{width:30em}table.ids-data-table td .ids-data-table__icon,table.ids-data-table th .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-COLOR);margin-bottom:-.125rem}table.ids-data-table td:hover .ids-data-table__icon,table.ids-data-table th:hover .ids-data-table__icon{color:var(--IDS-DATA-TABLE__ICON-HOVER-COLOR)}table.ids-data-table th{background-color:var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);border-bottom:.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);color:var(--IDS-DATA-TABLE__HEAD-COLOR);cursor:pointer;font-family:var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);font-weight:700;white-space:nowrap}table.ids-data-table th:not(:first-child):not(:last-child){padding:.75rem .5rem}table.ids-data-table th:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.313rem!important;z-index:2}table.ids-data-table thead tr{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}table.ids-data-table thead tr,table.ids-data-table thead tr th:first-child{border-top-left-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}table.ids-data-table thead tr th:last-child{border-top-right-radius:var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS)}table.ids-data-table tbody tr{border-bottom:.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR)}table.ids-data-table tbody tr td{color:var(--IDS-DATA-TABLE__CELL-COLOR);font-size:.875rem;vertical-align:middle}table.ids-data-table tbody tr td.ids-data-table__td--flex{align-items:center;display:flex}table.ids-data-table tbody tr td.ids-data-table__td--align-top{vertical-align:top}table.ids-data-table tbody tr[selected]{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR)}table.ids-data-table tbody tr:last-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS);border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}table.ids-data-table tbody tr:last-child td{border-bottom:none}table.ids-data-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}table.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}table.ids-data-table tbody tr td.ids-table__sub-row{border-left:.5rem solid var(--ids-color-surface-border-default);margin:-.5rem -1rem;padding:.5rem 1rem}table.ids-data-table.ids-data-table--interactive tbody tr:hover{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);cursor:pointer;position:relative;z-index:2}table.ids-data-table.ids-data-table--interactive tbody tr:focus-visible{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:-.25rem!important}table.ids-data-table.ids-data-table--interactive tbody tr:focus-visible:last-child{border-radius:0 0 var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS) var(--IDS-DATA-TABLE__BORDER-BOTTOM-RADIUS)}table.ids-data-table.ids-data-table--empty td{padding:1em}@media (max-width:1024px){table.ids-data-table{width:100%}}@media (max-width:640px){table.ids-data-table .ids-data-table__col--wide{width:auto}}";
 var dataTableLit = css`${unsafeCSS(css_248z)}`;