@inera/ids-design 5.0.3 → 5.1.0

package/components/mobile-menu/mobile-menu.css

@@ -5,6 +5,7 @@
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > a, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner ::slotted([slot=link]), .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__link, .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--secondary > .ids-mobile-menu-item__inner > a {
   width: 100%;
   flex-grow: 1;
@@ -132,7 +133,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -150,7 +151,7 @@
   padding-left: 20px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);
@@ -181,7 +182,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -199,7 +200,7 @@
   padding-left: 20px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(-90deg);
@@ -265,7 +266,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -283,7 +284,7 @@
   padding-left: 40px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);
@@ -304,7 +305,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -322,7 +323,7 @@
   padding-left: 40px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(-90deg);
@@ -395,7 +396,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -413,7 +414,7 @@
   padding-left: 60px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);
@@ -444,7 +445,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -462,7 +463,7 @@
   padding-left: 60px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu:not(.ids-mobile-menu--variation-2) .ids-mobile-menu-item--3.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(-90deg);
@@ -529,7 +530,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,7 +548,7 @@
   padding-left: 20px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item > .ids-mobile-menu-item__inner > .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);
@@ -568,7 +569,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -586,7 +587,7 @@
   padding-left: 20px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(-90deg);
@@ -661,7 +662,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -679,7 +680,7 @@
   padding-left: 40px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);
@@ -700,7 +701,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -718,7 +719,7 @@
   padding-left: 40px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--2.ids-mobile-menu-item--expanded .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(-90deg);
@@ -796,7 +797,7 @@
   -ms-user-select: none;
   user-select: none;
   min-height: 48px;
-  min-width: 48px;
+  min-width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -814,7 +815,7 @@
   padding-left: 60px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn:only-child .ids-icon {
-  margin-right: 20px;
+  margin-right: 24px;
 }
 .ids-mobile-menu.ids-mobile-menu--variation-2 .ids-mobile-menu-item--3 > .ids-mobile-menu-item__inner .ids-mobile-menu-item__expand-btn .ids-icon {
   transform: rotate(90deg);

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

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

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-navigation-content{background-color:#fff;border-radius:var(--content-navigation_border-radius);box-shadow:0 0 10px rgba(27,27,27,.2);position:relative;width:100%}.ids-navigation-content:after{background-color:#fff;clip-path:polygon(0 0,0 100%,100% 100%);left:-9px;z-index:1}.ids-navigation-content:after,.ids-navigation-content:before{content:\" \";height:1.4rem;position:absolute;top:20px;transform:rotate(45deg);width:1.4rem}.ids-navigation-content:before{box-shadow:0 0 10px rgba(27,27,27,.2);left:-11px;z-index:-1}.ids-navigation-content .ids-navigation-content__border-top{border-radius:var(--IDS-CARD__BORDER-RADIUS);display:block;height:20px;left:0;overflow:hidden;position:absolute;top:0;width:100%}.ids-navigation-content .ids-navigation-content__border-top div{border-top:var(--IDS-CARD--BORDER-2__INNER__BORDER-TOP)}.ids-navigation-content .ids-navigation-content__inner{border-top:var(--content-navigation_border-top);padding:20px;position:relative}.ids-navigation-content .ids-navigation-content__inner .ids-navigation-content__inner__headline{color:var(--content-navigation_color);font-family:var(--content-navigation_font-family);font-size:var(--content-navigation_font-size);font-weight:var(--content-navigation_font-weight);letter-spacing:-.2px;line-height:var(--content-navigation_line-height);margin:0 0 8px}.ids-navigation-content .ids-navigation-content__inner a{border-top:1px solid var(--content-navigation-separator_background-color);display:flex!important;padding:14px 0}.ids-navigation-content .ids-navigation-content__inner ::slotted(*){border-top:1px solid var(--content-navigation-separator_background-color);display:flex!important;padding:14px 0}";
+
+var navigationContentLit = css`${unsafeCSS(css_248z)}`;
+
+export { navigationContentLit as default };

package/components/navigation/content/navigation-content.css

@@ -0,0 +1,67 @@
+.ids-navigation-content {
+  width: 100%;
+  box-shadow: 0px 0px 10px rgba(27, 27, 27, 0.2);
+  border-radius: var(--content-navigation_border-radius);
+  background-color: white;
+  position: relative;
+}
+.ids-navigation-content::after {
+  content: " ";
+  position: absolute;
+  height: 1.4rem;
+  width: 1.4rem;
+  clip-path: polygon(0px 0px, 0% 100%, 100% 100%);
+  top: 20px;
+  left: -9px;
+  background-color: white;
+  transform: rotate(45deg);
+  z-index: 1;
+}
+.ids-navigation-content::before {
+  content: " ";
+  position: absolute;
+  height: 1.4rem;
+  width: 1.4rem;
+  top: 20px;
+  left: -11px;
+  transform: rotate(45deg);
+  z-index: -1;
+  box-shadow: rgba(27, 27, 27, 0.2) 0px 0px 10px;
+}
+.ids-navigation-content .ids-navigation-content__border-top {
+  position: absolute;
+  overflow: hidden;
+  border-radius: var(--IDS-CARD__BORDER-RADIUS);
+  top: 0;
+  width: 100%;
+  display: block;
+  height: 20px;
+  left: 0;
+}
+.ids-navigation-content .ids-navigation-content__border-top div {
+  border-top: var(--IDS-CARD--BORDER-2__INNER__BORDER-TOP);
+}
+.ids-navigation-content .ids-navigation-content__inner {
+  padding: 20px;
+  border-top: var(--content-navigation_border-top);
+  position: relative;
+}
+.ids-navigation-content .ids-navigation-content__inner .ids-navigation-content__inner__headline {
+  font-family: var(--content-navigation_font-family);
+  font-weight: var(--content-navigation_font-weight);
+  font-size: var(--content-navigation_font-size);
+  line-height: var(--content-navigation_line-height);
+  letter-spacing: -0.2px;
+  color: var(--content-navigation_color);
+  margin: 0px 0px 8px 0px;
+}
+.ids-navigation-content .ids-navigation-content__inner a {
+  border-top: 1px solid var(--content-navigation-separator_background-color);
+  display: flex !important;
+  padding: 14px 0px;
+}
+.ids-navigation-content .ids-navigation-content__inner ::slotted(*) {
+  border-top: 1px solid var(--content-navigation-separator_background-color);
+  display: flex !important;
+  padding: 14px 0px;
+}

package/components/navigation/local/navigation-local-lit.d.ts

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

package/components/navigation/local/navigation-local-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-navigation-local{border-bottom:var(--navigation-local_border-top)}.ids-navigation-local .ids-navigation-local__headline{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(font-family-2);font-size:1.25rem;font-style:normal;font-weight:700;letter-spacing:-.03125rem;line-height:1.5rem;padding:14px 20px 14px 0}.ids-navigation-local .ids-navigation-local__link,.ids-navigation-local a{border-top:var(--navigation-local_border-top);color:var(--navigation-link_color);display:block!important;outline-offset:-2px!important;padding:12px 20px;position:relative;text-decoration:none}.ids-navigation-local .ids-navigation-local__link.ids-navigation-local__link--active:before,.ids-navigation-local a.ids-navigation-local__link--active:before{background-color:var(--navigation-local-selected_border-left)}.ids-navigation-local .ids-navigation-local__link:focus,.ids-navigation-local .ids-navigation-local__link:hover,.ids-navigation-local a:focus,.ids-navigation-local a:hover{border-top:var(--navigation-local-hover_border-top)}.ids-navigation-local .ids-navigation-local__link:focus:before,.ids-navigation-local .ids-navigation-local__link:hover:before,.ids-navigation-local a:focus:before,.ids-navigation-local a:hover:before{background-color:var(--navigation-local-active_border-left)!important}.ids-navigation-local .ids-navigation-local__link:before,.ids-navigation-local a:before{content:\"\";display:block;height:calc(100% + 1px);left:0;position:absolute;top:-1px;width:5px}.ids-navigation-local ::slotted(a){border-top:var(--navigation-local_border-top);color:var(--navigation-link_color);display:block!important;outline-offset:-2px!important;padding:12px 20px;position:relative;text-decoration:none}.ids-navigation-local ::slotted(a).ids-navigation-local__link--active:before{background-color:var(--navigation-local-selected_border-left)}.ids-navigation-local ::slotted(a):focus,.ids-navigation-local ::slotted(a):hover{border-top:var(--navigation-local-hover_border-top)}.ids-navigation-local ::slotted(a):focus:before,.ids-navigation-local ::slotted(a):hover:before{background-color:var(--navigation-local-active_border-left)!important}.ids-navigation-local ::slotted(a):before{content:\"\";display:block;height:calc(100% + 1px);left:0;position:absolute;top:-1px;width:5px}.ids-navigation-local ::slotteD(a:hover),.ids-navigation-local ::slotted(a:focus){border-top:var(--navigation-local-hover_border-top)}.ids-navigation-local ::slotteD(a:hover):before,.ids-navigation-local ::slotted(a:focus):before{background-color:var(--navigation-local-active_border-left)!important}.ids-navigation-local ::slotted(.ids-navigation-local__link--active):before{background-color:var(--navigation-local-selected_border-left)}";
+
+var navigationLocalLit = css`${unsafeCSS(css_248z)}`;
+
+export { navigationLocalLit as default };

package/components/navigation/local/navigation-local.css

@@ -0,0 +1,85 @@
+.ids-navigation-local {
+  border-bottom: var(--navigation-local_border-top);
+}
+.ids-navigation-local .ids-navigation-local__headline {
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(font-family-2);
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  letter-spacing: -0.03125rem;
+  line-height: 1.5rem;
+  padding: 14px 20px 14px 0px;
+}
+.ids-navigation-local a,
+.ids-navigation-local .ids-navigation-local__link {
+  display: block !important;
+  padding: 12px 20px;
+  border-top: var(--navigation-local_border-top);
+  position: relative;
+  color: var(--navigation-link_color);
+  text-decoration: none;
+  outline-offset: -2px !important;
+}
+.ids-navigation-local a.ids-navigation-local__link--active::before,
+.ids-navigation-local .ids-navigation-local__link.ids-navigation-local__link--active::before {
+  background-color: var(--navigation-local-selected_border-left);
+}
+.ids-navigation-local a:focus, .ids-navigation-local a:hover,
+.ids-navigation-local .ids-navigation-local__link:focus,
+.ids-navigation-local .ids-navigation-local__link:hover {
+  border-top: var(--navigation-local-hover_border-top);
+}
+.ids-navigation-local a:focus::before, .ids-navigation-local a:hover::before,
+.ids-navigation-local .ids-navigation-local__link:focus::before,
+.ids-navigation-local .ids-navigation-local__link:hover::before {
+  background-color: var(--navigation-local-active_border-left) !important;
+}
+.ids-navigation-local a::before,
+.ids-navigation-local .ids-navigation-local__link::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: -1px;
+  display: block;
+  height: calc(100% + 1px);
+  width: 5px;
+}
+.ids-navigation-local ::slotted(a) {
+  display: block !important;
+  padding: 12px 20px;
+  border-top: var(--navigation-local_border-top);
+  position: relative;
+  color: var(--navigation-link_color);
+  text-decoration: none;
+  outline-offset: -2px !important;
+}
+.ids-navigation-local ::slotted(a).ids-navigation-local__link--active::before {
+  background-color: var(--navigation-local-selected_border-left);
+}
+.ids-navigation-local ::slotted(a):focus, .ids-navigation-local ::slotted(a):hover {
+  border-top: var(--navigation-local-hover_border-top);
+}
+.ids-navigation-local ::slotted(a):focus::before, .ids-navigation-local ::slotted(a):hover::before {
+  background-color: var(--navigation-local-active_border-left) !important;
+}
+.ids-navigation-local ::slotted(a)::before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: -1px;
+  display: block;
+  height: calc(100% + 1px);
+  width: 5px;
+}
+.ids-navigation-local ::slotted(a:focus),
+.ids-navigation-local ::slotteD(a:hover) {
+  border-top: var(--navigation-local-hover_border-top);
+}
+.ids-navigation-local ::slotted(a:focus)::before,
+.ids-navigation-local ::slotteD(a:hover)::before {
+  background-color: var(--navigation-local-active_border-left) !important;
+}
+.ids-navigation-local ::slotted(.ids-navigation-local__link--active)::before {
+  background-color: var(--navigation-local-selected_border-left);
+}

package/components/pagination/data-pagination/data-pagination-lit.d.ts

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

package/components/pagination/data-pagination/data-pagination-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button,.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-color:transparent!important;background-size:16px 16px;border:1px solid transparent!important;cursor:pointer;height:31px!important;width:31px!important}.ids-data-pagination .ids-data-pagination__next-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:hover,.ids-data-pagination .ids-data-pagination__prev-button :hover::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:hover{background-image:var(--IDS-SELECT__CHEVRON-ICON--HOVER)!important}.ids-data-pagination .ids-data-pagination__next-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__next-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button:active,.ids-data-pagination .ids-data-pagination__next-button button:focus,.ids-data-pagination .ids-data-pagination__next-button button:focus-visible,.ids-data-pagination .ids-data-pagination__next-button button:focus-within,.ids-data-pagination .ids-data-pagination__prev-button :active::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-visible::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus-within::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button :focus::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button:active,.ids-data-pagination .ids-data-pagination__prev-button button:focus,.ids-data-pagination .ids-data-pagination__prev-button button:focus-visible,.ids-data-pagination .ids-data-pagination__prev-button button:focus-within{outline:var(--IDS-FOCUS_OUTLINE)!important}.ids-data-pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}.ids-data-pagination .ids-data-pagination__select{align-items:center;display:flex;position:relative}.ids-data-pagination .ids-data-pagination__select:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:10px;top:0;transform:rotate(90deg);width:8px}.ids-data-pagination .ids-data-pagination__select ::slotted(label),.ids-data-pagination .ids-data-pagination__select label{color:var(--IDS-INPUT_COLOR);display:flex!important;font-family:var(--font-family_1)!important;margin-right:8px!important;white-space:nowrap!important}.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;background-color:var(--IDS-INPUT_BACKGROUND);border:var(--IDS-INPUT_BORDER)!important;border-radius:5px!important;box-sizing:border-box;color:var(--IDS-INPUT_COLOR);cursor:pointer!important;display:flex!important;font-family:var(--font-family_1)!important;padding:4px 28px 4px 8px!important;width:100%!important}.ids-data-pagination .ids-data-pagination__select ::slotted(select) option,.ids-data-pagination .ids-data-pagination__select select option{height:20px!important}.ids-data-pagination.ids-data-pagination--light ::slotted(select),.ids-data-pagination.ids-data-pagination--light select{background-color:#fff}.ids-data-pagination .ids-data-pagination__summary{color:var(--IDS-INPUT_COLOR);display:flex;font-family:var(--font-family_1)!important;margin-left:40px}.ids-data-pagination .ids-data-pagination__buttons{display:flex;white-space:nowrap}.ids-data-pagination .ids-data-pagination__prev-button{display:flex;margin-left:20px}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button),.ids-data-pagination .ids-data-pagination__prev-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:7px 7px!important;background-repeat:no-repeat!important;rotate:180deg}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__prev-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__prev-button button:disabled:hover{border:1px solid transparent!important}.ids-data-pagination .ids-data-pagination__next-button{display:flex;margin-left:8px}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button),.ids-data-pagination .ids-data-pagination__next-button button{background-image:var(--IDS-SELECT__CHEVRON-ICON)!important;background-position:7px 7px!important;background-repeat:no-repeat!important}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled),.ids-data-pagination .ids-data-pagination__next-button button:disabled{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)!important;cursor:default}.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover),.ids-data-pagination .ids-data-pagination__next-button button:disabled:hover{border:1px solid transparent!important}";
+
+var dataPaginationLit = css`${unsafeCSS(css_248z)}`;
+
+export { dataPaginationLit as default };

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

@@ -0,0 +1,141 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+.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: 16px 16px;
+  height: 31px !important;
+  width: 31px !important;
+  background-color: transparent !important;
+  border: 1px 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;
+}
+
+.ids-data-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+.ids-data-pagination .ids-data-pagination__select {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.ids-data-pagination .ids-data-pagination__select::after {
+  content: "";
+  width: 8px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 10px;
+  top: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+.ids-data-pagination .ids-data-pagination__select label,
+.ids-data-pagination .ids-data-pagination__select ::slotted(label) {
+  display: flex !important;
+  margin-right: 8px !important;
+  white-space: nowrap !important;
+  font-family: var(--font-family_1) !important;
+  color: var(--IDS-INPUT_COLOR);
+}
+.ids-data-pagination .ids-data-pagination__select select,
+.ids-data-pagination .ids-data-pagination__select ::slotted(select) {
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  display: flex !important;
+  box-sizing: border-box;
+  color: var(--IDS-INPUT_COLOR);
+  cursor: pointer !important;
+  padding: 4px 28px 4px 8px !important;
+  border: var(--IDS-INPUT_BORDER) !important;
+  border-radius: 5px !important;
+  width: 100% !important;
+  font-family: var(--font-family_1) !important;
+  background-color: var(--IDS-INPUT_BACKGROUND);
+}
+.ids-data-pagination .ids-data-pagination__select select option,
+.ids-data-pagination .ids-data-pagination__select ::slotted(select) option {
+  height: 20px !important;
+}
+.ids-data-pagination.ids-data-pagination--light select,
+.ids-data-pagination.ids-data-pagination--light ::slotted(select) {
+  background-color: white;
+}
+.ids-data-pagination .ids-data-pagination__summary {
+  color: var(--IDS-INPUT_COLOR);
+  display: flex;
+  margin-left: 40px;
+  font-family: var(--font-family_1) !important;
+}
+.ids-data-pagination .ids-data-pagination__buttons {
+  white-space: nowrap;
+  display: flex;
+}
+.ids-data-pagination .ids-data-pagination__prev-button {
+  display: flex;
+  margin-left: 20px;
+}
+.ids-data-pagination .ids-data-pagination__prev-button button,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button) {
+  rotate: 180deg;
+  background-position: 7px 7px !important;
+  background-repeat: no-repeat !important;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON) !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:hover,
+.ids-data-pagination .ids-data-pagination__prev-button ::slotted(button:disabled:hover) {
+  border: 1px solid transparent !important;
+}
+.ids-data-pagination .ids-data-pagination__next-button {
+  display: flex;
+  margin-left: 8px;
+}
+.ids-data-pagination .ids-data-pagination__next-button button,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button) {
+  background-position: 7px 7px !important;
+  background-repeat: no-repeat !important;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON) !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:hover,
+.ids-data-pagination .ids-data-pagination__next-button ::slotted(button:disabled:hover) {
+  border: 1px solid transparent !important;
+}

package/components/pagination/list-pagination/list-pagination-lit.d.ts

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

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

@@ -0,0 +1,9 @@
+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:16px 16px;border:1px solid transparent!important;cursor:pointer;height:28px!important;width:28px!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;outline:var(--IDS-FOCUS_OUTLINE)!important;outline-offset:2px}.ids-list-pagination{text-align:center}.ids-list-pagination .ids-list-pagination__summary{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--font-family_1)!important;line-height:24px;margin-bottom:8px;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:1px solid transparent;border-radius:1.75rem;box-sizing:border-box;display:flex;justify-content:center;margin:0 2px;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(--font-family_1);font-size:24px;font-style:normal;font-weight:700;line-height:24px;margin-left:-3px;margin-right:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item.ids-list-pagination__list-item--current{background-color:var(--link-colorpreset-1_color);border:1px solid var(--link-colorpreset-1_color)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button{background-color:transparent;border:0;color:var(--link-colorpreset-1_color);cursor:pointer;display:block;font-family:var(--IDS-LIST-PAGINATION-LINK--FONT-FAMILY);font-size:16px;font-style:normal;font-weight:700;line-height:1.5rem;min-height:28px;min-width:28px;padding:0 .5rem;text-align:center;text-decoration-color:var(--link-colorpreset-1_color);text-decoration:underline;text-underline-offset:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:2px!important}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button: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(--link-colorpreset-1-hover_color)}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__list-item .ids-list-pagination__button--current{color:#fff;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:#fff}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button{display:flex;margin-right:4px}.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button ::slotted(button),.ids-list-pagination .ids-list-pagination__content .ids-list-pagination__prev-button button{background-position:5px 5px!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:4px}.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:5px 6px!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 listPaginationLit = css`
+  ${unsafeCSS(css_248z)}
+`;
+
+export { listPaginationLit as default };