@i-cell/ids-styles 0.0.15-beta.8 → 0.0.15

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 (79) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2433 -1625
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2744 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
  77. /package/dist/{fieldset → form-elements/fieldset}/fieldset.css +0 -0
  78. /package/dist/{fieldset → form-elements/fieldset}/fieldset.min.css +0 -0
  79. /package/dist/{fieldset → form-elements/fieldset}/fieldset.plugin.js +0 -0
package/dist/avatar/avatar.plugin.js CHANGED
@@ -23,13 +23,7 @@ module.exports = function AvatarPlugin() {
23
23
  height: '100%',
24
24
  },
25
25
  '.ids-avatar .ids-avatar-image': { borderRadius: '50%', verticalAlign: 'middle', maxWidth: 'none' },
26
- '.ids-avatar:focus': {
27
- outlineOffset: '2px',
28
- outlineStyle: 'solid',
29
- outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
30
- outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
31
- },
32
- '.ids-avatar:focus.ids-avatar-light': { outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)' },
26
+ '.ids-avatar:focus,.ids-avatar:focus-visible': { outlineOffset: '2px', outlineStyle: 'solid' },
33
27
  '.ids-avatar:active': { outline: 'none' },
34
28
  '.ids-avatar.ids-avatar-compact': {
35
29
  width: 'var(--ids-comp-avatar-size-height-compact)',
@@ -44,6 +38,9 @@ module.exports = function AvatarPlugin() {
44
38
  letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-compact)',
45
39
  lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-compact)',
46
40
  },
41
+ '.ids-avatar.ids-avatar-compact:focus,.ids-avatar.ids-avatar-compact:focus-visible': {
42
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
43
+ },
47
44
  '.ids-avatar.ids-avatar-compact:has(.ids-avatar-image)': { padding: '0' },
48
45
  '.ids-avatar.ids-avatar-compact .ids-avatar-image': {
49
46
  width: 'var(--ids-comp-avatar-size-width-compact)',
@@ -62,6 +59,9 @@ module.exports = function AvatarPlugin() {
62
59
  letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-comfortable)',
63
60
  lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-comfortable)',
64
61
  },
62
+ '.ids-avatar.ids-avatar-comfortable:focus,.ids-avatar.ids-avatar-comfortable:focus-visible': {
63
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
64
+ },
65
65
  '.ids-avatar.ids-avatar-comfortable:has(.ids-avatar-image)': { padding: '0' },
66
66
  '.ids-avatar.ids-avatar-comfortable .ids-avatar-image': {
67
67
  width: 'var(--ids-comp-avatar-size-width-comfortable)',
@@ -80,6 +80,9 @@ module.exports = function AvatarPlugin() {
80
80
  letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-spacious)',
81
81
  lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-spacious)',
82
82
  },
83
+ '.ids-avatar.ids-avatar-spacious:focus,.ids-avatar.ids-avatar-spacious:focus-visible': {
84
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
85
+ },
83
86
  '.ids-avatar.ids-avatar-spacious:has(.ids-avatar-image)': { padding: '0' },
84
87
  '.ids-avatar.ids-avatar-spacious .ids-avatar-image': {
85
88
  width: 'var(--ids-comp-avatar-size-width-spacious)',
@@ -98,6 +101,9 @@ module.exports = function AvatarPlugin() {
98
101
  letterSpacing: 'var(--ids-comp-avatar-initials-typography-letter-spacing-dense)',
99
102
  lineHeight: 'var(--ids-comp-avatar-initials-typography-line-height-dense)',
100
103
  },
104
+ '.ids-avatar.ids-avatar-dense:focus,.ids-avatar.ids-avatar-dense:focus-visible': {
105
+ outlineWidth: 'var(--ids-comp-avatar-focused-outline-size-outline)',
106
+ },
101
107
  '.ids-avatar.ids-avatar-dense:has(.ids-avatar-image)': { padding: '0' },
102
108
  '.ids-avatar.ids-avatar-dense .ids-avatar-image': {
103
109
  width: 'var(--ids-comp-avatar-size-width-dense)',
@@ -112,9 +118,10 @@ module.exports = function AvatarPlugin() {
112
118
  background: 'var(--ids-comp-avatar-color-bg-primary-hovered)',
113
119
  borderColor: 'var(--ids-comp-avatar-color-border-primary-hovered)',
114
120
  },
115
- '.ids-avatar.ids-avatar-primary:focus': {
121
+ '.ids-avatar.ids-avatar-primary:focus,.ids-avatar.ids-avatar-primary:focus-visible': {
116
122
  background: 'var(--ids-comp-avatar-color-bg-primary-focused)',
117
123
  borderColor: 'var(--ids-comp-avatar-color-border-primary-focused)',
124
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
118
125
  },
119
126
  '.ids-avatar.ids-avatar-primary:active': {
120
127
  background: 'var(--ids-comp-avatar-color-bg-primary-pressed)',
@@ -130,9 +137,10 @@ module.exports = function AvatarPlugin() {
130
137
  background: 'var(--ids-comp-avatar-color-bg-secondary-hovered)',
131
138
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-hovered)',
132
139
  },
133
- '.ids-avatar.ids-avatar-secondary:focus': {
140
+ '.ids-avatar.ids-avatar-secondary:focus,.ids-avatar.ids-avatar-secondary:focus-visible': {
134
141
  background: 'var(--ids-comp-avatar-color-bg-secondary-focused)',
135
142
  borderColor: 'var(--ids-comp-avatar-color-border-secondary-focused)',
143
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
136
144
  },
137
145
  '.ids-avatar.ids-avatar-secondary:active': {
138
146
  background: 'var(--ids-comp-avatar-color-bg-secondary-pressed)',
@@ -148,9 +156,10 @@ module.exports = function AvatarPlugin() {
148
156
  background: 'var(--ids-comp-avatar-color-bg-light-hovered)',
149
157
  borderColor: 'var(--ids-comp-avatar-color-border-light-hovered)',
150
158
  },
151
- '.ids-avatar.ids-avatar-light:focus': {
159
+ '.ids-avatar.ids-avatar-light:focus,.ids-avatar.ids-avatar-light:focus-visible': {
152
160
  background: 'var(--ids-comp-avatar-color-bg-light-focused)',
153
161
  borderColor: 'var(--ids-comp-avatar-color-border-light-focused)',
162
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-light-focused)',
154
163
  },
155
164
  '.ids-avatar.ids-avatar-light:active': {
156
165
  background: 'var(--ids-comp-avatar-color-bg-light-pressed)',
@@ -166,9 +175,10 @@ module.exports = function AvatarPlugin() {
166
175
  background: 'var(--ids-comp-avatar-color-bg-dark-hovered)',
167
176
  borderColor: 'var(--ids-comp-avatar-color-border-dark-hovered)',
168
177
  },
169
- '.ids-avatar.ids-avatar-dark:focus': {
178
+ '.ids-avatar.ids-avatar-dark:focus,.ids-avatar.ids-avatar-dark:focus-visible': {
170
179
  background: 'var(--ids-comp-avatar-color-bg-dark-focused)',
171
180
  borderColor: 'var(--ids-comp-avatar-color-border-dark-focused)',
181
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
172
182
  },
173
183
  '.ids-avatar.ids-avatar-dark:active': {
174
184
  background: 'var(--ids-comp-avatar-color-bg-dark-pressed)',
@@ -184,9 +194,10 @@ module.exports = function AvatarPlugin() {
184
194
  background: 'var(--ids-comp-avatar-color-bg-surface-hovered)',
185
195
  borderColor: 'var(--ids-comp-avatar-color-border-surface-hovered)',
186
196
  },
187
- '.ids-avatar.ids-avatar-surface:focus': {
197
+ '.ids-avatar.ids-avatar-surface:focus,.ids-avatar.ids-avatar-surface:focus-visible': {
188
198
  background: 'var(--ids-comp-avatar-color-bg-surface-focused)',
189
199
  borderColor: 'var(--ids-comp-avatar-color-border-surface-focused)',
200
+ outlineColor: 'var(--ids-comp-avatar-focused-outline-color-dark-focused)',
190
201
  },
191
202
  '.ids-avatar.ids-avatar-surface:active': {
192
203
  background: 'var(--ids-comp-avatar-color-bg-surface-pressed)',