@spectrum-web-components/accordion 0.6.10 → 0.6.11
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 +0 -107
- package/package.json +5 -5
- package/src/AccordionItem.js +1 -2
- package/src/AccordionItem.js.map +1 -1
- package/src/accordion-item.css.js +11 -8
- package/src/accordion-item.css.js.map +1 -1
- package/src/spectrum-accordion-item.css.js +8 -8
- package/src/spectrum-accordion-item.css.js.map +1 -1
- package/src/spectrum-config.js +6 -4
package/custom-elements.json
CHANGED
|
@@ -279,113 +279,6 @@
|
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
281
|
]
|
|
282
|
-
},
|
|
283
|
-
{
|
|
284
|
-
"kind": "javascript-module",
|
|
285
|
-
"path": "src/accordion-item.css.ts",
|
|
286
|
-
"declarations": [
|
|
287
|
-
{
|
|
288
|
-
"kind": "variable",
|
|
289
|
-
"name": "styles",
|
|
290
|
-
"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`"
|
|
291
|
-
}
|
|
292
|
-
],
|
|
293
|
-
"exports": [
|
|
294
|
-
{
|
|
295
|
-
"kind": "js",
|
|
296
|
-
"name": "default",
|
|
297
|
-
"declaration": {
|
|
298
|
-
"name": "styles",
|
|
299
|
-
"module": "src/accordion-item.css.ts"
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
]
|
|
303
|
-
},
|
|
304
|
-
{
|
|
305
|
-
"kind": "javascript-module",
|
|
306
|
-
"path": "src/accordion.css.ts",
|
|
307
|
-
"declarations": [
|
|
308
|
-
{
|
|
309
|
-
"kind": "variable",
|
|
310
|
-
"name": "styles",
|
|
311
|
-
"default": "css`\n:host{--spectrum-accordion-item-title-padding-y:var(\n--spectrum-global-dimension-size-150\n);--spectrum-accordion-animation-duration:var(\n--spectrum-global-animation-duration-100,130ms\n)}:host{display:block;list-style:none;margin:0;padding:0}\n`"
|
|
312
|
-
}
|
|
313
|
-
],
|
|
314
|
-
"exports": [
|
|
315
|
-
{
|
|
316
|
-
"kind": "js",
|
|
317
|
-
"name": "default",
|
|
318
|
-
"declaration": {
|
|
319
|
-
"name": "styles",
|
|
320
|
-
"module": "src/accordion.css.ts"
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
]
|
|
324
|
-
},
|
|
325
|
-
{
|
|
326
|
-
"kind": "javascript-module",
|
|
327
|
-
"path": "src/index.ts",
|
|
328
|
-
"declarations": [],
|
|
329
|
-
"exports": [
|
|
330
|
-
{
|
|
331
|
-
"kind": "js",
|
|
332
|
-
"name": "*",
|
|
333
|
-
"declaration": {
|
|
334
|
-
"name": "*",
|
|
335
|
-
"package": "./Accordion.js"
|
|
336
|
-
}
|
|
337
|
-
},
|
|
338
|
-
{
|
|
339
|
-
"kind": "js",
|
|
340
|
-
"name": "*",
|
|
341
|
-
"declaration": {
|
|
342
|
-
"name": "*",
|
|
343
|
-
"package": "./AccordionItem.js"
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
]
|
|
347
|
-
},
|
|
348
|
-
{
|
|
349
|
-
"kind": "javascript-module",
|
|
350
|
-
"path": "src/spectrum-accordion-item.css.ts",
|
|
351
|
-
"declarations": [
|
|
352
|
-
{
|
|
353
|
-
"kind": "variable",
|
|
354
|
-
"name": "styles",
|
|
355
|
-
"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`"
|
|
356
|
-
}
|
|
357
|
-
],
|
|
358
|
-
"exports": [
|
|
359
|
-
{
|
|
360
|
-
"kind": "js",
|
|
361
|
-
"name": "default",
|
|
362
|
-
"declaration": {
|
|
363
|
-
"name": "styles",
|
|
364
|
-
"module": "src/spectrum-accordion-item.css.ts"
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
]
|
|
368
|
-
},
|
|
369
|
-
{
|
|
370
|
-
"kind": "javascript-module",
|
|
371
|
-
"path": "src/spectrum-accordion.css.ts",
|
|
372
|
-
"declarations": [
|
|
373
|
-
{
|
|
374
|
-
"kind": "variable",
|
|
375
|
-
"name": "styles",
|
|
376
|
-
"default": "css`\n:host{--spectrum-accordion-item-title-padding-y:var(\n--spectrum-global-dimension-size-150\n);--spectrum-accordion-animation-duration:var(\n--spectrum-global-animation-duration-100,130ms\n)}:host{display:block;list-style:none;margin:0;padding:0}\n`"
|
|
377
|
-
}
|
|
378
|
-
],
|
|
379
|
-
"exports": [
|
|
380
|
-
{
|
|
381
|
-
"kind": "js",
|
|
382
|
-
"name": "default",
|
|
383
|
-
"declaration": {
|
|
384
|
-
"name": "styles",
|
|
385
|
-
"module": "src/spectrum-accordion.css.ts"
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
]
|
|
389
282
|
}
|
|
390
283
|
]
|
|
391
284
|
}
|
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.11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -47,18 +47,18 @@
|
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@spectrum-web-components/base": "^0.5.6",
|
|
50
|
-
"@spectrum-web-components/icon": "^0.11.
|
|
51
|
-
"@spectrum-web-components/icons-ui": "^0.8.
|
|
50
|
+
"@spectrum-web-components/icon": "^0.11.8",
|
|
51
|
+
"@spectrum-web-components/icons-ui": "^0.8.8",
|
|
52
52
|
"@spectrum-web-components/shared": "^0.14.1",
|
|
53
53
|
"tslib": "^2.0.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@spectrum-css/accordion": "^3.0.
|
|
56
|
+
"@spectrum-css/accordion": "^3.0.22"
|
|
57
57
|
},
|
|
58
58
|
"types": "./src/index.d.ts",
|
|
59
59
|
"customElements": "custom-elements.json",
|
|
60
60
|
"sideEffects": [
|
|
61
61
|
"./sp-*.js"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "8f5ea3556e160b6e30815edb2414dc5a5999a925"
|
|
64
64
|
}
|
package/src/AccordionItem.js
CHANGED
|
@@ -65,8 +65,7 @@ export class AccordionItem extends Focusable {
|
|
|
65
65
|
${this.label}
|
|
66
66
|
</button>
|
|
67
67
|
<sp-icon-chevron100
|
|
68
|
-
|
|
69
|
-
class="spectrum-UIIcon-ChevronRight100"
|
|
68
|
+
class="indicator spectrum-UIIcon-ChevronRight100"
|
|
70
69
|
></sp-icon-chevron100>
|
|
71
70
|
</h3>
|
|
72
71
|
<div id="content" role="region" aria-labelledby="header">
|
package/src/AccordionItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAE/F,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IAA5C;;QAMW,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAE/F,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IAA5C;;QAMW,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,KAAK,CAAC;IA4D5B,CAAC;IAvEU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAWD,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;IACnE,CAAC;IAEO,OAAO;QACX,sBAAsB;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEO,MAAM;QACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACnC,IAAI,WAAW,CAAC,0BAA0B,EAAE;YACxC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACnB,CAAC,CACL,CAAC;QACF,IAAI,CAAC,YAAY,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SAC1B;IACL,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;;;6BAIU,IAAI,CAAC,OAAO;oCACL,IAAI,CAAC,IAAI;;gCAEb,IAAI,CAAC,QAAQ;;sBAEvB,IAAI,CAAC,KAAK;;;;;;;;;SASvB,CAAC;IACN,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;aAC9C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACzC;SACJ;IACL,CAAC;CACJ;AAlEG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACnB","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 PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport styles from './accordion-item.css.js';\n\n/**\n * @element sp-accordion-item\n * @slot - The content of the item that is hidden when the item is not open\n * @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.\n */\nexport class AccordionItem extends Focusable {\n public static get styles(): CSSResultArray {\n return [styles, chevronIconStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n public get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#header') as HTMLElement;\n }\n\n private onClick(): void {\n /* c8 ignore next 3 */\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n private toggle(): void {\n this.open = !this.open;\n const applyDefault = this.dispatchEvent(\n new CustomEvent('sp-accordion-item-toggle', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.open = !this.open;\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <h3 id=\"heading\">\n <button\n id=\"header\"\n @click=${this.onClick}\n aria-expanded=${this.open}\n aria-controls=\"content\"\n ?disabled=${this.disabled}\n >\n ${this.label}\n </button>\n <sp-icon-chevron100\n class=\"indicator spectrum-UIIcon-ChevronRight100\"\n ></sp-icon-chevron100>\n </h3>\n <div id=\"content\" role=\"region\" aria-labelledby=\"header\">\n <slot></slot>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"]}
|
|
@@ -11,11 +11,14 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host([dir=ltr])
|
|
14
|
+
:host([dir=ltr]) .indicator{left:var(
|
|
15
15
|
--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)
|
|
16
|
-
)}:host([dir=rtl])
|
|
16
|
+
)}:host([dir=rtl]) .indicator{right:var(
|
|
17
17
|
--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)
|
|
18
|
-
)}:host([dir=rtl])
|
|
18
|
+
)}:host([dir=rtl]) .indicator{transform:matrix(-1,0,0,1,0,0)}.indicator{display:block;position:absolute;top:calc(50% - var(
|
|
19
|
+
--spectrum-accordion-icon-height,
|
|
20
|
+
var(--spectrum-global-dimension-size-125)
|
|
21
|
+
)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(
|
|
19
22
|
--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)
|
|
20
23
|
) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(
|
|
21
24
|
--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)
|
|
@@ -68,9 +71,9 @@ var(--spectrum-alias-border-size-thin)
|
|
|
68
71
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
69
72
|
);padding-right:var(
|
|
70
73
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
71
|
-
);padding-top:0}:host([dir=ltr][open])>#heading
|
|
74
|
+
);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(
|
|
72
75
|
--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)
|
|
73
|
-
)}
|
|
76
|
+
)}.indicator{color:var(
|
|
74
77
|
--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)
|
|
75
78
|
)}#header{color:var(
|
|
76
79
|
--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)
|
|
@@ -78,7 +81,7 @@ var(--spectrum-alias-border-size-thin)
|
|
|
78
81
|
--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)
|
|
79
82
|
);color:var(
|
|
80
83
|
--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)
|
|
81
|
-
)}#header:hover
|
|
84
|
+
)}#header:hover+.indicator{color:var(
|
|
82
85
|
--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)
|
|
83
86
|
)}#header.focus-visible:after{background-color:var(
|
|
84
87
|
--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
@@ -88,9 +91,9 @@ var(--spectrum-alias-border-size-thin)
|
|
|
88
91
|
--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)
|
|
89
92
|
)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(
|
|
90
93
|
--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)
|
|
91
|
-
)}:host([disabled]) #header
|
|
94
|
+
)}:host([disabled]) #header+.indicator{color:var(
|
|
92
95
|
--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
|
|
93
|
-
)}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(
|
|
96
|
+
)}@media (forced-colors:active){#header.focus-visible{outline:3px solid CanvasText}#header:focus-visible{outline:3px solid CanvasText}}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(
|
|
94
97
|
--spectrum-accordion-icon-height,
|
|
95
98
|
var(--spectrum-global-dimension-size-125)
|
|
96
99
|
)/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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}: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)}@media (forced-colors:active){#header.focus-visible{outline:3px solid CanvasText}#header:focus-visible{outline:3px solid CanvasText}}: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;"]}
|
|
@@ -11,11 +11,11 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host([dir=ltr])
|
|
14
|
+
:host([dir=ltr]) .indicator{left:var(
|
|
15
15
|
--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)
|
|
16
|
-
)}:host([dir=rtl])
|
|
16
|
+
)}:host([dir=rtl]) .indicator{right:var(
|
|
17
17
|
--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)
|
|
18
|
-
)}:host([dir=rtl])
|
|
18
|
+
)}:host([dir=rtl]) .indicator{transform:matrix(-1,0,0,1,0,0)}.indicator{display:block;position:absolute;top:calc(50% - var(
|
|
19
19
|
--spectrum-accordion-icon-height,
|
|
20
20
|
var(--spectrum-global-dimension-size-125)
|
|
21
21
|
)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(
|
|
@@ -74,12 +74,12 @@ var(--spectrum-alias-border-size-thin)
|
|
|
74
74
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
75
75
|
);padding-right:var(
|
|
76
76
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
77
|
-
);padding-top:0}:host([dir=ltr][open])>#heading
|
|
77
|
+
);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(
|
|
78
78
|
--spectrum-accordion-item-border-size,
|
|
79
79
|
var(--spectrum-alias-border-size-thin)
|
|
80
80
|
))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(
|
|
81
81
|
--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)
|
|
82
|
-
)}
|
|
82
|
+
)}.indicator{color:var(
|
|
83
83
|
--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)
|
|
84
84
|
)}#header{color:var(
|
|
85
85
|
--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)
|
|
@@ -87,7 +87,7 @@ var(--spectrum-alias-border-size-thin)
|
|
|
87
87
|
--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)
|
|
88
88
|
);color:var(
|
|
89
89
|
--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)
|
|
90
|
-
)}#header:hover
|
|
90
|
+
)}#header:hover+.indicator{color:var(
|
|
91
91
|
--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)
|
|
92
92
|
)}#header.focus-visible:after{background-color:var(
|
|
93
93
|
--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)
|
|
@@ -97,9 +97,9 @@ var(--spectrum-alias-border-size-thin)
|
|
|
97
97
|
--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)
|
|
98
98
|
)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(
|
|
99
99
|
--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)
|
|
100
|
-
)}:host([disabled]) #header
|
|
100
|
+
)}:host([disabled]) #header+.indicator{color:var(
|
|
101
101
|
--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
|
|
102
|
-
)}
|
|
102
|
+
)}@media (forced-colors:active){#header.focus-visible{outline:3px solid CanvasText}#header:focus-visible{outline:3px solid CanvasText}}
|
|
103
103
|
`;
|
|
104
104
|
export default styles;
|
|
105
105
|
//# sourceMappingURL=spectrum-accordion-item.css.js.map
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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])
|
|
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 2022 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)}@media (forced-colors:active){#header.focus-visible{outline:3px solid CanvasText}#header:focus-visible{outline:3px solid CanvasText}}\n`;\nexport default styles;"]}
|
package/src/spectrum-config.js
CHANGED
|
@@ -56,10 +56,6 @@ const config = {
|
|
|
56
56
|
},
|
|
57
57
|
],
|
|
58
58
|
ids: [
|
|
59
|
-
{
|
|
60
|
-
selector: '.spectrum-Accordion-itemIndicator',
|
|
61
|
-
name: 'indicator',
|
|
62
|
-
},
|
|
63
59
|
{
|
|
64
60
|
selector: '.spectrum-Accordion-itemHeading',
|
|
65
61
|
name: 'heading',
|
|
@@ -73,6 +69,12 @@ const config = {
|
|
|
73
69
|
name: 'content',
|
|
74
70
|
},
|
|
75
71
|
],
|
|
72
|
+
classes: [
|
|
73
|
+
{
|
|
74
|
+
selector: '.spectrum-Accordion-itemIndicator',
|
|
75
|
+
name: 'indicator',
|
|
76
|
+
},
|
|
77
|
+
],
|
|
76
78
|
},
|
|
77
79
|
],
|
|
78
80
|
};
|