@i-cell/ids-styles 0.0.67 → 0.0.70

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 (28) hide show
  1. package/dist/autocomplete/autocomplete.css +4 -2
  2. package/dist/autocomplete/autocomplete.min.css +1 -1
  3. package/dist/autocomplete/autocomplete.plugin.js +8 -1
  4. package/dist/checkbox/checkbox-group.css +88 -28
  5. package/dist/checkbox/checkbox-group.min.css +1 -1
  6. package/dist/checkbox/checkbox-group.plugin.js +124 -36
  7. package/dist/checkbox/checkbox.css +111 -99
  8. package/dist/checkbox/checkbox.min.css +1 -1
  9. package/dist/checkbox/checkbox.plugin.js +130 -123
  10. package/dist/components.css +628 -383
  11. package/dist/components.min.css +1 -1
  12. package/dist/components.plugin.js +764 -520
  13. package/dist/dialog/dialog.css +2 -0
  14. package/dist/dialog/dialog.min.css +1 -1
  15. package/dist/dialog/dialog.plugin.js +8 -2
  16. package/dist/notification/notification.css +3 -1
  17. package/dist/notification/notification.min.css +1 -1
  18. package/dist/notification/notification.plugin.js +1 -1
  19. package/dist/option/option.css +6 -6
  20. package/dist/option/option.min.css +1 -1
  21. package/dist/option/option.plugin.js +13 -6
  22. package/dist/radio/radio.css +342 -190
  23. package/dist/radio/radio.min.css +1 -1
  24. package/dist/radio/radio.plugin.js +417 -299
  25. package/dist/switch/switch.css +72 -57
  26. package/dist/switch/switch.min.css +1 -1
  27. package/dist/switch/switch.plugin.js +63 -52
  28. package/package.json +2 -2
package/dist/dialog/dialog.css CHANGED
@@ -34,12 +34,14 @@
34
34
  }
35
35
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title {
36
36
  font-style: normal;
37
+ color: var(--ids-comp-dialog-header-color-fg-title-default);
37
38
  }
38
39
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden {
39
40
  display: none;
40
41
  }
41
42
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle {
42
43
  font-style: normal;
44
+ color: var(--ids-comp-dialog-header-color-fg-subtitle-default);
43
45
  }
44
46
  .ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content {
45
47
  display: grid;
package/dist/dialog/dialog.min.css CHANGED
@@ -1 +1 @@
1
- .ids-dialog{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;padding:0;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-dialog::before,.ids-dialog::after,.ids-dialog *,.ids-dialog ::before,.ids-dialog ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:grid;grid-template-columns:1fr auto}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:grid}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);gap:var(--ids-comp-dialog-footer-gap-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);gap:var(--ids-comp-dialog-footer-gap-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);gap:var(--ids-comp-dialog-footer-gap-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);gap:var(--ids-comp-dialog-footer-gap-dense)}
1
+ .ids-dialog{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;padding:0;border-style:solid;border-color:var(--ids-comp-dialog-container-color-border-surface-default);background-color:var(--ids-comp-dialog-container-color-bg-default);box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxl) var(--ids-smc-reference-container-effects-shadow-blur-xxxl) var(--ids-smc-reference-container-effects-shadow-spread-xxs) var(--ids-smc-reference-container-effects-shadow-color-dark-default)}.ids-dialog::before,.ids-dialog::after,.ids-dialog *,.ids-dialog ::before,.ids-dialog ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-dialog::backdrop{background-color:rgba(0,0,0,0)}.ids-dialog.ids-dialog-with-backdrop::backdrop{background-color:var(--ids-comp-dialog-backdrop-background)}.ids-dialog .ids-dialog-container{display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:grid;grid-template-columns:1fr auto}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-style:normal;color:var(--ids-comp-dialog-header-color-fg-title-default)}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden{display:none}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-style:normal;color:var(--ids-comp-dialog-header-color-fg-subtitle-default)}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{display:grid}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;overflow-y:auto;background:var(--ids-comp-dialog-content-color-bg-default)}.ids-dialog .ids-dialog-container .ids-dialog-content .ids-dialog-content-overflow{overflow-y:auto;height:100%}.ids-dialog .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{border-top-style:solid;border-bottom-style:solid;border-top-color:var(--ids-comp-dialog-content-color-border-surface-default);border-bottom-color:var(--ids-comp-dialog-content-color-border-surface-default)}.ids-dialog .ids-dialog-container .ids-dialog-actions{display:flex;background:var(--ids-comp-dialog-footer-color-bg-default);justify-content:flex-end;align-items:flex-start;align-content:flex-start;align-self:stretch;flex-wrap:wrap}.ids-dialog.ids-dialog-compact{border-radius:var(--ids-comp-dialog-container-size-border-radius-compact);border-width:var(--ids-comp-dialog-container-size-border-width-compact)}.ids-dialog.ids-dialog-compact.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-compact);min-height:var(--ids-comp-dialog-container-size-min-height-compact);padding:var(--ids-comp-dialog-container-size-padding-y-compact) var(--ids-comp-dialog-container-size-padding-x-compact);gap:var(--ids-comp-dialog-container-size-gap-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-title-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-title-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-compact);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-compact);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-compact);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-compact);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-compact);padding:var(--ids-comp-dialog-header-size-padding-y-compact) var(--ids-comp-dialog-header-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-compact) var(--ids-comp-dialog-content-fixed-size-padding-x-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-compact) var(--ids-comp-dialog-content-scrollable-size-padding-x-compact);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-compact)}.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);gap:var(--ids-comp-dialog-footer-gap-compact)}.ids-dialog.ids-dialog-comfortable{border-radius:var(--ids-comp-dialog-container-size-border-radius-comfortable);border-width:var(--ids-comp-dialog-container-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-comfortable);min-height:var(--ids-comp-dialog-container-size-min-height-comfortable);padding:var(--ids-comp-dialog-container-size-padding-y-comfortable) var(--ids-comp-dialog-container-size-padding-x-comfortable);gap:var(--ids-comp-dialog-container-size-gap-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-title-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-title-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-comfortable);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-comfortable);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-comfortable);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-comfortable);padding:var(--ids-comp-dialog-header-size-padding-y-comfortable) var(--ids-comp-dialog-header-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-comfortable) var(--ids-comp-dialog-content-fixed-size-padding-x-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-comfortable) var(--ids-comp-dialog-content-scrollable-size-padding-x-comfortable);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-comfortable)}.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);gap:var(--ids-comp-dialog-footer-gap-comfortable)}.ids-dialog.ids-dialog-spacious{border-radius:var(--ids-comp-dialog-container-size-border-radius-spacious);border-width:var(--ids-comp-dialog-container-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-spacious);min-height:var(--ids-comp-dialog-container-size-min-height-spacious);padding:var(--ids-comp-dialog-container-size-padding-y-spacious) var(--ids-comp-dialog-container-size-padding-x-spacious);gap:var(--ids-comp-dialog-container-size-gap-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-title-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-title-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-spacious);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-spacious);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-spacious);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-spacious);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-spacious);padding:var(--ids-comp-dialog-header-size-padding-y-spacious) var(--ids-comp-dialog-header-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-spacious) var(--ids-comp-dialog-content-fixed-size-padding-x-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-spacious) var(--ids-comp-dialog-content-scrollable-size-padding-x-spacious);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-spacious)}.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);gap:var(--ids-comp-dialog-footer-gap-spacious)}.ids-dialog.ids-dialog-dense{border-radius:var(--ids-comp-dialog-container-size-border-radius-dense);border-width:var(--ids-comp-dialog-container-size-border-width-dense)}.ids-dialog.ids-dialog-dense.ids-dialog-with-backdrop::backdrop{opacity:var(--ids-comp-dialog-backdrop-size-opacity-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container{max-width:var(--ids-comp-dialog-container-size-width-dense);min-height:var(--ids-comp-dialog-container-size-min-height-dense);padding:var(--ids-comp-dialog-container-size-padding-y-dense) var(--ids-comp-dialog-container-size-padding-x-dense);gap:var(--ids-comp-dialog-container-size-gap-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-title{font-family:var(--ids-comp-dialog-header-title-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-title-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-title-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-title-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-title-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle{font-family:var(--ids-comp-dialog-header-subtitle-typography-font-family-dense);font-size:var(--ids-comp-dialog-header-subtitle-typography-font-size-dense);font-weight:var(--ids-comp-dialog-header-subtitle-typography-font-weight-dense);letter-spacing:var(--ids-comp-dialog-header-subtitle-typography-letter-spacing-dense);line-height:var(--ids-comp-dialog-header-subtitle-typography-line-height-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content{gap:var(--ids-comp-dialog-header-size-gap-dense);padding:var(--ids-comp-dialog-header-size-padding-y-dense) var(--ids-comp-dialog-header-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content{padding:var(--ids-comp-dialog-content-fixed-size-padding-y-dense) var(--ids-comp-dialog-content-fixed-size-padding-x-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-content.ids-dialog-content-scrollable{padding:var(--ids-comp-dialog-content-scrollable-size-padding-y-dense) var(--ids-comp-dialog-content-scrollable-size-padding-x-dense);border-top-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense);border-bottom-width:var(--ids-comp-dialog-content-scrollable-size-border-width-dense)}.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions{padding:var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);gap:var(--ids-comp-dialog-footer-gap-dense)}
package/dist/dialog/dialog.plugin.js CHANGED
@@ -23,9 +23,15 @@ module.exports = function DialogPlugin() {
23
23
  '.ids-dialog.ids-dialog-with-backdrop::backdrop': { backgroundColor: 'var(--ids-comp-dialog-backdrop-background)' },
24
24
  '.ids-dialog .ids-dialog-container': { display: 'grid', gridTemplateRows: 'auto 1fr auto', position: 'relative', maxHeight: '80vh' },
25
25
  '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'grid', gridTemplateColumns: '1fr auto' },
26
- '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
26
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': {
27
+ fontStyle: 'normal',
28
+ color: 'var(--ids-comp-dialog-header-color-fg-title-default)',
29
+ },
27
30
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden': { display: 'none' },
28
- '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': { fontStyle: 'normal' },
31
+ '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-subtitle': {
32
+ fontStyle: 'normal',
33
+ color: 'var(--ids-comp-dialog-header-color-fg-subtitle-default)',
34
+ },
29
35
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-header-default-content': { display: 'grid' },
30
36
  '.ids-dialog .ids-dialog-container .ids-dialog-content': {
31
37
  display: 'flex',
package/dist/notification/notification.css CHANGED
@@ -13,7 +13,6 @@
13
13
  }
14
14
  .ids-notification > .ids-notification__content-wrapper {
15
15
  display: flex;
16
- justify-content: space-between;
17
16
  align-items: flex-start;
18
17
  align-content: flex-start;
19
18
  flex-wrap: wrap;
@@ -46,6 +45,9 @@
46
45
  align-items: center;
47
46
  flex-shrink: 0;
48
47
  }
48
+ .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container {
49
+ margin-left: auto;
50
+ }
49
51
  .ids-notification > .ids-notification__content-wrapper > .ids-notification__close-button-container.ids-notification__label-button {
50
52
  display: flex;
51
53
  align-self: center;
package/dist/notification/notification.min.css CHANGED
@@ -1 +1 @@
1
- .ids-notification{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-notification::before,.ids-notification::after,.ids-notification *,.ids-notification ::before,.ids-notification ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-notification>.ids-notification__content-wrapper{display:flex;justify-content:space-between;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-style:solid}.ids-notification>.ids-notification__content-wrapper>.ids-notification__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container{display:flex;justify-content:space-between;align-content:center;flex:1 0 0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{display:flex;flex-direction:column}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{flex:1 0 0;font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button{display:flex;align-self:center}.ids-notification.ids-notification-actions-bottom-mode>.ids-notification__content-wrapper>.ids-notification__container{flex-direction:column;align-items:flex-start}.ids-notification:not(.ids-notification-actions-bottom-mode)>.ids-notification__content-wrapper>.ids-notification__container{align-items:center}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-error-default);background:var(--ids-comp-notification-filled-color-bg-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-error-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-success-default);background:var(--ids-comp-notification-filled-color-bg-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-success-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-warning-default);background:var(--ids-comp-notification-filled-color-bg-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-warning-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-light-default);background:var(--ids-comp-notification-filled-color-bg-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-light-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-dark-default);background:var(--ids-comp-notification-filled-color-bg-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-dark-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-surface-default);background:var(--ids-comp-notification-filled-color-bg-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-surface-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-info-default);background:var(--ids-comp-notification-filled-color-bg-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-info-default)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-compact);padding:var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-compact)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-compact);max-width:var(--ids-comp-notification-filled-container-size-max-width-compact)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-comfortable);padding:var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-comfortable);max-width:var(--ids-comp-notification-filled-container-size-max-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-spacious);padding:var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-spacious);max-width:var(--ids-comp-notification-filled-container-size-max-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-dense);padding:var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-dense)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-dense);max-width:var(--ids-comp-notification-filled-container-size-max-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-error-default);background:var(--ids-comp-notification-outlined-color-bg-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-error-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-success-default);background:var(--ids-comp-notification-outlined-color-bg-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-success-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-warning-default);background:var(--ids-comp-notification-outlined-color-bg-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-light-default);background:var(--ids-comp-notification-outlined-color-bg-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-light-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-dark-default);background:var(--ids-comp-notification-outlined-color-bg-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-surface-default);background:var(--ids-comp-notification-outlined-color-bg-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-info-default);background:var(--ids-comp-notification-outlined-color-bg-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-info-default)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-compact);padding:var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-compact);max-width:var(--ids-comp-notification-outlined-container-size-max-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-comfortable);padding:var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-comfortable);max-width:var(--ids-comp-notification-outlined-container-size-max-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-spacious);padding:var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-spacious);max-width:var(--ids-comp-notification-outlined-container-size-max-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-dense);padding:var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-dense);max-width:var(--ids-comp-notification-outlined-container-size-max-width-dense)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-compact);padding-right:var(--ids-comp-notification-icon-size-padding-right-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-compact);height:var(--ids-comp-notification-icon-size-icon-compact);font-size:var(--ids-comp-notification-icon-typography-font-size-compact);font-weight:var(--ids-comp-notification-icon-typography-font-weight-compact);line-height:var(--ids-comp-notification-icon-typography-line-height-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-compact);gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-compact);font-weight:var(--ids-comp-notification-title-typography-font-weight-compact);line-height:var(--ids-comp-notification-title-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-compact);font-weight:var(--ids-comp-notification-message-typography-font-weight-compact);line-height:var(--ids-comp-notification-message-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-compact);height:var(--ids-comp-notification-icon-button-size-icon-button-compact)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-notification-icon-size-padding-right-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-comfortable);height:var(--ids-comp-notification-icon-size-icon-comfortable);font-size:var(--ids-comp-notification-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-icon-typography-line-height-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-comfortable);gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-title-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-message-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-comfortable);height:var(--ids-comp-notification-icon-button-size-icon-button-comfortable)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-spacious);padding-right:var(--ids-comp-notification-icon-size-padding-right-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-spacious);height:var(--ids-comp-notification-icon-size-icon-spacious);font-size:var(--ids-comp-notification-icon-typography-font-size-spacious);font-weight:var(--ids-comp-notification-icon-typography-font-weight-spacious);line-height:var(--ids-comp-notification-icon-typography-line-height-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-spacious);gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-spacious);font-weight:var(--ids-comp-notification-title-typography-font-weight-spacious);line-height:var(--ids-comp-notification-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-spacious);font-weight:var(--ids-comp-notification-message-typography-font-weight-spacious);line-height:var(--ids-comp-notification-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-spacious);height:var(--ids-comp-notification-icon-button-size-icon-button-spacious)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-dense);padding-right:var(--ids-comp-notification-icon-size-padding-right-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-dense);height:var(--ids-comp-notification-icon-size-icon-dense);font-size:var(--ids-comp-notification-icon-typography-font-size-dense);font-weight:var(--ids-comp-notification-icon-typography-font-weight-dense);line-height:var(--ids-comp-notification-icon-typography-line-height-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-dense);gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-dense);font-weight:var(--ids-comp-notification-title-typography-font-weight-dense);line-height:var(--ids-comp-notification-title-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-dense);font-weight:var(--ids-comp-notification-message-typography-font-weight-dense);line-height:var(--ids-comp-notification-message-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-dense);height:var(--ids-comp-notification-icon-button-size-icon-button-dense)}
1
+ .ids-notification{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5}.ids-notification::before,.ids-notification::after,.ids-notification *,.ids-notification ::before,.ids-notification ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-notification>.ids-notification__content-wrapper{display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;border-style:solid}.ids-notification>.ids-notification__content-wrapper>.ids-notification__leading-element{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container{display:flex;justify-content:space-between;align-content:center;flex:1 0 0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{display:flex;flex-direction:column}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{flex:1 0 0;font-style:normal}.ids-notification>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{display:flex;align-items:center;flex-shrink:0}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container{margin-left:auto}.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button{display:flex;align-self:center}.ids-notification.ids-notification-actions-bottom-mode>.ids-notification__content-wrapper>.ids-notification__container{flex-direction:column;align-items:flex-start}.ids-notification:not(.ids-notification-actions-bottom-mode)>.ids-notification__content-wrapper>.ids-notification__container{align-items:center}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-error-default);background:var(--ids-comp-notification-filled-color-bg-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-error-default)}.ids-notification.ids-notification-filled.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-error-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-success-default);background:var(--ids-comp-notification-filled-color-bg-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-success-default)}.ids-notification.ids-notification-filled.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-success-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-warning-default);background:var(--ids-comp-notification-filled-color-bg-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-warning-default)}.ids-notification.ids-notification-filled.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-warning-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-light-default);background:var(--ids-comp-notification-filled-color-bg-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-light-default)}.ids-notification.ids-notification-filled.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-light-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-dark-default);background:var(--ids-comp-notification-filled-color-bg-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-dark-default)}.ids-notification.ids-notification-filled.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-dark-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-surface-default);background:var(--ids-comp-notification-filled-color-bg-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-surface-default)}.ids-notification.ids-notification-filled.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-surface-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-filled-color-border-info-default);background:var(--ids-comp-notification-filled-color-bg-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-filled-color-fg-icon-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-filled-color-fg-title-info-default)}.ids-notification.ids-notification-filled.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-filled-color-fg-message-info-default)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-compact);padding:var(--ids-comp-notification-filled-container-size-padding-y-compact) var(--ids-comp-notification-filled-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-compact)}.ids-notification.ids-notification-filled.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-compact);max-width:var(--ids-comp-notification-filled-container-size-max-width-compact)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-comfortable);padding:var(--ids-comp-notification-filled-container-size-padding-y-comfortable) var(--ids-comp-notification-filled-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-comfortable);max-width:var(--ids-comp-notification-filled-container-size-max-width-comfortable)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-spacious);padding:var(--ids-comp-notification-filled-container-size-padding-y-spacious) var(--ids-comp-notification-filled-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-spacious);max-width:var(--ids-comp-notification-filled-container-size-max-width-spacious)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-filled-container-size-gap-dense);padding:var(--ids-comp-notification-filled-container-size-padding-y-dense) var(--ids-comp-notification-filled-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-filled-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-filled-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-filled-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-filled-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-filled-container-size-border-left-width-dense)}.ids-notification.ids-notification-filled.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-filled-container-size-min-width-dense);max-width:var(--ids-comp-notification-filled-container-size-max-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-error-default);background:var(--ids-comp-notification-outlined-color-bg-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-error-default)}.ids-notification.ids-notification-outlined.ids-notification-error>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-error-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-success-default);background:var(--ids-comp-notification-outlined-color-bg-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-success-default)}.ids-notification.ids-notification-outlined.ids-notification-success>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-success-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-warning-default);background:var(--ids-comp-notification-outlined-color-bg-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-warning>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-warning-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-light-default);background:var(--ids-comp-notification-outlined-color-bg-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-light-default)}.ids-notification.ids-notification-outlined.ids-notification-light>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-light-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-dark-default);background:var(--ids-comp-notification-outlined-color-bg-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-dark>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-dark-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-surface-default);background:var(--ids-comp-notification-outlined-color-bg-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-surface>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-surface-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper{border-color:var(--ids-comp-notification-outlined-color-border-info-default);background:var(--ids-comp-notification-outlined-color-bg-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{color:var(--ids-comp-notification-outlined-color-fg-icon-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{color:var(--ids-comp-notification-outlined-color-fg-title-info-default)}.ids-notification.ids-notification-outlined.ids-notification-info>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{color:var(--ids-comp-notification-outlined-color-fg-message-info-default)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-compact);padding:var(--ids-comp-notification-outlined-container-size-padding-y-compact) var(--ids-comp-notification-outlined-container-size-padding-x-compact);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-compact);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-compact);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-compact);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-compact);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-compact);max-width:var(--ids-comp-notification-outlined-container-size-max-width-compact)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-comfortable);padding:var(--ids-comp-notification-outlined-container-size-padding-y-comfortable) var(--ids-comp-notification-outlined-container-size-padding-x-comfortable);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-comfortable);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-comfortable);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-comfortable);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-comfortable);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-comfortable);max-width:var(--ids-comp-notification-outlined-container-size-max-width-comfortable)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-spacious);padding:var(--ids-comp-notification-outlined-container-size-padding-y-spacious) var(--ids-comp-notification-outlined-container-size-padding-x-spacious);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-spacious);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-spacious);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-spacious);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-spacious);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-spacious);max-width:var(--ids-comp-notification-outlined-container-size-max-width-spacious)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper{gap:var(--ids-comp-notification-outlined-container-size-gap-dense);padding:var(--ids-comp-notification-outlined-container-size-padding-y-dense) var(--ids-comp-notification-outlined-container-size-padding-x-dense);border-radius:var(--ids-comp-notification-outlined-container-size-border-radius-dense);border-top-width:var(--ids-comp-notification-outlined-container-size-border-top-width-dense);border-right-width:var(--ids-comp-notification-outlined-container-size-border-right-width-dense);border-bottom-width:var(--ids-comp-notification-outlined-container-size-border-bottom-width-dense);border-left-width:var(--ids-comp-notification-outlined-container-size-border-left-width-dense)}.ids-notification.ids-notification-outlined.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{min-width:var(--ids-comp-notification-outlined-container-size-min-width-dense);max-width:var(--ids-comp-notification-outlined-container-size-max-width-dense)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-compact);padding-right:var(--ids-comp-notification-icon-size-padding-right-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-compact);height:var(--ids-comp-notification-icon-size-icon-compact);font-size:var(--ids-comp-notification-icon-typography-font-size-compact);font-weight:var(--ids-comp-notification-icon-typography-font-weight-compact);line-height:var(--ids-comp-notification-icon-typography-line-height-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-compact);gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-compact);font-weight:var(--ids-comp-notification-title-typography-font-weight-compact);line-height:var(--ids-comp-notification-title-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-compact);font-weight:var(--ids-comp-notification-message-typography-font-weight-compact);line-height:var(--ids-comp-notification-message-typography-line-height-compact);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-compact)}.ids-notification.ids-notification-compact>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-compact);height:var(--ids-comp-notification-icon-button-size-icon-button-compact)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-comfortable);padding-right:var(--ids-comp-notification-icon-size-padding-right-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-comfortable);height:var(--ids-comp-notification-icon-size-icon-comfortable);font-size:var(--ids-comp-notification-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-icon-typography-line-height-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-comfortable);gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-title-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-comfortable);font-weight:var(--ids-comp-notification-message-typography-font-weight-comfortable);line-height:var(--ids-comp-notification-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-comfortable)}.ids-notification.ids-notification-comfortable>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-comfortable);height:var(--ids-comp-notification-icon-button-size-icon-button-comfortable)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-spacious);padding-right:var(--ids-comp-notification-icon-size-padding-right-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-spacious);height:var(--ids-comp-notification-icon-size-icon-spacious);font-size:var(--ids-comp-notification-icon-typography-font-size-spacious);font-weight:var(--ids-comp-notification-icon-typography-font-weight-spacious);line-height:var(--ids-comp-notification-icon-typography-line-height-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-spacious);gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-spacious);font-weight:var(--ids-comp-notification-title-typography-font-weight-spacious);line-height:var(--ids-comp-notification-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-spacious);font-weight:var(--ids-comp-notification-message-typography-font-weight-spacious);line-height:var(--ids-comp-notification-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-spacious)}.ids-notification.ids-notification-spacious>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-spacious);height:var(--ids-comp-notification-icon-button-size-icon-button-spacious)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element{padding-left:var(--ids-comp-notification-icon-size-padding-left-dense);padding-right:var(--ids-comp-notification-icon-size-padding-right-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__leading-element>.ids-icon{width:var(--ids-comp-notification-icon-size-icon-dense);height:var(--ids-comp-notification-icon-size-icon-dense);font-size:var(--ids-comp-notification-icon-typography-font-size-dense);font-weight:var(--ids-comp-notification-icon-typography-font-weight-dense);line-height:var(--ids-comp-notification-icon-typography-line-height-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container{padding-right:var(--ids-comp-notification-message-size-padding-right-dense);gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container{row-gap:var(--ids-comp-notification-message-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__title{font-size:var(--ids-comp-notification-title-typography-font-size-dense);font-weight:var(--ids-comp-notification-title-typography-font-weight-dense);line-height:var(--ids-comp-notification-title-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-title-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__title-msg-container>.ids-notification__message{font-size:var(--ids-comp-notification-message-typography-font-size-dense);font-weight:var(--ids-comp-notification-message-typography-font-weight-dense);line-height:var(--ids-comp-notification-message-typography-line-height-dense);letter-spacing:var(--ids-comp-notification-message-typography-letter-spacing-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__container>.ids-notification__action{gap:var(--ids-comp-notification-actions-size-gap-dense)}.ids-notification.ids-notification-dense>.ids-notification__content-wrapper>.ids-notification__close-button-container>.ids-icon-button>.ids-icon{width:var(--ids-comp-notification-icon-button-size-icon-button-dense);height:var(--ids-comp-notification-icon-button-size-icon-button-dense)}
package/dist/notification/notification.plugin.js CHANGED
@@ -17,7 +17,6 @@ module.exports = function NotificationPlugin() {
17
17
  },
18
18
  '.ids-notification>.ids-notification__content-wrapper': {
19
19
  display: 'flex',
20
- justifyContent: 'space-between',
21
20
  alignItems: 'flex-start',
22
21
  alignContent: 'flex-start',
23
22
  flexWrap: 'wrap',
@@ -47,6 +46,7 @@ module.exports = function NotificationPlugin() {
47
46
  alignItems: 'center',
48
47
  flexShrink: 0,
49
48
  },
49
+ '.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container': { marginLeft: 'auto' },
50
50
  '.ids-notification>.ids-notification__content-wrapper>.ids-notification__close-button-container.ids-notification__label-button': {
51
51
  display: 'flex',
52
52
  alignSelf: 'center',
package/dist/option/option.css CHANGED
@@ -4,10 +4,10 @@
4
4
  align-self: stretch;
5
5
  box-sizing: border-box;
6
6
  user-select: none;
7
+ flex-shrink: 0;
7
8
  }
8
9
  .ids-option > .ids-option__text {
9
- overflow: hidden;
10
- text-overflow: ellipsis;
10
+ overflow-wrap: anywhere;
11
11
  font-style: normal;
12
12
  }
13
13
  .ids-option:not(.ids-option-disabled) {
@@ -23,7 +23,7 @@
23
23
  outline-style: solid;
24
24
  }
25
25
  .ids-option.ids-option-compact {
26
- height: var(--ids-comp-forms-option-item-size-min-height-compact);
26
+ min-height: var(--ids-comp-forms-option-item-size-min-height-compact);
27
27
  padding: var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);
28
28
  gap: var(--ids-comp-forms-option-container-size-gap-compact);
29
29
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-compact);
@@ -46,7 +46,7 @@
46
46
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
47
47
  }
48
48
  .ids-option.ids-option-comfortable {
49
- height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
49
+ min-height: var(--ids-comp-forms-option-item-size-min-height-comfortable);
50
50
  padding: var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);
51
51
  gap: var(--ids-comp-forms-option-container-size-gap-comfortable);
52
52
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-comfortable);
@@ -69,7 +69,7 @@
69
69
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
70
70
  }
71
71
  .ids-option.ids-option-spacious {
72
- height: var(--ids-comp-forms-option-item-size-min-height-spacious);
72
+ min-height: var(--ids-comp-forms-option-item-size-min-height-spacious);
73
73
  padding: var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);
74
74
  gap: var(--ids-comp-forms-option-container-size-gap-spacious);
75
75
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-spacious);
@@ -92,7 +92,7 @@
92
92
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
93
93
  }
94
94
  .ids-option.ids-option-dense {
95
- height: var(--ids-comp-forms-option-item-size-min-height-dense);
95
+ min-height: var(--ids-comp-forms-option-item-size-min-height-dense);
96
96
  padding: var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);
97
97
  gap: var(--ids-comp-forms-option-container-size-gap-dense);
98
98
  border-radius: var(--ids-comp-forms-option-item-size-border-radius-dense);
package/dist/option/option.min.css CHANGED
@@ -1 +1 @@
1
- .ids-option{display:flex;align-items:center;align-self:stretch;box-sizing:border-box;user-select:none}.ids-option>.ids-option__text{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-option:not(.ids-option-disabled){cursor:pointer}.ids-option.ids-option-disabled{cursor:not-allowed}.ids-option:not(.ids-option-multiselect){justify-content:space-between}.ids-option.ids-option-active{outline-style:solid}.ids-option.ids-option-compact{height:var(--ids-comp-forms-option-item-size-min-height-compact);padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);gap:var(--ids-comp-forms-option-container-size-gap-compact);border-radius:var(--ids-comp-forms-option-item-size-border-radius-compact)}.ids-option.ids-option-compact>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-compact);font-size:var(--ids-comp-forms-option-item-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-item-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-compact)}.ids-option.ids-option-compact>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-compact);width:var(--ids-comp-forms-option-item-icon-size-width-compact);font-size:var(--ids-comp-forms-option-icon-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-icon-typography-line-height-compact)}.ids-option.ids-option-compact.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)}.ids-option.ids-option-comfortable{height:var(--ids-comp-forms-option-item-size-min-height-comfortable);padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);gap:var(--ids-comp-forms-option-container-size-gap-comfortable);border-radius:var(--ids-comp-forms-option-item-size-border-radius-comfortable)}.ids-option.ids-option-comfortable>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-item-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-item-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable)}.ids-option.ids-option-comfortable>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-comfortable);width:var(--ids-comp-forms-option-item-icon-size-width-comfortable);font-size:var(--ids-comp-forms-option-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-icon-typography-line-height-comfortable)}.ids-option.ids-option-comfortable.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)}.ids-option.ids-option-spacious{height:var(--ids-comp-forms-option-item-size-min-height-spacious);padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);gap:var(--ids-comp-forms-option-container-size-gap-spacious);border-radius:var(--ids-comp-forms-option-item-size-border-radius-spacious)}.ids-option.ids-option-spacious>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-item-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-item-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-spacious)}.ids-option.ids-option-spacious>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-spacious);width:var(--ids-comp-forms-option-item-icon-size-width-spacious);font-size:var(--ids-comp-forms-option-icon-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-icon-typography-line-height-spacious)}.ids-option.ids-option-spacious.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)}.ids-option.ids-option-dense{height:var(--ids-comp-forms-option-item-size-min-height-dense);padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);gap:var(--ids-comp-forms-option-container-size-gap-dense);border-radius:var(--ids-comp-forms-option-item-size-border-radius-dense)}.ids-option.ids-option-dense>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-dense);font-size:var(--ids-comp-forms-option-item-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-item-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-dense)}.ids-option.ids-option-dense>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-dense);width:var(--ids-comp-forms-option-item-icon-size-width-dense);font-size:var(--ids-comp-forms-option-icon-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-icon-typography-line-height-dense)}.ids-option.ids-option-dense.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)}.ids-option.ids-option-surface:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-surface-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-active)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-active)}.ids-option.ids-option-surface.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-disabled)}.ids-option.ids-option-light:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-light-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-active)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-active)}.ids-option.ids-option-light.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-disabled)}.ids-option-group{width:100%}.ids-option-group>.ids-option-group__label{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ids-option-group>.ids-option-group__label>.ids-option-group__text{display:flex;align-items:center;align-self:stretch;font-style:normal}.ids-option-group.ids-option-group-compact>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-compact)}.ids-option-group.ids-option-group-compact>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-compact);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact)}.ids-option-group.ids-option-group-compact>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious)}.ids-option-group.ids-option-group-dense>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-dense)}.ids-option-group.ids-option-group-dense>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-dense);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense)}.ids-option-group.ids-option-group-dense>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense)}.ids-option-group .ids-option-groupsurface>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}.ids-option-group .ids-option-grouplight>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}
1
+ .ids-option{display:flex;align-items:center;align-self:stretch;box-sizing:border-box;user-select:none;flex-shrink:0}.ids-option>.ids-option__text{overflow-wrap:anywhere;font-style:normal}.ids-option:not(.ids-option-disabled){cursor:pointer}.ids-option.ids-option-disabled{cursor:not-allowed}.ids-option:not(.ids-option-multiselect){justify-content:space-between}.ids-option.ids-option-active{outline-style:solid}.ids-option.ids-option-compact{min-height:var(--ids-comp-forms-option-item-size-min-height-compact);padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);gap:var(--ids-comp-forms-option-container-size-gap-compact);border-radius:var(--ids-comp-forms-option-item-size-border-radius-compact)}.ids-option.ids-option-compact>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-compact);font-size:var(--ids-comp-forms-option-item-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-item-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-compact)}.ids-option.ids-option-compact>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-compact);width:var(--ids-comp-forms-option-item-icon-size-width-compact);font-size:var(--ids-comp-forms-option-icon-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-icon-typography-line-height-compact)}.ids-option.ids-option-compact.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)}.ids-option.ids-option-comfortable{min-height:var(--ids-comp-forms-option-item-size-min-height-comfortable);padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);gap:var(--ids-comp-forms-option-container-size-gap-comfortable);border-radius:var(--ids-comp-forms-option-item-size-border-radius-comfortable)}.ids-option.ids-option-comfortable>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-item-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-item-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable)}.ids-option.ids-option-comfortable>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-comfortable);width:var(--ids-comp-forms-option-item-icon-size-width-comfortable);font-size:var(--ids-comp-forms-option-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-icon-typography-line-height-comfortable)}.ids-option.ids-option-comfortable.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)}.ids-option.ids-option-spacious{min-height:var(--ids-comp-forms-option-item-size-min-height-spacious);padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);gap:var(--ids-comp-forms-option-container-size-gap-spacious);border-radius:var(--ids-comp-forms-option-item-size-border-radius-spacious)}.ids-option.ids-option-spacious>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-item-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-item-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-spacious)}.ids-option.ids-option-spacious>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-spacious);width:var(--ids-comp-forms-option-item-icon-size-width-spacious);font-size:var(--ids-comp-forms-option-icon-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-icon-typography-line-height-spacious)}.ids-option.ids-option-spacious.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)}.ids-option.ids-option-dense{min-height:var(--ids-comp-forms-option-item-size-min-height-dense);padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);gap:var(--ids-comp-forms-option-container-size-gap-dense);border-radius:var(--ids-comp-forms-option-item-size-border-radius-dense)}.ids-option.ids-option-dense>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-dense);font-size:var(--ids-comp-forms-option-item-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-item-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-dense)}.ids-option.ids-option-dense>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-dense);width:var(--ids-comp-forms-option-item-icon-size-width-dense);font-size:var(--ids-comp-forms-option-icon-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-icon-typography-line-height-dense)}.ids-option.ids-option-dense.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)}.ids-option.ids-option-surface:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-surface-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-active)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-active)}.ids-option.ids-option-surface.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-disabled)}.ids-option.ids-option-light:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-light-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-active)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-active)}.ids-option.ids-option-light.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-disabled)}.ids-option-group{width:100%}.ids-option-group>.ids-option-group__label{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ids-option-group>.ids-option-group__label>.ids-option-group__text{display:flex;align-items:center;align-self:stretch;font-style:normal}.ids-option-group.ids-option-group-compact>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-compact)}.ids-option-group.ids-option-group-compact>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-compact);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact)}.ids-option-group.ids-option-group-compact>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious)}.ids-option-group.ids-option-group-dense>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-dense)}.ids-option-group.ids-option-group-dense>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-dense);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense)}.ids-option-group.ids-option-group-dense>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense)}.ids-option-group .ids-option-groupsurface>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}.ids-option-group .ids-option-grouplight>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}
package/dist/option/option.plugin.js CHANGED
@@ -2,14 +2,21 @@
2
2
  module.exports = function OptionPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-option': { display: 'flex', alignItems: 'center', alignSelf: 'stretch', boxSizing: 'border-box', userSelect: 'none' },
6
- '.ids-option>.ids-option__text': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
5
+ '.ids-option': {
6
+ display: 'flex',
7
+ alignItems: 'center',
8
+ alignSelf: 'stretch',
9
+ boxSizing: 'border-box',
10
+ userSelect: 'none',
11
+ flexShrink: 0,
12
+ },
13
+ '.ids-option>.ids-option__text': { overflowWrap: 'anywhere', fontStyle: 'normal' },
7
14
  '.ids-option:not(.ids-option-disabled)': { cursor: 'pointer' },
8
15
  '.ids-option.ids-option-disabled': { cursor: 'not-allowed' },
9
16
  '.ids-option:not(.ids-option-multiselect)': { justifyContent: 'space-between' },
10
17
  '.ids-option.ids-option-active': { outlineStyle: 'solid' },
11
18
  '.ids-option.ids-option-compact': {
12
- height: 'var(--ids-comp-forms-option-item-size-min-height-compact)',
19
+ minHeight: 'var(--ids-comp-forms-option-item-size-min-height-compact)',
13
20
  padding: 'var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact)',
14
21
  gap: 'var(--ids-comp-forms-option-container-size-gap-compact)',
15
22
  borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-compact)',
@@ -32,7 +39,7 @@ module.exports = function OptionPlugin() {
32
39
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
33
40
  },
34
41
  '.ids-option.ids-option-comfortable': {
35
- height: 'var(--ids-comp-forms-option-item-size-min-height-comfortable)',
42
+ minHeight: 'var(--ids-comp-forms-option-item-size-min-height-comfortable)',
36
43
  padding:
37
44
  'var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable)',
38
45
  gap: 'var(--ids-comp-forms-option-container-size-gap-comfortable)',
@@ -56,7 +63,7 @@ module.exports = function OptionPlugin() {
56
63
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)',
57
64
  },
58
65
  '.ids-option.ids-option-spacious': {
59
- height: 'var(--ids-comp-forms-option-item-size-min-height-spacious)',
66
+ minHeight: 'var(--ids-comp-forms-option-item-size-min-height-spacious)',
60
67
  padding: 'var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious)',
61
68
  gap: 'var(--ids-comp-forms-option-container-size-gap-spacious)',
62
69
  borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-spacious)',
@@ -79,7 +86,7 @@ module.exports = function OptionPlugin() {
79
86
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)',
80
87
  },
81
88
  '.ids-option.ids-option-dense': {
82
- height: 'var(--ids-comp-forms-option-item-size-min-height-dense)',
89
+ minHeight: 'var(--ids-comp-forms-option-item-size-min-height-dense)',
83
90
  padding: 'var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense)',
84
91
  gap: 'var(--ids-comp-forms-option-container-size-gap-dense)',
85
92
  borderRadius: 'var(--ids-comp-forms-option-item-size-border-radius-dense)',