@crowdstrike/glide-core 0.22.0 → 0.24.0

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 (53) hide show
  1. package/dist/accordion.styles.js +22 -21
  2. package/dist/button-group.button.styles.js +46 -22
  3. package/dist/button-group.styles.js +7 -7
  4. package/dist/button.d.ts +3 -0
  5. package/dist/button.js +1 -1
  6. package/dist/button.styles.js +62 -42
  7. package/dist/checkbox-group.js +6 -5
  8. package/dist/checkbox-group.styles.js +5 -5
  9. package/dist/checkbox.d.ts +10 -2
  10. package/dist/checkbox.js +23 -17
  11. package/dist/checkbox.styles.js +46 -28
  12. package/dist/drawer.styles.js +6 -4
  13. package/dist/dropdown.d.ts +1 -1
  14. package/dist/dropdown.js +20 -18
  15. package/dist/dropdown.option.js +1 -1
  16. package/dist/dropdown.option.styles.js +26 -28
  17. package/dist/dropdown.styles.js +64 -58
  18. package/dist/icon-button.styles.js +44 -23
  19. package/dist/inline-alert.js +1 -1
  20. package/dist/inline-alert.styles.js +24 -21
  21. package/dist/input.styles.js +33 -25
  22. package/dist/label.styles.js +22 -27
  23. package/dist/menu.button.styles.js +6 -4
  24. package/dist/menu.js +1 -1
  25. package/dist/menu.link.styles.js +6 -4
  26. package/dist/menu.options.styles.js +12 -16
  27. package/dist/menu.styles.js +9 -6
  28. package/dist/modal.styles.js +16 -13
  29. package/dist/popover.js +1 -1
  30. package/dist/popover.styles.js +14 -14
  31. package/dist/radio-group.js +15 -15
  32. package/dist/radio-group.radio.d.ts +2 -1
  33. package/dist/radio-group.radio.js +1 -1
  34. package/dist/radio-group.radio.styles.js +31 -11
  35. package/dist/radio-group.styles.js +8 -10
  36. package/dist/split-button.primary-button.styles.js +41 -26
  37. package/dist/split-button.secondary-button.styles.js +61 -21
  38. package/dist/styles/focus-outline.js +1 -1
  39. package/dist/styles/variables.css +1 -1
  40. package/dist/tab.group.styles.js +6 -5
  41. package/dist/tab.panel.styles.js +1 -1
  42. package/dist/tab.styles.js +8 -7
  43. package/dist/tag.styles.js +27 -26
  44. package/dist/textarea.styles.js +22 -18
  45. package/dist/toasts.styles.js +2 -2
  46. package/dist/toasts.toast.styles.js +20 -20
  47. package/dist/toggle.styles.js +15 -7
  48. package/dist/tooltip.container.styles.js +14 -13
  49. package/dist/tooltip.js +1 -1
  50. package/dist/tooltip.styles.js +1 -1
  51. package/package.json +8 -9
  52. package/dist/library/get-parent-class-name.d.ts +0 -3
  53. package/dist/library/get-parent-class-name.js +0 -1
package/dist/dropdown.option.styles.js CHANGED
@@ -2,7 +2,7 @@ import{css}from"lit";export default[css`
2
2
  .component {
3
3
  align-items: center;
4
4
  block-size: var(--private-option-height);
5
- border-radius: var(--glide-core-spacing-sm);
5
+ border-radius: var(--glide-core-spacing-base-sm);
6
6
  display: flex;
7
7
  max-inline-size: 21.875rem;
8
8
  transition: background-color 100ms ease-in-out;
@@ -10,7 +10,9 @@ import{css}from"lit";export default[css`
10
10
 
11
11
  &.active {
12
12
  &:not(.disabled) {
13
- background-color: var(--glide-core-surface-hover);
13
+ background-color: var(
14
+ --glide-core-color-interactive-surface-container--hover
15
+ );
14
16
  }
15
17
  }
16
18
  }
@@ -18,40 +20,36 @@ import{css}from"lit";export default[css`
18
20
  .option {
19
21
  align-items: center;
20
22
  block-size: 100%;
21
- color: var(--glide-core-text-body-1);
23
+ color: var(--glide-core-color-static-text-default);
22
24
  display: flex;
23
25
  flex-grow: 1;
24
26
  overflow: hidden;
25
27
  user-select: none;
26
28
 
27
29
  &.large {
28
- font-family: var(--glide-core-body-sm-font-family);
29
- font-size: var(--glide-core-body-sm-font-size);
30
- font-style: var(--glide-core-body-sm-font-style);
31
- font-weight: var(--glide-core-body-sm-font-weight);
32
- line-height: var(--glide-core-body-sm-line-height);
30
+ font-family: var(--glide-core-typography-family-primary);
31
+ font-size: var(--glide-core-typography-size-body-default);
32
+ font-weight: var(--glide-core-typography-weight-regular);
33
33
  padding-inline-start: 0.625rem;
34
34
 
35
35
  &:not(.editable) {
36
- padding-inline-end: var(--glide-core-spacing-sm);
36
+ padding-inline-end: var(--glide-core-spacing-base-sm);
37
37
  }
38
38
  }
39
39
 
40
40
  &.small {
41
- font-family: var(--glide-core-body-xs-font-family);
42
- font-size: var(--glide-core-body-xs-font-size);
43
- font-style: var(--glide-core-body-xs-font-style);
44
- font-weight: var(--glide-core-body-xs-font-weight);
45
- line-height: var(--glide-core-body-xs-line-height);
46
- padding-inline-start: var(--glide-core-spacing-sm);
41
+ font-family: var(--glide-core-typography-family-primary);
42
+ font-size: var(--glide-core-typography-size-body-small);
43
+ font-weight: var(--glide-core-typography-weight-regular);
44
+ padding-inline-start: var(--glide-core-spacing-base-sm);
47
45
 
48
46
  &:not(.editable) {
49
- padding-inline-end: var(--glide-core-spacing-xs);
47
+ padding-inline-end: var(--glide-core-spacing-base-xs);
50
48
  }
51
49
  }
52
50
 
53
51
  &.disabled {
54
- color: var(--glide-core-icon-tertiary-disabled);
52
+ color: var(--glide-core-color-interactive-icon-default--disabled);
55
53
  }
56
54
  }
57
55
 
@@ -61,24 +59,24 @@ import{css}from"lit";export default[css`
61
59
 
62
60
  &.large {
63
61
  &::part(private-label-and-input-and-checkbox) {
64
- padding-inline-start: var(--glide-core-spacing-sm);
62
+ padding-inline-start: var(--glide-core-spacing-base-sm);
65
63
  }
66
64
 
67
65
  &:not(.editable) {
68
66
  &::part(private-label-and-input-and-checkbox) {
69
- padding-inline-end: var(--glide-core-spacing-sm);
67
+ padding-inline-end: var(--glide-core-spacing-base-sm);
70
68
  }
71
69
  }
72
70
  }
73
71
 
74
72
  &.small {
75
73
  &::part(private-label-and-input-and-checkbox) {
76
- padding-inline-start: var(--glide-core-spacing-xs);
74
+ padding-inline-start: var(--glide-core-spacing-base-xs);
77
75
  }
78
76
 
79
77
  &:not(.editable) {
80
78
  &::part(private-label-and-input-and-checkbox) {
81
- padding-inline-end: var(--glide-core-spacing-xs);
79
+ padding-inline-end: var(--glide-core-spacing-base-xs);
82
80
  }
83
81
  }
84
82
  }
@@ -110,7 +108,7 @@ import{css}from"lit";export default[css`
110
108
  &::slotted(*) {
111
109
  align-items: center;
112
110
  display: flex;
113
- padding-inline-end: var(--glide-core-spacing-xs);
111
+ padding-inline-end: var(--glide-core-spacing-base-xs);
114
112
  }
115
113
  }
116
114
 
@@ -155,7 +153,7 @@ import{css}from"lit";export default[css`
155
153
 
156
154
  > svg {
157
155
  flex-shrink: 0;
158
- padding-inline-start: var(--glide-core-spacing-xs);
156
+ padding-inline-start: var(--glide-core-spacing-base-xs);
159
157
  }
160
158
  }
161
159
 
@@ -166,24 +164,24 @@ import{css}from"lit";export default[css`
166
164
  border: none;
167
165
  display: flex;
168
166
  padding-block: 0;
169
- padding-inline-start: var(--glide-core-spacing-xs);
167
+ padding-inline-start: var(--glide-core-spacing-base-xs);
170
168
 
171
169
  &.active {
172
170
  &:not(.disabled) {
173
- color: var(--glide-core-text-primary-hover);
171
+ color: var(--glide-core-color-interactive-text-link--hover);
174
172
  }
175
173
  }
176
174
 
177
175
  &.disabled {
178
- color: var(--glide-core-icon-tertiary-disabled);
176
+ color: var(--glide-core-color-interactive-icon-default--disabled);
179
177
  }
180
178
 
181
179
  &.large {
182
- padding-inline-end: var(--glide-core-spacing-sm);
180
+ padding-inline-end: var(--glide-core-spacing-base-sm);
183
181
  }
184
182
 
185
183
  &.small {
186
- padding-inline-end: var(--glide-core-spacing-xs);
184
+ padding-inline-end: var(--glide-core-spacing-base-xs);
187
185
  }
188
186
 
189
187
  &:focus {
package/dist/dropdown.styles.js CHANGED
@@ -7,7 +7,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
7
7
  .component {
8
8
  --private-min-inline-size: 9.375rem;
9
9
 
10
- font-family: var(--glide-core-font-sans);
10
+ font-family: var(--glide-core-typography-family-primary);
11
11
  }
12
12
 
13
13
  .dropdown-and-options {
@@ -32,21 +32,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
32
32
  --private-button-and-input-height: 1.25rem;
33
33
 
34
34
  align-items: center;
35
- background-color: var(--glide-core-surface-base-lighter);
35
+ background-color: var(--glide-core-color-interactive-surface-container);
36
36
  block-size: 2.125rem;
37
- border: 1px solid var(--glide-core-border-base);
38
- border-radius: var(--glide-core-spacing-xs);
37
+ border: 1px solid var(--glide-core-color-static-stroke-primary);
38
+ border-radius: var(--glide-core-spacing-base-xs);
39
39
  box-sizing: border-box;
40
- color: var(--glide-core-text-body-1);
40
+ color: var(--glide-core-color-static-text-default);
41
41
  cursor: inherit;
42
42
  display: inline-flex;
43
43
  flex-grow: 1;
44
- font-size: var(--glide-core-body-sm-font-size);
45
- font-style: var(--glide-core-body-sm-font-style);
46
- font-weight: var(--glide-core-body-sm-font-weight);
47
- gap: var(--glide-core-spacing-xs);
44
+ font-size: var(--glide-core-typography-size-body-default);
45
+ font-weight: var(--glide-core-typography-weight-regular);
46
+ gap: var(--glide-core-spacing-base-xs);
48
47
  min-inline-size: var(--private-min-inline-size);
49
- padding-inline: var(--glide-core-spacing-sm);
48
+ padding-inline: var(--glide-core-spacing-base-sm);
50
49
  text-align: start;
51
50
  transition:
52
51
  background-color 200ms ease-in-out,
@@ -57,22 +56,24 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
57
56
  background-color: transparent;
58
57
  block-size: 1.5rem;
59
58
  border-color: transparent;
60
- border-radius: var(--glide-core-border-radius-round);
61
- column-gap: var(--glide-core-spacing-xxs);
59
+ border-radius: var(--glide-core-rounding-base-radius-round);
60
+ column-gap: var(--glide-core-spacing-base-xxs);
62
61
  min-inline-size: 3.75rem;
63
62
  padding-block: 0;
64
- padding-inline: var(--glide-core-spacing-sm);
63
+ padding-inline: var(--glide-core-spacing-base-sm);
65
64
  }
66
65
 
67
66
  &.disabled {
68
- background: var(--glide-core-surface-disabled);
69
- border-color: var(--glide-core-border-base-light);
70
- color: var(--glide-core-text-tertiary-disabled);
67
+ background: var(
68
+ --glide-core-color-interactive-surface-container--disabled
69
+ );
70
+ border-color: var(--glide-core-color-static-stroke-secondary);
71
+ color: var(--glide-core-color-interactive-text-default--disabled);
71
72
  }
72
73
 
73
74
  &.error {
74
- border-color: var(--glide-core-status-error);
75
- color: var(--glide-core-status-error);
75
+ border-color: var(--glide-core-color-error-stroke-primary);
76
+ color: var(--glide-core-color-error-stroke-primary);
76
77
  }
77
78
 
78
79
  &.readonly {
@@ -86,8 +87,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
86
87
  :hover,
87
88
  :has(.primary-button:focus-visible, .input:focus-visible)
88
89
  ):not(&.error, &.disabled, &.multiple, &.readonly) {
89
- background-color: var(--glide-core-surface-hover);
90
- color: var(--glide-core-text-body-1);
90
+ background-color: var(
91
+ --glide-core-color-interactive-surface-container--hover
92
+ );
93
+ color: var(--glide-core-color-static-text-default);
91
94
  }
92
95
  }
93
96
 
@@ -96,12 +99,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
96
99
  :has(.primary-button:hover),
97
100
  :has(.primary-button:focus-visible, .input:focus-visible)
98
101
  ):not(&.disabled, &.error, &.quiet, &.readonly) {
99
- border-color: var(--glide-core-border-focus);
102
+ border-color: var(--glide-core-color-interactive-stroke-focus);
100
103
  }
101
104
 
102
105
  &:has(.primary-button:focus-visible, .input:focus-visible) {
103
106
  &.quiet {
104
- border-color: var(--glide-core-border-focus);
107
+ border-color: var(--glide-core-color-interactive-stroke-focus);
105
108
  }
106
109
  }
107
110
  }
@@ -109,11 +112,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
109
112
  .options-and-footer {
110
113
  --private-border-width: 1px;
111
114
 
112
- background-color: var(--glide-core-surface-modal);
115
+ background-color: var(
116
+ --glide-core-private-color-dialog-and-modal-surface-container
117
+ );
113
118
  border: var(--private-border-width) solid
114
- var(--glide-core-border-base-lighter);
115
- border-radius: var(--glide-core-spacing-xs);
116
- box-shadow: var(--glide-core-shadow-lg);
119
+ var(--glide-core-color-static-surface-container-secondary);
120
+ border-radius: var(--glide-core-rounding-base-radius-sm);
121
+ box-shadow: var(--glide-core-effect-floating);
117
122
  inset: unset;
118
123
  min-inline-size: var(--private-min-inline-size);
119
124
  padding: 0;
@@ -123,8 +128,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
123
128
  .options {
124
129
  box-sizing: border-box;
125
130
  max-block-size: calc(
126
- var(--private-option-height) * 9 + var(--glide-core-spacing-xxxs) * 2 +
127
- var(--private-border-width) * 2
131
+ var(--private-option-height) * 9 + var(--glide-core-spacing-base-xxxs) *
132
+ 2 + var(--private-border-width) * 2
128
133
  );
129
134
  overflow: auto;
130
135
  scroll-behavior: smooth;
@@ -144,15 +149,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
144
149
 
145
150
  .default-slot {
146
151
  display: block;
147
- padding: var(--glide-core-spacing-xxxs);
152
+ padding: var(--glide-core-spacing-base-xxxs);
148
153
  }
149
154
 
150
155
  .footer {
151
- background-color: var(--glide-core-surface-base-gray-lighter);
156
+ background-color: var(--glide-core-color-static-surface-header);
152
157
  display: none;
153
- inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
158
+ inline-size: calc(100% - var(--glide-core-spacing-base-xxxs) * 2);
154
159
  inset-block-end: 0;
155
- padding: var(--glide-core-spacing-xxxs);
160
+ padding: var(--glide-core-spacing-base-xxxs);
156
161
 
157
162
  /*
158
163
  "sticky" is a little hack so that footer is absolutely positioned but
@@ -169,10 +174,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
169
174
  align-items: center;
170
175
  background-color: transparent;
171
176
  border: none;
172
- border-radius: 0.75rem;
177
+ border-radius: var(--glide-core-rounding-base-radius-md);
173
178
  display: flex;
174
- font-family: var(--glide-core-body-sm-font-family);
175
- font-weight: var(--glide-core-body-sm-font-weight);
179
+ font-family: var(--glide-core-typography-family-primary);
180
+ font-weight: var(--glide-core-typography-weight-regular);
176
181
  inline-size: 100%;
177
182
  line-height: 100%;
178
183
  text-align: start;
@@ -181,18 +186,18 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
181
186
  --private-size: 1rem;
182
187
 
183
188
  column-gap: 0.625rem;
184
- font-size: var(--glide-core-body-sm-font-size);
189
+ font-size: var(--glide-core-typography-size-body-default);
185
190
  padding-block: 0.375rem;
186
- padding-inline: var(--glide-core-spacing-sm);
191
+ padding-inline: var(--glide-core-spacing-base-sm);
187
192
  }
188
193
 
189
194
  &.small {
190
195
  --private-size: 0.875rem;
191
196
 
192
- column-gap: var(--glide-core-spacing-xs);
193
- font-size: var(--glide-core-body-xs-font-size);
194
- padding-block: var(--glide-core-spacing-xxxs);
195
- padding-inline: var(--glide-core-spacing-xs);
197
+ column-gap: var(--glide-core-spacing-base-xs);
198
+ font-size: var(--glide-core-typography-size-body-small);
199
+ padding-block: var(--glide-core-spacing-base-xxxs);
200
+ padding-inline: var(--glide-core-spacing-base-xs);
196
201
  }
197
202
 
198
203
  &:focus {
@@ -205,13 +210,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
205
210
 
206
211
  &:focus,
207
212
  &:hover {
208
- background-color: var(--glide-core-surface-hover);
213
+ background-color: var(
214
+ --glide-core-color-interactive-surface-container--hover
215
+ );
209
216
  }
210
217
  }
211
218
 
212
219
  .select-all {
213
- background-color: var(--glide-core-surface-base-gray-lighter);
214
- padding: var(--glide-core-spacing-xxxs);
220
+ background-color: var(--glide-core-color-static-surface-header);
221
+ padding: var(--glide-core-spacing-base-xxxs);
215
222
 
216
223
  &:not([hidden]) {
217
224
  display: block;
@@ -219,27 +226,26 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
219
226
  }
220
227
 
221
228
  .no-results {
222
- font-family: var(--glide-core-body-sm-font-family);
223
- font-size: var(--glide-core-body-sm-font-size);
224
- font-weight: var(--glide-core-body-sm-font-weight);
225
- line-height: var(--glide-core-body-sm-line-height);
229
+ font-family: var(--glide-core-typography-family-primary);
230
+ font-size: var(--glide-core-typography-size-body-default);
231
+ font-weight: var(--glide-core-typography-weight-regular);
226
232
  padding: 0.625rem 0.875rem;
227
233
  text-transform: capitalize;
228
234
  }
229
235
 
230
236
  .placeholder {
231
- color: var(--glide-core-text-placeholder);
237
+ color: var(--glide-core-color-interactive-text-placeholder);
232
238
 
233
239
  &.quiet {
234
240
  &:not(.disabled) {
235
- color: var(--glide-core-text-body-1);
241
+ color: var(--glide-core-color-static-text-default);
236
242
  }
237
243
  }
238
244
  }
239
245
 
240
246
  .tags {
241
247
  display: grid;
242
- gap: var(--glide-core-spacing-xs);
248
+ gap: var(--glide-core-spacing-base-xs);
243
249
 
244
250
  /*
245
251
  Tags will shrink down to zero and never overflow if they don't have a minimum
@@ -275,15 +281,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
275
281
 
276
282
  .tag-overflow-text {
277
283
  align-content: center;
278
- color: var(--glide-core-text-link);
279
- margin-inline-end: var(--glide-core-spacing-md);
284
+ color: var(--glide-core-color-interactive-text-link);
285
+ margin-inline-end: var(--glide-core-spacing-base-md);
280
286
  white-space: nowrap;
281
287
  }
282
288
 
283
289
  .single-select-icon-slot {
284
290
  &.quiet {
285
291
  &::slotted(*) {
286
- margin-inline-end: var(--glide-core-spacing-xxs);
292
+ margin-inline-end: var(--glide-core-spacing-base-xxs);
287
293
  }
288
294
  }
289
295
 
@@ -331,7 +337,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
331
337
 
332
338
  .edit-button {
333
339
  display: flex;
334
- margin-inline-end: var(--glide-core-spacing-xxs);
340
+ margin-inline-end: var(--glide-core-spacing-base-xxs);
335
341
  }
336
342
 
337
343
  .input-tooltip {
@@ -355,7 +361,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
355
361
  border: none;
356
362
  cursor: inherit;
357
363
  flex-grow: 1;
358
- font-family: var(--glide-core-font-sans);
364
+ font-family: var(--glide-core-typography-family-primary);
359
365
  font-size: inherit;
360
366
  inline-size: 100%;
361
367
  min-inline-size: 3.75rem;
@@ -375,8 +381,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
375
381
  }
376
382
 
377
383
  &::placeholder {
378
- color: var(--glide-core-text-placeholder);
379
- font-family: var(--glide-core-font-sans);
384
+ color: var(--glide-core-color-interactive-text-placeholder);
385
+ font-family: var(--glide-core-typography-family-primary);
380
386
  }
381
387
  }
382
388
 
package/dist/icon-button.styles.js CHANGED
@@ -10,7 +10,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
10
10
  align-items: center;
11
11
  block-size: var(--private-size, 1.625rem);
12
12
  border-color: transparent;
13
- border-radius: 0.5rem;
13
+ border-radius: var(--glide-core-rounding-base-radius-sm);
14
14
  border-style: solid;
15
15
  border-width: 1px;
16
16
  cursor: pointer;
@@ -32,50 +32,68 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
32
32
  }
33
33
 
34
34
  &.primary {
35
- background-color: var(--glide-core-surface-primary);
35
+ background-color: var(
36
+ --glide-core-color-interactive-surface-container-active
37
+ );
36
38
  border-color: transparent;
37
- color: var(--private-icon-color, var(--glide-core-icon-selected));
39
+ color: var(
40
+ --private-icon-color,
41
+ var(--glide-core-private-color-button-icon-primary)
42
+ );
38
43
 
39
44
  &:disabled {
40
- background-color: var(--glide-core-surface-base-gray-light);
45
+ background-color: var(
46
+ --glide-core-color-static-surface-container-secondary
47
+ );
41
48
  border-color: transparent;
42
- color: var(--glide-core-icon-tertiary-disabled);
49
+ color: var(--glide-core-color-interactive-icon-default--disabled);
43
50
  }
44
51
 
45
52
  &:not(:disabled):active {
46
- background-color: var(--glide-core-surface-selected);
53
+ background-color: var(
54
+ --glide-core-private-color-button-surface-active
55
+ );
47
56
  border-color: transparent;
48
- color: var(--glide-core-icon-selected);
57
+ color: var(--glide-core-color-interactive-icon-default--active);
49
58
  }
50
59
 
51
60
  &:not(:active):hover:not(:disabled) {
52
- background-color: var(--glide-core-surface-hover);
61
+ background-color: var(
62
+ --glide-core-color-interactive-surface-container--hover
63
+ );
53
64
  border-color: transparent;
54
- box-shadow: var(--glide-core-glow-sm);
55
- color: var(--glide-core-icon-primary);
65
+ box-shadow: var(--glide-core-effect-hovered);
66
+ color: var(--glide-core-color-interactive-icon-link);
56
67
  }
57
68
  }
58
69
 
59
70
  &.secondary {
60
- background-color: transparent;
61
- border-color: transparent;
62
- color: var(--private-icon-color, var(--glide-core-icon-default));
71
+ background-color: var(--glide-core-color-interactive-surface-container);
72
+ color: var(
73
+ --private-icon-color,
74
+ var(--glide-core-color-interactive-icon-default)
75
+ );
63
76
 
64
77
  &:disabled {
65
- background-color: transparent;
66
- color: var(--glide-core-icon-tertiary-disabled);
78
+ background-color: var(--glide-core-color-static-surface-container);
79
+ border-color: transparent;
80
+ color: var(--glide-core-color-interactive-icon-default--disabled);
67
81
  }
68
82
 
69
83
  &:not(:disabled):active {
70
- background-color: var(--glide-core-surface-selected);
84
+ background-color: var(
85
+ --glide-core-private-color-button-surface-active
86
+ );
71
87
  border-color: transparent;
72
- color: var(--glide-core-icon-selected);
88
+ color: var(--glide-core-color-interactive-icon-default--active);
73
89
  }
74
90
 
75
91
  &:not(:active):hover:not(:disabled) {
76
- background-color: var(--glide-core-surface-hover);
92
+ background-color: var(
93
+ --glide-core-color-interactive-surface-container--hover
94
+ );
77
95
  border-color: transparent;
78
- color: var(--glide-core-icon-primary);
96
+ color: var(--glide-core-color-interactive-icon-link);
79
97
  }
80
98
  }
81
99
 
@@ -83,7 +101,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
83
101
  background-color: transparent;
84
102
  block-size: var(--private-size, 1rem);
85
103
  border-color: transparent;
86
- color: var(--private-icon-color, var(--glide-core-icon-default));
104
+ color: var(
105
+ --private-icon-color,
106
+ var(--glide-core-color-interactive-icon-default)
107
+ );
87
108
  inline-size: var(--private-size, 1rem);
88
109
  padding: 0;
89
110
 
@@ -92,17 +113,17 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
92
113
  }
93
114
 
94
115
  &:disabled {
95
- color: var(--glide-core-icon-tertiary-disabled);
116
+ color: var(--glide-core-color-interactive-icon-default--disabled);
96
117
  }
97
118
 
98
119
  &:not(:disabled):active {
99
- color: var(--glide-core-icon-active);
120
+ color: var(--glide-core-color-interactive-icon-active);
100
121
  }
101
122
 
102
123
  &:not(:active):hover:not(:disabled) {
103
124
  color: var(
104
125
  --private-hovered-icon-color,
105
- var(--glide-core-icon-primary-hover)
126
+ var(--glide-core-color-interactive-icon-active--hover)
106
127
  );
107
128
  }
108
129
  }
package/dist/inline-alert.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};