@patternfly/pfe-accordion - npm Package Compare versions

Comparing version 2.0.0-next.9 to 2.0.0-next.10

110

BaseAccordion.d.ts

		import type { TemplateResult } from 'lit';
		import type { ColorTheme, ColorPalette } from '@patternfly/pfe-core';
		import { LitElement } from 'lit';
		@@ -20,53 +19,10 @@ import { ComposedEvent } from '@patternfly/pfe-core';
		static readonly styles: import("lit").CSSResult[];
		static isHeader(element: Element \| null): element is BaseAccordionHeader;
		static isPanel(element: Element \| null): element is BaseAccordionPanel;
		static isAccordion(target: EventTarget \| null): target is BaseAccordion;
		static isHeader(target: EventTarget \| null): target is BaseAccordionHeader;
		static isPanel(target: EventTarget \| null): target is BaseAccordionPanel;
		/**
		* 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;
		single?: 'true' \| 'false';
		/**
		* Updates `window.history` and the URL to create sharable links.
		* With the `history` attribute, the accordion must have an `id`.
		*
		* The URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`.
		* In the example below, selecting "Accordion 2" will update the URL as follows:
		* `?lorem-ipsum=2`. The index value for the expanded items starts at 1.
		*
		* Sets and reflects the currently expanded accordion 0-based indexes.
		* Use commas to separate multiple indexes.
		* ```html
		* <pfe-accordion history id="lorem-ipsum">
		* <pfe-accordion-header>
		* <h3>Accordion 1</h3>
		* </pfe-accordion-header>
		* <pfe-accordion-panel>
		* <p>Accordion 1 panel content.</p>
		* </pfe-accordion-panel>
		* <pfe-accordion-header>
		* <h3>Accordion 2</h3>
		* </pfe-accordion-header>
		* <pfe-accordion-panel>
		* <p>Accordion 2 panel content.</p>
		* </pfe-accordion-panel>
		* </pfe-accordion>
		* ```
		*
		* To expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.
		*/
		history: boolean;
		/**
		* Sets and reflects the currently expanded accordion indexes.
		* Use commas to separate multiple indexes. The index value for the
		* expanded items starts at 1.
		*
		* ```html
		* <pfe-accordion expanded-index="2,3">
		* <pfe-accordion expanded-index="1,2">
		* ...
		@@ -77,46 +33,8 @@ * </pfe-accordion>
		expandedIndex: number[];
		/**
		* Changes the context of the accordion to one of 3 possible themes:
		*
		* - `light` (default)
		* - `dark`
		* - `saturated`
		*
		* This will override any context being passed from a parent component
		* and will add a style attribute setting the `--theme` variable.
		* @attr context
		*/
		context: 'light' \| 'dark' \| 'saturated';
		private _updateHistory;
		private initialized;
		get headers(): BaseAccordionHeader[];
		get panels(): BaseAccordionPanel[];
		protected expandedSets: Set<number>;
		protected getUpdateComplete(): Promise<boolean>;
		connectedCallback(): void;
		render(): TemplateResult;
		disconnectedCallback(): void;
		isAccordionPanel(el?: EventTarget \| null): el is BaseAccordionPanel;
		_panelForHeader(header: BaseAccordionHeader): BaseAccordionPanel \| undefined;
		/**
		* Initialize the accordion by connecting headers and panels
		* with aria controls and labels; set up the default disclosure
		* state if not set by the author; and check the URL for default
		* open
		*/
		protected _init(): Promise<void>;
		private _changeHandler;
		_expandHeader(header: BaseAccordionHeader, index?: number): void;
		private _expandPanel;
		private _collapseHeader;
		private _collapsePanel;
		private _animate;
		protected _expandedIndexChanged(oldVal?: number[], newVal?: number[]): Promise<void>;
		private _getIndexesFromURL;
		/**
		* This handles updating the URL parameters based on the current state
		* of the global this.expanded array
		* @requires this.expandedSets {Array}
		*/
		private _updateURLHistory;
		/**
		* This captures the URL parameters and expands each item in the array
		*/
		private _updateStateFromURL;
		updateAccessibility(): void;
		@@ -126,15 +44,15 @@ /**
		*/
		toggle(index: number): void;
		toggle(index: number): Promise<void>;
		/**
		* Accepts a 0-based index value (integer) for the set of accordion items to expand.
		*/
		expand(index: number, parentAccordion?: BaseAccordion): void;
		expand(index: number, parentAccordion?: BaseAccordion): Promise<void>;
		/**
		* Expands all accordion items.
		*/
		expandAll(): void;
		expandAll(): Promise<void>;
		/**
		* Accepts a 0-based index value (integer) for the set of accordion items to collapse.
		*/
		collapse(index: number): void;
		collapse(index: number): Promise<void>;
		/**
		@@ -141,0 +59,0 @@ * Collapses all accordion items.

BaseAccordion.js

		@@ -1,2 +0,2 @@
		var J=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var h=(s,n,e,t)=>{for(var r=t>1?void 0:t?Q(n,e):n,o=s.length-1,i;o>=0;o--)(i=s[o])&&(r=(t?i(n,e,r):i(r))\|\|r);return t&&r&&J(n,e,r),r};var B=(s,n,e)=>{if(!n.has(s))throw TypeError("Cannot "+e)};var p=(s,n,e)=>(B(s,n,"read from private field"),e?e.call(s):n.get(s)),l=(s,n,e)=>{if(n.has(s))throw TypeError("Cannot add the same private member more than once");n instanceof WeakSet?n.add(s):n.set(s,e)},z=(s,n,e,t)=>(B(s,n,"write to private field"),t?t.call(s,e):n.set(s,e),e);var a=(s,n,e)=>(B(s,n,"access private method"),e);import{LitElement as Y,html as V}from"lit";import{property as w,state as ee}from"lit/decorators.js";import{bound as E,colorContextConsumer as te,colorContextProvider as re,deprecation as ae,initializer as ne,observed as N}from"@patternfly/pfe-core/decorators.js";import{NumberListConverter as se,ComposedEvent as $}from"@patternfly/pfe-core";import{Logger as ie}from"@patternfly/pfe-core/controllers/logger.js";import{css as W}from"lit";var X=W`:host{transition-property:box-shadow,border;transition-timing-function:ease-out;transition-duration:1ms}`,M=X;import{BaseAccordionHeader as oe}from"./BaseAccordionHeader.js";import{BaseAccordionPanel as de}from"./BaseAccordionPanel.js";var le=/^[0-9.]+(?<unit>[a-zA-Z]+)/g,T=class extends ${constructor(e,t){super("expand");this.toggle=e;this.panel=t}},D=class extends ${constructor(e,t){super("collapse");this.toggle=e;this.panel=t}},y,m,L,_,v,F,I,O,c,u,g,b,S,j,R,G,U,K,k,Z,H,C,f=class extends Y{constructor(){super(...arguments);l(this,v);l(this,I);l(this,c);l(this,g);l(this,S);l(this,R);l(this,U);l(this,k);l(this,H);this.on="light";this.history=!1;this.expandedIndex=[];this._updateHistory=!0;l(this,y,new Set);this.initialized=!1;l(this,m,new ie(this));l(this,L,getComputedStyle(this));l(this,_,a(this,v,F).call(this))}static isHeader(e){return e instanceof oe}static isPanel(e){return e instanceof de}connectedCallback(){super.connectedCallback(),this.addEventListener("change",this._changeHandler),this.addEventListener("keydown",a(this,I,O))}render(){return V`<slot></slot>`}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("popstate",this._updateStateFromURL)}isAccordionPanel(e){return e instanceof Element}_panelForHeader(e){let t=e.nextElementSibling;if(!!t){if(!this.isAccordionPanel(t)){p(this,m).error("Sibling element to a header needs to be a panel");return}return t}}async _init(){this.initialized\|\|(await this.updateComplete,this.initialized=!0),this.updateAccessibility(),this._updateStateFromURL()}_changeHandler(e){if(this.classList.contains("animating"))return;let t=a(this,H,C).call(this,e.target);e.expanded?this.expand(t,e.accordion):this.collapse(t),this._updateURLHistory()}_expandHeader(e,t){t===void 0&&(t=a(this,H,C).call(this,e)),p(this,y).add(t),e.expanded=!0}async _expandPanel(e){if(!e){p(this,m).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=a(this,H,C).call(this,e);p(this,y).delete(t),e.expanded=!1}async _collapsePanel(e){if(!e){p(this,m).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)}async _animate(e,t,r){if(e){let o=e.previousElementSibling,i=a(this,v,F).call(this);i&&z(this,_,i);let P=p(this,_)??0;o?.classList.add("animating"),e.classList.add("animating");let A=e.animate({height:[`${t}px`,`${r}px`]},{duration:P});A.play(),await A.finished,o?.classList.remove("animating"),e.classList.remove("animating"),e.style.removeProperty("height"),e.hidden=!e.expanded}}async _expandedIndexChanged(e,t){await this.updateComplete,!(e===t\|\|!Array.isArray(t))&&[...t].reverse().forEach(r=>this.expand(r-1))}_getIndexesFromURL(){let e=new URLSearchParams(window.location.search);if(e.has(this.id)){let r=(e.get(this.id)??"").split("-");return r.length<0?[]:r.map(o=>parseInt(o.trim(),10)-1)}}_updateURLHistory(){if(!this.history\|\|!this._updateHistory)return;if(!this.id){p(this,m).error("The history feature cannot update the URL without an ID added to the accordion tag.");return}let e=Array.from(p(this,y),r=>r+1).sort((r,o)=>r-o).join("-"),t=new URL(window.location.href);p(this,y).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(){a(this,c,u).call(this).forEach(t=>{let r=this._panelForHeader(t);r&&(t.setAttribute("aria-controls",r.id),r.setAttribute("aria-labelledby",t.id),r.hidden=!r.expanded)})}toggle(e){a(this,c,u).call(this)[e].expanded?this.collapse(e):this.expand(e)}expand(e,t){if(e==null\|\|(e=parseInt(`${e}`,10),e===-1))return;let r=a(this,c,u).call(this,t),o=a(this,g,b).call(this,t);if(this.single==="true"&&this._updateHistory){let A=r.filter(x=>x.expanded),q=o.filter(x=>x.expanded);A.forEach(x=>this._collapseHeader(x)),q.forEach(x=>this._collapsePanel(x))}let i=r[e];if(!i)return;let P=this._panelForHeader(i);!i\|\|!P\|\|(this._expandHeader(i,e),this._expandPanel(P),i.focus(),this.dispatchEvent(new T(i,P)))}expandAll(){let e=a(this,c,u).call(this),t=a(this,g,b).call(this);e.forEach(r=>this._expandHeader(r)),t.forEach(r=>this._expandPanel(r))}collapse(e){let t=a(this,c,u).call(this),r=a(this,g,b).call(this),o=t[e],i=r[e];!o\|\|!i\|\|(this._collapseHeader(o),this._collapsePanel(i),this.dispatchEvent(new D(o,i)))}async collapseAll(){let e=a(this,c,u).call(this),t=a(this,g,b).call(this);await e.forEach(r=>this._collapseHeader(r)),await t.forEach(r=>this._collapsePanel(r))}},d=f;y=new WeakMap,m=new WeakMap,L=new WeakMap,_=new WeakMap,v=new WeakSet,F=function(){if("computedStyleMap"in this)return this.computedStyleMap().get("transition-duration")?.to("ms").value;{let{transitionDuration:e}=p(this,L),t=le.exec(e)?.groups;if(!t)return 0;let r=parseFloat(e);return t.unit==="s"?r*1e3:r}},I=new WeakSet,O=async function(e){let t=e.target;if(!f.isHeader(t))return;let r;switch(e.key){case"ArrowDown":e.preventDefault(),r=a(this,R,G).call(this);break;case"ArrowUp":e.preventDefault(),r=a(this,S,j).call(this);break;case"Home":e.preventDefault(),r=a(this,U,K).call(this);break;case"End":e.preventDefault(),r=a(this,k,Z).call(this);break;default:return}r?.focus?.()},c=new WeakSet,u=function(e){return e!==void 0?Array.from(e.children).filter(f.isHeader):Array.from(this.children).filter(f.isHeader)},g=new WeakSet,b=function(e){return e!==void 0?Array.from(e.children).filter(f.isPanel):Array.from(this.children).filter(f.isPanel)},S=new WeakSet,j=function(){let e=a(this,c,u).call(this),t=e.findIndex(r=>r.matches(":focus,:focus-within"))-1;return e[(t+e.length)%e.length]},R=new WeakSet,G=function(){let e=a(this,c,u).call(this),t=e.findIndex(r=>r.matches(":focus,:focus-within"))+1;return e[t%e.length]},U=new WeakSet,K=function(){return a(this,c,u).call(this)[0]},k=new WeakSet,Z=function(){let e=a(this,c,u).call(this);return e[e.length-1]},H=new WeakSet,C=function(e){return f.isHeader(e)?a(this,c,u).call(this).findIndex(r=>r.id===e.id):f.isPanel(e)?a(this,g,b).call(this).findIndex(r=>r.id===e.id):(p(this,m).warn("The _getIndex method expects to receive a header or panel element."),-1)},d.styles=[M],h([re(),w({reflect:!0,attribute:"color-palette"})],d.prototype,"colorPalette",2),h([ae({alias:"colorPalette",attribute:"color"})],d.prototype,"color",2),h([te(),w({reflect:!0})],d.prototype,"on",2),h([w({reflect:!0})],d.prototype,"single",2),h([N,w({type:Boolean})],d.prototype,"history",2),h([N,w({attribute:"expanded-index",converter:se})],d.prototype,"expandedIndex",2),h([ee()],d.prototype,"_updateHistory",2),h([ne()],d.prototype,"_init",1),h([E],d.prototype,"_changeHandler",1),h([E],d.prototype,"_getIndexesFromURL",1),h([E],d.prototype,"_updateURLHistory",1),h([E],d.prototype,"_updateStateFromURL",1);export{D as AccordionCollapseEvent,T as AccordionExpandEvent,d as BaseAccordion};
		var re=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var W=(r,i,e,t)=>{for(var s=t>1?void 0:t?oe(i,e):i,o=r.length-1,d;o>=0;o--)(d=r[o])&&(s=(t?d(i,e,s):d(s))\|\|s);return t&&s&&re(i,e,s),s};var U=(r,i,e)=>{if(!i.has(r))throw TypeError("Cannot "+e)};var l=(r,i,e)=>(U(r,i,"read from private field"),e?e.call(r):i.get(r)),n=(r,i,e)=>{if(i.has(r))throw TypeError("Cannot add the same private member more than once");i instanceof WeakSet?i.add(r):i.set(r,e)},N=(r,i,e,t)=>(U(r,i,"write to private field"),t?t.call(r,e):i.set(r,e),e);var a=(r,i,e)=>(U(r,i,"access private method"),e);import{LitElement as le,html as he}from"lit";import{property as pe}from"lit/decorators.js";import{observed as ue}from"@patternfly/pfe-core/decorators.js";import{NumberListConverter as me,ComposedEvent as Y}from"@patternfly/pfe-core";import{Logger as fe}from"@patternfly/pfe-core/controllers/logger.js";import{BaseAccordionHeader as ge}from"./BaseAccordionHeader.js";import{BaseAccordionPanel as xe}from"./BaseAccordionPanel.js";import{css as de}from"lit";var ce=de`:host{transition-property:box-shadow,border;transition-timing-function:ease-out;transition-duration:1ms}`,X=ce;var be=/^[0-9.]+(?<unit>[a-zA-Z]+)/g,z=class extends Y{constructor(e,t){super("expand");this.toggle=e;this.panel=t}},F=class extends Y{constructor(e,t){super("collapse");this.toggle=e;this.panel=t}},u,P,m,I,S,f,K,g,$,x,G,b,O,y,Z,w,j,A,q,H,J,L,_,D,ee,h,v,C,Q,k,te,T,se,R,ae,M,ie,p,E,c=class extends le{constructor(){super(...arguments);n(this,f);n(this,g);n(this,x);n(this,b);n(this,y);n(this,w);n(this,A);n(this,H);n(this,L);n(this,D);n(this,h);n(this,C);n(this,k);n(this,T);n(this,R);n(this,M);n(this,p);this.expandedIndex=[];this.expandedSets=new Set;n(this,u,new fe(this));n(this,P,getComputedStyle(this));n(this,m,a(this,A,q).call(this));n(this,I,!1);n(this,S,new MutationObserver(()=>a(this,f,K).call(this)))}static isAccordion(e){return e instanceof c}static isHeader(e){return e instanceof ge}static isPanel(e){return e instanceof xe}get headers(){return a(this,h,v).call(this)}get panels(){return a(this,C,Q).call(this)}async getUpdateComplete(){let e=await super.getUpdateComplete(),t=await Promise.all([...a(this,h,v).call(this).map(s=>s.updateComplete),...a(this,C,Q).call(this).map(s=>s.updateComplete)]);return e&&t.every(Boolean)}connectedCallback(){super.connectedCallback(),this.addEventListener("change",a(this,L,_)),this.addEventListener("keydown",a(this,D,ee)),l(this,S).observe(this,{childList:!0}),a(this,f,K).call(this)}render(){return he`<slot></slot>`}updateAccessibility(){let{headers:e}=this;e.forEach(t=>{let s=a(this,g,$).call(this,t);s&&(t.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",t.id),s.hidden=!s.expanded)})}async toggle(e){let{headers:t}=this;t[e].expanded?await this.collapse(e):await this.expand(e)}async expand(e,t){if(e===-1)return;let o=a(this,h,v).call(this,t)[e];if(!o)return;let d=a(this,g,$).call(this,o);!d\|\|(a(this,x,G).call(this,o,e),a(this,b,O).call(this,d),o.focus(),this.dispatchEvent(new z(o,d)),await this.updateComplete)}async expandAll(){this.headers.forEach(e=>a(this,x,G).call(this,e)),this.panels.forEach(e=>a(this,b,O).call(this,e)),await this.updateComplete}async collapse(e){let t=this.headers.at(e),s=this.panels.at(e);!t\|\|!s\|\|(a(this,y,Z).call(this,t),a(this,w,j).call(this,s),this.dispatchEvent(new F(t,s)),await this.updateComplete)}async collapseAll(){this.headers.forEach(e=>a(this,y,Z).call(this,e)),this.panels.forEach(e=>a(this,w,j).call(this,e)),await this.updateComplete}},B=c;u=new WeakMap,P=new WeakMap,m=new WeakMap,I=new WeakMap,S=new WeakMap,f=new WeakSet,K=async function(){l(this,I)\|\|N(this,I,!!await this.updateComplete),this.updateAccessibility()},g=new WeakSet,$=function(e){let t=e.nextElementSibling;return c.isPanel(t)?t:void l(this,u).error("Sibling element to a header needs to be a panel")},x=new WeakSet,G=function(e,t=a(this,p,E).call(this,e)){this.expandedSets.add(t),e.expanded=!0},b=new WeakSet,O=async function(e){e.expanded=!0,e.hidden=!1,await e.updateComplete;let t=e.getBoundingClientRect();a(this,H,J).call(this,e,0,t.height)},y=new WeakSet,Z=async function(e,t=a(this,p,E).call(this,e)){this.expandedSets\|\|await this.updateComplete,this.expandedSets.delete(t),e.expanded=!1,await e.updateComplete},w=new WeakSet,j=async function(e){if(await e.updateComplete,!e.expanded)return;let t=e.getBoundingClientRect();e.expanded=!1,e.hidden=!0,a(this,H,J).call(this,e,t.height,0),await e.updateComplete},A=new WeakSet,q=function(){if("computedStyleMap"in this)return this.computedStyleMap().get("transition-duration")?.to("ms").value;{let{transitionDuration:e}=l(this,P),t=be.exec(e)?.groups;if(!t)return 0;let s=parseFloat(e);return t.unit==="s"?s*1e3:s}},H=new WeakSet,J=async function(e,t,s){if(e){let o=e.previousElementSibling,d=a(this,A,q).call(this);d&&N(this,m,d);let ne=l(this,m)??0;o?.classList.add("animating"),e.classList.add("animating");let V=e.animate({height:[`${t}px`,`${s}px`]},{duration:ne});V.play(),await V.finished,o?.classList.remove("animating"),e.classList.remove("animating"),e.style.removeProperty("height"),e.hidden=!e.expanded}},L=new WeakSet,_=function(e){if(this.classList.contains("animating"))return;let t=a(this,p,E).call(this,e.target);e.expanded?this.expand(t,e.accordion):this.collapse(t)},D=new WeakSet,ee=async function(e){let t=e.target;if(!c.isHeader(t))return;let s;switch(e.key){case"ArrowDown":e.preventDefault(),s=a(this,T,se).call(this);break;case"ArrowUp":e.preventDefault(),s=a(this,k,te).call(this);break;case"Home":e.preventDefault(),s=a(this,R,ae).call(this);break;case"End":e.preventDefault(),s=a(this,M,ie).call(this);break}s?.focus?.()},h=new WeakSet,v=function(e=this){return Array.from(e.children).filter(c.isHeader)},C=new WeakSet,Q=function(e=this){return Array.from(e.children).filter(c.isPanel)},k=new WeakSet,te=function(){let{headers:e}=this,t=e.findIndex(s=>s.matches(":focus,:focus-within"))-1;return e[(t+e.length)%e.length]},T=new WeakSet,se=function(){let{headers:e}=this,t=e.findIndex(s=>s.matches(":focus,:focus-within"))+1;return e[t%e.length]},R=new WeakSet,ae=function(){return this.headers.at(0)},M=new WeakSet,ie=function(){return this.headers.at(-1)},p=new WeakSet,E=function(e){return c.isHeader(e)?this.headers.findIndex(t=>t.id===e.id):c.isPanel(e)?this.panels.findIndex(t=>t.id===e.id):(l(this,u).warn("The #getIndex method expects to receive a header or panel element."),-1)},B.styles=[X],W([ue(async function(){await this.collapseAll();for(let i of this.expandedIndex)await this.expand(i,this)}),pe({attribute:"expanded-index",converter:me})],B.prototype,"expandedIndex",2);export{F as AccordionCollapseEvent,z as AccordionExpandEvent,B as BaseAccordion};
		//# sourceMappingURL=BaseAccordion.js.map

BaseAccordionHeader.d.ts

		@@ -0,5 +1,5 @@
		import type { TemplateResult } from 'lit';
		import { LitElement } from 'lit';
		import type { TemplateResult } from 'lit';
		import { BaseAccordion } from './BaseAccordion.js';
		import { ComposedEvent } from '@patternfly/pfe-core';
		import type { ColorTheme } from '@patternfly/pfe-core';
		import '@patternfly/pfe-icon';
		@@ -9,6 +9,7 @@ export declare class AccordionHeaderChangeEvent extends ComposedEvent {
		toggle: BaseAccordionHeader;
		accordion: any;
		constructor(expanded: boolean, toggle: BaseAccordionHeader, accordion: any);
		accordion: BaseAccordion;
		constructor(expanded: boolean, toggle: BaseAccordionHeader, accordion: BaseAccordion);
		}
		export declare abstract class BaseAccordionHeader extends LitElement {
		#private;
		static readonly version = "{{version}}";
		@@ -22,26 +23,9 @@ static readonly styles: import("lit").CSSResult[];
		};
		ariaControls?: string;
		bordered?: 'true' \| 'false';
		icon?: string;
		iconSet?: string;
		expanded: boolean;
		headingText: string;
		headingTag: string;
		/**
		* Sets color theme based on parent context
		*/
		on?: ColorTheme;
		button?: HTMLButtonElement;
		private _generatedHtag?;
		private slots;
		private logger;
		private get ariaExpandedState();
		constructor();
		connectedCallback(): void;
		protected _init(): Promise<void>;
		/** Template hook: before </button> */
		renderAfterButton?(): TemplateResult;
		render(): TemplateResult;
		disconnectedCallback(): void;
		private _getHeaderElement;
		private _clickHandler;
		protected _expandedChanged(): void;
		}

BaseAccordionHeader.js

		@@ -1,5 +0,12 @@
		var f=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(o,s,e,r)=>{for(var n=r>1?void 0:r?u(s,e):s,l=o.length-1,d;l>=0;l--)(d=o[l])&&(n=(r?d(s,e,n):d(n))\|\|n);return r&&n&&f(s,e,n),n};import{LitElement as c,html as g}from"lit";import{property as a,query as C}from"lit/decorators.js";import{unsafeStatic as v,html as y}from"lit/static-html.js";import"lit/directives/if-defined.js";import{ComposedEvent as w}from"@patternfly/pfe-core";import{bound as m,observed as E,initializer as T,colorContextConsumer as _}from"@patternfly/pfe-core/decorators.js";import{getRandomId as L}from"@patternfly/pfe-core/functions/random.js";import{SlotController as S}from"@patternfly/pfe-core/controllers/slot-controller.js";import{Logger as k}from"@patternfly/pfe-core/controllers/logger.js";import{css as x}from"lit";var b=x`#heading{font-size:100%;padding:0;margin:0}a,button{cursor:pointer}.toggle,.toggle:after,.toggle:before{padding:0;margin:0}.toggle{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;border:0}.toggle:after{content:"";position:absolute;bottom:0;left:0}span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`,p=b;import"@patternfly/pfe-icon";var N=o=>o instanceof HTMLElement&&!!o.tagName.match(/P\|^H[1-6]/),h=class extends w{constructor(e,r,n){super("change");this.expanded=e;this.toggle=r;this.accordion=n}},t=class extends c{constructor(){super();this.expanded=!1;this.headingText="";this.headingTag="h3";this.slots=new S(this,"accents",null);this.logger=new k(this);this.addEventListener("click",this._clickHandler)}get ariaExpandedState(){return String(!!this.expanded)}connectedCallback(){super.connectedCallback(),this.hidden=!0,this.id\|\|(this.id=L("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=v(this.headingTag);return y`
		<${e} id="heading">${g`<button id="button" aria-expanded="${this.ariaExpandedState}" class="toggle"><span part="text">${this.headingText\|\|g`<slot></slot>`} </span>${this.slots.hasSlotted("accents")?g`<span part="accents"><slot name="accents"></slot></span>`:""}<pfe-icon icon="${this.icon??"angle-right"}" part="icon" set="${this.iconSet??"fas"}" class="icon" size="1x"></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,...r]=this.slots.getSlotted().filter(N);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(e){let r=!this.expanded,n=e.composedPath().find(l=>l.tagName==="PFE-ACCORDION");this.dispatchEvent(new h(r,this,n))}_expandedChanged(){this.button?.setAttribute("aria-expanded",this.ariaExpandedState)}};t.version="{{version}}",t.styles=[p],t.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},i([a({attribute:"aria-controls",reflect:!0})],t.prototype,"ariaControls",2),i([a({reflect:!0})],t.prototype,"bordered",2),i([a({reflect:!0})],t.prototype,"icon",2),i([a({reflect:!0,attribute:"icon-set"})],t.prototype,"iconSet",2),i([E,a({type:Boolean,reflect:!0})],t.prototype,"expanded",2),i([a({reflect:!0,attribute:"heading-text"})],t.prototype,"headingText",2),i([a({reflect:!0,attribute:"heading-tag"})],t.prototype,"headingTag",2),i([_(),a({reflect:!0})],t.prototype,"on",2),i([C(".toggle")],t.prototype,"button",2),i([T()],t.prototype,"_init",1),i([m],t.prototype,"_getHeaderElement",1),i([m],t.prototype,"_clickHandler",1);export{h as AccordionHeaderChangeEvent,t as BaseAccordionHeader};
		var N=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var h=(e,i,t,n)=>{for(var o=n>1?void 0:n?H(i,t):i,f=e.length-1,u;f>=0;f--)(u=e[f])&&(o=(n?u(i,t,o):u(o))\|\|o);return n&&o&&N(i,t,o),o};var x=(e,i,t)=>{if(!i.has(e))throw TypeError("Cannot "+t)};var s=(e,i,t)=>(x(e,i,"read from private field"),t?t.call(e):i.get(e)),l=(e,i,t)=>{if(i.has(e))throw TypeError("Cannot add the same private member more than once");i instanceof WeakSet?i.add(e):i.set(e,t)},b=(e,i,t,n)=>(x(e,i,"write to private field"),n?n.call(e,t):i.set(e,t),t);var p=(e,i,t)=>(x(e,i,"access private method"),t);import{LitElement as y,html as $}from"lit";import{property as w}from"lit/decorators.js";import{unsafeStatic as k,html as O}from"lit/static-html.js";import{BaseAccordion as P}from"./BaseAccordion.js";import{ComposedEvent as S}from"@patternfly/pfe-core";import{getRandomId as j}from"@patternfly/pfe-core/functions/random.js";import{Logger as z}from"@patternfly/pfe-core/controllers/logger.js";import{css as M}from"lit";var R=M`#heading{font-size:100%;padding:0;margin:0}a,button{cursor:pointer}.toggle,.toggle:after,.toggle:before{padding:0;margin:0}.toggle{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;border:0}.toggle:after{content:"";position:absolute;bottom:0;left:0}span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`,T=R;import"@patternfly/pfe-icon";var D=e=>e instanceof HTMLElement&&!!e.tagName.match(/P\|^H[1-6]/),C=class extends S{constructor(t,n,o){super("change");this.expanded=t;this.toggle=n;this.accordion=o}},r,d,g,v,c,E,m,L,a=class extends y{constructor(){super(...arguments);l(this,g);l(this,c);l(this,m);this.expanded=!1;this.headingText="";this.headingTag="h3";l(this,r,void 0);l(this,d,new z(this))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",p(this,m,L)),this.hidden=!0,this.id\|\|(this.id=j(this.localName)),p(this,g,v).call(this)}render(){let t=k(this.headingTag),n=String(!!this.expanded);return O`
		<${t} id="heading">
		<button id="button"
		class="toggle"
		aria-expanded="${n}">
		<span part="text">${this.headingText\|\|$`<slot></slot>`}
		</span>
		${this.renderAfterButton?.()}
		</button>
		</${t}>
		`}};r=new WeakMap,d=new WeakMap,g=new WeakSet,v=async function(){let t=p(this,c,E).call(this);t!==s(this,r)&&b(this,r,void 0),this.headingTag=t?.tagName.toLowerCase()??"h3",this.headingText=t?.textContent?.trim()??"";do await this.updateComplete;while(!await this.updateComplete);this.hidden=!1},c=new WeakSet,E=function(){if(!this.firstElementChild&&!this.firstChild)return void s(this,d).warn("No header content provided");if(this.firstElementChild){let[t,...n]=Array.from(this.children).filter(o=>!o.hasAttribute("slot")&&D(o));if(t)n.length&&s(this,d).warn("Heading currently only supports 1 tag; extra tags will be ignored.");else return void s(this,d).warn("No heading information was provided.");return t}else return s(this,r)\|\|s(this,d).warn("Header should contain at least 1 heading tag for correct semantics."),b(this,r,document.createElement("h3")),this.firstChild?.nodeType===Node.TEXT_NODE?s(this,r).textContent=this.firstChild.textContent:s(this,r).textContent=this.textContent,s(this,r)},m=new WeakSet,L=function(t){let n=!this.expanded,o=t.composedPath().find(P.isAccordion);o&&this.dispatchEvent(new C(n,this,o))},a.version="{{version}}",a.styles=[T],a.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0},h([w({type:Boolean,reflect:!0})],a.prototype,"expanded",2),h([w({reflect:!0,attribute:"heading-text"})],a.prototype,"headingText",2),h([w({reflect:!0,attribute:"heading-tag"})],a.prototype,"headingTag",2);export{C as AccordionHeaderChangeEvent,a as BaseAccordionHeader};
		//# sourceMappingURL=BaseAccordionHeader.js.map

BaseAccordionPanel.d.ts

		@@ -1,14 +0,7 @@
		import type { ColorTheme } from '@patternfly/pfe-core';
		import { LitElement } from 'lit';
		export declare class BaseAccordionPanel extends LitElement {
		static readonly styles: import("lit").CSSResult[];
		bordered?: 'true' \| 'false';
		expanded: boolean;
		ariaLabelledby?: string;
		/**
		* Sets color theme based on parent context
		*/
		on?: ColorTheme;
		connectedCallback(): void;
		render(): import("lit-html").TemplateResult<1>;
		}

BaseAccordionPanel.js

		@@ -1,2 +0,2 @@
		var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var r=(s,o,a,i)=>{for(var t=i>1?void 0:i?f(o,a):o,n=s.length-1,d;n>=0;n--)(d=s[n])&&(t=(i?d(o,a,t):d(t))\|\|t);return i&&t&&m(o,a,t),t};import{LitElement as h,html as u}from"lit";import{property as l}from"lit/decorators.js";import{colorContextConsumer as c}from"@patternfly/pfe-core/decorators.js";import{getRandomId as v}from"@patternfly/pfe-core/functions/random.js";import{css as b}from"lit";var y=b`:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;transition:height .3s ease-in-out}:host([fixed]){overflow-y:auto}.body{position:relative}.body:after{content:"";position:absolute;top:0;bottom:0;left:0}`,p=y;var e=class extends h{constructor(){super(...arguments);this.expanded=!1}connectedCallback(){super.connectedCallback(),this.id\|\|(this.id=v("panel")),this.setAttribute("role","region")}render(){return u`<div tabindex="-1"><div id="container" class="content" part="container"><div class="body"><slot></slot></div></div></div>`}};e.styles=[p],r([l({reflect:!0})],e.prototype,"bordered",2),r([l({type:Boolean,reflect:!0})],e.prototype,"expanded",2),r([l({attribute:"aria-labelledby",reflect:!0})],e.prototype,"ariaLabelledby",2),r([c(),l({reflect:!0})],e.prototype,"on",2);export{e as BaseAccordionPanel};
		var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(s,e,r,o)=>{for(var t=o>1?void 0:o?m(e,r):e,l=s.length-1,n;l>=0;l--)(n=s[l])&&(t=(o?n(e,r,t):n(t))\|\|t);return o&&t&&p(e,r,t),t};import{LitElement as f,html as y}from"lit";import{property as b}from"lit/decorators.js";import{getRandomId as v}from"@patternfly/pfe-core/functions/random.js";import{css as c}from"lit";var h=c`:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;transition:height .3s ease-in-out}:host([fixed]){overflow-y:auto}.body{position:relative}.body:after{content:"";position:absolute;top:0;bottom:0;left:0}`,d=h;var i=class extends f{constructor(){super(...arguments);this.expanded=!1}connectedCallback(){super.connectedCallback(),this.id\|\|(this.id=v(this.localName)),this.setAttribute("role","region")}render(){return y`<div tabindex="-1"><div id="container" class="content" part="container"><div class="body"><slot></slot></div></div></div>`}};i.styles=[d],a([b({type:Boolean,reflect:!0})],i.prototype,"expanded",2);export{i as BaseAccordionPanel};
		//# sourceMappingURL=BaseAccordionPanel.js.map

209

custom-elements.json

		@@ -149,4 +149,41 @@ {
		"static": true,
		"default": "2.0.0-next.9",
		"default": "2.0.0-next.10",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		},
		"attribute": "bordered",
		"reflects": true
		},
		{
		"kind": "field",
		"name": "icon",
		"type": {
		"text": "string \| undefined"
		},
		"attribute": "icon",
		"reflects": true
		},
		{
		"kind": "field",
		"name": "iconSet",
		"type": {
		"text": "string \| undefined"
		},
		"attribute": "icon-set",
		"reflects": true
		},
		{
		"kind": "field",
		"name": "#slots",
		"privacy": "private",
		"default": "new SlotController(this, 'accents', null)"
		},
		{
		"kind": "method",
		"name": "renderAfterButton"
		}
		@@ -163,2 +200,25 @@ ],
		],
		"attributes": [
		{
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		},
		"fieldName": "bordered"
		},
		{
		"name": "icon",
		"type": {
		"text": "string \| undefined"
		},
		"fieldName": "icon"
		},
		{
		"name": "icon-set",
		"type": {
		"text": "string \| undefined"
		},
		"fieldName": "iconSet"
		}
		],
		"superclass": {
		@@ -280,6 +340,24 @@ "name": "BaseAccordionHeader",
		"static": true,
		"default": "2.0.0-next.9",
		"default": "2.0.0-next.10",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		},
		"attribute": "bordered",
		"reflects": true
		}
		],
		"attributes": [
		{
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		},
		"fieldName": "bordered"
		}
		],
		"superclass": {
		@@ -341,3 +419,3 @@ "name": "BaseAccordionPanel",
		"static": true,
		"default": "2.0.0-next.9",
		"default": "2.0.0-next.10",
		"readonly": true
		@@ -347,6 +425,32 @@ },
		"kind": "field",
		"name": "instances",
		"privacy": "protected",
		"static": true,
		"default": "new Set<PfeAccordion>()"
		},
		{
		"kind": "method",
		"name": "initRouter",
		"static": true,
		"description": "Initializes the mini-SPA which modifies the location with accordion state"
		},
		{
		"kind": "field",
		"name": "single",
		"type": {
		"text": "boolean"
		},
		"default": "false",
		"description": "When true, only one accordion panel may be expanded at a time",
		"attribute": "single",
		"reflects": true
		},
		{
		"kind": "field",
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		"text": "boolean"
		},
		"default": "false",
		"description": "Whether to apply the `bordered` style variant",
		"attribute": "bordered",
		@@ -359,4 +463,6 @@ "reflects": true
		"type": {
		"text": "'true'\|'false' \| undefined"
		"text": "boolean"
		},
		"default": "false",
		"description": "Whether to apply the `large` style variant",
		"attribute": "large",
		@@ -367,2 +473,12 @@ "reflects": true
		"kind": "field",
		"name": "history",
		"type": {
		"text": "boolean"
		},
		"default": "false",
		"description": "Updates `window.history` and the URL to create sharable links.\nWith the `history` attribute, the accordion must have an `id`.\n\nThe URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`.\nIn the example below, selecting \"Accordion 2\" will update the URL as follows:\n`?lorem-ipsum=2`. The index value for the expanded items starts at 1.\n\n```html\n<pfe-accordion history id=\"lorem-ipsum\">\n<pfe-accordion-header>\n <h3>Accordion 1</h3>\n</pfe-accordion-header>\n<pfe-accordion-panel>\n <p>Accordion 1 panel content.</p>\n</pfe-accordion-panel>\n<pfe-accordion-header>\n <h3>Accordion 2</h3>\n</pfe-accordion-header>\n<pfe-accordion-panel>\n <p>Accordion 2 panel content.</p>\n</pfe-accordion-panel>\n</pfe-accordion>\n```\n\nTo expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.",
		"attribute": "history"
		},
		{
		"kind": "field",
		"name": "fixed",
		@@ -375,2 +491,59 @@ "type": {
		"reflects": true
		},
		{
		"kind": "field",
		"name": "#updateHistory",
		"privacy": "private",
		"type": {
		"text": "boolean"
		},
		"default": "true"
		},
		{
		"kind": "field",
		"name": "#logger",
		"privacy": "private",
		"default": "new Logger(this)"
		},
		{
		"kind": "field",
		"name": "#mo",
		"privacy": "private",
		"default": "new MutationObserver(() => this.#updateStateFromURL())"
		},
		{
		"kind": "method",
		"name": "expand",
		"parameters": [
		{
		"name": "index",
		"type": {
		"text": "number"
		}
		},
		{
		"name": "parentAccordion",
		"optional": true,
		"type": {
		"text": "BaseAccordion"
		}
		}
		]
		},
		{
		"kind": "method",
		"name": "#getIndexesFromURL",
		"privacy": "private"
		},
		{
		"kind": "method",
		"name": "#updateURLHistory",
		"description": "This handles updating the URL parameters based on the current state\nof the global this.expanded array",
		"privacy": "private"
		},
		{
		"kind": "method",
		"name": "#updateStateFromURL",
		"description": "This captures the URL parameters and expands each item in the array",
		"privacy": "private"
		}
		@@ -396,6 +569,17 @@ ],
		{
		"name": "single",
		"type": {
		"text": "boolean"
		},
		"default": "false",
		"description": "When true, only one accordion panel may be expanded at a time",
		"fieldName": "single"
		},
		{
		"name": "bordered",
		"type": {
		"text": "'true'\|'false' \| undefined"
		"text": "boolean"
		},
		"default": "false",
		"description": "Whether to apply the `bordered` style variant",
		"fieldName": "bordered"
		@@ -406,7 +590,18 @@ },
		"type": {
		"text": "'true'\|'false' \| undefined"
		"text": "boolean"
		},
		"default": "false",
		"description": "Whether to apply the `large` style variant",
		"fieldName": "large"
		},
		{
		"name": "history",
		"type": {
		"text": "boolean"
		},
		"default": "false",
		"description": "Updates `window.history` and the URL to create sharable links.\nWith the `history` attribute, the accordion must have an `id`.\n\nThe URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`.\nIn the example below, selecting \"Accordion 2\" will update the URL as follows:\n`?lorem-ipsum=2`. The index value for the expanded items starts at 1.\n\n```html\n<pfe-accordion history id=\"lorem-ipsum\">\n <pfe-accordion-header>\n <h3>Accordion 1</h3>\n </pfe-accordion-header>\n <pfe-accordion-panel>\n <p>Accordion 1 panel content.</p>\n </pfe-accordion-panel>\n <pfe-accordion-header>\n <h3>Accordion 2</h3>\n </pfe-accordion-header>\n <pfe-accordion-panel>\n <p>Accordion 2 panel content.</p>\n </pfe-accordion-panel>\n</pfe-accordion>\n```\n\nTo expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.",
		"fieldName": "history"
		},
		{
		"name": "fixed",
		@@ -413,0 +608,0 @@ "type": {

package.json

		{
		"name": "@patternfly/pfe-accordion",
		"version": "2.0.0-next.9",
		"version": "2.0.0-next.10",
		"license": "MIT",
		@@ -5,0 +5,0 @@ "description": "Accordion for PatternFly Elements",

pfe-accordion-header.d.ts

		@@ -0,3 +1,3 @@
		import { BaseAccordionHeader } from './BaseAccordionHeader.js';
		import '@patternfly/pfe-icon';
		import { BaseAccordionHeader } from './BaseAccordionHeader.js';
		/**
		@@ -74,4 +74,9 @@ * Accordion Header
		export declare class PfeAccordionHeader extends BaseAccordionHeader {
		#private;
		static readonly version = "{{version}}";
		static readonly styles: import("lit").CSSResult[];
		bordered?: 'true' \| 'false';
		icon?: string;
		iconSet?: string;
		renderAfterButton(): import("lit-html").TemplateResult<1>;
		}
		@@ -78,0 +83,0 @@ declare global {

pfe-accordion-header.js

		@@ -1,3 +0,2 @@
		var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=(t,r,g,e)=>{for(var o=e>1?void 0:e?f(r,g):r,l=t.length-1,c;l>=0;l--)(c=t[l])&&(o=(e?c(r,g,o):c(o))\|\|o);return e&&o&&d(r,g,o),o};import{customElement as v}from"lit/decorators.js";import"@patternfly/pfe-icon";import{BaseAccordionHeader as p}from"./BaseAccordionHeader.js";import{css as _}from"lit";var s=_`:host{--pfe-icon--size:var(--pf-c-accordion__toggle--IconSize, 10px);color:var(--pf-c-accordion__toggle--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([large]){--pf-c-accordion__toggle--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingLeft:var(--pf-global--spacer--lg, 1.5rem);--pf-c-accordion__toggle--FontFamily:var(
		--pf-global--FontFamily--redhat-updated--heading--sans-serif,
		var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(a,o,r,c)=>{for(var e=c>1?void 0:c?h(o,r):o,n=a.length-1,i;n>=0;n--)(i=a[n])&&(e=(c?i(o,r,e):i(e))\|\|e);return c&&e&&m(o,r,e),e};var b=(a,o,r)=>{if(!o.has(a))throw TypeError("Cannot "+r)};var f=(a,o,r)=>(b(a,o,"read from private field"),r?r.call(a):o.get(a)),d=(a,o,r)=>{if(o.has(a))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(a):o.set(a,r)};import{html as _}from"lit";import{customElement as F,property as p}from"lit/decorators.js";import{BaseAccordionHeader as v}from"./BaseAccordionHeader.js";import{css as u}from"lit";var x=u`:host{--pfe-icon--size:var(--pf-c-accordion__toggle--IconSize, 10px);color:var(--pf-c-accordion__toggle--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([large]){--pf-c-accordion__toggle--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-accordion__toggle--PaddingLeft:var(--pf-global--spacer--lg, 1.5rem);--pf-c-accordion__toggle--FontFamily:var(--pf-global--FontFamily--redhat-updated--heading--sans-serif,
		"RedHatDisplayUpdated",
		@@ -15,3 +14,3 @@ "Overpass",
		)
		)}.toggle:after{top:var(--pf-c-accordion__toggle--before--Top,-1px);width:var(--pf-c-accordion__toggle--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__toggle--after--BackgroundColor,transparent)}span{max-width:var(--pf-c-accordion__toggle-text--MaxWidth,calc(100% - var(--pf-global--spacer--lg,1.5rem)))}.toggle[aria-expanded=true] .icon{rotate:var(--pf-c-accordion__toggle--expanded-icon--Rotate,90deg)}.toggle:active,.toggle:focus,.toggle:hover{background-color:var(--pf-c-accordion__toggle--active--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.toggle:active span,.toggle:focus span,.toggle:hover span{color:var(--pf-c-accordion__toggle--active-text--Color,var(--pf-global--link--Color,#06c))}.toggle:active span,.toggle:focus span{font-weight:var(--pf-c-accordion__toggle--active-text--FontWeight,var(--pf-global--FontWeight--semi-bold,700))}`,i=s;var a=class extends p{};a.version="2.0.0-next.9",a.styles=[...p.styles,i],a=n([v("pfe-accordion-header")],a);export{a as PfeAccordionHeader};
		)}.toggle:after{top:var(--pf-c-accordion__toggle--before--Top,-1px);width:var(--pf-c-accordion__toggle--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__toggle--after--BackgroundColor,transparent)}span{max-width:var(--pf-c-accordion__toggle-text--MaxWidth,calc(100% - var(--pf-global--spacer--lg,1.5rem)))}.toggle[aria-expanded=true] .icon{rotate:var(--pf-c-accordion__toggle--expanded-icon--Rotate,90deg)}.toggle:active,.toggle:focus,.toggle:hover{background-color:var(--pf-c-accordion__toggle--active--BackgroundColor,var(--pf-global--BackgroundColor--200,#f0f0f0))}.toggle:active span,.toggle:focus span,.toggle:hover span{color:var(--pf-c-accordion__toggle--active-text--Color,var(--pf-global--link--Color,#06c))}.toggle:active span,.toggle:focus span{font-weight:var(--pf-c-accordion__toggle--active-text--FontWeight,var(--pf-global--FontWeight--semi-bold,700))}`,s=x;import"@patternfly/pfe-icon";import{SlotController as C}from"@patternfly/pfe-core/controllers/slot-controller.js";var g,t=class extends v{constructor(){super(...arguments);d(this,g,new C(this,"accents",null))}renderAfterButton(){return _`${f(this,g).hasSlotted("accents")?_`<span part="accents"><slot name="accents"></slot></span>`:""}<pfe-icon part="icon" icon="${this.icon??"angle-right"}" set="${this.iconSet??"fas"}" class="icon" size="lg"></pfe-icon>`}};g=new WeakMap,t.version="{{version}}",t.styles=[...v.styles,s],l([p({reflect:!0})],t.prototype,"bordered",2),l([p({reflect:!0})],t.prototype,"icon",2),l([p({reflect:!0,attribute:"icon-set"})],t.prototype,"iconSet",2),t=l([F("pfe-accordion-header")],t);export{t as PfeAccordionHeader};
		//# sourceMappingURL=pfe-accordion-header.js.map

pfe-accordion-panel.d.ts

		@@ -44,2 +44,3 @@ import { BaseAccordionPanel } from './BaseAccordionPanel.js';
		static readonly styles: import("lit").CSSResult[];
		bordered?: 'true' \| 'false';
		}
		@@ -46,0 +47,0 @@ declare global {

pfe-accordion-panel.js

		@@ -1,26 +0,4 @@
		var f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var l=(c,d,n,r)=>{for(var o=r>1?void 0:r?g(d,n):d,e=c.length-1,p;e>=0;e--)(p=c[e])&&(o=(r?p(d,n,o):p(o))\|\|o);return r&&o&&f(d,n,o),o};import{customElement as s}from"lit/decorators.js";import{BaseAccordionPanel as i}from"./BaseAccordionPanel.js";import{css as _}from"lit";var m=_`:host{color:var(--pf-global--Color--100,#151515);background-color:var(--pf-c-accordion--BackgroundColor,var(--pf-global--BackgroundColor--light-100,#fff))}.body{padding:var(--pf-c-accordion__panel-body--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__panel-body--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}.body:after{width:var(--pf-c-accordion__panel-body--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__panel-body--before--BackgroundColor,transparent)}:host([large]){--pf-c-accordion__panel-body--PaddingTop:var(
		--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop,
		0
		);--pf-c-accordion__panel-body--PaddingRight:var(
		--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight,
		1rem
		);--pf-c-accordion__panel-body--PaddingBottom:var(
		--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom,
		1.5rem
		);--pf-c-accordion__panel-body--PaddingLeft:var(
		--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft,
		1.5rem
		);--pf-c-accordion__panel--FontSize:var(
		--pf-c-accordion--m-display-lg__expanded-content--FontSize,
		1rem
		);--pf-c-accordion__panel--Color:var(
		--pf-c-accordion--m-display-lg__expanded-content--Color,
		#151515
		)}:host([large]) .body:last-child{--pf-c-accordion__panel-body--PaddingBottom:var(
		--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom,
		1.5rem
		)}.content{color:var(--pf-c-accordion__panel--Color,var(--pf-global--Color--dark-200,#6a6e73));font-size:var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, .875rem))}:host([fixed]){max-height:var(--pf-c-accordion__panel--m-fixed--MaxHeight,9.375rem)}.content[expanded],:host([expanded]) .content{--pf-c-accordion__panel-body--before--BackgroundColor:var(
		var f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var l=(e,r,c,d)=>{for(var o=d>1?void 0:d?g(r,c):r,n=e.length-1,p;n>=0;n--)(p=e[n])&&(o=(d?p(r,c,o):p(o))\|\|o);return d&&o&&f(r,c,o),o};import{customElement as s,property as b}from"lit/decorators.js";import{BaseAccordionPanel as i}from"./BaseAccordionPanel.js";import{css as _}from"lit";var m=_`:host{color:var(--pf-global--Color--100,#151515);background-color:var(--pf-c-accordion--BackgroundColor,var(--pf-global--BackgroundColor--light-100,#fff))}.body{padding:var(--pf-c-accordion__panel-body--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-accordion__panel-body--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-accordion__panel-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}.body:after{width:var(--pf-c-accordion__panel-body--before--Width,var(--pf-global--BorderWidth--lg,3px));background-color:var(--pf-c-accordion__panel-body--before--BackgroundColor,transparent)}:host([large]){--pf-c-accordion__panel-body--PaddingTop:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0);--pf-c-accordion__panel-body--PaddingRight:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem);--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem);--pf-c-accordion__panel-body--PaddingLeft:var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem);--pf-c-accordion__panel--FontSize:var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem);--pf-c-accordion__panel--Color:var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515)}:host([large]) .body:last-child{--pf-c-accordion__panel-body--PaddingBottom:var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem)}.content{color:var(--pf-c-accordion__panel--Color,var(--pf-global--Color--dark-200,#6a6e73));font-size:var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, .875rem))}:host([fixed]){max-height:var(--pf-c-accordion__panel--m-fixed--MaxHeight,9.375rem)}.content[expanded],:host([expanded]) .content{--pf-c-accordion__panel-body--before--BackgroundColor:var(
		--pf-c-accordion__panel--content-body--before--BackgroundColor,
		var(--pf-global--primary-color--100, #0066cc)
		)}`,t=m;var a=class extends i{};a.version="2.0.0-next.9",a.styles=[...i.styles,t],a=l([s("pfe-accordion-panel")],a);export{a as PfeAccordionPanel};
		var(--pf-global--primary-color--100, #0066cc))}`,t=m;var a=class extends i{};a.version="2.0.0-next.10",a.styles=[...i.styles,t],l([b({reflect:!0})],a.prototype,"bordered",2),a=l([s("pfe-accordion-panel")],a);export{a as PfeAccordionPanel};
		//# sourceMappingURL=pfe-accordion-panel.js.map

pfe-accordion.d.ts

		@@ -22,7 +22,48 @@ import { BaseAccordion } from './BaseAccordion.js';
		export declare class PfeAccordion extends BaseAccordion {
		#private;
		static readonly version = "{{version}}";
		static readonly styles: import("lit").CSSResult[];
		bordered?: 'true' \| 'false';
		large?: 'true' \| 'false';
		protected static instances: Set<PfeAccordion>;
		/**
		* Initializes the mini-SPA which modifies the location with accordion state
		*/
		static initRouter(): void;
		/** When true, only one accordion panel may be expanded at a time */
		single: boolean;
		/** Whether to apply the `bordered` style variant */
		bordered: boolean;
		/** Whether to apply the `large` style variant */
		large: boolean;
		/**
		* Updates `window.history` and the URL to create sharable links.
		* With the `history` attribute, the accordion must have an `id`.
		*
		* The URL pattern will be `?{id-of-tabs}={index-of-expanded-items}`.
		* In the example below, selecting "Accordion 2" will update the URL as follows:
		* `?lorem-ipsum=2`. The index value for the expanded items starts at 1.
		*
		* ```html
		* <pfe-accordion history id="lorem-ipsum">
		* <pfe-accordion-header>
		* <h3>Accordion 1</h3>
		* </pfe-accordion-header>
		* <pfe-accordion-panel>
		* <p>Accordion 1 panel content.</p>
		* </pfe-accordion-panel>
		* <pfe-accordion-header>
		* <h3>Accordion 2</h3>
		* </pfe-accordion-header>
		* <pfe-accordion-panel>
		* <p>Accordion 2 panel content.</p>
		* </pfe-accordion-panel>
		* </pfe-accordion>
		* ```
		*
		* To expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.
		*/
		history: boolean;
		fixed: boolean;
		connectedCallback(): void;
		disconnectedCallback(): void;
		expand(index: number, parentAccordion?: BaseAccordion): Promise<void>;
		}
		@@ -29,0 +70,0 @@ declare global {

pfe-accordion.js

		@@ -1,2 +0,2 @@
		var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(a,r,l,t)=>{for(var e=t>1?void 0:t?h(r,l):r,s=a.length-1,c;s>=0;s--)(c=a[s])&&(e=(t?c(r,l,e):c(e))\|\|e);return t&&e&&b(r,l,e),e};import{cascades as n}from"@patternfly/pfe-core/decorators/cascades.js";import{property as p}from"lit/decorators.js";import{customElement as y}from"lit/decorators.js";import{BaseAccordion as f}from"./BaseAccordion.js";import"./pfe-accordion-header.js";import"./pfe-accordion-panel.js";import{css as m}from"lit";var x=m`:host{--accordion__bordered--Color:var(--rh-color-black-300, #d2d2d2);color:var(--pf-global--Color--100,#151515);background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([bordered]) ::slotted(pfe-accordion-header:first-child),:host([large]) ::slotted(pfe-accordion-header:first-child){display:block;border-top:1px solid var(--accordion__bordered--Color);border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pfe-accordion-header:not(:first-child)),:host([large]) ::slotted(pfe-accordion-header:not(:first-child)){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pfe-accordion-header:is([expanded])),:host([large]) ::slotted(pfe-accordion-header:is([expanded])){display:block;border-bottom:0}:host([bordered]) ::slotted(pfe-accordion-panel:is([expanded])),:host([large]) ::slotted(pfe-accordion-panel:is([expanded])){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}`,i=x;var o=class extends f{constructor(){super(...arguments);this.fixed=!1}};o.version="2.0.0-next.9",o.styles=[...f.styles,i],d([n("pfe-accordion-header","pfe-accordion-panel"),p({reflect:!0})],o.prototype,"bordered",2),d([n("pfe-accordion-header","pfe-accordion-panel"),p({reflect:!0})],o.prototype,"large",2),d([p({type:Boolean,reflect:!0})],o.prototype,"fixed",2),o=d([y("pfe-accordion")],o);export{o as PfeAccordion};
		var R=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(r,t,e,o)=>{for(var s=o>1?void 0:o?E(t,e):t,d=r.length-1,p;d>=0;d--)(p=r[d])&&(s=(o?p(t,e,s):p(s))\|\|s);return o&&s&&R(t,e,s),s};var v=(r,t,e)=>{if(!t.has(r))throw TypeError("Cannot "+e)};var m=(r,t,e)=>(v(r,t,"read from private field"),e?e.call(r):t.get(r)),l=(r,t,e)=>{if(t.has(r))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(r):t.set(r,e)},w=(r,t,e,o)=>(v(r,t,"write to private field"),o?o.call(r,e):t.set(r,e),e);var n=(r,t,e)=>(v(r,t,"access private method"),e);import{Logger as _}from"@patternfly/pfe-core/controllers/logger.js";import{observed as H}from"@patternfly/pfe-core/decorators.js";import{property as f}from"lit/decorators.js";import{customElement as F}from"lit/decorators.js";import{BaseAccordion as L}from"./BaseAccordion.js";import"./BaseAccordionHeader.js";import"./pfe-accordion-header.js";import"./pfe-accordion-panel.js";import{css as S}from"lit";var U=S`:host{--accordion__bordered--Color:var(--rh-color-black-300, #d2d2d2);color:var(--pf-global--Color--100,#151515);background-color:var(--pf-global--BackgroundColor--100,#fff)}:host([bordered]) ::slotted(pfe-accordion-header:first-child),:host([large]) ::slotted(pfe-accordion-header:first-child){display:block;border-top:1px solid var(--accordion__bordered--Color);border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pfe-accordion-header:not(:first-child)),:host([large]) ::slotted(pfe-accordion-header:not(:first-child)){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}:host([bordered]) ::slotted(pfe-accordion-header:is([expanded])),:host([large]) ::slotted(pfe-accordion-header:is([expanded])){display:block;border-bottom:0}:host([bordered]) ::slotted(pfe-accordion-panel:is([expanded])),:host([large]) ::slotted(pfe-accordion-panel:is([expanded])){display:block;border-bottom:1px solid var(--accordion__bordered--Color)}`,C=U;var c,u,g,y,k,x,B,h,b,a=class extends L{constructor(){super(...arguments);l(this,y);l(this,x);l(this,h);this.single=!1;this.bordered=!1;this.large=!1;this.history=!1;this.fixed=!1;l(this,c,!0);l(this,u,new _(this));l(this,g,new MutationObserver(()=>n(this,h,b).call(this)))}static initRouter(){window.addEventListener("popstate",()=>a.instances.forEach(e=>{var o;return n(o=e,h,b).call(o)}))}connectedCallback(){super.connectedCallback(),a.instances.add(this),this.addEventListener("change",n(this,x,B)),m(this,g).observe(this,{childList:!0}),n(this,h,b).call(this)}disconnectedCallback(){super.disconnectedCallback(),a.instances.delete(this)}async expand(e,o){if(e===-1)return;let s=this.headers;this.single&&await Promise.all([...s.map((d,p)=>d.expanded&&this.collapse(p))]),super.expand(e,o)}};c=new WeakMap,u=new WeakMap,g=new WeakMap,y=new WeakSet,k=function(){let e=new URLSearchParams(window.location.search);if(e.has(this.id)){let s=(e.get(this.id)??"").split("-");return s.length<0?[]:s.map(d=>parseInt(d.trim(),10)-1)}},x=new WeakSet,B=function(){if(!this.history\|\|!m(this,c))return;if(!this.id){m(this,u).error("The history feature cannot update the URL without an ID added to the accordion tag.");return}let e=new URL(window.location.href);this.expandedSets.size>0?e.searchParams.set(this.id,Array.from(this.expandedSets).sort((o,s)=>o-s).join("-")):e.searchParams.delete(this.id),history.replaceState({},"",e.toString())},h=new WeakSet,b=function(){let e=n(this,y,k).call(this)??[];w(this,c,!1),e.forEach(o=>this.expand(o)),w(this,c,!0)},a.version="2.0.0-next.10",a.styles=[...L.styles,C],a.instances=new Set,i([f({reflect:!0,type:Boolean})],a.prototype,"single",2),i([f({type:Boolean,reflect:!0})],a.prototype,"bordered",2),i([H(function(){[...this.headers,...this.panels].forEach(t=>t.toggleAttribute("large",this.large))}),f({type:Boolean,reflect:!0})],a.prototype,"large",2),i([f({type:Boolean})],a.prototype,"history",2),i([f({type:Boolean,reflect:!0})],a.prototype,"fixed",2),a=i([F("pfe-accordion")],a);a.initRouter();export{a as PfeAccordion};
		//# sourceMappingURL=pfe-accordion.js.map

BaseAccordion.js.map