@aurodesignsystem/auro-accordion 5.1.0 → 5.1.2

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 (25) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +1 -1
  3. package/coverage/lcov-report/auro-accordion-button.js.html +1 -1
  4. package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
  5. package/coverage/lcov-report/auro-accordion.js.html +1 -1
  6. package/coverage/lcov-report/color-css.js.html +1 -1
  7. package/coverage/lcov-report/iconVersion.js.html +2 -2
  8. package/coverage/lcov-report/index.html +1 -1
  9. package/coverage/lcov-report/style-button-css.js.html +2 -2
  10. package/coverage/lcov-report/style-css.js.html +2 -2
  11. package/coverage/lcov-report/tokens-css.js.html +1 -1
  12. package/demo/api.html +2 -2
  13. package/demo/api.min.js +15 -15
  14. package/demo/index.html +2 -2
  15. package/demo/index.min.js +15 -15
  16. package/dist/auro-accordion__bundled.js +15 -15
  17. package/dist/iconVersion.d.ts +1 -1
  18. package/package.json +6 -6
  19. package/src/iconVersion.js +1 -1
  20. package/src/style-button-css.js +1 -1
  21. package/src/style-button.css +6 -3
  22. package/src/style-button.scss +7 -3
  23. package/src/style-css.js +1 -1
  24. package/src/style.css +17 -4
  25. package/src/style.scss +25 -4
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: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}`;
2
+ export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}: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, 1.5rem)}: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)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}: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([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, 1rem)}: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;--trigger-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][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}: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,5 +1,6 @@
1
1
  :host{
2
2
  interpolate-size:allow-keywords;
3
+ --webkit-fill:-webkit-fill-available;
3
4
  }
4
5
  :host .trigger{
5
6
  position:relative;
@@ -22,7 +23,7 @@
22
23
  margin-top:-2px;
23
24
  }
24
25
  :host [auro-icon]{
25
- --ds-auro-icon-size:var(--ds-size-300,$ds-size-300);
26
+ --ds-auro-icon-size:var(--ds-size-300, 1.5rem);
26
27
  }
27
28
  :host [auro-icon][hidden]{
28
29
  display:none;
@@ -40,7 +41,6 @@
40
41
  :host .contentWrapper{
41
42
  padding-left:var(--ds-size-400, 2rem);
42
43
  padding-bottom:var(--ds-size-300, 1.5rem);
43
- padding-right:var(--ds-size-200, 1rem);
44
44
  }
45
45
 
46
46
  :host(:focus) .trigger{
@@ -50,7 +50,10 @@
50
50
 
51
51
  :host([chevron=right]) ::slotted([slot=trigger]){
52
52
  padding-left:0;
53
- padding-right:var(--ds-size-50, 0.25rem);
53
+ padding-right:var(--ds-size-100, 0.5rem);
54
+ }
55
+ :host([chevron=right]) .contentWrapper{
56
+ padding-left:var(--ds-size-400, 2rem);
54
57
  }
55
58
 
56
59
  :host([alignRight]) .componentWrapper{
@@ -68,6 +71,11 @@
68
71
  border-bottom-style:solid;
69
72
  }
70
73
 
74
+ :host([grouped][chevron=right]:not([alignright])) .trigger{
75
+ width:var(--webkit-fill, 100%);
76
+ --trigger-padding-right:var(--ds-size-200, 1rem);
77
+ }
78
+
71
79
  :host(:not([expanded])) .content,
72
80
  :host([expanded=false]) .content{
73
81
  height:0 !important;
@@ -81,7 +89,7 @@
81
89
  border-style:solid;
82
90
  border-width:1px;
83
91
  border-left-width:2px;
84
- padding-left:var(--ds-size-200, 1rem);
92
+ --trigger-padding-left:var(--ds-size-200, 1rem);
85
93
  }
86
94
  :host([emphasis]) .trigger:before{
87
95
  display:block;
@@ -110,6 +118,11 @@
110
118
  padding-right:var(--ds-size-200, 1rem);
111
119
  }
112
120
 
121
+ :host([emphasis][variant=lg]) .trigger,
122
+ :host([emphasis][variant=lg]) .contentWrapper{
123
+ padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));
124
+ }
125
+
113
126
  :host([emphasis]:not([expanded]):hover) .trigger{
114
127
  text-decoration:unset;
115
128
  }
package/src/style.scss CHANGED
@@ -11,6 +11,8 @@
11
11
  :host {
12
12
  interpolate-size: allow-keywords; // stylelint-disable-line
13
13
 
14
+ --webkit-fill: -webkit-fill-available;
15
+
14
16
  .trigger {
15
17
  position: relative;
16
18
 
@@ -39,7 +41,7 @@
39
41
  }
40
42
 
41
43
  [auro-icon] {
42
- --ds-auro-icon-size: var(--ds-size-300,$ds-size-300);
44
+ --ds-auro-icon-size: var(--ds-size-300, #{$ds-size-300});
43
45
 
44
46
  &[hidden] { // stylelint-disable-line selector-max-attribute
45
47
  display: none;
@@ -63,7 +65,6 @@
63
65
  .contentWrapper {
64
66
  padding-left: var(--ds-size-400, $ds-size-400);
65
67
  padding-bottom: var(--ds-size-300, $ds-size-300);
66
- padding-right: var(--ds-size-200, $ds-size-200);
67
68
  }
68
69
  }
69
70
 
@@ -77,7 +78,11 @@
77
78
  :host([chevron="right"]) {
78
79
  ::slotted([slot="trigger"]) {
79
80
  padding-left: 0;
80
- padding-right: var(--ds-size-50, $ds-size-50);
81
+ padding-right: var(--ds-size-100, $ds-size-100);
82
+ }
83
+
84
+ .contentWrapper {
85
+ padding-left: var(--ds-size-400, $ds-size-400);
81
86
  }
82
87
  }
83
88
 
@@ -102,6 +107,14 @@
102
107
  }
103
108
  }
104
109
 
110
+ :host([grouped][chevron="right"]:not([alignright])) {
111
+ .trigger {
112
+ width: var(--webkit-fill, 100%);
113
+
114
+ --trigger-padding-right: var(--ds-size-200, #{$ds-size-200}); // will be passed to the child component
115
+ }
116
+ }
117
+
105
118
  :host(:not([expanded])),
106
119
  :host([expanded="false"]) {
107
120
  .content {
@@ -120,7 +133,8 @@
120
133
  border-style: solid;
121
134
  border-width: 1px;
122
135
  border-left-width: 2px;
123
- padding-left: var(--ds-size-200, $ds-size-200);
136
+
137
+ --trigger-padding-left: var(--ds-size-200, #{$ds-size-200}); // will be passed to the child component
124
138
 
125
139
  &:before {
126
140
  display: block;
@@ -158,6 +172,13 @@
158
172
  }
159
173
  }
160
174
 
175
+ :host([emphasis][variant="lg"]) {
176
+ .trigger,
177
+ .contentWrapper {
178
+ padding-left: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
179
+ }
180
+ }
181
+
161
182
  :host([emphasis]:not([expanded]):hover) {
162
183
  .trigger {
163
184
  text-decoration: unset;