@aurodesignsystem/auro-accordion 4.4.0 → 5.0.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.
- package/CHANGELOG.md +22 -0
- package/README.md +3 -3
- package/coverage/lcov-report/auro-accordion-button.js.html +1 -1
- package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
- package/coverage/lcov-report/auro-accordion.js.html +1 -1
- 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 +1 -1
- package/coverage/lcov-report/style-button-css.js.html +2 -2
- package/coverage/lcov-report/style-css.js.html +2 -2
- package/coverage/lcov-report/tokens-css.js.html +2 -2
- package/demo/api.min.js +178 -336
- package/demo/index.min.js +178 -336
- package/dist/auro-accordion__bundled.js +178 -336
- package/dist/iconVersion.d.ts +1 -1
- package/dist/iconVersion.d.ts.map +1 -1
- package/package.json +11 -14
- package/packageScripts/postinstall.mjs +1 -1
- 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/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/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem/auro-accordion",
|
|
10
|
-
"version": "
|
|
10
|
+
"version": "5.0.0",
|
|
11
11
|
"description": "auro-accordion HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -20,21 +20,17 @@
|
|
|
20
20
|
"node": "^20.x || ^22.x "
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@alaskaairux/icons": "
|
|
24
|
-
"@aurodesignsystem/auro-button": "
|
|
25
|
-
"@aurodesignsystem/auro-icon": "
|
|
26
|
-
"@aurodesignsystem/auro-library": "
|
|
23
|
+
"@alaskaairux/icons": "5.2.0",
|
|
24
|
+
"@aurodesignsystem/auro-button": "9.0.0",
|
|
25
|
+
"@aurodesignsystem/auro-icon": "7.0.0",
|
|
26
|
+
"@aurodesignsystem/auro-library": "3.0.11",
|
|
27
27
|
"chalk": "^5.3.0",
|
|
28
|
-
"lit": "^3.2.1"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"@aurodesignsystem/design-tokens": "^4.9.2",
|
|
32
|
-
"@aurodesignsystem/webcorestylesheets": "^5.1.2"
|
|
28
|
+
"lit": "^3.2.1",
|
|
29
|
+
"@aurodesignsystem/webcorestylesheets": "6.1.0",
|
|
30
|
+
"@aurodesignsystem/design-tokens": "5.0.2"
|
|
33
31
|
},
|
|
34
32
|
"devDependencies": {
|
|
35
|
-
"@aurodesignsystem/
|
|
36
|
-
"@aurodesignsystem/eslint-config": "^1.3.3",
|
|
37
|
-
"@aurodesignsystem/webcorestylesheets": "^5.1.2",
|
|
33
|
+
"@aurodesignsystem/eslint-config": "1.3.4",
|
|
38
34
|
"@commitlint/cli": "^19.5.0",
|
|
39
35
|
"@commitlint/config-conventional": "^19.5.0",
|
|
40
36
|
"@open-wc/testing": "^4.0.0",
|
|
@@ -124,7 +120,8 @@
|
|
|
124
120
|
"./README.md",
|
|
125
121
|
"./docs/api.md",
|
|
126
122
|
"./demo/index.md",
|
|
127
|
-
"./demo/api.md"
|
|
123
|
+
"./demo/api.md",
|
|
124
|
+
"./src/iconVersion.js"
|
|
128
125
|
]
|
|
129
126
|
}
|
|
130
127
|
],
|
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 '
|
|
1
|
+
export default '7.0.0'
|
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
|
}
|