diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 0000000..a5a47f9 --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +nodejs 22.3.0 diff --git a/custom-elements.json b/custom-elements.json index 8355ce3..5772e8e 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -437,6 +437,9 @@ "kind": "field", "name": "#tabList", "privacy": "private", + "type": { + "text": "HTMLElement" + }, "readonly": true }, { diff --git a/package-lock.json b/package-lock.json index 4056cbd..d39e63c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2403,12 +2403,12 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dev": true, "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -3991,9 +3991,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dev": true, "dependencies": { "to-regex-range": "^5.0.1" diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts index ebccbd9..ea335b7 100644 --- a/src/tab-container-element.ts +++ b/src/tab-container-element.ts @@ -109,7 +109,7 @@ export class TabContainerElement extends HTMLElement { static observedAttributes = ['vertical'] - get #tabList() { + get #tabList(): HTMLElement { const wrapper = this.querySelector('[slot=tablist-wrapper]') if (wrapper?.closest(this.tagName) === this) { return wrapper.querySelector('[role=tablist]') as HTMLElement @@ -221,7 +221,18 @@ export class TabContainerElement extends HTMLElement { this.addEventListener('click', this) this.selectTab(-1) - this.#setupComplete = true + + if (!this.#setupComplete) { + const mutationObserver = new MutationObserver(() => { + this.selectTab(-1) + + if (this.#setupComplete) { + mutationObserver.disconnect() + } + }) + + mutationObserver.observe(this, {childList: true, subtree: true}) + } } attributeChangedCallback(name: string) { @@ -356,7 +367,7 @@ export class TabContainerElement extends HTMLElement { * Out of bounds index */ if (index > tabs.length - 1) { - throw new RangeError(`Index "${index}" out of bounds`) + return } const selectedTab = tabs[index] @@ -401,5 +412,7 @@ export class TabContainerElement extends HTMLElement { }), ) } + + this.#setupComplete = true } } diff --git a/test/test.js b/test/test.js index a65a03d..27c3059 100644 --- a/test/test.js +++ b/test/test.js @@ -339,11 +339,9 @@ describe('tab-container', function () { }) it('result in noop, when selectTab receives out of bounds index', function () { - assert.throws(() => tabContainer.selectTab(3), 'Index "3" out of bounds') - - tabContainer.selectTab(2) - assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected') - assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible') + tabContainer.selectTab(3) + assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected') + assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible') }) })