@i-cell/ids-styles 0.0.15-beta.12 → 0.0.15-beta.13

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 (55) hide show
  1. package/dist/accordion/accordion.css +33 -25
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +37 -27
  4. package/dist/action-panel/action-panel.css +29 -34
  5. package/dist/action-panel/action-panel.min.css +1 -1
  6. package/dist/action-panel/action-panel.plugin.js +32 -36
  7. package/dist/avatar/avatar.css +23 -11
  8. package/dist/avatar/avatar.min.css +1 -1
  9. package/dist/avatar/avatar.plugin.js +23 -12
  10. package/dist/button/button.css +787 -655
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +791 -692
  13. package/dist/card/card.css +61 -35
  14. package/dist/card/card.min.css +1 -1
  15. package/dist/card/card.plugin.js +181 -126
  16. package/dist/checkbox/checkbox.css +26 -29
  17. package/dist/checkbox/checkbox.min.css +1 -1
  18. package/dist/checkbox/checkbox.plugin.js +49 -53
  19. package/dist/checkbox/pseudo-checkbox.css +22 -25
  20. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  21. package/dist/checkbox/pseudo-checkbox.plugin.js +41 -43
  22. package/dist/components.css +1458 -1214
  23. package/dist/components.min.css +1 -1
  24. package/dist/components.plugin.js +1831 -1612
  25. package/dist/dialog/dialog.css +12 -1
  26. package/dist/dialog/dialog.min.css +1 -1
  27. package/dist/dialog/dialog.plugin.js +11 -4
  28. package/dist/divider/divider.css +0 -8
  29. package/dist/divider/divider.min.css +1 -1
  30. package/dist/divider/divider.plugin.js +8 -32
  31. package/dist/icon-button/icon-button.css +118 -82
  32. package/dist/icon-button/icon-button.min.css +1 -1
  33. package/dist/icon-button/icon-button.plugin.js +243 -182
  34. package/dist/menu-item/menu-item.css +2 -2
  35. package/dist/menu-item/menu-item.min.css +1 -1
  36. package/dist/menu-item/menu-item.plugin.js +10 -8
  37. package/dist/paginator/paginator.css +22 -11
  38. package/dist/paginator/paginator.min.css +1 -1
  39. package/dist/paginator/paginator.plugin.js +22 -21
  40. package/dist/radio/radio.css +49 -49
  41. package/dist/radio/radio.min.css +1 -1
  42. package/dist/radio/radio.plugin.js +56 -61
  43. package/dist/segmented-control/segmented-control-toggle.css +25 -25
  44. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  45. package/dist/segmented-control/segmented-control-toggle.plugin.js +34 -45
  46. package/dist/segmented-control/segmented-control.css +25 -25
  47. package/dist/segmented-control/segmented-control.min.css +1 -1
  48. package/dist/segmented-control/segmented-control.plugin.js +75 -75
  49. package/dist/switch/switch.css +12 -12
  50. package/dist/switch/switch.min.css +1 -1
  51. package/dist/switch/switch.plugin.js +15 -18
  52. package/dist/tag/tag.css +212 -185
  53. package/dist/tag/tag.min.css +1 -1
  54. package/dist/tag/tag.plugin.js +211 -185
  55. package/package.json +4 -4
package/dist/accordion/accordion.css CHANGED
@@ -13,15 +13,11 @@
13
13
  border-style: solid;
14
14
  cursor: pointer;
15
15
  }
16
- .ids-accordion > .ids-accordion-summary:focus {
16
+ .ids-accordion > .ids-accordion-summary:focus, .ids-accordion > .ids-accordion-summary:focus-visible {
17
17
  outline-offset: 2px;
18
18
  outline-style: solid;
19
- outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline);
20
19
  outline-color: var(--ids-comp-accordion-summary-focused-outline-color-dark-focused);
21
20
  }
22
- .ids-theme-dark .ids-accordion > .ids-accordion-summary:focus {
23
- outline-color: var(--ids-comp-accordion-summary-focused-outline-color-light-focused);
24
- }
25
21
  .ids-accordion > .ids-accordion-summary > .ids-accordion-title {
26
22
  flex: 1 0 0;
27
23
  overflow: hidden;
@@ -49,6 +45,9 @@
49
45
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-compact);
50
46
  border-width: var(--ids-comp-accordion-summary-size-border-width-compact);
51
47
  }
48
+ .ids-accordion.ids-accordion-compact > .ids-accordion-summary:focus {
49
+ outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-compact);
50
+ }
52
51
  .ids-accordion.ids-accordion-compact > .ids-accordion-summary > .ids-accordion-title {
53
52
  font-family: var(--ids-comp-accordion-summary-typography-font-family-compact);
54
53
  font-size: var(--ids-comp-accordion-summary-typography-font-size-compact);
@@ -72,6 +71,9 @@
72
71
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-comfortable);
73
72
  border-width: var(--ids-comp-accordion-summary-size-border-width-comfortable);
74
73
  }
74
+ .ids-accordion.ids-accordion-comfortable > .ids-accordion-summary:focus {
75
+ outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable);
76
+ }
75
77
  .ids-accordion.ids-accordion-comfortable > .ids-accordion-summary > .ids-accordion-title {
76
78
  font-family: var(--ids-comp-accordion-summary-typography-font-family-comfortable);
77
79
  font-size: var(--ids-comp-accordion-summary-typography-font-size-comfortable);
@@ -95,6 +97,9 @@
95
97
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-spacious);
96
98
  border-width: var(--ids-comp-accordion-summary-size-border-width-spacious);
97
99
  }
100
+ .ids-accordion.ids-accordion-spacious > .ids-accordion-summary:focus {
101
+ outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious);
102
+ }
98
103
  .ids-accordion.ids-accordion-spacious > .ids-accordion-summary > .ids-accordion-title {
99
104
  font-family: var(--ids-comp-accordion-summary-typography-font-family-spacious);
100
105
  font-size: var(--ids-comp-accordion-summary-typography-font-size-spacious);
@@ -118,6 +123,9 @@
118
123
  border-radius: var(--ids-comp-accordion-summary-size-border-radius-dense);
119
124
  border-width: var(--ids-comp-accordion-summary-size-border-width-dense);
120
125
  }
126
+ .ids-accordion.ids-accordion-dense > .ids-accordion-summary:focus {
127
+ outline-width: var(--ids-comp-accordion-summary-focused-outline-size-outline-dense);
128
+ }
121
129
  .ids-accordion.ids-accordion-dense > .ids-accordion-summary > .ids-accordion-title {
122
130
  font-family: var(--ids-comp-accordion-summary-typography-font-family-dense);
123
131
  font-size: var(--ids-comp-accordion-summary-typography-font-size-dense);
@@ -139,20 +147,20 @@
139
147
  border-color: var(--ids-comp-accordion-summary-text-color-border-hovered);
140
148
  color: var(--ids-comp-accordion-summary-text-color-fg-label-hovered);
141
149
  }
142
- .ids-accordion.ids-accordion-text > .ids-accordion-summary:focus {
143
- background: var(--ids-comp-accordion-summary-text-color-bg-focused);
144
- border-color: var(--ids-comp-accordion-summary-text-color-border-focused);
145
- color: var(--ids-comp-accordion-summary-text-color-fg-label-focused);
150
+ .ids-accordion.ids-accordion-text > .ids-accordion-summary:focus, .ids-accordion.ids-accordion-text > .ids-accordion-summary:focus-visible {
151
+ background: var(--ids-comp-accordion-summary-text-color-bg-default);
152
+ border-color: var(--ids-comp-accordion-summary-text-color-border-default);
153
+ color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
146
154
  }
147
155
  .ids-accordion.ids-accordion-text > .ids-accordion-summary:active {
148
- background: var(--ids-comp-accordion-summary-text-color-bg-pressed);
149
- border-color: var(--ids-comp-accordion-summary-text-color-border-pressed);
150
- color: var(--ids-comp-accordion-summary-text-color-fg-label-pressed);
156
+ background: var(--ids-comp-accordion-summary-text-color-bg-default);
157
+ border-color: var(--ids-comp-accordion-summary-text-color-border-default);
158
+ color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
151
159
  }
152
160
  .ids-accordion.ids-accordion-text.ids-accordion-disabled > .ids-accordion-summary {
153
- background: var(--ids-comp-accordion-summary-text-color-bg-disabled);
154
- border-color: var(--ids-comp-accordion-summary-text-color-border-disabled);
155
- color: var(--ids-comp-accordion-summary-text-color-fg-label-disabled);
161
+ background: var(--ids-comp-accordion-summary-text-color-bg-default);
162
+ border-color: var(--ids-comp-accordion-summary-text-color-border-default);
163
+ color: var(--ids-comp-accordion-summary-text-color-fg-label-default);
156
164
  }
157
165
  .ids-accordion.ids-accordion-filled > .ids-accordion-summary {
158
166
  background: var(--ids-comp-accordion-summary-filled-color-bg-default);
@@ -164,18 +172,18 @@
164
172
  border-color: var(--ids-comp-accordion-summary-filled-color-border-hovered);
165
173
  color: var(--ids-comp-accordion-summary-filled-color-fg-label-hovered);
166
174
  }
167
- .ids-accordion.ids-accordion-filled > .ids-accordion-summary:focus {
168
- background: var(--ids-comp-accordion-summary-filled-color-bg-focused);
169
- border-color: var(--ids-comp-accordion-summary-filled-color-border-focused);
170
- color: var(--ids-comp-accordion-summary-filled-color-fg-label-focused);
175
+ .ids-accordion.ids-accordion-filled > .ids-accordion-summary:focus, .ids-accordion.ids-accordion-filled > .ids-accordion-summary:focus-visible {
176
+ background: var(--ids-comp-accordion-summary-filled-color-bg-default);
177
+ border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
178
+ color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
171
179
  }
172
180
  .ids-accordion.ids-accordion-filled > .ids-accordion-summary:active {
173
- background: var(--ids-comp-accordion-summary-filled-color-bg-pressed);
174
- border-color: var(--ids-comp-accordion-summary-filled-color-border-pressed);
175
- color: var(--ids-comp-accordion-summary-filled-color-fg-label-pressed);
181
+ background: var(--ids-comp-accordion-summary-filled-color-bg-default);
182
+ border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
183
+ color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
176
184
  }
177
185
  .ids-accordion.ids-accordion-filled.ids-accordion-disabled > .ids-accordion-summary {
178
- background: var(--ids-comp-accordion-summary-filled-color-bg-disabled);
179
- border-color: var(--ids-comp-accordion-summary-filled-color-border-disabled);
180
- color: var(--ids-comp-accordion-summary-filled-color-fg-label-disabled);
186
+ background: var(--ids-comp-accordion-summary-filled-color-bg-default);
187
+ border-color: var(--ids-comp-accordion-summary-filled-color-border-default);
188
+ color: var(--ids-comp-accordion-summary-filled-color-fg-label-default);
181
189
  }
package/dist/accordion/accordion.min.css CHANGED
@@ -1 +1 @@
1
- .ids-accordion{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:var(--ids-comp-accordion-item-color-bg-default)}.ids-accordion>.ids-accordion-summary{display:flex;align-items:center;width:100%;box-sizing:border-box;border-style:solid;cursor:pointer}.ids-accordion>.ids-accordion-summary:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline);outline-color:var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)}.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus{outline-color:var(--ids-comp-accordion-summary-focused-outline-color-light-focused)}.ids-accordion>.ids-accordion-summary>.ids-accordion-title{flex:1 0 0;overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-accordion.ids-accordion-disabled>.ids-accordion-summary{pointer-events:none;user-select:none}.ids-accordion>.ids-accordion-content{display:flex;flex-direction:column;background:var(--ids-comp-accordion-details-color-bg-default)}.ids-accordion.ids-accordion-compact{padding:var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact);gap:var(--ids-comp-accordion-item-size-gap-compact);border-radius:var(--ids-comp-accordion-item-size-border-radius-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-compact);padding:var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact);gap:var(--ids-comp-accordion-summary-size-gap-compact);border-radius:var(--ids-comp-accordion-summary-size-border-radius-compact);border-width:var(--ids-comp-accordion-summary-size-border-width-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-compact);font-size:var(--ids-comp-accordion-summary-typography-font-size-compact);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-compact);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-compact);line-height:var(--ids-comp-accordion-summary-typography-line-height-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact);gap:var(--ids-comp-accordion-details-size-gap-compact)}.ids-accordion.ids-accordion-comfortable{padding:var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable);gap:var(--ids-comp-accordion-item-size-gap-comfortable);border-radius:var(--ids-comp-accordion-item-size-border-radius-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-comfortable);padding:var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable);gap:var(--ids-comp-accordion-summary-size-gap-comfortable);border-radius:var(--ids-comp-accordion-summary-size-border-radius-comfortable);border-width:var(--ids-comp-accordion-summary-size-border-width-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-comfortable);font-size:var(--ids-comp-accordion-summary-typography-font-size-comfortable);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable);line-height:var(--ids-comp-accordion-summary-typography-line-height-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable);gap:var(--ids-comp-accordion-details-size-gap-comfortable)}.ids-accordion.ids-accordion-spacious{padding:var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious);gap:var(--ids-comp-accordion-item-size-gap-spacious);border-radius:var(--ids-comp-accordion-item-size-border-radius-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-spacious);padding:var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious);gap:var(--ids-comp-accordion-summary-size-gap-spacious);border-radius:var(--ids-comp-accordion-summary-size-border-radius-spacious);border-width:var(--ids-comp-accordion-summary-size-border-width-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-spacious);font-size:var(--ids-comp-accordion-summary-typography-font-size-spacious);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-spacious);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-spacious);line-height:var(--ids-comp-accordion-summary-typography-line-height-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious);gap:var(--ids-comp-accordion-details-size-gap-spacious)}.ids-accordion.ids-accordion-dense{padding:var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense);gap:var(--ids-comp-accordion-item-size-gap-dense);border-radius:var(--ids-comp-accordion-item-size-border-radius-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-dense);padding:var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense);gap:var(--ids-comp-accordion-summary-size-gap-dense);border-radius:var(--ids-comp-accordion-summary-size-border-radius-dense);border-width:var(--ids-comp-accordion-summary-size-border-width-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-dense);font-size:var(--ids-comp-accordion-summary-typography-font-size-dense);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-dense);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-dense);line-height:var(--ids-comp-accordion-summary-typography-line-height-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense);gap:var(--ids-comp-accordion-details-size-gap-dense)}.ids-accordion.ids-accordion-text>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-default);border-color:var(--ids-comp-accordion-summary-text-color-border-default);color:var(--ids-comp-accordion-summary-text-color-fg-label-default)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-text-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-text-color-border-hovered);color:var(--ids-comp-accordion-summary-text-color-fg-label-hovered)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-text-color-bg-focused);border-color:var(--ids-comp-accordion-summary-text-color-border-focused);color:var(--ids-comp-accordion-summary-text-color-fg-label-focused)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-text-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-text-color-border-pressed);color:var(--ids-comp-accordion-summary-text-color-fg-label-pressed)}.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-text-color-border-disabled);color:var(--ids-comp-accordion-summary-text-color-fg-label-disabled)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-default);border-color:var(--ids-comp-accordion-summary-filled-color-border-default);color:var(--ids-comp-accordion-summary-filled-color-fg-label-default)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-filled-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-filled-color-border-hovered);color:var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus{background:var(--ids-comp-accordion-summary-filled-color-bg-focused);border-color:var(--ids-comp-accordion-summary-filled-color-border-focused);color:var(--ids-comp-accordion-summary-filled-color-fg-label-focused)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-filled-color-bg-pressed);border-color:var(--ids-comp-accordion-summary-filled-color-border-pressed);color:var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)}.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-disabled);border-color:var(--ids-comp-accordion-summary-filled-color-border-disabled);color:var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)}
1
+ .ids-accordion{display:flex;flex-direction:column;align-items:flex-start;width:100%;background:var(--ids-comp-accordion-item-color-bg-default)}.ids-accordion>.ids-accordion-summary{display:flex;align-items:center;width:100%;box-sizing:border-box;border-style:solid;cursor:pointer}.ids-accordion>.ids-accordion-summary:focus,.ids-accordion>.ids-accordion-summary:focus-visible{outline-offset:2px;outline-style:solid;outline-color:var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)}.ids-accordion>.ids-accordion-summary>.ids-accordion-title{flex:1 0 0;overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-accordion.ids-accordion-disabled>.ids-accordion-summary{pointer-events:none;user-select:none}.ids-accordion>.ids-accordion-content{display:flex;flex-direction:column;background:var(--ids-comp-accordion-details-color-bg-default)}.ids-accordion.ids-accordion-compact{padding:var(--ids-comp-accordion-item-size-padding-y-compact) var(--ids-comp-accordion-item-size-padding-x-compact);gap:var(--ids-comp-accordion-item-size-gap-compact);border-radius:var(--ids-comp-accordion-item-size-border-radius-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-compact);padding:var(--ids-comp-accordion-summary-size-padding-y-compact) var(--ids-comp-accordion-summary-size-padding-x-compact);gap:var(--ids-comp-accordion-summary-size-gap-compact);border-radius:var(--ids-comp-accordion-summary-size-border-radius-compact);border-width:var(--ids-comp-accordion-summary-size-border-width-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary:focus{outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-compact);font-size:var(--ids-comp-accordion-summary-typography-font-size-compact);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-compact);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-compact);line-height:var(--ids-comp-accordion-summary-typography-line-height-compact)}.ids-accordion.ids-accordion-compact>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-compact) var(--ids-comp-accordion-details-size-padding-x-compact);gap:var(--ids-comp-accordion-details-size-gap-compact)}.ids-accordion.ids-accordion-comfortable{padding:var(--ids-comp-accordion-item-size-padding-y-comfortable) var(--ids-comp-accordion-item-size-padding-x-comfortable);gap:var(--ids-comp-accordion-item-size-gap-comfortable);border-radius:var(--ids-comp-accordion-item-size-border-radius-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-comfortable);padding:var(--ids-comp-accordion-summary-size-padding-y-comfortable) var(--ids-comp-accordion-summary-size-padding-x-comfortable);gap:var(--ids-comp-accordion-summary-size-gap-comfortable);border-radius:var(--ids-comp-accordion-summary-size-border-radius-comfortable);border-width:var(--ids-comp-accordion-summary-size-border-width-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary:focus{outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-comfortable);font-size:var(--ids-comp-accordion-summary-typography-font-size-comfortable);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-comfortable);line-height:var(--ids-comp-accordion-summary-typography-line-height-comfortable)}.ids-accordion.ids-accordion-comfortable>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-comfortable) var(--ids-comp-accordion-details-size-padding-x-comfortable);gap:var(--ids-comp-accordion-details-size-gap-comfortable)}.ids-accordion.ids-accordion-spacious{padding:var(--ids-comp-accordion-item-size-padding-y-spacious) var(--ids-comp-accordion-item-size-padding-x-spacious);gap:var(--ids-comp-accordion-item-size-gap-spacious);border-radius:var(--ids-comp-accordion-item-size-border-radius-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-spacious);padding:var(--ids-comp-accordion-summary-size-padding-y-spacious) var(--ids-comp-accordion-summary-size-padding-x-spacious);gap:var(--ids-comp-accordion-summary-size-gap-spacious);border-radius:var(--ids-comp-accordion-summary-size-border-radius-spacious);border-width:var(--ids-comp-accordion-summary-size-border-width-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary:focus{outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-spacious);font-size:var(--ids-comp-accordion-summary-typography-font-size-spacious);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-spacious);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-spacious);line-height:var(--ids-comp-accordion-summary-typography-line-height-spacious)}.ids-accordion.ids-accordion-spacious>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-spacious) var(--ids-comp-accordion-details-size-padding-x-spacious);gap:var(--ids-comp-accordion-details-size-gap-spacious)}.ids-accordion.ids-accordion-dense{padding:var(--ids-comp-accordion-item-size-padding-y-dense) var(--ids-comp-accordion-item-size-padding-x-dense);gap:var(--ids-comp-accordion-item-size-gap-dense);border-radius:var(--ids-comp-accordion-item-size-border-radius-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary{height:var(--ids-comp-accordion-summary-size-height-dense);padding:var(--ids-comp-accordion-summary-size-padding-y-dense) var(--ids-comp-accordion-summary-size-padding-x-dense);gap:var(--ids-comp-accordion-summary-size-gap-dense);border-radius:var(--ids-comp-accordion-summary-size-border-radius-dense);border-width:var(--ids-comp-accordion-summary-size-border-width-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary:focus{outline-width:var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title{font-family:var(--ids-comp-accordion-summary-typography-font-family-dense);font-size:var(--ids-comp-accordion-summary-typography-font-size-dense);font-weight:var(--ids-comp-accordion-summary-typography-font-weight-dense);letter-spacing:var(--ids-comp-accordion-summary-typography-letter-spacing-dense);line-height:var(--ids-comp-accordion-summary-typography-line-height-dense)}.ids-accordion.ids-accordion-dense>.ids-accordion-content{padding:var(--ids-comp-accordion-details-size-padding-y-dense) var(--ids-comp-accordion-details-size-padding-x-dense);gap:var(--ids-comp-accordion-details-size-gap-dense)}.ids-accordion.ids-accordion-text>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-default);border-color:var(--ids-comp-accordion-summary-text-color-border-default);color:var(--ids-comp-accordion-summary-text-color-fg-label-default)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-text-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-text-color-border-hovered);color:var(--ids-comp-accordion-summary-text-color-fg-label-hovered)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus,.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus-visible{background:var(--ids-comp-accordion-summary-text-color-bg-default);border-color:var(--ids-comp-accordion-summary-text-color-border-default);color:var(--ids-comp-accordion-summary-text-color-fg-label-default)}.ids-accordion.ids-accordion-text>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-text-color-bg-default);border-color:var(--ids-comp-accordion-summary-text-color-border-default);color:var(--ids-comp-accordion-summary-text-color-fg-label-default)}.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-text-color-bg-default);border-color:var(--ids-comp-accordion-summary-text-color-border-default);color:var(--ids-comp-accordion-summary-text-color-fg-label-default)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-default);border-color:var(--ids-comp-accordion-summary-filled-color-border-default);color:var(--ids-comp-accordion-summary-filled-color-fg-label-default)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:hover{background:var(--ids-comp-accordion-summary-filled-color-bg-hovered);border-color:var(--ids-comp-accordion-summary-filled-color-border-hovered);color:var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus,.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus-visible{background:var(--ids-comp-accordion-summary-filled-color-bg-default);border-color:var(--ids-comp-accordion-summary-filled-color-border-default);color:var(--ids-comp-accordion-summary-filled-color-fg-label-default)}.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active{background:var(--ids-comp-accordion-summary-filled-color-bg-default);border-color:var(--ids-comp-accordion-summary-filled-color-border-default);color:var(--ids-comp-accordion-summary-filled-color-fg-label-default)}.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary{background:var(--ids-comp-accordion-summary-filled-color-bg-default);border-color:var(--ids-comp-accordion-summary-filled-color-border-default);color:var(--ids-comp-accordion-summary-filled-color-fg-label-default)}
package/dist/accordion/accordion.plugin.js CHANGED
@@ -17,15 +17,11 @@ module.exports = function AccordionPlugin() {
17
17
  borderStyle: 'solid',
18
18
  cursor: 'pointer',
19
19
  },
20
- '.ids-accordion>.ids-accordion-summary:focus': {
20
+ '.ids-accordion>.ids-accordion-summary:focus,.ids-accordion>.ids-accordion-summary:focus-visible': {
21
21
  outlineOffset: '2px',
22
22
  outlineStyle: 'solid',
23
- outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline)',
24
23
  outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-dark-focused)',
25
24
  },
26
- '.ids-theme-dark .ids-accordion>.ids-accordion-summary:focus': {
27
- outlineColor: 'var(--ids-comp-accordion-summary-focused-outline-color-light-focused)',
28
- },
29
25
  '.ids-accordion>.ids-accordion-summary>.ids-accordion-title': {
30
26
  flex: '1 0 0',
31
27
  overflow: 'hidden',
@@ -50,6 +46,9 @@ module.exports = function AccordionPlugin() {
50
46
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-compact)',
51
47
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-compact)',
52
48
  },
49
+ '.ids-accordion.ids-accordion-compact>.ids-accordion-summary:focus': {
50
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-compact)',
51
+ },
53
52
  '.ids-accordion.ids-accordion-compact>.ids-accordion-summary>.ids-accordion-title': {
54
53
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-compact)',
55
54
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-compact)',
@@ -74,6 +73,9 @@ module.exports = function AccordionPlugin() {
74
73
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-comfortable)',
75
74
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-comfortable)',
76
75
  },
76
+ '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary:focus': {
77
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-comfortable)',
78
+ },
77
79
  '.ids-accordion.ids-accordion-comfortable>.ids-accordion-summary>.ids-accordion-title': {
78
80
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-comfortable)',
79
81
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-comfortable)',
@@ -98,6 +100,9 @@ module.exports = function AccordionPlugin() {
98
100
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-spacious)',
99
101
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-spacious)',
100
102
  },
103
+ '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary:focus': {
104
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-spacious)',
105
+ },
101
106
  '.ids-accordion.ids-accordion-spacious>.ids-accordion-summary>.ids-accordion-title': {
102
107
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-spacious)',
103
108
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-spacious)',
@@ -121,6 +126,9 @@ module.exports = function AccordionPlugin() {
121
126
  borderRadius: 'var(--ids-comp-accordion-summary-size-border-radius-dense)',
122
127
  borderWidth: 'var(--ids-comp-accordion-summary-size-border-width-dense)',
123
128
  },
129
+ '.ids-accordion.ids-accordion-dense>.ids-accordion-summary:focus': {
130
+ outlineWidth: 'var(--ids-comp-accordion-summary-focused-outline-size-outline-dense)',
131
+ },
124
132
  '.ids-accordion.ids-accordion-dense>.ids-accordion-summary>.ids-accordion-title': {
125
133
  fontFamily: 'var(--ids-comp-accordion-summary-typography-font-family-dense)',
126
134
  fontSize: 'var(--ids-comp-accordion-summary-typography-font-size-dense)',
@@ -142,20 +150,21 @@ module.exports = function AccordionPlugin() {
142
150
  borderColor: 'var(--ids-comp-accordion-summary-text-color-border-hovered)',
143
151
  color: 'var(--ids-comp-accordion-summary-text-color-fg-label-hovered)',
144
152
  },
145
- '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus': {
146
- background: 'var(--ids-comp-accordion-summary-text-color-bg-focused)',
147
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-focused)',
148
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-focused)',
149
- },
153
+ '.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus,.ids-accordion.ids-accordion-text>.ids-accordion-summary:focus-visible':
154
+ {
155
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
156
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
157
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
158
+ },
150
159
  '.ids-accordion.ids-accordion-text>.ids-accordion-summary:active': {
151
- background: 'var(--ids-comp-accordion-summary-text-color-bg-pressed)',
152
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-pressed)',
153
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-pressed)',
160
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
161
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
162
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
154
163
  },
155
164
  '.ids-accordion.ids-accordion-text.ids-accordion-disabled>.ids-accordion-summary': {
156
- background: 'var(--ids-comp-accordion-summary-text-color-bg-disabled)',
157
- borderColor: 'var(--ids-comp-accordion-summary-text-color-border-disabled)',
158
- color: 'var(--ids-comp-accordion-summary-text-color-fg-label-disabled)',
165
+ background: 'var(--ids-comp-accordion-summary-text-color-bg-default)',
166
+ borderColor: 'var(--ids-comp-accordion-summary-text-color-border-default)',
167
+ color: 'var(--ids-comp-accordion-summary-text-color-fg-label-default)',
159
168
  },
160
169
  '.ids-accordion.ids-accordion-filled>.ids-accordion-summary': {
161
170
  background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
@@ -167,20 +176,21 @@ module.exports = function AccordionPlugin() {
167
176
  borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-hovered)',
168
177
  color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-hovered)',
169
178
  },
170
- '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus': {
171
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-focused)',
172
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-focused)',
173
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-focused)',
174
- },
179
+ '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus,.ids-accordion.ids-accordion-filled>.ids-accordion-summary:focus-visible':
180
+ {
181
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
182
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
183
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
184
+ },
175
185
  '.ids-accordion.ids-accordion-filled>.ids-accordion-summary:active': {
176
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-pressed)',
177
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-pressed)',
178
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-pressed)',
186
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
187
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
188
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
179
189
  },
180
190
  '.ids-accordion.ids-accordion-filled.ids-accordion-disabled>.ids-accordion-summary': {
181
- background: 'var(--ids-comp-accordion-summary-filled-color-bg-disabled)',
182
- borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-disabled)',
183
- color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-disabled)',
191
+ background: 'var(--ids-comp-accordion-summary-filled-color-bg-default)',
192
+ borderColor: 'var(--ids-comp-accordion-summary-filled-color-border-default)',
193
+ color: 'var(--ids-comp-accordion-summary-filled-color-fg-label-default)',
184
194
  },
185
195
  };
186
196
 
package/dist/action-panel/action-panel.css CHANGED
@@ -1,65 +1,64 @@
1
1
  .ids-action-panel {
2
2
  display: flex;
3
- width: 22.25rem;
4
3
  flex-direction: column;
5
4
  align-items: flex-start;
6
5
  box-sizing: border-box;
7
6
  }
8
7
  .ids-action-panel.ids-action-panel-compact {
9
- gap: var(--ids-comp-action-panel-size-gap-compact);
10
- padding: var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact);
11
- border-radius: var(--ids-comp-action-panel-size-border-radius-compact);
8
+ gap: var(--ids-comp-overlay-panel-size-gap-compact);
9
+ padding: var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);
10
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-compact);
12
11
  }
13
12
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined {
14
- border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default);
13
+ border: var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-filled-color-border-light-default);
15
14
  }
16
15
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined {
17
- border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
16
+ border: var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default);
18
17
  }
19
18
  .ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined {
20
- border: var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
19
+ border: var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default);
21
20
  }
22
21
  .ids-action-panel.ids-action-panel-comfortable {
23
- gap: var(--ids-comp-action-panel-size-gap-comfortable);
24
- padding: var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable);
25
- border-radius: var(--ids-comp-action-panel-size-border-radius-comfortable);
22
+ gap: var(--ids-comp-overlay-panel-size-gap-comfortable);
23
+ padding: var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);
24
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-comfortable);
26
25
  }
27
26
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined {
28
- border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default);
27
+ border: var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-filled-color-border-light-default);
29
28
  }
30
29
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined {
31
- border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
30
+ border: var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default);
32
31
  }
33
32
  .ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined {
34
- border: var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
33
+ border: var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default);
35
34
  }
36
35
  .ids-action-panel.ids-action-panel-spacious {
37
- gap: var(--ids-comp-action-panel-size-gap-spacious);
38
- padding: var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious);
39
- border-radius: var(--ids-comp-action-panel-size-border-radius-spacious);
36
+ gap: var(--ids-comp-overlay-panel-size-gap-spacious);
37
+ padding: var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);
38
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-spacious);
40
39
  }
41
40
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined {
42
- border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default);
41
+ border: var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-filled-color-border-light-default);
43
42
  }
44
43
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined {
45
- border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
44
+ border: var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default);
46
45
  }
47
46
  .ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined {
48
- border: var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
47
+ border: var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default);
49
48
  }
50
49
  .ids-action-panel.ids-action-panel-dense {
51
- gap: var(--ids-comp-action-panel-size-gap-dense);
52
- padding: var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense);
53
- border-radius: var(--ids-comp-action-panel-size-border-radius-dense);
50
+ gap: var(--ids-comp-overlay-panel-size-gap-dense);
51
+ padding: var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);
52
+ border-radius: var(--ids-comp-overlay-panel-size-border-radius-dense);
54
53
  }
55
54
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined {
56
- border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default);
55
+ border: var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-filled-color-border-light-default);
57
56
  }
58
57
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined {
59
- border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default);
58
+ border: var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default);
60
59
  }
61
60
  .ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined {
62
- border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
61
+ border: var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default);
63
62
  }
64
63
  .ids-action-panel.ids-action-panel-filled {
65
64
  box-shadow: none;
@@ -71,21 +70,17 @@
71
70
  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);
72
71
  }
73
72
  .ids-action-panel.ids-action-panel-filled {
74
- background: var(--ids-comp-action-panel-filled-color-bg-light-default);
73
+ background: var(--ids-comp-overlay-panel-filled-color-bg-light-default);
75
74
  }
76
75
  .ids-action-panel.ids-action-panel-outlined {
77
- background: var(--ids-comp-action-panel-outlined-color-bg-light-default);
76
+ background: var(--ids-comp-overlay-panel-outlined-color-bg-light-default);
78
77
  }
79
78
  .ids-action-panel.ids-action-panel-elevated {
80
- background: var(--ids-comp-action-panel-elevated-color-bg-light-default);
79
+ background: var(--ids-comp-overlay-panel-elevated-color-bg-light-default);
81
80
  }
82
81
  .ids-action-panel button:hover {
83
82
  border-color: transparent;
84
83
  }
85
- .ids-action-panel button:focus {
86
- outline: none !important;
87
- }
88
-
89
- .cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel) {
90
- @apply py-3;
84
+ .ids-action-panel button:focus, .ids-action-panel button:focus-visible {
85
+ outline-style: none !important;
91
86
  }
package/dist/action-panel/action-panel.min.css CHANGED
@@ -1 +1 @@
1
- .ids-action-panel{display:flex;width:22.25rem;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-action-panel.ids-action-panel-compact{gap:var(--ids-comp-action-panel-size-gap-compact);padding:var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact);border-radius:var(--ids-comp-action-panel-size-border-radius-compact)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable{gap:var(--ids-comp-action-panel-size-gap-comfortable);padding:var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-action-panel-size-border-radius-comfortable)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious{gap:var(--ids-comp-action-panel-size-gap-spacious);padding:var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious);border-radius:var(--ids-comp-action-panel-size-border-radius-spacious)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-dense{gap:var(--ids-comp-action-panel-size-gap-dense);padding:var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense);border-radius:var(--ids-comp-action-panel-size-border-radius-dense)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-filled{box-shadow:none}.ids-action-panel.ids-action-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-action-panel.ids-action-panel-elevated{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-action-panel.ids-action-panel-filled{background:var(--ids-comp-action-panel-filled-color-bg-light-default)}.ids-action-panel.ids-action-panel-outlined{background:var(--ids-comp-action-panel-outlined-color-bg-light-default)}.ids-action-panel.ids-action-panel-elevated{background:var(--ids-comp-action-panel-elevated-color-bg-light-default)}.ids-action-panel button:hover{border-color:rgba(0,0,0,0)}.ids-action-panel button:focus{outline:none !important}.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel){@apply py-3}
1
+ .ids-action-panel{display:flex;flex-direction:column;align-items:flex-start;box-sizing:border-box}.ids-action-panel.ids-action-panel-compact{gap:var(--ids-comp-overlay-panel-size-gap-compact);padding:var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact);border-radius:var(--ids-comp-overlay-panel-size-border-radius-compact)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable{gap:var(--ids-comp-overlay-panel-size-gap-comfortable);padding:var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable);border-radius:var(--ids-comp-overlay-panel-size-border-radius-comfortable)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious{gap:var(--ids-comp-overlay-panel-size-gap-spacious);padding:var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious);border-radius:var(--ids-comp-overlay-panel-size-border-radius-spacious)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-dense{gap:var(--ids-comp-overlay-panel-size-gap-dense);padding:var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense);border-radius:var(--ids-comp-overlay-panel-size-border-radius-dense)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)}.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined{border:var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)}.ids-action-panel.ids-action-panel-filled{box-shadow:none}.ids-action-panel.ids-action-panel-outlined{box-shadow:var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)}.ids-action-panel.ids-action-panel-elevated{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-action-panel.ids-action-panel-filled{background:var(--ids-comp-overlay-panel-filled-color-bg-light-default)}.ids-action-panel.ids-action-panel-outlined{background:var(--ids-comp-overlay-panel-outlined-color-bg-light-default)}.ids-action-panel.ids-action-panel-elevated{background:var(--ids-comp-overlay-panel-elevated-color-bg-light-default)}.ids-action-panel button:hover{border-color:rgba(0,0,0,0)}.ids-action-panel button:focus,.ids-action-panel button:focus-visible{outline-style:none !important}
package/dist/action-panel/action-panel.plugin.js CHANGED
@@ -2,88 +2,84 @@
2
2
  module.exports = function ActionPanelPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-action-panel': {
6
- display: 'flex',
7
- width: '22.25rem',
8
- flexDirection: 'column',
9
- alignItems: 'flex-start',
10
- boxSizing: 'border-box',
11
- },
5
+ '.ids-action-panel': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', boxSizing: 'border-box' },
12
6
  '.ids-action-panel.ids-action-panel-compact': {
13
- gap: 'var(--ids-comp-action-panel-size-gap-compact)',
14
- padding: 'var(--ids-comp-action-panel-size-padding-y-compact) var(--ids-comp-action-panel-size-padding-x-compact)',
15
- borderRadius: 'var(--ids-comp-action-panel-size-border-radius-compact)',
7
+ gap: 'var(--ids-comp-overlay-panel-size-gap-compact)',
8
+ padding: 'var(--ids-comp-overlay-panel-size-padding-y-compact) var(--ids-comp-overlay-panel-size-padding-x-compact)',
9
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-compact)',
16
10
  },
17
11
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-filled.ids-action-panel-outlined': {
18
- border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
12
+ border: 'var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)',
19
13
  },
20
14
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-outlined.ids-action-panel-outlined': {
21
- border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
15
+ border: 'var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)',
22
16
  },
23
17
  '.ids-action-panel.ids-action-panel-compact.ids-action-panel-elevated.ids-action-panel-outlined': {
24
- border: 'var(--ids-comp-action-panel-size-border-compact) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
18
+ border: 'var(--ids-comp-overlay-panel-size-border-compact) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)',
25
19
  },
26
20
  '.ids-action-panel.ids-action-panel-comfortable': {
27
- gap: 'var(--ids-comp-action-panel-size-gap-comfortable)',
28
- padding: 'var(--ids-comp-action-panel-size-padding-y-comfortable) var(--ids-comp-action-panel-size-padding-x-comfortable)',
29
- borderRadius: 'var(--ids-comp-action-panel-size-border-radius-comfortable)',
21
+ gap: 'var(--ids-comp-overlay-panel-size-gap-comfortable)',
22
+ padding: 'var(--ids-comp-overlay-panel-size-padding-y-comfortable) var(--ids-comp-overlay-panel-size-padding-x-comfortable)',
23
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-comfortable)',
30
24
  },
31
25
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-filled.ids-action-panel-outlined': {
32
- border: 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
26
+ border:
27
+ 'var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)',
33
28
  },
34
29
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-outlined.ids-action-panel-outlined': {
35
30
  border:
36
- 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
31
+ 'var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)',
37
32
  },
38
33
  '.ids-action-panel.ids-action-panel-comfortable.ids-action-panel-elevated.ids-action-panel-outlined': {
39
34
  border:
40
- 'var(--ids-comp-action-panel-size-border-comfortable) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
35
+ 'var(--ids-comp-overlay-panel-size-border-comfortable) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)',
41
36
  },
42
37
  '.ids-action-panel.ids-action-panel-spacious': {
43
- gap: 'var(--ids-comp-action-panel-size-gap-spacious)',
44
- padding: 'var(--ids-comp-action-panel-size-padding-y-spacious) var(--ids-comp-action-panel-size-padding-x-spacious)',
45
- borderRadius: 'var(--ids-comp-action-panel-size-border-radius-spacious)',
38
+ gap: 'var(--ids-comp-overlay-panel-size-gap-spacious)',
39
+ padding: 'var(--ids-comp-overlay-panel-size-padding-y-spacious) var(--ids-comp-overlay-panel-size-padding-x-spacious)',
40
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-spacious)',
46
41
  },
47
42
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-filled.ids-action-panel-outlined': {
48
- border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
43
+ border: 'var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)',
49
44
  },
50
45
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-outlined.ids-action-panel-outlined': {
51
- border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
46
+ border:
47
+ 'var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)',
52
48
  },
53
49
  '.ids-action-panel.ids-action-panel-spacious.ids-action-panel-elevated.ids-action-panel-outlined': {
54
- border: 'var(--ids-comp-action-panel-size-border-spacious) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
50
+ border:
51
+ 'var(--ids-comp-overlay-panel-size-border-spacious) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)',
55
52
  },
56
53
  '.ids-action-panel.ids-action-panel-dense': {
57
- gap: 'var(--ids-comp-action-panel-size-gap-dense)',
58
- padding: 'var(--ids-comp-action-panel-size-padding-y-dense) var(--ids-comp-action-panel-size-padding-x-dense)',
59
- borderRadius: 'var(--ids-comp-action-panel-size-border-radius-dense)',
54
+ gap: 'var(--ids-comp-overlay-panel-size-gap-dense)',
55
+ padding: 'var(--ids-comp-overlay-panel-size-padding-y-dense) var(--ids-comp-overlay-panel-size-padding-x-dense)',
56
+ borderRadius: 'var(--ids-comp-overlay-panel-size-border-radius-dense)',
60
57
  },
61
58
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-filled.ids-action-panel-outlined': {
62
- border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-filled-color-border-light-default)',
59
+ border: 'var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-filled-color-border-light-default)',
63
60
  },
64
61
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-outlined.ids-action-panel-outlined': {
65
- border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-outlined-color-border-light-default)',
62
+ border: 'var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-outlined-color-border-light-default)',
66
63
  },
67
64
  '.ids-action-panel.ids-action-panel-dense.ids-action-panel-elevated.ids-action-panel-outlined': {
68
- border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
65
+ border: 'var(--ids-comp-overlay-panel-size-border-dense) solid var(--ids-comp-overlay-panel-elevated-color-border-light-default)',
69
66
  },
70
67
  '.ids-action-panel.ids-action-panel-filled': {
71
68
  boxShadow: 'none',
72
- background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
69
+ background: 'var(--ids-comp-overlay-panel-filled-color-bg-light-default)',
73
70
  },
74
71
  '.ids-action-panel.ids-action-panel-outlined': {
75
72
  boxShadow:
76
73
  'var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xxs) var(--ids-smc-reference-container-effects-shadow-blur-xxs) var(--ids-smc-reference-container-effects-shadow-spread-none) var(--ids-smc-reference-container-effects-shadow-color-dark-lighter)',
77
- background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
74
+ background: 'var(--ids-comp-overlay-panel-outlined-color-bg-light-default)',
78
75
  },
79
76
  '.ids-action-panel.ids-action-panel-elevated': {
80
77
  boxShadow:
81
78
  '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)',
82
- background: 'var(--ids-comp-action-panel-elevated-color-bg-light-default)',
79
+ background: 'var(--ids-comp-overlay-panel-elevated-color-bg-light-default)',
83
80
  },
84
81
  '.ids-action-panel button:hover': { borderColor: 'rgba(0,0,0,0)' },
85
- '.ids-action-panel button:focus': { outline: 'none !important' },
86
- '.cdk-overlay-connected-position-bounding-box:first-of-type .cdk-overlay-pane:has(.ids-action-panel)': { '@apply py-3': true },
82
+ '.ids-action-panel button:focus,.ids-action-panel button:focus-visible': { outlineStyle: 'none !important' },
87
83
  };
88
84
 
89
85
  addComponents(cssObj);