@aurodesignsystem/auro-accordion 5.2.5 → 6.0.0-rc-1.1

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 (96) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/NOTICE +2 -0
  3. package/README.md +16 -50
  4. package/demo/api.html +1 -1
  5. package/demo/api.js +2 -1
  6. package/demo/api.md +13 -7
  7. package/demo/api.min.js +16 -2028
  8. package/demo/auro-accordion.min.js +727 -0
  9. package/demo/index.js +12 -14
  10. package/demo/index.min.js +13 -2024
  11. package/dist/auro-accordion-B6aPKaGa.js +113 -0
  12. package/dist/index.d.ts +121 -0
  13. package/dist/index.js +1 -0
  14. package/dist/registered.js +1 -0
  15. package/package.json +44 -134
  16. package/.husky/commit-msg +0 -1
  17. package/.husky/pre-commit +0 -1
  18. package/.vscode/settings.json +0 -8
  19. package/apiExamples/accordionGroup.html +0 -47
  20. package/apiExamples/accordionGroupLg.html +0 -47
  21. package/apiExamples/accordionGroupSm.html +0 -47
  22. package/apiExamples/alignChevronRight.html +0 -15
  23. package/apiExamples/alignRight.html +0 -15
  24. package/apiExamples/basic.html +0 -15
  25. package/apiExamples/chevronNone.html +0 -15
  26. package/apiExamples/chevronRight.html +0 -15
  27. package/apiExamples/custom.html +0 -15
  28. package/apiExamples/customGroup.html +0 -47
  29. package/apiExamples/disabled.html +0 -15
  30. package/apiExamples/disabledGroup.html +0 -47
  31. package/apiExamples/emphasis.html +0 -47
  32. package/apiExamples/expanded.html +0 -17
  33. package/apiExamples/expanded.js +0 -11
  34. package/apiExamples/noToggleExpanded.html +0 -47
  35. package/coverage/lcov-report/base.css +0 -224
  36. package/coverage/lcov-report/block-navigation.js +0 -87
  37. package/coverage/lcov-report/favicon.png +0 -0
  38. package/coverage/lcov-report/index.html +0 -131
  39. package/coverage/lcov-report/prettify.css +0 -1
  40. package/coverage/lcov-report/prettify.js +0 -2
  41. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  42. package/coverage/lcov-report/sorter.js +0 -196
  43. package/coverage/lcov-report/src/auro-accordion-button.js.html +0 -283
  44. package/coverage/lcov-report/src/auro-accordion-group.js.html +0 -538
  45. package/coverage/lcov-report/src/auro-accordion.js.html +0 -895
  46. package/coverage/lcov-report/src/iconVersion.js.html +0 -85
  47. package/coverage/lcov-report/src/index.html +0 -161
  48. package/coverage/lcov-report/src/styles/color-css.js.html +0 -91
  49. package/coverage/lcov-report/src/styles/index.html +0 -161
  50. package/coverage/lcov-report/src/styles/style-button-css.js.html +0 -91
  51. package/coverage/lcov-report/src/styles/style-css.js.html +0 -91
  52. package/coverage/lcov-report/src/styles/tokens-css.js.html +0 -91
  53. package/coverage/lcov.info +0 -682
  54. package/dist/auro-accordion__bundled.js +0 -2023
  55. package/dist/src/auro-accordion-button.d.ts +0 -19
  56. package/dist/src/auro-accordion-button.d.ts.map +0 -1
  57. package/dist/src/auro-accordion-group.d.ts +0 -61
  58. package/dist/src/auro-accordion-group.d.ts.map +0 -1
  59. package/dist/src/auro-accordion.d.ts +0 -106
  60. package/dist/src/auro-accordion.d.ts.map +0 -1
  61. package/dist/src/iconVersion.d.ts +0 -3
  62. package/dist/src/iconVersion.d.ts.map +0 -1
  63. package/dist/src/styles/color-css.d.ts +0 -3
  64. package/dist/src/styles/color-css.d.ts.map +0 -1
  65. package/dist/src/styles/style-button-css.d.ts +0 -3
  66. package/dist/src/styles/style-button-css.d.ts.map +0 -1
  67. package/dist/src/styles/style-css.d.ts +0 -3
  68. package/dist/src/styles/style-css.d.ts.map +0 -1
  69. package/dist/src/styles/tokens-css.d.ts +0 -3
  70. package/dist/src/styles/tokens-css.d.ts.map +0 -1
  71. package/dist/test/auro-accordion-group.test.d.ts +0 -2
  72. package/dist/test/auro-accordion-group.test.d.ts.map +0 -1
  73. package/dist/test/auro-accordion.test.d.ts +0 -2
  74. package/dist/test/auro-accordion.test.d.ts.map +0 -1
  75. package/index.js +0 -3
  76. package/packageScripts/postinstall.mjs +0 -28
  77. package/scripts/version.mjs +0 -3
  78. package/scripts/wca/auro-accordion.js +0 -12
  79. package/src/auro-accordion-button.js +0 -66
  80. package/src/auro-accordion-group.js +0 -151
  81. package/src/auro-accordion.js +0 -270
  82. package/src/iconVersion.js +0 -1
  83. package/src/styles/color-css.js +0 -2
  84. package/src/styles/color.css +0 -43
  85. package/src/styles/color.scss +0 -75
  86. package/src/styles/style-button-css.js +0 -2
  87. package/src/styles/style-button.css +0 -63
  88. package/src/styles/style-button.scss +0 -86
  89. package/src/styles/style-css.js +0 -2
  90. package/src/styles/style.css +0 -353
  91. package/src/styles/style.scss +0 -208
  92. package/src/styles/tokens-css.js +0 -2
  93. package/src/styles/tokens.css +0 -7
  94. package/src/styles/tokens.scss +0 -9
  95. package/test/auro-accordion-group.test.js +0 -230
  96. package/test/auro-accordion.test.js +0 -104
@@ -1,353 +0,0 @@
1
- /* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
2
- /*
3
- * Copyright (c) Alaska Air. All rights reserved. Licensed under the Apache-2.0 license
4
- * See LICENSE in the project root for license information.
5
- */
6
- .body-default {
7
- font-size: var(--wcss-body-default-font-size, 1rem);
8
- line-height: var(--wcss-body-default-line-height, 1.5rem);
9
- }
10
-
11
- .body-default, .body-lg {
12
- font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
13
- font-weight: var(--wcss-body-weight, 450);
14
- letter-spacing: var(--wcss-body-letter-spacing, 0);
15
- }
16
-
17
- .body-lg {
18
- font-size: var(--wcss-body-lg-font-size, 1.125rem);
19
- line-height: var(--wcss-body-lg-line-height, 1.625rem);
20
- }
21
-
22
- .body-sm {
23
- font-size: var(--wcss-body-sm-font-size, 0.875rem);
24
- line-height: var(--wcss-body-sm-line-height, 1.25rem);
25
- }
26
-
27
- .body-sm, .body-xs {
28
- font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
29
- font-weight: var(--wcss-body-weight, 450);
30
- letter-spacing: var(--wcss-body-letter-spacing, 0);
31
- }
32
-
33
- .body-xs {
34
- font-size: var(--wcss-body-xs-font-size, 0.75rem);
35
- line-height: var(--wcss-body-xs-line-height, 1rem);
36
- }
37
-
38
- .body-2xs {
39
- font-family: var(--wcss-body-family, "AS Circular"), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
40
- font-size: var(--wcss-body-2xs-font-size, 0.625rem);
41
- font-weight: var(--wcss-body-weight, 450);
42
- letter-spacing: var(--wcss-body-letter-spacing, 0);
43
- line-height: var(--wcss-body-2xs-line-height, 0.875rem);
44
- }
45
-
46
- .display-2xl {
47
- font-family: var(--wcss-display-2xl-family, "AS Circular"), var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
48
- font-size: var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));
49
- font-weight: var(--wcss-display-2xl-weight, 300);
50
- letter-spacing: var(--wcss-display-2xl-letter-spacing, 0);
51
- line-height: var(--wcss-display-2xl-line-height, 1.3);
52
- }
53
-
54
- .display-xl {
55
- font-family: var(--wcss-display-xl-family, "AS Circular"), var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
56
- font-size: var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));
57
- font-weight: var(--wcss-display-xl-weight, 300);
58
- letter-spacing: var(--wcss-display-xl-letter-spacing, 0);
59
- line-height: var(--wcss-display-xl-line-height, 1.3);
60
- }
61
-
62
- .display-lg {
63
- font-family: var(--wcss-display-lg-family, "AS Circular"), var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
64
- font-size: var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));
65
- font-weight: var(--wcss-display-lg-weight, 300);
66
- letter-spacing: var(--wcss-display-lg-letter-spacing, 0);
67
- line-height: var(--wcss-display-lg-line-height, 1.3);
68
- }
69
-
70
- .display-md {
71
- font-family: var(--wcss-display-md-family, "AS Circular"), var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
72
- font-size: var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));
73
- font-weight: var(--wcss-display-md-weight, 300);
74
- letter-spacing: var(--wcss-display-md-letter-spacing, 0);
75
- line-height: var(--wcss-display-md-line-height, 1.3);
76
- }
77
-
78
- .display-sm {
79
- font-family: var(--wcss-display-sm-family, "AS Circular"), var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
80
- font-size: var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));
81
- font-weight: var(--wcss-display-sm-weight, 300);
82
- letter-spacing: var(--wcss-display-sm-letter-spacing, 0);
83
- line-height: var(--wcss-display-sm-line-height, 1.3);
84
- }
85
-
86
- .display-xs {
87
- font-family: var(--wcss-display-xs-family, "AS Circular"), var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
88
- font-size: var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));
89
- font-weight: var(--wcss-display-xs-weight, 300);
90
- letter-spacing: var(--wcss-display-xs-letter-spacing, 0);
91
- line-height: var(--wcss-display-xs-line-height, 1.3);
92
- }
93
-
94
- .heading-xl {
95
- font-family: var(--wcss-heading-xl-family, "AS Circular"), var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
96
- font-size: var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));
97
- font-weight: var(--wcss-heading-xl-weight, 300);
98
- letter-spacing: var(--wcss-heading-xl-letter-spacing, 0);
99
- line-height: var(--wcss-heading-xl-line-height, 1.3);
100
- }
101
-
102
- .heading-lg {
103
- font-family: var(--wcss-heading-lg-family, "AS Circular"), var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
104
- font-size: var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));
105
- font-weight: var(--wcss-heading-lg-weight, 300);
106
- letter-spacing: var(--wcss-heading-lg-letter-spacing, 0);
107
- line-height: var(--wcss-heading-lg-line-height, 1.3);
108
- }
109
-
110
- .heading-md {
111
- font-family: var(--wcss-heading-md-family, "AS Circular"), var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
112
- font-size: var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));
113
- font-weight: var(--wcss-heading-md-weight, 300);
114
- letter-spacing: var(--wcss-heading-md-letter-spacing, 0);
115
- line-height: var(--wcss-heading-md-line-height, 1.3);
116
- }
117
-
118
- .heading-sm {
119
- font-family: var(--wcss-heading-sm-family, "AS Circular"), var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
120
- font-size: var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));
121
- font-weight: var(--wcss-heading-sm-weight, 300);
122
- letter-spacing: var(--wcss-heading-sm-letter-spacing, 0);
123
- line-height: var(--wcss-heading-sm-line-height, 1.3);
124
- }
125
-
126
- .heading-xs {
127
- font-family: var(--wcss-heading-xs-family, "AS Circular"), var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
128
- font-size: var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));
129
- font-weight: var(--wcss-heading-xs-weight, 450);
130
- letter-spacing: var(--wcss-heading-xs-letter-spacing, 0);
131
- line-height: var(--wcss-heading-xs-line-height, 1.3);
132
- }
133
-
134
- .heading-2xs {
135
- font-family: var(--wcss-heading-2xs-family, "AS Circular"), var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
136
- font-size: var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));
137
- font-weight: var(--wcss-heading-2xs-weight, 450);
138
- letter-spacing: var(--wcss-heading-2xs-letter-spacing, 0);
139
- line-height: var(--wcss-heading-2xs-line-height, 1.3);
140
- }
141
-
142
- .accent-2xl {
143
- font-family: var(--wcss-accent-2xl-family, "Good OT"), var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
144
- font-size: var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));
145
- font-weight: var(--wcss-accent-2xl-weight, 450);
146
- letter-spacing: var(--wcss-accent-2xl-letter-spacing, 0.05em);
147
- line-height: var(--wcss-accent-2xl-line-height, 1);
148
- }
149
-
150
- .accent-2xl, .accent-xl {
151
- text-transform: uppercase;
152
- }
153
-
154
- .accent-xl {
155
- font-family: var(--wcss-accent-xl-family, "Good OT"), var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
156
- font-size: var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));
157
- font-weight: var(--wcss-accent-xl-weight, 450);
158
- letter-spacing: var(--wcss-accent-xl-letter-spacing, 0.05em);
159
- line-height: var(--wcss-accent-xl-line-height, 1.3);
160
- }
161
-
162
- .accent-lg {
163
- font-family: var(--wcss-accent-lg-family, "Good OT"), var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
164
- font-size: var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));
165
- font-weight: var(--wcss-accent-lg-weight, 450);
166
- letter-spacing: var(--wcss-accent-lg-letter-spacing, 0.05em);
167
- line-height: var(--wcss-accent-lg-line-height, 1.3);
168
- }
169
-
170
- .accent-lg, .accent-md {
171
- text-transform: uppercase;
172
- }
173
-
174
- .accent-md {
175
- font-family: var(--wcss-accent-md-family, "Good OT"), var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
176
- font-size: var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));
177
- font-weight: var(--wcss-accent-md-weight, 500);
178
- letter-spacing: var(--wcss-accent-md-letter-spacing, 0.05em);
179
- line-height: var(--wcss-accent-md-line-height, 1.3);
180
- }
181
-
182
- .accent-sm {
183
- font-family: var(--wcss-accent-sm-family, "Good OT"), var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
184
- font-size: var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));
185
- font-weight: var(--wcss-accent-sm-weight, 500);
186
- letter-spacing: var(--wcss-accent-sm-letter-spacing, 0.05em);
187
- line-height: var(--wcss-accent-sm-line-height, 1.3);
188
- }
189
-
190
- .accent-sm, .accent-xs {
191
- text-transform: uppercase;
192
- }
193
-
194
- .accent-xs {
195
- font-family: var(--wcss-accent-xs-family, "Good OT"), var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
196
- font-size: var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));
197
- font-weight: var(--wcss-accent-xs-weight, 500);
198
- letter-spacing: var(--wcss-accent-xs-letter-spacing, 0.1em);
199
- line-height: var(--wcss-accent-xs-line-height, 1.3);
200
- }
201
-
202
- .accent-2xs {
203
- font-family: var(--wcss-accent-2xs-family, "Good OT"), var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
204
- font-size: var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));
205
- font-weight: var(--wcss-accent-2xs-weight, 450);
206
- letter-spacing: var(--wcss-accent-2xs-letter-spacing, 0.1em);
207
- line-height: var(--wcss-accent-2xs-line-height, 1.3);
208
- text-transform: uppercase;
209
- }
210
-
211
- :host {
212
- interpolate-size: allow-keywords;
213
- --webkit-fill: -webkit-fill-available;
214
- }
215
- :host .trigger {
216
- position: relative;
217
- display: inline-block;
218
- border-width: 1px;
219
- border-style: solid;
220
- border-radius: var(--ds-border-radius, 0.375rem);
221
- }
222
- :host .trigger:hover {
223
- text-decoration: underline;
224
- }
225
- :host .trigger[fluid] {
226
- max-width: calc(100% - 3px);
227
- }
228
- :host ::slotted([slot=trigger]) {
229
- padding-left: var(--ds-size-100, 0.5rem);
230
- padding-right: var(--ds-size-200, 1rem);
231
- overflow: hidden;
232
- white-space: nowrap;
233
- text-overflow: ellipsis;
234
- }
235
- :host .iconWrapper {
236
- height: var(--ds-size-300, 1.5rem);
237
- margin-top: -2px;
238
- }
239
- :host [auro-icon] {
240
- --ds-auro-icon-size: var(--ds-size-300, 1.5rem);
241
- }
242
- :host [auro-icon][hidden] {
243
- display: none;
244
- }
245
- :host .content {
246
- width: 100%;
247
- transition: all 0.5s ease-in-out;
248
- transition-property: height;
249
- }
250
- :host .componentWrapper {
251
- height: 100%;
252
- overflow: hidden;
253
- }
254
- :host .contentWrapper {
255
- padding-left: var(--ds-size-400, 2rem);
256
- padding-bottom: var(--ds-size-300, 1.5rem);
257
- }
258
-
259
- :host(:focus) .trigger {
260
- border-width: 1px;
261
- border-style: solid;
262
- }
263
-
264
- :host([chevron=right]) ::slotted([slot=trigger]) {
265
- padding-left: 0;
266
- padding-right: var(--ds-size-100, 0.5rem);
267
- }
268
- :host([chevron=right]) .contentWrapper {
269
- padding-left: var(--ds-size-400, 2rem);
270
- }
271
-
272
- :host([chevron=right]:not([emphasis])) ::slotted([slot=trigger]) {
273
- padding-left: var(--ds-size-250, 1.25rem);
274
- }
275
- :host([chevron=right]:not([emphasis])) .contentWrapper {
276
- padding-left: var(--ds-size-250, 1.25rem);
277
- }
278
-
279
- :host([alignRight]) .componentWrapper {
280
- display: flex;
281
- flex-direction: column;
282
- align-items: flex-end;
283
- }
284
-
285
- :host([fluid]) .trigger {
286
- width: 100%;
287
- }
288
-
289
- :host([grouped]) .componentWrapper {
290
- border-bottom-width: 1px;
291
- border-bottom-style: solid;
292
- }
293
-
294
- :host([grouped][chevron=right]:not([alignright])) .trigger {
295
- width: var(--webkit-fill, 100%);
296
- --trigger-padding-right: var(--ds-size-200, 1rem);
297
- }
298
-
299
- :host(:not([expanded])) .content,
300
- :host([expanded=false]) .content {
301
- height: 0 !important;
302
- }
303
-
304
- :host([expanded]) .content {
305
- height: auto;
306
- }
307
-
308
- :host([emphasis]) .trigger {
309
- border-style: solid;
310
- border-width: 1px;
311
- border-left-width: 2px;
312
- --trigger-padding-left: var(--ds-size-200, 1rem);
313
- }
314
- :host([emphasis]) .trigger:before {
315
- display: block;
316
- position: absolute;
317
- top: -1px;
318
- left: -2px;
319
- width: 1px;
320
- height: calc(100% + 2px);
321
- content: "";
322
- border-left-style: solid;
323
- border-left-width: 2px;
324
- }
325
- :host([emphasis]) .trigger:focus {
326
- border-left-width: 1px;
327
- margin-left: 1px;
328
- }
329
- :host([emphasis]) .content {
330
- border-left-width: 2px;
331
- border-left-style: solid;
332
- padding: unset;
333
- }
334
- :host([emphasis]) .contentWrapper {
335
- padding-left: var(--ds-size-200, 1rem);
336
- }
337
- :host([emphasis]) .iconWrapper {
338
- padding-right: var(--ds-size-200, 1rem);
339
- }
340
-
341
- :host([emphasis][variant=lg]) .trigger,
342
- :host([emphasis][variant=lg]) .contentWrapper {
343
- padding-left: calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
344
- }
345
-
346
- :host([emphasis]:not([expanded]):hover) .trigger {
347
- text-decoration: unset;
348
- }
349
-
350
- :host([chevron=none]) ::slotted([slot=trigger]),
351
- :host([chevron=none]) .contentWrapper {
352
- padding-left: unset;
353
- }
@@ -1,208 +0,0 @@
1
- // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2
- // See LICENSE in the project root for license information.
3
-
4
- // ---------------------------------------------------------------------
5
-
6
- /* stylelint-disable order/properties-order, selector-max-combinators, selector-max-compound-selectors, declaration-empty-line-before, declaration-no-important, no-descending-specificity */
7
-
8
- // Import Auro tokens
9
- @use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
10
-
11
- @use "@aurodesignsystem/webcorestylesheets/dist/bundled/type/classes.alaska.min.css";
12
-
13
- :host {
14
- interpolate-size: allow-keywords; // stylelint-disable-line
15
-
16
- --webkit-fill: -webkit-fill-available;
17
-
18
- .trigger {
19
- position: relative;
20
-
21
- display: inline-block;
22
-
23
- border-width: 1px;
24
- border-style: solid;
25
- border-radius: var(--ds-border-radius, vac.$ds-border-radius);
26
-
27
- &:hover {
28
- text-decoration: underline;
29
- }
30
-
31
- &[fluid] {
32
- max-width: calc(100% - 3px); // 3px to account for borders
33
- }
34
- }
35
-
36
- ::slotted([slot="trigger"]) {
37
- padding-left: var(--ds-size-100, vac.$ds-size-100);
38
- padding-right: var(--ds-size-200, vac.$ds-size-200);
39
-
40
- overflow: hidden;
41
- white-space: nowrap;
42
- text-overflow: ellipsis;
43
- }
44
-
45
- .iconWrapper {
46
- height: var(--ds-size-300, vac.$ds-size-300);
47
- margin-top: -2px;
48
- }
49
-
50
- [auro-icon] {
51
- --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
52
-
53
- &[hidden] { // stylelint-disable-line selector-max-attribute
54
- display: none;
55
- }
56
- }
57
-
58
- .content {
59
- width: 100%;
60
-
61
- transition: all 0.5s ease-in-out;
62
- transition-property: height;
63
- }
64
-
65
- .componentWrapper {
66
- height: 100%;
67
- overflow: hidden;
68
- }
69
-
70
- .contentWrapper {
71
- padding-left: var(--ds-size-400, vac.$ds-size-400);
72
- padding-bottom: var(--ds-size-300, vac.$ds-size-300);
73
- }
74
- }
75
-
76
- :host(:focus) {
77
- .trigger {
78
- border-width: 1px;
79
- border-style: solid;
80
- }
81
- }
82
-
83
- :host([chevron="right"]) {
84
- ::slotted([slot="trigger"]) {
85
- padding-left: 0;
86
- padding-right: var(--ds-size-100, vac.$ds-size-100);
87
- }
88
-
89
- .contentWrapper {
90
- padding-left: var(--ds-size-400, vac.$ds-size-400);
91
- }
92
- }
93
-
94
- :host([chevron="right"]:not([emphasis])) {
95
- ::slotted([slot="trigger"]) {
96
- padding-left: var(--ds-size-250, vac.$ds-size-250);
97
- }
98
-
99
- .contentWrapper {
100
- padding-left: var(--ds-size-250, vac.$ds-size-250);
101
- }
102
- }
103
-
104
- :host([alignRight]) {
105
- .componentWrapper {
106
- display: flex;
107
- flex-direction: column;
108
- align-items: flex-end;
109
- }
110
- }
111
-
112
- :host([fluid]) {
113
- .trigger {
114
- width: 100%;
115
- }
116
- }
117
-
118
- :host([grouped]) {
119
- .componentWrapper {
120
- border-bottom-width: 1px;
121
- border-bottom-style: solid;
122
- }
123
- }
124
-
125
- :host([grouped][chevron="right"]:not([alignright])) {
126
- .trigger {
127
- width: var(--webkit-fill, 100%);
128
-
129
- --trigger-padding-right: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
130
- }
131
- }
132
-
133
- :host(:not([expanded])),
134
- :host([expanded="false"]) {
135
- .content {
136
- height: 0 !important;
137
- }
138
- }
139
-
140
- :host([expanded]) {
141
- .content {
142
- height: auto;
143
- }
144
- }
145
-
146
- :host([emphasis]) {
147
- .trigger {
148
- border-style: solid;
149
- border-width: 1px;
150
- border-left-width: 2px;
151
-
152
- --trigger-padding-left: var(--ds-size-200, #{vac.$ds-size-200}); // will be passed to the child component
153
-
154
- &:before {
155
- display: block;
156
-
157
- position: absolute;
158
-
159
- top: -1px;
160
- left: -2px;
161
-
162
- width: 1px;
163
- height: calc(100% + 2px);
164
- content: '';
165
- border-left-style: solid;
166
- border-left-width: 2px;
167
- }
168
-
169
- &:focus {
170
- border-left-width: 1px;
171
- margin-left: 1px;
172
- }
173
- }
174
-
175
- .content {
176
- border-left-width: 2px;
177
- border-left-style: solid;
178
- padding: unset;
179
- }
180
-
181
- .contentWrapper {
182
- padding-left: var(--ds-size-200, vac.$ds-size-200);
183
- }
184
-
185
- .iconWrapper {
186
- padding-right: var(--ds-size-200, vac.$ds-size-200);
187
- }
188
- }
189
-
190
- :host([emphasis][variant="lg"]) {
191
- .trigger,
192
- .contentWrapper {
193
- padding-left: calc(var(--ds-size-200, vac.$ds-size-200) + var(--ds-size-50, vac.$ds-size-50));
194
- }
195
- }
196
-
197
- :host([emphasis]:not([expanded]):hover) {
198
- .trigger {
199
- text-decoration: unset;
200
- }
201
- }
202
-
203
- :host([chevron="none"]) {
204
- ::slotted([slot="trigger"]),
205
- .contentWrapper {
206
- padding-left: unset;
207
- }
208
- }
@@ -1,2 +0,0 @@
1
- import { css } from 'lit';
2
- export default css`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
@@ -1,7 +0,0 @@
1
- :host {
2
- --ds-auro-accordion-content-border-color: transparent;
3
- --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));
4
- --ds-auro-accordion-trigger-border-color: transparent;
5
- --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);
6
- --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);
7
- }
@@ -1,9 +0,0 @@
1
- @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
2
-
3
- :host {
4
- --ds-auro-accordion-content-border-color: transparent;
5
- --ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
6
- --ds-auro-accordion-trigger-border-color: transparent;
7
- --ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
8
- --ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
9
- }