@inera/ids-design 5.1.3 → 5.2.1

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

@@ -10,386 +10,141 @@
   }
 }
 
-.ids-data-table--empty.ids-table--disabled, .ids-data-table--empty[disabled], .ids-data-table--interactive.ids-table--disabled, .ids-data-table--interactive[disabled], .ids-data-table.ids-table--disabled, .ids-data-table[disabled] {
-  color: var(--table-disabled_color) !important;
-  border: var(--table-disabled_border) !important;
-  background-color: white !important;
-}
-
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 .ids-data-table table {
   width: 100%;
   background-color: white;
   margin: 20px auto 50px;
   border-collapse: separate;
   border-spacing: 0;
-  border: 1px solid var(--data-table-cell_color);
-  border-radius: var(--data-table_border-radius);
+  border: 1px 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 {
-  padding: 8px;
-  text-align: left;
-  border-bottom: 1px solid var(--data-table-cell_color);
-  border-right: none;
-  white-space: nowrap;
-}
-.ids-data-table th {
-  cursor: pointer;
-  font-weight: bold;
-  border-bottom: 2px solid var(--data-table-cell_color);
-  background-color: var(--data-table-head_background-color);
-  font-family: var(--data-table_font-style);
-}
-.ids-data-table th:first-child {
-  padding: 12px 8px 12px 16px;
-}
-.ids-data-table th:last-child {
-  padding: 12px 16px 12px 8px;
-}
-.ids-data-table th:not(:first-child):not(:last-child) {
-  padding: 12px 8px 12px 8px;
-}
-.ids-data-table td:first-child {
-  padding: 8px 8px 8px 16px;
-}
-.ids-data-table td:last-child {
-  padding: 8px 16px 8px 8px;
-}
-.ids-data-table td:not(:first-child):not(:last-child) {
-  padding: 8px 8px 8px 8px;
-}
-.ids-data-table tr {
-  border-bottom: 1px solid #ddd;
-}
-.ids-data-table th:last-child, .ids-data-table td:last-child {
-  border-right: none;
-}
-.ids-data-table .ids-data-table__col--wide {
-  width: 30em;
-}
-.ids-data-table table thead tr:first-child th:first-child {
+.ids-data-table thead tr:first-child th:first-child {
   border-top-left-radius: 10px;
 }
-.ids-data-table table thead tr:first-child th:last-child {
+.ids-data-table thead tr:first-child th:last-child {
   border-top-right-radius: 10px;
 }
-.ids-data-table table tbody tr:last-child td {
+.ids-data-table tbody tr:last-child td {
   border-bottom: none;
 }
-.ids-data-table table tbody tr:last-child td:first-child {
+.ids-data-table tbody tr:last-child td:first-child {
   border-bottom-left-radius: 10px;
 }
-.ids-data-table table tbody tr:last-child td:last-child {
+.ids-data-table tbody tr:last-child td:last-child {
   border-bottom-right-radius: 10px;
 }
-.ids-data-table th ids-icon-arrow,
-.ids-data-table th ids-icon-swap {
-  cursor: pointer;
-  transform: rotate(-90deg);
-  margin-left: 5.5px;
-}
-.ids-data-table .ids-icon-arrow-opposite {
-  transform: rotate(90deg);
-  margin-left: 6em;
-}
-.ids-data-table th, .ids-data-table td {
-  color: var(--IDS-COLOR-NEUTRAL-20);
-}
-.ids-data-table th:focus {
-  outline: 2px solid --focus_outline;
-  z-index: 2;
-}
-.ids-data-table th:focus {
-  outline-offset: -5px;
-}
-.ids-data-table tr:focus {
-  outline: none;
-}
-.ids-data-table table:hover,
-.ids-data-table table:active,
-.ids-data-table table:focus {
-  background-color: var(--table-active_background-color);
-  box-shadow: var(--table-active_box-shadow);
-}
-.ids-data-table.ids-table--s th, .ids-data-table.ids-table--s td {
-  font-size: 0.875rem;
-  padding: 4px;
-}
-.ids-data-table.ids-table--l th, .ids-data-table.ids-table--l td {
-  font-size: 1.125rem;
-  padding: 12px;
-}
-@media (max-width: 1024px) {
-  .ids-data-table table {
-    width: 100%;
-  }
-}
-@media (max-width: 640px) {
-  .ids-data-table .ids-data-table__col--wide {
-    width: auto;
-  }
-}
-.ids-data-table.ids-table--striped tbody tr:nth-child(odd) {
-  background-color: var(--table-striped_background-color);
-}
-.ids-data-table.ids-table--bordered table {
-  border: 2px solid var(--table-bordered_border-color);
-}
-.ids-data-table.ids-table--bordered th, .ids-data-table.ids-table--bordered td {
-  border-bottom: 2px solid var(--table-bordered_border-color);
-}
-
-.ids-data-table--interactive table {
-  width: 100%;
-  background-color: white;
-  margin: 20px auto 50px;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: 1px solid var(--data-table-cell_color);
-  border-radius: var(--data-table_border-radius);
-  overflow: visible;
-}
-.ids-data-table--interactive th, .ids-data-table--interactive td {
-  cursor: pointer;
+.ids-data-table th,
+.ids-data-table td {
   padding: 8px;
   text-align: left;
-  border-bottom: 1px solid var(--data-table-cell_color);
+  border-bottom: 1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);
   border-right: none;
   white-space: nowrap;
+  position: relative;
 }
-.ids-data-table--interactive th {
-  font-weight: bold;
-  border-bottom: 2px solid var(--data-table-cell_color);
-  background-color: var(--data-table-head_background-color);
-  font-family: var(--data-table_font-style);
-}
-.ids-data-table--interactive th:first-child {
-  padding: 12px 8px 12px 16px;
-}
-.ids-data-table--interactive th:last-child {
-  padding: 12px 16px 12px 8px;
-}
-.ids-data-table--interactive th:not(:first-child):not(:last-child) {
-  padding: 12px 8px 12px 8px;
-}
-.ids-data-table--interactive td:first-child {
-  padding: 8px 8px 8px 16px;
-}
-.ids-data-table--interactive td:last-child {
-  padding: 8px 16px 8px 8px;
-}
-.ids-data-table--interactive td:not(:first-child):not(:last-child) {
-  padding: 8px 8px 8px 8px;
-}
-.ids-data-table--interactive tr {
-  border-bottom: 1px solid #ddd;
+.ids-data-table th:first-child,
+.ids-data-table td:first-child {
+  padding-left: 16px;
 }
-.ids-data-table--interactive th:last-child, .ids-data-table--interactive td:last-child {
-  border-right: none;
+.ids-data-table th:last-child,
+.ids-data-table td:last-child {
+  padding-right: 16px;
 }
-.ids-data-table--interactive .ids-data-table__col--wide {
+.ids-data-table th.ids-data-table__col--wide,
+.ids-data-table td.ids-data-table__col--wide {
   width: 30em;
 }
-.ids-data-table--interactive table thead tr:first-child th:first-child {
-  border-top-left-radius: 10px;
-}
-.ids-data-table--interactive table thead tr:first-child th:last-child {
-  border-top-right-radius: 10px;
-}
-.ids-data-table--interactive table tbody tr:last-child td {
-  border-bottom: none;
-}
-.ids-data-table--interactive table tbody tr:last-child td:first-child {
-  border-bottom-left-radius: 10px;
-}
-.ids-data-table--interactive table tbody tr:last-child td:last-child {
-  border-bottom-right-radius: 10px;
-}
-.ids-data-table--interactive th ids-icon-arrow,
-.ids-data-table--interactive th ids-icon-swap {
+.ids-data-table th ids-icon-arrow,
+.ids-data-table th ids-icon-swap,
+.ids-data-table td ids-icon-arrow,
+.ids-data-table td ids-icon-swap {
   cursor: pointer;
   transform: rotate(-90deg);
   margin-left: 5.5px;
 }
-.ids-data-table--interactive .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,
+.ids-data-table td ids-icon-arrow.ids-icon-arrow-opposite,
+.ids-data-table td ids-icon-swap.ids-icon-arrow-opposite {
   transform: rotate(90deg);
   margin-left: 6em;
 }
-.ids-data-table--interactive th, .ids-data-table--interactive td {
-  color: var(--IDS-COLOR-NEUTRAL-20);
-}
-.ids-data-table--interactive tr:focus, .ids-data-table--interactive th:focus {
-  outline: 2px solid --focus_outline;
-  z-index: 2;
-}
-.ids-data-table--interactive tr:focus:last-child {
-  border-radius: 0px 0px 5px 5px;
-}
-.ids-data-table--interactive th:focus {
-  outline-offset: -5px;
-}
-.ids-data-table--interactive tr:focus {
-  outline-offset: -4px;
-}
-.ids-data-table--interactive tbody tr:hover {
-  box-shadow: 0 0 5px black;
-}
-.ids-data-table--interactive table:hover,
-.ids-data-table--interactive table:active,
-.ids-data-table--interactive table:focus {
-  background-color: var(--table-active_background-color);
-  box-shadow: var(--table-active_box-shadow);
-}
-.ids-data-table--interactive tr:hover:last-child {
-  border-radius: 0px 0px 5px 5px;
-}
-.ids-data-table--interactive.ids-table--s th, .ids-data-table--interactive.ids-table--s td {
-  font-size: 0.875rem;
-  padding: 4px;
-}
-.ids-data-table--interactive.ids-table--l th, .ids-data-table--interactive.ids-table--l td {
-  font-size: 1.125rem;
-  padding: 12px;
-}
-@media (max-width: 1024px) {
-  .ids-data-table--interactive table {
-    width: 100%;
-  }
-}
-@media (max-width: 640px) {
-  .ids-data-table--interactive .ids-data-table__col--wide {
-    width: auto;
-  }
-}
-.ids-data-table--interactive.ids-table--striped tbody tr:nth-child(odd) {
-  background-color: var(--table-striped_background-color);
-}
-.ids-data-table--interactive.ids-table--bordered table {
-  border: 2px solid var(--table-bordered_border-color);
-}
-.ids-data-table--interactive.ids-table--bordered th, .ids-data-table--interactive.ids-table--bordered td {
-  border-bottom: 2px solid var(--table-bordered_border-color);
-}
-
-.ids-data-table--empty table {
-  width: 100%;
-  background-color: white;
-  margin: 20px auto 50px;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: 1px solid var(--data-table-cell_color);
-  border-radius: var(--data-table_border-radius);
-  overflow: visible;
-}
-.ids-data-table--empty th, .ids-data-table--empty td {
-  padding: 8px;
-  text-align: left;
-  border-bottom: 1px solid var(--data-table-cell_color);
-  border-right: none;
-  white-space: nowrap;
-}
-.ids-data-table--empty th {
+.ids-data-table th {
   cursor: pointer;
   font-weight: bold;
-  border-bottom: 2px solid var(--data-table-cell_color);
-  background-color: var(--data-table-head_background-color);
-  font-family: var(--data-table_font-style);
+  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);
 }
-.ids-data-table--empty th:first-child {
-  padding: 12px 8px 12px 16px;
-}
-.ids-data-table--empty th:last-child {
-  padding: 12px 16px 12px 8px;
-}
-.ids-data-table--empty th:not(:first-child):not(:last-child) {
+.ids-data-table th:not(:first-child):not(:last-child) {
   padding: 12px 8px 12px 8px;
 }
-.ids-data-table--empty tr {
-  border-bottom: 1px solid #ddd;
-}
-.ids-data-table--empty td {
-  padding: 1em;
+.ids-data-table th:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: -5px !important;
+  z-index: 2;
 }
-.ids-data-table--empty th:last-child, .ids-data-table--empty td:last-child {
-  border-right: none;
+.ids-data-table tr {
+  border-bottom: 1px solid #ddd;
 }
-.ids-data-table--empty .ids-data-table__col--wide {
-  width: 30em;
+.ids-data-table tr:focus {
+  outline: none;
 }
-.ids-data-table--empty table thead tr:first-child th:first-child {
-  border-top-left-radius: 10px;
+.ids-data-table tr[selected] {
+  background-color: var(--IDS-DATA-TABLE-CELL--SELECTED);
 }
-.ids-data-table--empty table thead tr:first-child th:last-child {
-  border-top-right-radius: 10px;
+.ids-data-table.ids-data-table--interactive tr:hover {
+  box-shadow: 0 0 5px black;
 }
-.ids-data-table--empty table tbody tr:last-child td {
-  border-bottom: none;
+.ids-data-table.ids-data-table--interactive tr:hover:last-child {
+  border-radius: 0 0 5px 5px;
 }
-.ids-data-table--empty table tbody tr:last-child td:first-child {
-  border-bottom-left-radius: 10px;
+.ids-data-table.ids-data-table--interactive tbody tr:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: -4px !important;
 }
-.ids-data-table--empty table tbody tr:last-child td:last-child {
-  border-bottom-right-radius: 10px;
+.ids-data-table.ids-data-table--interactive tbody tr:focus:last-child {
+  border-radius: 0 0 5px 5px;
 }
-.ids-data-table--empty th ids-icon-arrow,
-.ids-data-table--empty th ids-icon-swap {
-  cursor: pointer;
-  transform: rotate(-90deg);
-  margin-left: 5.5px;
+.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);
+  background-color: var(--table-active_background-color);
 }
-.ids-data-table--empty .ids-icon-arrow-opposite {
-  transform: rotate(90deg);
-  margin-left: 6em;
+.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;
 }
-.ids-data-table--empty th, .ids-data-table--empty td {
-  color: var(--IDS-COLOR-NEUTRAL-20);
+.ids-data-table.ids-data-table--empty td {
+  padding: 1em;
 }
-.ids-data-table--empty .empty-message {
+.ids-data-table.ids-data-table--empty .empty-message {
   text-align: left;
 }
-.ids-data-table--empty tr:focus, .ids-data-table--empty th:focus {
-  outline: 2px solid --focus_outline;
-  z-index: 2;
-}
-.ids-data-table--empty th:focus {
-  outline-offset: -5px;
-}
-.ids-data-table--empty tr:focus {
-  outline-offset: -1px;
-}
-.ids-data-table--empty .empty-message:focus {
+.ids-data-table.ids-data-table--empty .empty-message:focus {
   outline: none;
 }
-.ids-data-table--empty table:hover,
-.ids-data-table--empty table:active,
-.ids-data-table--empty table:focus {
-  background-color: var(--table-active_background-color);
-  box-shadow: var(--table-active_box-shadow);
-}
-.ids-data-table--empty.ids-table--s th, .ids-data-table--empty.ids-table--s td {
-  font-size: 0.875rem;
-  padding: 4px;
-}
-.ids-data-table--empty.ids-table--l th, .ids-data-table--empty.ids-table--l td {
-  font-size: 1.125rem;
-  padding: 12px;
-}
 @media (max-width: 1024px) {
-  .ids-data-table--empty table {
+  .ids-data-table table {
     width: 100%;
   }
 }
 @media (max-width: 640px) {
-  .ids-data-table--empty .ids-data-table__col--wide {
+  .ids-data-table .ids-data-table__col--wide {
     width: auto;
   }
-}
-.ids-data-table--empty.ids-table--striped tbody tr:nth-child(odd) {
-  background-color: var(--table-striped_background-color);
-}
-.ids-data-table--empty.ids-table--bordered table {
-  border: 2px solid var(--table-bordered_border-color);
-}
-.ids-data-table--empty.ids-table--bordered th, .ids-data-table--empty.ids-table--bordered td {
-  border-bottom: 2px solid var(--table-bordered_border-color);
 }

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 .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-SCROLL_BACKGROUND-COLOR);border-radius:10px;margin-bottom:10px;margin-top:10px}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border-radius:10px}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover{background:#555}.ids-dialog{align-items:flex-start;background-color:#fff;border:1px solid var(--dialog_border-color);border-radius:var(--dialog_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);color:var(--dialog_color);display:flex;flex-direction:column;left:50%;max-height:calc(100% - 80px);max-width:calc(100% - 60px);padding:40px 30px;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:40px 10px}}@media (max-width:640px){.ids-dialog{max-height:calc(100% - 80px);width:calc(100% - 60px)}}.ids-dialog:has(.ids-dialog__header){padding-top:20px}.ids-dialog.ids-dialog--hidden{display:none}.ids-dialog .ids-dialog__header{align-items:flex-end;display:flex;justify-content:flex-end;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:24px;min-width:24px;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:4px;overflow-y:auto;padding:0 6px 10px 10px}.ids-dialog .ids-dialog__body.ids-dialog__body--has-scrollbar{padding-right:20px}.ids-dialog .ids-dialog__body::-webkit-scrollbar{margin-left:-20px;padding:10px;position:absolute;width:14px}.ids-dialog .ids-dialog__body .ids-dialog__body__headline{align-self:center;margin:0;padding-top:6px}@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;padding:20px 0 0;width:100%}.ids-dialog .ids-dialog__body .ids-dialog__body__content{margin-top:20px}.ids-dialog .ids-dialog__footer{align-items:center;display:flex;gap:20px;justify-content:center;margin-top:30px;width:100%}@media (max-width:1024px){.ids-dialog .ids-dialog__footer{flex-direction:column;gap:20px}}.ids-dialog-overlay{background-color:rgba(53,53,53,.6);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: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:1px solid var(--dialog_border-color);border-radius:var(--dialog_border-radius);box-shadow:0 0 10px rgba(0,0,0,.3);color:var(--dialog_color);display:flex;flex-direction:column;left:50%;max-height:calc(100% - 80px);max-width:calc(100% - 60px);padding:40px 30px;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:40px 10px}}@media (max-width:640px){.ids-dialog{max-height:calc(100% - 80px);width:calc(100% - 60px)}}.ids-dialog:has(.ids-dialog__header){padding-top:20px}.ids-dialog.ids-dialog--hidden{display:none}.ids-dialog .ids-dialog__header{align-items:flex-end;display:flex;justify-content:flex-end;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:24px;min-width:24px;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:4px;overflow-y:auto;padding:0 6px 10px 10px}.ids-dialog .ids-dialog__body::-webkit-scrollbar{margin-left:-20px;margin-top:10px;position:absolute;width:14px}.ids-dialog .ids-dialog__body::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:10px}.ids-dialog .ids-dialog__body::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-dialog .ids-dialog__body::-webkit-scrollbar-corner{background-color:transparent}.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb{background:var(--IDS-SCROLL_COLOR);border:3px solid var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;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.ids-dialog__body--has-scrollbar{padding-right:20px}.ids-dialog .ids-dialog__body .ids-dialog__body__headline{align-self:center;margin:0;padding-top:6px}@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:20px 0 0;width:100%}.ids-dialog .ids-dialog__body .ids-dialog__body__content{margin-top:20px}.ids-dialog .ids-dialog__footer{align-items:center;display:flex;gap:20px;justify-content:center;margin-top:30px;width:100%}@media (max-width:1024px){.ids-dialog .ids-dialog__footer{flex-direction:column;gap:20px}}.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.css

@@ -10,39 +10,18 @@
   }
 }
 
-/* 1177 Typography - no margins */
-.ids-dialog .ids-dialog__body {
-  /* width */
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-}
-.ids-dialog .ids-dialog__body::-webkit-scrollbar {
-  width: 14px;
-  position: absolute;
-  margin-left: -20px;
-}
-.ids-dialog .ids-dialog__body::-webkit-scrollbar-track {
-  background: var(--IDS-SCROLL_BACKGROUND-COLOR);
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-}
-.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb {
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
-}
-.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 /* Dialog */
 .ids-dialog {
   display: flex;
@@ -113,19 +92,45 @@
   outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
 }
 .ids-dialog .ids-dialog__body {
-  padding: 0px 6px 10px 10px;
+  padding: 0 6px 10px 10px;
   margin-right: 4px;
   height: 100%;
   overflow-y: auto;
 }
-.ids-dialog .ids-dialog__body.ids-dialog__body--has-scrollbar {
-  padding-right: 20px;
-}
 .ids-dialog .ids-dialog__body::-webkit-scrollbar {
   width: 14px;
-  padding: 10px;
   position: absolute;
   margin-left: -20px;
+  margin-top: 10px;
+}
+.ids-dialog .ids-dialog__body::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_TRACK-COLOR);
+  border-radius: 10px;
+  margin-top: 10px;
+  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;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+}
+.ids-dialog .ids-dialog__body::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-COLOR);
+}
+.ids-dialog .ids-dialog__body.ids-dialog__body--has-scrollbar {
+  padding-right: 20px;
 }
 .ids-dialog .ids-dialog__body .ids-dialog__body__headline {
   padding-top: 6px;
@@ -143,6 +148,7 @@
   width: 100%;
   display: flex;
   -webkit-justify-content: flex-end;
+  justify-content: flex-end;
   align-items: flex-end;
   -webkit-align-items: flex-end;
 }
@@ -168,11 +174,11 @@
 .ids-dialog-overlay {
   position: fixed;
   z-index: 200;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
-  left: 0px;
-  background-color: rgba(53, 53, 53, 0.6);
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background-color: var(--IDS-OVERLAY__BACKGROUND-COLOR);
 }
 .ids-dialog-overlay.ids-dialog-overlay--hidden {
   display: none;

package/components/expandable/expandable-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-expandable .ids-expandable__icon{align-items:center;background-color:var(--expandable-icon-2-icon);border-radius:50%;display:flex;justify-content:center;min-height:24px;min-width:24px}.ids-expandable{border-bottom:var(--expandable_border-bottom)}.ids-expandable.ids-expandable--borderless{border-bottom:1px solid transparent}.ids-expandable .ids-expandable__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-expandable.ids-expandable--expanded.ids-expandable--has-children,.ids-expandable.ids-expandable--inside-card.ids-expandable--has-children,.ids-expandable.ids-expandable--inside-card:not(.ids-expandable--child){border-bottom:none}.ids-expandable.ids-expandable--expanded>.ids-expandable__content{display:block}.ids-expandable.ids-expandable--child .ids-expandable__headline{font-size:var(--IDS-EXPANDABLE--CHILD__HEADLINE__FONT-SIZE)}.ids-expandable .ids-expandable__inner{align-items:center;cursor:pointer;display:flex;min-height:70px;text-align:start}.ids-expandable .ids-expandable__content{display:none;padding-bottom:20px}.ids-expandable .ids-expandable__headline,.ids-expandable ::slotted([slot=headline]){color:var(--expandable-headline_color);flex-grow:1;font-family:var(--IDS-EXPANDABLE__HEADLINE__FONT-FAMILY);font-size:var(--IDS-EXPANDABLE__HEADLINE__FONT-SIZE);font-weight:var(--IDS-EXPANDABLE__HEADLINE__FONT-WEIGHT);margin:0;padding-bottom:20px;padding-right:10px;padding-top:20px;text-align:start}@media (max-width:1024px){.ids-expandable .ids-expandable__headline,.ids-expandable ::slotted([slot=headline]){font-size:var(--IDS-EXPANDABLE--MOBILE__HEADLINE__FONT-SIZE)}}.ids-expandable .ids-expandable__icon .ids-expandable__icon--large{display:none}@media (min-width:640px){.ids-expandable .ids-expandable__icon{min-height:28px;min-width:28px}.ids-expandable .ids-expandable__icon .ids-expandable__icon--small{display:none}.ids-expandable .ids-expandable__icon .ids-expandable__icon--large{display:inline-flex}}.ids-expandable.ids-expandable--expanded>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon--closed,.ids-expandable.ids-expandable--expanded>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon>.ids-expandable__icon--closed,.ids-expandable:not(.ids-expandable--expanded)>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon--expanded,.ids-expandable:not(.ids-expandable--expanded)>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon>.ids-expandable__icon--expanded{display:none}";
+var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-expandable{border-bottom:var(--expandable_border-bottom)}.ids-expandable.ids-expandable--borderless{border-bottom:1px solid transparent}.ids-expandable .ids-expandable__button:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-expandable.ids-expandable--expanded.ids-expandable--has-children,.ids-expandable.ids-expandable--inside-card.ids-expandable--has-children,.ids-expandable.ids-expandable--inside-card:not(.ids-expandable--child){border-bottom:none}.ids-expandable.ids-expandable--expanded>.ids-expandable__content{display:block}.ids-expandable.ids-expandable--child .ids-expandable__headline{font-size:var(--IDS-EXPANDABLE--CHILD__HEADLINE__FONT-SIZE)}.ids-expandable .ids-expandable__inner{align-items:center;cursor:pointer;display:flex;min-height:70px;text-align:start}.ids-expandable .ids-expandable__content{display:none;padding-bottom:20px}.ids-expandable .ids-expandable__headline,.ids-expandable ::slotted([slot=headline]){color:var(--expandable-headline_color);flex-grow:1;font-family:var(--IDS-EXPANDABLE__HEADLINE__FONT-FAMILY);font-size:var(--IDS-EXPANDABLE__HEADLINE__FONT-SIZE);font-weight:var(--IDS-EXPANDABLE__HEADLINE__FONT-WEIGHT);margin:0;padding-bottom:20px;padding-right:10px;padding-top:20px;text-align:start}@media (max-width:1024px){.ids-expandable .ids-expandable__headline,.ids-expandable ::slotted([slot=headline]){font-size:var(--IDS-EXPANDABLE--MOBILE__HEADLINE__FONT-SIZE)}}.ids-expandable .ids-expandable__icon{align-items:center;background-color:var(--expandable-icon-2-icon);border-radius:50%;display:flex;justify-content:center;min-height:24px;min-width:24px}.ids-expandable .ids-expandable__icon .ids-expandable__icon--large{display:none}@media (min-width:640px){.ids-expandable .ids-expandable__icon{min-height:28px;min-width:28px}.ids-expandable .ids-expandable__icon .ids-expandable__icon--small{display:none}.ids-expandable .ids-expandable__icon .ids-expandable__icon--large{display:inline-flex}}.ids-expandable.ids-expandable--expanded>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon--closed,.ids-expandable.ids-expandable--expanded>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon>.ids-expandable__icon--closed,.ids-expandable:not(.ids-expandable--expanded)>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon--expanded,.ids-expandable:not(.ids-expandable--expanded)>.ids-expandable__button>.ids-expandable__inner>.ids-expandable__icon>.ids-expandable__icon--expanded{display:none}";
 
 var expandableLit = css`${unsafeCSS(css_248z)}`;
 

package/components/expandable/expandable.css

@@ -1,11 +1,15 @@
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -18,16 +22,6 @@
   }
 }
 
-.ids-expandable .ids-expandable__icon {
-  background-color: var(--expandable-icon-2-icon);
-  border-radius: 50%;
-  min-height: 24px;
-  min-width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 /* Expandable Content */
 .ids-expandable {
   border-bottom: var(--expandable_border-bottom);
@@ -78,6 +72,15 @@
     font-size: var(--IDS-EXPANDABLE--MOBILE__HEADLINE__FONT-SIZE);
   }
 }
+.ids-expandable .ids-expandable__icon {
+  background-color: var(--expandable-icon-2-icon);
+  border-radius: 50%;
+  min-height: 24px;
+  min-width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .ids-expandable .ids-expandable__icon .ids-expandable__icon--large {
   display: none;
 }