@spectrum-web-components/accordion 0.6.2 → 0.6.4
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/custom-elements.json +12 -61
- package/package.json +7 -6
- package/src/Accordion.d.ts +5 -12
- package/src/Accordion.js +22 -70
- package/src/Accordion.js.map +1 -1
- package/src/accordion-item.css.js +7 -1
- package/src/accordion-item.css.js.map +1 -1
- package/src/spectrum-accordion-item.css.js +7 -1
- package/src/spectrum-accordion-item.css.js.map +1 -1
package/custom-elements.json
CHANGED
|
@@ -75,37 +75,14 @@
|
|
|
75
75
|
},
|
|
76
76
|
"privacy": "private"
|
|
77
77
|
},
|
|
78
|
-
{
|
|
79
|
-
"kind": "method",
|
|
80
|
-
"name": "focus",
|
|
81
|
-
"privacy": "public",
|
|
82
|
-
"return": {
|
|
83
|
-
"type": {
|
|
84
|
-
"text": "void"
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
78
|
{
|
|
89
79
|
"kind": "field",
|
|
90
|
-
"name": "
|
|
91
|
-
"
|
|
92
|
-
"text": "Accordion | AccordionItem"
|
|
93
|
-
},
|
|
94
|
-
"privacy": "private"
|
|
80
|
+
"name": "rovingTabindexController",
|
|
81
|
+
"default": "new RovingTabindexController<AccordionItem>(\n this,\n {\n focusInIndex: (elements: AccordionItem[]) => {\n return elements.findIndex((el) => {\n return !el.disabled;\n });\n },\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n }\n )"
|
|
95
82
|
},
|
|
96
83
|
{
|
|
97
84
|
"kind": "method",
|
|
98
|
-
"name": "
|
|
99
|
-
"privacy": "public",
|
|
100
|
-
"return": {
|
|
101
|
-
"type": {
|
|
102
|
-
"text": "void"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"kind": "method",
|
|
108
|
-
"name": "stopListeningToKeyboard",
|
|
85
|
+
"name": "focus",
|
|
109
86
|
"privacy": "public",
|
|
110
87
|
"return": {
|
|
111
88
|
"type": {
|
|
@@ -115,57 +92,31 @@
|
|
|
115
92
|
},
|
|
116
93
|
{
|
|
117
94
|
"kind": "method",
|
|
118
|
-
"name": "
|
|
95
|
+
"name": "onToggle",
|
|
119
96
|
"privacy": "private",
|
|
120
97
|
"return": {
|
|
121
98
|
"type": {
|
|
122
|
-
"text": "void"
|
|
99
|
+
"text": "Promise<void>"
|
|
123
100
|
}
|
|
124
101
|
},
|
|
125
102
|
"parameters": [
|
|
126
103
|
{
|
|
127
104
|
"name": "event",
|
|
128
105
|
"type": {
|
|
129
|
-
"text": "
|
|
106
|
+
"text": "Event"
|
|
130
107
|
}
|
|
131
108
|
}
|
|
132
109
|
]
|
|
133
110
|
},
|
|
134
111
|
{
|
|
135
112
|
"kind": "method",
|
|
136
|
-
"name": "
|
|
113
|
+
"name": "handleSlotchange",
|
|
137
114
|
"privacy": "private",
|
|
138
115
|
"return": {
|
|
139
116
|
"type": {
|
|
140
117
|
"text": "void"
|
|
141
118
|
}
|
|
142
|
-
}
|
|
143
|
-
"parameters": [
|
|
144
|
-
{
|
|
145
|
-
"name": "direction",
|
|
146
|
-
"type": {
|
|
147
|
-
"text": "number"
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
]
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"kind": "method",
|
|
154
|
-
"name": "onToggle",
|
|
155
|
-
"privacy": "private",
|
|
156
|
-
"return": {
|
|
157
|
-
"type": {
|
|
158
|
-
"text": "Promise<void>"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"parameters": [
|
|
162
|
-
{
|
|
163
|
-
"name": "event",
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "Event"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
]
|
|
119
|
+
}
|
|
169
120
|
}
|
|
170
121
|
],
|
|
171
122
|
"attributes": [
|
|
@@ -180,8 +131,8 @@
|
|
|
180
131
|
}
|
|
181
132
|
],
|
|
182
133
|
"superclass": {
|
|
183
|
-
"name": "
|
|
184
|
-
"package": "@spectrum-web-components/
|
|
134
|
+
"name": "SpectrumElement",
|
|
135
|
+
"package": "@spectrum-web-components/base"
|
|
185
136
|
},
|
|
186
137
|
"tagName": "sp-accordion",
|
|
187
138
|
"customElement": true
|
|
@@ -354,7 +305,7 @@
|
|
|
354
305
|
{
|
|
355
306
|
"kind": "variable",
|
|
356
307
|
"name": "styles",
|
|
357
|
-
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
308
|
+
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}\n`"
|
|
358
309
|
}
|
|
359
310
|
],
|
|
360
311
|
"exports": [
|
|
@@ -419,7 +370,7 @@
|
|
|
419
370
|
{
|
|
420
371
|
"kind": "variable",
|
|
421
372
|
"name": "styles",
|
|
422
|
-
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
373
|
+
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`"
|
|
423
374
|
}
|
|
424
375
|
],
|
|
425
376
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/accordion",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -47,18 +47,19 @@
|
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@spectrum-web-components/base": "^0.5.1",
|
|
50
|
-
"@spectrum-web-components/icon": "^0.11.
|
|
51
|
-
"@spectrum-web-components/icons-ui": "^0.8.
|
|
52
|
-
"@spectrum-web-components/
|
|
50
|
+
"@spectrum-web-components/icon": "^0.11.2",
|
|
51
|
+
"@spectrum-web-components/icons-ui": "^0.8.2",
|
|
52
|
+
"@spectrum-web-components/reactive-controllers": "^0.2.0",
|
|
53
|
+
"@spectrum-web-components/shared": "^0.13.3",
|
|
53
54
|
"tslib": "^2.0.0"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
|
-
"@spectrum-css/accordion": "^3.0.
|
|
57
|
+
"@spectrum-css/accordion": "^3.0.12"
|
|
57
58
|
},
|
|
58
59
|
"types": "./src/index.d.ts",
|
|
59
60
|
"customElements": "custom-elements.json",
|
|
60
61
|
"sideEffects": [
|
|
61
62
|
"./sp-*.js"
|
|
62
63
|
],
|
|
63
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
|
|
64
65
|
}
|
package/src/Accordion.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
1
|
+
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
2
3
|
import { AccordionItem } from './AccordionItem.js';
|
|
3
|
-
import { Focusable } from '@spectrum-web-components/shared';
|
|
4
4
|
/**
|
|
5
5
|
* @element sp-accordion
|
|
6
6
|
* @slot - The sp-accordion-item children to display.
|
|
7
7
|
*/
|
|
8
|
-
export declare class Accordion extends
|
|
8
|
+
export declare class Accordion extends SpectrumElement {
|
|
9
9
|
static get styles(): CSSResultArray;
|
|
10
10
|
/**
|
|
11
11
|
* Allows multiple accordion items to be opened at the same time
|
|
@@ -13,16 +13,9 @@ export declare class Accordion extends Focusable {
|
|
|
13
13
|
allowMultiple: boolean;
|
|
14
14
|
private defaultNodes;
|
|
15
15
|
private get items();
|
|
16
|
+
rovingTabindexController: RovingTabindexController<AccordionItem>;
|
|
16
17
|
focus(): void;
|
|
17
|
-
/**
|
|
18
|
-
* @private
|
|
19
|
-
*/
|
|
20
|
-
get focusElement(): Accordion | AccordionItem;
|
|
21
|
-
startListeningToKeyboard(): void;
|
|
22
|
-
stopListeningToKeyboard(): void;
|
|
23
|
-
private handleKeydown;
|
|
24
|
-
private focusItemByOffset;
|
|
25
18
|
private onToggle;
|
|
19
|
+
private handleSlotchange;
|
|
26
20
|
protected render(): TemplateResult;
|
|
27
|
-
protected firstUpdated(changed: PropertyValues): void;
|
|
28
21
|
}
|
package/src/Accordion.js
CHANGED
|
@@ -10,21 +10,31 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html, } from '@spectrum-web-components/base';
|
|
13
|
+
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
14
|
import { property, queryAssignedNodes, } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
15
16
|
import styles from './accordion.css.js';
|
|
16
|
-
import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
|
|
17
17
|
/**
|
|
18
18
|
* @element sp-accordion
|
|
19
19
|
* @slot - The sp-accordion-item children to display.
|
|
20
20
|
*/
|
|
21
|
-
export class Accordion extends
|
|
21
|
+
export class Accordion extends SpectrumElement {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
24
|
/**
|
|
25
25
|
* Allows multiple accordion items to be opened at the same time
|
|
26
26
|
*/
|
|
27
27
|
this.allowMultiple = false;
|
|
28
|
+
this.rovingTabindexController = new RovingTabindexController(this, {
|
|
29
|
+
focusInIndex: (elements) => {
|
|
30
|
+
return elements.findIndex((el) => {
|
|
31
|
+
return !el.disabled;
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
direction: 'vertical',
|
|
35
|
+
elements: () => this.items,
|
|
36
|
+
isFocusableElement: (el) => !el.disabled,
|
|
37
|
+
});
|
|
28
38
|
}
|
|
29
39
|
static get styles() {
|
|
30
40
|
return [styles];
|
|
@@ -33,67 +43,10 @@ export class Accordion extends Focusable {
|
|
|
33
43
|
return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== 'undefined');
|
|
34
44
|
}
|
|
35
45
|
focus() {
|
|
36
|
-
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
super.focus();
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* @private
|
|
43
|
-
*/
|
|
44
|
-
get focusElement() {
|
|
45
|
-
const items = this.items;
|
|
46
|
-
if (items && !items.length) {
|
|
47
|
-
return this;
|
|
48
|
-
}
|
|
49
|
-
let index = 0;
|
|
50
|
-
while (index < items.length && items[index] && items[index].disabled) {
|
|
51
|
-
index += 1;
|
|
52
|
-
}
|
|
53
|
-
if (items[index]) {
|
|
54
|
-
return items[index];
|
|
55
|
-
}
|
|
56
|
-
/* c8 ignore next */
|
|
57
|
-
return this;
|
|
58
|
-
}
|
|
59
|
-
startListeningToKeyboard() {
|
|
60
|
-
const items = this.items;
|
|
61
|
-
/* c8 ignore next 3 */
|
|
62
|
-
if (items && !items.length) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
this.addEventListener('keydown', this.handleKeydown);
|
|
66
|
-
}
|
|
67
|
-
stopListeningToKeyboard() {
|
|
68
|
-
this.removeEventListener('keydown', this.handleKeydown);
|
|
69
|
-
}
|
|
70
|
-
handleKeydown(event) {
|
|
71
|
-
const { code } = event;
|
|
72
|
-
/* c8 ignore next 3 */
|
|
73
|
-
if (code !== 'ArrowDown' && code !== 'ArrowUp') {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
const direction = code === 'ArrowDown' ? 1 : -1;
|
|
78
|
-
this.focusItemByOffset(direction);
|
|
79
|
-
}
|
|
80
|
-
focusItemByOffset(direction) {
|
|
81
|
-
const items = this.items;
|
|
82
|
-
const focused = items.indexOf(getActiveElement(this));
|
|
83
|
-
let next = focused;
|
|
84
|
-
let nextItem = items[next];
|
|
85
|
-
// cycle through the available items in the directions of the offset to find the next non-disabled item
|
|
86
|
-
while (nextItem && (nextItem.disabled || next === focused)) {
|
|
87
|
-
next = (items.length + next + direction) % items.length;
|
|
88
|
-
nextItem = items[next];
|
|
89
|
-
}
|
|
90
|
-
// if there are no non-disabled items, skip the work to focus a child
|
|
91
|
-
if (!nextItem || nextItem.disabled || next === focused) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
nextItem.focus();
|
|
46
|
+
this.rovingTabindexController.focus();
|
|
95
47
|
}
|
|
96
48
|
async onToggle(event) {
|
|
49
|
+
const target = event.target;
|
|
97
50
|
// Let the event pass through the DOM so that it can be
|
|
98
51
|
// prevented from the outside if a user so desires.
|
|
99
52
|
await 0;
|
|
@@ -101,7 +54,6 @@ export class Accordion extends Focusable {
|
|
|
101
54
|
// No toggling when `allowMultiple` or the user prevents it.
|
|
102
55
|
return;
|
|
103
56
|
}
|
|
104
|
-
const target = event.target;
|
|
105
57
|
const items = [...this.items];
|
|
106
58
|
/* c8 ignore next 3 */
|
|
107
59
|
if (items && !items.length) {
|
|
@@ -115,17 +67,17 @@ export class Accordion extends Focusable {
|
|
|
115
67
|
}
|
|
116
68
|
});
|
|
117
69
|
}
|
|
70
|
+
handleSlotchange() {
|
|
71
|
+
this.rovingTabindexController.clearElementCache();
|
|
72
|
+
}
|
|
118
73
|
render() {
|
|
119
74
|
return html `
|
|
120
|
-
<slot
|
|
75
|
+
<slot
|
|
76
|
+
@sp-accordion-item-toggle=${this.onToggle}
|
|
77
|
+
@slotchange=${this.handleSlotchange}
|
|
78
|
+
></slot>
|
|
121
79
|
`;
|
|
122
80
|
}
|
|
123
|
-
firstUpdated(changed) {
|
|
124
|
-
super.firstUpdated(changed);
|
|
125
|
-
this.addEventListener('focusin', this.startListeningToKeyboard);
|
|
126
|
-
this.addEventListener('focusout', this.stopListeningToKeyboard);
|
|
127
|
-
this.addEventListener('sp-accordion-item-toggle', this.onToggle);
|
|
128
|
-
}
|
|
129
81
|
}
|
|
130
82
|
__decorate([
|
|
131
83
|
property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })
|
package/src/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["Accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["Accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,kBAAkB,GACrB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qEAAqE,CAAC;AAI/G,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QAKI;;WAEG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAW7B,6BAAwB,GAAG,IAAI,wBAAwB,CACnD,IAAI,EACJ;YACI,YAAY,EAAE,CAAC,QAAyB,EAAE,EAAE;gBACxC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE;oBAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC;gBACxB,CAAC,CAAC,CAAC;YACP,CAAC;YACD,SAAS,EAAE,UAAU;YACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;YAC1B,kBAAkB,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ;SAC1D,CACJ,CAAC;IAyCN,CAAC;IAxEU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAWD,IAAY,KAAK;QACb,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACxC,CAAC,IAAiB,EAAE,EAAE,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAC1C,CAAC;IACzB,CAAC;IAgBM,KAAK;QACR,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,CAAC;IAC1C,CAAC;IAEO,KAAK,CAAC,QAAQ,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAuB,CAAC;QAC7C,uDAAuD;QACvD,mDAAmD;QACnD,MAAM,CAAC,CAAC;QACR,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC9C,4DAA4D;YAC5D,OAAO;SACV;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAoB,CAAC;QACjD,sBAAsB;QACtB,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACxB,uCAAuC;YACvC,OAAO;SACV;QACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,IAAI,IAAI,KAAK,MAAM,EAAE;gBACjB,sDAAsD;gBACtD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACrB;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;4CAEyB,IAAI,CAAC,QAAQ;8BAC3B,IAAI,CAAC,gBAAgB;;SAE1C,CAAC;IACN,CAAC;CACJ;AAhEG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAC3C;AAG7B;IADC,kBAAkB,EAAE;+CAC4B","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { AccordionItem } from './AccordionItem.js';\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n rovingTabindexController = new RovingTabindexController<AccordionItem>(\n this,\n {\n focusInIndex: (elements: AccordionItem[]) => {\n return elements.findIndex((el) => {\n return !el.disabled;\n });\n },\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n }\n );\n\n public focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n\n protected render(): TemplateResult {\n return html`\n <slot\n @sp-accordion-item-toggle=${this.onToggle}\n @slotchange=${this.handleSlotchange}\n ></slot>\n `;\n }\n}\n"]}
|
|
@@ -54,7 +54,13 @@ var(--spectrum-alias-border-size-thick)
|
|
|
54
54
|
var(--spectrum-global-font-letter-spacing-medium)
|
|
55
55
|
)/100);line-height:var(
|
|
56
56
|
--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
57
|
-
);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
57
|
+
);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(
|
|
58
|
+
--spectrum-accordion-item-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)*-1);content:"";position:absolute;top:calc(var(
|
|
61
|
+
--spectrum-accordion-item-border-size,
|
|
62
|
+
var(--spectrum-alias-border-size-thin)
|
|
63
|
+
)*-1);width:var(
|
|
58
64
|
--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)
|
|
59
65
|
)}#content{display:none;padding-bottom:var(
|
|
60
66
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.css.js","sourceRoot":"","sources":["accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"accordion-item.css.js","sourceRoot":"","sources":["accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}\n`;\nexport default styles;"]}
|
|
@@ -60,7 +60,13 @@ var(--spectrum-global-font-letter-spacing-medium)
|
|
|
60
60
|
);margin:0;min-height:calc(100% - var(
|
|
61
61
|
--spectrum-accordion-item-border-size,
|
|
62
62
|
var(--spectrum-alias-border-size-thin)
|
|
63
|
-
));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
63
|
+
));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(
|
|
64
|
+
--spectrum-accordion-item-border-size,
|
|
65
|
+
var(--spectrum-alias-border-size-thin)
|
|
66
|
+
)*-1);content:"";position:absolute;top:calc(var(
|
|
67
|
+
--spectrum-accordion-item-border-size,
|
|
68
|
+
var(--spectrum-alias-border-size-thin)
|
|
69
|
+
)*-1);width:var(
|
|
64
70
|
--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)
|
|
65
71
|
)}#content{display:none;padding-bottom:var(
|
|
66
72
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-accordion-item.css.js","sourceRoot":"","sources":["spectrum-accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-accordion-item.css.js","sourceRoot":"","sources":["spectrum-accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`;\nexport default styles;"]}
|