@inera/ids-design 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  2. package/components/breadcrumbs/breadcrumbs.css +1 -1
  3. package/components/data-table/data-table-lit.js +1 -1
  4. package/components/data-table/data-table.css +1 -0
  5. package/components/dialog/dialog-lit.js +1 -1
  6. package/components/dialog/dialog.css +5 -1
  7. package/components/dropdown/dropdown-lit.js +1 -1
  8. package/components/dropdown/dropdown.css +2 -2
  9. package/components/expandable/expandable-lit.js +1 -1
  10. package/components/expandable/expandable.css +3 -0
  11. package/components/form/error-message/error-message-lit.js +1 -1
  12. package/components/form/error-message/error-message.css +2 -2
  13. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  14. package/components/form/select-multiple/select-multiple.css +38 -38
  15. package/components/form/spinner/spinner-lit.js +1 -1
  16. package/components/form/spinner/spinner.css +2 -2
  17. package/components/header-1177/composite-header-1177.css +26 -18
  18. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  19. package/components/header-1177/header-1177-avatar.css +8 -8
  20. package/components/header-1177/header-1177-item-lit.js +1 -1
  21. package/components/header-1177/header-1177-item.css +8 -0
  22. package/components/header-1177/header-1177-lit.js +1 -1
  23. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  24. package/components/header-1177/header-1177-nav-item-mobile.css +2 -2
  25. package/components/header-1177/header-1177.css +8 -8
  26. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  27. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +3 -3
  28. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  29. package/components/header-1177-admin/header-1177-admin-item.css +8 -0
  30. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  31. package/components/header-1177-admin/header-1177-admin.css +2 -2
  32. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  33. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +3 -3
  34. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  35. package/components/header-1177-pro/header-1177-pro-item.css +8 -0
  36. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  37. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +2 -2
  38. package/components/header-inera/header-inera-lit.js +1 -1
  39. package/components/header-inera/header-inera.css +4 -4
  40. package/components/header-inera-admin/composite-header-inera-admin.css +4 -4
  41. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  42. package/components/header-inera-admin/header-inera-admin.css +4 -4
  43. package/components/list/list-lit.js +1 -1
  44. package/components/list/list.css +14 -15
  45. package/components/navigation/content/navigation-content-lit.js +1 -1
  46. package/components/navigation/content/navigation-content.css +19 -19
  47. package/components/navigation/local/navigation-local-lit.js +1 -1
  48. package/components/navigation/local/navigation-local.css +20 -18
  49. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  50. package/components/pagination/data-pagination/data-pagination.css +5 -5
  51. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  52. package/components/pagination/list-pagination/list-pagination.css +7 -7
  53. package/components/progressbar/progressbar-lit.js +1 -1
  54. package/components/progressbar/progressbar.css +3 -3
  55. package/components/side-menu/side-menu-lit.d.ts +2 -0
  56. package/components/side-menu/side-menu-lit.js +7 -0
  57. package/components/side-menu/side-menu.css +178 -0
  58. package/components/side-panel/side-panel-lit.js +1 -1
  59. package/components/side-panel/side-panel.css +286 -35
  60. package/components/stepper/stepper-lit.js +1 -1
  61. package/components/stepper/stepper.css +19 -19
  62. package/components/tabs/tabs-lit.js +1 -1
  63. package/components/tooltip/tooltip-lit.js +1 -1
  64. package/components/tooltip/tooltip.css +2 -2
  65. package/global/global.css +352 -315
  66. package/package.json +1 -1
  67. package/themes/1177/1177.css +670 -682
  68. package/themes/1177-pro/1177-pro.css +697 -699
  69. package/themes/inera/inera.css +640 -610
  70. package/themes/inera-admin/inera-admin.css +653 -610
package/components/breadcrumbs/breadcrumbs-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-breadcrumbs{color:var(--IDS-BREADCRUMBS__COLOR);line-height:26px}.ids-breadcrumbs ol{list-style:none;margin:0;padding:0}.ids-breadcrumbs ol li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__lead{margin-right:10px}.ids-breadcrumbs .ids-breadcrumbs__desktop{display:flex;flex-wrap:wrap}@media (max-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__desktop{display:none}}.ids-breadcrumbs .ids-breadcrumbs__mobile{align-items:center;display:none}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-icon{margin-right:5px}@media (max-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__mobile,.ids-breadcrumbs .ids-breadcrumbs__mobile li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-icon{display:inline}}.ids-breadcrumbs__crumb{align-items:center;display:flex;justify-content:center}.ids-breadcrumbs__crumb ::slotted(*),.ids-breadcrumbs__crumb :not(.ids-breadcrumbs__crumb__separator){color:var(--link_color);cursor:pointer;display:inline-block;line-height:26px;text-decoration:underlined}.ids-breadcrumbs__crumb ::slotted(*):focus,.ids-breadcrumbs__crumb :not(.ids-breadcrumbs__crumb__separator):focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-breadcrumbs__crumb .ids-breadcrumbs__crumb__separator{margin-left:10px;margin-right:10px}.ids-breadcrumbs__mobile .ids-breadcrumbs__crumb *,.ids-breadcrumbs__mobile .ids-breadcrumbs__crumb ::slotted(*){font-size:.875rem;text-decoration:none}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-breadcrumbs{color:var(--IDS-BREADCRUMBS__COLOR);line-height:26px}.ids-breadcrumbs ol{list-style:none;margin:0;padding:0}.ids-breadcrumbs ol li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__lead{margin-right:10px}.ids-breadcrumbs .ids-breadcrumbs__desktop{display:flex;flex-wrap:wrap}@media (max-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__desktop{display:none}}.ids-breadcrumbs .ids-breadcrumbs__mobile{align-items:center;display:none}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-icon{margin-right:5px}@media (max-width:1024px){.ids-breadcrumbs .ids-breadcrumbs__mobile,.ids-breadcrumbs .ids-breadcrumbs__mobile li{display:flex}.ids-breadcrumbs .ids-breadcrumbs__mobile .ids-icon{display:inline}}.ids-breadcrumbs__crumb{align-items:center;display:flex;justify-content:center}.ids-breadcrumbs__crumb ::slotted(*),.ids-breadcrumbs__crumb :not(.ids-breadcrumbs__crumb__separator){color:var(--IDS-LINK__COLOR);cursor:pointer;display:inline-block;line-height:26px;text-decoration:underlined}.ids-breadcrumbs__crumb ::slotted(*):focus,.ids-breadcrumbs__crumb :not(.ids-breadcrumbs__crumb__separator):focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-breadcrumbs__crumb .ids-breadcrumbs__crumb__separator{margin-left:10px;margin-right:10px}.ids-breadcrumbs__mobile .ids-breadcrumbs__crumb *,.ids-breadcrumbs__mobile .ids-breadcrumbs__crumb ::slotted(*){font-size:.875rem;text-decoration:none}";
4
4
 
5
5
  var breadcrumbsLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/breadcrumbs/breadcrumbs.css CHANGED
@@ -72,7 +72,7 @@
72
72
  }
73
73
  .ids-breadcrumbs__crumb ::slotted(*),
74
74
  .ids-breadcrumbs__crumb *:not(.ids-breadcrumbs__crumb__separator) {
75
- color: var(--link_color);
75
+ color: var(--IDS-LINK__COLOR);
76
76
  line-height: 26px;
77
77
  display: inline-block;
78
78
  cursor: pointer;
package/components/data-table/data-table-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- 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:#fff;border:1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;margin:20px auto 50px;overflow:visible;width:100%}.ids-data-table thead tr:first-child th:first-child{border-top-left-radius:10px}.ids-data-table thead tr:first-child th:last-child{border-top-right-radius:10px}.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}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:10px}.ids-data-table td,.ids-data-table th{border-bottom:1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);border-right:none;padding:8px;position:relative;text-align:left;white-space:nowrap}.ids-data-table td:first-child,.ids-data-table th:first-child{padding-left:16px}.ids-data-table td:last-child,.ids-data-table th:last-child{padding-right:16px}.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.5px;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:2px 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:12px 8px}.ids-data-table th:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-5px!important;z-index:2}.ids-data-table tr{border-bottom:1px solid #ddd}.ids-data-table tr:focus{outline:none}.ids-data-table tr[selected]{background-color:var(--IDS-DATA-TABLE-CELL--SELECTED)}.ids-data-table.ids-data-table--interactive tr:hover{box-shadow:0 0 5px #000}.ids-data-table.ids-data-table--interactive tr:hover:last-child{border-radius:0 0 5px 5px}.ids-data-table.ids-data-table--interactive tbody tr:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-4px!important}.ids-data-table.ids-data-table--interactive tbody tr:focus:last-child{border-radius:0 0 5px 5px}.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:#fff!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}}";
3
+ 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:#fff;border:1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);border-collapse:separate;border-radius:var(--IDS-DATA-TABLE__BORDER-RADIUS);border-spacing:0;margin:20px auto 50px;overflow:visible;width:100%}.ids-data-table thead tr:first-child th:first-child{border-top-left-radius:10px}.ids-data-table thead tr:first-child th:last-child{border-top-right-radius:10px}.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}.ids-data-table tbody tr:last-child td:last-child{border-bottom-right-radius:10px}.ids-data-table td,.ids-data-table th{border-bottom:1px solid var(--IDS-DATA-TABLE-CELL__BORDER_COLOR);border-right:none;line-height:20px;padding:8px;position:relative;text-align:left;white-space:nowrap}.ids-data-table td:first-child,.ids-data-table th:first-child{padding-left:16px}.ids-data-table td:last-child,.ids-data-table th:last-child{padding-right:16px}.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.5px;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:2px 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:12px 8px}.ids-data-table th:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-5px!important;z-index:2}.ids-data-table tr{border-bottom:1px solid #ddd}.ids-data-table tr:focus{outline:none}.ids-data-table tr[selected]{background-color:var(--IDS-DATA-TABLE-CELL--SELECTED)}.ids-data-table.ids-data-table--interactive tr:hover{box-shadow:0 0 5px #000}.ids-data-table.ids-data-table--interactive tr:hover:last-child{border-radius:0 0 5px 5px}.ids-data-table.ids-data-table--interactive tbody tr:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:-4px!important}.ids-data-table.ids-data-table--interactive tbody tr:focus:last-child{border-radius:0 0 5px 5px}.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:#fff!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}}";
4
4
 
5
5
  var dataTableLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/data-table/data-table.css CHANGED
@@ -55,6 +55,7 @@
55
55
  border-right: none;
56
56
  white-space: nowrap;
57
57
  position: relative;
58
+ line-height: 20px;
58
59
  }
59
60
  .ids-data-table th:first-child,
60
61
  .ids-data-table td:first-child {
package/components/dialog/dialog-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- 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}";
3
+ 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{margin-top:30px}.ids-dialog .ids-dialog__footer,.ids-dialog ::slotted([slot=actions]){align-items:center;display:flex;gap:20px;justify-content:center;width:100%}@media (max-width:1024px){.ids-dialog .ids-dialog__footer,.ids-dialog ::slotted([slot=actions]){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}";
4
4
 
5
5
  var dialogLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/dialog/dialog.css CHANGED
@@ -157,6 +157,9 @@
157
157
  }
158
158
  .ids-dialog .ids-dialog__footer {
159
159
  margin-top: 30px;
160
+ }
161
+ .ids-dialog .ids-dialog__footer,
162
+ .ids-dialog ::slotted([slot=actions]) {
160
163
  display: flex;
161
164
  gap: 20px;
162
165
  justify-content: center;
@@ -164,7 +167,8 @@
164
167
  width: 100%;
165
168
  }
166
169
  @media (max-width: 1024px) {
167
- .ids-dialog .ids-dialog__footer {
170
+ .ids-dialog .ids-dialog__footer,
171
+ .ids-dialog ::slotted([slot=actions]) {
168
172
  flex-direction: column;
169
173
  gap: 20px;
170
174
  }
package/components/dropdown/dropdown-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dropdown{display:block;position:relative}.ids-dropdown__content,:host(ids-dropdown-content){background:#fff;border:1px solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px 0 rgba(0,0,0,.3);left:0;padding:8px;position:absolute;top:0}.ids-dropdown__content.ids-dropdown__content--hide,:host(ids-dropdown-content).ids-dropdown__content--hide{display:none}@media (max-width:1024px){.ids-dropdown__content.ids-dropdown__content--mblock,.ids-dropdown__content:host([mblock]),:host(ids-dropdown-content).ids-dropdown__content--mblock,:host(ids-dropdown-content):host([mblock]){width:100%}}@media (max-width:640px){.ids-dropdown__content.ids-dropdown__content--sblock,.ids-dropdown__content:host([sblock]),:host(ids-dropdown-content).ids-dropdown__content--sblock,:host(ids-dropdown-content):host([sblock]){width:100%}}.ids-dropdown__content .ids-dropdown__content__link,:host(ids-dropdown-content) .ids-dropdown__content__link{align-items:center!important;border-radius:var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);color:var(--link-colorpreset-1_color);display:flex!important;font-family:var(--font-family_1)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:8px!important;letter-spacing:var(--Font-letter-spacing-body-text,0);line-height:1.5rem!important;outline-color:#fff!important;outline-offset:-4px!important;padding:4px 12px!important;text-decoration:none!important}.ids-dropdown__content .ids-dropdown__content__link .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link .ids-dropdown__content__link-icon{display:inherit}.ids-dropdown__content .ids-dropdown__content__link .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link .ids-dropdown__content__link-icon--hover{display:none}.ids-dropdown__content .ids-dropdown__content__link:focus,.ids-dropdown__content .ids-dropdown__content__link:hover,:host(ids-dropdown-content) .ids-dropdown__content__link:focus,:host(ids-dropdown-content) .ids-dropdown__content__link:hover{background-color:var(--IDS-COLOR-ACCENT-30)!important;color:#fff!important}.ids-dropdown__content .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon,.ids-dropdown__content .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon{display:none}.ids-dropdown__content .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon--hover,.ids-dropdown__content .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon--hover{display:inherit}.ids-dropdown__content ::slotted(a),:host(ids-dropdown-content) ::slotted(a){align-items:center!important;border-radius:var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);color:var(--link-colorpreset-1_color);display:flex!important;font-family:var(--font-family_1)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:8px!important;letter-spacing:var(--Font-letter-spacing-body-text,0);line-height:1.5rem!important;outline-color:#fff!important;outline-offset:-4px!important;padding:4px 12px!important;text-decoration:none!important}.ids-dropdown__content ::slotted(a:focus),.ids-dropdown__content ::slotted(a:hover),:host(ids-dropdown-content) ::slotted(a:focus),:host(ids-dropdown-content) ::slotted(a:hover){background-color:var(--IDS-COLOR-ACCENT-30);color:#fff}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-dropdown{display:block;position:relative}.ids-dropdown__content,:host(ids-dropdown-content){background:#fff;border:1px solid var(--IDS-DROPDOWN__BORDER-COLOR);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px 0 rgba(0,0,0,.3);left:0;padding:8px;position:absolute;top:0}.ids-dropdown__content.ids-dropdown__content--hide,:host(ids-dropdown-content).ids-dropdown__content--hide{display:none}@media (max-width:1024px){.ids-dropdown__content.ids-dropdown__content--mblock,.ids-dropdown__content:host([mblock]),:host(ids-dropdown-content).ids-dropdown__content--mblock,:host(ids-dropdown-content):host([mblock]){width:100%}}@media (max-width:640px){.ids-dropdown__content.ids-dropdown__content--sblock,.ids-dropdown__content:host([sblock]),:host(ids-dropdown-content).ids-dropdown__content--sblock,:host(ids-dropdown-content):host([sblock]){width:100%}}.ids-dropdown__content .ids-dropdown__content__link,:host(ids-dropdown-content) .ids-dropdown__content__link{align-items:center!important;border-radius:var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);color:var(--IDS-LINK--COLORPRESET-1__COLOR);display:flex!important;font-family:var(--font-family_1)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:8px!important;letter-spacing:var(--Font-letter-spacing-body-text,0);line-height:1.5rem!important;outline-color:#fff!important;outline-offset:-4px!important;padding:4px 12px!important;text-decoration:none!important}.ids-dropdown__content .ids-dropdown__content__link .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link .ids-dropdown__content__link-icon{display:inherit}.ids-dropdown__content .ids-dropdown__content__link .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link .ids-dropdown__content__link-icon--hover{display:none}.ids-dropdown__content .ids-dropdown__content__link:focus,.ids-dropdown__content .ids-dropdown__content__link:hover,:host(ids-dropdown-content) .ids-dropdown__content__link:focus,:host(ids-dropdown-content) .ids-dropdown__content__link:hover{background-color:var(--IDS-COLOR-ACCENT-30)!important;color:#fff!important}.ids-dropdown__content .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon,.ids-dropdown__content .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon,:host(ids-dropdown-content) .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon{display:none}.ids-dropdown__content .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon--hover,.ids-dropdown__content .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link:focus .ids-dropdown__content__link-icon--hover,:host(ids-dropdown-content) .ids-dropdown__content__link:hover .ids-dropdown__content__link-icon--hover{display:inherit}.ids-dropdown__content ::slotted(a),:host(ids-dropdown-content) ::slotted(a){align-items:center!important;border-radius:var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);color:var(--IDS-LINK--COLORPRESET-1__COLOR);display:flex!important;font-family:var(--font-family_1)!important;font-size:1rem!important;font-style:normal!important;font-weight:400!important;gap:8px!important;letter-spacing:var(--Font-letter-spacing-body-text,0);line-height:1.5rem!important;outline-color:#fff!important;outline-offset:-4px!important;padding:4px 12px!important;text-decoration:none!important}.ids-dropdown__content ::slotted(a:focus),.ids-dropdown__content ::slotted(a:hover),:host(ids-dropdown-content) ::slotted(a:focus),:host(ids-dropdown-content) ::slotted(a:hover){background-color:var(--IDS-COLOR-ACCENT-30);color:#fff}";
4
4
 
5
5
  var dropdownLit = css`
6
6
  ${unsafeCSS(css_248z)}
package/components/dropdown/dropdown.css CHANGED
@@ -49,7 +49,7 @@
49
49
  display: flex !important;
50
50
  border-radius: var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);
51
51
  gap: 8px !important;
52
- color: var(--link-colorpreset-1_color);
52
+ color: var(--IDS-LINK--COLORPRESET-1__COLOR);
53
53
  align-items: center !important;
54
54
  font-family: var(--font-family_1) !important;
55
55
  font-size: 1rem !important;
@@ -91,7 +91,7 @@
91
91
  display: flex !important;
92
92
  border-radius: var(--IDS-DROPDOWN__LINK__BORDER-RADIUS);
93
93
  gap: 8px !important;
94
- color: var(--link-colorpreset-1_color);
94
+ color: var(--IDS-LINK--COLORPRESET-1__COLOR);
95
95
  align-items: center !important;
96
96
  font-family: var(--font-family_1) !important;
97
97
  font-size: 1rem !important;
package/components/expandable/expandable-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- 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}";
3
+ 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}.ids-expandable .ids-expandable__icon .ids-expandable__icon--small{display:inline-flex}@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}";
4
4
 
5
5
  var expandableLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/expandable/expandable.css CHANGED
@@ -84,6 +84,9 @@
84
84
  .ids-expandable .ids-expandable__icon .ids-expandable__icon--large {
85
85
  display: none;
86
86
  }
87
+ .ids-expandable .ids-expandable__icon .ids-expandable__icon--small {
88
+ display: inline-flex;
89
+ }
87
90
  @media (min-width: 640px) {
88
91
  .ids-expandable .ids-expandable__icon {
89
92
  min-height: 28px;
package/components/form/error-message/error-message-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:5px;margin-top:var(--IDS-ERROR-MESSAGE__MARGIN-TOP);padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:12px;left:41px;position:absolute;transform:rotate(45deg);width:12px;z-index:9}.ids-error-message:after{background-color:#fff;top:-6px}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:-7px}.ids-error-message .ids-error-message__icon{background-image:var(--IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE);background-repeat:no-repeat;min-height:20px;min-width:20px}";
3
+ var css_248z = ".ids-error-message{align-items:center;background-color:var(--IDS-ERROR-MESSAGE__BACKGROUND-COLOR);border:var(--IDS-ERROR-MESSAGE__BORDER);border-radius:var(--IDS-BORDER-RADIUS);color:var(--IDS-ERROR-MESSAGE__COLOR);display:none;gap:8px;margin-top:var(--IDS-ERROR-MESSAGE__MARGIN-TOP);padding:var(--IDS-ERROR-MESSAGE__PADDING);position:relative}.ids-error-message.ids-error-message--show{display:inline-flex}.ids-error-message:after,.ids-error-message:before{content:\"\";display:block;height:12px;left:41px;position:absolute;transform:rotate(45deg);width:12px;z-index:9}.ids-error-message:after{background-color:var(--IDS-COLOR-NEUTRAL-100);top:-6px}.ids-error-message:before{background-color:var(--IDS-ERROR-MESSAGE__BORDER-COLOR);top:-7px}.ids-error-message .ids-error-message__icon{background-image:var(--IDS-ERROR-MESSAGE__ICON__BACKGROUND-IMAGE);background-repeat:no-repeat;min-height:20px;min-width:20px}";
4
4
 
5
5
  var errorMessageLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/form/error-message/error-message.css CHANGED
@@ -8,7 +8,7 @@
8
8
  align-items: center;
9
9
  display: none;
10
10
  color: var(--IDS-ERROR-MESSAGE__COLOR);
11
- gap: 5px;
11
+ gap: 8px;
12
12
  }
13
13
  .ids-error-message.ids-error-message--show {
14
14
  display: inline-flex;
@@ -24,7 +24,7 @@
24
24
  z-index: 9;
25
25
  }
26
26
  .ids-error-message::after {
27
- background-color: #fff;
27
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
28
28
  top: -6px;
29
29
  }
30
30
  .ids-error-message::before {
package/components/form/select-multiple/select-multiple-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-select-multiple__select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT_BACKGROUND);border:var(--select_border);border-bottom:var(--IDS-INPUT_BORDER-BOTTOM);border-radius:var(--IDS-INPUT_BORDER-RADIUS);color:var(--IDS-INPUT_COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:16px;overflow:hidden;padding:.75rem 1.25rem;padding-right:50px!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select-multiple__select:disabled{background:var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);background-image:var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);border:none}.ids-select-multiple__select.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);background-image:var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);border:1px solid transparent}.ids-select-multiple__select:disabled{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select-multiple__select.ids-input--light{background-color:#fff}.ids-select-multiple__select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-multiple-wrapper{display:flex;position:relative}.ids-select-multiple-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:25px;top:0;transform:rotate(90deg);width:12px}.ids-select-multiple-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-multiple-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select-multiple__dropdown__wrapper{position:relative}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown{background:#fff;border-radius:var(--select-multiple-dropdown_border-radius);box-shadow:0 0 6px rgba(0,0,0,.3);left:0;position:absolute;right:0;z-index:10}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown.ids-select-multiple__dropdown--hide{display:none}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner{overflow-y:auto;padding:10px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar{margin-left:-20px;margin-top:0;position:absolute;width:14px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:0}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner{background-color:transparent}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-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-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}.placeholder{color:var(--IDS-FORM__PLACEHOLDER__COLOR)}:host([disabled]) input{background-color:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR)!important;background-image:var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);border:var(--IDS-FORM-DISABLED_BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select-multiple-label-wrapper{align-items:flex-start;display:inline-flex;gap:8px;margin-bottom:5px;margin-right:8px}.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label{display:inline;margin-right:8px;margin-right:4px;position:relative;top:-3px}";
3
+ var css_248z = ".ids-select-multiple__select{background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border-bottom:var(--IDS-INPUT__BORDER);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--font-family_1)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select-multiple__select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select-multiple__select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select-multiple__select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select-multiple__select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER)}.ids-select-multiple__select:disabled{cursor:default}.ids-select-multiple__select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select-multiple__select:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}.ids-select-multiple-wrapper{display:flex;position:relative}.ids-select-multiple-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:12px}.ids-select-multiple-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-multiple-wrapper:has(input:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}.ids-select-multiple__dropdown__wrapper{background-color:var(--IDS-COLOR-NEUTRAL-100);position:relative}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown{background-color:var(--IDS-COLOR-NEUTRAL-100);border-radius:var(--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS);box-shadow:0 0 6px rgba(0,0,0,.3);left:0;position:absolute;right:0;z-index:10}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown.ids-select-multiple__dropdown--hide{display:none}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner{overflow-y:auto;padding:10px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar{margin-left:-20px;margin-top:0;position:absolute;width:14px}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track{background:var(--IDS-SCROLL_TRACK-COLOR);border-radius:10px;margin-bottom:0;margin-top:0}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-resizer{appearance:none;background-image:var(--IDS-TEXTAREA-RESIZER-IMAGE);background-position:50%;background-repeat:no-repeat;background-size:cover}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner{background-color:transparent}.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-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-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover{background:var(--IDS-SCROLL_HOVER-COLOR)}:host([disabled]) input{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select-multiple-label-wrapper{align-items:flex-start;display:inline-flex;gap:8px;margin-bottom:5px;margin-right:8px}.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label{display:inline;margin-right:8px;margin-right:4px;position:relative;top:-3px}";
4
4
 
5
5
  var selectMultipleLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/form/select-multiple/select-multiple.css CHANGED
@@ -12,46 +12,50 @@
12
12
  ********/
13
13
  .ids-select-multiple__select {
14
14
  font-family: var(--font-family_1) !important;
15
- padding: 0.75rem 1.25rem;
16
- background-color: var(--IDS-INPUT_BACKGROUND);
17
- border: var(--IDS-INPUT_BORDER);
18
- border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
19
- border-radius: var(--IDS-INPUT_BORDER-RADIUS);
20
- font-size: 16px;
21
- color: var(--IDS-INPUT_COLOR);
15
+ padding: var(--IDS-INPUT__PADDING);
16
+ background-color: var(--IDS-INPUT__BACKGROUND-COLOR);
17
+ border: var(--IDS-INPUT__BORDER);
18
+ border-bottom: var(--IDS-INPUT__BORDER);
19
+ border-radius: var(--IDS-INPUT__BORDER-RADIUS);
20
+ font-size: 1rem;
21
+ color: var(--IDS-INPUT__COLOR);
22
22
  display: block;
23
+ height: var(--IDS-INPUT__HEIGHT);
23
24
  cursor: pointer;
24
- appearance: none !important;
25
- -webkit-appearance: none !important;
26
- -moz-appearance: none !important;
27
25
  display: inline-block !important;
28
- padding-right: 50px !important;
26
+ padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
29
27
  text-align: left;
30
28
  overflow: hidden;
31
29
  text-overflow: ellipsis;
32
- border: var(--select_border);
33
- border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
30
+ border: var(--IDS-INPUT__BORDER);
34
31
  width: 100% !important;
35
32
  }
36
33
  .ids-select-multiple__select:disabled {
37
- background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
38
- border: none;
39
- background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
34
+ color: var(--IDS-FORM--DISABLED__COLOR);
35
+ font-style: italic !important;
36
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
37
+ border: var(--IDS-FORM--DISABLED__BORDER);
40
38
  }
41
39
  .ids-select-multiple__select.ids-input--invalid {
42
- background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
43
- background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
44
- border: 1px solid transparent;
40
+ background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
41
+ border: var(--IDS-FORM--INVALID__BORDER);
42
+ }
43
+ .ids-select-multiple__select.ids-input--light {
44
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
45
+ }
46
+ .ids-select-multiple__select.ids-input--light.ids-input--invalid {
47
+ background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
48
+ border: var(--IDS-FORM--INVALID__BORDER);
45
49
  }
46
50
  .ids-select-multiple__select:disabled {
51
+ cursor: default;
52
+ }
53
+ .ids-select-multiple__select:disabled.ids-input--light {
54
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
47
55
  color: var(--IDS-FORM--DISABLED__COLOR);
48
- background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
49
- border: var(--IDS-FORM-DISABLED_BORDER);
50
56
  font-style: italic !important;
51
- background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
52
- }
53
- .ids-select-multiple__select.ids-input--light {
54
- background-color: white;
57
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
58
+ border: var(--IDS-FORM--DISABLED__BORDER);
55
59
  }
56
60
  .ids-select-multiple__select:focus {
57
61
  outline: var(--IDS-FOCUS_OUTLINE);
@@ -69,9 +73,9 @@
69
73
  display: block;
70
74
  position: absolute;
71
75
  transform: rotate(90deg);
72
- right: 25px;
73
- top: 0px;
74
- bottom: 0px;
76
+ right: var(--IDS-INPUT__ICON-RIGHT);
77
+ top: 0;
78
+ bottom: 0;
75
79
  background-position: center;
76
80
  background-repeat: no-repeat;
77
81
  background-image: var(--IDS-SELECT__CHEVRON-ICON);
@@ -80,17 +84,18 @@
80
84
  .ids-select-multiple-wrapper:has(.ids-input--invalid)::after {
81
85
  background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
82
86
  }
83
- .ids-select-multiple-wrapper:has(.ids-select:disabled)::after {
87
+ .ids-select-multiple-wrapper:has(input:disabled)::after {
84
88
  background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
85
89
  }
86
90
 
87
91
  .ids-select-multiple__dropdown__wrapper {
88
92
  position: relative;
93
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
89
94
  }
90
95
  .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown {
91
- background: #ffffff;
92
96
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
93
- border-radius: var(--select-multiple-dropdown_border-radius);
97
+ background-color: var(--IDS-COLOR-NEUTRAL-100);
98
+ border-radius: var(--IDS-SELECT-MULTIPLE-DROPDOWN__BORDER-RADIUS);
94
99
  position: absolute;
95
100
  z-index: 10;
96
101
  left: 0;
@@ -136,16 +141,11 @@
136
141
  background: var(--IDS-SCROLL_HOVER-COLOR);
137
142
  }
138
143
 
139
- .placeholder {
140
- color: var(--IDS-FORM__PLACEHOLDER__COLOR);
141
- }
142
-
143
144
  :host([disabled]) input {
144
145
  color: var(--IDS-FORM--DISABLED__COLOR);
145
- background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
146
- border: var(--IDS-FORM-DISABLED_BORDER);
147
146
  font-style: italic !important;
148
- background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
147
+ background: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
148
+ border: var(--IDS-FORM--DISABLED__BORDER);
149
149
  }
150
150
 
151
151
  .ids-select-multiple-label-wrapper {
package/components/form/spinner/spinner-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = ".ids-spinner,.ids-spinner--light{height:18px;text-align:center;width:70px}.ids-spinner div,.ids-spinner--light div{-webkit-animation:sk-bouncedelay 1.4s ease-in-out infinite both;animation:sk-bouncedelay 1.4s ease-in-out infinite both;background-color:var(--spinner_color);border-radius:100%;display:inline-block;height:18px;width:18px}.ids-spinner .ids-bounce-1,.ids-spinner--light .ids-bounce-1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.ids-spinner .ids-bounce-2,.ids-spinner--light .ids-bounce-2{-webkit-animation-delay:-.16s;animation-delay:-.16s}.ids-spinner--light div{background-color:#fff}.ids-spinner-sr{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}";
3
+ var css_248z = ".ids-spinner,.ids-spinner--light{height:20px;text-align:center;width:70px}.ids-spinner div,.ids-spinner--light div{-webkit-animation:sk-bouncedelay 1.4s ease-in-out infinite both;animation:sk-bouncedelay 1.4s ease-in-out infinite both;background-color:var(--IDS-SPINNER__COLOR);border-radius:100%;display:inline-block;height:18px;width:18px}.ids-spinner .ids-bounce-1,.ids-spinner--light .ids-bounce-1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.ids-spinner .ids-bounce-2,.ids-spinner--light .ids-bounce-2{-webkit-animation-delay:-.16s;animation-delay:-.16s}.ids-spinner--light div{background-color:#fff}.ids-spinner-sr{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}";
4
4
 
5
5
  var spinnerLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/form/spinner/spinner.css CHANGED
@@ -2,14 +2,14 @@
2
2
  .ids-spinner,
3
3
  .ids-spinner--light {
4
4
  width: 70px;
5
- height: 18px;
5
+ height: 20px;
6
6
  text-align: center;
7
7
  }
8
8
  .ids-spinner div,
9
9
  .ids-spinner--light div {
10
10
  width: 18px;
11
11
  height: 18px;
12
- background-color: var(--spinner_color);
12
+ background-color: var(--IDS-SPINNER__COLOR);
13
13
  border-radius: 100%;
14
14
  display: inline-block;
15
15
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
package/components/header-1177/composite-header-1177.css CHANGED
@@ -392,8 +392,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__ski
392
392
  z-index: 10;
393
393
  font-family: var(--IDS-LINK--FONT-FAMILY);
394
394
  font-size: 16px;
395
- color: var(--link-colorpreset-1_color);
396
- text-decoration-color: var(--link-colorpreset-1_color);
395
+ color: var(--IDS-LINK--COLORPRESET-1__COLOR);
396
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
397
397
  text-decoration: underline;
398
398
  position: absolute;
399
399
  right: 0;
@@ -405,8 +405,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__ski
405
405
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a:focus {
406
406
  transform: translateY(0);
407
407
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
408
- color: var(--link-colorpreset-1-hover_color);
409
- text-decoration-color: var(--link-colorpreset-1-hover_color);
408
+ color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
409
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
410
410
  outline-offset: -8px !important;
411
411
  }
412
412
  @media (max-width: 1024px) {
@@ -616,8 +616,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-c
616
616
  z-index: 10;
617
617
  font-family: var(--IDS-LINK--FONT-FAMILY);
618
618
  font-size: 16px;
619
- color: var(--link-colorpreset-1_color);
620
- text-decoration-color: var(--link-colorpreset-1_color);
619
+ color: var(--IDS-LINK--COLORPRESET-1__COLOR);
620
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
621
621
  text-decoration: underline;
622
622
  position: absolute;
623
623
  right: 0;
@@ -629,8 +629,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-c
629
629
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a:focus {
630
630
  transform: translateY(0);
631
631
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
632
- color: var(--link-colorpreset-1-hover_color);
633
- text-decoration-color: var(--link-colorpreset-1-hover_color);
632
+ color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
633
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
634
634
  outline-offset: -8px !important;
635
635
  }
636
636
  header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__inner {
@@ -644,6 +644,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
644
644
  gap: 8px;
645
645
  text-decoration: none;
646
646
  position: relative;
647
+ background-color: transparent;
648
+ border: 0;
647
649
  }
648
650
  .ids-header-1177--unresponsive .ids-header-1177__items__item:focus-within {
649
651
  outline: var(--IDS-FOCUS_OUTLINE);
@@ -668,6 +670,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
668
670
  gap: 8px;
669
671
  text-decoration: none;
670
672
  position: relative;
673
+ background-color: transparent;
674
+ border: 0;
671
675
  }
672
676
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:focus-within {
673
677
  outline: var(--IDS-FOCUS_OUTLINE);
@@ -712,6 +716,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
712
716
  gap: 8px;
713
717
  text-decoration: none;
714
718
  position: relative;
719
+ background-color: transparent;
720
+ border: 0;
715
721
  }
716
722
  :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):focus-within {
717
723
  outline: var(--IDS-FOCUS_OUTLINE);
@@ -755,6 +761,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
755
761
  gap: 8px;
756
762
  text-decoration: none;
757
763
  position: relative;
764
+ background-color: transparent;
765
+ border: 0;
758
766
  }
759
767
  :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:focus-within {
760
768
  outline: var(--IDS-FOCUS_OUTLINE);
@@ -814,8 +822,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
814
822
  flex-wrap: wrap;
815
823
  }
816
824
  .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
817
- color: var(--link-colorpreset-2_color);
818
- text-decoration-color: var(--link-colorpreset-2_color);
825
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
826
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
819
827
  }
820
828
  .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
821
829
  padding-right: 0.5rem;
@@ -897,8 +905,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
897
905
  }
898
906
  }
899
907
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
900
- color: var(--link-colorpreset-2_color);
901
- text-decoration-color: var(--link-colorpreset-2_color);
908
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
909
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
902
910
  }
903
911
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
904
912
  padding-right: 0.5rem;
@@ -980,8 +988,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
980
988
  }
981
989
  }
982
990
  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
983
- color: var(--link-colorpreset-2_color);
984
- text-decoration-color: var(--link-colorpreset-2_color);
991
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
992
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
985
993
  }
986
994
  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
987
995
  padding-right: 0.5rem;
@@ -1030,8 +1038,8 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1030
1038
  flex-wrap: wrap;
1031
1039
  }
1032
1040
  :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
1033
- color: var(--link-colorpreset-2_color);
1034
- text-decoration-color: var(--link-colorpreset-2_color);
1041
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
1042
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
1035
1043
  }
1036
1044
  :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
1037
1045
  padding-right: 0.5rem;
@@ -1574,7 +1582,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1574
1582
  width: 1.3125rem;
1575
1583
  border-radius: 2px;
1576
1584
  transition: 0.2s;
1577
- background: var(--IDS-COLOR-PRIMARY-35);
1585
+ background-color: var(--IDS-COLOR-PRIMARY-35);
1578
1586
  position: relative;
1579
1587
  height: 3px;
1580
1588
  width: 1.25rem;
@@ -1585,7 +1593,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1585
1593
  width: 1.3125rem;
1586
1594
  border-radius: 2px;
1587
1595
  transition: 0.2s;
1588
- background: var(--IDS-COLOR-PRIMARY-35);
1596
+ background-color: var(--IDS-COLOR-PRIMARY-35);
1589
1597
  position: absolute;
1590
1598
  left: 0;
1591
1599
  content: "";
package/components/header-1177/header-1177-avatar-lit.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css, unsafeCSS } from 'lit';
2
2
 
3
- var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177--unresponsive .ids-header-1177__avatar{align-items:center;display:grid;grid-column:3;justify-self:end}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--link-colorpreset-2_color);text-decoration-color:var(--link-colorpreset-2_color)}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar{align-items:center;display:grid;grid-column:3;justify-self:end}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:32px;margin-left:12px;margin-right:12px;padding-left:1rem;padding-right:1rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{height:20px;width:20px}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{grid-template-rows:1fr}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--link-colorpreset-2_color);text-decoration-color:var(--link-colorpreset-2_color)}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive){align-items:center;display:grid;grid-column:3;justify-self:end}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:32px;margin-left:12px;margin-right:12px;padding-left:1rem;padding-right:1rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{height:20px;width:20px}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{grid-template-rows:1fr}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--link-colorpreset-2_color);text-decoration-color:var(--link-colorpreset-2_color)}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive{align-items:center;display:grid;grid-column:3;justify-self:end}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--link-colorpreset-2_color);text-decoration-color:var(--link-colorpreset-2_color)}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}";
3
+ var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-header-1177--unresponsive .ids-header-1177__avatar{align-items:center;display:grid;grid-column:3;justify-self:end}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar{align-items:center;display:grid;grid-column:3;justify-self:end}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:32px;margin-left:12px;margin-right:12px;padding-left:1rem;padding-right:1rem}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{height:20px;width:20px}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content{grid-template-rows:1fr}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}@media (max-width:1024px){.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive){align-items:center;display:grid;grid-column:3;justify-self:end}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box{font-size:.75rem;gap:.5rem;height:32px;margin-left:12px;margin-right:12px;padding-left:1rem;padding-right:1rem}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{height:20px;width:20px}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content{grid-template-rows:1fr}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{max-width:100%}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}@media (max-width:1024px){:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:none}}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive{align-items:center;display:grid;grid-column:3;justify-self:end}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box{align-items:center;background-color:#fff;border-radius:3.125rem;display:grid;gap:1rem;grid-template-columns:auto auto;height:80px;justify-content:center;max-height:80px;padding-left:2rem;padding-right:2rem}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon{display:flex;max-height:44px;max-width:36px}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content{display:grid;grid-template-rows:1fr 1fr}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name{color:var(--IDS-COLOR-NEUTRAL-20);max-width:15.625rem;overflow:hidden;position:relative;text-align:start;text-overflow:ellipsis;white-space:nowrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links{display:flex;flex-wrap:wrap}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a{color:var(--IDS-LINK--COLORPRESET-2__COLOR);text-decoration-color:var(--IDS-LINK--COLORPRESET-2__COLOR)}:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider{border-right:1px solid #dadbdc;margin-right:.5rem;padding-right:.5rem}";
4
4
 
5
5
  var header1177AvatarLit = css`${unsafeCSS(css_248z)}`;
6
6
 
package/components/header-1177/header-1177-avatar.css CHANGED
@@ -52,8 +52,8 @@
52
52
  flex-wrap: wrap;
53
53
  }
54
54
  .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
55
- color: var(--link-colorpreset-2_color);
56
- text-decoration-color: var(--link-colorpreset-2_color);
55
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
56
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
57
57
  }
58
58
  .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
59
59
  padding-right: 0.5rem;
@@ -135,8 +135,8 @@
135
135
  }
136
136
  }
137
137
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
138
- color: var(--link-colorpreset-2_color);
139
- text-decoration-color: var(--link-colorpreset-2_color);
138
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
139
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
140
140
  }
141
141
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
142
142
  padding-right: 0.5rem;
@@ -218,8 +218,8 @@
218
218
  }
219
219
  }
220
220
  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
221
- color: var(--link-colorpreset-2_color);
222
- text-decoration-color: var(--link-colorpreset-2_color);
221
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
222
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
223
223
  }
224
224
  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
225
225
  padding-right: 0.5rem;
@@ -268,8 +268,8 @@
268
268
  flex-wrap: wrap;
269
269
  }
270
270
  :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
271
- color: var(--link-colorpreset-2_color);
272
- text-decoration-color: var(--link-colorpreset-2_color);
271
+ color: var(--IDS-LINK--COLORPRESET-2__COLOR);
272
+ text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
273
273
  }
274
274
  :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
275
275
  padding-right: 0.5rem;