@i-cell/ids-styles 0.0.32 → 0.0.34

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 (88) hide show
  1. package/dist/accordion/accordion.css +11 -0
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +17 -1
  4. package/dist/avatar/avatar.css +11 -0
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +11 -1
  7. package/dist/button/button-group.css +11 -0
  8. package/dist/button/button-group.min.css +1 -1
  9. package/dist/button/button-group.plugin.js +17 -1
  10. package/dist/button/button.css +11 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +11 -1
  13. package/dist/card/card.css +11 -0
  14. package/dist/card/card.min.css +1 -1
  15. package/dist/card/card.plugin.js +14 -1
  16. package/dist/checkbox/checkbox.css +11 -0
  17. package/dist/checkbox/checkbox.min.css +1 -1
  18. package/dist/checkbox/checkbox.plugin.js +16 -1
  19. package/dist/components.css +635 -105
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +741 -178
  22. package/dist/dialog/dialog.css +15 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +16 -9
  25. package/dist/divider/divider.css +11 -0
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +16 -1
  28. package/dist/form-elements/fieldset/fieldset.css +11 -0
  29. package/dist/form-elements/fieldset/fieldset.min.css +1 -1
  30. package/dist/form-elements/fieldset/fieldset.plugin.js +10 -2
  31. package/dist/form-elements/form-field/form-field.css +11 -0
  32. package/dist/form-elements/form-field/form-field.min.css +1 -1
  33. package/dist/form-elements/form-field/form-field.plugin.js +16 -1
  34. package/dist/form-elements/message/message.css +11 -0
  35. package/dist/form-elements/message/message.min.css +1 -1
  36. package/dist/form-elements/message/message.plugin.js +17 -1
  37. package/dist/icon/icon.css +11 -0
  38. package/dist/icon/icon.min.css +1 -1
  39. package/dist/icon/icon.plugin.js +11 -0
  40. package/dist/icon-button/icon-button.css +11 -0
  41. package/dist/icon-button/icon-button.min.css +1 -1
  42. package/dist/icon-button/icon-button.plugin.js +11 -1
  43. package/dist/menu-item/menu-item.css +252 -11
  44. package/dist/menu-item/menu-item.min.css +1 -1
  45. package/dist/menu-item/menu-item.plugin.js +247 -11
  46. package/dist/notification/notification.css +13 -0
  47. package/dist/notification/notification.min.css +1 -1
  48. package/dist/notification/notification.plugin.js +13 -0
  49. package/dist/overlay-panel/overlay-panel.css +11 -0
  50. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  51. package/dist/overlay-panel/overlay-panel.plugin.js +16 -1
  52. package/dist/paginator/paginator.css +11 -0
  53. package/dist/paginator/paginator.min.css +1 -1
  54. package/dist/paginator/paginator.plugin.js +14 -1
  55. package/dist/radio/radio.css +11 -0
  56. package/dist/radio/radio.min.css +1 -1
  57. package/dist/radio/radio.plugin.js +16 -1
  58. package/dist/reset.css +0 -0
  59. package/dist/reset.min.css +0 -0
  60. package/dist/reset.plugin.js +8 -0
  61. package/dist/segmented-control/segmented-control.css +11 -0
  62. package/dist/segmented-control/segmented-control.min.css +1 -1
  63. package/dist/segmented-control/segmented-control.plugin.js +13 -1
  64. package/dist/segmented-control-toggle/segmented-control-toggle.css +11 -0
  65. package/dist/segmented-control-toggle/segmented-control-toggle.min.css +1 -1
  66. package/dist/segmented-control-toggle/segmented-control-toggle.plugin.js +13 -1
  67. package/dist/select/select.css +11 -0
  68. package/dist/select/select.min.css +1 -1
  69. package/dist/select/select.plugin.js +14 -1
  70. package/dist/snackbar/snackbar.css +11 -0
  71. package/dist/snackbar/snackbar.min.css +1 -1
  72. package/dist/snackbar/snackbar.plugin.js +10 -1
  73. package/dist/switch/switch.css +11 -0
  74. package/dist/switch/switch.min.css +1 -1
  75. package/dist/switch/switch.plugin.js +15 -1
  76. package/dist/tab/tab.css +102 -92
  77. package/dist/tab/tab.min.css +1 -1
  78. package/dist/tab/tab.plugin.js +141 -135
  79. package/dist/table/table.css +11 -1
  80. package/dist/table/table.min.css +1 -1
  81. package/dist/table/table.plugin.js +16 -1
  82. package/dist/tag/tag.css +11 -0
  83. package/dist/tag/tag.min.css +1 -1
  84. package/dist/tag/tag.plugin.js +16 -1
  85. package/dist/tooltip/tooltip.css +11 -0
  86. package/dist/tooltip/tooltip.min.css +1 -1
  87. package/dist/tooltip/tooltip.plugin.js +14 -1
  88. package/package.json +3 -3
package/dist/dialog/dialog.css CHANGED
@@ -1,10 +1,21 @@
1
1
  .ids-dialog {
2
2
  box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
7
+ padding: 0;
3
8
  border-style: solid;
4
9
  border-color: var(--ids-comp-dialog-container-color-border-surface-default);
5
10
  background-color: var(--ids-comp-dialog-container-color-bg-default);
6
11
  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);
7
12
  }
13
+ .ids-dialog::before, .ids-dialog::after, .ids-dialog *, .ids-dialog ::before, .ids-dialog ::after {
14
+ box-sizing: border-box;
15
+ border-width: 0;
16
+ border-style: none;
17
+ border-color: transparent;
18
+ }
8
19
  .ids-dialog::backdrop {
9
20
  background-color: transparent;
10
21
  }
@@ -12,7 +23,6 @@
12
23
  background-color: var(--ids-comp-dialog-backdrop-background);
13
24
  }
14
25
  .ids-dialog .ids-dialog-container {
15
- box-sizing: border-box;
16
26
  display: grid;
17
27
  grid-template-rows: auto 1fr auto;
18
28
  position: relative;
@@ -109,6 +119,7 @@
109
119
  }
110
120
  .ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions {
111
121
  padding: var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact);
122
+ gap: var(--ids-comp-dialog-footer-gap-compact);
112
123
  }
113
124
  .ids-dialog.ids-dialog-comfortable {
114
125
  border-radius: var(--ids-comp-dialog-container-size-border-radius-comfortable);
@@ -151,6 +162,7 @@
151
162
  }
152
163
  .ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions {
153
164
  padding: var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable);
165
+ gap: var(--ids-comp-dialog-footer-gap-comfortable);
154
166
  }
155
167
  .ids-dialog.ids-dialog-spacious {
156
168
  border-radius: var(--ids-comp-dialog-container-size-border-radius-spacious);
@@ -193,6 +205,7 @@
193
205
  }
194
206
  .ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions {
195
207
  padding: var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious);
208
+ gap: var(--ids-comp-dialog-footer-gap-spacious);
196
209
  }
197
210
  .ids-dialog.ids-dialog-dense {
198
211
  border-radius: var(--ids-comp-dialog-container-size-border-radius-dense);
@@ -235,4 +248,5 @@
235
248
  }
236
249
  .ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions {
237
250
  padding: var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense);
251
+ gap: var(--ids-comp-dialog-footer-gap-dense);
238
252
  }
package/dist/dialog/dialog.min.css CHANGED
@@ -1 +1 @@
1
- .ids-dialog{box-sizing:border-box;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::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{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;position:relative;max-height:80vh}.ids-dialog .ids-dialog-container .ids-dialog-header{display:flex;align-items:stretch}.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:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;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{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)}.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{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)}.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{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)}.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{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)}
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:flex;align-items:stretch}.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:flex;flex-direction:column;flex:1 0 0;align-items:flex-start}.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-close-button{position:absolute;top:12px;right:12px}.ids-dialog .ids-dialog-container .ids-dialog-content{display:flex;align-items:center;justify-content:center;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{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{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{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{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
@@ -4,21 +4,24 @@ module.exports = function DialogPlugin() {
4
4
  const cssObj = {
5
5
  '.ids-dialog': {
6
6
  boxSizing: 'border-box',
7
- borderStyle: 'solid',
8
- borderColor: 'var(--ids-comp-dialog-container-color-border-surface-default)',
7
+ borderWidth: '0',
8
+ borderStyle: ['none', 'solid'],
9
+ borderColor: ['rgba(0,0,0,0)', 'var(--ids-comp-dialog-container-color-border-surface-default)'],
10
+ lineHeight: 1.5,
11
+ padding: '0',
9
12
  backgroundColor: 'var(--ids-comp-dialog-container-color-bg-default)',
10
13
  boxShadow:
11
14
  '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)',
12
15
  },
13
- '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
14
- '.ids-dialog.ids-dialog-with-backdrop::backdrop': { backgroundColor: 'var(--ids-comp-dialog-backdrop-background)' },
15
- '.ids-dialog .ids-dialog-container': {
16
+ '.ids-dialog::before,.ids-dialog::after,.ids-dialog *,.ids-dialog ::before,.ids-dialog ::after': {
16
17
  boxSizing: 'border-box',
17
- display: 'grid',
18
- gridTemplateRows: 'auto 1fr auto',
19
- position: 'relative',
20
- maxHeight: '80vh',
18
+ borderWidth: '0',
19
+ borderStyle: 'none',
20
+ borderColor: 'rgba(0,0,0,0)',
21
21
  },
22
+ '.ids-dialog::backdrop': { backgroundColor: 'rgba(0,0,0,0)' },
23
+ '.ids-dialog.ids-dialog-with-backdrop::backdrop': { backgroundColor: 'var(--ids-comp-dialog-backdrop-background)' },
24
+ '.ids-dialog .ids-dialog-container': { display: 'grid', gridTemplateRows: 'auto 1fr auto', position: 'relative', maxHeight: '80vh' },
22
25
  '.ids-dialog .ids-dialog-container .ids-dialog-header': { display: 'flex', alignItems: 'stretch' },
23
26
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title': { fontStyle: 'normal' },
24
27
  '.ids-dialog .ids-dialog-container .ids-dialog-header .ids-dialog-title.hidden': { display: 'none' },
@@ -95,6 +98,7 @@ module.exports = function DialogPlugin() {
95
98
  },
96
99
  '.ids-dialog.ids-dialog-compact .ids-dialog-container .ids-dialog-actions': {
97
100
  padding: 'var(--ids-comp-dialog-footer-padding-y-compact) var(--ids-comp-dialog-footer-padding-x-compact)',
101
+ gap: 'var(--ids-comp-dialog-footer-gap-compact)',
98
102
  },
99
103
  '.ids-dialog.ids-dialog-comfortable': {
100
104
  borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-comfortable)',
@@ -139,6 +143,7 @@ module.exports = function DialogPlugin() {
139
143
  },
140
144
  '.ids-dialog.ids-dialog-comfortable .ids-dialog-container .ids-dialog-actions': {
141
145
  padding: 'var(--ids-comp-dialog-footer-padding-y-comfortable) var(--ids-comp-dialog-footer-padding-x-comfortable)',
146
+ gap: 'var(--ids-comp-dialog-footer-gap-comfortable)',
142
147
  },
143
148
  '.ids-dialog.ids-dialog-spacious': {
144
149
  borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-spacious)',
@@ -183,6 +188,7 @@ module.exports = function DialogPlugin() {
183
188
  },
184
189
  '.ids-dialog.ids-dialog-spacious .ids-dialog-container .ids-dialog-actions': {
185
190
  padding: 'var(--ids-comp-dialog-footer-padding-y-spacious) var(--ids-comp-dialog-footer-padding-x-spacious)',
191
+ gap: 'var(--ids-comp-dialog-footer-gap-spacious)',
186
192
  },
187
193
  '.ids-dialog.ids-dialog-dense': {
188
194
  borderRadius: 'var(--ids-comp-dialog-container-size-border-radius-dense)',
@@ -224,6 +230,7 @@ module.exports = function DialogPlugin() {
224
230
  },
225
231
  '.ids-dialog.ids-dialog-dense .ids-dialog-container .ids-dialog-actions': {
226
232
  padding: 'var(--ids-comp-dialog-footer-padding-y-dense) var(--ids-comp-dialog-footer-padding-x-dense)',
233
+ gap: 'var(--ids-comp-dialog-footer-gap-dense)',
227
234
  },
228
235
  };
229
236
 
package/dist/divider/divider.css CHANGED
@@ -1,8 +1,19 @@
1
1
  .ids-divider {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
2
7
  display: flex;
3
8
  align-items: center;
4
9
  justify-content: center;
5
10
  }
11
+ .ids-divider::before, .ids-divider::after, .ids-divider *, .ids-divider ::before, .ids-divider ::after {
12
+ box-sizing: border-box;
13
+ border-width: 0;
14
+ border-style: none;
15
+ border-color: transparent;
16
+ }
6
17
  .ids-divider.ids-divider-compact {
7
18
  border-radius: var(--ids-comp-divider-size-border-radius-compact);
8
19
  }
package/dist/divider/divider.min.css CHANGED
@@ -1 +1 @@
1
- .ids-divider{display:flex;align-items:center;justify-content:center}.ids-divider.ids-divider-compact{border-radius:var(--ids-comp-divider-size-border-radius-compact)}.ids-divider.ids-divider-compact.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-compact)}.ids-divider.ids-divider-compact.ids-divider-vertical{width:var(--ids-comp-divider-size-width-compact)}.ids-divider.ids-divider-comfortable{border-radius:var(--ids-comp-divider-size-border-radius-comfortable)}.ids-divider.ids-divider-comfortable.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-comfortable)}.ids-divider.ids-divider-comfortable.ids-divider-vertical{width:var(--ids-comp-divider-size-width-comfortable)}.ids-divider.ids-divider-spacious{border-radius:var(--ids-comp-divider-size-border-radius-spacious)}.ids-divider.ids-divider-spacious.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-spacious)}.ids-divider.ids-divider-spacious.ids-divider-vertical{width:var(--ids-comp-divider-size-width-spacious)}.ids-divider.ids-divider-dense{border-radius:var(--ids-comp-divider-size-border-radius-dense)}.ids-divider.ids-divider-dense.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-dense)}.ids-divider.ids-divider-dense.ids-divider-vertical{width:var(--ids-comp-divider-size-width-dense)}.ids-divider.ids-divider-primary{background:var(--ids-comp-divider-color-bg-primary-default)}.ids-divider.ids-divider-secondary{background:var(--ids-comp-divider-color-bg-secondary-default)}.ids-divider.ids-divider-brand{background:var(--ids-comp-divider-color-bg-brand-default)}.ids-divider.ids-divider-error{background:var(--ids-comp-divider-color-bg-error-default)}.ids-divider.ids-divider-success{background:var(--ids-comp-divider-color-bg-success-default)}.ids-divider.ids-divider-warning{background:var(--ids-comp-divider-color-bg-warning-default)}.ids-divider.ids-divider-light{background:var(--ids-comp-divider-color-bg-light-default)}.ids-divider.ids-divider-dark{background:var(--ids-comp-divider-color-bg-dark-default)}.ids-divider.ids-divider-surface{background:var(--ids-comp-divider-color-bg-surface-default)}
1
+ .ids-divider{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;align-items:center;justify-content:center}.ids-divider::before,.ids-divider::after,.ids-divider *,.ids-divider ::before,.ids-divider ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-divider.ids-divider-compact{border-radius:var(--ids-comp-divider-size-border-radius-compact)}.ids-divider.ids-divider-compact.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-compact)}.ids-divider.ids-divider-compact.ids-divider-vertical{width:var(--ids-comp-divider-size-width-compact)}.ids-divider.ids-divider-comfortable{border-radius:var(--ids-comp-divider-size-border-radius-comfortable)}.ids-divider.ids-divider-comfortable.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-comfortable)}.ids-divider.ids-divider-comfortable.ids-divider-vertical{width:var(--ids-comp-divider-size-width-comfortable)}.ids-divider.ids-divider-spacious{border-radius:var(--ids-comp-divider-size-border-radius-spacious)}.ids-divider.ids-divider-spacious.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-spacious)}.ids-divider.ids-divider-spacious.ids-divider-vertical{width:var(--ids-comp-divider-size-width-spacious)}.ids-divider.ids-divider-dense{border-radius:var(--ids-comp-divider-size-border-radius-dense)}.ids-divider.ids-divider-dense.ids-divider-horizontal{height:var(--ids-comp-divider-size-height-dense)}.ids-divider.ids-divider-dense.ids-divider-vertical{width:var(--ids-comp-divider-size-width-dense)}.ids-divider.ids-divider-primary{background:var(--ids-comp-divider-color-bg-primary-default)}.ids-divider.ids-divider-secondary{background:var(--ids-comp-divider-color-bg-secondary-default)}.ids-divider.ids-divider-brand{background:var(--ids-comp-divider-color-bg-brand-default)}.ids-divider.ids-divider-error{background:var(--ids-comp-divider-color-bg-error-default)}.ids-divider.ids-divider-success{background:var(--ids-comp-divider-color-bg-success-default)}.ids-divider.ids-divider-warning{background:var(--ids-comp-divider-color-bg-warning-default)}.ids-divider.ids-divider-light{background:var(--ids-comp-divider-color-bg-light-default)}.ids-divider.ids-divider-dark{background:var(--ids-comp-divider-color-bg-dark-default)}.ids-divider.ids-divider-surface{background:var(--ids-comp-divider-color-bg-surface-default)}
package/dist/divider/divider.plugin.js CHANGED
@@ -2,7 +2,22 @@
2
2
  module.exports = function DividerPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-divider': { display: 'flex', alignItems: 'center', justifyContent: 'center' },
5
+ '.ids-divider': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: '0',
8
+ borderStyle: 'none',
9
+ borderColor: 'rgba(0,0,0,0)',
10
+ lineHeight: 1.5,
11
+ display: 'flex',
12
+ alignItems: 'center',
13
+ justifyContent: 'center',
14
+ },
15
+ '.ids-divider::before,.ids-divider::after,.ids-divider *,.ids-divider ::before,.ids-divider ::after': {
16
+ boxSizing: 'border-box',
17
+ borderWidth: '0',
18
+ borderStyle: 'none',
19
+ borderColor: 'rgba(0,0,0,0)',
20
+ },
6
21
  '.ids-divider.ids-divider-compact': { borderRadius: 'var(--ids-comp-divider-size-border-radius-compact)' },
7
22
  '.ids-divider.ids-divider-compact.ids-divider-horizontal': { height: 'var(--ids-comp-divider-size-height-compact)' },
8
23
  '.ids-divider.ids-divider-compact.ids-divider-vertical': { width: 'var(--ids-comp-divider-size-width-compact)' },
package/dist/form-elements/fieldset/fieldset.css CHANGED
@@ -1,4 +1,9 @@
1
1
  .ids-fieldset {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
2
7
  display: flex;
3
8
  width: 100%;
4
9
  flex-direction: column;
@@ -8,6 +13,12 @@
8
13
  border-style: unset;
9
14
  border-color: unset;
10
15
  }
16
+ .ids-fieldset::before, .ids-fieldset::after, .ids-fieldset *, .ids-fieldset ::before, .ids-fieldset ::after {
17
+ box-sizing: border-box;
18
+ border-width: 0;
19
+ border-style: none;
20
+ border-color: transparent;
21
+ }
11
22
  .ids-fieldset > .ids-fieldset-legend {
12
23
  display: flex;
13
24
  width: 100%;
package/dist/form-elements/fieldset/fieldset.min.css CHANGED
@@ -1 +1 @@
1
- .ids-fieldset{display:flex;width:100%;flex-direction:column;align-items:flex-start;margin:0;border-width:0;border-style:unset;border-color:unset}.ids-fieldset>.ids-fieldset-legend{display:flex;width:100%;align-items:stretch;font-style:normal;padding-inline-start:0;padding-inline-end:0}.ids-fieldset>.ids-fieldset-message{display:flex;width:100%;align-self:stretch;font-style:normal}.ids-fieldset>.ids-fieldset-row{display:flex;width:100%;align-items:center;align-self:stretch}.ids-fieldset.ids-fieldset-compact{padding:var(--ids-comp-forms-fieldset-size-padding-y-compact) var(--ids-comp-forms-fieldset-size-padding-x-compact);gap:var(--ids-comp-forms-fieldset-size-gap-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-compact);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-compact);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-compact);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);gap:var(--ids-comp-forms-message-size-gap-compact);font-family:var(--ids-comp-forms-message-typography-font-family-compact);font-size:var(--ids-comp-forms-message-typography-font-size-compact);font-weight:var(--ids-comp-forms-message-typography-font-weight-compact);line-height:var(--ids-comp-forms-message-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-compact);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-compact) var(--ids-comp-forms-fieldset-row-size-padding-x-compact)}.ids-fieldset.ids-fieldset-comfortable{padding:var(--ids-comp-forms-fieldset-size-padding-y-comfortable) var(--ids-comp-forms-fieldset-size-padding-x-comfortable);gap:var(--ids-comp-forms-fieldset-size-gap-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-comfortable);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);gap:var(--ids-comp-forms-message-size-gap-comfortable);font-family:var(--ids-comp-forms-message-typography-font-family-comfortable);font-size:var(--ids-comp-forms-message-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-message-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-comfortable);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-comfortable) var(--ids-comp-forms-fieldset-row-size-padding-x-comfortable)}.ids-fieldset.ids-fieldset-spacious{padding:var(--ids-comp-forms-fieldset-size-padding-y-spacious) var(--ids-comp-forms-fieldset-size-padding-x-spacious);gap:var(--ids-comp-forms-fieldset-size-gap-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-spacious);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-spacious);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-spacious);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);gap:var(--ids-comp-forms-message-size-gap-spacious);font-family:var(--ids-comp-forms-message-typography-font-family-spacious);font-size:var(--ids-comp-forms-message-typography-font-size-spacious);font-weight:var(--ids-comp-forms-message-typography-font-weight-spacious);line-height:var(--ids-comp-forms-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-spacious);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-spacious) var(--ids-comp-forms-fieldset-row-size-padding-x-spacious)}.ids-fieldset.ids-fieldset-dense{padding:var(--ids-comp-forms-fieldset-size-padding-y-dense) var(--ids-comp-forms-fieldset-size-padding-x-dense);gap:var(--ids-comp-forms-fieldset-size-gap-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-dense);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-dense);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-dense);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);gap:var(--ids-comp-forms-message-size-gap-dense);font-family:var(--ids-comp-forms-message-typography-font-family-dense);font-size:var(--ids-comp-forms-message-typography-font-size-dense);font-weight:var(--ids-comp-forms-message-typography-font-weight-dense);line-height:var(--ids-comp-forms-message-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-dense);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-dense) var(--ids-comp-forms-fieldset-row-size-padding-x-dense)}.ids-fieldset.ids-fieldset-light>.ids-fieldset-legend{color:var(--ids-comp-forms-fieldset-legend-color-fg-text-light-default)}.ids-fieldset.ids-fieldset-light>.ids-fieldset-message{color:var(--ids-comp-forms-message-color-fg-text-light-default)}.ids-fieldset.ids-fieldset-surface>.ids-fieldset-legend{color:var(--ids-comp-forms-fieldset-legend-color-fg-text-surface-default)}.ids-fieldset.ids-fieldset-surface>.ids-fieldset-message{color:var(--ids-comp-forms-message-color-fg-text-surface-default)}
1
+ .ids-fieldset{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0);line-height:1.5;display:flex;width:100%;flex-direction:column;align-items:flex-start;margin:0;border-width:0;border-style:unset;border-color:unset}.ids-fieldset::before,.ids-fieldset::after,.ids-fieldset *,.ids-fieldset ::before,.ids-fieldset ::after{box-sizing:border-box;border-width:0;border-style:none;border-color:rgba(0,0,0,0)}.ids-fieldset>.ids-fieldset-legend{display:flex;width:100%;align-items:stretch;font-style:normal;padding-inline-start:0;padding-inline-end:0}.ids-fieldset>.ids-fieldset-message{display:flex;width:100%;align-self:stretch;font-style:normal}.ids-fieldset>.ids-fieldset-row{display:flex;width:100%;align-items:center;align-self:stretch}.ids-fieldset.ids-fieldset-compact{padding:var(--ids-comp-forms-fieldset-size-padding-y-compact) var(--ids-comp-forms-fieldset-size-padding-x-compact);gap:var(--ids-comp-forms-fieldset-size-gap-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-compact);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-compact);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-compact);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-compact) var(--ids-comp-forms-message-size-padding-x-compact);gap:var(--ids-comp-forms-message-size-gap-compact);font-family:var(--ids-comp-forms-message-typography-font-family-compact);font-size:var(--ids-comp-forms-message-typography-font-size-compact);font-weight:var(--ids-comp-forms-message-typography-font-weight-compact);line-height:var(--ids-comp-forms-message-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-compact)}.ids-fieldset.ids-fieldset-compact>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-compact);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-compact) var(--ids-comp-forms-fieldset-row-size-padding-x-compact)}.ids-fieldset.ids-fieldset-comfortable{padding:var(--ids-comp-forms-fieldset-size-padding-y-comfortable) var(--ids-comp-forms-fieldset-size-padding-x-comfortable);gap:var(--ids-comp-forms-fieldset-size-gap-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-comfortable);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-comfortable) var(--ids-comp-forms-message-size-padding-x-comfortable);gap:var(--ids-comp-forms-message-size-gap-comfortable);font-family:var(--ids-comp-forms-message-typography-font-family-comfortable);font-size:var(--ids-comp-forms-message-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-message-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-message-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-comfortable)}.ids-fieldset.ids-fieldset-comfortable>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-comfortable);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-comfortable) var(--ids-comp-forms-fieldset-row-size-padding-x-comfortable)}.ids-fieldset.ids-fieldset-spacious{padding:var(--ids-comp-forms-fieldset-size-padding-y-spacious) var(--ids-comp-forms-fieldset-size-padding-x-spacious);gap:var(--ids-comp-forms-fieldset-size-gap-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-spacious);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-spacious);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-spacious);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-spacious) var(--ids-comp-forms-message-size-padding-x-spacious);gap:var(--ids-comp-forms-message-size-gap-spacious);font-family:var(--ids-comp-forms-message-typography-font-family-spacious);font-size:var(--ids-comp-forms-message-typography-font-size-spacious);font-weight:var(--ids-comp-forms-message-typography-font-weight-spacious);line-height:var(--ids-comp-forms-message-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-spacious)}.ids-fieldset.ids-fieldset-spacious>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-spacious);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-spacious) var(--ids-comp-forms-fieldset-row-size-padding-x-spacious)}.ids-fieldset.ids-fieldset-dense{padding:var(--ids-comp-forms-fieldset-size-padding-y-dense) var(--ids-comp-forms-fieldset-size-padding-x-dense);gap:var(--ids-comp-forms-fieldset-size-gap-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-legend{font-family:var(--ids-comp-forms-fieldset-legend-typography-font-family-dense);font-size:var(--ids-comp-forms-fieldset-legend-typography-font-size-dense);font-weight:var(--ids-comp-forms-fieldset-legend-typography-font-weight-dense);line-height:var(--ids-comp-forms-fieldset-legend-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-fieldset-legend-typography-letter-spacing-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-message{padding:var(--ids-comp-forms-message-size-padding-y-dense) var(--ids-comp-forms-message-size-padding-x-dense);gap:var(--ids-comp-forms-message-size-gap-dense);font-family:var(--ids-comp-forms-message-typography-font-family-dense);font-size:var(--ids-comp-forms-message-typography-font-size-dense);font-weight:var(--ids-comp-forms-message-typography-font-weight-dense);line-height:var(--ids-comp-forms-message-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-message-typography-letter-spacing-dense)}.ids-fieldset.ids-fieldset-dense>.ids-fieldset-row{gap:var(--ids-comp-forms-fieldset-row-size-gap-dense);padding:var(--ids-comp-forms-fieldset-row-size-padding-y-dense) var(--ids-comp-forms-fieldset-row-size-padding-x-dense)}.ids-fieldset.ids-fieldset-light>.ids-fieldset-legend{color:var(--ids-comp-forms-fieldset-legend-color-fg-text-light-default)}.ids-fieldset.ids-fieldset-light>.ids-fieldset-message{color:var(--ids-comp-forms-message-color-fg-text-light-default)}.ids-fieldset.ids-fieldset-surface>.ids-fieldset-legend{color:var(--ids-comp-forms-fieldset-legend-color-fg-text-surface-default)}.ids-fieldset.ids-fieldset-surface>.ids-fieldset-message{color:var(--ids-comp-forms-message-color-fg-text-surface-default)}
package/dist/form-elements/fieldset/fieldset.plugin.js CHANGED
@@ -3,14 +3,22 @@ module.exports = function FieldsetPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
5
  '.ids-fieldset': {
6
+ boxSizing: 'border-box',
7
+ borderWidth: ['0', '0'],
8
+ borderStyle: ['none', 'unset'],
9
+ borderColor: ['rgba(0,0,0,0)', 'unset'],
10
+ lineHeight: 1.5,
6
11
  display: 'flex',
7
12
  width: '100%',
8
13
  flexDirection: 'column',
9
14
  alignItems: 'flex-start',
10
15
  margin: '0',
16
+ },
17
+ '.ids-fieldset::before,.ids-fieldset::after,.ids-fieldset *,.ids-fieldset ::before,.ids-fieldset ::after': {
18
+ boxSizing: 'border-box',
11
19
  borderWidth: '0',
12
- borderStyle: 'unset',
13
- borderColor: 'unset',
20
+ borderStyle: 'none',
21
+ borderColor: 'rgba(0,0,0,0)',
14
22
  },
15
23
  '.ids-fieldset>.ids-fieldset-legend': {
16
24
  display: 'flex',
package/dist/form-elements/form-field/form-field.css CHANGED
@@ -1,8 +1,19 @@
1
1
  .ids-form-field {
2
+ box-sizing: border-box;
3
+ border-width: 0;
4
+ border-style: none;
5
+ border-color: transparent;
6
+ line-height: 1.5;
2
7
  display: inline-flex;
3
8
  flex-direction: column;
4
9
  align-items: flex-start;
5
10
  }
11
+ .ids-form-field::before, .ids-form-field::after, .ids-form-field *, .ids-form-field ::before, .ids-form-field ::after {
12
+ box-sizing: border-box;
13
+ border-width: 0;
14
+ border-style: none;
15
+ border-color: transparent;
16
+ }
6
17
  .ids-form-field > .ids-form-field__label {
7
18
  flex: 1 0;
8
19
  overflow: hidden;