@magic-spells/tab-group 0.1.0 → 1.0.0

package/dist/tab-group.js

@@ -9,23 +9,13 @@
 	 * A fully accessible tab group web component
 	 */
 
+	let instanceCount = 0;
+
 	/**
 	 * @class TabGroup
 	 * the parent container that coordinates tabs and panels
 	 */
 	class TabGroup extends HTMLElement {
-		// static counter to ensure global unique ids for tabs and panels
-		static tabCount = 0;
-		static panelCount = 0;
-
-		constructor() {
-			super();
-			// ensure that the number of <tab-button> and <tab-panel> elements match
-			// note: in some scenarios the child elements might not be available in the constructor,
-			// so adjust as necessary or consider running this check in connectedCallback()
-			this.ensureConsistentTabsAndPanels();
-		}
-
 		/**
 		 * @function ensureConsistentTabsAndPanels
 		 * makes sure there is an equal number of <tab-button> and <tab-panel> elements.
@@ -33,24 +23,24 @@
 		 * if there are more tabs than panels, inject extra panels.
 		 */
 		ensureConsistentTabsAndPanels() {
-			// get current tabs and panels within the tab group
-			let tabs = this.querySelectorAll("tab-button");
-			let panels = this.querySelectorAll("tab-panel");
+			// get current tabs and panels scoped to direct children only
+			let tabs = this.querySelectorAll(':scope > tab-list > tab-button');
+			let panels = this.querySelectorAll(':scope > tab-panel');
 
 			// if there are more panels than tabs
 			if (panels.length > tabs.length) {
 				const difference = panels.length - tabs.length;
 				// try to find a <tab-list> to insert new tabs
-				let tabList = this.querySelector("tab-list");
+				let tabList = this.querySelector(':scope > tab-list');
 				if (!tabList) {
 					// if not present, create one and insert it at the beginning
-					tabList = document.createElement("tab-list");
+					tabList = document.createElement('tab-list');
 					this.insertBefore(tabList, this.firstChild);
 				}
 				// inject extra <tab-button> elements into the tab list
 				for (let i = 0; i < difference; i++) {
-					const newTab = document.createElement("tab-button");
-					newTab.textContent = "default tab";
+					const newTab = document.createElement('tab-button');
+					newTab.textContent = 'default tab';
 					tabList.appendChild(newTab);
 				}
 			}
@@ -59,8 +49,8 @@
 				const difference = tabs.length - panels.length;
 				// inject extra <tab-panel> elements at the end of the tab group
 				for (let i = 0; i < difference; i++) {
-					const newPanel = document.createElement("tab-panel");
-					newPanel.innerHTML = "<p>default panel content</p>";
+					const newPanel = document.createElement('tab-panel');
+					newPanel.innerHTML = '<p>default panel content</p>';
 					this.appendChild(newPanel);
 				}
 			}
@@ -70,58 +60,77 @@
 		 * called when the element is connected to the dom
 		 */
 		connectedCallback() {
-			const _ = this;
+			// assign a stable instance id on first connect
+			if (!this._instanceId) {
+				this._instanceId = `tg-${instanceCount++}`;
+			}
+
+			// ensure that the number of <tab-button> and <tab-panel> elements match
+			this.ensureConsistentTabsAndPanels();
 
 			// find the <tab-list> element (should be exactly one)
-			_.tabList = _.querySelector("tab-list");
-			if (!_.tabList) return;
+			this.tabList = this.querySelector(':scope > tab-list');
+			if (!this.tabList) return;
 
 			// find all <tab-button> elements inside the <tab-list>
-			_.tabButtons = Array.from(_.tabList.querySelectorAll("tab-button"));
+			this.tabButtons = Array.from(
+				this.tabList.querySelectorAll('tab-button')
+			);
 
 			// find all <tab-panel> elements inside the <tab-group>
-			_.tabPanels = Array.from(_.querySelectorAll("tab-panel"));
+			this.tabPanels = Array.from(this.querySelectorAll(':scope > tab-panel'));
 
-			// initialize each tab-button with roles, ids and aria attributes
-			_.tabButtons.forEach((tab, index) => {
-				const tabIndex = TabGroup.tabCount++;
+			const prefix = this._instanceId;
 
-				// generate a unique id for each tab, e.g. "tab-0", "tab-1", ...
-				const tabId = `tab-${tabIndex}`;
+			// initialize each tab-button with roles, ids and aria attributes
+			this.tabButtons.forEach((tab, index) => {
+				const tabId = `${prefix}-tab-${index}`;
+				const panelId = `${prefix}-panel-${index}`;
 				tab.id = tabId;
-
-				// generate a corresponding panel id, e.g. "panel-0"
-				const panelId = `panel-${tabIndex}`;
-				tab.setAttribute("role", "tab");
-				tab.setAttribute("aria-controls", panelId);
+				tab.setAttribute('role', 'tab');
+				tab.setAttribute('aria-controls', panelId);
 
 				// first tab is active by default
 				if (index === 0) {
-					tab.setAttribute("aria-selected", "true");
-					tab.setAttribute("tabindex", "0");
+					tab.setAttribute('aria-selected', 'true');
+					tab.setAttribute('tabindex', '0');
 				} else {
-					tab.setAttribute("aria-selected", "false");
-					tab.setAttribute("tabindex", "-1");
+					tab.setAttribute('aria-selected', 'false');
+					tab.setAttribute('tabindex', '-1');
 				}
 			});
 
 			// initialize each tab-panel with roles, ids and aria attributes
-			_.tabPanels.forEach((panel, index) => {
-				const panelIndex = TabGroup.panelCount++;
-				const panelId = `panel-${panelIndex}`;
+			this.tabPanels.forEach((panel, index) => {
+				const panelId = `${prefix}-panel-${index}`;
 				panel.id = panelId;
-
-				panel.setAttribute("role", "tabpanel");
-				panel.setAttribute("aria-labelledby", `tab-${panelIndex}`);
+				panel.setAttribute('role', 'tabpanel');
+				panel.setAttribute('aria-labelledby', `${prefix}-tab-${index}`);
 
 				// hide panels except for the first one
 				panel.hidden = index !== 0;
 			});
 
 			// set up keyboard navigation and click delegation on the <tab-list>
-			_.tabList.setAttribute("role", "tablist");
-			_.tabList.addEventListener("keydown", (e) => _.onKeyDown(e));
-			_.tabList.addEventListener("click", (e) => _.onClick(e));
+			this.tabList.setAttribute('role', 'tablist');
+
+			// store bound handlers so we can remove them in disconnectedCallback
+			if (!this._onKeyDown) {
+				this._onKeyDown = (e) => this.onKeyDown(e);
+				this._onClick = (e) => this.onClick(e);
+			}
+			this.tabList.addEventListener('keydown', this._onKeyDown);
+			this.tabList.addEventListener('click', this._onClick);
+		}
+
+		/**
+		 * called when the element is disconnected from the dom
+		 */
+		disconnectedCallback() {
+			if (this.tabList && this._onKeyDown) {
+				this.tabList.removeEventListener('keydown', this._onKeyDown);
+				this.tabList.removeEventListener('click', this._onClick);
+			}
 		}
 
 		/**
@@ -130,21 +139,23 @@
 		 * @param {number} index - index of the tab to activate
 		 */
 		setActiveTab(index) {
-			const _ = this;
-			const previousIndex = _.tabButtons.findIndex(tab => tab.getAttribute("aria-selected") === "true");
+			if (index < 0 || index >= this.tabButtons.length) return;
+			const previousIndex = this.tabButtons.findIndex(
+				(tab) => tab.getAttribute('aria-selected') === 'true'
+			);
 
 			// update each tab-button
-			_.tabButtons.forEach((tab, i) => {
+			this.tabButtons.forEach((tab, i) => {
 				const isActive = i === index;
-				tab.setAttribute("aria-selected", isActive ? "true" : "false");
-				tab.setAttribute("tabindex", isActive ? "0" : "-1");
+				tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+				tab.setAttribute('tabindex', isActive ? '0' : '-1');
 				if (isActive) {
 					tab.focus();
 				}
 			});
 
 			// update each tab-panel
-			_.tabPanels.forEach((panel, i) => {
+			this.tabPanels.forEach((panel, i) => {
 				panel.hidden = i !== index;
 			});
 
@@ -153,12 +164,14 @@
 				const detail = {
 					previousIndex,
 					currentIndex: index,
-					previousTab: _.tabButtons[previousIndex],
-					currentTab: _.tabButtons[index],
-					previousPanel: _.tabPanels[previousIndex],
-					currentPanel: _.tabPanels[index]
+					previousTab: this.tabButtons[previousIndex],
+					currentTab: this.tabButtons[index],
+					previousPanel: this.tabPanels[previousIndex],
+					currentPanel: this.tabPanels[index],
 				};
-				_.dispatchEvent(new CustomEvent('tabchange', { detail, bubbles: true }));
+				this.dispatchEvent(
+					new CustomEvent('tabchange', { detail, bubbles: true })
+				);
 			}
 		}
 
@@ -168,17 +181,16 @@
 		 * @param {MouseEvent} e - the click event
 		 */
 		onClick(e) {
-			const _ = this;
 			// check if the click occurred on or within a <tab-button>
-			const tabButton = e.target.closest("tab-button");
+			const tabButton = e.target.closest('tab-button');
 			if (!tabButton) return;
 
 			// determine the index of the clicked tab-button
-			const index = _.tabButtons.indexOf(tabButton);
+			const index = this.tabButtons.indexOf(tabButton);
 			if (index === -1) return;
 
 			// activate the tab with the corresponding index
-			_.setActiveTab(index);
+			this.setActiveTab(index);
 		}
 
 		/**
@@ -187,39 +199,39 @@
 		 * @param {KeyboardEvent} e - the keydown event
 		 */
 		onKeyDown(e) {
-			const _ = this;
 			// only process keys if focus is on a <tab-button>
-			const targetIndex = _.tabButtons.indexOf(e.target);
+			const targetIndex = this.tabButtons.indexOf(e.target);
 			if (targetIndex === -1) return;
 
 			let newIndex = targetIndex;
 			switch (e.key) {
-				case "ArrowLeft":
-				case "ArrowUp":
+				case 'ArrowLeft':
+				case 'ArrowUp':
 					// move to the previous tab (wrap around if necessary)
-					newIndex = targetIndex > 0 ? targetIndex - 1 : _.tabButtons.length - 1;
+					newIndex =
+						targetIndex > 0 ? targetIndex - 1 : this.tabButtons.length - 1;
 					e.preventDefault();
 					break;
-				case "ArrowRight":
-				case "ArrowDown":
+				case 'ArrowRight':
+				case 'ArrowDown':
 					// move to the next tab (wrap around if necessary)
-					newIndex = (targetIndex + 1) % _.tabButtons.length;
+					newIndex = (targetIndex + 1) % this.tabButtons.length;
 					e.preventDefault();
 					break;
-				case "Home":
+				case 'Home':
 					// jump to the first tab
 					newIndex = 0;
 					e.preventDefault();
 					break;
-				case "End":
+				case 'End':
 					// jump to the last tab
-					newIndex = _.tabButtons.length - 1;
+					newIndex = this.tabButtons.length - 1;
 					e.preventDefault();
 					break;
 				default:
 					return; // ignore other keys
 			}
-			_.setActiveTab(newIndex);
+			this.setActiveTab(newIndex);
 		}
 	}
 
@@ -227,51 +239,32 @@
 	 * @class TabList
 	 * a container for the <tab-button> elements
 	 */
-	class TabList extends HTMLElement {
-		constructor() {
-			super();
-		}
-
-		connectedCallback() {
-			// additional logic or styling can be added here if desired
-		}
-	}
+	class TabList extends HTMLElement {}
 
 	/**
 	 * @class TabButton
 	 * a single tab button element
 	 */
-	class TabButton extends HTMLElement {
-		constructor() {
-			super();
-		}
-
-		connectedCallback() {
-			// note: role and other attributes are handled by the parent
-		}
-	}
+	class TabButton extends HTMLElement {}
 
 	/**
 	 * @class TabPanel
 	 * a single tab panel element
 	 */
-	class TabPanel extends HTMLElement {
-		constructor() {
-			super();
-		}
-
-		connectedCallback() {
-			// note: role and other attributes are handled by the parent
-		}
+	class TabPanel extends HTMLElement {}
+
+	// define the custom elements (guarded against double-registration and SSR)
+	if (typeof window !== 'undefined' && window.customElements) {
+		if (!customElements.get('tab-group'))
+			customElements.define('tab-group', TabGroup);
+		if (!customElements.get('tab-list'))
+			customElements.define('tab-list', TabList);
+		if (!customElements.get('tab-button'))
+			customElements.define('tab-button', TabButton);
+		if (!customElements.get('tab-panel'))
+			customElements.define('tab-panel', TabPanel);
 	}
 
-	// define the custom elements
-	customElements.define("tab-group", TabGroup);
-	customElements.define("tab-list", TabList);
-	customElements.define("tab-button", TabButton);
-	customElements.define("tab-panel", TabPanel);
-
-	exports.TabGroup = TabGroup;
 	exports.default = TabGroup;
 
 	Object.defineProperty(exports, '__esModule', { value: true });

package/dist/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":["../src/tab-group.js"],"sourcesContent":["import './index.scss';\n\n/**\n * @module TabGroup\n * A fully accessible tab group web component\n */\n\n/**\n * @class TabGroup\n * the parent container that coordinates tabs and panels\n */\nexport default class TabGroup extends HTMLElement {\n\t// static counter to ensure global unique ids for tabs and panels\n\tstatic tabCount = 0;\n\tstatic panelCount = 0;\n\n\tconstructor() {\n\t\tsuper();\n\t\t// ensure that the number of <tab-button> and <tab-panel> elements match\n\t\t// note: in some scenarios the child elements might not be available in the constructor,\n\t\t// so adjust as necessary or consider running this check in connectedCallback()\n\t\tthis.ensureConsistentTabsAndPanels();\n\t}\n\n\t/**\n\t * @function ensureConsistentTabsAndPanels\n\t * makes sure there is an equal number of <tab-button> and <tab-panel> elements.\n\t * if there are more panels than tabs, inject extra tab buttons.\n\t * if there are more tabs than panels, inject extra panels.\n\t */\n\tensureConsistentTabsAndPanels() {\n\t\t// get current tabs and panels within the tab group\n\t\tlet tabs = this.querySelectorAll(\"tab-button\");\n\t\tlet panels = this.querySelectorAll(\"tab-panel\");\n\n\t\t// if there are more panels than tabs\n\t\tif (panels.length > tabs.length) {\n\t\t\tconst difference = panels.length - tabs.length;\n\t\t\t// try to find a <tab-list> to insert new tabs\n\t\t\tlet tabList = this.querySelector(\"tab-list\");\n\t\t\tif (!tabList) {\n\t\t\t\t// if not present, create one and insert it at the beginning\n\t\t\t\ttabList = document.createElement(\"tab-list\");\n\t\t\t\tthis.insertBefore(tabList, this.firstChild);\n\t\t\t}\n\t\t\t// inject extra <tab-button> elements into the tab list\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\tconst newTab = document.createElement(\"tab-button\");\n\t\t\t\tnewTab.textContent = \"default tab\";\n\t\t\t\ttabList.appendChild(newTab);\n\t\t\t}\n\t\t}\n\t\t// if there are more tabs than panels\n\t\telse if (tabs.length > panels.length) {\n\t\t\tconst difference = tabs.length - panels.length;\n\t\t\t// inject extra <tab-panel> elements at the end of the tab group\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\tconst newPanel = document.createElement(\"tab-panel\");\n\t\t\t\tnewPanel.innerHTML = \"<p>default panel content</p>\";\n\t\t\t\tthis.appendChild(newPanel);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * called when the element is connected to the dom\n\t */\n\tconnectedCallback() {\n\t\tconst _ = this;\n\n\t\t// find the <tab-list> element (should be exactly one)\n\t\t_.tabList = _.querySelector(\"tab-list\");\n\t\tif (!_.tabList) return;\n\n\t\t// find all <tab-button> elements inside the <tab-list>\n\t\t_.tabButtons = Array.from(_.tabList.querySelectorAll(\"tab-button\"));\n\n\t\t// find all <tab-panel> elements inside the <tab-group>\n\t\t_.tabPanels = Array.from(_.querySelectorAll(\"tab-panel\"));\n\n\t\t// initialize each tab-button with roles, ids and aria attributes\n\t\t_.tabButtons.forEach((tab, index) => {\n\t\t\tconst tabIndex = TabGroup.tabCount++;\n\n\t\t\t// generate a unique id for each tab, e.g. \"tab-0\", \"tab-1\", ...\n\t\t\tconst tabId = `tab-${tabIndex}`;\n\t\t\ttab.id = tabId;\n\n\t\t\t// generate a corresponding panel id, e.g. \"panel-0\"\n\t\t\tconst panelId = `panel-${tabIndex}`;\n\t\t\ttab.setAttribute(\"role\", \"tab\");\n\t\t\ttab.setAttribute(\"aria-controls\", panelId);\n\n\t\t\t// first tab is active by default\n\t\t\tif (index === 0) {\n\t\t\t\ttab.setAttribute(\"aria-selected\", \"true\");\n\t\t\t\ttab.setAttribute(\"tabindex\", \"0\");\n\t\t\t} else {\n\t\t\t\ttab.setAttribute(\"aria-selected\", \"false\");\n\t\t\t\ttab.setAttribute(\"tabindex\", \"-1\");\n\t\t\t}\n\t\t});\n\n\t\t// initialize each tab-panel with roles, ids and aria attributes\n\t\t_.tabPanels.forEach((panel, index) => {\n\t\t\tconst panelIndex = TabGroup.panelCount++;\n\t\t\tconst panelId = `panel-${panelIndex}`;\n\t\t\tpanel.id = panelId;\n\n\t\t\tpanel.setAttribute(\"role\", \"tabpanel\");\n\t\t\tpanel.setAttribute(\"aria-labelledby\", `tab-${panelIndex}`);\n\n\t\t\t// hide panels except for the first one\n\t\t\tpanel.hidden = index !== 0;\n\t\t});\n\n\t\t// set up keyboard navigation and click delegation on the <tab-list>\n\t\t_.tabList.setAttribute(\"role\", \"tablist\");\n\t\t_.tabList.addEventListener(\"keydown\", (e) => _.onKeyDown(e));\n\t\t_.tabList.addEventListener(\"click\", (e) => _.onClick(e));\n\t}\n\n\t/**\n\t * @function setActiveTab\n\t * activates a tab and updates aria attributes\n\t * @param {number} index - index of the tab to activate\n\t */\n\tsetActiveTab(index) {\n\t\tconst _ = this;\n\t\tconst previousIndex = _.tabButtons.findIndex(tab => tab.getAttribute(\"aria-selected\") === \"true\");\n\n\t\t// update each tab-button\n\t\t_.tabButtons.forEach((tab, i) => {\n\t\t\tconst isActive = i === index;\n\t\t\ttab.setAttribute(\"aria-selected\", isActive ? \"true\" : \"false\");\n\t\t\ttab.setAttribute(\"tabindex\", isActive ? \"0\" : \"-1\");\n\t\t\tif (isActive) {\n\t\t\t\ttab.focus();\n\t\t\t}\n\t\t});\n\n\t\t// update each tab-panel\n\t\t_.tabPanels.forEach((panel, i) => {\n\t\t\tpanel.hidden = i !== index;\n\t\t});\n\n\t\t// dispatch event only if the tab actually changed\n\t\tif (previousIndex !== index) {\n\t\t\tconst detail = {\n\t\t\t\tpreviousIndex,\n\t\t\t\tcurrentIndex: index,\n\t\t\t\tpreviousTab: _.tabButtons[previousIndex],\n\t\t\t\tcurrentTab: _.tabButtons[index],\n\t\t\t\tpreviousPanel: _.tabPanels[previousIndex],\n\t\t\t\tcurrentPanel: _.tabPanels[index]\n\t\t\t};\n\t\t\t_.dispatchEvent(new CustomEvent('tabchange', { detail, bubbles: true }));\n\t\t}\n\t}\n\n\t/**\n\t * @function onClick\n\t * handles click events on the <tab-list> via event delegation\n\t * @param {MouseEvent} e - the click event\n\t */\n\tonClick(e) {\n\t\tconst _ = this;\n\t\t// check if the click occurred on or within a <tab-button>\n\t\tconst tabButton = e.target.closest(\"tab-button\");\n\t\tif (!tabButton) return;\n\n\t\t// determine the index of the clicked tab-button\n\t\tconst index = _.tabButtons.indexOf(tabButton);\n\t\tif (index === -1) return;\n\n\t\t// activate the tab with the corresponding index\n\t\t_.setActiveTab(index);\n\t}\n\n\t/**\n\t * @function onKeyDown\n\t * handles keyboard navigation for the tabs\n\t * @param {KeyboardEvent} e - the keydown event\n\t */\n\tonKeyDown(e) {\n\t\tconst _ = this;\n\t\t// only process keys if focus is on a <tab-button>\n\t\tconst targetIndex = _.tabButtons.indexOf(e.target);\n\t\tif (targetIndex === -1) return;\n\n\t\tlet newIndex = targetIndex;\n\t\tswitch (e.key) {\n\t\t\tcase \"ArrowLeft\":\n\t\t\tcase \"ArrowUp\":\n\t\t\t\t// move to the previous tab (wrap around if necessary)\n\t\t\t\tnewIndex = targetIndex > 0 ? targetIndex - 1 : _.tabButtons.length - 1;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowRight\":\n\t\t\tcase \"ArrowDown\":\n\t\t\t\t// move to the next tab (wrap around if necessary)\n\t\t\t\tnewIndex = (targetIndex + 1) % _.tabButtons.length;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase \"Home\":\n\t\t\t\t// jump to the first tab\n\t\t\t\tnewIndex = 0;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase \"End\":\n\t\t\t\t// jump to the last tab\n\t\t\t\tnewIndex = _.tabButtons.length - 1;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn; // ignore other keys\n\t\t}\n\t\t_.setActiveTab(newIndex);\n\t}\n}\n\n/**\n * @class TabList\n * a container for the <tab-button> elements\n */\nclass TabList extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst _ = this;\n\t}\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\t\t// additional logic or styling can be added here if desired\n\t}\n}\n\n/**\n * @class TabButton\n * a single tab button element\n */\nclass TabButton extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst _ = this;\n\t}\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\t\t// note: role and other attributes are handled by the parent\n\t}\n}\n\n/**\n * @class TabPanel\n * a single tab panel element\n */\nclass TabPanel extends HTMLElement {\n\tconstructor() {\n\t\tsuper();\n\t\tconst _ = this;\n\t}\n\n\tconnectedCallback() {\n\t\tconst _ = this;\n\t\t// note: role and other attributes are handled by the parent\n\t}\n}\n\n// define the custom elements\ncustomElements.define(\"tab-group\", TabGroup);\ncustomElements.define(\"tab-list\", TabList);\ncustomElements.define(\"tab-button\", TabButton);\ncustomElements.define(\"tab-panel\", TabPanel);\n\n// export the main component\nexport { TabGroup };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab-group.js","sources":["../src/tab-group.js"],"sourcesContent":["import './tab-group.css';\n\n/**\n * @module TabGroup\n * A fully accessible tab group web component\n */\n\nlet instanceCount = 0;\n\n/**\n * @class TabGroup\n * the parent container that coordinates tabs and panels\n */\nexport default class TabGroup extends HTMLElement {\n\t/**\n\t * @function ensureConsistentTabsAndPanels\n\t * makes sure there is an equal number of <tab-button> and <tab-panel> elements.\n\t * if there are more panels than tabs, inject extra tab buttons.\n\t * if there are more tabs than panels, inject extra panels.\n\t */\n\tensureConsistentTabsAndPanels() {\n\t\t// get current tabs and panels scoped to direct children only\n\t\tlet tabs = this.querySelectorAll(':scope > tab-list > tab-button');\n\t\tlet panels = this.querySelectorAll(':scope > tab-panel');\n\n\t\t// if there are more panels than tabs\n\t\tif (panels.length > tabs.length) {\n\t\t\tconst difference = panels.length - tabs.length;\n\t\t\t// try to find a <tab-list> to insert new tabs\n\t\t\tlet tabList = this.querySelector(':scope > tab-list');\n\t\t\tif (!tabList) {\n\t\t\t\t// if not present, create one and insert it at the beginning\n\t\t\t\ttabList = document.createElement('tab-list');\n\t\t\t\tthis.insertBefore(tabList, this.firstChild);\n\t\t\t}\n\t\t\t// inject extra <tab-button> elements into the tab list\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\tconst newTab = document.createElement('tab-button');\n\t\t\t\tnewTab.textContent = 'default tab';\n\t\t\t\ttabList.appendChild(newTab);\n\t\t\t}\n\t\t}\n\t\t// if there are more tabs than panels\n\t\telse if (tabs.length > panels.length) {\n\t\t\tconst difference = tabs.length - panels.length;\n\t\t\t// inject extra <tab-panel> elements at the end of the tab group\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\tconst newPanel = document.createElement('tab-panel');\n\t\t\t\tnewPanel.innerHTML = '<p>default panel content</p>';\n\t\t\t\tthis.appendChild(newPanel);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * called when the element is connected to the dom\n\t */\n\tconnectedCallback() {\n\t\t// assign a stable instance id on first connect\n\t\tif (!this._instanceId) {\n\t\t\tthis._instanceId = `tg-${instanceCount++}`;\n\t\t}\n\n\t\t// ensure that the number of <tab-button> and <tab-panel> elements match\n\t\tthis.ensureConsistentTabsAndPanels();\n\n\t\t// find the <tab-list> element (should be exactly one)\n\t\tthis.tabList = this.querySelector(':scope > tab-list');\n\t\tif (!this.tabList) return;\n\n\t\t// find all <tab-button> elements inside the <tab-list>\n\t\tthis.tabButtons = Array.from(\n\t\t\tthis.tabList.querySelectorAll('tab-button')\n\t\t);\n\n\t\t// find all <tab-panel> elements inside the <tab-group>\n\t\tthis.tabPanels = Array.from(this.querySelectorAll(':scope > tab-panel'));\n\n\t\tconst prefix = this._instanceId;\n\n\t\t// initialize each tab-button with roles, ids and aria attributes\n\t\tthis.tabButtons.forEach((tab, index) => {\n\t\t\tconst tabId = `${prefix}-tab-${index}`;\n\t\t\tconst panelId = `${prefix}-panel-${index}`;\n\t\t\ttab.id = tabId;\n\t\t\ttab.setAttribute('role', 'tab');\n\t\t\ttab.setAttribute('aria-controls', panelId);\n\n\t\t\t// first tab is active by default\n\t\t\tif (index === 0) {\n\t\t\t\ttab.setAttribute('aria-selected', 'true');\n\t\t\t\ttab.setAttribute('tabindex', '0');\n\t\t\t} else {\n\t\t\t\ttab.setAttribute('aria-selected', 'false');\n\t\t\t\ttab.setAttribute('tabindex', '-1');\n\t\t\t}\n\t\t});\n\n\t\t// initialize each tab-panel with roles, ids and aria attributes\n\t\tthis.tabPanels.forEach((panel, index) => {\n\t\t\tconst panelId = `${prefix}-panel-${index}`;\n\t\t\tpanel.id = panelId;\n\t\t\tpanel.setAttribute('role', 'tabpanel');\n\t\t\tpanel.setAttribute('aria-labelledby', `${prefix}-tab-${index}`);\n\n\t\t\t// hide panels except for the first one\n\t\t\tpanel.hidden = index !== 0;\n\t\t});\n\n\t\t// set up keyboard navigation and click delegation on the <tab-list>\n\t\tthis.tabList.setAttribute('role', 'tablist');\n\n\t\t// store bound handlers so we can remove them in disconnectedCallback\n\t\tif (!this._onKeyDown) {\n\t\t\tthis._onKeyDown = (e) => this.onKeyDown(e);\n\t\t\tthis._onClick = (e) => this.onClick(e);\n\t\t}\n\t\tthis.tabList.addEventListener('keydown', this._onKeyDown);\n\t\tthis.tabList.addEventListener('click', this._onClick);\n\t}\n\n\t/**\n\t * called when the element is disconnected from the dom\n\t */\n\tdisconnectedCallback() {\n\t\tif (this.tabList && this._onKeyDown) {\n\t\t\tthis.tabList.removeEventListener('keydown', this._onKeyDown);\n\t\t\tthis.tabList.removeEventListener('click', this._onClick);\n\t\t}\n\t}\n\n\t/**\n\t * @function setActiveTab\n\t * activates a tab and updates aria attributes\n\t * @param {number} index - index of the tab to activate\n\t */\n\tsetActiveTab(index) {\n\t\tif (index < 0 || index >= this.tabButtons.length) return;\n\t\tconst previousIndex = this.tabButtons.findIndex(\n\t\t\t(tab) => tab.getAttribute('aria-selected') === 'true'\n\t\t);\n\n\t\t// update each tab-button\n\t\tthis.tabButtons.forEach((tab, i) => {\n\t\t\tconst isActive = i === index;\n\t\t\ttab.setAttribute('aria-selected', isActive ? 'true' : 'false');\n\t\t\ttab.setAttribute('tabindex', isActive ? '0' : '-1');\n\t\t\tif (isActive) {\n\t\t\t\ttab.focus();\n\t\t\t}\n\t\t});\n\n\t\t// update each tab-panel\n\t\tthis.tabPanels.forEach((panel, i) => {\n\t\t\tpanel.hidden = i !== index;\n\t\t});\n\n\t\t// dispatch event only if the tab actually changed\n\t\tif (previousIndex !== index) {\n\t\t\tconst detail = {\n\t\t\t\tpreviousIndex,\n\t\t\t\tcurrentIndex: index,\n\t\t\t\tpreviousTab: this.tabButtons[previousIndex],\n\t\t\t\tcurrentTab: this.tabButtons[index],\n\t\t\t\tpreviousPanel: this.tabPanels[previousIndex],\n\t\t\t\tcurrentPanel: this.tabPanels[index],\n\t\t\t};\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('tabchange', { detail, bubbles: true })\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * @function onClick\n\t * handles click events on the <tab-list> via event delegation\n\t * @param {MouseEvent} e - the click event\n\t */\n\tonClick(e) {\n\t\t// check if the click occurred on or within a <tab-button>\n\t\tconst tabButton = e.target.closest('tab-button');\n\t\tif (!tabButton) return;\n\n\t\t// determine the index of the clicked tab-button\n\t\tconst index = this.tabButtons.indexOf(tabButton);\n\t\tif (index === -1) return;\n\n\t\t// activate the tab with the corresponding index\n\t\tthis.setActiveTab(index);\n\t}\n\n\t/**\n\t * @function onKeyDown\n\t * handles keyboard navigation for the tabs\n\t * @param {KeyboardEvent} e - the keydown event\n\t */\n\tonKeyDown(e) {\n\t\t// only process keys if focus is on a <tab-button>\n\t\tconst targetIndex = this.tabButtons.indexOf(e.target);\n\t\tif (targetIndex === -1) return;\n\n\t\tlet newIndex = targetIndex;\n\t\tswitch (e.key) {\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowUp':\n\t\t\t\t// move to the previous tab (wrap around if necessary)\n\t\t\t\tnewIndex =\n\t\t\t\t\ttargetIndex > 0 ? targetIndex - 1 : this.tabButtons.length - 1;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowRight':\n\t\t\tcase 'ArrowDown':\n\t\t\t\t// move to the next tab (wrap around if necessary)\n\t\t\t\tnewIndex = (targetIndex + 1) % this.tabButtons.length;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase 'Home':\n\t\t\t\t// jump to the first tab\n\t\t\t\tnewIndex = 0;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tcase 'End':\n\t\t\t\t// jump to the last tab\n\t\t\t\tnewIndex = this.tabButtons.length - 1;\n\t\t\t\te.preventDefault();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn; // ignore other keys\n\t\t}\n\t\tthis.setActiveTab(newIndex);\n\t}\n}\n\n/**\n * @class TabList\n * a container for the <tab-button> elements\n */\nclass TabList extends HTMLElement {}\n\n/**\n * @class TabButton\n * a single tab button element\n */\nclass TabButton extends HTMLElement {}\n\n/**\n * @class TabPanel\n * a single tab panel element\n */\nclass TabPanel extends HTMLElement {}\n\n// define the custom elements (guarded against double-registration and SSR)\nif (typeof window !== 'undefined' && window.customElements) {\n\tif (!customElements.get('tab-group'))\n\t\tcustomElements.define('tab-group', TabGroup);\n\tif (!customElements.get('tab-list'))\n\t\tcustomElements.define('tab-list', TabList);\n\tif (!customElements.get('tab-button'))\n\t\tcustomElements.define('tab-button', TabButton);\n\tif (!customElements.get('tab-panel'))\n\t\tcustomElements.define('tab-panel', TabPanel);\n}\n"],"names":[],"mappings":";;;;;;CAEA;CACA;CACA;CACA;AACA;CACA,IAAI,aAAa,GAAG,CAAC,CAAC;AACtB;CACA;CACA;CACA;CACA;CACe,MAAM,QAAQ,SAAS,WAAW,CAAC;CAClD;CACA;CACA;CACA;CACA;CACA;CACA,CAAC,6BAA6B,GAAG;CACjC;CACA,EAAE,IAAI,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,gCAAgC,CAAC,CAAC;CACrE,EAAE,IAAI,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAC3D;CACA;CACA,EAAE,IAAI,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;CACnC,GAAG,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;CAClD;CACA,GAAG,IAAI,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;CACzD,GAAG,IAAI,CAAC,OAAO,EAAE;CACjB;CACA,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACjD,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;CAChD,IAAI;CACJ;CACA,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;CACxC,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;CACxD,IAAI,MAAM,CAAC,WAAW,GAAG,aAAa,CAAC;CACvC,IAAI,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;CAChC,IAAI;CACJ,GAAG;CACH;CACA,OAAO,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE;CACxC,GAAG,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;CAClD;CACA,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;CACxC,IAAI,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CACzD,IAAI,QAAQ,CAAC,SAAS,GAAG,8BAA8B,CAAC;CACxD,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;CAC/B,IAAI;CACJ,GAAG;CACH,EAAE;AACF;CACA;CACA;CACA;CACA,CAAC,iBAAiB,GAAG;CACrB;CACA,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;CACzB,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;CAC9C,GAAG;AACH;CACA;CACA,EAAE,IAAI,CAAC,6BAA6B,EAAE,CAAC;AACvC;CACA;CACA,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;CACzD,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO;AAC5B;CACA;CACA,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI;CAC9B,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,CAAC;CAC9C,GAAG,CAAC;AACJ;CACA;CACA,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAC3E;CACA,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;AAClC;CACA;CACA,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK;CAC1C,GAAG,MAAM,KAAK,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;CAC1C,GAAG,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;CAC9C,GAAG,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;CAClB,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;CACnC,GAAG,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC9C;CACA;CACA,GAAG,IAAI,KAAK,KAAK,CAAC,EAAE;CACpB,IAAI,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;CAC9C,IAAI,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CACtC,IAAI,MAAM;CACV,IAAI,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;CAC/C,IAAI,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;CACvC,IAAI;CACJ,GAAG,CAAC,CAAC;AACL;CACA;CACA,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK;CAC3C,GAAG,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;CAC9C,GAAG,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;CAC1C,GAAG,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AACnE;CACA;CACA,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,KAAK,CAAC,CAAC;CAC9B,GAAG,CAAC,CAAC;AACL;CACA;CACA,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC/C;CACA;CACA,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;CACxB,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;CAC1C,GAAG;CACH,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;CAC5D,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;CACxD,EAAE;AACF;CACA;CACA;CACA;CACA,CAAC,oBAAoB,GAAG;CACxB,EAAE,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE;CACvC,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;CAChE,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;CAC5D,GAAG;CACH,EAAE;AACF;CACA;CACA;CACA;CACA;CACA;CACA,CAAC,YAAY,CAAC,KAAK,EAAE;CACrB,EAAE,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,OAAO;CAC3D,EAAE,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS;CACjD,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;CACxD,GAAG,CAAC;AACJ;CACA;CACA,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK;CACtC,GAAG,MAAM,QAAQ,GAAG,CAAC,KAAK,KAAK,CAAC;CAChC,GAAG,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CAClE,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;CACvD,GAAG,IAAI,QAAQ,EAAE;CACjB,IAAI,GAAG,CAAC,KAAK,EAAE,CAAC;CAChB,IAAI;CACJ,GAAG,CAAC,CAAC;AACL;CACA;CACA,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK;CACvC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC;CAC9B,GAAG,CAAC,CAAC;AACL;CACA;CACA,EAAE,IAAI,aAAa,KAAK,KAAK,EAAE;CAC/B,GAAG,MAAM,MAAM,GAAG;CAClB,IAAI,aAAa;CACjB,IAAI,YAAY,EAAE,KAAK;CACvB,IAAI,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;CAC/C,IAAI,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;CACtC,IAAI,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;CAChD,IAAI,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;CACvC,IAAI,CAAC;CACL,GAAG,IAAI,CAAC,aAAa;CACrB,IAAI,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;CAC3D,IAAI,CAAC;CACL,GAAG;CACH,EAAE;AACF;CACA;CACA;CACA;CACA;CACA;CACA,CAAC,OAAO,CAAC,CAAC,EAAE;CACZ;CACA,EAAE,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;CACnD,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO;AACzB;CACA;CACA,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;CACnD,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,OAAO;AAC3B;CACA;CACA,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;CAC3B,EAAE;AACF;CACA;CACA;CACA;CACA;CACA;CACA,CAAC,SAAS,CAAC,CAAC,EAAE;CACd;CACA,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;CACxD,EAAE,IAAI,WAAW,KAAK,CAAC,CAAC,EAAE,OAAO;AACjC;CACA,EAAE,IAAI,QAAQ,GAAG,WAAW,CAAC;CAC7B,EAAE,QAAQ,CAAC,CAAC,GAAG;CACf,GAAG,KAAK,WAAW,CAAC;CACpB,GAAG,KAAK,SAAS;CACjB;CACA,IAAI,QAAQ;CACZ,KAAK,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;CACpE,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;CACvB,IAAI,MAAM;CACV,GAAG,KAAK,YAAY,CAAC;CACrB,GAAG,KAAK,WAAW;CACnB;CACA,IAAI,QAAQ,GAAG,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;CAC1D,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;CACvB,IAAI,MAAM;CACV,GAAG,KAAK,MAAM;CACd;CACA,IAAI,QAAQ,GAAG,CAAC,CAAC;CACjB,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;CACvB,IAAI,MAAM;CACV,GAAG,KAAK,KAAK;CACb;CACA,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;CAC1C,IAAI,CAAC,CAAC,cAAc,EAAE,CAAC;CACvB,IAAI,MAAM;CACV,GAAG;CACH,IAAI,OAAO;CACX,GAAG;CACH,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;CAC9B,EAAE;CACF,CAAC;AACD;CACA;CACA;CACA;CACA;CACA,MAAM,OAAO,SAAS,WAAW,CAAC,EAAE;AACpC;CACA;CACA;CACA;CACA;CACA,MAAM,SAAS,SAAS,WAAW,CAAC,EAAE;AACtC;CACA;CACA;CACA;CACA;CACA,MAAM,QAAQ,SAAS,WAAW,CAAC,EAAE;AACrC;CACA;CACA,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,cAAc,EAAE;CAC5D,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;CACrC,EAAE,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CAC/C,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,UAAU,CAAC;CACpC,EAAE,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC7C,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC;CACtC,EAAE,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;CACjD,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC;CACrC,EAAE,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CAC/C;;;;;;;;;;"}

package/dist/tab-group.min.css

@@ -1 +1 @@
-tab-group{color:var(--color-text);display:block;font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);width:100%}tab-list{background-color:var(--tab-list-background,transparent);background-image:var(--tab-list-background-image,none);border-bottom:var(--tab-list-border-bottom,1px solid var(--color-border));border-radius:var(--tab-list-radius,0);display:flex;gap:var(--tab-list-gap,.25rem);justify-content:var(--tab-list-justify,flex-start);margin-bottom:var(--spacing-md);overflow-x:auto;overflow-y:hidden;padding:var(--tab-list-padding,.5rem .25rem 0)}tab-button{background-color:var(--color-background);border:1px solid transparent;border-bottom:none;border-radius:var(--tab-button-radius,var(--border-radius) var(--border-radius) 0 0);color:var(--color-text);cursor:pointer;display:block;font-size:var(--font-size-base);font-weight:var(--tab-button-font-weight,normal);margin:var(--spacing-xs);margin-bottom:-1px;min-width:100px;padding:var(--spacing-sm) var(--spacing-md);position:relative;text-align:center;transition:all var(--transition-duration);user-select:none;white-space:nowrap}tab-button:hover{background-color:var(--color-hover)}tab-button:focus{box-shadow:var(--tab-button-focus-shadow,0 0 0 2px var(--color-primary));outline:none}tab-button[aria-selected=true]{background-color:var(--tab-active-background,var(--color-background));border-color:var(--color-border);border-bottom:1px solid var(--color-background);box-shadow:var(--tab-active-shadow,none);color:var(--tab-active-color,var(--color-primary));font-weight:var(--tab-active-font-weight,600);transform:var(--tab-active-transform,none)}tab-button[aria-selected=true]:after{background-color:var(--tab-indicator-color,var(--color-primary));border-radius:var(--tab-indicator-radius,0);bottom:0;content:"";height:var(--tab-indicator-height,2px);left:var(--tab-indicator-left,0);position:absolute;right:var(--tab-indicator-right,0)}tab-panel{background-color:var(--panel-background,var(--color-background));border:var(--panel-border,none);border-radius:var(--panel-radius,0 0 var(--border-radius) var(--border-radius));border-top:var(--panel-border-top,none);box-shadow:var(--panel-shadow,none);display:block;margin:var(--panel-margin,0);min-height:var(--panel-min-height,150px);padding:var(--panel-padding,var(--spacing-md));transition:var(--panel-transition,all .3s ease)}tab-panel[hidden]{display:none}@media (max-width:768px){tab-list{flex-wrap:wrap}tab-button{flex:1 0 auto;text-align:center}}
+tab-group{display:block}tab-list{display:flex;overflow-x:auto;overflow-y:hidden}tab-button{cursor:pointer;display:block;user-select:none}tab-panel[hidden]{display:none}

package/dist/tab-group.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).TabGroup={})}(this,(function(t){"use strict";class TabGroup extends HTMLElement{static tabCount=0;static panelCount=0;constructor(){super(),this.ensureConsistentTabsAndPanels()}ensureConsistentTabsAndPanels(){let t=this.querySelectorAll("tab-button"),e=this.querySelectorAll("tab-panel");if(e.length>t.length){const n=e.length-t.length;let a=this.querySelector("tab-list");a||(a=document.createElement("tab-list"),this.insertBefore(a,this.firstChild));for(let t=0;t<n;t++){const t=document.createElement("tab-button");t.textContent="default tab",a.appendChild(t)}}else if(t.length>e.length){const n=t.length-e.length;for(let t=0;t<n;t++){const t=document.createElement("tab-panel");t.innerHTML="<p>default panel content</p>",this.appendChild(t)}}}connectedCallback(){const t=this;t.tabList=t.querySelector("tab-list"),t.tabList&&(t.tabButtons=Array.from(t.tabList.querySelectorAll("tab-button")),t.tabPanels=Array.from(t.querySelectorAll("tab-panel")),t.tabButtons.forEach(((t,e)=>{const n=TabGroup.tabCount++,a=`tab-${n}`;t.id=a;const s=`panel-${n}`;t.setAttribute("role","tab"),t.setAttribute("aria-controls",s),0===e?(t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0")):(t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1"))})),t.tabPanels.forEach(((t,e)=>{const n=TabGroup.panelCount++,a=`panel-${n}`;t.id=a,t.setAttribute("role","tabpanel"),t.setAttribute("aria-labelledby",`tab-${n}`),t.hidden=0!==e})),t.tabList.setAttribute("role","tablist"),t.tabList.addEventListener("keydown",(e=>t.onKeyDown(e))),t.tabList.addEventListener("click",(e=>t.onClick(e))))}setActiveTab(t){const e=this,n=e.tabButtons.findIndex((t=>"true"===t.getAttribute("aria-selected")));if(e.tabButtons.forEach(((e,n)=>{const a=n===t;e.setAttribute("aria-selected",a?"true":"false"),e.setAttribute("tabindex",a?"0":"-1"),a&&e.focus()})),e.tabPanels.forEach(((e,n)=>{e.hidden=n!==t})),n!==t){const a={previousIndex:n,currentIndex:t,previousTab:e.tabButtons[n],currentTab:e.tabButtons[t],previousPanel:e.tabPanels[n],currentPanel:e.tabPanels[t]};e.dispatchEvent(new CustomEvent("tabchange",{detail:a,bubbles:!0}))}}onClick(t){const e=t.target.closest("tab-button");if(!e)return;const n=this.tabButtons.indexOf(e);-1!==n&&this.setActiveTab(n)}onKeyDown(t){const e=this,n=e.tabButtons.indexOf(t.target);if(-1===n)return;let a=n;switch(t.key){case"ArrowLeft":case"ArrowUp":a=n>0?n-1:e.tabButtons.length-1,t.preventDefault();break;case"ArrowRight":case"ArrowDown":a=(n+1)%e.tabButtons.length,t.preventDefault();break;case"Home":a=0,t.preventDefault();break;case"End":a=e.tabButtons.length-1,t.preventDefault();break;default:return}e.setActiveTab(a)}}class TabList extends HTMLElement{constructor(){super()}connectedCallback(){}}class TabButton extends HTMLElement{constructor(){super()}connectedCallback(){}}class TabPanel extends HTMLElement{constructor(){super()}connectedCallback(){}}customElements.define("tab-group",TabGroup),customElements.define("tab-list",TabList),customElements.define("tab-button",TabButton),customElements.define("tab-panel",TabPanel),t.TabGroup=TabGroup,t.default=TabGroup,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).TabGroup={})}(this,function(t){"use strict";let e=0;class TabGroup extends HTMLElement{ensureConsistentTabsAndPanels(){let t=this.querySelectorAll(":scope > tab-list > tab-button"),e=this.querySelectorAll(":scope > tab-panel");if(e.length>t.length){const s=e.length-t.length;let n=this.querySelector(":scope > tab-list");n||(n=document.createElement("tab-list"),this.insertBefore(n,this.firstChild));for(let t=0;t<s;t++){const t=document.createElement("tab-button");t.textContent="default tab",n.appendChild(t)}}else if(t.length>e.length){const s=t.length-e.length;for(let t=0;t<s;t++){const t=document.createElement("tab-panel");t.innerHTML="<p>default panel content</p>",this.appendChild(t)}}}connectedCallback(){if(this._instanceId||(this._instanceId="tg-"+e++),this.ensureConsistentTabsAndPanels(),this.tabList=this.querySelector(":scope > tab-list"),!this.tabList)return;this.tabButtons=Array.from(this.tabList.querySelectorAll("tab-button")),this.tabPanels=Array.from(this.querySelectorAll(":scope > tab-panel"));const t=this._instanceId;this.tabButtons.forEach((e,s)=>{const n=`${t}-tab-${s}`,a=`${t}-panel-${s}`;e.id=n,e.setAttribute("role","tab"),e.setAttribute("aria-controls",a),0===s?(e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0")):(e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"))}),this.tabPanels.forEach((e,s)=>{const n=`${t}-panel-${s}`;e.id=n,e.setAttribute("role","tabpanel"),e.setAttribute("aria-labelledby",`${t}-tab-${s}`),e.hidden=0!==s}),this.tabList.setAttribute("role","tablist"),this._onKeyDown||(this._onKeyDown=t=>this.onKeyDown(t),this._onClick=t=>this.onClick(t)),this.tabList.addEventListener("keydown",this._onKeyDown),this.tabList.addEventListener("click",this._onClick)}disconnectedCallback(){this.tabList&&this._onKeyDown&&(this.tabList.removeEventListener("keydown",this._onKeyDown),this.tabList.removeEventListener("click",this._onClick))}setActiveTab(t){if(t<0||t>=this.tabButtons.length)return;const e=this.tabButtons.findIndex(t=>"true"===t.getAttribute("aria-selected"));if(this.tabButtons.forEach((e,s)=>{const n=s===t;e.setAttribute("aria-selected",n?"true":"false"),e.setAttribute("tabindex",n?"0":"-1"),n&&e.focus()}),this.tabPanels.forEach((e,s)=>{e.hidden=s!==t}),e!==t){const s={previousIndex:e,currentIndex:t,previousTab:this.tabButtons[e],currentTab:this.tabButtons[t],previousPanel:this.tabPanels[e],currentPanel:this.tabPanels[t]};this.dispatchEvent(new CustomEvent("tabchange",{detail:s,bubbles:!0}))}}onClick(t){const e=t.target.closest("tab-button");if(!e)return;const s=this.tabButtons.indexOf(e);-1!==s&&this.setActiveTab(s)}onKeyDown(t){const e=this.tabButtons.indexOf(t.target);if(-1===e)return;let s=e;switch(t.key){case"ArrowLeft":case"ArrowUp":s=e>0?e-1:this.tabButtons.length-1,t.preventDefault();break;case"ArrowRight":case"ArrowDown":s=(e+1)%this.tabButtons.length,t.preventDefault();break;case"Home":s=0,t.preventDefault();break;case"End":s=this.tabButtons.length-1,t.preventDefault();break;default:return}this.setActiveTab(s)}}class TabList extends HTMLElement{}class TabButton extends HTMLElement{}class TabPanel extends HTMLElement{}"undefined"!=typeof window&&window.customElements&&(customElements.get("tab-group")||customElements.define("tab-group",TabGroup),customElements.get("tab-list")||customElements.define("tab-list",TabList),customElements.get("tab-button")||customElements.define("tab-button",TabButton),customElements.get("tab-panel")||customElements.define("tab-panel",TabPanel)),t.default=TabGroup,Object.defineProperty(t,"__esModule",{value:!0})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic-spells/tab-group",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Tab group and tab list html components.",
   "license": "MIT",
   "author": "Cory Schulz",
@@ -8,8 +8,8 @@
   "main": "dist/tab-group.cjs.js",
   "module": "dist/tab-group.esm.js",
   "unpkg": "dist/tab-group.min.js",
+  "types": "tab-group.d.ts",
   "style": "dist/tab-group.min.css",
-  "sass": "dist/tab-group.scss",
   "exports": {
     ".": {
       "import": "./dist/tab-group.esm.js",
@@ -17,9 +17,7 @@
       "default": "./dist/tab-group.esm.js"
     },
     "./css": "./dist/tab-group.css",
-    "./css/min": "./dist/tab-group.min.css",
-    "./scss": "./dist/tab-group.scss",
-    "./scss/*": "./dist/scss/*"
+    "./css/min": "./dist/tab-group.min.css"
   },
   "sideEffects": true,
   "repository": {
@@ -28,7 +26,7 @@
   },
   "files": [
     "dist/",
-    "src/"
+    "tab-group.d.ts"
   ],
   "publishConfig": {
     "access": "public",
@@ -40,20 +38,21 @@
     "not ie <= 11"
   ],
   "devDependencies": {
-    "@eslint/js": "^8.57.0",
+    "@eslint/js": "^9.38.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "eslint": "^8.0.0",
-    "globals": "^13.24.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "caniuse-lite": "^1.0.30001777",
+    "eslint": "^9.38.0",
+    "globals": "^15.15.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",
-    "sass": "^1.86.3"
+    "rollup-plugin-serve": "^1.1.1"
   },
   "scripts": {
-    "build": "rollup -c",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c",
     "lint": "eslint src/ rollup.config.mjs",
     "format": "prettier --write .",
     "prepublishOnly": "npm run build",

package/tab-group.d.ts

@@ -0,0 +1,33 @@
+export interface TabChangeEventDetail {
+	previousIndex: number;
+	currentIndex: number;
+	previousTab: HTMLElement;
+	currentTab: HTMLElement;
+	previousPanel: HTMLElement;
+	currentPanel: HTMLElement;
+}
+
+export default class TabGroup extends HTMLElement {
+	/** The tab-list element within this tab group. */
+	tabList: HTMLElement | null;
+
+	/** Array of tab-button elements. */
+	tabButtons: HTMLElement[];
+
+	/** Array of tab-panel elements. */
+	tabPanels: HTMLElement[];
+
+	/** Activates the tab at the given index. */
+	setActiveTab(index: number): void;
+
+	addEventListener(
+		type: 'tabchange',
+		listener: (event: CustomEvent<TabChangeEventDetail>) => void,
+		options?: boolean | AddEventListenerOptions,
+	): void;
+	addEventListener(
+		type: string,
+		listener: EventListenerOrEventListenerObject,
+		options?: boolean | AddEventListenerOptions,
+	): void;
+}