@patternfly/pfe-accordion - npm Package Compare versions

Comparing version 2.0.0-next.3 to 2.0.0-next.4

custom-elements.json

@@ -137,2 +137,12 @@ {
               "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "button",
@@ -254,2 +264,10 @@ "type": {
               "fieldName": "headingTag"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
             }
@@ -351,2 +369,12 @@ ],
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
             }
@@ -377,2 +405,10 @@ ],
               "fieldName": "ariaLabelledby"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
             }
@@ -646,2 +682,31 @@ ],
               "kind": "field",
+              "name": "colorPalette",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [Color](https://patternflyelements.org/theming/colors/) for default values",
+              "attribute": "color-palette",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "deprecated": "use `color-palette`"
+            },
+            {
+              "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "disclosure",
@@ -801,3 +866,8 @@ "type": {
               "name": "getAnimationDuration",
-              "privacy": "private"
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
             },
@@ -1048,2 +1118,19 @@ {
             {
+              "name": "color-palette",
+              "type": {
+                "text": "ColorPalette | undefined"
+              },
+              "description": "Sets color palette, which affects the element's styles as well as descendants' color theme.\nOverrides parent color context.\nYour theme will influence these colors so check there first if you are seeing inconsistencies.\nSee [Color](https://patternflyelements.org/theming/colors/) for default values",
+              "fieldName": "colorPalette"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme"
+              },
+              "default": "'light'",
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
+            },
+            {
               "name": "disclosure",
@@ -1050,0 +1137,0 @@ "type": {

package.json

 {
   "name": "@patternfly/pfe-accordion",
-  "version": "2.0.0-next.3",
+  "version": "2.0.0-next.4",
   "license": "MIT",
@@ -72,7 +72,7 @@ "description": "Accordion for PatternFly Elements",
   "dependencies": {
-    "@patternfly/pfe-collapse": "^2.0.0-next.1",
-    "@patternfly/pfe-core": "^2.0.0-next.3",
-    "@patternfly/pfe-icon": "^2.0.0-next.1",
+    "@patternfly/pfe-collapse": "^2.0.0-next.2",
+    "@patternfly/pfe-core": "^2.0.0-next.4",
+    "@patternfly/pfe-icon": "^2.0.0-next.2",
     "lit": "^2.1.2"
   }
 }

pfe-accordion-header.d.ts

 import { LitElement } from 'lit';
-import { ComposedEvent } from '@patternfly/pfe-core';
+import { ColorTheme, ComposedEvent } from '@patternfly/pfe-core';
 import '@patternfly/pfe-icon';
@@ -47,2 +47,6 @@ export declare class AccordionHeaderChangeEvent extends ComposedEvent {
     headingTag: string;
+    /**
+     * Sets color theme based on parent context
+     */
+    on?: ColorTheme;
     button?: HTMLButtonElement;
@@ -49,0 +53,0 @@ private _generatedHtag?;

pfe-accordion-header.js

@@ -1,5 +0,5 @@
-var v=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var t=(a,e,c,i)=>{for(var r=i>1?void 0:i?m(e,c):e,d=a.length-1,p;d>=0;d--)(p=a[d])&&(r=(i?p(e,c,r):p(r))||r);return i&&r&&v(e,c,r),r};import{LitElement as l,html as s}from"lit";import{customElement as _,property as n,query as b}from"lit/decorators.js";import{unsafeStatic as C,html as w}from"lit/static-html.js";import{ComposedEvent as y}from"@patternfly/pfe-core";import{pfelement as k,bound as g,observed as B,initializer as E}from"@patternfly/pfe-core/decorators.js";import{getRandomId as S}from"@patternfly/pfe-core/functions/random.js";import{deprecatedCustomEvent as T}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{SlotController as H}from"@patternfly/pfe-core/controllers/slot-controller.js";import{Logger as z}from"@patternfly/pfe-core/controllers/logger.js";import{css as u}from"lit";var x=u`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{position:relative;display:block;outline:0;box-sizing:border-box;background-color:var(--pfe-accordion--BackgroundColor,transparent);color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);--pfe-icon--color:var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));--pfe-icon--size:14px}:host([hidden]){display:none}:host *,:host ::after,:host ::before{box-sizing:border-box}#heading{margin:0}.pf-c-accordion__toggle{cursor:pointer;outline:0;position:relative;width:100%;margin:0;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5);padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5));background-color:transparent;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));text-align:left;font-family:var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--xl, 1.25rem));font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--normal,400));text-align:var(--pfe-accordion--TextAlign,left);line-height:var(--pfe-theme--line-height, 1.5);--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);border-style:var(--pfe-theme--surface--border-style,solid);border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-right-color:transparent;border-left-color:transparent}.pf-c-accordion__toggle::before{position:absolute;content:"";top:-2px;left:-2px;width:calc(100% + var(--pfe-theme--ui--border-width--active,3px));height:calc(100% + var(--pfe-theme--ui--border-width--active,3px));border-radius:var(--pfe-theme--ui--border-radius,2px);border:var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--ui--border-style,solid) transparent}.pf-c-accordion__toggle:focus::before{border-color:#6b9ff0}.pf-c-accordion__toggle:focus:not(:focus-visible)::before{border:unset}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2)}.pf-c-accordion__toggle .pf-c-accordion__toggle-text{margin-top:calc(-1 * var(--_typography-offset,5px));margin-bottom:calc(-1 * var(--_typography-offset,5px))}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{margin-top:calc(var(--_typography-offset,5px)/ 4)}:host(:not(:first-of-type)) .pf-c-accordion__toggle{border-top-width:0}.pf-c-accordion__toggle::after{position:absolute;content:"";top:-1px;left:-1px;bottom:-1px;background-color:var(--pfe-accordion--accent,transparent);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - -1px);height:calc(100% - -1px - -1px);z-index:4;z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}.pf-c-accordion__toggle:active,.pf-c-accordion__toggle:hover,:host(:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, var(--pfe-theme--color--surface--lighter, #f0f0f0));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host(:not([expanded])) .pf-c-accordion__toggle:active,:host(:not([expanded])) .pf-c-accordion__toggle:focus,:host(:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c))}:host([on=dark]) .pf-c-accordion__toggle:active,:host([on=dark]) .pf-c-accordion__toggle:hover,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([on=saturated]) .pf-c-accordion__toggle:active,:host([on=saturated]) .pf-c-accordion__toggle:hover,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host(.animating) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-bottom-width:0}:host(.animating) .pf-c-accordion__toggle,:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-right-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-left-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle{gap:calc(var(--pfe-theme--container-padding,1rem)/ 2);font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--semi-bold,600))}.pf-c-accordion__toggle-wrapper{flex-grow:1;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}.pf-c-accordion__toggle-text{max-width:var(--pfe-accordion--MaxWidth--content,80ch)}.pf-c-accordion__toggle-icon{align-self:flex-start;transition-property:transform;transition-duration:var(--pfe-theme--animation-speed, .3s);transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946))}:host([expanded]) .pf-c-accordion__toggle-icon{transform:rotate(90deg)}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle-icon{order:-1}.pf-c-accordion__toggle-accents{flex-grow:1}`,f=x;import"@patternfly/pfe-icon";var L=a=>a instanceof HTMLElement&&!!a.tagName.match(/P|^H[1-6]/),h=class extends y{constructor(e,c){super("change");this.expanded=e;this.toggle=c}},o=class extends l{constructor(){super();this.expanded=!1;this.headingText="";this.headingTag="h3";this.slots=new H(this,"accents",null);this.logger=new z(this);this.addEventListener("click",this._clickHandler)}get ariaExpandedState(){return String(!!this.expanded)}connectedCallback(){super.connectedCallback(),this.hidden=!0,this.id||(this.id=S("pfe-accordion"))}async _init(){let e=await this._getHeaderElement();e!==this._generatedHtag&&(this._generatedHtag=void 0),this.headingTag=e?.tagName.toLowerCase()??"h3",this.headingText=e?.textContent?.trim()??"",this.hidden=!1}render(){let e=C(this.headingTag);return w`
+var v=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var t=(a,n,e,r)=>{for(var c=r>1?void 0:r?m(n,e):n,d=a.length-1,p;d>=0;d--)(p=a[d])&&(c=(r?p(n,e,c):p(c))||c);return r&&c&&v(n,e,c),c};import{LitElement as g,html as s}from"lit";import{customElement as _,property as i,query as b}from"lit/decorators.js";import{unsafeStatic as C,html as w}from"lit/static-html.js";import{ComposedEvent as y}from"@patternfly/pfe-core";import{pfelement as k,bound as h,observed as E,initializer as T,colorContextConsumer as S}from"@patternfly/pfe-core/decorators.js";import{getRandomId as B}from"@patternfly/pfe-core/functions/random.js";import{deprecatedCustomEvent as z}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{SlotController as H}from"@patternfly/pfe-core/controllers/slot-controller.js";import{Logger as L}from"@patternfly/pfe-core/controllers/logger.js";import{css as x}from"lit";var u=x`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,var(--pfe-theme--color--surface--lightest,#fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(247,247,249,.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(0,0,0,.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{position:relative;display:block;outline:0;box-sizing:border-box;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);--pfe-icon--color:var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));--pfe-icon--size:14px}:host([hidden]){display:none}:host *,:host ::after,:host ::before{box-sizing:border-box}#heading{margin:0}.pf-c-accordion__toggle{cursor:pointer;outline:0;position:relative;width:100%;margin:0;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5);padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5));background-color:transparent;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));text-align:left;font-family:var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--xl, 1.25rem));font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--normal,400));text-align:var(--pfe-accordion--TextAlign,left);line-height:var(--pfe-theme--line-height, 1.5);--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);border-style:var(--pfe-theme--surface--border-style,solid);border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-right-color:transparent;border-left-color:transparent}.pf-c-accordion__toggle::before{position:absolute;content:"";top:-2px;left:-2px;width:calc(100% + var(--pfe-theme--ui--border-width--active,3px));height:calc(100% + var(--pfe-theme--ui--border-width--active,3px));border-radius:var(--pfe-theme--ui--border-radius,2px);border:var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--ui--border-style,solid) transparent}.pf-c-accordion__toggle:focus::before{border-color:#6b9ff0}.pf-c-accordion__toggle:focus:not(:focus-visible)::before{border:unset}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2)}.pf-c-accordion__toggle .pf-c-accordion__toggle-text{margin-top:calc(-1 * var(--_typography-offset,5px));margin-bottom:calc(-1 * var(--_typography-offset,5px))}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{margin-top:calc(var(--_typography-offset,5px)/ 4)}:host(:not(:first-of-type)) .pf-c-accordion__toggle{border-top-width:0}.pf-c-accordion__toggle::after{position:absolute;content:"";top:-1px;left:-1px;bottom:-1px;background-color:var(--pfe-accordion--accent,transparent);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - -1px);height:calc(100% - -1px - -1px);z-index:4;z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}.pf-c-accordion__toggle:active,.pf-c-accordion__toggle:hover,:host(:not([expanded])) .pf-c-accordion__toggle:focus{background-color:var(--pfe-accordion--BackgroundColor--active,var(--pfe-theme--color--surface--lighter,#f0f0f0));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host(:not([expanded])) .pf-c-accordion__toggle:active,:host(:not([expanded])) .pf-c-accordion__toggle:focus,:host(:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c))}:host([on=dark]) .pf-c-accordion__toggle:active,:host([on=dark]) .pf-c-accordion__toggle:hover,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus{background-color:var(--pfe-accordion--BackgroundColor--active,rgba(247,247,249,.1));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([on=saturated]) .pf-c-accordion__toggle:active,:host([on=saturated]) .pf-c-accordion__toggle:hover,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus{background-color:var(--pfe-accordion--BackgroundColor--active,rgba(0,0,0,.2));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host(.animating) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-bottom-width:0}:host(.animating) .pf-c-accordion__toggle,:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-right-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-left-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle{gap:calc(var(--pfe-theme--container-padding,1rem)/ 2);font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--semi-bold,600))}.pf-c-accordion__toggle-wrapper{flex-grow:1;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}.pf-c-accordion__toggle-text{max-width:var(--pfe-accordion--MaxWidth--content,80ch)}.pf-c-accordion__toggle-icon{align-self:flex-start;transition-property:transform;transition-duration:var(--pfe-theme--animation-speed, .3s);transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946))}:host([expanded]) .pf-c-accordion__toggle-icon{transform:rotate(90deg)}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle-icon{order:-1}.pf-c-accordion__toggle-accents{flex-grow:1}`,f=u;import"@patternfly/pfe-icon";var M=a=>a instanceof HTMLElement&&!!a.tagName.match(/P|^H[1-6]/),l=class extends y{constructor(e,r){super("change");this.expanded=e;this.toggle=r}},o=class extends g{constructor(){super();this.expanded=!1;this.headingText="";this.headingTag="h3";this.slots=new H(this,"accents",null);this.logger=new L(this);this.addEventListener("click",this._clickHandler)}get ariaExpandedState(){return String(!!this.expanded)}connectedCallback(){super.connectedCallback(),this.hidden=!0,this.id||(this.id=B("pfe-accordion"))}async _init(){let e=await this._getHeaderElement();e!==this._generatedHtag&&(this._generatedHtag=void 0),this.headingTag=e?.tagName.toLowerCase()??"h3",this.headingText=e?.textContent?.trim()??"",this.hidden=!1}render(){let e=C(this.headingTag);return w`
       <${e} id="heading">${s`<button id="button" aria-expanded="${this.ariaExpandedState}" class="pf-c-accordion__toggle"><span class="pf-c-accordion__toggle-wrapper"><span class="pf-c-accordion__toggle-text" part="text">${this.headingText||s`<slot></slot>`} </span>${this.slots.hasSlotted("accents")?s`<span class="pf-c-accordion__toggle-accents" part="accents"><slot name="accents"></slot></span>`:""}</span><pfe-icon icon="web-icon-caret-thin-right" on-fail="collapse" part="icon" class="pf-c-accordion__toggle-icon"></pfe-icon></button>`}
       </${e}>
-    `}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._clickHandler)}async _getHeaderElement(){if(await this.updateComplete,!this.firstElementChild&&!this.firstChild)return void this.logger.warn("No header content provided");if(this.firstElementChild){let[e,...c]=this.slots.getSlotted().filter(L);if(e)c.length&&this.logger.warn("Heading currently only supports 1 tag; extra tags will be ignored.");else return void this.logger.warn("No heading information was provided.");return e}else return this._generatedHtag||this.logger.warn("Header should contain at least 1 heading tag for correct semantics."),this._generatedHtag=document.createElement("h3"),this.firstChild?.nodeType===Node.TEXT_NODE?this._generatedHtag.textContent=this.firstChild.textContent:this._generatedHtag.textContent=this.textContent,this._generatedHtag}_clickHandler(){let e=!this.expanded;this.dispatchEvent(new h(e,this)),this.dispatchEvent(T("pfe-accordion:change",{expanded:e,toggle:this}))}_expandedChanged(){this.button?.setAttribute("aria-expanded",this.ariaExpandedState)}};o.version="{{version}}",o.styles=[f],o.shadowRootOptions={...l.shadowRootOptions,delegatesFocus:!0},t([n({attribute:"aria-controls",reflect:!0})],o.prototype,"ariaControls",2),t([n({type:String,reflect:!0})],o.prototype,"disclosure",2),t([B,n({type:Boolean,reflect:!0})],o.prototype,"expanded",2),t([n({reflect:!0,attribute:"heading-text"})],o.prototype,"headingText",2),t([n({reflect:!0,attribute:"heading-tag"})],o.prototype,"headingTag",2),t([b(".pf-c-accordion__toggle")],o.prototype,"button",2),t([E()],o.prototype,"_init",1),t([g],o.prototype,"_getHeaderElement",1),t([g],o.prototype,"_clickHandler",1),o=t([_("pfe-accordion-header"),k()],o);export{h as AccordionHeaderChangeEvent,o as PfeAccordionHeader};
+    `}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._clickHandler)}async _getHeaderElement(){if(await this.updateComplete,!this.firstElementChild&&!this.firstChild)return void this.logger.warn("No header content provided");if(this.firstElementChild){let[e,...r]=this.slots.getSlotted().filter(M);if(e)r.length&&this.logger.warn("Heading currently only supports 1 tag; extra tags will be ignored.");else return void this.logger.warn("No heading information was provided.");return e}else return this._generatedHtag||this.logger.warn("Header should contain at least 1 heading tag for correct semantics."),this._generatedHtag=document.createElement("h3"),this.firstChild?.nodeType===Node.TEXT_NODE?this._generatedHtag.textContent=this.firstChild.textContent:this._generatedHtag.textContent=this.textContent,this._generatedHtag}_clickHandler(){let e=!this.expanded;this.dispatchEvent(new l(e,this)),this.dispatchEvent(z("pfe-accordion:change",{expanded:e,toggle:this}))}_expandedChanged(){this.button?.setAttribute("aria-expanded",this.ariaExpandedState)}};o.version="{{version}}",o.styles=[f],o.shadowRootOptions={...g.shadowRootOptions,delegatesFocus:!0},t([i({attribute:"aria-controls",reflect:!0})],o.prototype,"ariaControls",2),t([i({type:String,reflect:!0})],o.prototype,"disclosure",2),t([E,i({type:Boolean,reflect:!0})],o.prototype,"expanded",2),t([i({reflect:!0,attribute:"heading-text"})],o.prototype,"headingText",2),t([i({reflect:!0,attribute:"heading-tag"})],o.prototype,"headingTag",2),t([S(),i({reflect:!0})],o.prototype,"on",2),t([b(".pf-c-accordion__toggle")],o.prototype,"button",2),t([T()],o.prototype,"_init",1),t([h],o.prototype,"_getHeaderElement",1),t([h],o.prototype,"_clickHandler",1),o=t([_("pfe-accordion-header"),k()],o);export{l as AccordionHeaderChangeEvent,o as PfeAccordionHeader};
 //# sourceMappingURL=pfe-accordion-header.js.map

pfe-accordion-panel.d.ts

 import { LitElement } from 'lit';
+import { ColorTheme } from '@patternfly/pfe-core';
 /**
@@ -15,2 +16,6 @@ * Accordion Panel
     ariaLabelledby?: string;
+    /**
+     * Sets color theme based on parent context
+     */
+    on?: ColorTheme;
     connectedCallback(): void;
@@ -17,0 +22,0 @@ render(): import("lit-html").TemplateResult<1>;

pfe-accordion-panel.js

@@ -1,2 +0,2 @@
-var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=(d,r,t,n)=>{for(var e=n>1?void 0:n?l(r,t):r,c=d.length-1,i;c>=0;c--)(i=d[c])&&(e=(n?i(r,t,e):i(e))||e);return n&&e&&s(r,t,e),e};import{LitElement as v,html as m}from"lit";import{customElement as b,property as p}from"lit/decorators.js";import{pfelement as g}from"@patternfly/pfe-core/decorators.js";import{getRandomId as u}from"@patternfly/pfe-core/functions/random.js";import{PfeCollapsePanel as w}from"@patternfly/pfe-collapse/pfe-collapse-panel.js";import{css as h}from"lit";var x=h`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{display:none;overflow:hidden;will-change:height;border-color:transparent;opacity:0;position:relative;box-sizing:border-box;width:100%;z-index:0;margin:0;padding:0;background-color:var(--pfe-accordion--BackgroundColor,transparent);color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);box-sizing:border-box;border-style:var(--pfe-theme--surface--border-style,solid);border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-top-width:0;border-bottom-width:0}:host *,:host ::after,:host ::before{box-sizing:border-box}:host ::slotted(*){--pfe-accordion--BoxShadow:none}:host::after{position:absolute;content:"";bottom:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));left:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));background-color:var(--pfe-accordion--accent,transparent);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));height:calc(100% - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}.pf-c-accordion__expanded-content{position:relative;display:block;width:100%;padding:var(--pfe-theme--container-spacer,1rem);display:inline-block;padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}.pf-c-accordion__expanded-content::after{clear:both;content:"";display:table}:host([disclosure=true]) .pf-c-accordion__expanded-content{padding:var(--pfe-accordion__panel-container--Padding,0 calc(var(--pfe-theme--container-padding,1rem) * 3) calc(var(--pfe-theme--container-padding,1rem)) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}:host(:not([full-width])) .pf-c-accordion__expanded-content{max-width:var(--pfe-accordion--MaxWidth--content,80ch)}:host(.animating){border-left-color:var(--pfe-accordion--accent,transparent);opacity:1}:host(.animating[hidden]),:host([expanded]:not(.animating)){margin-bottom:0;border-bottom-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));display:block!important;position:relative;opacity:1}:host([expanded]:not(.animating)){overflow:visible}:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}`,f=x;var o=class extends v{constructor(){super(...arguments);this.expanded=!1}connectedCallback(){super.connectedCallback(),this.id||(this.id=u("pfe-accordion-panel")),this.setAttribute("role","region")}render(){return m`<div tabindex="-1"><div id="container" class="pf-c-accordion__expanded-content" part="container"><slot></slot></div></div>`}};o.version="{{version}}",o.styles=[...w.styles,f],a([p({type:String,reflect:!0})],o.prototype,"disclosure",2),a([p({type:Boolean,reflect:!0})],o.prototype,"expanded",2),a([p({attribute:"aria-labelledby",reflect:!0})],o.prototype,"ariaLabelledby",2),o=a([b("pfe-accordion-panel"),g()],o);export{o as PfeAccordionPanel};
+var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=(d,r,c,n)=>{for(var e=n>1?void 0:n?l(r,c):r,i=d.length-1,p;i>=0;i--)(p=d[i])&&(e=(n?p(r,c,e):p(e))||e);return n&&e&&s(r,c,e),e};import{LitElement as m,html as v}from"lit";import{customElement as b,property as t}from"lit/decorators.js";import{colorContextConsumer as g,pfelement as u}from"@patternfly/pfe-core/decorators.js";import{getRandomId as w}from"@patternfly/pfe-core/functions/random.js";import{PfeCollapsePanel as B}from"@patternfly/pfe-collapse/pfe-collapse-panel.js";import{css as h}from"lit";var x=h`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,var(--pfe-theme--color--surface--lightest,#fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(247,247,249,.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(0,0,0,.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{display:none;overflow:hidden;will-change:height;border-color:transparent;opacity:0;position:relative;box-sizing:border-box;width:100%;z-index:0;margin:0;padding:0;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);box-sizing:border-box;border-style:var(--pfe-theme--surface--border-style,solid);border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-top-width:0;border-bottom-width:0}:host *,:host ::after,:host ::before{box-sizing:border-box}:host ::slotted(*){--pfe-accordion--BoxShadow:none}:host::after{position:absolute;content:"";bottom:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));left:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));background-color:var(--pfe-accordion--accent,transparent);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));height:calc(100% - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}.pf-c-accordion__expanded-content{position:relative;display:block;width:100%;padding:var(--pfe-theme--container-spacer,1rem);display:inline-block;padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}.pf-c-accordion__expanded-content::after{clear:both;content:"";display:table}:host([disclosure=true]) .pf-c-accordion__expanded-content{padding:var(--pfe-accordion__panel-container--Padding,0 calc(var(--pfe-theme--container-padding,1rem) * 3) calc(var(--pfe-theme--container-padding,1rem)) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}:host(:not([full-width])) .pf-c-accordion__expanded-content{max-width:var(--pfe-accordion--MaxWidth--content,80ch)}:host(.animating){border-left-color:var(--pfe-accordion--accent,transparent);opacity:1}:host(.animating[hidden]),:host([expanded]:not(.animating)){margin-bottom:0;border-bottom-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));display:block!important;position:relative;opacity:1}:host([expanded]:not(.animating)){overflow:visible}:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}`,f=x;import"@patternfly/pfe-core";var o=class extends m{constructor(){super(...arguments);this.expanded=!1}connectedCallback(){super.connectedCallback(),this.id||(this.id=w("pfe-accordion-panel")),this.setAttribute("role","region")}render(){return v`<div tabindex="-1"><div id="container" class="pf-c-accordion__expanded-content" part="container"><slot></slot></div></div>`}};o.version="{{version}}",o.styles=[...B.styles,f],a([t({type:String,reflect:!0})],o.prototype,"disclosure",2),a([t({type:Boolean,reflect:!0})],o.prototype,"expanded",2),a([t({attribute:"aria-labelledby",reflect:!0})],o.prototype,"ariaLabelledby",2),a([g(),t({reflect:!0})],o.prototype,"on",2),o=a([b("pfe-accordion-panel"),u()],o);export{o as PfeAccordionPanel};
 //# sourceMappingURL=pfe-accordion-panel.js.map

pfe-accordion.d.ts

 import type { TemplateResult } from 'lit';
 import { LitElement } from 'lit';
-import { ComposedEvent } from '@patternfly/pfe-core';
+import { ComposedEvent, ColorPalette, ColorTheme } from '@patternfly/pfe-core';
 import { PfeAccordionHeader } from './pfe-accordion-header.js';
@@ -101,2 +101,15 @@ import { PfeAccordionPanel } from './pfe-accordion-panel.js';
     /**
+     * Sets color palette, which affects the element's styles as well as descendants' color theme.
+     * Overrides parent color context.
+     * Your theme will influence these colors so check there first if you are seeing inconsistencies.
+     * See [Color](https://patternflyelements.org/theming/colors/) for default values
+     */
+    colorPalette?: ColorPalette;
+    /** @deprecated use `color-palette` */
+    color?: ColorPalette;
+    /**
+     * Sets color theme based on parent context
+     */
+    on: ColorTheme;
+    /**
      * If the element has one `pfe-accordion-header`, it will get tagged with
@@ -103,0 +116,0 @@ * `disclosure="true"`. This applies a slightly different set of styles:

pfe-accordion.js

@@ -1,2 +0,2 @@
-var v=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var s=(o,e,t,a)=>{for(var r=a>1?void 0:a?_(e,t):e,i=o.length-1,d;i>=0;i--)(d=o[i])&&(r=(a?d(e,t,r):d(r))||r);return a&&r&&v(e,t,r),r};import{LitElement as y,html as w}from"lit";import{customElement as E,property as l,state as C}from"lit/decorators.js";import{bound as c,cascades as P,initializer as S,observed as u,pfelement as L}from"@patternfly/pfe-core/decorators.js";import{NumberListConverter as k,ComposedEvent as m}from"@patternfly/pfe-core";import{deprecatedCustomEvent as f}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as A}from"@patternfly/pfe-core/controllers/logger.js";import{PfeAccordionHeader as I}from"./pfe-accordion-header.js";import{PfeAccordionPanel as D}from"./pfe-accordion-panel.js";import{css as H}from"lit";var b=H`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{display:block;position:relative;overflow:hidden;margin:0;width:var(--pfe-accordion--Width,100%)}:host{overflow:visible}:host([hidden]),[hidden]{display:none!important}`,h=b;function R(o){return o instanceof Element&&o.tagName.toLowerCase()==="pfe-accordion-panel"}var g=class extends m{constructor(e,t){super("expand");this.toggle=e;this.panel=t}},x=class extends m{constructor(e,t){super("collapse");this.toggle=e;this.panel=t}},B=/(?<value>[0-9.]+)(?<unit>[a-zA-Z]+)/g,n=class extends y{constructor(){super(...arguments);this.history=!1;this.expandedIndex=[];this._updateHistory=!0;this.expandedSets=new Set;this.initialized=!1;this.logger=new A(this);this.styles=getComputedStyle(this);this.transitionDuration=this.getAnimationDuration()}static isHeader(e){return e instanceof I}static isPanel(e){return e instanceof D}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler)}render(){return w`<slot></slot>`}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("popstate",this._updateStateFromURL)}async _init(){this.initialized||(this._manualDisclosure=this.getAttribute("disclosure"),await this.updateComplete,this.initialized=!0),this.updateAccessibility(),this._updateStateFromURL()}_changeHandler(e){if(this.classList.contains("animating"))return;let t=this._getIndex(e.target);e.expanded?this.expand(t):this.collapse(t),this._updateURLHistory()}_expandHeader(e){let t=this._getIndex(e);this.expandedSets.add(t),e.expanded=!0}async _expandPanel(e){if(!e){this.logger.error("Trying to expand a panel that doesn't exist.");return}if(e.expanded)return;e.expanded=!0,e.hidden=!1,await e.updateComplete;let t=e.getBoundingClientRect();this._animate(e,0,t.height)}_collapseHeader(e){let t=this._getIndex(e);this.expandedSets.delete(t),e.expanded=!1}async _collapsePanel(e){if(!e){this.logger.error("Trying to collapse a panel that doesn't exist");return}if(await e.updateComplete,!e.expanded)return;let t=e.getBoundingClientRect();e.expanded=!1,e.hidden=!0,this._animate(e,t.height,0)}getAnimationDuration(){if("computedStyleMap"in this)return this.computedStyleMap().get("transition-duration")?.to("ms").value;{let{transitionDuration:e}=this.styles,t=B.exec(e)?.groups;if(!t)return null;let a=t.unit==="s"?1e3:1;return parseFloat(t.value)*a}}async _animate(e,t,a){if(e){let r=e.previousElementSibling,i=this.getAnimationDuration();i&&(this.transitionDuration=i);let d=this.transitionDuration;r?.classList.add("animating"),e.classList.add("animating");let p=e.animate({height:[`${t}px`,`${a}px`]},{duration:d});p.play(),await p.finished,r?.classList.remove("animating"),e.classList.remove("animating"),e.style.removeProperty("height"),e.hidden=!e.expanded}}async _keydownHandler(e){let t=e.target;if(!n.isHeader(t))return;let a;switch(e.key){case"ArrowDown":e.preventDefault(),a=this._nextHeader();break;case"ArrowUp":e.preventDefault(),a=this._previousHeader();break;case"Home":e.preventDefault(),a=this._firstHeader();break;case"End":e.preventDefault(),a=this._lastHeader();break;default:return}a?.focus?.()}_allHeaders(){return Array.from(this.children).filter(n.isHeader)}_allPanels(){return Array.from(this.children).filter(n.isPanel)}_panelForHeader(e){let t=e.nextElementSibling;if(!!t){if(!R(t)){this.logger.error("Sibling element to a header needs to be a panel");return}return t}}_previousHeader(){let e=this._allHeaders(),t=e.findIndex(a=>a.matches(":focus,:focus-within"))-1;return e[(t+e.length)%e.length]}_nextHeader(){let e=this._allHeaders(),t=e.findIndex(a=>a.matches(":focus,:focus-within"))+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){let e=this._allHeaders();return e[e.length-1]}async _expandedIndexChanged(e,t){await this.updateComplete,!(e===t||!Array.isArray(t))&&[...t].reverse().forEach(a=>this.expand(a-1))}_getIndex(e){return n.isHeader(e)?this._allHeaders().findIndex(a=>a.id===e.id):n.isPanel(e)?this._allPanels().findIndex(a=>a.id===e.id):(this.logger.warn("The _getIndex method expects to receive a header or panel element."),-1)}_getIndexesFromURL(){let e=new URLSearchParams(window.location.search);if(e.has(this.id)){let a=(e.get(this.id)??"").split("-");return a.length<0?[]:a.map(r=>parseInt(r.trim(),10)-1)}}_updateURLHistory(){if(!this.history||!this._updateHistory)return;if(!this.id){this.logger.error("The history feature cannot update the URL without an ID added to the pfe-accordion tag.");return}let e=Array.from(this.expandedSets,a=>a+1).sort((a,r)=>a-r).join("-"),t=new URL(window.location.href);this.expandedSets.size>0?t.searchParams.set(this.id,e):t.searchParams.delete(this.id),history.replaceState({},"",t.toString())}_updateStateFromURL(){let e=this._getIndexesFromURL()??[];this._updateHistory=!1,e.forEach(t=>this.expand(t)),this._updateHistory=!0}updateAccessibility(){let e=this._allHeaders();e.forEach(t=>{let a=this._panelForHeader(t);a&&(t.setAttribute("aria-controls",a.id),a.setAttribute("aria-labelledby",t.id),a.hidden=!a.expanded)}),e.length===1?this.disclosure=this._manualDisclosure??"true":e.length>1&&(this.disclosure="false")}toggle(e){this._allHeaders()[e].expanded?this.collapse(e):this.expand(e)}expand(e){if(e==null)return;e=parseInt(`${e}`,10);let a=this._allHeaders()[e];if(!a)return;let r=this._panelForHeader(a);!a||!r||(this._expandHeader(a),this._expandPanel(r),a.focus(),this.dispatchEvent(new g(a,r)),this.dispatchEvent(f("pfe-accordion:expand",{toggle:a,panel:r})))}expandAll(){let e=this._allHeaders(),t=this._allPanels();e.forEach(a=>this._expandHeader(a)),t.forEach(a=>this._expandPanel(a))}collapse(e){let t=this._allHeaders(),a=this._allPanels(),r=t[e],i=a[e];!r||!i||(this._collapseHeader(r),this._collapsePanel(i),this.dispatchEvent(new x(r,i)),this.dispatchEvent(f("pfe-accordion:collapse",{toggle:r,panel:i})))}collapseAll(){let e=this._allHeaders(),t=this._allPanels();e.forEach(a=>this._collapseHeader(a)),t.forEach(a=>this._collapsePanel(a))}};n.version="{{version}}",n.styles=[h],s([P("pfe-accordion-header","pfe-accordion-panel"),l({type:String,reflect:!0})],n.prototype,"disclosure",2),s([u,l({type:Boolean})],n.prototype,"history",2),s([u,l({attribute:"expanded-index",converter:k})],n.prototype,"expandedIndex",2),s([C()],n.prototype,"_updateHistory",2),s([S()],n.prototype,"_init",1),s([c],n.prototype,"_changeHandler",1),s([c],n.prototype,"_getIndexesFromURL",1),s([c],n.prototype,"_updateURLHistory",1),s([c],n.prototype,"_updateStateFromURL",1),n=s([E("pfe-accordion"),L()],n);export{x as AccordionCollapseEvent,g as AccordionExpandEvent,n as PfeAccordion};
+var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var i=(s,d,e,a)=>{for(var t=a>1?void 0:a?_(d,e):d,n=s.length-1,o;n>=0;n--)(o=s[n])&&(t=(a?o(d,e,t):o(t))||t);return a&&t&&b(d,e,t),t};import{LitElement as w,html as C}from"lit";import{customElement as P,property as l,state as E}from"lit/decorators.js";import{bound as c,cascades as S,colorContextConsumer as L,colorContextProvider as k,deprecation as I,initializer as D,observed as m,pfelement as A}from"@patternfly/pfe-core/decorators.js";import{NumberListConverter as R,ComposedEvent as x}from"@patternfly/pfe-core";import{deprecatedCustomEvent as g}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as T}from"@patternfly/pfe-core/controllers/logger.js";import{PfeAccordionHeader as U}from"./pfe-accordion-header.js";import{PfeAccordionPanel as B}from"./pfe-accordion-panel.js";import{css as H}from"lit";var y=H`:host{transition-property:box-shadow,border;transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(0.465,0.183,0.153,0.946));transition-duration:calc(var(--pfe-theme--animation-speed, .3s) / 2)}:host(.animating),:host([expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,var(--pfe-theme--color--surface--lightest,#fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(247,247,249,.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){background-color:var(--pfe-accordion--BackgroundColor--expanded,rgba(0,0,0,.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host{display:block;position:relative;overflow:hidden;margin:0;width:var(--pfe-accordion--Width,100%)}:host{overflow:visible}:host([hidden]),[hidden]{display:none!important}`,f=y;function F(s){return s instanceof Element&&s.tagName.toLowerCase()==="pfe-accordion-panel"}var p=class extends x{constructor(e,a){super("expand");this.toggle=e;this.panel=a}},h=class extends x{constructor(e,a){super("collapse");this.toggle=e;this.panel=a}},z=/^[0-9.]+(?<unit>[a-zA-Z]+)/g,r=class extends w{constructor(){super(...arguments);this.on="light";this.history=!1;this.expandedIndex=[];this._updateHistory=!0;this.expandedSets=new Set;this.initialized=!1;this.logger=new T(this);this.styles=getComputedStyle(this);this.transitionDuration=this.getAnimationDuration()}static isHeader(e){return e instanceof U}static isPanel(e){return e instanceof B}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler)}render(){return C`<slot></slot>`}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("popstate",this._updateStateFromURL)}async _init(){this.initialized||(this._manualDisclosure=this.getAttribute("disclosure"),await this.updateComplete,this.initialized=!0),this.updateAccessibility(),this._updateStateFromURL()}_changeHandler(e){if(this.classList.contains("animating"))return;let a=this._getIndex(e.target);e.expanded?this.expand(a):this.collapse(a),this._updateURLHistory()}_expandHeader(e){let a=this._getIndex(e);this.expandedSets.add(a),e.expanded=!0}async _expandPanel(e){if(!e){this.logger.error("Trying to expand a panel that doesn't exist.");return}if(e.expanded)return;e.expanded=!0,e.hidden=!1,await e.updateComplete;let a=e.getBoundingClientRect();this._animate(e,0,a.height)}_collapseHeader(e){let a=this._getIndex(e);this.expandedSets.delete(a),e.expanded=!1}async _collapsePanel(e){if(!e){this.logger.error("Trying to collapse a panel that doesn't exist");return}if(await e.updateComplete,!e.expanded)return;let a=e.getBoundingClientRect();e.expanded=!1,e.hidden=!0,this._animate(e,a.height,0)}getAnimationDuration(){if("computedStyleMap"in this)return this.computedStyleMap().get("transition-duration")?.to("ms").value;{let{transitionDuration:e}=this.styles,a=z.exec(e)?.groups;if(!a)return 0;let t=parseFloat(e);return a.unit==="s"?t*1e3:t}}async _animate(e,a,t){if(e){let n=e.previousElementSibling,o=this.getAnimationDuration();o&&(this.transitionDuration=o);let v=this.transitionDuration??0;n?.classList.add("animating"),e.classList.add("animating");let u=e.animate({height:[`${a}px`,`${t}px`]},{duration:v});u.play(),await u.finished,n?.classList.remove("animating"),e.classList.remove("animating"),e.style.removeProperty("height"),e.hidden=!e.expanded}}async _keydownHandler(e){let a=e.target;if(!r.isHeader(a))return;let t;switch(e.key){case"ArrowDown":e.preventDefault(),t=this._nextHeader();break;case"ArrowUp":e.preventDefault(),t=this._previousHeader();break;case"Home":e.preventDefault(),t=this._firstHeader();break;case"End":e.preventDefault(),t=this._lastHeader();break;default:return}t?.focus?.()}_allHeaders(){return Array.from(this.children).filter(r.isHeader)}_allPanels(){return Array.from(this.children).filter(r.isPanel)}_panelForHeader(e){let a=e.nextElementSibling;if(!!a){if(!F(a)){this.logger.error("Sibling element to a header needs to be a panel");return}return a}}_previousHeader(){let e=this._allHeaders(),a=e.findIndex(t=>t.matches(":focus,:focus-within"))-1;return e[(a+e.length)%e.length]}_nextHeader(){let e=this._allHeaders(),a=e.findIndex(t=>t.matches(":focus,:focus-within"))+1;return e[a%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){let e=this._allHeaders();return e[e.length-1]}async _expandedIndexChanged(e,a){await this.updateComplete,!(e===a||!Array.isArray(a))&&[...a].reverse().forEach(t=>this.expand(t-1))}_getIndex(e){return r.isHeader(e)?this._allHeaders().findIndex(t=>t.id===e.id):r.isPanel(e)?this._allPanels().findIndex(t=>t.id===e.id):(this.logger.warn("The _getIndex method expects to receive a header or panel element."),-1)}_getIndexesFromURL(){let e=new URLSearchParams(window.location.search);if(e.has(this.id)){let t=(e.get(this.id)??"").split("-");return t.length<0?[]:t.map(n=>parseInt(n.trim(),10)-1)}}_updateURLHistory(){if(!this.history||!this._updateHistory)return;if(!this.id){this.logger.error("The history feature cannot update the URL without an ID added to the pfe-accordion tag.");return}let e=Array.from(this.expandedSets,t=>t+1).sort((t,n)=>t-n).join("-"),a=new URL(window.location.href);this.expandedSets.size>0?a.searchParams.set(this.id,e):a.searchParams.delete(this.id),history.replaceState({},"",a.toString())}_updateStateFromURL(){let e=this._getIndexesFromURL()??[];this._updateHistory=!1,e.forEach(a=>this.expand(a)),this._updateHistory=!0}updateAccessibility(){let e=this._allHeaders();e.forEach(a=>{let t=this._panelForHeader(a);t&&(a.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",a.id),t.hidden=!t.expanded)}),e.length===1?this.disclosure=this._manualDisclosure??"true":e.length>1&&(this.disclosure="false")}toggle(e){this._allHeaders()[e].expanded?this.collapse(e):this.expand(e)}expand(e){if(e==null)return;e=parseInt(`${e}`,10);let t=this._allHeaders()[e];if(!t)return;let n=this._panelForHeader(t);!t||!n||(this._expandHeader(t),this._expandPanel(n),t.focus(),this.dispatchEvent(new p(t,n)),this.dispatchEvent(g("pfe-accordion:expand",{toggle:t,panel:n})))}expandAll(){let e=this._allHeaders(),a=this._allPanels();e.forEach(t=>this._expandHeader(t)),a.forEach(t=>this._expandPanel(t))}collapse(e){let a=this._allHeaders(),t=this._allPanels(),n=a[e],o=t[e];!n||!o||(this._collapseHeader(n),this._collapsePanel(o),this.dispatchEvent(new h(n,o)),this.dispatchEvent(g("pfe-accordion:collapse",{toggle:n,panel:o})))}collapseAll(){let e=this._allHeaders(),a=this._allPanels();e.forEach(t=>this._collapseHeader(t)),a.forEach(t=>this._collapsePanel(t))}};r.version="{{version}}",r.styles=[f],i([k(),l({reflect:!0,attribute:"color-palette"})],r.prototype,"colorPalette",2),i([I({alias:"colorPalette",attribute:"color"})],r.prototype,"color",2),i([L(),l({reflect:!0})],r.prototype,"on",2),i([S("pfe-accordion-header","pfe-accordion-panel"),l({type:String,reflect:!0})],r.prototype,"disclosure",2),i([m,l({type:Boolean})],r.prototype,"history",2),i([m,l({attribute:"expanded-index",converter:R})],r.prototype,"expandedIndex",2),i([E()],r.prototype,"_updateHistory",2),i([D()],r.prototype,"_init",1),i([c],r.prototype,"_changeHandler",1),i([c],r.prototype,"_getIndexesFromURL",1),i([c],r.prototype,"_updateURLHistory",1),i([c],r.prototype,"_updateStateFromURL",1),r=i([P("pfe-accordion"),A()],r);export{h as AccordionCollapseEvent,p as AccordionExpandEvent,r as PfeAccordion};
 //# sourceMappingURL=pfe-accordion.js.map

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

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

Improved metrics

Total package byte prevSize

113824

increased by3.76%

Lines of code

1668

increased by7.13%

Dependency changes

• Updated@patternfly/pfe-collapse@^2.0.0-next.2

• Updated@patternfly/pfe-core@^2.0.0-next.4

• Updated@patternfly/pfe-icon@^2.0.0-next.2