@warp-ds/elements 2.10.0-next.9 → 2.10.1-next.1

package/dist/packages/tabs/tabs.a11y.test.js

@@ -1,229 +1,248 @@
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import '../tab/tab.js';
-import '../tab-panel/tab-panel.js';
-import './tabs.js';
-describe('w-tabs, w-tab-panel, w-tab accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "../tab/tab.js";
+import "../tab-panel/tab-panel.js";
+import "./tabs.js";
+describe("w-tabs, w-tab-panel, w-tab accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `<w-tabs>
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('active tab state has no violations', async () => {
+        test("active tab state has no violations", async () => {
             const page = render(html `<w-tabs active="towers">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('w-tab has role tab, w-tab-panel has role tabpanel', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("w-tab has role tab, w-tab-panel has role tabpanel", async () => {
             const page = render(html `<w-tabs active="towers">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
             // ElementInternals roles are set in accessibility tree but not queryable via getByRole
             // Query by element tag name instead
-            expect(page.container.querySelectorAll('w-tab')).toHaveLength(3);
-            expect(page.container.querySelectorAll('w-tab-panel')).toHaveLength(3);
+            expect(page.container.querySelectorAll("w-tab")).toHaveLength(3);
+            expect(page.container.querySelectorAll("w-tab-panel")).toHaveLength(3);
         });
-        test('w-tab and w-tab-panel has a defined relationship through aria-controls, aria-labelledby', async () => {
+        test("w-tab and w-tab-panel has a defined relationship through aria-controls, aria-labelledby", async () => {
             const page = render(html `<w-tabs active="fellowship">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
             // Check aria-controls is set correctly on tabs (on internal button with delegatesFocus)
-            const firstTab = page.container.querySelector('w-tab');
-            const internalButton = firstTab.shadowRoot?.querySelector('button');
-            expect(internalButton?.getAttribute('aria-controls')).toBe('fellowship');
-            expect(firstTab.textContent?.trim()).toBe('Fellowship');
+            const firstTab = page.container.querySelector("w-tab");
+            const internalButton = firstTab.shadowRoot?.querySelector("button");
+            expect(internalButton?.getAttribute("aria-controls")).toBe("fellowship");
+            expect(firstTab.textContent?.trim()).toBe("Fellowship");
         });
-        test('consumer-provided aria-controls is preserved and used', async () => {
+        test("consumer-provided aria-controls is preserved and used", async () => {
             const page = render(html `<w-tabs active="fellowship">
-          <w-tab for="fellowship" aria-controls="fellowship-panel">Fellowship</w-tab>
-          <w-tab-panel id="fellowship-panel">
-            <p>And my axe!</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
-            const firstTab = page.container.querySelector('w-tab');
-            const internalButton = firstTab.shadowRoot?.querySelector('button');
-            expect(firstTab.getAttribute('aria-controls')).toBe('fellowship-panel');
-            expect(internalButton?.getAttribute('aria-controls')).toBe('fellowship-panel');
+					<w-tab for="fellowship" aria-controls="fellowship-panel"
+						>Fellowship</w-tab
+					>
+					<w-tab-panel id="fellowship-panel">
+						<p>And my axe!</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
+            const firstTab = page.container.querySelector("w-tab");
+            const internalButton = firstTab.shadowRoot?.querySelector("button");
+            expect(firstTab.getAttribute("aria-controls")).toBe("fellowship-panel");
+            expect(internalButton?.getAttribute("aria-controls")).toBe("fellowship-panel");
         });
     });
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('active tab is marked as selected', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("active tab is marked as selected", async () => {
             const page = render(html `<w-tabs active="towers">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
             // Query by property since aria-selected is set via ElementInternals (no DOM attribute)
-            const selectedTab = [...page.container.querySelectorAll('w-tab')].find((tab) => tab.ariaSelected === 'true');
-            await expect.element(selectedTab).toHaveTextContent('Towers');
+            const selectedTab = [
+                ...page.container.querySelectorAll("w-tab"),
+            ].find((tab) => tab.ariaSelected === "true");
+            await expect
+                .element(selectedTab)
+                .toHaveTextContent("Towers");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('active tab is focusable, can use the arrow keys to change tabs', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("active tab is focusable, can use the arrow keys to change tabs", async () => {
             const page = render(html `<w-tabs active="towers">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
             // Query by property since aria-selected is set via ElementInternals (no DOM attribute)
-            const selectedTab = [...page.container.querySelectorAll('w-tab')].find((tab) => tab.ariaSelected === 'true');
+            const selectedTab = [
+                ...page.container.querySelectorAll("w-tab"),
+            ].find((tab) => tab.ariaSelected === "true");
             selectedTab.focus();
-            await userEvent.keyboard('{ArrowLeft}');
-            await expect.element(page.getByText('And my axe!')).toBeVisible();
-            await expect.element(page.getByText('I am no man')).not.toBeVisible();
-            await expect.element(page.getByText("I am on nobody's side")).not.toBeVisible();
+            await userEvent.keyboard("{ArrowLeft}");
+            await expect.element(page.getByText("And my axe!")).toBeVisible();
+            await expect.element(page.getByText("I am no man")).not.toBeVisible();
+            await expect
+                .element(page.getByText("I am on nobody's side"))
+                .not.toBeVisible();
         });
-        test('inactive tabs have tabindex -1', async () => {
+        test("inactive tabs have tabindex -1", async () => {
             const page = render(html `<w-tabs active="towers">
-          <w-tab for="fellowship">Fellowship</w-tab>
-          <w-tab-panel id="fellowship">
-            <p>And my axe!</p>
-          </w-tab-panel>
+					<w-tab for="fellowship">Fellowship</w-tab>
+					<w-tab-panel id="fellowship">
+						<p>And my axe!</p>
+					</w-tab-panel>
 
-          <w-tab for="towers">Towers</w-tab>
-          <w-tab-panel id="towers">
-            <p>
-              I am on nobody's side, because nobody is on my side, little orc.
-            </p>
-          </w-tab-panel>
+					<w-tab for="towers">Towers</w-tab>
+					<w-tab-panel id="towers">
+						<p>
+							I am on nobody's side, because nobody is on my side, little orc.
+						</p>
+					</w-tab-panel>
 
-          <w-tab for="return">Return</w-tab>
-          <w-tab-panel id="return">
-            <p>I am no man.</p>
-          </w-tab-panel>
-        </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
+					<w-tab for="return">Return</w-tab>
+					<w-tab-panel id="return">
+						<p>I am no man.</p>
+					</w-tab-panel>
+				</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
             // Query by property since aria-selected is set via ElementInternals (no DOM attribute)
-            const inactiveTabs = [...page.container.querySelectorAll('w-tab')].filter((tab) => tab.ariaSelected === 'false');
+            const inactiveTabs = [
+                ...page.container.querySelectorAll("w-tab"),
+            ].filter((tab) => tab.ariaSelected === "false");
             expect(inactiveTabs).toHaveLength(2);
             // Check tabIndex property (not attribute) since delegatesFocus is used
             for (const tab of inactiveTabs) {
                 expect(tab.tabIndex).toBe(-1);
             }
         });
-        test('active tab shows visible focus indicator on keyboard focus', async () => {
+        test("active tab shows visible focus indicator on keyboard focus", async () => {
             const page = render(html `<button type="button">Before</button>
-          <w-tabs active="towers">
-            <w-tab for="fellowship">Fellowship</w-tab>
-            <w-tab-panel id="fellowship"><p>And my axe!</p></w-tab-panel>
+					<w-tabs active="towers">
+						<w-tab for="fellowship">Fellowship</w-tab>
+						<w-tab-panel id="fellowship"><p>And my axe!</p></w-tab-panel>
 
-            <w-tab for="towers">Towers</w-tab>
-            <w-tab-panel id="towers"><p>I am on nobody's side.</p></w-tab-panel>
-          </w-tabs>`);
-            await page.container.querySelector('w-tabs').updateComplete;
-            const beforeButton = page.getByRole('button', { name: 'Before' }).element();
+						<w-tab for="towers">Towers</w-tab>
+						<w-tab-panel id="towers"><p>I am on nobody's side.</p></w-tab-panel>
+					</w-tabs>`);
+            await page.container.querySelector("w-tabs").updateComplete;
+            const beforeButton = page
+                .getByRole("button", { name: "Before" })
+                .element();
             beforeButton.focus();
-            await expect.element(page.getByRole('button', { name: 'Before' })).toHaveFocus();
+            await expect
+                .element(page.getByRole("button", { name: "Before" }))
+                .toHaveFocus();
             await userEvent.tab();
-            const selectedTab = [...page.container.querySelectorAll('w-tab')].find((tab) => tab.ariaSelected === 'true');
-            const internalButton = selectedTab.shadowRoot?.querySelector('button');
+            const selectedTab = [
+                ...page.container.querySelectorAll("w-tab"),
+            ].find((tab) => tab.ariaSelected === "true");
+            const internalButton = selectedTab.shadowRoot?.querySelector("button");
             if (!internalButton) {
-                throw new Error('Expected selected tab to have an internal button');
+                throw new Error("Expected selected tab to have an internal button");
             }
             const activeEl = document.activeElement;
             expect(activeEl === selectedTab || activeEl === internalButton).toBe(true);
             const hostStyle = getComputedStyle(selectedTab);
             const buttonStyle = getComputedStyle(internalButton);
-            const hostHasRing = hostStyle.outlineStyle === 'solid' && hostStyle.outlineWidth !== '0px';
-            const buttonHasRing = buttonStyle.outlineStyle === 'solid' && buttonStyle.outlineWidth !== '0px';
+            const hostHasRing = hostStyle.outlineStyle === "solid" && hostStyle.outlineWidth !== "0px";
+            const buttonHasRing = buttonStyle.outlineStyle === "solid" &&
+                buttonStyle.outlineWidth !== "0px";
             expect(hostHasRing || buttonHasRing).toBe(true);
         });
     });

package/dist/packages/tabs/tabs.d.ts

@@ -1,11 +1,14 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
+import { WarpTab } from "../tab/tab.js";
 export type WarpTabsChangeEvent = CustomEvent<{
     panelId: string;
 }>;
 /**
  * Tabs are used to organize content by grouping similar information on the same page.
  *
- * @event {WarpTabsChangeEvent} change - Includes `details.panelId` with the now active tab's ID
+ * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
+ *
+ * @event {WarpTabsChangeEvent} change - Includes `details.panelId` with the now active tab panel's ID
  */
 export declare class WarpTabs extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -14,7 +17,7 @@ export declare class WarpTabs extends LitElement {
      *
      * @default "" (Shows the first tab)
      */
-    active: string;
+    active: string | undefined;
     private tabList;
     private selectionIndicator;
     private _uniqueId;
@@ -28,9 +31,9 @@ export declare class WarpTabs extends LitElement {
     firstUpdated(): void;
     updated(changedProperties: PropertyValues<this>): void;
     /** @internal */
-    get tabs(): Element[];
+    get tabs(): WarpTab[];
     /** @internal */
-    get activeTab(): Element;
+    get activeTab(): WarpTab;
     private _initializeActiveTab;
     private _handleTabClick;
     private _notifyTabChange;
@@ -43,6 +46,6 @@ export declare class WarpTabs extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'w-tabs': WarpTabs;
+        "w-tabs": WarpTabs;
     }
 }

package/dist/packages/tabs/tabs.hydration.test.d.ts

@@ -1 +1,3 @@
-import './index.js';
+import "../tab/tab.js";
+import "../tab-panel/tab-panel.js";
+import "./index.js";

package/dist/packages/tabs/tabs.hydration.test.js

@@ -1,7 +1,9 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './index.js';
-describe('w-tabs React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, testHydrationWithChildren, } from "../../tests/react-hydration";
+import "../tab/tab.js";
+import "../tab-panel/tab-panel.js";
+import "./index.js";
+describe("w-tabs React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
@@ -9,12 +11,24 @@ describe('w-tabs React SSR hydration', () => {
     // Note: w-tabs requires w-tab and w-tab-panel children to function properly.
     // Testing the parent element alone to verify its own attributes don't cause mismatch.
     // Full parent/child hydration requires React component wrappers or framework integration.
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tabs', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tabs", {});
         expect(warnings).toEqual([]);
     });
-    test('with active prop hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tabs', { active: 'panel1' });
+    test("with active prop hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tabs", { active: "panel1" });
+        expect(warnings).toEqual([]);
+    });
+    test("with w-tab and w-tab-panel hydrates without warnings as long as you provide slot, ID and active tab ahead of time", async () => {
+        const childrenHtml = /* html */ `<w-tab id="t1" slot="tabs" for="tab1"><span>First</span></w-tab><w-tab id="t2" slot="tabs" for="tab2"><span>Second</span></w-tab><w-tab id="t3" slot="tabs" for="tab3"><span>Third</span></w-tab><w-tab-panel id="tab1" slot="panels"><p>Content the first</p></w-tab-panel><w-tab-panel id="tab2" slot="panels"><p>Content the second</p></w-tab-panel><w-tab-panel id="tab3" slot="panels"><p>Content the third</p></w-tab-panel>`;
+        const warnings = await testHydrationWithChildren("w-tabs", {
+            active: "tab1",
+        }, childrenHtml);
+        expect(warnings).toEqual([]);
+    });
+    test.fails("with w-tab and w-tab-panel hydrates with warnings if you omit the client-side added attributes", async () => {
+        const childrenHtml = /* html */ `<w-tab for="tab1"><span>First</span></w-tab><w-tab for="tab2"><span>Second</span></w-tab><w-tab for="tab3"><span>Third</span></w-tab><w-tab-panel id="tab1"><p>Content the first</p></w-tab-panel><w-tab-panel id="tab2"><p>Content the second</p></w-tab-panel><w-tab-panel id="tab3"><p>Content the third</p></w-tab-panel>`;
+        const warnings = await testHydrationWithChildren("w-tabs", {}, childrenHtml);
         expect(warnings).toEqual([]);
     });
 });