@i-cell/ids-styles 0.0.6 → 0.0.8

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 (34) hide show
  1. package/dist/action-item/action-item.css +6 -0
  2. package/dist/action-item/action-item.min.css +1 -1
  3. package/dist/action-item/action-item.plugin.js +2 -0
  4. package/dist/action-panel/action-panel.css +2 -2
  5. package/dist/action-panel/action-panel.min.css +1 -1
  6. package/dist/action-panel/action-panel.plugin.js +3 -2
  7. package/dist/avatar/avatar.css +6 -0
  8. package/dist/avatar/avatar.min.css +1 -1
  9. package/dist/avatar/avatar.plugin.js +2 -0
  10. package/dist/button/button.css +6 -0
  11. package/dist/button/button.min.css +1 -1
  12. package/dist/button/button.plugin.js +2 -0
  13. package/dist/checkbox/checkbox.css +5 -0
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +5 -0
  16. package/dist/components.css +248 -106
  17. package/dist/components.min.css +1 -1
  18. package/dist/components.plugin.js +216 -106
  19. package/dist/icon-button/icon-button.css +6 -0
  20. package/dist/icon-button/icon-button.min.css +1 -1
  21. package/dist/icon-button/icon-button.plugin.js +2 -0
  22. package/dist/paginator/paginator.css +6 -0
  23. package/dist/paginator/paginator.min.css +1 -1
  24. package/dist/paginator/paginator.plugin.js +2 -0
  25. package/dist/segmented-control/segmented-control-toggle.css +102 -56
  26. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  27. package/dist/segmented-control/segmented-control-toggle.plugin.js +98 -56
  28. package/dist/segmented-control/segmented-control.css +102 -48
  29. package/dist/segmented-control/segmented-control.min.css +1 -1
  30. package/dist/segmented-control/segmented-control.plugin.js +98 -48
  31. package/dist/tag/tag.css +7 -0
  32. package/dist/tag/tag.min.css +1 -1
  33. package/dist/tag/tag.plugin.js +2 -0
  34. package/package.json +1 -1
package/dist/action-item/action-item.css CHANGED
@@ -10,6 +10,12 @@
10
10
  text-overflow: ellipsis;
11
11
  font-style: normal;
12
12
  }
13
+ .ids-action-item:not(:disabled) {
14
+ cursor: pointer;
15
+ }
16
+ .ids-action-item:disabled {
17
+ cursor: not-allowed;
18
+ }
13
19
  .ids-action-item *[icon-leading],
14
20
  .ids-action-item *[icon-trailing] {
15
21
  gap: 10px;
package/dist/action-item/action-item.min.css CHANGED
@@ -1 +1 @@
1
- .ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-action-item-size-gap-compact);border-radius:var(--ids-comp-action-item-size-border-radius-compact);padding:var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);height:var(--ids-comp-action-item-size-height-compact);font-family:var(--ids-comp-action-item-label-typography-font-family-compact);font-size:var(--ids-comp-action-item-label-typography-font-size-compact);font-weight:var(--ids-comp-action-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-action-item-label-typography-line-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-compact);height:var(--ids-comp-action-item-size-icon-compact)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-action-item-size-gap-comfortable);border-radius:var(--ids-comp-action-item-size-border-radius-comfortable);padding:var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);height:var(--ids-comp-action-item-size-height-comfortable);font-family:var(--ids-comp-action-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-action-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-action-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-action-item-label-typography-line-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-comfortable);height:var(--ids-comp-action-item-size-icon-comfortable)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-action-item-size-gap-spacious);border-radius:var(--ids-comp-action-item-size-border-radius-spacious);padding:var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);height:var(--ids-comp-action-item-size-height-spacious);font-family:var(--ids-comp-action-item-label-typography-font-family-spacious);font-size:var(--ids-comp-action-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-action-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-action-item-label-typography-line-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-spacious);height:var(--ids-comp-action-item-size-icon-spacious)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-default);background:var(--ids-comp-action-item-text-color-bg-surface-default)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-default);background:var(--ids-comp-action-item-filled-color-bg-surface-default)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}
1
+ .ids-action-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-action-item .ids-action-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-action-item:not(:disabled){cursor:pointer}.ids-action-item:disabled{cursor:not-allowed}.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-action-item.ids-action-item-compact{gap:var(--ids-comp-action-item-size-gap-compact);border-radius:var(--ids-comp-action-item-size-border-radius-compact);padding:var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);height:var(--ids-comp-action-item-size-height-compact);font-family:var(--ids-comp-action-item-label-typography-font-family-compact);font-size:var(--ids-comp-action-item-label-typography-font-size-compact);font-weight:var(--ids-comp-action-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-action-item-label-typography-line-height-compact)}.ids-action-item.ids-action-item-compact *[icon-leading],.ids-action-item.ids-action-item-compact *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-compact);height:var(--ids-comp-action-item-size-icon-compact)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-compact);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable{gap:var(--ids-comp-action-item-size-gap-comfortable);border-radius:var(--ids-comp-action-item-size-border-radius-comfortable);padding:var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);height:var(--ids-comp-action-item-size-height-comfortable);font-family:var(--ids-comp-action-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-action-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-action-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-action-item-label-typography-line-height-comfortable)}.ids-action-item.ids-action-item-comfortable *[icon-leading],.ids-action-item.ids-action-item-comfortable *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-comfortable);height:var(--ids-comp-action-item-size-icon-comfortable)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-comfortable);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious{gap:var(--ids-comp-action-item-size-gap-spacious);border-radius:var(--ids-comp-action-item-size-border-radius-spacious);padding:var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);height:var(--ids-comp-action-item-size-height-spacious);font-family:var(--ids-comp-action-item-label-typography-font-family-spacious);font-size:var(--ids-comp-action-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-action-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-action-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-action-item-label-typography-line-height-spacious)}.ids-action-item.ids-action-item-spacious *[icon-leading],.ids-action-item.ids-action-item-spacious *[icon-trailing]{width:var(--ids-comp-action-item-size-icon-spacious);height:var(--ids-comp-action-item-size-icon-spacious)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-text-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-text-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-text-color-border-surface-disabled)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface{border-style:solid;border-width:var(--ids-comp-action-item-size-border-width-spacious);border-color:var(--ids-comp-action-item-filled-color-border-surface-default)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover{border-color:var(--ids-comp-action-item-filled-color-border-surface-hovered)}.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled{border-color:var(--ids-comp-action-item-filled-color-border-surface-disabled)}.ids-action-item.ids-action-item-text.ids-action-item-surface{color:var(--ids-comp-action-item-text-color-fg-label-surface-default);background:var(--ids-comp-action-item-text-color-bg-surface-default)}.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-text-color-fg-label-surface-active);background:var(--ids-comp-action-item-text-color-bg-surface-active)}.ids-action-item.ids-action-item-text.ids-action-item-surface:hover{color:var(--ids-comp-action-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-text-color-bg-surface-hovered)}.ids-action-item.ids-action-item-text.ids-action-item-surface:focus{color:var(--ids-comp-action-item-text-color-fg-label-surface-focused);background:var(--ids-comp-action-item-text-color-bg-surface-focused)}.ids-action-item.ids-action-item-text.ids-action-item-surface:active{background:var(--ids-comp-action-item-text-color-bg-surface-pressed)}.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-text-color-bg-surface-disabled)}.ids-action-item.ids-action-item-filled.ids-action-item-surface{color:var(--ids-comp-action-item-filled-color-fg-label-surface-default);background:var(--ids-comp-action-item-filled-color-bg-surface-default)}.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active{color:var(--ids-comp-action-item-filled-color-fg-label-surface-active);background:var(--ids-comp-action-item-filled-color-bg-surface-active)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover{color:var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-action-item-filled-color-bg-surface-hovered)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus{color:var(--ids-comp-action-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-action-item-filled-color-bg-surface-focused)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:active{background:var(--ids-comp-action-item-filled-color-bg-surface-pressed)}.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled{color:var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-action-item-filled-color-bg-surface-disabled)}
package/dist/action-item/action-item.plugin.js CHANGED
@@ -4,6 +4,8 @@ module.exports = function ActionItemPlugin() {
4
4
  const cssObj = {
5
5
  '.ids-action-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
6
6
  '.ids-action-item .ids-action-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
7
+ '.ids-action-item:not(:disabled)': { cursor: 'pointer' },
8
+ '.ids-action-item:disabled': { cursor: 'not-allowed' },
7
9
  '.ids-action-item *[icon-leading],.ids-action-item *[icon-trailing]': {
8
10
  gap: '10px',
9
11
  display: 'flex',
package/dist/action-panel/action-panel.css CHANGED
@@ -62,10 +62,10 @@
62
62
  border: var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default);
63
63
  }
64
64
  .ids-action-panel.ids-action-panel-filled {
65
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
65
+ box-shadow: none;
66
66
  }
67
67
  .ids-action-panel.ids-action-panel-outlined {
68
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
68
+ 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);
69
69
  }
70
70
  .ids-action-panel.ids-action-panel-elevated {
71
71
  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);
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:0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)}.ids-action-panel.ids-action-panel-outlined{box-shadow:0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)}.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;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}
package/dist/action-panel/action-panel.plugin.js CHANGED
@@ -68,11 +68,12 @@ module.exports = function ActionPanelPlugin() {
68
68
  border: 'var(--ids-comp-action-panel-size-border-dense) solid var(--ids-comp-action-panel-elevated-color-border-light-default)',
69
69
  },
70
70
  '.ids-action-panel.ids-action-panel-filled': {
71
- boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
71
+ boxShadow: 'none',
72
72
  background: 'var(--ids-comp-action-panel-filled-color-bg-light-default)',
73
73
  },
74
74
  '.ids-action-panel.ids-action-panel-outlined': {
75
- boxShadow: '0px 0px 0px 0px rgba(0,0,0,0),0px 0px 0px 0px rgba(0,0,0,0)',
75
+ boxShadow:
76
+ '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)',
76
77
  background: 'var(--ids-comp-action-panel-outlined-color-bg-light-default)',
77
78
  },
78
79
  '.ids-action-panel.ids-action-panel-elevated': {
package/dist/avatar/avatar.css CHANGED
@@ -7,6 +7,12 @@
7
7
  justify-content: center;
8
8
  border-style: solid;
9
9
  }
10
+ .ids-avatar:not(:disabled) {
11
+ cursor: pointer;
12
+ }
13
+ .ids-avatar:disabled {
14
+ cursor: not-allowed;
15
+ }
10
16
  .ids-avatar .ids-avatar-icon {
11
17
  gap: 10px;
12
18
  display: flex;
package/dist/avatar/avatar.min.css CHANGED
@@ -1 +1 @@
1
- .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center;border-style:solid}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-avatar-focused-outline-size-outline);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline-color:var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-default)}
1
+ .ids-avatar{display:flex;font-style:normal;text-align:center;align-items:center;flex-direction:column;justify-content:center;border-style:solid}.ids-avatar:not(:disabled){cursor:pointer}.ids-avatar:disabled{cursor:not-allowed}.ids-avatar .ids-avatar-icon{gap:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;height:100%}.ids-avatar .ids-avatar-image{border-radius:50%;vertical-align:middle;max-width:none}.ids-avatar:focus{outline-offset:2px;outline-style:solid;outline-width:var(--ids-comp-avatar-focused-outline-size-outline);outline-color:var(--ids-comp-avatar-focused-outline-color-dark-focused)}.ids-avatar:focus.ids-avatar-light{outline-color:var(--ids-comp-avatar-focused-outline-color-light-focused)}.ids-avatar:active{outline:none}.ids-avatar.ids-avatar-compact{width:var(--ids-comp-avatar-size-height-compact);height:var(--ids-comp-avatar-size-width-compact);gap:var(--ids-comp-avatar-size-gap-compact);border-radius:var(--ids-comp-avatar-size-border-radius-compact);padding:var(--ids-comp-avatar-size-padding-y-compact) var(--ids-comp-avatar-size-padding-x-compact);border:var(--ids-comp-avatar-size-border-compact);font-family:var(--ids-comp-avatar-initials-typography-font-family-compact);font-size:var(--ids-comp-avatar-initials-typography-font-size-compact);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-compact);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-compact);line-height:var(--ids-comp-avatar-initials-typography-line-height-compact)}.ids-avatar.ids-avatar-compact:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-compact .ids-avatar-image{width:var(--ids-comp-avatar-size-width-compact);height:var(--ids-comp-avatar-size-height-compact)}.ids-avatar.ids-avatar-comfortable{width:var(--ids-comp-avatar-size-height-comfortable);height:var(--ids-comp-avatar-size-width-comfortable);gap:var(--ids-comp-avatar-size-gap-comfortable);border-radius:var(--ids-comp-avatar-size-border-radius-comfortable);padding:var(--ids-comp-avatar-size-padding-y-comfortable) var(--ids-comp-avatar-size-padding-x-comfortable);border:var(--ids-comp-avatar-size-border-comfortable);font-family:var(--ids-comp-avatar-initials-typography-font-family-comfortable);font-size:var(--ids-comp-avatar-initials-typography-font-size-comfortable);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable);line-height:var(--ids-comp-avatar-initials-typography-line-height-comfortable)}.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-comfortable .ids-avatar-image{width:var(--ids-comp-avatar-size-width-comfortable);height:var(--ids-comp-avatar-size-height-comfortable)}.ids-avatar.ids-avatar-spacious{width:var(--ids-comp-avatar-size-height-spacious);height:var(--ids-comp-avatar-size-width-spacious);gap:var(--ids-comp-avatar-size-gap-spacious);border-radius:var(--ids-comp-avatar-size-border-radius-spacious);padding:var(--ids-comp-avatar-size-padding-y-spacious) var(--ids-comp-avatar-size-padding-x-spacious);border:var(--ids-comp-avatar-size-border-spacious);font-family:var(--ids-comp-avatar-initials-typography-font-family-spacious);font-size:var(--ids-comp-avatar-initials-typography-font-size-spacious);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-spacious);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-spacious);line-height:var(--ids-comp-avatar-initials-typography-line-height-spacious)}.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-spacious .ids-avatar-image{width:var(--ids-comp-avatar-size-width-spacious);height:var(--ids-comp-avatar-size-height-spacious)}.ids-avatar.ids-avatar-dense{width:var(--ids-comp-avatar-size-height-dense);height:var(--ids-comp-avatar-size-width-dense);gap:var(--ids-comp-avatar-size-gap-dense);border-radius:var(--ids-comp-avatar-size-border-radius-dense);padding:var(--ids-comp-avatar-size-padding-y-dense) var(--ids-comp-avatar-size-padding-x-dense);border:var(--ids-comp-avatar-size-border-dense);font-family:var(--ids-comp-avatar-initials-typography-font-family-dense);font-size:var(--ids-comp-avatar-initials-typography-font-size-dense);font-weight:var(--ids-comp-avatar-initials-typography-font-weight-dense);letter-spacing:var(--ids-comp-avatar-initials-typography-letter-spacing-dense);line-height:var(--ids-comp-avatar-initials-typography-line-height-dense)}.ids-avatar.ids-avatar-dense:has(.ids-avatar-image){padding:0}.ids-avatar.ids-avatar-dense .ids-avatar-image{width:var(--ids-comp-avatar-size-width-dense);height:var(--ids-comp-avatar-size-height-dense)}.ids-avatar.ids-avatar-primary{color:var(--ids-comp-avatar-color-fg-primary-default);background:var(--ids-comp-avatar-color-bg-primary-default);border-color:var(--ids-comp-avatar-color-border-primary-default)}.ids-avatar.ids-avatar-primary:hover{background:var(--ids-comp-avatar-color-bg-primary-hovered);border-color:var(--ids-comp-avatar-color-border-primary-hovered)}.ids-avatar.ids-avatar-primary:focus{background:var(--ids-comp-avatar-color-bg-primary-focused);border-color:var(--ids-comp-avatar-color-border-primary-focused)}.ids-avatar.ids-avatar-primary:active{background:var(--ids-comp-avatar-color-bg-primary-pressed);border-color:var(--ids-comp-avatar-color-border-primary-pressed)}.ids-avatar.ids-avatar-primary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-primary-default)}.ids-avatar.ids-avatar-secondary{color:var(--ids-comp-avatar-color-fg-secondary-default);background:var(--ids-comp-avatar-color-bg-secondary-default);border-color:var(--ids-comp-avatar-color-border-secondary-default)}.ids-avatar.ids-avatar-secondary:hover{background:var(--ids-comp-avatar-color-bg-secondary-hovered);border-color:var(--ids-comp-avatar-color-border-secondary-hovered)}.ids-avatar.ids-avatar-secondary:focus{background:var(--ids-comp-avatar-color-bg-secondary-focused);border-color:var(--ids-comp-avatar-color-border-secondary-focused)}.ids-avatar.ids-avatar-secondary:active{background:var(--ids-comp-avatar-color-bg-secondary-pressed);border-color:var(--ids-comp-avatar-color-border-secondary-pressed)}.ids-avatar.ids-avatar-secondary .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-secondary-default)}.ids-avatar.ids-avatar-light{color:var(--ids-comp-avatar-color-fg-light-default);background:var(--ids-comp-avatar-color-bg-light-default);border-color:var(--ids-comp-avatar-color-border-light-default)}.ids-avatar.ids-avatar-light:hover{background:var(--ids-comp-avatar-color-bg-light-hovered);border-color:var(--ids-comp-avatar-color-border-light-hovered)}.ids-avatar.ids-avatar-light:focus{background:var(--ids-comp-avatar-color-bg-light-focused);border-color:var(--ids-comp-avatar-color-border-light-focused)}.ids-avatar.ids-avatar-light:active{background:var(--ids-comp-avatar-color-bg-light-pressed);border-color:var(--ids-comp-avatar-color-border-light-pressed)}.ids-avatar.ids-avatar-light .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-light-default)}.ids-avatar.ids-avatar-dark{color:var(--ids-comp-avatar-color-fg-dark-default);background:var(--ids-comp-avatar-color-bg-dark-default);border-color:var(--ids-comp-avatar-color-border-dark-default)}.ids-avatar.ids-avatar-dark:hover{background:var(--ids-comp-avatar-color-bg-dark-hovered);border-color:var(--ids-comp-avatar-color-border-dark-hovered)}.ids-avatar.ids-avatar-dark:focus{background:var(--ids-comp-avatar-color-bg-dark-focused);border-color:var(--ids-comp-avatar-color-border-dark-focused)}.ids-avatar.ids-avatar-dark:active{background:var(--ids-comp-avatar-color-bg-dark-pressed);border-color:var(--ids-comp-avatar-color-border-dark-pressed)}.ids-avatar.ids-avatar-dark .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-dark-default)}.ids-avatar.ids-avatar-surface{color:var(--ids-comp-avatar-color-fg-surface-default);background:var(--ids-comp-avatar-color-bg-surface-default);border-color:var(--ids-comp-avatar-color-border-surface-default)}.ids-avatar.ids-avatar-surface:hover{background:var(--ids-comp-avatar-color-bg-surface-hovered);border-color:var(--ids-comp-avatar-color-border-surface-hovered)}.ids-avatar.ids-avatar-surface:focus{background:var(--ids-comp-avatar-color-bg-surface-focused);border-color:var(--ids-comp-avatar-color-border-surface-focused)}.ids-avatar.ids-avatar-surface:active{background:var(--ids-comp-avatar-color-bg-surface-pressed);border-color:var(--ids-comp-avatar-color-border-surface-pressed)}.ids-avatar.ids-avatar-surface .ids-avatar-icon path{fill:var(--ids-comp-avatar-color-fg-surface-default)}
package/dist/avatar/avatar.plugin.js CHANGED
@@ -11,6 +11,8 @@ module.exports = function AvatarPlugin() {
11
11
  justifyContent: 'center',
12
12
  borderStyle: 'solid',
13
13
  },
14
+ '.ids-avatar:not(:disabled)': { cursor: 'pointer' },
15
+ '.ids-avatar:disabled': { cursor: 'not-allowed' },
14
16
  '.ids-avatar .ids-avatar-icon': {
15
17
  gap: '10px',
16
18
  display: 'flex',
package/dist/button/button.css CHANGED
@@ -16,6 +16,12 @@
16
16
  .ids-button:active {
17
17
  outline: none;
18
18
  }
19
+ .ids-button:not(:disabled) {
20
+ cursor: pointer;
21
+ }
22
+ .ids-button:disabled {
23
+ cursor: not-allowed;
24
+ }
19
25
  .ids-button *[icon-leading],
20
26
  .ids-button *[icon-trailing] {
21
27
  gap: 10px;
package/dist/button/button.min.css CHANGED
@@ -1 +1 @@
1
- .ids-button{flex-shrink:0;width:fit-content;align-items:center;display:inline-flex;justify-content:center;border-style:solid}.ids-button:focus{outline-offset:2px;outline:var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)}.ids-button:focus.ids-button-light{outline-color:var(--ids-comp-buttons-focused-outline-color-light-focused)}.ids-button:active{outline:none}.ids-button *[icon-leading],.ids-button *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-button.ids-button-compact{gap:var(--ids-comp-buttons-size-gap-compact);height:var(--ids-comp-buttons-size-height-compact);min-width:var(--ids-comp-buttons-size-min-width-compact);padding:var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact);border-radius:var(--ids-comp-buttons-size-border-radius-compact);border-width:var(--ids-comp-buttons-size-border-width-compact)}.ids-button.ids-button-compact>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-compact);font-size:var(--ids-comp-buttons-label-typography-font-size-compact);font-weight:var(--ids-comp-buttons-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-compact);line-height:var(--ids-comp-buttons-label-typography-line-height-compact)}.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-compact);height:var(--ids-comp-buttons-size-icon-compact)}.ids-button.ids-button-comfortable{gap:var(--ids-comp-buttons-size-gap-comfortable);height:var(--ids-comp-buttons-size-height-comfortable);min-width:var(--ids-comp-buttons-size-min-width-comfortable);padding:var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable);border-radius:var(--ids-comp-buttons-size-border-radius-comfortable);border-width:var(--ids-comp-buttons-size-border-width-comfortable)}.ids-button.ids-button-comfortable>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-comfortable);font-size:var(--ids-comp-buttons-label-typography-font-size-comfortable);font-weight:var(--ids-comp-buttons-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-buttons-label-typography-line-height-comfortable)}.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-comfortable);height:var(--ids-comp-buttons-size-icon-comfortable)}.ids-button.ids-button-spacious{gap:var(--ids-comp-buttons-size-gap-spacious);height:var(--ids-comp-buttons-size-height-spacious);min-width:var(--ids-comp-buttons-size-min-width-spacious);padding:var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious);border-radius:var(--ids-comp-buttons-size-border-radius-spacious);border-width:var(--ids-comp-buttons-size-border-width-spacious)}.ids-button.ids-button-spacious>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-spacious);font-size:var(--ids-comp-buttons-label-typography-font-size-spacious);font-weight:var(--ids-comp-buttons-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-buttons-label-typography-line-height-spacious)}.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-spacious);height:var(--ids-comp-buttons-size-icon-spacious)}.ids-button.ids-button-dense{gap:var(--ids-comp-buttons-size-gap-dense);height:var(--ids-comp-buttons-size-height-dense);min-width:var(--ids-comp-buttons-size-min-width-dense);padding:var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense);border-radius:var(--ids-comp-buttons-size-border-radius-dense);border-width:var(--ids-comp-buttons-size-border-width-dense)}.ids-button.ids-button-dense>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-dense);font-size:var(--ids-comp-buttons-label-typography-font-size-dense);font-weight:var(--ids-comp-buttons-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-dense);line-height:var(--ids-comp-buttons-label-typography-line-height-dense)}.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-dense);height:var(--ids-comp-buttons-size-icon-dense)}.ids-button.ids-button-filled.ids-button-primary{color:var(--ids-comp-buttons-filled-color-fg-label-primary-default);background:var(--ids-comp-buttons-filled-color-bg-primary-default);border-color:var(--ids-comp-buttons-filled-color-border-primary-default)}.ids-button.ids-button-filled.ids-button-primary:hover{background:var(--ids-comp-buttons-filled-color-bg-primary-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-filled-color-border-primary-hovered)}.ids-button.ids-button-filled.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-primary-focused);color:var(--ids-comp-buttons-filled-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-filled-color-border-primary-focused)}.ids-button.ids-button-filled.ids-button-primary:active{background:var(--ids-comp-buttons-filled-color-bg-primary-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-filled-color-border-primary-pressed)}.ids-button.ids-button-filled.ids-button-primary:disabled{background:var(--ids-comp-buttons-filled-color-bg-primary-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-filled-color-border-primary-disabled)}.ids-button.ids-button-filled.ids-button-secondary{color:var(--ids-comp-buttons-filled-color-fg-label-secondary-default);background:var(--ids-comp-buttons-filled-color-bg-secondary-default);border-color:var(--ids-comp-buttons-filled-color-border-secondary-default)}.ids-button.ids-button-filled.ids-button-secondary:hover{background:var(--ids-comp-buttons-filled-color-bg-secondary-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-filled-color-border-secondary-hovered)}.ids-button.ids-button-filled.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-secondary-focused);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-filled-color-border-secondary-focused)}.ids-button.ids-button-filled.ids-button-secondary:active{background:var(--ids-comp-buttons-filled-color-bg-secondary-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-filled-color-border-secondary-pressed)}.ids-button.ids-button-filled.ids-button-secondary:disabled{background:var(--ids-comp-buttons-filled-color-bg-secondary-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-filled-color-border-secondary-disabled)}.ids-button.ids-button-filled.ids-button-brand{color:var(--ids-comp-buttons-filled-color-fg-label-brand-default);background:var(--ids-comp-buttons-filled-color-bg-brand-default);border-color:var(--ids-comp-buttons-filled-color-border-brand-default)}.ids-button.ids-button-filled.ids-button-brand:hover{background:var(--ids-comp-buttons-filled-color-bg-brand-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-filled-color-border-brand-hovered)}.ids-button.ids-button-filled.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-brand-focused);color:var(--ids-comp-buttons-filled-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-filled-color-border-brand-focused)}.ids-button.ids-button-filled.ids-button-brand:active{background:var(--ids-comp-buttons-filled-color-bg-brand-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-filled-color-border-brand-pressed)}.ids-button.ids-button-filled.ids-button-brand:disabled{background:var(--ids-comp-buttons-filled-color-bg-brand-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-filled-color-border-brand-disabled)}.ids-button.ids-button-filled.ids-button-error{color:var(--ids-comp-buttons-filled-color-fg-label-error-default);background:var(--ids-comp-buttons-filled-color-bg-error-default);border-color:var(--ids-comp-buttons-filled-color-border-error-default)}.ids-button.ids-button-filled.ids-button-error:hover{background:var(--ids-comp-buttons-filled-color-bg-error-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-filled-color-border-error-hovered)}.ids-button.ids-button-filled.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-error-focused);color:var(--ids-comp-buttons-filled-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-filled-color-border-error-focused)}.ids-button.ids-button-filled.ids-button-error:active{background:var(--ids-comp-buttons-filled-color-bg-error-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-filled-color-border-error-pressed)}.ids-button.ids-button-filled.ids-button-success{color:var(--ids-comp-buttons-filled-color-fg-label-success-default);background:var(--ids-comp-buttons-filled-color-bg-success-default);border-color:var(--ids-comp-buttons-filled-color-border-success-default)}.ids-button.ids-button-filled.ids-button-success:hover{background:var(--ids-comp-buttons-filled-color-bg-success-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-filled-color-border-success-hovered)}.ids-button.ids-button-filled.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-success-focused);color:var(--ids-comp-buttons-filled-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-filled-color-border-success-focused)}.ids-button.ids-button-filled.ids-button-success:active{background:var(--ids-comp-buttons-filled-color-bg-success-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-filled-color-border-success-pressed)}.ids-button.ids-button-filled.ids-button-warning{color:var(--ids-comp-buttons-filled-color-fg-label-warning-default);background:var(--ids-comp-buttons-filled-color-bg-warning-default);border-color:var(--ids-comp-buttons-filled-color-border-warning-default)}.ids-button.ids-button-filled.ids-button-warning:hover{background:var(--ids-comp-buttons-filled-color-bg-warning-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-filled-color-border-warning-hovered)}.ids-button.ids-button-filled.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-warning-focused);color:var(--ids-comp-buttons-filled-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-filled-color-border-warning-focused)}.ids-button.ids-button-filled.ids-button-warning:active{background:var(--ids-comp-buttons-filled-color-bg-warning-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-filled-color-border-warning-pressed)}.ids-button.ids-button-filled.ids-button-light{color:var(--ids-comp-buttons-filled-color-fg-label-light-default);background:var(--ids-comp-buttons-filled-color-bg-light-default);border-color:var(--ids-comp-buttons-filled-color-border-light-default)}.ids-button.ids-button-filled.ids-button-light:hover{background:var(--ids-comp-buttons-filled-color-bg-light-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-filled-color-border-light-hovered)}.ids-button.ids-button-filled.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-light-focused);color:var(--ids-comp-buttons-filled-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-filled-color-border-light-focused)}.ids-button.ids-button-filled.ids-button-light:active{background:var(--ids-comp-buttons-filled-color-bg-light-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-filled-color-border-light-pressed)}.ids-button.ids-button-filled.ids-button-light:disabled{background:var(--ids-comp-buttons-filled-color-bg-light-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-filled-color-border-light-disabled)}.ids-button.ids-button-filled.ids-button-dark{color:var(--ids-comp-buttons-filled-color-fg-label-dark-default);background:var(--ids-comp-buttons-filled-color-bg-dark-default);border-color:var(--ids-comp-buttons-filled-color-border-dark-default)}.ids-button.ids-button-filled.ids-button-dark:hover{background:var(--ids-comp-buttons-filled-color-bg-dark-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-filled-color-border-dark-hovered)}.ids-button.ids-button-filled.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-dark-focused);color:var(--ids-comp-buttons-filled-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-filled-color-border-dark-focused)}.ids-button.ids-button-filled.ids-button-dark:active{background:var(--ids-comp-buttons-filled-color-bg-dark-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-filled-color-border-dark-pressed)}.ids-button.ids-button-filled.ids-button-dark:disabled{background:var(--ids-comp-buttons-filled-color-bg-dark-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-filled-color-border-dark-disabled)}.ids-button.ids-button-filled.ids-button-surface{color:var(--ids-comp-buttons-filled-color-fg-label-surface-default);background:var(--ids-comp-buttons-filled-color-bg-surface-default);border-color:var(--ids-comp-buttons-filled-color-border-surface-default)}.ids-button.ids-button-filled.ids-button-surface:hover{background:var(--ids-comp-buttons-filled-color-bg-surface-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-filled-color-border-surface-hovered)}.ids-button.ids-button-filled.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-surface-focused);color:var(--ids-comp-buttons-filled-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-filled-color-border-surface-focused)}.ids-button.ids-button-filled.ids-button-surface:active{background:var(--ids-comp-buttons-filled-color-bg-surface-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-filled-color-border-surface-pressed)}.ids-button.ids-button-filled.ids-button-surface:disabled{background:var(--ids-comp-buttons-filled-color-bg-surface-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-filled-color-border-surface-disabled)}.ids-button.ids-button-outlined.ids-button-primary{color:var(--ids-comp-buttons-outlined-color-fg-label-primary-default);background:var(--ids-comp-buttons-outlined-color-bg-primary-default);border-color:var(--ids-comp-buttons-outlined-color-border-primary-default)}.ids-button.ids-button-outlined.ids-button-primary:hover{background:var(--ids-comp-buttons-outlined-color-bg-primary-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-primary-hovered)}.ids-button.ids-button-outlined.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-primary-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-outlined-color-border-primary-focused)}.ids-button.ids-button-outlined.ids-button-primary:active{background:var(--ids-comp-buttons-outlined-color-bg-primary-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-primary-pressed)}.ids-button.ids-button-outlined.ids-button-primary:disabled{background:var(--ids-comp-buttons-outlined-color-bg-primary-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-primary-disabled)}.ids-button.ids-button-outlined.ids-button-secondary{color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-default);background:var(--ids-comp-buttons-outlined-color-bg-secondary-default);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-default)}.ids-button.ids-button-outlined.ids-button-secondary:hover{background:var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-hovered)}.ids-button.ids-button-outlined.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-secondary-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-focused)}.ids-button.ids-button-outlined.ids-button-secondary:active{background:var(--ids-comp-buttons-outlined-color-bg-secondary-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-pressed)}.ids-button.ids-button-outlined.ids-button-secondary:disabled{background:var(--ids-comp-buttons-outlined-color-bg-secondary-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-disabled)}.ids-button.ids-button-outlined.ids-button-brand{color:var(--ids-comp-buttons-outlined-color-fg-label-brand-default);background:var(--ids-comp-buttons-outlined-color-bg-brand-default);border-color:var(--ids-comp-buttons-outlined-color-border-brand-default)}.ids-button.ids-button-outlined.ids-button-brand:hover{background:var(--ids-comp-buttons-outlined-color-bg-brand-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-brand-hovered)}.ids-button.ids-button-outlined.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-brand-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-outlined-color-border-brand-focused)}.ids-button.ids-button-outlined.ids-button-brand:active{background:var(--ids-comp-buttons-outlined-color-bg-brand-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-brand-pressed)}.ids-button.ids-button-outlined.ids-button-brand:disabled{background:var(--ids-comp-buttons-outlined-color-bg-brand-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-brand-disabled)}.ids-button.ids-button-outlined.ids-button-error{color:var(--ids-comp-buttons-outlined-color-fg-label-error-default);background:var(--ids-comp-buttons-outlined-color-bg-error-default);border-color:var(--ids-comp-buttons-outlined-color-border-error-default)}.ids-button.ids-button-outlined.ids-button-error:hover{background:var(--ids-comp-buttons-outlined-color-bg-error-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-error-hovered)}.ids-button.ids-button-outlined.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-error-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-outlined-color-border-error-focused)}.ids-button.ids-button-outlined.ids-button-error:active{background:var(--ids-comp-buttons-outlined-color-bg-error-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-error-pressed)}.ids-button.ids-button-outlined.ids-button-success{color:var(--ids-comp-buttons-outlined-color-fg-label-success-default);background:var(--ids-comp-buttons-outlined-color-bg-success-default);border-color:var(--ids-comp-buttons-outlined-color-border-success-default)}.ids-button.ids-button-outlined.ids-button-success:hover{background:var(--ids-comp-buttons-outlined-color-bg-success-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-success-hovered)}.ids-button.ids-button-outlined.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-success-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-outlined-color-border-success-focused)}.ids-button.ids-button-outlined.ids-button-success:active{background:var(--ids-comp-buttons-outlined-color-bg-success-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-success-pressed)}.ids-button.ids-button-outlined.ids-button-warning{color:var(--ids-comp-buttons-outlined-color-fg-label-warning-default);background:var(--ids-comp-buttons-outlined-color-bg-warning-default);border-color:var(--ids-comp-buttons-outlined-color-border-warning-default)}.ids-button.ids-button-outlined.ids-button-warning:hover{background:var(--ids-comp-buttons-outlined-color-bg-warning-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-warning-hovered)}.ids-button.ids-button-outlined.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-warning-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-outlined-color-border-warning-focused)}.ids-button.ids-button-outlined.ids-button-warning:active{background:var(--ids-comp-buttons-outlined-color-bg-warning-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-warning-pressed)}.ids-button.ids-button-outlined.ids-button-light{color:var(--ids-comp-buttons-outlined-color-fg-label-light-default);background:var(--ids-comp-buttons-outlined-color-bg-light-default);border-color:var(--ids-comp-buttons-outlined-color-border-light-default)}.ids-button.ids-button-outlined.ids-button-light:hover{background:var(--ids-comp-buttons-outlined-color-bg-light-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-light-hovered)}.ids-button.ids-button-outlined.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-light-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-outlined-color-border-light-focused)}.ids-button.ids-button-outlined.ids-button-light:active{background:var(--ids-comp-buttons-outlined-color-bg-light-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-light-pressed)}.ids-button.ids-button-outlined.ids-button-light:disabled{background:var(--ids-comp-buttons-outlined-color-bg-light-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-light-disabled)}.ids-button.ids-button-outlined.ids-button-dark{color:var(--ids-comp-buttons-outlined-color-fg-label-dark-default);background:var(--ids-comp-buttons-outlined-color-bg-dark-default);border-color:var(--ids-comp-buttons-outlined-color-border-dark-default)}.ids-button.ids-button-outlined.ids-button-dark:hover{background:var(--ids-comp-buttons-outlined-color-bg-dark-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-dark-hovered)}.ids-button.ids-button-outlined.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-dark-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-outlined-color-border-dark-focused)}.ids-button.ids-button-outlined.ids-button-dark:active{background:var(--ids-comp-buttons-outlined-color-bg-dark-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-dark-pressed)}.ids-button.ids-button-outlined.ids-button-dark:disabled{background:var(--ids-comp-buttons-outlined-color-bg-dark-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-dark-disabled)}.ids-button.ids-button-outlined.ids-button-surface{color:var(--ids-comp-buttons-outlined-color-fg-label-surface-default);background:var(--ids-comp-buttons-outlined-color-bg-surface-default);border-color:var(--ids-comp-buttons-outlined-color-border-surface-default)}.ids-button.ids-button-outlined.ids-button-surface:hover{background:var(--ids-comp-buttons-outlined-color-bg-surface-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-surface-hovered)}.ids-button.ids-button-outlined.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-surface-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-outlined-color-border-surface-focused)}.ids-button.ids-button-outlined.ids-button-surface:active{background:var(--ids-comp-buttons-outlined-color-bg-surface-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-surface-pressed)}.ids-button.ids-button-outlined.ids-button-surface:disabled{background:var(--ids-comp-buttons-outlined-color-bg-surface-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-surface-disabled)}.ids-button.ids-button-text.ids-button-primary{color:var(--ids-comp-buttons-text-color-fg-label-primary-default);background:var(--ids-comp-buttons-text-color-bg-primary-default);border-color:var(--ids-comp-buttons-text-color-border-primary-default)}.ids-button.ids-button-text.ids-button-primary:hover{background:var(--ids-comp-buttons-text-color-bg-primary-hovered);color:var(--ids-comp-buttons-text-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-text-color-border-primary-hovered)}.ids-button.ids-button-text.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-primary-focused);color:var(--ids-comp-buttons-text-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-text-color-border-primary-focused)}.ids-button.ids-button-text.ids-button-primary:active{background:var(--ids-comp-buttons-text-color-bg-primary-pressed);color:var(--ids-comp-buttons-text-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-text-color-border-primary-pressed)}.ids-button.ids-button-text.ids-button-primary:disabled{background:var(--ids-comp-buttons-text-color-bg-primary-disabled);color:var(--ids-comp-buttons-text-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-text-color-border-primary-disabled)}.ids-button.ids-button-text.ids-button-secondary{color:var(--ids-comp-buttons-text-color-fg-label-secondary-default);background:var(--ids-comp-buttons-text-color-bg-secondary-default);border-color:var(--ids-comp-buttons-text-color-border-secondary-default)}.ids-button.ids-button-text.ids-button-secondary:hover{background:var(--ids-comp-buttons-text-color-bg-secondary-hovered);color:var(--ids-comp-buttons-text-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-text-color-border-secondary-hovered)}.ids-button.ids-button-text.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-secondary-focused);color:var(--ids-comp-buttons-text-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-text-color-border-secondary-focused)}.ids-button.ids-button-text.ids-button-secondary:active{background:var(--ids-comp-buttons-text-color-bg-secondary-pressed);color:var(--ids-comp-buttons-text-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-text-color-border-secondary-pressed)}.ids-button.ids-button-text.ids-button-secondary:disabled{background:var(--ids-comp-buttons-text-color-bg-secondary-disabled);color:var(--ids-comp-buttons-text-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-text-color-border-secondary-disabled)}.ids-button.ids-button-text.ids-button-brand{color:var(--ids-comp-buttons-text-color-fg-label-brand-default);background:var(--ids-comp-buttons-text-color-bg-brand-default);border-color:var(--ids-comp-buttons-text-color-border-brand-default)}.ids-button.ids-button-text.ids-button-brand:hover{background:var(--ids-comp-buttons-text-color-bg-brand-hovered);color:var(--ids-comp-buttons-text-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-text-color-border-brand-hovered)}.ids-button.ids-button-text.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-brand-focused);color:var(--ids-comp-buttons-text-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-text-color-border-brand-focused)}.ids-button.ids-button-text.ids-button-brand:active{background:var(--ids-comp-buttons-text-color-bg-brand-pressed);color:var(--ids-comp-buttons-text-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-text-color-border-brand-pressed)}.ids-button.ids-button-text.ids-button-brand:disabled{background:var(--ids-comp-buttons-text-color-bg-brand-disabled);color:var(--ids-comp-buttons-text-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-text-color-border-brand-disabled)}.ids-button.ids-button-text.ids-button-error{color:var(--ids-comp-buttons-text-color-fg-label-error-default);background:var(--ids-comp-buttons-text-color-bg-error-default);border-color:var(--ids-comp-buttons-text-color-border-error-default)}.ids-button.ids-button-text.ids-button-error:hover{background:var(--ids-comp-buttons-text-color-bg-error-hovered);color:var(--ids-comp-buttons-text-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-text-color-border-error-hovered)}.ids-button.ids-button-text.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-error-focused);color:var(--ids-comp-buttons-text-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-text-color-border-error-focused)}.ids-button.ids-button-text.ids-button-error:active{background:var(--ids-comp-buttons-text-color-bg-error-pressed);color:var(--ids-comp-buttons-text-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-text-color-border-error-pressed)}.ids-button.ids-button-text.ids-button-success{color:var(--ids-comp-buttons-text-color-fg-label-success-default);background:var(--ids-comp-buttons-text-color-bg-success-default);border-color:var(--ids-comp-buttons-text-color-border-success-default)}.ids-button.ids-button-text.ids-button-success:hover{background:var(--ids-comp-buttons-text-color-bg-success-hovered);color:var(--ids-comp-buttons-text-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-text-color-border-success-hovered)}.ids-button.ids-button-text.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-success-focused);color:var(--ids-comp-buttons-text-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-text-color-border-success-focused)}.ids-button.ids-button-text.ids-button-success:active{background:var(--ids-comp-buttons-text-color-bg-success-pressed);color:var(--ids-comp-buttons-text-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-text-color-border-success-pressed)}.ids-button.ids-button-text.ids-button-warning{color:var(--ids-comp-buttons-text-color-fg-label-warning-default);background:var(--ids-comp-buttons-text-color-bg-warning-default);border-color:var(--ids-comp-buttons-text-color-border-warning-default)}.ids-button.ids-button-text.ids-button-warning:hover{background:var(--ids-comp-buttons-text-color-bg-warning-hovered);color:var(--ids-comp-buttons-text-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-text-color-border-warning-hovered)}.ids-button.ids-button-text.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-warning-focused);color:var(--ids-comp-buttons-text-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-text-color-border-warning-focused)}.ids-button.ids-button-text.ids-button-warning:active{background:var(--ids-comp-buttons-text-color-bg-warning-pressed);color:var(--ids-comp-buttons-text-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-text-color-border-warning-pressed)}.ids-button.ids-button-text.ids-button-light{color:var(--ids-comp-buttons-text-color-fg-label-light-default);background:var(--ids-comp-buttons-text-color-bg-light-default);border-color:var(--ids-comp-buttons-text-color-border-light-default)}.ids-button.ids-button-text.ids-button-light:hover{background:var(--ids-comp-buttons-text-color-bg-light-hovered);color:var(--ids-comp-buttons-text-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-text-color-border-light-hovered)}.ids-button.ids-button-text.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-light-focused);color:var(--ids-comp-buttons-text-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-text-color-border-light-focused)}.ids-button.ids-button-text.ids-button-light:active{background:var(--ids-comp-buttons-text-color-bg-light-pressed);color:var(--ids-comp-buttons-text-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-text-color-border-light-pressed)}.ids-button.ids-button-text.ids-button-light:disabled{background:var(--ids-comp-buttons-text-color-bg-light-disabled);color:var(--ids-comp-buttons-text-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-text-color-border-light-disabled)}.ids-button.ids-button-text.ids-button-dark{color:var(--ids-comp-buttons-text-color-fg-label-dark-default);background:var(--ids-comp-buttons-text-color-bg-dark-default);border-color:var(--ids-comp-buttons-text-color-border-dark-default)}.ids-button.ids-button-text.ids-button-dark:hover{background:var(--ids-comp-buttons-text-color-bg-dark-hovered);color:var(--ids-comp-buttons-text-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-text-color-border-dark-hovered)}.ids-button.ids-button-text.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-dark-focused);color:var(--ids-comp-buttons-text-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-text-color-border-dark-focused)}.ids-button.ids-button-text.ids-button-dark:active{background:var(--ids-comp-buttons-text-color-bg-dark-pressed);color:var(--ids-comp-buttons-text-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-text-color-border-dark-pressed)}.ids-button.ids-button-text.ids-button-dark:disabled{background:var(--ids-comp-buttons-text-color-bg-dark-disabled);color:var(--ids-comp-buttons-text-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-text-color-border-dark-disabled)}.ids-button.ids-button-text.ids-button-surface{color:var(--ids-comp-buttons-text-color-fg-label-surface-default);background:var(--ids-comp-buttons-text-color-bg-surface-default);border-color:var(--ids-comp-buttons-text-color-border-surface-default)}.ids-button.ids-button-text.ids-button-surface:hover{background:var(--ids-comp-buttons-text-color-bg-surface-hovered);color:var(--ids-comp-buttons-text-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-text-color-border-surface-hovered)}.ids-button.ids-button-text.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-surface-focused);color:var(--ids-comp-buttons-text-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-text-color-border-surface-focused)}.ids-button.ids-button-text.ids-button-surface:active{background:var(--ids-comp-buttons-text-color-bg-surface-pressed);color:var(--ids-comp-buttons-text-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-text-color-border-surface-pressed)}.ids-button.ids-button-text.ids-button-surface:disabled{background:var(--ids-comp-buttons-text-color-bg-surface-disabled);color:var(--ids-comp-buttons-text-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-text-color-border-surface-disabled)}
1
+ .ids-button{flex-shrink:0;width:fit-content;align-items:center;display:inline-flex;justify-content:center;border-style:solid}.ids-button:focus{outline-offset:2px;outline:var(--ids-comp-buttons-focused-outline-size-outline) solid var(--ids-comp-buttons-focused-outline-color-dark-focused)}.ids-button:focus.ids-button-light{outline-color:var(--ids-comp-buttons-focused-outline-color-light-focused)}.ids-button:active{outline:none}.ids-button:not(:disabled){cursor:pointer}.ids-button:disabled{cursor:not-allowed}.ids-button *[icon-leading],.ids-button *[icon-trailing]{gap:10px;display:flex;align-items:center;justify-content:center}.ids-button.ids-button-compact{gap:var(--ids-comp-buttons-size-gap-compact);height:var(--ids-comp-buttons-size-height-compact);min-width:var(--ids-comp-buttons-size-min-width-compact);padding:var(--ids-comp-buttons-size-padding-y-compact) var(--ids-comp-buttons-size-padding-x-compact);border-radius:var(--ids-comp-buttons-size-border-radius-compact);border-width:var(--ids-comp-buttons-size-border-width-compact)}.ids-button.ids-button-compact>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-compact);font-size:var(--ids-comp-buttons-label-typography-font-size-compact);font-weight:var(--ids-comp-buttons-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-compact);line-height:var(--ids-comp-buttons-label-typography-line-height-compact)}.ids-button.ids-button-compact *[icon-leading],.ids-button.ids-button-compact *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-compact);height:var(--ids-comp-buttons-size-icon-compact)}.ids-button.ids-button-comfortable{gap:var(--ids-comp-buttons-size-gap-comfortable);height:var(--ids-comp-buttons-size-height-comfortable);min-width:var(--ids-comp-buttons-size-min-width-comfortable);padding:var(--ids-comp-buttons-size-padding-y-comfortable) var(--ids-comp-buttons-size-padding-x-comfortable);border-radius:var(--ids-comp-buttons-size-border-radius-comfortable);border-width:var(--ids-comp-buttons-size-border-width-comfortable)}.ids-button.ids-button-comfortable>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-comfortable);font-size:var(--ids-comp-buttons-label-typography-font-size-comfortable);font-weight:var(--ids-comp-buttons-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-buttons-label-typography-line-height-comfortable)}.ids-button.ids-button-comfortable *[icon-leading],.ids-button.ids-button-comfortable *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-comfortable);height:var(--ids-comp-buttons-size-icon-comfortable)}.ids-button.ids-button-spacious{gap:var(--ids-comp-buttons-size-gap-spacious);height:var(--ids-comp-buttons-size-height-spacious);min-width:var(--ids-comp-buttons-size-min-width-spacious);padding:var(--ids-comp-buttons-size-padding-y-spacious) var(--ids-comp-buttons-size-padding-x-spacious);border-radius:var(--ids-comp-buttons-size-border-radius-spacious);border-width:var(--ids-comp-buttons-size-border-width-spacious)}.ids-button.ids-button-spacious>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-spacious);font-size:var(--ids-comp-buttons-label-typography-font-size-spacious);font-weight:var(--ids-comp-buttons-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-buttons-label-typography-line-height-spacious)}.ids-button.ids-button-spacious *[icon-leading],.ids-button.ids-button-spacious *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-spacious);height:var(--ids-comp-buttons-size-icon-spacious)}.ids-button.ids-button-dense{gap:var(--ids-comp-buttons-size-gap-dense);height:var(--ids-comp-buttons-size-height-dense);min-width:var(--ids-comp-buttons-size-min-width-dense);padding:var(--ids-comp-buttons-size-padding-y-dense) var(--ids-comp-buttons-size-padding-x-dense);border-radius:var(--ids-comp-buttons-size-border-radius-dense);border-width:var(--ids-comp-buttons-size-border-width-dense)}.ids-button.ids-button-dense>.ids-button-label{font-family:var(--ids-comp-buttons-label-typography-font-family-dense);font-size:var(--ids-comp-buttons-label-typography-font-size-dense);font-weight:var(--ids-comp-buttons-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-buttons-label-typography-letter-spacing-dense);line-height:var(--ids-comp-buttons-label-typography-line-height-dense)}.ids-button.ids-button-dense *[icon-leading],.ids-button.ids-button-dense *[icon-trailing]{width:var(--ids-comp-buttons-size-icon-dense);height:var(--ids-comp-buttons-size-icon-dense)}.ids-button.ids-button-filled.ids-button-primary{color:var(--ids-comp-buttons-filled-color-fg-label-primary-default);background:var(--ids-comp-buttons-filled-color-bg-primary-default);border-color:var(--ids-comp-buttons-filled-color-border-primary-default)}.ids-button.ids-button-filled.ids-button-primary:hover{background:var(--ids-comp-buttons-filled-color-bg-primary-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-filled-color-border-primary-hovered)}.ids-button.ids-button-filled.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-primary-focused);color:var(--ids-comp-buttons-filled-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-filled-color-border-primary-focused)}.ids-button.ids-button-filled.ids-button-primary:active{background:var(--ids-comp-buttons-filled-color-bg-primary-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-filled-color-border-primary-pressed)}.ids-button.ids-button-filled.ids-button-primary:disabled{background:var(--ids-comp-buttons-filled-color-bg-primary-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-filled-color-border-primary-disabled)}.ids-button.ids-button-filled.ids-button-secondary{color:var(--ids-comp-buttons-filled-color-fg-label-secondary-default);background:var(--ids-comp-buttons-filled-color-bg-secondary-default);border-color:var(--ids-comp-buttons-filled-color-border-secondary-default)}.ids-button.ids-button-filled.ids-button-secondary:hover{background:var(--ids-comp-buttons-filled-color-bg-secondary-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-filled-color-border-secondary-hovered)}.ids-button.ids-button-filled.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-secondary-focused);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-filled-color-border-secondary-focused)}.ids-button.ids-button-filled.ids-button-secondary:active{background:var(--ids-comp-buttons-filled-color-bg-secondary-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-filled-color-border-secondary-pressed)}.ids-button.ids-button-filled.ids-button-secondary:disabled{background:var(--ids-comp-buttons-filled-color-bg-secondary-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-filled-color-border-secondary-disabled)}.ids-button.ids-button-filled.ids-button-brand{color:var(--ids-comp-buttons-filled-color-fg-label-brand-default);background:var(--ids-comp-buttons-filled-color-bg-brand-default);border-color:var(--ids-comp-buttons-filled-color-border-brand-default)}.ids-button.ids-button-filled.ids-button-brand:hover{background:var(--ids-comp-buttons-filled-color-bg-brand-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-filled-color-border-brand-hovered)}.ids-button.ids-button-filled.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-brand-focused);color:var(--ids-comp-buttons-filled-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-filled-color-border-brand-focused)}.ids-button.ids-button-filled.ids-button-brand:active{background:var(--ids-comp-buttons-filled-color-bg-brand-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-filled-color-border-brand-pressed)}.ids-button.ids-button-filled.ids-button-brand:disabled{background:var(--ids-comp-buttons-filled-color-bg-brand-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-filled-color-border-brand-disabled)}.ids-button.ids-button-filled.ids-button-error{color:var(--ids-comp-buttons-filled-color-fg-label-error-default);background:var(--ids-comp-buttons-filled-color-bg-error-default);border-color:var(--ids-comp-buttons-filled-color-border-error-default)}.ids-button.ids-button-filled.ids-button-error:hover{background:var(--ids-comp-buttons-filled-color-bg-error-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-filled-color-border-error-hovered)}.ids-button.ids-button-filled.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-error-focused);color:var(--ids-comp-buttons-filled-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-filled-color-border-error-focused)}.ids-button.ids-button-filled.ids-button-error:active{background:var(--ids-comp-buttons-filled-color-bg-error-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-filled-color-border-error-pressed)}.ids-button.ids-button-filled.ids-button-success{color:var(--ids-comp-buttons-filled-color-fg-label-success-default);background:var(--ids-comp-buttons-filled-color-bg-success-default);border-color:var(--ids-comp-buttons-filled-color-border-success-default)}.ids-button.ids-button-filled.ids-button-success:hover{background:var(--ids-comp-buttons-filled-color-bg-success-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-filled-color-border-success-hovered)}.ids-button.ids-button-filled.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-success-focused);color:var(--ids-comp-buttons-filled-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-filled-color-border-success-focused)}.ids-button.ids-button-filled.ids-button-success:active{background:var(--ids-comp-buttons-filled-color-bg-success-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-filled-color-border-success-pressed)}.ids-button.ids-button-filled.ids-button-warning{color:var(--ids-comp-buttons-filled-color-fg-label-warning-default);background:var(--ids-comp-buttons-filled-color-bg-warning-default);border-color:var(--ids-comp-buttons-filled-color-border-warning-default)}.ids-button.ids-button-filled.ids-button-warning:hover{background:var(--ids-comp-buttons-filled-color-bg-warning-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-filled-color-border-warning-hovered)}.ids-button.ids-button-filled.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-warning-focused);color:var(--ids-comp-buttons-filled-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-filled-color-border-warning-focused)}.ids-button.ids-button-filled.ids-button-warning:active{background:var(--ids-comp-buttons-filled-color-bg-warning-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-filled-color-border-warning-pressed)}.ids-button.ids-button-filled.ids-button-light{color:var(--ids-comp-buttons-filled-color-fg-label-light-default);background:var(--ids-comp-buttons-filled-color-bg-light-default);border-color:var(--ids-comp-buttons-filled-color-border-light-default)}.ids-button.ids-button-filled.ids-button-light:hover{background:var(--ids-comp-buttons-filled-color-bg-light-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-filled-color-border-light-hovered)}.ids-button.ids-button-filled.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-light-focused);color:var(--ids-comp-buttons-filled-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-filled-color-border-light-focused)}.ids-button.ids-button-filled.ids-button-light:active{background:var(--ids-comp-buttons-filled-color-bg-light-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-filled-color-border-light-pressed)}.ids-button.ids-button-filled.ids-button-light:disabled{background:var(--ids-comp-buttons-filled-color-bg-light-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-filled-color-border-light-disabled)}.ids-button.ids-button-filled.ids-button-dark{color:var(--ids-comp-buttons-filled-color-fg-label-dark-default);background:var(--ids-comp-buttons-filled-color-bg-dark-default);border-color:var(--ids-comp-buttons-filled-color-border-dark-default)}.ids-button.ids-button-filled.ids-button-dark:hover{background:var(--ids-comp-buttons-filled-color-bg-dark-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-filled-color-border-dark-hovered)}.ids-button.ids-button-filled.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-dark-focused);color:var(--ids-comp-buttons-filled-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-filled-color-border-dark-focused)}.ids-button.ids-button-filled.ids-button-dark:active{background:var(--ids-comp-buttons-filled-color-bg-dark-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-filled-color-border-dark-pressed)}.ids-button.ids-button-filled.ids-button-dark:disabled{background:var(--ids-comp-buttons-filled-color-bg-dark-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-filled-color-border-dark-disabled)}.ids-button.ids-button-filled.ids-button-surface{color:var(--ids-comp-buttons-filled-color-fg-label-surface-default);background:var(--ids-comp-buttons-filled-color-bg-surface-default);border-color:var(--ids-comp-buttons-filled-color-border-surface-default)}.ids-button.ids-button-filled.ids-button-surface:hover{background:var(--ids-comp-buttons-filled-color-bg-surface-hovered);color:var(--ids-comp-buttons-filled-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-filled-color-border-surface-hovered)}.ids-button.ids-button-filled.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-filled-color-bg-surface-focused);color:var(--ids-comp-buttons-filled-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-filled-color-border-surface-focused)}.ids-button.ids-button-filled.ids-button-surface:active{background:var(--ids-comp-buttons-filled-color-bg-surface-pressed);color:var(--ids-comp-buttons-filled-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-filled-color-border-surface-pressed)}.ids-button.ids-button-filled.ids-button-surface:disabled{background:var(--ids-comp-buttons-filled-color-bg-surface-disabled);color:var(--ids-comp-buttons-filled-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-filled-color-border-surface-disabled)}.ids-button.ids-button-outlined.ids-button-primary{color:var(--ids-comp-buttons-outlined-color-fg-label-primary-default);background:var(--ids-comp-buttons-outlined-color-bg-primary-default);border-color:var(--ids-comp-buttons-outlined-color-border-primary-default)}.ids-button.ids-button-outlined.ids-button-primary:hover{background:var(--ids-comp-buttons-outlined-color-bg-primary-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-primary-hovered)}.ids-button.ids-button-outlined.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-primary-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-outlined-color-border-primary-focused)}.ids-button.ids-button-outlined.ids-button-primary:active{background:var(--ids-comp-buttons-outlined-color-bg-primary-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-primary-pressed)}.ids-button.ids-button-outlined.ids-button-primary:disabled{background:var(--ids-comp-buttons-outlined-color-bg-primary-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-primary-disabled)}.ids-button.ids-button-outlined.ids-button-secondary{color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-default);background:var(--ids-comp-buttons-outlined-color-bg-secondary-default);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-default)}.ids-button.ids-button-outlined.ids-button-secondary:hover{background:var(--ids-comp-buttons-outlined-color-bg-secondary-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-hovered)}.ids-button.ids-button-outlined.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-secondary-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-focused)}.ids-button.ids-button-outlined.ids-button-secondary:active{background:var(--ids-comp-buttons-outlined-color-bg-secondary-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-pressed)}.ids-button.ids-button-outlined.ids-button-secondary:disabled{background:var(--ids-comp-buttons-outlined-color-bg-secondary-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-secondary-disabled)}.ids-button.ids-button-outlined.ids-button-brand{color:var(--ids-comp-buttons-outlined-color-fg-label-brand-default);background:var(--ids-comp-buttons-outlined-color-bg-brand-default);border-color:var(--ids-comp-buttons-outlined-color-border-brand-default)}.ids-button.ids-button-outlined.ids-button-brand:hover{background:var(--ids-comp-buttons-outlined-color-bg-brand-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-brand-hovered)}.ids-button.ids-button-outlined.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-brand-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-outlined-color-border-brand-focused)}.ids-button.ids-button-outlined.ids-button-brand:active{background:var(--ids-comp-buttons-outlined-color-bg-brand-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-brand-pressed)}.ids-button.ids-button-outlined.ids-button-brand:disabled{background:var(--ids-comp-buttons-outlined-color-bg-brand-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-brand-disabled)}.ids-button.ids-button-outlined.ids-button-error{color:var(--ids-comp-buttons-outlined-color-fg-label-error-default);background:var(--ids-comp-buttons-outlined-color-bg-error-default);border-color:var(--ids-comp-buttons-outlined-color-border-error-default)}.ids-button.ids-button-outlined.ids-button-error:hover{background:var(--ids-comp-buttons-outlined-color-bg-error-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-error-hovered)}.ids-button.ids-button-outlined.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-error-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-outlined-color-border-error-focused)}.ids-button.ids-button-outlined.ids-button-error:active{background:var(--ids-comp-buttons-outlined-color-bg-error-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-error-pressed)}.ids-button.ids-button-outlined.ids-button-success{color:var(--ids-comp-buttons-outlined-color-fg-label-success-default);background:var(--ids-comp-buttons-outlined-color-bg-success-default);border-color:var(--ids-comp-buttons-outlined-color-border-success-default)}.ids-button.ids-button-outlined.ids-button-success:hover{background:var(--ids-comp-buttons-outlined-color-bg-success-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-success-hovered)}.ids-button.ids-button-outlined.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-success-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-outlined-color-border-success-focused)}.ids-button.ids-button-outlined.ids-button-success:active{background:var(--ids-comp-buttons-outlined-color-bg-success-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-success-pressed)}.ids-button.ids-button-outlined.ids-button-warning{color:var(--ids-comp-buttons-outlined-color-fg-label-warning-default);background:var(--ids-comp-buttons-outlined-color-bg-warning-default);border-color:var(--ids-comp-buttons-outlined-color-border-warning-default)}.ids-button.ids-button-outlined.ids-button-warning:hover{background:var(--ids-comp-buttons-outlined-color-bg-warning-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-warning-hovered)}.ids-button.ids-button-outlined.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-warning-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-outlined-color-border-warning-focused)}.ids-button.ids-button-outlined.ids-button-warning:active{background:var(--ids-comp-buttons-outlined-color-bg-warning-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-warning-pressed)}.ids-button.ids-button-outlined.ids-button-light{color:var(--ids-comp-buttons-outlined-color-fg-label-light-default);background:var(--ids-comp-buttons-outlined-color-bg-light-default);border-color:var(--ids-comp-buttons-outlined-color-border-light-default)}.ids-button.ids-button-outlined.ids-button-light:hover{background:var(--ids-comp-buttons-outlined-color-bg-light-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-light-hovered)}.ids-button.ids-button-outlined.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-light-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-outlined-color-border-light-focused)}.ids-button.ids-button-outlined.ids-button-light:active{background:var(--ids-comp-buttons-outlined-color-bg-light-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-light-pressed)}.ids-button.ids-button-outlined.ids-button-light:disabled{background:var(--ids-comp-buttons-outlined-color-bg-light-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-light-disabled)}.ids-button.ids-button-outlined.ids-button-dark{color:var(--ids-comp-buttons-outlined-color-fg-label-dark-default);background:var(--ids-comp-buttons-outlined-color-bg-dark-default);border-color:var(--ids-comp-buttons-outlined-color-border-dark-default)}.ids-button.ids-button-outlined.ids-button-dark:hover{background:var(--ids-comp-buttons-outlined-color-bg-dark-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-dark-hovered)}.ids-button.ids-button-outlined.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-dark-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-outlined-color-border-dark-focused)}.ids-button.ids-button-outlined.ids-button-dark:active{background:var(--ids-comp-buttons-outlined-color-bg-dark-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-dark-pressed)}.ids-button.ids-button-outlined.ids-button-dark:disabled{background:var(--ids-comp-buttons-outlined-color-bg-dark-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-dark-disabled)}.ids-button.ids-button-outlined.ids-button-surface{color:var(--ids-comp-buttons-outlined-color-fg-label-surface-default);background:var(--ids-comp-buttons-outlined-color-bg-surface-default);border-color:var(--ids-comp-buttons-outlined-color-border-surface-default)}.ids-button.ids-button-outlined.ids-button-surface:hover{background:var(--ids-comp-buttons-outlined-color-bg-surface-hovered);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-outlined-color-border-surface-hovered)}.ids-button.ids-button-outlined.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-outlined-color-bg-surface-focused);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-outlined-color-border-surface-focused)}.ids-button.ids-button-outlined.ids-button-surface:active{background:var(--ids-comp-buttons-outlined-color-bg-surface-pressed);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-outlined-color-border-surface-pressed)}.ids-button.ids-button-outlined.ids-button-surface:disabled{background:var(--ids-comp-buttons-outlined-color-bg-surface-disabled);color:var(--ids-comp-buttons-outlined-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-outlined-color-border-surface-disabled)}.ids-button.ids-button-text.ids-button-primary{color:var(--ids-comp-buttons-text-color-fg-label-primary-default);background:var(--ids-comp-buttons-text-color-bg-primary-default);border-color:var(--ids-comp-buttons-text-color-border-primary-default)}.ids-button.ids-button-text.ids-button-primary:hover{background:var(--ids-comp-buttons-text-color-bg-primary-hovered);color:var(--ids-comp-buttons-text-color-fg-label-primary-hovered);border-color:var(--ids-comp-buttons-text-color-border-primary-hovered)}.ids-button.ids-button-text.ids-button-primary:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-primary-focused);color:var(--ids-comp-buttons-text-color-fg-label-primary-focused);border-color:var(--ids-comp-buttons-text-color-border-primary-focused)}.ids-button.ids-button-text.ids-button-primary:active{background:var(--ids-comp-buttons-text-color-bg-primary-pressed);color:var(--ids-comp-buttons-text-color-fg-label-primary-pressed);border-color:var(--ids-comp-buttons-text-color-border-primary-pressed)}.ids-button.ids-button-text.ids-button-primary:disabled{background:var(--ids-comp-buttons-text-color-bg-primary-disabled);color:var(--ids-comp-buttons-text-color-fg-label-primary-disabled);border-color:var(--ids-comp-buttons-text-color-border-primary-disabled)}.ids-button.ids-button-text.ids-button-secondary{color:var(--ids-comp-buttons-text-color-fg-label-secondary-default);background:var(--ids-comp-buttons-text-color-bg-secondary-default);border-color:var(--ids-comp-buttons-text-color-border-secondary-default)}.ids-button.ids-button-text.ids-button-secondary:hover{background:var(--ids-comp-buttons-text-color-bg-secondary-hovered);color:var(--ids-comp-buttons-text-color-fg-label-secondary-hovered);border-color:var(--ids-comp-buttons-text-color-border-secondary-hovered)}.ids-button.ids-button-text.ids-button-secondary:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-secondary-focused);color:var(--ids-comp-buttons-text-color-fg-label-secondary-focused);border-color:var(--ids-comp-buttons-text-color-border-secondary-focused)}.ids-button.ids-button-text.ids-button-secondary:active{background:var(--ids-comp-buttons-text-color-bg-secondary-pressed);color:var(--ids-comp-buttons-text-color-fg-label-secondary-pressed);border-color:var(--ids-comp-buttons-text-color-border-secondary-pressed)}.ids-button.ids-button-text.ids-button-secondary:disabled{background:var(--ids-comp-buttons-text-color-bg-secondary-disabled);color:var(--ids-comp-buttons-text-color-fg-label-secondary-disabled);border-color:var(--ids-comp-buttons-text-color-border-secondary-disabled)}.ids-button.ids-button-text.ids-button-brand{color:var(--ids-comp-buttons-text-color-fg-label-brand-default);background:var(--ids-comp-buttons-text-color-bg-brand-default);border-color:var(--ids-comp-buttons-text-color-border-brand-default)}.ids-button.ids-button-text.ids-button-brand:hover{background:var(--ids-comp-buttons-text-color-bg-brand-hovered);color:var(--ids-comp-buttons-text-color-fg-label-brand-hovered);border-color:var(--ids-comp-buttons-text-color-border-brand-hovered)}.ids-button.ids-button-text.ids-button-brand:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-brand-focused);color:var(--ids-comp-buttons-text-color-fg-label-brand-focused);border-color:var(--ids-comp-buttons-text-color-border-brand-focused)}.ids-button.ids-button-text.ids-button-brand:active{background:var(--ids-comp-buttons-text-color-bg-brand-pressed);color:var(--ids-comp-buttons-text-color-fg-label-brand-pressed);border-color:var(--ids-comp-buttons-text-color-border-brand-pressed)}.ids-button.ids-button-text.ids-button-brand:disabled{background:var(--ids-comp-buttons-text-color-bg-brand-disabled);color:var(--ids-comp-buttons-text-color-fg-label-brand-disabled);border-color:var(--ids-comp-buttons-text-color-border-brand-disabled)}.ids-button.ids-button-text.ids-button-error{color:var(--ids-comp-buttons-text-color-fg-label-error-default);background:var(--ids-comp-buttons-text-color-bg-error-default);border-color:var(--ids-comp-buttons-text-color-border-error-default)}.ids-button.ids-button-text.ids-button-error:hover{background:var(--ids-comp-buttons-text-color-bg-error-hovered);color:var(--ids-comp-buttons-text-color-fg-label-error-hovered);border-color:var(--ids-comp-buttons-text-color-border-error-hovered)}.ids-button.ids-button-text.ids-button-error:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-error-focused);color:var(--ids-comp-buttons-text-color-fg-label-error-focused);border-color:var(--ids-comp-buttons-text-color-border-error-focused)}.ids-button.ids-button-text.ids-button-error:active{background:var(--ids-comp-buttons-text-color-bg-error-pressed);color:var(--ids-comp-buttons-text-color-fg-label-error-pressed);border-color:var(--ids-comp-buttons-text-color-border-error-pressed)}.ids-button.ids-button-text.ids-button-success{color:var(--ids-comp-buttons-text-color-fg-label-success-default);background:var(--ids-comp-buttons-text-color-bg-success-default);border-color:var(--ids-comp-buttons-text-color-border-success-default)}.ids-button.ids-button-text.ids-button-success:hover{background:var(--ids-comp-buttons-text-color-bg-success-hovered);color:var(--ids-comp-buttons-text-color-fg-label-success-hovered);border-color:var(--ids-comp-buttons-text-color-border-success-hovered)}.ids-button.ids-button-text.ids-button-success:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-success-focused);color:var(--ids-comp-buttons-text-color-fg-label-success-focused);border-color:var(--ids-comp-buttons-text-color-border-success-focused)}.ids-button.ids-button-text.ids-button-success:active{background:var(--ids-comp-buttons-text-color-bg-success-pressed);color:var(--ids-comp-buttons-text-color-fg-label-success-pressed);border-color:var(--ids-comp-buttons-text-color-border-success-pressed)}.ids-button.ids-button-text.ids-button-warning{color:var(--ids-comp-buttons-text-color-fg-label-warning-default);background:var(--ids-comp-buttons-text-color-bg-warning-default);border-color:var(--ids-comp-buttons-text-color-border-warning-default)}.ids-button.ids-button-text.ids-button-warning:hover{background:var(--ids-comp-buttons-text-color-bg-warning-hovered);color:var(--ids-comp-buttons-text-color-fg-label-warning-hovered);border-color:var(--ids-comp-buttons-text-color-border-warning-hovered)}.ids-button.ids-button-text.ids-button-warning:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-warning-focused);color:var(--ids-comp-buttons-text-color-fg-label-warning-focused);border-color:var(--ids-comp-buttons-text-color-border-warning-focused)}.ids-button.ids-button-text.ids-button-warning:active{background:var(--ids-comp-buttons-text-color-bg-warning-pressed);color:var(--ids-comp-buttons-text-color-fg-label-warning-pressed);border-color:var(--ids-comp-buttons-text-color-border-warning-pressed)}.ids-button.ids-button-text.ids-button-light{color:var(--ids-comp-buttons-text-color-fg-label-light-default);background:var(--ids-comp-buttons-text-color-bg-light-default);border-color:var(--ids-comp-buttons-text-color-border-light-default)}.ids-button.ids-button-text.ids-button-light:hover{background:var(--ids-comp-buttons-text-color-bg-light-hovered);color:var(--ids-comp-buttons-text-color-fg-label-light-hovered);border-color:var(--ids-comp-buttons-text-color-border-light-hovered)}.ids-button.ids-button-text.ids-button-light:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-light-focused);color:var(--ids-comp-buttons-text-color-fg-label-light-focused);border-color:var(--ids-comp-buttons-text-color-border-light-focused)}.ids-button.ids-button-text.ids-button-light:active{background:var(--ids-comp-buttons-text-color-bg-light-pressed);color:var(--ids-comp-buttons-text-color-fg-label-light-pressed);border-color:var(--ids-comp-buttons-text-color-border-light-pressed)}.ids-button.ids-button-text.ids-button-light:disabled{background:var(--ids-comp-buttons-text-color-bg-light-disabled);color:var(--ids-comp-buttons-text-color-fg-label-light-disabled);border-color:var(--ids-comp-buttons-text-color-border-light-disabled)}.ids-button.ids-button-text.ids-button-dark{color:var(--ids-comp-buttons-text-color-fg-label-dark-default);background:var(--ids-comp-buttons-text-color-bg-dark-default);border-color:var(--ids-comp-buttons-text-color-border-dark-default)}.ids-button.ids-button-text.ids-button-dark:hover{background:var(--ids-comp-buttons-text-color-bg-dark-hovered);color:var(--ids-comp-buttons-text-color-fg-label-dark-hovered);border-color:var(--ids-comp-buttons-text-color-border-dark-hovered)}.ids-button.ids-button-text.ids-button-dark:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-dark-focused);color:var(--ids-comp-buttons-text-color-fg-label-dark-focused);border-color:var(--ids-comp-buttons-text-color-border-dark-focused)}.ids-button.ids-button-text.ids-button-dark:active{background:var(--ids-comp-buttons-text-color-bg-dark-pressed);color:var(--ids-comp-buttons-text-color-fg-label-dark-pressed);border-color:var(--ids-comp-buttons-text-color-border-dark-pressed)}.ids-button.ids-button-text.ids-button-dark:disabled{background:var(--ids-comp-buttons-text-color-bg-dark-disabled);color:var(--ids-comp-buttons-text-color-fg-label-dark-disabled);border-color:var(--ids-comp-buttons-text-color-border-dark-disabled)}.ids-button.ids-button-text.ids-button-surface{color:var(--ids-comp-buttons-text-color-fg-label-surface-default);background:var(--ids-comp-buttons-text-color-bg-surface-default);border-color:var(--ids-comp-buttons-text-color-border-surface-default)}.ids-button.ids-button-text.ids-button-surface:hover{background:var(--ids-comp-buttons-text-color-bg-surface-hovered);color:var(--ids-comp-buttons-text-color-fg-label-surface-hovered);border-color:var(--ids-comp-buttons-text-color-border-surface-hovered)}.ids-button.ids-button-text.ids-button-surface:focus{outline-offset:2px;background:var(--ids-comp-buttons-text-color-bg-surface-focused);color:var(--ids-comp-buttons-text-color-fg-label-surface-focused);border-color:var(--ids-comp-buttons-text-color-border-surface-focused)}.ids-button.ids-button-text.ids-button-surface:active{background:var(--ids-comp-buttons-text-color-bg-surface-pressed);color:var(--ids-comp-buttons-text-color-fg-label-surface-pressed);border-color:var(--ids-comp-buttons-text-color-border-surface-pressed)}.ids-button.ids-button-text.ids-button-surface:disabled{background:var(--ids-comp-buttons-text-color-bg-surface-disabled);color:var(--ids-comp-buttons-text-color-fg-label-surface-disabled);border-color:var(--ids-comp-buttons-text-color-border-surface-disabled)}
package/dist/button/button.plugin.js CHANGED
@@ -16,6 +16,8 @@ module.exports = function ButtonPlugin() {
16
16
  },
17
17
  '.ids-button:focus.ids-button-light': { outlineColor: 'var(--ids-comp-buttons-focused-outline-color-light-focused)' },
18
18
  '.ids-button:active': { outline: 'none' },
19
+ '.ids-button:not(:disabled)': { cursor: 'pointer' },
20
+ '.ids-button:disabled': { cursor: 'not-allowed' },
19
21
  '.ids-button *[icon-leading],.ids-button *[icon-trailing]': {
20
22
  gap: '10px',
21
23
  display: 'flex',
package/dist/checkbox/checkbox.css CHANGED
@@ -18,6 +18,7 @@
18
18
  -webkit-appearance: none;
19
19
  flex-shrink: 0;
20
20
  border-style: solid;
21
+ margin: 0;
21
22
  }
22
23
  .ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus {
23
24
  outline-offset: 2px;
@@ -63,6 +64,7 @@
63
64
  .ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon {
64
65
  height: var(--ids-comp-checkbox-input-size-icon-compact);
65
66
  width: var(--ids-comp-checkbox-input-size-icon-compact);
67
+ line-height: var(--ids-comp-checkbox-input-size-icon-compact);
66
68
  }
67
69
  .ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper {
68
70
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact);
@@ -97,6 +99,7 @@
97
99
  .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon {
98
100
  height: var(--ids-comp-checkbox-input-size-icon-comfortable);
99
101
  width: var(--ids-comp-checkbox-input-size-icon-comfortable);
102
+ line-height: var(--ids-comp-checkbox-input-size-icon-comfortable);
100
103
  }
101
104
  .ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper {
102
105
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable);
@@ -131,6 +134,7 @@
131
134
  .ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon {
132
135
  height: var(--ids-comp-checkbox-input-size-icon-spacious);
133
136
  width: var(--ids-comp-checkbox-input-size-icon-spacious);
137
+ line-height: var(--ids-comp-checkbox-input-size-icon-spacious);
134
138
  }
135
139
  .ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper {
136
140
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious);
@@ -165,6 +169,7 @@
165
169
  .ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon {
166
170
  height: var(--ids-comp-checkbox-input-size-icon-dense);
167
171
  width: var(--ids-comp-checkbox-input-size-icon-dense);
172
+ line-height: var(--ids-comp-checkbox-input-size-icon-dense);
168
173
  }
169
174
  .ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper {
170
175
  padding: var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense);