@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

package/dist/packages/switch/switch.stories.js

@@ -1,12 +1,12 @@
-import { html } from 'lit';
-import './switch.js';
+import { html } from "lit";
+import "./switch.js";
 const meta = {
-    title: 'Forms/Switch',
-    component: 'w-switch',
+    title: "Forms/Switch",
+    component: "w-switch",
     argTypes: {
-        checked: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        value: { control: 'text' },
+        checked: { control: "boolean" },
+        disabled: { control: "boolean" },
+        value: { control: "text" },
     },
 };
 export default meta;
@@ -36,51 +36,56 @@ export const DisabledChecked = {
 };
 export const WithLabel = {
     render: () => html `
-    <div style="display: inline-flex; align-items: center; gap: 8px;">
-      <span id="switch-label">Enable notifications</span>
-      <w-switch aria-labelledby="switch-label"></w-switch>
-    </div>
-  `,
+		<div style="display: inline-flex; align-items: center; gap: 8px;">
+			<span id="switch-label">Enable notifications</span>
+			<w-switch aria-labelledby="switch-label"></w-switch>
+		</div>
+	`,
 };
 export const NativeLabel = {
     render: () => html `
-    <div style="display: inline-flex; align-items: center; gap: 8px;">
-      <label for="native-label-switch">Enable notifications</label>
-      <w-switch
-        id="native-label-switch"
-        name="notifications"
-        value="enabled"
-      ></w-switch>
-    </div>
-  `,
+		<div style="display: inline-flex; align-items: center; gap: 8px;">
+			<label for="native-label-switch">Enable notifications</label>
+			<w-switch
+				id="native-label-switch"
+				name="notifications"
+				value="enabled"
+			></w-switch>
+		</div>
+	`,
 };
 export const SwitchFormAssociated = {
     render: () => {
         const handleSubmit = (event) => {
             event.preventDefault();
             const form = event.currentTarget;
-            const status = form.querySelector('[data-status]');
+            const status = form.querySelector("[data-status]");
             if (!status)
                 return;
             const data = new FormData(form);
-            const name = 'notifications';
+            const name = "notifications";
             const value = data.get(name);
             status.textContent =
-                value === null ? 'Submitted: no switch value captured.' : `Submitted: ${name}=${String(value)}`;
+                value === null
+                    ? "Submitted: no switch value captured."
+                    : `Submitted: ${name}=${String(value)}`;
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px; max-width: 320px;">
-        <div style="display: inline-flex; align-items: center; gap: 8px;">
-          <span id="switch-form-label">Enable notifications</span>
-          <w-switch
-            aria-labelledby="switch-form-label"
-            name="notifications"
-            value="enabled"
-          ></w-switch>
-        </div>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form
+				@submit=${handleSubmit}
+				style="display: grid; gap: 12px; max-width: 320px;"
+			>
+				<div style="display: inline-flex; align-items: center; gap: 8px;">
+					<span id="switch-form-label">Enable notifications</span>
+					<w-switch
+						aria-labelledby="switch-form-label"
+						name="notifications"
+						value="enabled"
+					></w-switch>
+				</div>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };

package/dist/packages/switch/switch.test.d.ts

@@ -1 +1 @@
-import './switch.js';
+import "./switch.js";

package/dist/packages/switch/switch.test.js

@@ -1,64 +1,59 @@
-import { html } from 'lit';
-import { expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './switch.js';
-test('can reset switch by resetting surrounding form', async () => {
-    const label = 'Test label';
+import { html } from "lit";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./switch.js";
+test("can reset switch by resetting surrounding form", async () => {
+    const label = "Test label";
     render(html `
-    <form>
-      <w-switch
-        label=${label}
-        name="test"
-        value="some value"
-        checked
-      >
-      </w-switch>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wSwitch = document.querySelector('w-switch');
+		<form>
+			<w-switch label=${label} name="test" value="some value" checked>
+			</w-switch>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wSwitch = document.querySelector("w-switch");
     // sanity
     expect(form).not.toBeNull();
     expect(wSwitch).not.toBeNull();
     // Initial value is "some value"
-    expect(wSwitch.value).toBe('some value');
+    expect(wSwitch.value).toBe("some value");
     // value should be associated with the form
     const data = new FormData(form);
-    expect(Array.from(data.entries()).length).toBe(1);
+    expect([...data.entries()].length).toBe(1);
     // uncheck
     wSwitch.checked = false;
     await wSwitch.updateComplete;
     // value should no longer be associated with the form
     const data2 = new FormData(form);
-    expect(Array.from(data2.entries()).length).toBe(0);
+    expect([...data2.entries()].length).toBe(0);
     // Reset the form
     form.reset();
     await wSwitch.updateComplete;
     // value should be associated with the form again after reset
     const data3 = new FormData(form);
-    expect(Array.from(data3.entries()).length).toBe(1);
+    expect([...data3.entries()].length).toBe(1);
 });
-test('mouse click toggles switch once', async () => {
+test("mouse click toggles switch once", async () => {
     render(html `<w-switch aria-label="Enable notifications"></w-switch>`);
-    const wSwitch = document.querySelector('w-switch');
+    const wSwitch = document.querySelector("w-switch");
     await wSwitch.updateComplete;
-    const button = wSwitch.shadowRoot.querySelector('button');
+    const button = wSwitch.shadowRoot.querySelector("button");
     expect(wSwitch.checked).toBe(false);
     button.click();
     await wSwitch.updateComplete;
     expect(wSwitch.checked).toBe(true);
 });
-test('native label click toggles switch', async () => {
+test("native label click toggles switch", async () => {
     render(html `
-    <label for="native-label-switch">Enable notifications</label>
-    <w-switch
-      id="native-label-switch"
-      name="notifications"
-      value="enabled"
-    ></w-switch>
-  `);
-    const label = document.querySelector('label');
-    const wSwitch = document.querySelector('w-switch');
+		<label for="native-label-switch">Enable notifications</label>
+		<w-switch
+			id="native-label-switch"
+			name="notifications"
+			value="enabled"
+		></w-switch>
+	`);
+    const label = document.querySelector("label");
+    const wSwitch = document.querySelector("w-switch");
     await wSwitch.updateComplete;
     expect(wSwitch.checked).toBe(false);
     label.click();

package/dist/packages/tab/react.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
-import { WarpTab } from './tab.js';
-export declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTab>, "for" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "updated" | "render" | "renderOptions" | "onClick" | "active" | "_parentTabIndex" | "_parentAriaSelected" | "over" | "_computedAriaSelected" | "onTabClick" | "ontab-click"> & {
+import React from "react";
+import { WarpTab } from "./tab.js";
+export declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpTab>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onclick" | "updated" | "render" | "renderOptions" | "onClick" | "active" | "for" | "_parentTabIndex" | "_parentAriaSelected" | "over" | "_computedAriaSelected" | "onTabClick" | "ontab-click"> & {
     onTabClick?: ((e: Event) => void) | undefined;
-    'ontab-click'?: ((e: Event) => void) | undefined;
+    "ontab-click"?: ((e: Event) => void) | undefined;
     onClick?: ((e: Event) => void) | undefined;
     onclick?: ((e: Event) => void) | undefined;
 } & Partial<Omit<WarpTab, keyof HTMLElement>> & React.RefAttributes<WarpTab>, "ref">, "aria-selected"> & {
+    /** An ID is required to avoid hydration issues */
+    id: string;
     ariaSelected?: "true" | "false";
 } & React.RefAttributes<WarpTab>>;

package/dist/packages/tab/react.js

@@ -1,23 +1,24 @@
-import { createComponent } from '@lit/react';
-import { LitElement } from 'lit';
-import React from 'react';
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
 const BaseTab = createComponent({
-    tagName: 'w-tab',
+    tagName: "w-tab",
     elementClass: Component,
     react: React,
     events: {
-        onTabClick: 'tab-click',
-        'ontab-click': 'tab-click',
-        onClick: 'click',
-        onclick: 'click',
+        onTabClick: "tab-click",
+        "ontab-click": "tab-click",
+        onClick: "click",
+        onclick: "click",
     },
 });
 export const Tab = React.forwardRef(({ ariaSelected, ...props }, ref) => React.createElement(BaseTab, {
+    slot: "tabs",
     ...props,
-    ...(ariaSelected !== undefined ? { 'aria-selected': ariaSelected } : {}),
+    ...(ariaSelected !== undefined ? { "aria-selected": ariaSelected } : {}),
     ref,
 }));
-Tab.displayName = 'Tab';
+Tab.displayName = "Tab";

package/dist/packages/tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/tab/styles.js

@@ -0,0 +1,2 @@
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-b-4{border-bottom-width:4px}.border-transparent{border-color:#0000}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.gap-8{gap:.8rem}.outline{outline-style:solid}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-text-link{color:var(--w-s-color-text-link)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.hover\\:s-text-link:hover{color:var(--w-s-color-text-link)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.hover\\:s-border-primary:hover{border-color:var(--w-s-color-border-primary)}.w-full{width:100%}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.p-0{padding:0}.p-16{padding:1.6rem}.pb-8{padding-bottom:.8rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}");

package/dist/packages/tab/tab.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 /**
  * Individual tab component used within w-tabs container.
  *
@@ -44,7 +44,7 @@ export declare class WarpTab extends LitElement {
      *
      * @internal
      */
-    _parentAriaSelected: 'true' | 'false' | undefined;
+    _parentAriaSelected: "true" | "false" | undefined;
     /**
      * Override tabIndex getter to return the computed internal tabIndex.
      * This allows external code to check if the tab is focusable.
@@ -63,16 +63,16 @@ export declare class WarpTab extends LitElement {
      *
      * @internal
      */
-    get _computedAriaSelected(): 'true' | 'false' | undefined;
+    get _computedAriaSelected(): "true" | "false" | undefined;
     private get _effectiveAriaControls();
     /**
      * Indicate that this is the currently active tab.
      *
      * @internal Set by w-tabs
      */
-    set ariaSelected(value: 'true' | 'false');
+    set ariaSelected(value: "true" | "false");
     /** @internal */
-    get ariaSelected(): 'true' | 'false';
+    get ariaSelected(): "true" | "false";
     private _ownAriaSelected;
     /**
      * @deprecated Use `aria-selected="true"` instead

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

@@ -1 +1 @@
-import './tab.js';
+import "./tab.js";

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

@@ -1,25 +1,31 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './tab.js';
-describe('w-tab React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./tab.js";
+describe("w-tab React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tab', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tab", {});
         expect(warnings).toEqual([]);
     });
-    test('with for hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tab', { for: 'panel1' });
+    test("with for hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tab", { for: "panel1" });
         expect(warnings).toEqual([]);
     });
-    test('active tab hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tab', { for: 'panel1', active: true });
+    test("active tab hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tab", {
+            for: "panel1",
+            active: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('with id hydrates without warnings', async () => {
-        const warnings = await testHydration('w-tab', { for: 'panel1', id: 'tab1' });
+    test("with id hydrates without warnings", async () => {
+        const warnings = await testHydration("w-tab", {
+            for: "panel1",
+            id: "tab1",
+        });
         expect(warnings).toEqual([]);
     });
 });