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

package/dist/packages/checkbox/checkbox.react.stories.d.ts

@@ -1,10 +1,10 @@
-import { StoryObj } from '@storybook/react';
-import { Checkbox } from './react';
+import { StoryObj } from "@storybook/react";
+import { Checkbox } from "./react";
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./checkbox").WarpCheckbox, {
-        onChange: string;
-        onchange: string;
+        onChange: import("@lit/react").EventName<import("../types").ChangeEventWithTarget<HTMLInputElement>>;
+        onchange: import("@lit/react").EventName<import("../types").ChangeEventWithTarget<HTMLInputElement>>;
     }>;
 };
 export default _default;

package/dist/packages/checkbox/checkbox.react.stories.js

@@ -1,10 +1,10 @@
-import { Checkbox } from './react';
+import { Checkbox } from "./react";
 export default {
-    title: 'Forms/Checkbox',
+    title: "Forms/Checkbox",
     component: Checkbox,
 };
 export const Primary = {
     args: {
-        children: 'Hello',
+        children: "Hello",
     },
 };

package/dist/packages/checkbox/checkbox.stories.d.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import './checkbox.js';
-import '../checkbox-group/checkbox-group.js';
-import type { WarpCheckbox } from './checkbox.js';
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import "./checkbox.js";
+import "../checkbox-group/checkbox-group.js";
+import type { WarpCheckbox } from "./checkbox.js";
 declare const args: Partial<WarpCheckbox> & {
     [key: string]: any;
 };

package/dist/packages/checkbox/checkbox.stories.js

@@ -1,16 +1,14 @@
-import { spread } from '@open-wc/lit-helpers';
-import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
-import { html } from 'lit';
-import { prespread } from '../../.storybook/utilities.js';
-import './checkbox.js';
-import '../checkbox-group/checkbox-group.js';
-const { events, args, argTypes } = getStorybookHelpers('w-checkbox');
+import { spread } from "@open-wc/lit-helpers";
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
+import { prespread } from "../../.storybook/utilities.js";
+import "./checkbox.js";
+import "../checkbox-group/checkbox-group.js";
+const { events, args, argTypes } = getStorybookHelpers("w-checkbox");
 const meta = {
-    title: 'Forms/Checkbox',
+    title: "Forms/Checkbox",
     render(args) {
-        return html `
-      <w-checkbox ${spread(prespread(args))}>Check me</w-checkbox>
-    `;
+        return html ` <w-checkbox ${spread(prespread(args))}>Check me</w-checkbox> `;
     },
     args,
     argTypes,
@@ -24,30 +22,30 @@ export default meta;
 export const Default = {};
 export const Invalid = {
     args: {
-        name: 'invalidfoo',
-        value: 'bar',
+        name: "invalidfoo",
+        value: "bar",
         invalid: true,
     },
 };
 export const Indeterminate = {
     args: {
-        name: 'indeterminatefoo',
-        value: 'bar',
+        name: "indeterminatefoo",
+        value: "bar",
         indeterminate: true,
     },
 };
 export const IndeterminateError = {
     args: {
-        name: 'indeterminateerrorfoo',
-        value: 'bar',
+        name: "indeterminateerrorfoo",
+        value: "bar",
         indeterminate: true,
         invalid: true,
     },
 };
 export const IndeterminateDisabled = {
     args: {
-        name: 'indeterminatedisabledfoo',
-        value: 'bar',
+        name: "indeterminatedisabledfoo",
+        value: "bar",
         indeterminate: true,
         disabled: true,
     },
@@ -57,127 +55,137 @@ export const CheckboxFormAssociated = {
         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);
-            status.textContent = `Submitted value: ${data.get('newsletter') ?? 'none'}`;
+            status.textContent = `Submitted value: ${data.get("newsletter") ?? "none"}`;
         };
         const handleInvalid = (event) => {
             event.preventDefault();
             const target = event.currentTarget;
-            const form = target.closest('form');
-            const status = form?.querySelector('[data-status]');
+            const form = target.closest("form");
+            const status = form?.querySelector("[data-status]");
             if (status)
-                status.textContent = 'Invalid: please check the box.';
+                status.textContent = "Invalid: please check the box.";
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px;">
-        <w-checkbox name="newsletter" value="yes" required @invalid=${handleInvalid}>
-          Sign up for updates
-        </w-checkbox>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form @submit=${handleSubmit} style="display: grid; gap: 12px;">
+				<w-checkbox
+					name="newsletter"
+					value="yes"
+					required
+					@invalid=${handleInvalid}
+				>
+					Sign up for updates
+				</w-checkbox>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };
 export const Disabled = {
     args: {
-        name: 'disabledfoo',
-        value: 'bar',
+        name: "disabledfoo",
+        value: "bar",
         disabled: true,
     },
 };
 export const CheckboxGroup = {
     render: () => html `
-    <w-checkbox-group name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupWithHelpText = {
     render: () => html `
-    <w-checkbox-group help-text="Select all that apply" name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group help-text="Select all that apply" name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupWithLabel = {
     render: () => html `
-    <w-checkbox-group label="Label" name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group label="Label" name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupWithHelpTextAndLabel = {
     render: () => html `
-    <w-checkbox-group label="Label" help-text="help text" name="group" >
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group label="Label" help-text="help text" name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupWithOptional = {
     render: () => html `
-    <w-checkbox-group label="Label" optional help-text="help text" name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group label="Label" optional help-text="help text" name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupWithInvalid = {
     render: () => html `
-    <w-checkbox-group label="Label" invalid help-text="help text" name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group label="Label" invalid help-text="help text" name="group">
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupRequired = {
     render: () => html `
-    <w-checkbox-group label="Preferences" required help-text="Help text" name="group">
-      <w-checkbox value="foo">Foo</w-checkbox>
-      <w-checkbox value="bar">Bar</w-checkbox>
-      <w-checkbox value="baz">Baz</w-checkbox>
-    </w-checkbox-group>
-  `,
+		<w-checkbox-group
+			label="Preferences"
+			required
+			help-text="Help text"
+			name="group"
+		>
+			<w-checkbox value="foo">Foo</w-checkbox>
+			<w-checkbox value="bar">Bar</w-checkbox>
+			<w-checkbox value="baz">Baz</w-checkbox>
+		</w-checkbox-group>
+	`,
 };
 export const CheckboxGroupFormAssociated = {
     render: () => {
         const handleSubmit = (event) => {
             event.preventDefault();
             const form = event.currentTarget;
-            const status = form.querySelector('[data-status]');
+            const status = form.querySelector("[data-status]");
             if (status)
-                status.textContent = 'Submitted.';
+                status.textContent = "Submitted.";
         };
         const handleInvalid = (event) => {
             const target = event.currentTarget;
-            const form = target.closest('form');
-            const status = form?.querySelector('[data-status]');
+            const form = target.closest("form");
+            const status = form?.querySelector("[data-status]");
             if (status)
-                status.textContent = 'Invalid: select at least one option.';
+                status.textContent = "Invalid: select at least one option.";
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px;">
-        <w-checkbox-group
-          label="Preferences"
-          required
-          name="group"
-          help-text="Choose an option"
-          @invalid=${handleInvalid}
-        >
-          <w-checkbox value="foo">Foo</w-checkbox>
-          <w-checkbox value="bar">Bar</w-checkbox>
-          <w-checkbox value="baz">Baz</w-checkbox>
-        </w-checkbox-group>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form @submit=${handleSubmit} style="display: grid; gap: 12px;">
+				<w-checkbox-group
+					label="Preferences"
+					required
+					name="group"
+					help-text="Choose an option"
+					@invalid=${handleInvalid}
+				>
+					<w-checkbox value="foo">Foo</w-checkbox>
+					<w-checkbox value="bar">Bar</w-checkbox>
+					<w-checkbox value="baz">Baz</w-checkbox>
+				</w-checkbox-group>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };

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

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

package/dist/packages/checkbox/checkbox.test.js

@@ -1,44 +1,44 @@
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { server, userEvent } from 'vitest/browser';
-import { render } from 'vitest-browser-lit';
-import './checkbox.js';
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { server, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-lit";
+import "./checkbox.js";
 const getInput = (el) => el.shadowRoot?.querySelector('input[type="checkbox"]');
-test('toggles checked on click and dispatches change', async () => {
+test("toggles checked on click and dispatches change", async () => {
     render(html `<w-checkbox>Check me</w-checkbox>`);
-    const wCheckbox = document.querySelector('w-checkbox');
+    const wCheckbox = document.querySelector("w-checkbox");
     const onChange = vi.fn();
-    wCheckbox.addEventListener('change', onChange);
+    wCheckbox.addEventListener("change", onChange);
     await wCheckbox.updateComplete;
     wCheckbox.click();
     await wCheckbox.updateComplete;
     expect(wCheckbox.checked).toBe(true);
     expect(onChange).toHaveBeenCalledTimes(1);
 });
-test('associates value with form when checked', async () => {
+test("associates value with form when checked", async () => {
     render(html `
-    <form data-testid="form">
-      <w-checkbox name="newsletter" value="yes" checked>Sign up</w-checkbox>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wCheckbox = document.querySelector('w-checkbox');
+		<form data-testid="form">
+			<w-checkbox name="newsletter" value="yes" checked>Sign up</w-checkbox>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wCheckbox = document.querySelector("w-checkbox");
     await wCheckbox.updateComplete;
     let data = new FormData(form);
-    expect(data.get('newsletter')).toBe('yes');
+    expect(data.get("newsletter")).toBe("yes");
     wCheckbox.checked = false;
     await wCheckbox.updateComplete;
     data = new FormData(form);
-    expect(data.get('newsletter')).toBeNull();
+    expect(data.get("newsletter")).toBeNull();
 });
-test('resets to defaultChecked on form reset', async () => {
+test("resets to defaultChecked on form reset", async () => {
     render(html `
-    <form>
-      <w-checkbox name="updates" value="yes" checked>Updates</w-checkbox>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wCheckbox = document.querySelector('w-checkbox');
+		<form>
+			<w-checkbox name="updates" value="yes" checked>Updates</w-checkbox>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wCheckbox = document.querySelector("w-checkbox");
     await wCheckbox.updateComplete;
     wCheckbox.click();
     await wCheckbox.updateComplete;
@@ -47,53 +47,53 @@ test('resets to defaultChecked on form reset', async () => {
     await wCheckbox.updateComplete;
     expect(wCheckbox.checked).toBe(true);
 });
-test('required checkbox reports validity based on checked state', async () => {
+test("required checkbox reports validity based on checked state", async () => {
     render(html `<w-checkbox name="terms" required>Accept</w-checkbox>`);
-    const wCheckbox = document.querySelector('w-checkbox');
+    const wCheckbox = document.querySelector("w-checkbox");
     await expect.poll(() => wCheckbox.checkValidity()).toBe(false);
     expect(wCheckbox.validity.valueMissing).toBe(true);
-    expect(wCheckbox.validationMessage).not.toBe('');
+    expect(wCheckbox.validationMessage).not.toBe("");
     wCheckbox.checked = true;
     await wCheckbox.updateComplete;
     await expect.poll(() => wCheckbox.checkValidity()).toBe(true);
     expect(wCheckbox.validity.valid).toBe(true);
 });
-test('required checkbox shows invalid state after submit and clears after selection', async () => {
+test("required checkbox shows invalid state after submit and clears after selection", async () => {
     render(html `
-    <form>
-      <w-checkbox name="terms" required>Accept</w-checkbox>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wCheckbox = document.querySelector('w-checkbox');
+		<form>
+			<w-checkbox name="terms" required>Accept</w-checkbox>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wCheckbox = document.querySelector("w-checkbox");
     const submit = document.querySelector('button[type="submit"]');
     await wCheckbox.updateComplete;
-    expect(wCheckbox.hasAttribute('invalid')).toBe(false);
+    expect(wCheckbox.hasAttribute("invalid")).toBe(false);
     submit.click();
     await wCheckbox.updateComplete;
     await expect.poll(() => form.checkValidity()).toBe(false);
-    expect(wCheckbox.hasAttribute('invalid')).toBe(true);
+    expect(wCheckbox.hasAttribute("invalid")).toBe(true);
     wCheckbox.click();
     await wCheckbox.updateComplete;
     await expect.poll(() => form.checkValidity()).toBe(true);
-    expect(wCheckbox.hasAttribute('invalid')).toBe(false);
+    expect(wCheckbox.hasAttribute("invalid")).toBe(false);
 });
-test('participates in form submission and blocks submit when required', async () => {
+test("participates in form submission and blocks submit when required", async () => {
     render(html `
-    <form>
-      <w-checkbox name="newsletter" value="yes" required>Sign up</w-checkbox>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const wCheckbox = document.querySelector('w-checkbox');
+		<form>
+			<w-checkbox name="newsletter" value="yes" required>Sign up</w-checkbox>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const wCheckbox = document.querySelector("w-checkbox");
     const submit = document.querySelector('button[type="submit"]');
     const onSubmit = vi.fn(() => {
         const data = new FormData(form);
-        expect(data.get('newsletter')).toBe('yes');
+        expect(data.get("newsletter")).toBe("yes");
     });
-    form.addEventListener('submit', (event) => {
+    form.addEventListener("submit", (event) => {
         if (!form.checkValidity()) {
             event.preventDefault();
             return;
@@ -113,9 +113,9 @@ test('participates in form submission and blocks submit when required', async ()
     await expect.poll(() => form.checkValidity()).toBe(true);
     expect(onSubmit).toHaveBeenCalledTimes(1);
 });
-test('clears indeterminate on click', async () => {
+test("clears indeterminate on click", async () => {
     render(html `<w-checkbox indeterminate>Partial</w-checkbox>`);
-    const wCheckbox = document.querySelector('w-checkbox');
+    const wCheckbox = document.querySelector("w-checkbox");
     await wCheckbox.updateComplete;
     expect(wCheckbox.indeterminate).toBe(true);
     const input = getInput(wCheckbox);
@@ -126,11 +126,11 @@ test('clears indeterminate on click', async () => {
     expect(wCheckbox.indeterminate).toBe(false);
     expect(wCheckbox.checked).toBe(true);
 });
-test('does not toggle or emit change when disabled', async () => {
+test("does not toggle or emit change when disabled", async () => {
     render(html `<w-checkbox disabled>Disabled</w-checkbox>`);
-    const wCheckbox = document.querySelector('w-checkbox');
+    const wCheckbox = document.querySelector("w-checkbox");
     const onChange = vi.fn();
-    wCheckbox.addEventListener('change', onChange);
+    wCheckbox.addEventListener("change", onChange);
     await wCheckbox.updateComplete;
     expect(wCheckbox.checked).toBe(false);
     const input = getInput(wCheckbox);
@@ -142,21 +142,21 @@ test('does not toggle or emit change when disabled', async () => {
     expect(onChange).not.toHaveBeenCalled();
 });
 /* Manual test in Safari has this working as expected, but the test fails for some reason */
-test.skipIf(server.browser === 'webkit')('submits the associated form when checkbox has focus and user presses Enter', async () => {
+test.skipIf(server.browser === "webkit")("submits the associated form when checkbox has focus and user presses Enter", async () => {
     const screen = render(html `
-    <form>
-      <w-checkbox data-testid="checkbox" name="terms">Accept</w-checkbox>
-      <button type="submit">Submit</button>
-    </form>
-  `);
+			<form>
+				<w-checkbox data-testid="checkbox" name="terms">Accept</w-checkbox>
+				<button type="submit">Submit</button>
+			</form>
+		`);
     const onSubmit = vi.fn();
-    const form = document.querySelector('form');
-    form.addEventListener('submit', (event) => {
+    const form = document.querySelector("form");
+    form.addEventListener("submit", (event) => {
         event.preventDefault();
         onSubmit();
     });
-    await userEvent.click(screen.getByTestId('checkbox'));
-    await userEvent.keyboard('{Space}');
-    await userEvent.keyboard('{Enter}');
+    await userEvent.click(screen.getByTestId("checkbox"));
+    await userEvent.keyboard("{Space}");
+    await userEvent.keyboard("{Enter}");
     expect(onSubmit).toHaveBeenCalled();
 });

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

@@ -1,5 +1,14 @@
-import { WarpCheckbox } from './checkbox.js';
+import { EventName } from "@lit/react";
+import type { WarpCheckbox } from "./checkbox.js";
+import type { ChangeEventWithTarget } from "../types.js";
+/**
+ * Checkboxes allow users to select one or more options from a number of choices.
+ *
+ * Wrap individual checkboxes in a checkbox group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
+ */
 export declare const Checkbox: import("@lit/react").ReactWebComponent<WarpCheckbox, {
-    onChange: string;
-    onchange: string;
+    onChange: EventName<ChangeEventWithTarget<HTMLInputElement>>;
+    onchange: EventName<ChangeEventWithTarget<HTMLInputElement>>;
 }>;

package/dist/packages/checkbox/react.js

@@ -1,15 +1,22 @@
-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 {
 }
+/**
+ * Checkboxes allow users to select one or more options from a number of choices.
+ *
+ * Wrap individual checkboxes in a checkbox group.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)
+ */
 export const Checkbox = createComponent({
-    tagName: 'w-checkbox',
+    tagName: "w-checkbox",
     elementClass: Component,
     react: React,
     events: {
-        onChange: 'change',
-        onchange: 'change',
+        onChange: "change",
+        onchange: "change",
     },
 });