@aurodesignsystem/auro-accordion 4.3.1 → 4.4.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.
- package/CHANGELOG.md +14 -0
- package/README.md +4 -5
- package/coverage/lcov-report/auro-accordion-button.js.html +184 -0
- package/coverage/lcov-report/auro-accordion-group.js.html +75 -75
- package/coverage/lcov-report/auro-accordion.js.html +106 -10
- package/coverage/lcov-report/color-css.js.html +2 -2
- package/coverage/lcov-report/iconVersion.js.html +2 -2
- package/coverage/lcov-report/index.html +44 -14
- package/coverage/lcov-report/style-button-css.js.html +91 -0
- package/coverage/lcov-report/style-css.js.html +2 -2
- package/coverage/lcov-report/tokens-css.js.html +2 -2
- package/coverage/lcov.info +296 -200
- package/demo/api.min.js +875 -1006
- package/demo/index.min.js +875 -1004
- package/dist/auro-accordion.d.ts +15 -0
- package/dist/auro-accordion.d.ts.map +1 -1
- package/dist/auro-accordion__bundled.js +875 -1006
- package/dist/iconVersion.d.ts +1 -1
- package/dist/iconVersion.d.ts.map +1 -1
- package/index.js +0 -4
- package/package.json +9 -8
- package/src/auro-accordion.js +35 -3
- package/src/color-css.js +1 -1
- package/src/color.css +24 -25
- package/src/iconVersion.js +1 -1
- package/src/style-button-css.js +1 -1
- package/src/style-button.css +27 -46
- package/src/style-css.js +1 -1
- package/src/style.css +101 -102
- package/src/tokens-css.js +1 -1
- package/src/tokens.css +6 -6
- package/test/auro-accordion.test.js +2 -0
package/dist/iconVersion.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconVersion.d.ts","sourceRoot":"","sources":["../src/iconVersion.js"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"iconVersion.d.ts","sourceRoot":"","sources":["../src/iconVersion.js"],"names":[],"mappings":"wBAAe,OAAO"}
|
package/index.js
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { AuroAccordion } from './src/auro-accordion.js';
|
|
2
|
-
import { AuroAccordionGroup } from './src/auro-accordion-group.js';
|
|
3
|
-
import { AuroAccordionButton } from './src/auro-accordion-button.js';
|
|
4
2
|
|
|
5
3
|
AuroAccordion.register();
|
|
6
|
-
AuroAccordionGroup.register();
|
|
7
|
-
AuroAccordionButton.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem/auro-accordion",
|
|
10
|
-
"version": "4.
|
|
10
|
+
"version": "4.4.1",
|
|
11
11
|
"description": "auro-accordion HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,20 +21,20 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@alaskaairux/icons": "^4.44.1",
|
|
24
|
-
"@aurodesignsystem/auro-button": "^8.
|
|
25
|
-
"@aurodesignsystem/auro-icon": "^6.
|
|
24
|
+
"@aurodesignsystem/auro-button": "^8.2.4",
|
|
25
|
+
"@aurodesignsystem/auro-icon": "^6.1.9",
|
|
26
26
|
"@aurodesignsystem/auro-library": "^3.0.2",
|
|
27
27
|
"chalk": "^5.3.0",
|
|
28
28
|
"lit": "^3.2.1"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@aurodesignsystem/design-tokens": "^4.
|
|
32
|
-
"@aurodesignsystem/webcorestylesheets": "^
|
|
31
|
+
"@aurodesignsystem/design-tokens": "^4.13.0",
|
|
32
|
+
"@aurodesignsystem/webcorestylesheets": "^6.0.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@aurodesignsystem/design-tokens": "^4.
|
|
35
|
+
"@aurodesignsystem/design-tokens": "^4.13.0",
|
|
36
36
|
"@aurodesignsystem/eslint-config": "^1.3.3",
|
|
37
|
-
"@aurodesignsystem/webcorestylesheets": "^
|
|
37
|
+
"@aurodesignsystem/webcorestylesheets": "^6.0.2",
|
|
38
38
|
"@commitlint/cli": "^19.5.0",
|
|
39
39
|
"@commitlint/config-conventional": "^19.5.0",
|
|
40
40
|
"@open-wc/testing": "^4.0.0",
|
|
@@ -124,7 +124,8 @@
|
|
|
124
124
|
"./README.md",
|
|
125
125
|
"./docs/api.md",
|
|
126
126
|
"./demo/index.md",
|
|
127
|
-
"./demo/api.md"
|
|
127
|
+
"./demo/api.md",
|
|
128
|
+
"./src/iconVersion.js"
|
|
128
129
|
]
|
|
129
130
|
}
|
|
130
131
|
],
|
package/src/auro-accordion.js
CHANGED
|
@@ -10,10 +10,13 @@ import { LitElement, nothing } from "lit";
|
|
|
10
10
|
import { html } from 'lit/static-html.js';
|
|
11
11
|
import { classMap } from 'lit/directives/class-map.js';
|
|
12
12
|
|
|
13
|
-
import
|
|
13
|
+
import { AuroAccordionGroup } from './auro-accordion-group.js';
|
|
14
|
+
import { AuroAccordionButton } from './auro-accordion-button.js';
|
|
14
15
|
|
|
15
16
|
import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
|
|
16
17
|
|
|
18
|
+
import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
|
|
19
|
+
|
|
17
20
|
import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
|
|
18
21
|
import iconVersion from './iconVersion.js';
|
|
19
22
|
|
|
@@ -56,6 +59,16 @@ export class AuroAccordion extends LitElement {
|
|
|
56
59
|
*/
|
|
57
60
|
this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
|
|
58
61
|
|
|
62
|
+
/**
|
|
63
|
+
* @private
|
|
64
|
+
*/
|
|
65
|
+
this.buttonNameHash = this.generateRandomLetters(4); //eslint-disable-line
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* @private
|
|
69
|
+
*/
|
|
70
|
+
this.buttonTag = versioning.generateTag('auro-accordion-button', this.buttonNameHash, AuroAccordionButton);
|
|
71
|
+
|
|
59
72
|
/**
|
|
60
73
|
* @private
|
|
61
74
|
*/
|
|
@@ -115,7 +128,9 @@ export class AuroAccordion extends LitElement {
|
|
|
115
128
|
*
|
|
116
129
|
*/
|
|
117
130
|
static register(name = "auro-accordion") {
|
|
131
|
+
const nameGroup = `${name}-group`;
|
|
118
132
|
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
|
|
133
|
+
AuroAccordionGroup.register(nameGroup);
|
|
119
134
|
}
|
|
120
135
|
|
|
121
136
|
firstUpdated() {
|
|
@@ -138,6 +153,23 @@ export class AuroAccordion extends LitElement {
|
|
|
138
153
|
return html`${svg}`;
|
|
139
154
|
}
|
|
140
155
|
|
|
156
|
+
/**
|
|
157
|
+
* Generates a random string of letters.
|
|
158
|
+
* @private
|
|
159
|
+
* @param {number} length - The number of characters to generate in the string.
|
|
160
|
+
* @returns {string} - The generated string.
|
|
161
|
+
*/
|
|
162
|
+
generateRandomLetters(length) {
|
|
163
|
+
let result = '';
|
|
164
|
+
const characters = 'abcdefghijklmnopqrstuvwxyz';
|
|
165
|
+
const charactersLength = characters.length;
|
|
166
|
+
for (let index = 0; index < length; index += 1) {
|
|
167
|
+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return result;
|
|
171
|
+
}
|
|
172
|
+
|
|
141
173
|
/**
|
|
142
174
|
* Toggles the visibility of the accordion content.
|
|
143
175
|
*/
|
|
@@ -164,7 +196,7 @@ export class AuroAccordion extends LitElement {
|
|
|
164
196
|
|
|
165
197
|
return html`
|
|
166
198
|
<div class="componentWrapper" part="accordion">
|
|
167
|
-
|
|
199
|
+
<${this.buttonTag}
|
|
168
200
|
?fluid="${this.emphasis}"
|
|
169
201
|
class="${classMap(buttonClasses)}"
|
|
170
202
|
id="accordionTrigger"
|
|
@@ -181,7 +213,7 @@ export class AuroAccordion extends LitElement {
|
|
|
181
213
|
</${this.iconTag}>
|
|
182
214
|
`}
|
|
183
215
|
<slot name="trigger" part="triggerSlot"></slot>
|
|
184
|
-
|
|
216
|
+
</${this.buttonTag}>
|
|
185
217
|
<div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
|
|
186
218
|
<div class="contentWrapper" part="contentWrapper">
|
|
187
219
|
<slot></slot>
|
package/src/color-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:
|
|
2
|
+
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-color-border-subtle-default, #f0f7fd)}`;
|
package/src/color.css
CHANGED
|
@@ -1,41 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
color:
|
|
4
|
-
border-color: var(--ds-auro-accordion-trigger-border-color);
|
|
1
|
+
:host .trigger{
|
|
2
|
+
color:var(--ds-auro-accordion-trigger-color);
|
|
3
|
+
border-color:var(--ds-auro-accordion-trigger-border-color);
|
|
5
4
|
}
|
|
6
|
-
:host [auro-icon]
|
|
7
|
-
color:
|
|
5
|
+
:host [auro-icon]{
|
|
6
|
+
color:var(--ds-auro-accordion-trigger-icon-color);
|
|
8
7
|
}
|
|
9
8
|
|
|
10
|
-
:host(:focus)
|
|
11
|
-
--ds-auro-accordion-trigger-border-color:
|
|
12
|
-
--ds-auro-accordion-trigger-icon-color:
|
|
9
|
+
:host(:focus){
|
|
10
|
+
--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);
|
|
11
|
+
--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e);
|
|
13
12
|
}
|
|
14
13
|
|
|
15
|
-
:host(:hover)
|
|
16
|
-
--ds-auro-accordion-trigger-icon-color:
|
|
14
|
+
:host(:hover){
|
|
15
|
+
--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-hover-default, #525252);
|
|
17
16
|
}
|
|
18
17
|
|
|
19
|
-
:host([grouped]) .componentWrapper
|
|
20
|
-
border-bottom-color:
|
|
18
|
+
:host([grouped]) .componentWrapper{
|
|
19
|
+
border-bottom-color:var(--ds-auro-accordion-group-border-color);
|
|
21
20
|
}
|
|
22
21
|
|
|
23
|
-
:host([emphasis]) .trigger:before
|
|
24
|
-
border-color:
|
|
22
|
+
:host([emphasis]) .trigger:before{
|
|
23
|
+
border-color:var(--ds-auro-accordion-trigger-border-color);
|
|
25
24
|
}
|
|
26
|
-
:host([emphasis]) .trigger:focus:before, :host([emphasis]) .trigger:hover:before
|
|
27
|
-
--ds-auro-accordion-trigger-border-color:
|
|
25
|
+
:host([emphasis]) .trigger:focus:before, :host([emphasis]) .trigger:hover:before{
|
|
26
|
+
--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);
|
|
28
27
|
}
|
|
29
|
-
:host([emphasis]) .trigger:focus
|
|
30
|
-
--ds-auro-accordion-trigger-border-color:
|
|
28
|
+
:host([emphasis]) .trigger:focus{
|
|
29
|
+
--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);
|
|
31
30
|
}
|
|
32
|
-
:host([emphasis]) .content
|
|
33
|
-
border-left-color:
|
|
31
|
+
:host([emphasis]) .content{
|
|
32
|
+
border-left-color:var(--ds-auro-accordion-content-border-color);
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
:host([emphasis][expanded]) .trigger:before
|
|
37
|
-
--ds-auro-accordion-trigger-border-color:
|
|
35
|
+
:host([emphasis][expanded]) .trigger:before{
|
|
36
|
+
--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);
|
|
38
37
|
}
|
|
39
|
-
:host([emphasis][expanded]) .content
|
|
40
|
-
--ds-auro-accordion-content-border-color:
|
|
38
|
+
:host([emphasis][expanded]) .content{
|
|
39
|
+
--ds-auro-accordion-content-border-color:var(--ds-color-border-subtle-default, #f0f7fd);
|
|
41
40
|
}
|
package/src/iconVersion.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default '6.
|
|
1
|
+
export default '6.1.9'
|
package/src/style-button-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css
|
|
2
|
+
export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) 0;cursor:pointer;pointer-events:none}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding:var(--ds-size-100, 0.5rem) 0}:host(.lg) .auro-button{padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
|
package/src/style-button.css
CHANGED
|
@@ -1,60 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
:focus:not(:focus-visible){
|
|
2
|
+
outline:3px solid transparent;
|
|
3
3
|
}
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
animation-duration: 0.01ms !important;
|
|
7
|
-
animation-iteration-count: 1 !important;
|
|
8
|
-
transition-duration: 0.01ms !important;
|
|
9
|
-
}
|
|
4
|
+
:host{
|
|
5
|
+
border:unset;
|
|
10
6
|
}
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
:host .auro-button{
|
|
8
|
+
all:unset;
|
|
9
|
+
width:100%;
|
|
10
|
+
padding:var(--ds-size-200, 1rem) 0;
|
|
11
|
+
cursor:pointer;
|
|
12
|
+
pointer-events:none;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
:host .auro-button:after{
|
|
15
|
+
border-color:transparent;
|
|
16
16
|
}
|
|
17
|
-
|
|
18
|
-
:
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
/* stylelint-disable order/properties-order, declaration-empty-line-before, selector-class-pattern */
|
|
23
|
-
:host {
|
|
24
|
-
border: unset;
|
|
25
|
-
}
|
|
26
|
-
:host .auro-button {
|
|
27
|
-
all: unset;
|
|
28
|
-
width: 100%;
|
|
29
|
-
padding: var(--ds-size-200, 1rem) 0;
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
pointer-events: none;
|
|
32
|
-
}
|
|
33
|
-
:host .auro-button:after {
|
|
34
|
-
border-color: transparent;
|
|
35
|
-
}
|
|
36
|
-
:host .contentWrapper {
|
|
37
|
-
display: flex;
|
|
38
|
-
flex-direction: row-reverse;
|
|
17
|
+
:host .contentWrapper{
|
|
18
|
+
display:flex;
|
|
19
|
+
flex-direction:row-reverse;
|
|
39
20
|
}
|
|
40
|
-
:host .textSlot
|
|
41
|
-
display:
|
|
42
|
-
flex:
|
|
21
|
+
:host .textSlot{
|
|
22
|
+
display:flex;
|
|
23
|
+
flex:1;
|
|
43
24
|
}
|
|
44
25
|
|
|
45
|
-
:host(.sm) .auro-button
|
|
46
|
-
padding:
|
|
26
|
+
:host(.sm) .auro-button{
|
|
27
|
+
padding:var(--ds-size-100, 0.5rem) 0;
|
|
47
28
|
}
|
|
48
29
|
|
|
49
|
-
:host(.lg) .auro-button
|
|
50
|
-
padding:
|
|
30
|
+
:host(.lg) .auro-button{
|
|
31
|
+
padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0;
|
|
51
32
|
}
|
|
52
33
|
|
|
53
|
-
:host([fluid]) .contentWrapper
|
|
54
|
-
width:
|
|
34
|
+
:host([fluid]) .contentWrapper{
|
|
35
|
+
width:100%;
|
|
55
36
|
}
|
|
56
37
|
|
|
57
|
-
:host(.iconRight) .contentWrapper
|
|
58
|
-
display:
|
|
59
|
-
flex-direction:
|
|
38
|
+
:host(.iconRight) .contentWrapper{
|
|
39
|
+
display:flex;
|
|
40
|
+
flex-direction:row;
|
|
60
41
|
}
|
package/src/style-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:
|
|
2
|
+
export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
|
package/src/style.css
CHANGED
|
@@ -1,129 +1,128 @@
|
|
|
1
|
-
|
|
2
|
-
:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
border-
|
|
10
|
-
border-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
:
|
|
17
|
-
padding-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
:
|
|
32
|
-
|
|
33
|
-
transition:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
:
|
|
42
|
-
padding-
|
|
43
|
-
padding-
|
|
44
|
-
padding-right: var(--ds-size-200, 1rem);
|
|
1
|
+
:host{
|
|
2
|
+
interpolate-size:allow-keywords;
|
|
3
|
+
}
|
|
4
|
+
:host .trigger{
|
|
5
|
+
position:relative;
|
|
6
|
+
cursor:pointer;
|
|
7
|
+
display:inline-block;
|
|
8
|
+
border-width:1px;
|
|
9
|
+
border-style:solid;
|
|
10
|
+
border-radius:var(--ds-border-radius, 0.375rem);
|
|
11
|
+
}
|
|
12
|
+
:host .trigger:hover{
|
|
13
|
+
text-decoration:underline;
|
|
14
|
+
}
|
|
15
|
+
:host ::slotted([slot=trigger]){
|
|
16
|
+
padding-left:var(--ds-size-100, 0.5rem);
|
|
17
|
+
padding-right:var(--ds-size-200, 1rem);
|
|
18
|
+
font-size:var(--ds-text-heading-300-size, 1.125rem);
|
|
19
|
+
}
|
|
20
|
+
:host .iconWrapper{
|
|
21
|
+
height:var(--ds-size-300, 1.5rem);
|
|
22
|
+
margin-top:-2px;
|
|
23
|
+
}
|
|
24
|
+
:host [auro-icon]{
|
|
25
|
+
--ds-auro-icon-size:var(--ds-size-300,$ds-size-300);
|
|
26
|
+
}
|
|
27
|
+
:host [auro-icon][hidden]{
|
|
28
|
+
display:none;
|
|
29
|
+
}
|
|
30
|
+
:host .content{
|
|
31
|
+
width:100%;
|
|
32
|
+
transition:all 0.5s ease-in-out;
|
|
33
|
+
transition-property:height;
|
|
34
|
+
font-size:var(--ds-text-body-size-default, 1rem);
|
|
35
|
+
}
|
|
36
|
+
:host .componentWrapper{
|
|
37
|
+
height:100%;
|
|
38
|
+
overflow:hidden;
|
|
39
|
+
}
|
|
40
|
+
:host .contentWrapper{
|
|
41
|
+
padding-left:var(--ds-size-400, 2rem);
|
|
42
|
+
padding-bottom:var(--ds-size-300, 1.5rem);
|
|
43
|
+
padding-right:var(--ds-size-200, 1rem);
|
|
45
44
|
}
|
|
46
45
|
|
|
47
|
-
:host(:focus) .trigger
|
|
48
|
-
border-width:
|
|
49
|
-
border-style:
|
|
46
|
+
:host(:focus) .trigger{
|
|
47
|
+
border-width:1px;
|
|
48
|
+
border-style:solid;
|
|
50
49
|
}
|
|
51
50
|
|
|
52
|
-
:host([chevron=right]) ::slotted([slot=trigger])
|
|
53
|
-
padding-left:
|
|
54
|
-
padding-right:
|
|
51
|
+
:host([chevron=right]) ::slotted([slot=trigger]){
|
|
52
|
+
padding-left:0;
|
|
53
|
+
padding-right:var(--ds-size-50, 0.25rem);
|
|
55
54
|
}
|
|
56
55
|
|
|
57
|
-
:host([alignRight]) .componentWrapper
|
|
58
|
-
display:
|
|
59
|
-
flex-direction:
|
|
60
|
-
align-items:
|
|
56
|
+
:host([alignRight]) .componentWrapper{
|
|
57
|
+
display:flex;
|
|
58
|
+
flex-direction:column;
|
|
59
|
+
align-items:flex-end;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
:host([fluid]) .trigger
|
|
64
|
-
width:
|
|
62
|
+
:host([fluid]) .trigger{
|
|
63
|
+
width:100%;
|
|
65
64
|
}
|
|
66
65
|
|
|
67
|
-
:host([grouped]) .componentWrapper
|
|
68
|
-
border-bottom-width:
|
|
69
|
-
border-bottom-style:
|
|
66
|
+
:host([grouped]) .componentWrapper{
|
|
67
|
+
border-bottom-width:1px;
|
|
68
|
+
border-bottom-style:solid;
|
|
70
69
|
}
|
|
71
70
|
|
|
72
71
|
:host(:not([expanded])) .content,
|
|
73
|
-
:host([expanded=false]) .content
|
|
74
|
-
height:
|
|
72
|
+
:host([expanded=false]) .content{
|
|
73
|
+
height:0 !important;
|
|
75
74
|
}
|
|
76
75
|
|
|
77
|
-
:host([expanded]) .content
|
|
78
|
-
height:
|
|
76
|
+
:host([expanded]) .content{
|
|
77
|
+
height:auto;
|
|
79
78
|
}
|
|
80
79
|
|
|
81
|
-
:host([emphasis]) .trigger
|
|
82
|
-
border-style:
|
|
83
|
-
border-width:
|
|
84
|
-
border-left-width:
|
|
85
|
-
padding-left:
|
|
86
|
-
}
|
|
87
|
-
:host([emphasis]) .trigger:before
|
|
88
|
-
display:
|
|
89
|
-
position:
|
|
90
|
-
top
|
|
91
|
-
left
|
|
92
|
-
width:
|
|
93
|
-
height:
|
|
94
|
-
content:
|
|
95
|
-
border-left-style:
|
|
96
|
-
border-left-width:
|
|
97
|
-
}
|
|
98
|
-
:host([emphasis]) .trigger:focus
|
|
99
|
-
border-left-width:
|
|
100
|
-
margin-left:
|
|
101
|
-
}
|
|
102
|
-
:host([emphasis]) .content
|
|
103
|
-
border-left-width:
|
|
104
|
-
border-left-style:
|
|
105
|
-
padding:
|
|
106
|
-
}
|
|
107
|
-
:host([emphasis]) .contentWrapper
|
|
108
|
-
padding-left:
|
|
109
|
-
}
|
|
110
|
-
:host([emphasis]) .iconWrapper
|
|
111
|
-
padding-right:
|
|
80
|
+
:host([emphasis]) .trigger{
|
|
81
|
+
border-style:solid;
|
|
82
|
+
border-width:1px;
|
|
83
|
+
border-left-width:2px;
|
|
84
|
+
padding-left:var(--ds-size-200, 1rem);
|
|
85
|
+
}
|
|
86
|
+
:host([emphasis]) .trigger:before{
|
|
87
|
+
display:block;
|
|
88
|
+
position:absolute;
|
|
89
|
+
top:-1px;
|
|
90
|
+
left:-2px;
|
|
91
|
+
width:1px;
|
|
92
|
+
height:calc(100% + 2px);
|
|
93
|
+
content:"";
|
|
94
|
+
border-left-style:solid;
|
|
95
|
+
border-left-width:2px;
|
|
96
|
+
}
|
|
97
|
+
:host([emphasis]) .trigger:focus{
|
|
98
|
+
border-left-width:1px;
|
|
99
|
+
margin-left:1px;
|
|
100
|
+
}
|
|
101
|
+
:host([emphasis]) .content{
|
|
102
|
+
border-left-width:2px;
|
|
103
|
+
border-left-style:solid;
|
|
104
|
+
padding:unset;
|
|
105
|
+
}
|
|
106
|
+
:host([emphasis]) .contentWrapper{
|
|
107
|
+
padding-left:var(--ds-size-200, 1rem);
|
|
108
|
+
}
|
|
109
|
+
:host([emphasis]) .iconWrapper{
|
|
110
|
+
padding-right:var(--ds-size-200, 1rem);
|
|
112
111
|
}
|
|
113
112
|
|
|
114
|
-
:host([emphasis]:not([expanded]):hover) .trigger
|
|
115
|
-
text-decoration:
|
|
113
|
+
:host([emphasis]:not([expanded]):hover) .trigger{
|
|
114
|
+
text-decoration:unset;
|
|
116
115
|
}
|
|
117
116
|
|
|
118
|
-
:host([variant=sm]) ::slotted([slot=trigger])
|
|
119
|
-
font-size:
|
|
117
|
+
:host([variant=sm]) ::slotted([slot=trigger]){
|
|
118
|
+
font-size:var(--ds-text-body-size-default, 1rem);
|
|
120
119
|
}
|
|
121
120
|
|
|
122
|
-
:host([variant=lg]) ::slotted([slot=trigger])
|
|
123
|
-
font-size:
|
|
121
|
+
:host([variant=lg]) ::slotted([slot=trigger]){
|
|
122
|
+
font-size:var(--ds-text-heading-400-size, 1.25rem);
|
|
124
123
|
}
|
|
125
124
|
|
|
126
125
|
:host([chevron=none]) ::slotted([slot=trigger]),
|
|
127
|
-
:host([chevron=none]) .contentWrapper
|
|
128
|
-
padding-left:
|
|
126
|
+
:host([chevron=none]) .contentWrapper{
|
|
127
|
+
padding-left:unset;
|
|
129
128
|
}
|
package/src/tokens-css.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css`:host{--ds-auro-accordion-content-border-color:
|
|
2
|
+
export default css`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
|
package/src/tokens.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
:host
|
|
2
|
-
--ds-auro-accordion-content-border-color:
|
|
3
|
-
--ds-auro-accordion-group-border-color:
|
|
4
|
-
--ds-auro-accordion-trigger-border-color:
|
|
5
|
-
--ds-auro-accordion-trigger-color:
|
|
6
|
-
--ds-auro-accordion-trigger-icon-color:
|
|
1
|
+
:host{
|
|
2
|
+
--ds-auro-accordion-content-border-color:transparent;
|
|
3
|
+
--ds-auro-accordion-group-border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));
|
|
4
|
+
--ds-auro-accordion-trigger-border-color:transparent;
|
|
5
|
+
--ds-auro-accordion-trigger-color:var(--ds-color-text-primary-default, #2a2a2a);
|
|
6
|
+
--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-default-default, #7e7e7e);
|
|
7
7
|
}
|