@magic-spells/collapsible-content 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Magic Spells (Cory Schulz)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/collapsible-content.cjs.js

@@ -0,0 +1,111 @@
+'use strict';
+
+class CollapsibleComponent extends HTMLElement {
+	#handleClick;
+
+	constructor() {
+		super();
+		this.#handleClick = () => {
+			const button = this.querySelector('button');
+			const content = this.querySelector('collapsible-content');
+			const expanded =
+				button.getAttribute('aria-expanded') !== 'true';
+			button.setAttribute('aria-expanded', expanded);
+			content.hidden = !expanded;
+		};
+	}
+
+	connectedCallback() {
+		const button = this.querySelector('button');
+		const content = this.querySelector('collapsible-content');
+
+		if (!button || !content) {
+			console.error(
+				'CollapsibleComponent requires a <button> and a <collapsible-content>.'
+			);
+			return;
+		}
+
+		button.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;
+		content.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;
+
+		button.setAttribute('aria-controls', content.id);
+		content.setAttribute('role', 'region');
+		content.setAttribute('aria-labelledby', button.id);
+
+		const expanded = button.getAttribute('aria-expanded') === 'true';
+		content.hidden = !expanded;
+
+		button.addEventListener('click', this.#handleClick);
+	}
+
+	disconnectedCallback() {
+		const button = this.querySelector('button');
+		button?.removeEventListener('click', this.#handleClick);
+	}
+}
+
+class CollapsibleContent extends HTMLElement {
+	constructor() {
+		super();
+		this._onTransitionEnd = this._onTransitionEnd.bind(this);
+		// Add event listener to remove height after transition
+		this.addEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	connectedCallback() {
+		if (this.hidden) {
+			this.style.height = '0';
+		} else {
+			this.style.height = `${this.scrollHeight}px`;
+		}
+	}
+
+	disconnectedCallback() {
+		this.removeEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	set hidden(value) {
+		// animate to closed
+		if (value) {
+			// reset height to animate from
+			this.style.height = `${this.scrollHeight}px`;
+
+			// wait one frame and animate to 0
+			requestAnimationFrame(() => {
+				this.style.height = '0px';
+			});
+
+			this.setAttribute('aria-hidden', 'true');
+			this.setAttribute('inert', '');
+			this.setAttribute('hidden', '');
+		} else {
+			// animate to open
+			this.style.height = `${this.scrollHeight}px`;
+			this.removeAttribute('aria-hidden');
+			this.removeAttribute('inert');
+			this.removeAttribute('hidden');
+		}
+	}
+
+	get hidden() {
+		return this.hasAttribute('hidden');
+	}
+
+	_onTransitionEnd(event) {
+		// exit if isn't height property
+		if (event.propertyName != 'height') return;
+
+		// Remove the inline height to allow dynamic content changes
+		if (!this.hidden) {
+			this.style.height = 'auto';
+		}
+	}
+}
+
+customElements.define('collapsible-content', CollapsibleContent);
+customElements.define('collapsible-component', CollapsibleComponent);
+
+exports.CollapsibleComponent = CollapsibleComponent;
+exports.CollapsibleContent = CollapsibleContent;
+//# sourceMappingURL=collapsible-content.cjs.js.map

package/dist/collapsible-content.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-content.cjs.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\n\t\t\t// wait one frame and animate to 0\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.style.height = '0px';\n\t\t\t});\n\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t\tthis.setAttribute('inert', '');\n\t\t\tthis.setAttribute('hidden', '');\n\t\t} else {\n\t\t\t// animate to open\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\tthis.removeAttribute('aria-hidden');\n\t\t\tthis.removeAttribute('inert');\n\t\t\tthis.removeAttribute('hidden');\n\t\t}\n\t}\n\n\tget hidden() {\n\t\treturn this.hasAttribute('hidden');\n\t}\n\n\t_onTransitionEnd(event) {\n\t\t// exit if isn't height property\n\t\tif (event.propertyName != 'height') return;\n\n\t\t// Remove the inline height to allow dynamic content changes\n\t\tif (!this.hidden) {\n\t\t\tthis.style.height = 'auto';\n\t\t}\n\t}\n}\n\ncustomElements.define('collapsible-content', CollapsibleContent);\ncustomElements.define('collapsible-component', CollapsibleComponent);\n\nexport { CollapsibleContent, CollapsibleComponent };\n"],"names":[],"mappings":"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"}

package/dist/collapsible-content.esm.js

@@ -0,0 +1,108 @@
+class CollapsibleComponent extends HTMLElement {
+	#handleClick;
+
+	constructor() {
+		super();
+		this.#handleClick = () => {
+			const button = this.querySelector('button');
+			const content = this.querySelector('collapsible-content');
+			const expanded =
+				button.getAttribute('aria-expanded') !== 'true';
+			button.setAttribute('aria-expanded', expanded);
+			content.hidden = !expanded;
+		};
+	}
+
+	connectedCallback() {
+		const button = this.querySelector('button');
+		const content = this.querySelector('collapsible-content');
+
+		if (!button || !content) {
+			console.error(
+				'CollapsibleComponent requires a <button> and a <collapsible-content>.'
+			);
+			return;
+		}
+
+		button.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;
+		content.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;
+
+		button.setAttribute('aria-controls', content.id);
+		content.setAttribute('role', 'region');
+		content.setAttribute('aria-labelledby', button.id);
+
+		const expanded = button.getAttribute('aria-expanded') === 'true';
+		content.hidden = !expanded;
+
+		button.addEventListener('click', this.#handleClick);
+	}
+
+	disconnectedCallback() {
+		const button = this.querySelector('button');
+		button?.removeEventListener('click', this.#handleClick);
+	}
+}
+
+class CollapsibleContent extends HTMLElement {
+	constructor() {
+		super();
+		this._onTransitionEnd = this._onTransitionEnd.bind(this);
+		// Add event listener to remove height after transition
+		this.addEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	connectedCallback() {
+		if (this.hidden) {
+			this.style.height = '0';
+		} else {
+			this.style.height = `${this.scrollHeight}px`;
+		}
+	}
+
+	disconnectedCallback() {
+		this.removeEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	set hidden(value) {
+		// animate to closed
+		if (value) {
+			// reset height to animate from
+			this.style.height = `${this.scrollHeight}px`;
+
+			// wait one frame and animate to 0
+			requestAnimationFrame(() => {
+				this.style.height = '0px';
+			});
+
+			this.setAttribute('aria-hidden', 'true');
+			this.setAttribute('inert', '');
+			this.setAttribute('hidden', '');
+		} else {
+			// animate to open
+			this.style.height = `${this.scrollHeight}px`;
+			this.removeAttribute('aria-hidden');
+			this.removeAttribute('inert');
+			this.removeAttribute('hidden');
+		}
+	}
+
+	get hidden() {
+		return this.hasAttribute('hidden');
+	}
+
+	_onTransitionEnd(event) {
+		// exit if isn't height property
+		if (event.propertyName != 'height') return;
+
+		// Remove the inline height to allow dynamic content changes
+		if (!this.hidden) {
+			this.style.height = 'auto';
+		}
+	}
+}
+
+customElements.define('collapsible-content', CollapsibleContent);
+customElements.define('collapsible-component', CollapsibleComponent);
+
+export { CollapsibleComponent, CollapsibleContent };
+//# sourceMappingURL=collapsible-content.esm.js.map

package/dist/collapsible-content.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-content.esm.js","sources":["../src/collapsible-content.js"],"sourcesContent":["import './styles.css';\n\nclass CollapsibleComponent extends HTMLElement {\n\t#handleClick;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.#handleClick = () => {\n\t\t\tconst button = this.querySelector('button');\n\t\t\tconst content = this.querySelector('collapsible-content');\n\t\t\tconst expanded =\n\t\t\t\tbutton.getAttribute('aria-expanded') !== 'true';\n\t\t\tbutton.setAttribute('aria-expanded', expanded);\n\t\t\tcontent.hidden = !expanded;\n\t\t};\n\t}\n\n\tconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tconst content = this.querySelector('collapsible-content');\n\n\t\tif (!button || !content) {\n\t\t\tconsole.error(\n\t\t\t\t'CollapsibleComponent requires a <button> and a <collapsible-content>.'\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;\n\t\tcontent.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;\n\n\t\tbutton.setAttribute('aria-controls', content.id);\n\t\tcontent.setAttribute('role', 'region');\n\t\tcontent.setAttribute('aria-labelledby', button.id);\n\n\t\tconst expanded = button.getAttribute('aria-expanded') === 'true';\n\t\tcontent.hidden = !expanded;\n\n\t\tbutton.addEventListener('click', this.#handleClick);\n\t}\n\n\tdisconnectedCallback() {\n\t\tconst button = this.querySelector('button');\n\t\tbutton?.removeEventListener('click', this.#handleClick);\n\t}\n}\n\nclass CollapsibleContent extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onTransitionEnd = this._onTransitionEnd.bind(this);\n\t\t// Add event listener to remove height after transition\n\t\tthis.addEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tconnectedCallback() {\n\t\tif (this.hidden) {\n\t\t\tthis.style.height = '0';\n\t\t} else {\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.removeEventListener('transitionend', this._onTransitionEnd);\n\t}\n\n\tset hidden(value) {\n\t\t// animate to closed\n\t\tif (value) {\n\t\t\t// reset height to animate from\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\n\t\t\t// wait one frame and animate to 0\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis.style.height = '0px';\n\t\t\t});\n\n\t\t\tthis.setAttribute('aria-hidden', 'true');\n\t\t\tthis.setAttribute('inert', '');\n\t\t\tthis.setAttribute('hidden', '');\n\t\t} else {\n\t\t\t// animate to open\n\t\t\tthis.style.height = `${this.scrollHeight}px`;\n\t\t\tthis.removeAttribute('aria-hidden');\n\t\t\tthis.removeAttribute('inert');\n\t\t\tthis.removeAttribute('hidden');\n\t\t}\n\t}\n\n\tget hidden() {\n\t\treturn this.hasAttribute('hidden');\n\t}\n\n\t_onTransitionEnd(event) {\n\t\t// exit if isn't height property\n\t\tif (event.propertyName != 'height') return;\n\n\t\t// Remove the inline height to allow dynamic content changes\n\t\tif (!this.hidden) {\n\t\t\tthis.style.height = 'auto';\n\t\t}\n\t}\n}\n\ncustomElements.define('collapsible-content', CollapsibleContent);\ncustomElements.define('collapsible-component', CollapsibleComponent);\n\nexport { CollapsibleContent, CollapsibleComponent };\n"],"names":[],"mappings":"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"}

package/dist/collapsible-content.min.css

@@ -0,0 +1 @@
+collapsible-component{display:block}collapsible-component button{background:none;border:none;cursor:pointer;text-align:left;width:100%}collapsible-content{display:block;overflow:hidden;padding:0;transition:height .35s ease-out}

package/dist/collapsible-content.min.js

@@ -0,0 +1 @@
+var CollapsibleContent=function(t){"use strict";class CollapsibleComponent extends HTMLElement{#t;constructor(){super(),this.#t=()=>{const t=this.querySelector("button"),e=this.querySelector("collapsible-content"),i="true"!==t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",i),e.hidden=!i}}connectedCallback(){const t=this.querySelector("button"),e=this.querySelector("collapsible-content");if(!t||!e)return void console.error("CollapsibleComponent requires a <button> and a <collapsible-content>.");t.id||=`collapsible-button-${Math.random().toString(36).slice(2,9)}`,e.id||=`collapsible-content-${Math.random().toString(36).slice(2,9)}`,t.setAttribute("aria-controls",e.id),e.setAttribute("role","region"),e.setAttribute("aria-labelledby",t.id);const i="true"===t.getAttribute("aria-expanded");e.hidden=!i,t.addEventListener("click",this.#t)}disconnectedCallback(){const t=this.querySelector("button");t?.removeEventListener("click",this.#t)}}class CollapsibleContent extends HTMLElement{constructor(){super(),this._onTransitionEnd=this._onTransitionEnd.bind(this),this.addEventListener("transitionend",this._onTransitionEnd)}connectedCallback(){this.hidden?this.style.height="0":this.style.height=`${this.scrollHeight}px`}disconnectedCallback(){this.removeEventListener("transitionend",this._onTransitionEnd)}set hidden(t){t?(this.style.height=`${this.scrollHeight}px`,requestAnimationFrame((()=>{this.style.height="0px"})),this.setAttribute("aria-hidden","true"),this.setAttribute("inert",""),this.setAttribute("hidden","")):(this.style.height=`${this.scrollHeight}px`,this.removeAttribute("aria-hidden"),this.removeAttribute("inert"),this.removeAttribute("hidden"))}get hidden(){return this.hasAttribute("hidden")}_onTransitionEnd(t){"height"==t.propertyName&&(this.hidden||(this.style.height="auto"))}}return customElements.define("collapsible-content",CollapsibleContent),customElements.define("collapsible-component",CollapsibleComponent),t.CollapsibleComponent=CollapsibleComponent,t.CollapsibleContent=CollapsibleContent,t}({});

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@magic-spells/collapsible-content",
+	"version": "0.1.0",
+	"description": "Collapsible content web component",
+	"author": "Cory Schulz",
+	"license": "MIT",
+	"type": "module",
+	"main": "dist/collapsible-content.cjs.js",
+	"module": "dist/collapsible-content.esm.js",
+	"unpkg": "dist/collapsible-content.min.js",
+	"style": "dist/collapsible-content.min.css",
+	"exports": {
+		".": {
+			"import": "./dist/collapsible-content.esm.js",
+			"require": "./dist/collapsible-content.cjs.js",
+			"default": "./dist/collapsible-content.esm.js"
+		},
+		"./style.css": "./dist/collapsible-content.min.css"
+	},
+	"sideEffects": true,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/magic-spells/collapsible-content"
+	},
+	"homepage": "https://github.com/magic-spells/collapsible-content#readme",
+	"bugs": {
+		"url": "https://github.com/magic-spells/collapsible-content/issues"
+	},
+	"keywords": [
+		"collapsible-content",
+		"web-components",
+		"accessibility",
+		"a11y",
+		"keyboard-navigation",
+		"custom-elements"
+	],
+	"files": [
+		"dist/",
+		"src/"
+	],
+	"scripts": {
+		"build": "rollup -c",
+		"lint": "eslint src/ rollup.config.mjs",
+		"format": "prettier --write .",
+		"prepublishOnly": "npm run build",
+		"serve": "rollup -c --watch",
+		"dev": "rollup -c --watch"
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org/"
+	},
+	"browserslist": [
+		"last 2 versions",
+		"not dead",
+		"not ie <= 11"
+	],
+	"devDependencies": {
+		"@eslint/js": "^8.57.0",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-terser": "^0.4.4",
+		"eslint": "^8.0.0",
+		"globals": "^13.24.0",
+		"prettier": "^3.3.3",
+		"rollup": "^3.0.0",
+		"rollup-plugin-copy": "^3.5.0",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-serve": "^1.1.1",
+		"postcss-lightningcss": "^1.0.1"
+	}
+}

package/src/collapsible-content.js

@@ -0,0 +1,109 @@
+import './styles.css';
+
+class CollapsibleComponent extends HTMLElement {
+	#handleClick;
+
+	constructor() {
+		super();
+		this.#handleClick = () => {
+			const button = this.querySelector('button');
+			const content = this.querySelector('collapsible-content');
+			const expanded =
+				button.getAttribute('aria-expanded') !== 'true';
+			button.setAttribute('aria-expanded', expanded);
+			content.hidden = !expanded;
+		};
+	}
+
+	connectedCallback() {
+		const button = this.querySelector('button');
+		const content = this.querySelector('collapsible-content');
+
+		if (!button || !content) {
+			console.error(
+				'CollapsibleComponent requires a <button> and a <collapsible-content>.'
+			);
+			return;
+		}
+
+		button.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;
+		content.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;
+
+		button.setAttribute('aria-controls', content.id);
+		content.setAttribute('role', 'region');
+		content.setAttribute('aria-labelledby', button.id);
+
+		const expanded = button.getAttribute('aria-expanded') === 'true';
+		content.hidden = !expanded;
+
+		button.addEventListener('click', this.#handleClick);
+	}
+
+	disconnectedCallback() {
+		const button = this.querySelector('button');
+		button?.removeEventListener('click', this.#handleClick);
+	}
+}
+
+class CollapsibleContent extends HTMLElement {
+	constructor() {
+		super();
+		this._onTransitionEnd = this._onTransitionEnd.bind(this);
+		// Add event listener to remove height after transition
+		this.addEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	connectedCallback() {
+		if (this.hidden) {
+			this.style.height = '0';
+		} else {
+			this.style.height = `${this.scrollHeight}px`;
+		}
+	}
+
+	disconnectedCallback() {
+		this.removeEventListener('transitionend', this._onTransitionEnd);
+	}
+
+	set hidden(value) {
+		// animate to closed
+		if (value) {
+			// reset height to animate from
+			this.style.height = `${this.scrollHeight}px`;
+
+			// wait one frame and animate to 0
+			requestAnimationFrame(() => {
+				this.style.height = '0px';
+			});
+
+			this.setAttribute('aria-hidden', 'true');
+			this.setAttribute('inert', '');
+			this.setAttribute('hidden', '');
+		} else {
+			// animate to open
+			this.style.height = `${this.scrollHeight}px`;
+			this.removeAttribute('aria-hidden');
+			this.removeAttribute('inert');
+			this.removeAttribute('hidden');
+		}
+	}
+
+	get hidden() {
+		return this.hasAttribute('hidden');
+	}
+
+	_onTransitionEnd(event) {
+		// exit if isn't height property
+		if (event.propertyName != 'height') return;
+
+		// Remove the inline height to allow dynamic content changes
+		if (!this.hidden) {
+			this.style.height = 'auto';
+		}
+	}
+}
+
+customElements.define('collapsible-content', CollapsibleContent);
+customElements.define('collapsible-component', CollapsibleComponent);
+
+export { CollapsibleContent, CollapsibleComponent };

package/src/styles.css

@@ -0,0 +1,18 @@
+collapsible-component {
+	display: block;
+}
+
+collapsible-component button {
+	width: 100%;
+	text-align: left;
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+collapsible-content {
+	padding: 0px;
+	display: block;
+	overflow: hidden;
+	transition: height 0.35s ease-out;
+}