@inera/ids-design 5.3.0 → 5.4.0

package/dist/components/carousel/carousel-item-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-carousel-item{background-color:var(--IDS-CAROUSEL__BACKGROUND-COLOR)}.ids-carousel-item .ids-carousel-item__headline{font-family:var(--IDS-CAROUSEL-HEADLINE__FONT-FAMILY)}.ids-carousel-item .ids-carousel-item__image{display:flex;justify-content:center;overflow:hidden;padding-top:66.6666666667%;position:relative}.ids-carousel-item .ids-carousel-item__content{flex:6;padding:20px}.ids-carousel-item .ids-carousel-item__footer{align-items:center;display:flex;justify-content:space-between;margin-top:30px}.ids-carousel-item .ids-carousel-item__description{color:var(--IDS-CAROUSEL__DESCRIPTION-COLOR)}@media only screen and (max-width:1024px){.ids-carousel-item .ids-carousel-item__footer{align-items:flex-start;flex-direction:column;margin-top:1.75rem}.ids-carousel-item .ids-carousel-item__description{margin-bottom:.875rem}}@media only screen and (max-width:640px){.ids-carousel-item .ids-carousel-item__footer{margin-top:.625rem}}.ids-carousel-item ::slotted([slot=image]){left:50%;max-height:100%;max-width:100%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.ids-carousel-item ::slotted(*),.ids-carousel-item :host{color:var(--IDS-CAROUSEL__COLOR);font-family:var(--IDS-CAROUSEL__FONT-FAMILY)}";
+
+var carouselItemLit = css`${unsafeCSS(css_248z)}`;
+
+export { carouselItemLit as default };

package/dist/components/carousel/carousel-item.css

@@ -0,0 +1,67 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-carousel-item {
+  background-color: var(--IDS-CAROUSEL__BACKGROUND-COLOR);
+}
+.ids-carousel-item .ids-carousel-item__headline {
+  font-family: var(--IDS-CAROUSEL-HEADLINE__FONT-FAMILY);
+}
+.ids-carousel-item .ids-carousel-item__image {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  padding-top: 66.6666666667%;
+}
+.ids-carousel-item .ids-carousel-item__content {
+  padding: 20px;
+  flex: 6;
+}
+.ids-carousel-item .ids-carousel-item__footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+  align-items: center;
+}
+.ids-carousel-item .ids-carousel-item__description {
+  color: var(--IDS-CAROUSEL__DESCRIPTION-COLOR);
+}
+@media only screen and (max-width: 1024px) {
+  .ids-carousel-item .ids-carousel-item__footer {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 1.75rem;
+  }
+  .ids-carousel-item .ids-carousel-item__description {
+    margin-bottom: 0.875rem;
+  }
+}
+@media only screen and (max-width: 640px) {
+  .ids-carousel-item .ids-carousel-item__footer {
+    margin-top: 0.625rem;
+  }
+}
+.ids-carousel-item ::slotted([slot=image]) {
+  left: 50%;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+.ids-carousel-item ::slotted(*),
+.ids-carousel-item :host {
+  color: var(--IDS-CAROUSEL__COLOR);
+  font-family: var(--IDS-CAROUSEL__FONT-FAMILY);
+}

package/dist/components/carousel/carousel-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-carousel{position:relative}.ids-carousel .ids-carousel-slide{border:var(--IDS-CAROUSEL__BORDER);border-radius:.188rem;box-sizing:border-box;margin-left:0;margin-right:0;overflow:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.ids-carousel .ids-carousel-btn__next,.ids-carousel .ids-carousel-btn__prev{align-items:center;background:none;border:none;cursor:pointer;display:none;height:50%;justify-content:center;opacity:1;padding:0;position:absolute;top:calc(40% - 3rem);transform:translateY(-50%);transition:opacity .3s ease-in;z-index:1001}.ids-carousel .ids-carousel-btn__next:focus,.ids-carousel .ids-carousel-btn__prev:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:0!important}.ids-carousel .ids-carousel-btn__next.mobile,.ids-carousel .ids-carousel-btn__prev.mobile{display:flex}.ids-carousel .ids-carousel-btn__inner{align-items:center;background-color:var(--IDS-CAROUSEL-ICON__BACKGROUND-COLOR);box-shadow:0 0 .375rem rgba(0,0,0,.3);box-shadow:0 0 rgba(0,0,0,.3);display:flex;height:3rem;justify-content:center;width:1.5rem}.ids-carousel .ids-carousel-btn__inner .ids-icon{width:1rem}.ids-carousel .ids-carousel-btn__prev{left:0}.ids-carousel .ids-carousel-btn__prev .ids-carousel-btn__inner{border-radius:0 1.5rem 1.5rem 0}.ids-carousel .ids-carousel-btn__prev .ids-icon{padding-right:.313rem}.ids-carousel .ids-carousel-btn__next{right:0}.ids-carousel .ids-carousel-btn__next .ids-carousel-btn__inner{border-radius:1.5rem 0 0 1.5rem}.ids-carousel .ids-carousel-btn__next .ids-icon{padding-left:.313rem}@media only screen and (min-width:1024px){.ids-carousel .ids-carousel-slide{margin-left:3.125rem;margin-right:3.125rem;width:calc(100% - 6.25rem)}.ids-carousel .ids-carousel-btn__next,.ids-carousel .ids-carousel-btn__prev{display:flex;width:3rem}.ids-carousel .ids-carousel-btn__next.mobile,.ids-carousel .ids-carousel-btn__prev.mobile{display:none}}.ids-carousel ::slotted(.ids-carousel-item-wrapper){display:inline-block;position:absolute;top:0;transition:left .5s ease-in-out;width:100%;z-index:100}.ids-carousel ::slotted(.ids-carousel-item-wrapper.active),.ids-carousel ::slotted(.ids-carousel-item-wrapper.initial){left:0;opacity:1;position:relative;z-index:900}.ids-carousel ::slotted(.ids-carousel-item-wrapper.next),.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){z-index:800}.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.prev){z-index:900}.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.next){z-index:700}.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.prev){z-index:700}.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.next){z-index:900}.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev){left:-100%}.ids-carousel ::slotted(.ids-carousel-item-wrapper.next){left:100%}";
+
+var carouselLit = css`${unsafeCSS(css_248z)}`;
+
+export { carouselLit as default };

package/dist/components/carousel/carousel.css

@@ -0,0 +1,156 @@
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBARS
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-carousel {
+  position: relative;
+  /* By default we're hiding items (except the initial one) until the JS initiates. 
+  Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. */
+  /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
+}
+.ids-carousel .ids-carousel-slide {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0.188rem;
+  border: var(--IDS-CAROUSEL__BORDER);
+}
+.ids-carousel .ids-carousel-btn__prev,
+.ids-carousel .ids-carousel-btn__next {
+  display: none;
+  background: none;
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+  position: absolute;
+  top: calc(40% - 3rem);
+  height: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  z-index: 1001;
+  align-items: center;
+  justify-content: center;
+}
+.ids-carousel .ids-carousel-btn__prev:focus,
+.ids-carousel .ids-carousel-btn__next:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: 0 !important;
+}
+.ids-carousel .ids-carousel-btn__prev.mobile,
+.ids-carousel .ids-carousel-btn__next.mobile {
+  display: flex;
+}
+.ids-carousel .ids-carousel-btn__inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--IDS-CAROUSEL-ICON__BACKGROUND-COLOR);
+  box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.3);
+  height: 3rem;
+  width: 1.5rem;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0;
+}
+.ids-carousel .ids-carousel-btn__inner .ids-icon {
+  width: 1rem;
+}
+.ids-carousel .ids-carousel-btn__prev {
+  left: 0;
+}
+.ids-carousel .ids-carousel-btn__prev .ids-carousel-btn__inner {
+  border-radius: 0 1.5rem 1.5rem 0;
+}
+.ids-carousel .ids-carousel-btn__prev .ids-icon {
+  padding-right: 0.313rem;
+}
+.ids-carousel .ids-carousel-btn__next {
+  right: 0;
+}
+.ids-carousel .ids-carousel-btn__next .ids-carousel-btn__inner {
+  border-radius: 1.5rem 0 0 1.5rem;
+}
+.ids-carousel .ids-carousel-btn__next .ids-icon {
+  padding-left: 0.313rem;
+}
+@media only screen and (min-width: 1024px) {
+  .ids-carousel .ids-carousel-slide {
+    width: calc(100% - 6.25rem);
+    margin-left: 3.125rem;
+    margin-right: 3.125rem;
+  }
+  .ids-carousel .ids-carousel-btn__next,
+  .ids-carousel .ids-carousel-btn__prev {
+    display: flex;
+    width: 3rem;
+  }
+  .ids-carousel .ids-carousel-btn__next.mobile,
+  .ids-carousel .ids-carousel-btn__prev.mobile {
+    display: none;
+  }
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper) {
+  position: absolute;
+  top: 0;
+  display: inline-block;
+  width: 100%;
+  z-index: 100;
+  transition: left 0.5s ease-in-out;
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.initial),
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.active) {
+  opacity: 1;
+  position: relative;
+  z-index: 900;
+  left: 0;
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev),
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.next) {
+  z-index: 800;
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev),
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.next) {
+  z-index: 800;
+}
+.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.prev) {
+  z-index: 900;
+}
+.ids-carousel .animating-right ::slotted(.ids-carousel-item-wrapper.next) {
+  z-index: 700;
+}
+.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.prev) {
+  z-index: 700;
+}
+.ids-carousel .animating-left ::slotted(.ids-carousel-item-wrapper.next) {
+  z-index: 900;
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.prev) {
+  left: -100%;
+}
+.ids-carousel ::slotted(.ids-carousel-item-wrapper.next) {
+  left: 100%;
+}

package/dist/components/data-table/data-table-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-data-table table{background-color:var(--IDS-COLOR-NEUTRAL-100);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 thead tr:first-child th:first-child{border-top-left-radius:.625rem}.ids-data-table thead tr:first-child th:last-child{border-top-right-radius:.625rem}.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:.625rem}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:.625rem}.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-icon-arrow,.ids-data-table td ids-icon-swap,.ids-data-table th ids-icon-arrow,.ids-data-table th ids-icon-swap{cursor:pointer;margin-left:5.313rem;transform:rotate(-90deg)}.ids-data-table td ids-icon-arrow.ids-icon-arrow-opposite,.ids-data-table td ids-icon-swap.ids-icon-arrow-opposite,.ids-data-table th ids-icon-arrow.ids-icon-arrow-opposite,.ids-data-table th ids-icon-swap.ids-icon-arrow-opposite{margin-left:6em;transform:rotate(90deg)}.ids-data-table th{background-color:var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);border-bottom:.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_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{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.313rem!important;z-index:2}.ids-data-table tr{border-bottom:.063rem solid var(--IDS-COLOR-NEUTRAL-90)}.ids-data-table tr:focus{outline:none}.ids-data-table tr[selected]{background-color:var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR)}.ids-data-table.ids-data-table--interactive tr:hover{box-shadow:0 0 .313rem #000}.ids-data-table.ids-data-table--interactive tr:hover:last-child{border-radius:0 0 .313rem .313rem}.ids-data-table.ids-data-table--interactive tbody tr:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:-.25rem!important}.ids-data-table.ids-data-table--interactive tbody tr:focus:last-child{border-radius:0 0 .313rem .313rem}.ids-data-table.ids-data-table--interactive:active,.ids-data-table.ids-data-table--interactive:focus,.ids-data-table.ids-data-table--interactive:hover{background-color:var(--table-active_background-color);box-shadow:var(--table-active_box-shadow)}.ids-data-table.ids-data-table--interactive.ids-data-table--disabled,.ids-data-table.ids-data-table--interactive[disabled]{background-color:var(--IDS-COLOR-NEUTRAL-100)!important;border:var(--table-disabled_border)!important;color:var(--table-disabled_color)!important}.ids-data-table.ids-data-table--empty td{padding:1em}.ids-data-table.ids-data-table--empty .empty-message{text-align:left}.ids-data-table.ids-data-table--empty .empty-message:focus{outline:none}@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 dataTableLit = css`${unsafeCSS(css_248z)}`;
+
+export { dataTableLit as default };

package/{components → dist/components}/data-table/data-table.css

@@ -14,7 +14,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -24,46 +24,46 @@
 ********/
 .ids-data-table table {
   width: 100%;
-  background-color: white;
-  margin: 20px auto 50px;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  margin: 1.25rem auto 3.125rem;
   border-collapse: separate;
   border-spacing: 0;
-  border: 1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);
+  border: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
   border-radius: var(--IDS-DATA-TABLE__BORDER-RADIUS);
   overflow: visible;
 }
 .ids-data-table thead tr:first-child th:first-child {
-  border-top-left-radius: 10px;
+  border-top-left-radius: 0.625rem;
 }
 .ids-data-table thead tr:first-child th:last-child {
-  border-top-right-radius: 10px;
+  border-top-right-radius: 0.625rem;
 }
 .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: 10px;
+  border-bottom-left-radius: 0.625rem;
 }
 .ids-data-table tbody tr:last-child td:last-child {
-  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: 0.625rem;
 }
 .ids-data-table th,
 .ids-data-table td {
-  padding: 8px;
+  padding: 0.5rem;
   text-align: left;
-  border-bottom: 1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);
+  border-bottom: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
   border-right: none;
   white-space: nowrap;
   position: relative;
-  line-height: 20px;
+  line-height: 1.25rem;
 }
 .ids-data-table th:first-child,
 .ids-data-table td:first-child {
-  padding-left: 16px;
+  padding-left: 1rem;
 }
 .ids-data-table th:last-child,
 .ids-data-table td:last-child {
-  padding-right: 16px;
+  padding-right: 1rem;
 }
 .ids-data-table th.ids-data-table__col--wide,
 .ids-data-table td.ids-data-table__col--wide {
@@ -75,7 +75,7 @@
 .ids-data-table td ids-icon-swap {
   cursor: pointer;
   transform: rotate(-90deg);
-  margin-left: 5.5px;
+  margin-left: 5.313rem;
 }
 .ids-data-table th ids-icon-arrow.ids-icon-arrow-opposite,
 .ids-data-table th ids-icon-swap.ids-icon-arrow-opposite,
@@ -87,39 +87,39 @@
 .ids-data-table th {
   cursor: pointer;
   font-weight: bold;
-  border-bottom: 2px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);
-  background-color: var(--IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR);
-  font-family: var(--IDS-DATA-TABLE-HEAD__FONT-FAMILY);
+  border-bottom: 0.125rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
+  background-color: var(--IDS-DATA-TABLE__HEAD-BACKGROUND_COLOR);
+  font-family: var(--IDS-DATA-TABLE__HEAD-FONT-FAMILY);
 }
 .ids-data-table th:not(:first-child):not(:last-child) {
-  padding: 12px 8px 12px 8px;
+  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
 }
 .ids-data-table th:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: -5px !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.313rem !important;
   z-index: 2;
 }
 .ids-data-table tr {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
 }
 .ids-data-table tr:focus {
   outline: none;
 }
 .ids-data-table tr[selected] {
-  background-color: var(--IDS-DATA-TABLE-CELL--SELECTED);
+  background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
 }
 .ids-data-table.ids-data-table--interactive tr:hover {
-  box-shadow: 0 0 5px black;
+  box-shadow: 0 0 0.313rem black;
 }
 .ids-data-table.ids-data-table--interactive tr:hover:last-child {
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 0.313rem 0.313rem;
 }
 .ids-data-table.ids-data-table--interactive tbody tr:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: -4px !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.25rem !important;
 }
 .ids-data-table.ids-data-table--interactive tbody tr:focus:last-child {
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 0.313rem 0.313rem;
 }
 .ids-data-table.ids-data-table--interactive:hover, .ids-data-table.ids-data-table--interactive:active, .ids-data-table.ids-data-table--interactive:focus {
   box-shadow: var(--table-active_box-shadow);
@@ -128,7 +128,7 @@
 .ids-data-table.ids-data-table--interactive.ids-data-table--disabled, .ids-data-table.ids-data-table--interactive[disabled] {
   color: var(--table-disabled_color) !important;
   border: var(--table-disabled_border) !important;
-  background-color: white !important;
+  background-color: var(--IDS-COLOR-NEUTRAL-100) !important;
 }
 .ids-data-table.ids-data-table--empty td {
   padding: 1em;

package/dist/components/date-label/date-label-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}time.ids-time{align-items:center;align-self:flex-start;background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:.625rem;box-shadow:0 .125rem .375rem 0 rgba(0,0,0,.3);display:inline-flex;flex-direction:column;gap:.25rem;justify-content:center;padding:.938rem}@media (max-width:1024px){time.ids-time{gap:.25rem;padding:.625rem}}time.ids-time .ids-time__day{color:var(--IDS-DATE-LABEL__DAY-COLOR);font-family:var(--IDS-DATE-LABEL__DAY-FONT-FAMILY);font-size:2.1875rem;font-style:normal;font-weight:700;letter-spacing:-.063rem;line-height:2.1875rem}@media (max-width:1024px){time.ids-time .ids-time__day{font-size:1.5625rem;letter-spacing:-.078rem;line-height:1.5625rem}}time.ids-time .ids-time__month{color:var(--IDS-DATE-LABEL__MONTH-COLOR);font-family:var(--IDS-DATE-LABEL__MONTH-FONT-FAMILY);font-size:1.25rem;font-style:normal;font-weight:400;line-height:1.25rem;text-transform:uppercase}@media (max-width:1024px){time.ids-time .ids-time__month{font-size:.9375rem;line-height:.9375rem}}time.ids-time .ids-time__year{color:var(--IDS-DATE-LABEL__YEAR-COLOR);font-family:var(--IDS-DATE-LABEL__YEAR-FONT-FAMILY);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}@media (max-width:1024px){time.ids-time .ids-time__year{font-size:.75rem;line-height:.75rem}}";
+
+var dateLabelLit = css`${unsafeCSS(css_248z)}`;
+
+export { dateLabelLit as default };

package/{components → dist/components}/date-label/date-label.css

@@ -14,32 +14,32 @@ time.ids-time {
   display: inline-flex;
   flex-direction: column;
   box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
-  background-color: #ffffff;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 0.625rem;
-  padding: 15px;
+  padding: 0.938rem;
   align-items: center;
   align-self: flex-start;
   justify-content: center;
-  gap: 4px;
+  gap: 0.25rem;
 }
 @media (max-width: 1024px) {
   time.ids-time {
-    padding: 10px;
-    gap: 4px;
+    padding: 0.625rem;
+    gap: 0.25rem;
   }
 }
 time.ids-time .ids-time__day {
-  font-family: var(--IDS-DATE-LABEL__DAY__FONT-FAMILY);
-  color: var(--IDS-DATE-LABEL__DAY__COLOR);
+  font-family: var(--IDS-DATE-LABEL__DAY-FONT-FAMILY);
+  color: var(--IDS-DATE-LABEL__DAY-COLOR);
   font-style: normal;
   font-weight: 700;
   font-size: 2.1875rem;
   line-height: 2.1875rem;
-  letter-spacing: -1px;
+  letter-spacing: -0.063rem;
 }
 @media (max-width: 1024px) {
   time.ids-time .ids-time__day {
-    letter-spacing: -1.25px;
+    letter-spacing: -0.078rem;
     font-size: 1.5625rem;
     line-height: 1.5625rem;
   }
@@ -50,8 +50,8 @@ time.ids-time .ids-time__month {
   font-size: 1.25rem;
   line-height: 1.25rem;
   text-transform: uppercase;
-  font-family: var(--IDS-DATE-LABEL__MONTH__FONT-FAMILY);
-  color: var(--IDS-DATE-LABEL__MONTH__COLOR);
+  font-family: var(--IDS-DATE-LABEL__MONTH-FONT-FAMILY);
+  color: var(--IDS-DATE-LABEL__MONTH-COLOR);
 }
 @media (max-width: 1024px) {
   time.ids-time .ids-time__month {
@@ -60,8 +60,8 @@ time.ids-time .ids-time__month {
   }
 }
 time.ids-time .ids-time__year {
-  font-family: var(--IDS-DATE-LABEL__YEAR__FONT-FAMILY);
-  color: var(--IDS-DATE-LABEL__YEAR__COLOR);
+  font-family: var(--IDS-DATE-LABEL__YEAR-FONT-FAMILY);
+  color: var(--IDS-DATE-LABEL__YEAR-COLOR);
   font-style: normal;
   font-weight: 400;
   font-size: 1rem;

package/dist/components/dialog/dialog-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dialog{align-items:flex-start;background-color:#fff;border:.0625rem solid var(--IDS-DIALOG__BORDER-COLOR);border-radius:var(--IDS-DIALOG__BORDER-RADIUS);box-shadow:0 0 .625rem rgba(0,0,0,.3);color:var(--IDS-DIALOG__COLOR);display:flex;flex-direction:column;left:50%;max-height:calc(100% - 5rem);max-width:calc(100% - 3.75rem);padding:2.5rem 1.875rem;position:fixed;text-align:left;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);z-index:200}@media (max-width:1024px){.ids-dialog{padding:2.5rem .625rem}}@media (max-width:640px){.ids-dialog{max-height:calc(100% - 5rem);width:calc(100% - 3.75rem)}}.ids-dialog:has(.ids-dialog__header){padding-top:1.25rem}.ids-dialog.ids-dialog--hidden{display:none}.ids-dialog .ids-dialog__header{align-items:flex-end;display:flex;justify-content:flex-end;padding-bottom:.25rem;width:100%}.ids-dialog .ids-dialog__header .ids-dialog__header__button{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;justify-content:center;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-dialog .ids-dialog__header .ids-dialog__header__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dialog .ids-dialog__body{height:100%;margin-right:.188rem;overflow-y:auto;padding:0 .375rem .625rem .625rem}.ids-dialog .ids-dialog__body::-webkit-scrollbar{margin-left:-1.25rem;position:absolute;width:1rem}.ids-dialog .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-COLOR-NEUTRAL-99);border-radius:.625rem;margin-bottom:0}.ids-dialog .ids-dialog__body::-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-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__HOVER-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner{background-color:transparent}.ids-dialog .ids-dialog__body:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dialog .ids-dialog__body.ids-dialog__body--has-scrollbar{padding-right:1.25rem}.ids-dialog .ids-dialog__body .ids-dialog__body__headline{align-self:center;margin:0;padding-top:.375rem}@media (max-width:1024px){.ids-dialog .ids-dialog__body .ids-dialog__body__headline{padding-top:0}}.ids-dialog .ids-dialog__body .ids-dialog__body__header{align-items:flex-end;-webkit-align-items:flex-end;box-sizing:border-box;display:flex;-webkit-justify-content:flex-end;justify-content:flex-end;padding:1.25rem 0 0;width:100%}.ids-dialog .ids-dialog__body .ids-dialog__body__content{margin-top:1.25rem}.ids-dialog .ids-dialog__footer{margin-top:1.875rem}.ids-dialog .ids-dialog__footer,.ids-dialog ::slotted([slot=actions]){align-items:center;display:flex;gap:1.25rem;justify-content:center;width:100%}@media (max-width:1024px){.ids-dialog .ids-dialog__footer,.ids-dialog ::slotted([slot=actions]){flex-direction:column;gap:1.25rem}}.ids-dialog-overlay{background-color:var(--IDS-OVERLAY__BACKGROUND-COLOR);bottom:0;left:0;position:fixed;right:0;top:0;z-index:200}.ids-dialog-overlay.ids-dialog-overlay--hidden{display:none}";
+
+var dialogLit = css`${unsafeCSS(css_248z)}`;
+
+export { dialogLit as default };

package/{components → dist/components}/dialog/dialog.css

@@ -14,7 +14,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBAR
+* SCROLLBARS
 ********/
 /*******
 * FORM
@@ -29,7 +29,7 @@
   top: 50%;
   left: 50%;
   z-index: 200;
-  border: 1px solid var(--dialog_border-color);
+  border: 0.0625rem solid var(--IDS-DIALOG__BORDER-COLOR);
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
@@ -37,27 +37,27 @@
   flex-direction: column;
   align-items: flex-start;
   background-color: #ffffff;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  border-radius: var(--dialog_border-radius);
-  padding: 40px 30px 40px 30px;
-  max-height: calc(100% - 80px);
-  max-width: calc(100% - 60px);
+  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
+  border-radius: var(--IDS-DIALOG__BORDER-RADIUS);
+  padding: 2.5rem 1.875rem 2.5rem 1.875rem;
+  max-height: calc(100% - 5rem);
+  max-width: calc(100% - 3.75rem);
   text-align: left;
-  color: var(--dialog_color);
+  color: var(--IDS-DIALOG__COLOR);
 }
 @media (max-width: 1024px) {
   .ids-dialog {
-    padding: 40px 10px 40px 10px;
+    padding: 2.5rem 0.625rem 2.5rem 0.625rem;
   }
 }
 @media (max-width: 640px) {
   .ids-dialog {
-    max-height: calc(100% - 80px);
-    width: calc(100% - 60px);
+    max-height: calc(100% - 5rem);
+    width: calc(100% - 3.75rem);
   }
 }
 .ids-dialog:has(.ids-dialog__header) {
-  padding-top: 20px;
+  padding-top: 1.25rem;
 }
 .ids-dialog.ids-dialog--hidden {
   display: none;
@@ -67,10 +67,11 @@
   align-items: flex-end;
   justify-content: flex-end;
   display: flex;
+  padding-bottom: 0.25rem;
 }
 .ids-dialog .ids-dialog__header .ids-dialog__header__button {
-  min-width: 24px;
-  min-height: 24px;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
   background: none;
   color: inherit;
   border: none;
@@ -88,63 +89,58 @@
   justify-content: center;
 }
 .ids-dialog .ids-dialog__header .ids-dialog__header__button:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-dialog .ids-dialog__body {
-  padding: 0 6px 10px 10px;
-  margin-right: 4px;
+  padding: 0 0.375rem 0.625rem 0.625rem;
+  margin-right: 0.188rem;
   height: 100%;
   overflow-y: auto;
 }
 .ids-dialog .ids-dialog__body::-webkit-scrollbar {
-  width: 14px;
+  width: 1rem;
   position: absolute;
-  margin-left: -20px;
-  margin-top: 10px;
+  margin-left: -1.25rem;
 }
 .ids-dialog .ids-dialog__body::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_TRACK-COLOR);
-  border-radius: 10px;
-  margin-top: 10px;
+  background: var(--IDS-COLOR-NEUTRAL-99);
+  border-radius: 0.625rem;
   margin-bottom: 0;
 }
-.ids-dialog .ids-dialog__body::-webkit-resizer {
-  appearance: none;
-  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-}
-.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
 .ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb {
   cursor: auto;
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+  background: var(--IDS-SCROLL__COLOR);
+  border-radius: 0.625rem;
   box-sizing: border-box;
-  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-99);
 }
 .ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover {
-  background: var(--IDS-SCROLL_HOVER-COLOR);
+  background: var(--IDS-SCROLL__HOVER-COLOR);
+}
+.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.ids-dialog .ids-dialog__body:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids-dialog .ids-dialog__body.ids-dialog__body--has-scrollbar {
-  padding-right: 20px;
+  padding-right: 1.25rem;
 }
 .ids-dialog .ids-dialog__body .ids-dialog__body__headline {
-  padding-top: 6px;
-  margin: 0px;
+  padding-top: 0.375rem;
+  margin: 0;
   align-self: center;
 }
 @media (max-width: 1024px) {
   .ids-dialog .ids-dialog__body .ids-dialog__body__headline {
-    padding-top: 0px;
+    padding-top: 0;
   }
 }
 .ids-dialog .ids-dialog__body .ids-dialog__body__header {
   box-sizing: border-box;
-  padding: 20px 0px 0px 0px;
+  padding: 1.25rem 0 0 0;
   width: 100%;
   display: flex;
   -webkit-justify-content: flex-end;
@@ -153,15 +149,15 @@
   -webkit-align-items: flex-end;
 }
 .ids-dialog .ids-dialog__body .ids-dialog__body__content {
-  margin-top: 20px;
+  margin-top: 1.25rem;
 }
 .ids-dialog .ids-dialog__footer {
-  margin-top: 30px;
+  margin-top: 1.875rem;
 }
 .ids-dialog .ids-dialog__footer,
 .ids-dialog ::slotted([slot=actions]) {
   display: flex;
-  gap: 20px;
+  gap: 1.25rem;
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -170,7 +166,7 @@
   .ids-dialog .ids-dialog__footer,
   .ids-dialog ::slotted([slot=actions]) {
     flex-direction: column;
-    gap: 20px;
+    gap: 1.25rem;
   }
 }