@spectrum-web-components/accordion - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5-alpha.60

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.4",
+    "version": "0.1.5-alpha.60+a478c2c4",
     "description": "",
@@ -54,11 +54,12 @@ "main": "src/index.js",
     "devDependencies": {
-        "@spectrum-css/accordion": "^3.0.0-beta.2"
+        "@spectrum-css/accordion": "^3.0.0-beta.4"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.1.3",
-        "@spectrum-web-components/icons-ui": "^0.3.3",
-        "@spectrum-web-components/shared": "^0.7.4",
+        "@spectrum-web-components/base": "^0.1.4-alpha.60+a478c2c4",
+        "@spectrum-web-components/icon": "^0.6.4-alpha.60+a478c2c4",
+        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.60+a478c2c4",
+        "@spectrum-web-components/shared": "^0.7.5-alpha.60+a478c2c4",
         "tslib": "^2.0.0"
     },
-    "gitHead": "d57ea3ab83d9c16738fdd95d326e3082b1f997e2"
+    "gitHead": "a478c2c484b45e88c5d8b5cc64a255e31d0a3829"
 }

src/accordion-item.css.js

@@ -14,9 +14,21 @@ /*
 const styles = css `
-:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-icon-spacing,16px)}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-icon-spacing,16px);transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))/2 - 5px);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-right:var(--spectrum-accordion-item-padding,16px);text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-left:var(--spectrum-accordion-item-padding,16px);text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))/2 - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;height:var(--spectrum-accordion-item-height,40px);box-sizing:border-box}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)));font-size:var(--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50));line-height:1.3;text-transform:uppercase;letter-spacing:calc(var(--spectrum-accordion-item-title-tracking,
-var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-size-key-focus,2px)}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after{background-color:var(--spectrum-accordion-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
+var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-left-size-key-focus,var(--spectrum-alias-border-size-thick))}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after,#header.focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}#header.focus-visible:after,#header:focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#header:after{height:calc(100% - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}
 `;
 export default styles;
 //# sourceMappingURL=accordion-item.css.js.map

src/accordion-item.css.ts

@@ -14,8 +14,20 @@ /*
 const styles = css`
-:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-icon-spacing,16px)}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-icon-spacing,16px);transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))/2 - 5px);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-right:var(--spectrum-accordion-item-padding,16px);text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-left:var(--spectrum-accordion-item-padding,16px);text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))/2 - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;height:var(--spectrum-accordion-item-height,40px);box-sizing:border-box}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)));font-size:var(--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50));line-height:1.3;text-transform:uppercase;letter-spacing:calc(var(--spectrum-accordion-item-title-tracking,
-var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-size-key-focus,2px)}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after{background-color:var(--spectrum-accordion-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
+var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-left-size-key-focus,var(--spectrum-alias-border-size-thick))}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after,#header.focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}#header.focus-visible:after,#header:focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#header:after{height:calc(100% - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}
 `;
 export default styles;

src/AccordionItem.d.ts

 import { CSSResultArray, TemplateResult, PropertyValues } from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import '@spectrum-web-components/icon/sp-icon.js';
 /**
@@ -4,0 +5,0 @@ * @element sp-accordion

src/AccordionItem.js

@@ -15,3 +15,5 @@ /*
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import '@spectrum-web-components/icon/sp-icon.js';
 import { ChevronRightMediumIcon } from '@spectrum-web-components/icons-ui';
+import chevronRightMediumIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js';
 import styles from './accordion-item.css.js';
@@ -31,3 +33,3 @@ /**
     static get styles() {
-        return [styles];
+        return [styles, chevronRightMediumIconStyles];
     }
@@ -71,3 +73,3 @@ get focusElement() {
                 </button>
-                <sp-icon id="indicator" size="xs">
+                <sp-icon id="indicator" size="xs" class="chevron-right-medium">
                     ${ChevronRightMediumIcon({ hidden: true })}
@@ -74,0 +76,0 @@ </sp-icon>

src/AccordionItem.ts

@@ -22,4 +22,5 @@ /*
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
-
+import '@spectrum-web-components/icon/sp-icon.js';
 import { ChevronRightMediumIcon } from '@spectrum-web-components/icons-ui';
+import chevronRightMediumIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron-right-medium.css.js';
 
@@ -34,3 +35,3 @@ import styles from './accordion-item.css.js';
     public static get styles(): CSSResultArray {
-        return [styles];
+        return [styles, chevronRightMediumIconStyles];
     }
@@ -97,3 +98,3 @@
                 </button>
-                <sp-icon id="indicator" size="xs">
+                <sp-icon id="indicator" size="xs" class="chevron-right-medium">
                     ${ChevronRightMediumIcon({ hidden: true })}
@@ -100,0 +101,0 @@ </sp-icon>

src/spectrum-accordion-item.css.js

@@ -14,9 +14,18 @@ /*
 const styles = css `
-:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-icon-spacing,16px)}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-icon-spacing,16px);transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))/2 - 5px);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-right:var(--spectrum-accordion-item-padding,16px);text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-left:var(--spectrum-accordion-item-padding,16px);text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))/2 - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;height:var(--spectrum-accordion-item-height,40px);box-sizing:border-box}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)));font-size:var(--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50));line-height:1.3;text-transform:uppercase;letter-spacing:calc(var(--spectrum-accordion-item-title-tracking,
-var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-size-key-focus,2px)}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after{background-color:var(--spectrum-accordion-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
+var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-left-size-key-focus,var(--spectrum-alias-border-size-thick))}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after,#header.focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}#header.focus-visible:after,#header:focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-accordion-item.css.js.map

src/spectrum-accordion-item.css.ts

@@ -14,8 +14,17 @@ /*
 const styles = css`
-:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-icon-spacing,16px)}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-icon-spacing,16px);transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))/2 - 5px);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-right:var(--spectrum-accordion-item-padding,16px);text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding, 16px)*2 + 2px);padding-left:var(--spectrum-accordion-item-padding,16px);text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+:host([dir=ltr]) #indicator{left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #indicator{right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc((var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))/2 - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s);color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom-color:transparent;border-left-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-right-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300));border-top-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;height:var(--spectrum-accordion-item-height,40px);box-sizing:border-box}:host([dir=ltr]) #header{padding-left:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:left}:host([dir=rtl]) #header{padding-right:calc(var(--spectrum-accordion-item-padding-x,
+var(--spectrum-global-dimension-size-225)) + var(--spectrum-accordion-icon-width,
+var(--spectrum-global-dimension-size-75)) + var(--spectrum-accordion-icon-gap,
+var(--spectrum-global-dimension-size-100)) + var(--spectrum-accordion-item-border-left-size-key-focus,
+var(--spectrum-alias-border-size-thick)));padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225));text-align:right}#header{position:relative;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;padding-top:var(--spectrum-global-dimension-size-150);padding-bottom:var(--spectrum-global-dimension-size-150);margin:0;min-height:calc(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)));font-size:var(--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50));line-height:1.3;text-transform:uppercase;letter-spacing:calc(var(--spectrum-accordion-item-title-tracking,
-var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-size-key-focus,2px)}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
-var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after{background-color:var(--spectrum-accordion-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
+var(--spectrum-global-font-letter-spacing-medium))/100);text-overflow:ellipsis;cursor:pointer;font-weight:500;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:inherit;border:0;font-family:inherit;width:100%;color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{content:"";position:absolute;top:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));bottom:calc(-1*var(--spectrum-accordion-item-border-size, var(--spectrum-alias-border-size-thin)));width:var(--spectrum-accordion-item-border-left-size-key-focus,var(--spectrum-alias-border-size-thick))}#content{padding-top:0;padding-bottom:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-left:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));padding-right:var(--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200));display:none}: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(var(--spectrum-accordion-item-height, 40px) - var(--spectrum-accordion-item-border-size,
+var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}#header:hover{color:var(--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900));background-color:var(--spectrum-accordion-background-color-hover,var(--spectrum-global-color-gray-200))}#header:hover+#indicator{color:var(--spectrum-accordion-icon-color-hover,var(--spectrum-global-color-gray-800))}#header.focus-visible:after,#header.focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}#header.focus-visible:after,#header:focus-visible:after{background-color:var(--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([open]) #header:hover{background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{color:var(--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500));background-color:initial}:host([disabled]) #header+#indicator{color:var(--spectrum-accordion-icon-color-disabled,var(--spectrum-global-color-gray-400))}
 `;
 export default styles;

src/spectrum-vars.json

 {
   "custom-properties": {
-    "--spectrum-accordion-icon-spacing": "16px",
+    "--spectrum-accordion-item-padding-x": "var(--spectrum-global-dimension-size-225)",
     "--spectrum-accordion-item-height": "40px",
     "--spectrum-accordion-item-border-size": "var(--spectrum-alias-border-size-thin)",
-    "--spectrum-accordion-item-padding": "16px",
+    "--spectrum-accordion-icon-height": "var(--spectrum-global-dimension-size-125)",
+    "--spectrum-accordion-icon-width": "var(--spectrum-global-dimension-size-75)",
+    "--spectrum-accordion-icon-gap": "var(--spectrum-global-dimension-size-100)",
+    "--spectrum-accordion-item-border-left-size-key-focus": "var(--spectrum-alias-border-size-thick)",
     "--spectrum-accordion-item-title-text-size": "var(--spectrum-global-dimension-font-size-50)",
     "--spectrum-accordion-item-title-tracking": "var(--spectrum-global-font-letter-spacing-medium)",
-    "--spectrum-accordion-item-border-size-key-focus": "2px",
     "--spectrum-accordion-item-content-padding": "var(--spectrum-global-dimension-size-200)",
@@ -17,3 +19,3 @@ "--spectrum-accordion-border-color": "var(--spectrum-global-color-gray-300)",
     "--spectrum-accordion-icon-color-hover": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-accordion-border-left-color-key-focus": "var(--spectrum-alias-border-color-focus)",
+    "--spectrum-accordion-item-border-left-color-key-focus": "var(--spectrum-alias-border-color-focus)",
     "--spectrum-accordion-text-color-disabled": "var(--spectrum-global-color-gray-500)",
@@ -20,0 +22,0 @@ "--spectrum-accordion-icon-color-disabled": "var(--spectrum-global-color-gray-400)"

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

127938

increased by12.18%

Lines of code

1497

increased by11.05%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/icon@^0.6.4-alpha.60+a478c2c4

• + Added@spectrum-web-components/base@0.1.4-alpha.178(transitive)

• + Added@spectrum-web-components/icon@0.6.4-alpha.178(transitive)

• + Added@spectrum-web-components/icons-ui@0.3.4-alpha.178(transitive)

• + Added@spectrum-web-components/iconset@0.2.6-alpha.178(transitive)

• + Added@spectrum-web-components/shared@0.7.5-alpha.178(transitive)

• + Added@spectrum-web-components/styles@0.6.2-alpha.263(transitive)

• + Added@spectrum-web-components/theme@0.6.4-alpha.178(transitive)

• - Removed@spectrum-web-components/base@0.1.3(transitive)

• - Removed@spectrum-web-components/icons-ui@0.3.3(transitive)

• - Removed@spectrum-web-components/iconset@0.2.5(transitive)

• - Removed@spectrum-web-components/shared@0.7.4(transitive)

• - Removed@spectrum-web-components/styles@0.6.1(transitive)

• - Removed@spectrum-web-components/theme@0.6.3(transitive)

• Updated@spectrum-web-components/base@^0.1.4-alpha.60+a478c2c4

• Updated@spectrum-web-components/icons-ui@^0.3.4-alpha.60+a478c2c4

• Updated@spectrum-web-components/shared@^0.7.5-alpha.60+a478c2c4