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

Comparing version 0.1.5-alpha.85 to 0.1.5-alpha.169

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.1.5-alpha.85+d9ef1386",
+    "version": "0.1.5-alpha.169+a396c860",
     "description": "",
@@ -55,12 +55,12 @@ "main": "./src/index.js",
     "devDependencies": {
-        "@spectrum-css/accordion": "^3.0.0-beta.4"
+        "@spectrum-css/accordion": "^3.0.0-beta.5"
     },
     "dependencies": {
-        "@spectrum-web-components/base": "^0.1.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/icon": "^0.6.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.85+d9ef1386",
-        "@spectrum-web-components/shared": "^0.7.5-alpha.85+d9ef1386",
+        "@spectrum-web-components/base": "^0.1.4-alpha.169+a396c860",
+        "@spectrum-web-components/icon": "^0.6.4-alpha.169+a396c860",
+        "@spectrum-web-components/icons-ui": "^0.3.4-alpha.169+a396c860",
+        "@spectrum-web-components/shared": "^0.7.5-alpha.169+a396c860",
         "tslib": "^2.0.0"
     },
-    "gitHead": "d9ef13866edfb98e309914ae7582b807bee5d241"
+    "gitHead": "a396c860b62c2f94b2e9fcd015a4962a6c57af36"
 }

src/accordion-item.css.js

@@ -14,16 +14,10 @@ /*
 const styles = css `
-: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)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}: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,
+: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;transition:transform ease var(--spectrum-global-animation-duration-100,.13s)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;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-global-dimension-size-125) + 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)))}: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-225)) + var(--spectrum-global-dimension-size-125) + 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)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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%}#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}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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-alias-border-size-thick)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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;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%}#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])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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,
@@ -30,0 +24,0 @@ var(--spectrum-alias-border-size-thin)))}:host([open])>#header:after{height:calc(100% - var(--spectrum-accordion-item-border-size,

src/accordion-item.css.ts

@@ -14,16 +14,10 @@ /*
 const styles = css`
-: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)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}: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,
+: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;transition:transform ease var(--spectrum-global-animation-duration-100,.13s)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;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-global-dimension-size-125) + 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)))}: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-225)) + var(--spectrum-global-dimension-size-125) + 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)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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%}#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}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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-alias-border-size-thick)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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;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%}#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])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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,
@@ -30,0 +24,0 @@ var(--spectrum-alias-border-size-thin)))}:host([open])>#header:after{height:calc(100% - var(--spectrum-accordion-item-border-size,

src/Accordion.js

@@ -79,5 +79,12 @@ /*
         let next = focused;
-        while (items[next].disabled || next === focused) {
+        let availableItems = items.length;
+        // cycle through the available items in the directions of the offset to find the next non-disabled item
+        while ((items[next].disabled || next === focused) && availableItems) {
+            availableItems -= 1;
             next = (items.length + next + direction) % items.length;
         }
+        // if there are no non-disabled items, skip the work to focus a child
+        if (items[next].disabled || next === focused) {
+            return;
+        }
         items[next].focus();
@@ -84,0 +91,0 @@ }

src/Accordion.ts

@@ -102,5 +102,12 @@ /*
         let next = focused;
-        while (items[next].disabled || next === focused) {
+        let availableItems = items.length;
+        // cycle through the available items in the directions of the offset to find the next non-disabled item
+        while ((items[next].disabled || next === focused) && availableItems) {
+            availableItems -= 1;
             next = (items.length + next + direction) % items.length;
         }
+        // if there are no non-disabled items, skip the work to focus a child
+        if (items[next].disabled || next === focused) {
+            return;
+        }
         items[next].focus();
@@ -107,0 +114,0 @@ }

src/AccordionItem.js

@@ -16,4 +16,4 @@ /*
 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 { Chevron100Icon } from '@spectrum-web-components/icons-ui';
+import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 import styles from './accordion-item.css.js';
@@ -33,3 +33,3 @@ /**
     static get styles() {
-        return [styles, chevronRightMediumIconStyles];
+        return [styles, chevronIconStyles];
     }
@@ -79,4 +79,4 @@ get focusElement() {
                 </button>
-                <sp-icon id="indicator" size="xs" class="chevron-right-medium">
-                    ${ChevronRightMediumIcon({ hidden: true })}
+                <sp-icon id="indicator" class="spectrum-UIIcon-ChevronRight100">
+                    ${Chevron100Icon()}
                 </sp-icon>
@@ -83,0 +83,0 @@ </h3>

src/AccordionItem.ts

@@ -23,4 +23,4 @@ /*
 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 { Chevron100Icon } from '@spectrum-web-components/icons-ui';
+import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
 
@@ -35,3 +35,3 @@ import styles from './accordion-item.css.js';
     public static get styles(): CSSResultArray {
-        return [styles, chevronRightMediumIconStyles];
+        return [styles, chevronIconStyles];
     }
@@ -102,4 +102,4 @@
                 </button>
-                <sp-icon id="indicator" size="xs" class="chevron-right-medium">
-                    ${ChevronRightMediumIcon({ hidden: true })}
+                <sp-icon id="indicator" class="spectrum-UIIcon-ChevronRight100">
+                    ${Chevron100Icon()}
                 </sp-icon>
@@ -106,0 +106,0 @@ </h3>

src/spectrum-accordion-item.css.js

@@ -14,15 +14,12 @@ /*
 const styles = css `
-: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)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}: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,
+: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(50% - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;position:relative;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-global-dimension-size-125) + 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)))}: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-225)) + var(--spectrum-global-dimension-size-125) + 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)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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-thick)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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(100% - 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%}#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-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%}#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(100% - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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))}
@@ -29,0 +26,0 @@ `;

src/spectrum-accordion-item.css.ts

@@ -14,17 +14,14 @@ /*
 const styles = css`
-: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)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}: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,
+: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(50% - var(--spectrum-accordion-icon-height,
+var(--spectrum-global-dimension-size-125))/2);transition:transform ease var(--spectrum-global-animation-duration-100,.13s)}:host{z-index:inherit;position:relative;display:list-item;margin:0;border-bottom:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host(:first-of-type){border-top:var(--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}#heading{margin:0;position:relative;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-global-dimension-size-125) + 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)))}: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-225)) + var(--spectrum-global-dimension-size-125) + 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)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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-thick)))}:host([dir=ltr]) #header{padding-right:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=rtl]) #header{padding-left:var(--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225))}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{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(100% - 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%}#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-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%}#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(100% - var(--spectrum-accordion-item-border-size,
 var(--spectrum-alias-border-size-thin)))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300))}#indicator{color:var(--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600))}#header{color:var(--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700))}#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-item-padding-x": "var(--spectrum-global-dimension-size-225)",
-    "--spectrum-accordion-item-height": "40px",
+    "--spectrum-accordion-icon-height": "var(--spectrum-global-dimension-size-125)",
     "--spectrum-accordion-item-border-size": "var(--spectrum-alias-border-size-thin)",
-    "--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)",
@@ -9,0 +7,0 @@ "--spectrum-accordion-item-border-left-size-key-focus": "var(--spectrum-alias-border-size-thick)",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Worsened metrics

Total package byte prevSize

120741

decreased by-2.07%

Lines of code

1446

decreased by-1.23%

Dependency changes

• Updated@spectrum-web-components/base@^0.1.4-alpha.169+a396c860

• Updated@spectrum-web-components/icon@^0.6.4-alpha.169+a396c860

• Updated@spectrum-web-components/icons-ui@^0.3.4-alpha.169+a396c860

• Updated@spectrum-web-components/shared@^0.7.5-alpha.169+a396c860