@inera/ids-design 8.2.1 → 9.0.1

package/components/data-table/data-table.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -25,122 +25,130 @@
 /*******
 * A11Y
 ********/
-.ids-data-table table {
+table.ids-data-table {
   width: 100%;
-  margin: 1.25rem auto 3.125rem;
   border-collapse: separate;
   border-spacing: 0;
   border: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
   border-radius: var(--IDS-DATA-TABLE__BORDER-RADIUS);
   overflow: visible;
 }
-.ids-data-table th,
-.ids-data-table td {
+table.ids-data-table th,
+table.ids-data-table td {
   padding: 0.5rem;
   text-align: left;
   border-bottom: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
   border-right: none;
-  white-space: nowrap;
-  position: relative;
   line-height: 1.25rem;
 }
-.ids-data-table th:first-child,
-.ids-data-table td:first-child {
+table.ids-data-table th:first-child,
+table.ids-data-table td:first-child {
   padding-left: 1rem;
 }
-.ids-data-table th:last-child,
-.ids-data-table td:last-child {
+table.ids-data-table th:last-child,
+table.ids-data-table td:last-child {
   padding-right: 1rem;
 }
-.ids-data-table th.ids-data-table__col--wide,
-.ids-data-table td.ids-data-table__col--wide {
+table.ids-data-table th.ids-data-table__col--wide,
+table.ids-data-table td.ids-data-table__col--wide {
   width: 30em;
 }
-.ids-data-table th .ids-data-table__icon,
-.ids-data-table td .ids-data-table__icon {
-  margin-left: 0.5rem;
+table.ids-data-table th .ids-data-table__icon,
+table.ids-data-table td .ids-data-table__icon {
   margin-bottom: -0.125rem;
   color: var(--IDS-DATA-TABLE__ICON-COLOR);
 }
-.ids-data-table th:hover .ids-data-table__icon,
-.ids-data-table td:hover .ids-data-table__icon {
+table.ids-data-table th:hover .ids-data-table__icon,
+table.ids-data-table td:hover .ids-data-table__icon {
   color: var(--IDS-DATA-TABLE__ICON-HOVER-COLOR);
 }
-.ids-data-table th {
+table.ids-data-table th {
   cursor: pointer;
+  white-space: nowrap;
   font-weight: bold;
   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);
   color: var(--IDS-DATA-TABLE__HEAD-COLOR);
 }
-.ids-data-table th:not(:first-child):not(:last-child) {
+table.ids-data-table th:not(:first-child):not(:last-child) {
   padding: 0.75rem 0.5rem 0.75rem 0.5rem;
 }
-.ids-data-table th:focus-visible {
+table.ids-data-table th:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: -0.313rem !important;
   z-index: 2;
 }
-.ids-data-table thead tr {
+table.ids-data-table thead tr {
   border-top-left-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
   border-top-right-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
 }
-.ids-data-table thead tr th:first-child {
+table.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 {
+table.ids-data-table thead tr th:last-child {
   border-top-right-radius: var(--IDS-DATA-TABLE__BORDER-TOP-RADIUS);
 }
-.ids-data-table tbody tr {
+table.ids-data-table tbody tr {
   border-bottom: 0.063rem solid var(--IDS-DATA-TABLE__CELL-BORDER_COLOR);
 }
-.ids-data-table tbody tr td {
+table.ids-data-table tbody tr td {
   color: var(--IDS-DATA-TABLE__CELL-COLOR);
+  font-size: 0.875rem;
+  vertical-align: middle;
+}
+table.ids-data-table tbody tr td.ids-data-table__td--flex {
+  display: flex;
+  align-items: center;
 }
-.ids-data-table tbody tr[selected] {
+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);
 }
-.ids-data-table tbody tr:last-child {
+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);
 }
-.ids-data-table tbody tr:last-child td {
+table.ids-data-table tbody tr:last-child td {
   border-bottom: none;
 }
-.ids-data-table tbody tr:last-child td:first-child {
+table.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 {
+table.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 {
+table.ids-data-table tbody tr td.ids-table__sub-row {
+  padding: 0.5rem 1rem;
+  margin: -0.5rem -1rem;
+  border-left: 0.5rem solid var(--ids-color-surface-border-default);
+}
+table.ids-data-table.ids-data-table--interactive tbody tr:hover {
   position: relative;
   z-index: 2;
   background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
   cursor: pointer;
 }
-.ids-data-table.ids-data-table--interactive tbody tr:focus-visible {
+table.ids-data-table.ids-data-table--interactive tbody tr:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: -0.25rem !important;
   background-color: var(--IDS-DATA-TABLE__ROW--SELECTED__COLOR);
 }
-.ids-data-table.ids-data-table--interactive tbody tr:focus-visible:last-child {
+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);
 }
-.ids-data-table.ids-data-table--empty td {
+table.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 {
+  table.ids-data-table {
     width: 100%;
   }
 }
 @media (max-width: 640px) {
-  .ids-data-table .ids-data-table__col--wide {
+  table.ids-data-table .ids-data-table__col--wide {
     width: auto;
   }
 }

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

@@ -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-date-label{background-color:var(--IDS-DATE-LABEL__BACKGROUND-COLOR);border:var(--IDS-DATE-LABEL__BORDER);border-radius:.625rem;display:inline-flex;flex-direction:column;height:fit-content;margin:0}.ids-date-label time.ids-date-label__time{align-items:center;align-self:flex-start;display:inline-flex;flex-direction:column;gap:.25rem;justify-content:center;padding:.938rem;position:relative}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator{padding-top:0}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before{background-color:var(--IDS-DATE-LABEL__SEPARATOR-COLOR);content:\"\";height:1rem;position:relative;top:-.125rem;width:.0625rem}@media (max-width:1024px){.ids-date-label time.ids-date-label__time{gap:.25rem;padding:.625rem}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before{height:.75rem}}.ids-date-label time.ids-date-label__time .ids-date-label__day{color:var(--IDS-DATE-LABEL__DAY-COLOR);font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:2.1875rem;font-style:normal;font-weight:700;letter-spacing:-.063rem;line-height:2.1875rem}@media (max-width:1024px){.ids-date-label time.ids-date-label__time .ids-date-label__day{font-size:1.5625rem;letter-spacing:-.078rem;line-height:1.5625rem}}.ids-date-label time.ids-date-label__time .ids-date-label__month{color:var(--IDS-DATE-LABEL__MONTH-COLOR);font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1.25rem;font-style:normal;font-weight:400;line-height:1.25rem;text-transform:uppercase}@media (max-width:1024px){.ids-date-label time.ids-date-label__time .ids-date-label__month{font-size:.9375rem;line-height:.9375rem}}.ids-date-label time.ids-date-label__time .ids-date-label__year{color:var(--IDS-DATE-LABEL__YEAR-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;font-style:normal;font-weight:400;line-height:1rem}@media (max-width:1024px){.ids-date-label time.ids-date-label__time .ids-date-label__year{font-size:.75rem;line-height:.75rem}}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-date-label{background-color:var(--IDS-DATE-LABEL__BACKGROUND-COLOR);border:var(--IDS-DATE-LABEL__BORDER);border-radius:.625rem;display:inline-flex;flex-direction:column;height:fit-content;margin:0}.ids-date-label time.ids-date-label__time{align-items:center;align-self:flex-start;display:inline-flex;flex-direction:column;gap:.25rem;justify-content:center;padding:.75rem .5rem;position:relative}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator{padding-top:0}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before{background-color:var(--IDS-DATE-LABEL__SEPARATOR-COLOR);content:\"\";height:.75rem;position:relative;top:-.125rem;width:.0625rem}.ids-date-label time.ids-date-label__time .ids-date-label__day{color:var(--IDS-DATE-LABEL__DAY-COLOR);font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:1.5rem;font-style:normal;font-weight:700;letter-spacing:-.078rem;line-height:1.5rem}.ids-date-label time.ids-date-label__time .ids-date-label__month{color:var(--IDS-DATE-LABEL__MONTH-COLOR);font-family:var(--IDS-FONT-FAMILY-HEADING);font-size:.9375rem;font-style:normal;font-weight:400;line-height:.9375rem;text-transform:uppercase}.ids-date-label time.ids-date-label__time .ids-date-label__year{color:var(--IDS-DATE-LABEL__YEAR-COLOR);font-family:var(--IDS-FONT-FAMILY-BASE);font-size:.75rem;font-style:normal;font-weight:400;line-height:.75rem}@media (min-width:1024px){.ids-date-label time.ids-date-label__time{padding:1rem .75rem}.ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before{height:1rem}.ids-date-label time.ids-date-label__time .ids-date-label__day{font-size:1.75rem;letter-spacing:-.063rem;line-height:1.75rem}.ids-date-label time.ids-date-label__time .ids-date-label__month{font-size:1.25rem;line-height:1.25rem}.ids-date-label time.ids-date-label__time .ids-date-label__year{font-size:1rem;line-height:1rem}}";
 
 var dateLabelLit = css`${unsafeCSS(css_248z)}`;
 

package/components/date-label/date-label.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -23,7 +23,7 @@
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  padding: 0.938rem;
+  padding: 0.75rem 0.5rem;
   align-items: center;
   align-self: flex-start;
   justify-content: center;
@@ -36,61 +36,54 @@
   content: "";
   position: relative;
   width: 0.0625rem;
-  height: 1rem;
+  height: 0.75rem;
   background-color: var(--IDS-DATE-LABEL__SEPARATOR-COLOR);
   top: -0.125rem;
 }
-@media (max-width: 1024px) {
-  .ids-date-label time.ids-date-label__time {
-    padding: 0.625rem;
-    gap: 0.25rem;
-  }
-  .ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before {
-    height: 0.75rem;
-  }
-}
 .ids-date-label time.ids-date-label__time .ids-date-label__day {
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   color: var(--IDS-DATE-LABEL__DAY-COLOR);
   font-style: normal;
   font-weight: 700;
-  font-size: 2.1875rem;
-  line-height: 2.1875rem;
-  letter-spacing: -0.063rem;
-}
-@media (max-width: 1024px) {
-  .ids-date-label time.ids-date-label__time .ids-date-label__day {
-    letter-spacing: -0.078rem;
-    font-size: 1.5625rem;
-    line-height: 1.5625rem;
-  }
+  letter-spacing: -0.078rem;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
 }
 .ids-date-label time.ids-date-label__time .ids-date-label__month {
   font-style: normal;
   font-weight: 400;
-  font-size: 1.25rem;
-  line-height: 1.25rem;
   text-transform: uppercase;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   color: var(--IDS-DATE-LABEL__MONTH-COLOR);
-}
-@media (max-width: 1024px) {
-  .ids-date-label time.ids-date-label__time .ids-date-label__month {
-    font-size: 0.9375rem;
-    line-height: 0.9375rem;
-  }
+  font-size: 0.9375rem;
+  line-height: 0.9375rem;
 }
 .ids-date-label time.ids-date-label__time .ids-date-label__year {
   font-family: var(--IDS-FONT-FAMILY-BASE);
   color: var(--IDS-DATE-LABEL__YEAR-COLOR);
   font-style: normal;
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1rem;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
 }
-@media (max-width: 1024px) {
+@media (min-width: 1024px) {
+  .ids-date-label time.ids-date-label__time {
+    padding: 1rem 0.75rem;
+  }
+  .ids-date-label time.ids-date-label__time.ids-date-label__time--separator:before {
+    height: 1rem;
+  }
+  .ids-date-label time.ids-date-label__time .ids-date-label__day {
+    letter-spacing: -0.063rem;
+    font-size: 1.75rem;
+    line-height: 1.75rem;
+  }
+  .ids-date-label time.ids-date-label__time .ids-date-label__month {
+    font-size: 1.25rem;
+    line-height: 1.25rem;
+  }
   .ids-date-label time.ids-date-label__time .ids-date-label__year {
-    font-size: 0.75rem;
-    line-height: 0.75rem;
+    font-size: 1rem;
+    line-height: 1rem;
   }
 }

package/components/dialog/dialog-lit.js

@@ -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-dialog{align-items:flex-start;background-color:var(--IDS-DIALOG__BACKGROUND-COLOR);border:var(--IDS-DIALOG__BORDER-WIDTH) solid var(--IDS-DIALOG__BORDER-COLOR);border-radius:var(--IDS-DIALOG__BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);box-sizing:border-box;color:var(--IDS-DIALOG__COLOR);display:flex;flex-direction:column;left:50%;max-height:calc(100% - 10rem);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 1.25rem}}@media (max-width:640px){.ids-dialog{max-height:calc(100% - 5rem);width:calc(100% - 3.75rem)}}.ids-dialog.ids-dialog--hidden{display:none}.ids-dialog .ids-dialog__dismissible{padding-bottom:.25rem;padding-left:.25rem;position:absolute;right:1rem;top:.75rem}@media (max-width:1024px){.ids-dialog .ids-dialog__dismissible{right:.5rem}}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button{background:none;border:none;color:inherit;font:inherit;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__dismissible .ids-dialog__close-button:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.375rem!important}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:1.25rem;justify-content:center;position:relative;width:1.25rem}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;pointer-events:none;position:absolute}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-HOVER-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar{width:.625rem}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;margin-top:0;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner{background-color:transparent}.ids-dialog .ids-dialog__body{box-sizing:content-box;height:100%;margin-right:-.4375rem;overflow-y:auto;padding:0 .75rem 0 .25rem;width:-webkit-fill-available;width:-moz-available}.ids-dialog .ids-dialog__body.ids-dialog__body--scroll-area-focus:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dialog .ids-dialog__body .ids-dialog__body-headline{align-self:center;margin:0}@media (max-width:1024px){.ids-dialog .ids-dialog__body .ids-dialog__body-headline{padding-top:0}}.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;flex-wrap:wrap;gap:1.25rem;justify-content:center;padding-bottom:.25rem;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 css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dialog{align-items:flex-start;background-color:var(--IDS-DIALOG__BACKGROUND-COLOR);border:var(--IDS-DIALOG__BORDER-WIDTH) solid var(--IDS-DIALOG__BORDER-COLOR);border-radius:var(--IDS-DIALOG__BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);box-sizing:border-box;color:var(--IDS-DIALOG__COLOR);display:flex;flex-direction:column;left:50%;max-height:calc(100% - 10rem);max-width:calc(100% - 3.75rem);padding:1.75rem 1.25rem;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}.ids-dialog.ids-dialog--hidden{display:none}.ids-dialog .ids-dialog__dismissible{background-color:var(--IDS-DIALOG__BACKGROUND-COLOR);position:absolute;right:.75rem;top:1rem}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button{background:none;border:none;color:inherit;font:inherit;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__dismissible .ids-dialog__close-button:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:.375rem!important}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:1.25rem;justify-content:center;position:relative;width:1.25rem}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--IDS-ICON--ACTIVE-COLOR);content:\"\\e916\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;position:absolute}.ids-dialog .ids-dialog__dismissible .ids-dialog__close-button:hover:before{color:var(--IDS-ICON--ACTIVE-HOVER-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar{width:.625rem}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;margin-top:0;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner{background-color:transparent}.ids-dialog .ids-dialog__body{box-sizing:content-box;color:var(--ids-color-surface-text-on-default);font-family:var(--IDS-FONT-FAMILY-BASE);height:100%;margin-right:-.4375rem;overflow-y:auto;padding:0 .75rem 0 .25rem;width:-webkit-fill-available;width:-moz-available}.ids-dialog .ids-dialog__body.ids-dialog__body--scroll-area-focus:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dialog .ids-dialog__body .ids-dialog__body-headline{align-self:center;margin:0}.ids-dialog .ids-dialog__body .ids-dialog__body-content{margin-top:1.25rem}.ids-dialog.ids-dialog--dismissible .ids-dialog__body-headline{margin-right:1rem}.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar{width:.625rem}.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;margin-top:1rem;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-corner{background-color:transparent}.ids-dialog .ids-dialog__footer{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-top:1.875rem;padding-bottom:.25rem;width:100%}@media (max-width:1024px){.ids-dialog .ids-dialog__footer{flex-direction:column;gap:1.25rem}}@media (max-width:640px){.ids-dialog{max-height:calc(100% - 5rem);width:calc(100% - 3.75rem)}}.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)}`;
 

package/components/dialog/dialog-shadow-lit.d.ts

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

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

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dialog ::slotted([slot=actions]){align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;padding-bottom:.25rem;width:100%}@media (max-width:1024px){.ids-dialog ::slotted([slot=actions]){flex-direction:column;gap:1.25rem}}";
+
+var dialogShadowLit = css`${unsafeCSS(css_248z)}`;
+
+export { dialogShadowLit as default };

package/components/dialog/dialog-shadow.css

@@ -0,0 +1,27 @@
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+.ids-dialog ::slotted([slot=actions]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 0.25rem;
+}
+@media (max-width: 1024px) {
+  .ids-dialog ::slotted([slot=actions]) {
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+}

package/components/dialog/dialog.css

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -43,36 +43,19 @@
   background-color: var(--IDS-DIALOG__BACKGROUND-COLOR);
   box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   border-radius: var(--IDS-DIALOG__BORDER-RADIUS);
-  padding: 2.5rem 1.875rem;
+  padding: 1.75rem 1.25rem;
   max-height: calc(100% - 10rem);
   max-width: calc(100% - 3.75rem);
   color: var(--IDS-DIALOG__COLOR);
 }
-@media (max-width: 1024px) {
-  .ids-dialog {
-    padding: 2.5rem 1.25rem;
-  }
-}
-@media (max-width: 640px) {
-  .ids-dialog {
-    max-height: calc(100% - 5rem);
-    width: calc(100% - 3.75rem);
-  }
-}
 .ids-dialog.ids-dialog--hidden {
   display: none;
 }
 .ids-dialog .ids-dialog__dismissible {
-  padding-left: 0.25rem;
-  padding-bottom: 0.25rem;
   position: absolute;
-  top: 0.75rem;
-  right: 1rem;
-}
-@media (max-width: 1024px) {
-  .ids-dialog .ids-dialog__dismissible {
-    right: 0.5rem;
-  }
+  top: 1rem;
+  right: 0.75rem;
+  background-color: var(--IDS-DIALOG__BACKGROUND-COLOR);
 }
 .ids-dialog .ids-dialog__dismissible .ids-dialog__close-button {
   min-width: 1.5rem;
@@ -109,7 +92,6 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e916";
@@ -141,6 +123,8 @@
   background-color: transparent;
 }
 .ids-dialog .ids-dialog__body {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--ids-color-surface-text-on-default);
   padding: 0 0.75rem 0 0.25rem;
   margin-right: -0.4375rem;
   height: 100%;
@@ -157,19 +141,37 @@
   margin: 0;
   align-self: center;
 }
-@media (max-width: 1024px) {
-  .ids-dialog .ids-dialog__body .ids-dialog__body-headline {
-    padding-top: 0;
-  }
-}
 .ids-dialog .ids-dialog__body .ids-dialog__body-content {
   margin-top: 1.25rem;
 }
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body-headline {
+  margin-right: 1rem;
+}
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar {
+  width: 0.625rem;
+}
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-thumb {
+  cursor: auto;
+  background: var(--IDS-SCROLL__THUMB-COLOR);
+  border-radius: 0.625rem;
+  border: 0.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
+}
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL__THUMB-HOVER-COLOR);
+}
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);
+  border-radius: 0.625rem;
+  outline: 0.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR);
+  margin-top: 1rem;
+}
+.ids-dialog.ids-dialog--dismissible .ids-dialog__body::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
 .ids-dialog .ids-dialog__footer {
   margin-top: 1.875rem;
 }
-.ids-dialog .ids-dialog__footer,
-.ids-dialog ::slotted([slot=actions]) {
+.ids-dialog .ids-dialog__footer {
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
@@ -179,12 +181,17 @@
   padding-bottom: 0.25rem;
 }
 @media (max-width: 1024px) {
-  .ids-dialog .ids-dialog__footer,
-  .ids-dialog ::slotted([slot=actions]) {
+  .ids-dialog .ids-dialog__footer {
     flex-direction: column;
     gap: 1.25rem;
   }
 }
+@media (max-width: 640px) {
+  .ids-dialog {
+    max-height: calc(100% - 5rem);
+    width: calc(100% - 3.75rem);
+  }
+}
 
 /* Overlay */
 .ids-dialog-overlay {

package/components/dropdown/dropdown-lit.js

@@ -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}}@media (max-width:640px){.ids-dropdown.ids-dropdown--sblock,:host([sblock]) .ids-dropdown{display:block;width:100%}}@media (max-width:1024px){.ids-dropdown.ids-dropdown--mblock,:host([mblock]) .ids-dropdown{display:block;width:100%}}.ids-dropdown{display:inline-block;position:relative}.ids-dropdown-content{background-color:var(--IDS-DROPDOWN__CONTENT-BACKGROUND-COLOR);border:.063rem solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);display:none;display:flex;flex-direction:column;left:0;max-width:fit-content;padding:.5rem;position:absolute;right:auto;top:calc(100% + .25rem);width:auto;z-index:10}.ids-dropdown-content.ids-dropdown-content--show{display:flex}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area{border-radius:var(--IDS-BORDER-RADIUS);margin:0 -.5rem;overflow:auto;padding:0 .5rem}.ids-dropdown-content.ids-dropdown-content--position-right{left:auto;right:0}@media (max-width:1024px){.ids-dropdown-content.ids-dropdown-content--mblock{left:0!important;max-width:none;right:0!important}}@media (max-width:640px){.ids-dropdown-content.ids-dropdown-content--sblock{left:0!important;max-width:none;right:0!important}}@media (max-width:1024px){.ids-dropdown-content:host([mblock]){max-width:none}}@media (max-width:640px){.ids-dropdown-content:host([sblock]){max-width:none}}.ids-dropdown-content .ids-dropdown-content__button,.ids-dropdown-content .ids-dropdown-content__link{background:none;border:none;border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-COLOR);cursor:pointer;display:flex;flex-grow:1;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:.5rem;line-height:1.5rem!important;padding:.375rem .75rem!important;text-align:left;text-decoration:none!important;white-space:normal!important}.ids-dropdown-content ::slotted(*){align-items:flex-start!important;background:none;border:none;border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-COLOR);cursor:pointer;display:flex;display:flex!important;flex-grow:1;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:.5rem;gap:.5rem!important;line-height:1.5rem!important;padding:.375rem .75rem!important;text-align:left;text-decoration:none!important;white-space:normal!important}.ids-dropdown-content .ids-dropdown-content__button:hover,.ids-dropdown-content .ids-dropdown-content__link:hover,.ids-dropdown-content ::slotted(a:hover),.ids-dropdown-content ::slotted(button:hover){background-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR);border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content .ids-dropdown-content__button:active,.ids-dropdown-content .ids-dropdown-content__link:active,.ids-dropdown-content ::slotted(a:active),.ids-dropdown-content ::slotted(button:active){background-color:var(--IDS-DROPDOWN__LINK-ACTIVE-BACKGROUND-COLOR);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content .ids-dropdown-content__button:focus-visible,.ids-dropdown-content .ids-dropdown-content__link:focus-visible,.ids-dropdown-content ::slotted(a:focus-visible),.ids-dropdown-content ::slotted(button:focus-visible),.ids-dropdown-content a:focus-visible,.ids-dropdown-content button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE);outline-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR)!important;outline-offset:-.125rem!important}";
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dropdown{display:inline-block;position:relative}.ids-dropdown .ids-dropdown__content{display:none}.ids-dropdown.ids-dropdown--expanded .ids-dropdown__content{display:block}@media (max-width:1024px){.ids-dropdown.ids-dropdown--m-block{display:block;width:100%}}@media (max-width:640px){.ids-dropdown.ids-dropdown--s-block{display:block;width:100%}}.ids-dropdown-content{background-color:var(--IDS-DROPDOWN__CONTENT-BACKGROUND-COLOR);border:.063rem solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:var(--IDS-BOX-SHADOW-ELEVATED-2);display:none;flex-direction:column;left:0;max-width:-webkit-fill-available;max-width:-moz-available;min-width:fit-content;padding:.5rem;position:absolute;right:auto;top:calc(100% + .25rem);width:-webkit-fill-available;width:-moz-available;z-index:10}.ids-dropdown-content.ids-dropdown-content--show{display:flex}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area:focus-visible{outline:.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area::-webkit-scrollbar{width:.625rem}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL__THUMB-COLOR);border:.125rem solid var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;cursor:auto}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL__THUMB-HOVER-COLOR)}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area::-webkit-scrollbar-track{background:var(--IDS-SCROLL__TRACK-BACKGROUND-COLOR);border-radius:.625rem;margin-top:0;outline:.0625rem solid var(--IDS-SCROLL__TRACK-OUTLINE-COLOR)}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area::-webkit-scrollbar-corner{background-color:transparent}.ids-dropdown-content.ids-dropdown-content--scrollable .ids-dropdown-content__scroll-area{border-radius:var(--IDS-BORDER-RADIUS);margin:0 -.5rem;overflow:auto;padding:0 .5rem}.ids-dropdown-content.ids-dropdown-content--position-right{left:auto;right:0}.ids-dropdown-content .ids-dropdown-content__button,.ids-dropdown-content .ids-dropdown-content__link{background:none;border:none;border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-COLOR);cursor:pointer;display:flex;flex-grow:1;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:.5rem;line-height:1.5rem!important;padding:.375rem .75rem!important;text-align:left;text-decoration:none!important;white-space:normal!important;width:100%}.ids-dropdown-content .ids-dropdown-content__button:hover,.ids-dropdown-content .ids-dropdown-content__link:hover{background-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR);border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content .ids-dropdown-content__button:active,.ids-dropdown-content .ids-dropdown-content__link:active{background-color:var(--IDS-DROPDOWN__LINK-ACTIVE-BACKGROUND-COLOR);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content .ids-dropdown-content__button:focus-visible,.ids-dropdown-content .ids-dropdown-content__link:focus-visible,.ids-dropdown-content a:focus-visible,.ids-dropdown-content button:focus-visible{outline:var(--IDS-FOCUS__OUTLINE);outline-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR)!important;outline-offset:-.125rem!important}@media (max-width:1024px){.ids-dropdown-content.ids-dropdown-content--mblock{left:0!important;max-width:none;right:0!important}}@media (max-width:640px){.ids-dropdown-content.ids-dropdown-content--sblock{left:0!important;max-width:none;right:0!important}}";
 
 var dropdownLit = css`
   ${unsafeCSS(css_248z)}

package/components/dropdown/dropdown-shadow-lit.d.ts

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

package/components/dropdown/dropdown-shadow-lit.js

@@ -0,0 +1,9 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = "@media (max-width:639px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}@media (max-width:1024px){.ids-dropdown:host([mblock]){display:block;width:100%}}@media (max-width:640px){.ids-dropdown:host([sblock]){display:block;width:100%}}.ids-dropdown-content ::slotted(*){align-items:flex-start!important;background:none;border:none;border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-COLOR);cursor:pointer;display:flex;display:flex!important;flex-grow:1;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:.5rem;gap:.5rem!important;line-height:1.5rem!important;padding:.375rem .75rem!important;text-align:left;text-decoration:none!important;white-space:normal!important;width:100%}.ids-dropdown-content ::slotted(a:hover),.ids-dropdown-content ::slotted(button:hover){background-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR);border-radius:var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content ::slotted(a:active),.ids-dropdown-content ::slotted(button:active){background-color:var(--IDS-DROPDOWN__LINK-ACTIVE-BACKGROUND-COLOR);color:var(--IDS-DROPDOWN__LINK-HOVER-COLOR)}.ids-dropdown-content ::slotted(a:focus-visible),.ids-dropdown-content ::slotted(button:focus-visible){outline:var(--IDS-FOCUS__OUTLINE);outline-color:var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR)!important;outline-offset:-.125rem!important}@media (max-width:1024px){.ids-dropdown-content:host([mblock]){max-width:none}}@media (max-width:640px){.ids-dropdown-content:host([sblock]){max-width:none}}";
+
+var dropdownShadowLit = css`
+  ${unsafeCSS(css_248z)}
+`;
+
+export { dropdownShadowLit as default };

package/components/dropdown/dropdown-shadow.css

@@ -0,0 +1,90 @@
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 1024px) {
+  .ids-dropdown:host([mblock]) {
+    display: block;
+    width: 100%;
+  }
+}
+@media (max-width: 640px) {
+  .ids-dropdown:host([sblock]) {
+    display: block;
+    width: 100%;
+  }
+}
+
+.ids-dropdown-content ::slotted(*) {
+  display: flex;
+  width: 100%;
+  gap: 0.5rem;
+  flex-grow: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);
+  color: var(--IDS-DROPDOWN__LINK-COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE) !important;
+  font-size: 1rem !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 1.5rem !important;
+  padding: 0.375rem 0.75rem !important;
+  text-decoration: none !important;
+  text-align: left;
+  white-space: normal !important;
+  display: flex !important;
+  gap: 0.5rem !important;
+  align-items: flex-start !important;
+}
+.ids-dropdown-content ::slotted(a:hover),
+.ids-dropdown-content ::slotted(button:hover) {
+  color: var(--IDS-DROPDOWN__LINK-HOVER-COLOR);
+  background-color: var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR);
+  border-radius: var(--IDS-DROPDOWN__LINK-BORDER-RADIUS);
+}
+.ids-dropdown-content ::slotted(a:active),
+.ids-dropdown-content ::slotted(button:active) {
+  color: var(--IDS-DROPDOWN__LINK-HOVER-COLOR);
+  background-color: var(--IDS-DROPDOWN__LINK-ACTIVE-BACKGROUND-COLOR);
+}
+.ids-dropdown-content ::slotted(a:focus-visible),
+.ids-dropdown-content ::slotted(button:focus-visible) {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: -0.125rem !important;
+  outline-color: var(--IDS-DROPDOWN__LINK-HOVER-BACKGROUND-COLOR) !important;
+}
+@media (max-width: 1024px) {
+  .ids-dropdown-content:host([mblock]) {
+    max-width: none;
+  }
+}
+@media (max-width: 640px) {
+  .ids-dropdown-content:host([sblock]) {
+    max-width: none;
+  }
+}