@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { Radio } from './react';
+import { StoryObj } from "@storybook/react";
+import { Radio } from "./react";
 declare const _default: {
     title: string;
     component: import("@lit/react").ReactWebComponent<import("./radio").WarpRadio, {}>;

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

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

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

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

package/dist/packages/radio/radio.stories.js

@@ -1,26 +1,27 @@
-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 './radio.js';
-import '../radio-group/radio-group.js';
-const { args } = getStorybookHelpers('w-radio-group');
+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 "./radio.js";
+import "../radio-group/radio-group.js";
+const { args } = getStorybookHelpers("w-radio-group");
 const meta = {
-    title: 'Forms/Radio',
+    title: "Forms/Radio",
     render: (args) => {
         return html `
-      <w-radio-group ${spread(prespread(args))}>
-        <w-radio value="foo" checked>foo</w-radio>
-        <w-radio value="bar">bar</w-radio>
-      </w-radio-group>
-    `;
+			<w-radio-group ${spread(prespread(args))}>
+				<w-radio value="foo" checked>foo</w-radio>
+				<w-radio value="bar">bar</w-radio>
+			</w-radio-group>
+		`;
     },
+    args,
 };
 export default meta;
 export const Default = {
     args: {
-        label: 'Group',
-        name: 'foobar',
+        label: "Group",
+        name: "foobar",
     },
 };
 export const SingleRadioDefault = {
@@ -32,13 +33,17 @@ export const SingleRadioDefault = {
 export const SingleRadioInvalid = {
     args: {},
     render() {
-        return html ` <w-radio value="single" invalid>Single invalid radio</w-radio> `;
+        return html `
+			<w-radio value="single" invalid>Single invalid radio</w-radio>
+		`;
     },
 };
 export const SingleRadioDisabled = {
     args: {},
     render() {
-        return html ` <w-radio value="single" disabled>Single disabled radio</w-radio> `;
+        return html `
+			<w-radio value="single" disabled>Single disabled radio</w-radio>
+		`;
     },
 };
 export const SingleRadioFormAssociated = {
@@ -47,46 +52,51 @@ export const SingleRadioFormAssociated = {
         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 select the radio.';
+                status.textContent = "Invalid: please select the radio.";
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px;">
-        <w-radio name="newsletter" value="yes" required @invalid=${handleInvalid}>
-          Sign up for updates
-        </w-radio>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form @submit=${handleSubmit} style="display: grid; gap: 12px;">
+				<w-radio
+					name="newsletter"
+					value="yes"
+					required
+					@invalid=${handleInvalid}
+				>
+					Sign up for updates
+				</w-radio>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };
 export const StandaloneRadioGroupByName = {
     args: {},
     render() {
         return html `
-      <div style="display: grid; gap: 12px;">
-        <w-radio name="standalone" value="one">Standalone one</w-radio>
-        <w-radio name="standalone" value="two">Standalone two</w-radio>
-      </div>
-    `;
+			<div style="display: grid; gap: 12px;">
+				<w-radio name="standalone" value="one">Standalone one</w-radio>
+				<w-radio name="standalone" value="two">Standalone two</w-radio>
+			</div>
+		`;
     },
 };
 export const Disabled = {
     args: {
-        name: 'disabled',
-        label: 'Disabled',
+        name: "disabled",
+        label: "Disabled",
         disabled: true,
     },
 };
@@ -94,130 +104,130 @@ export const Required = {
     args: {},
     render() {
         return html `
-      <form>
-        <w-radio-group required name="required">
-          <w-radio value="foo">foo</w-radio>
-          <w-radio value="bar">bar</w-radio>
-        </w-radio-group>
-        <button style="margin-top: 16px;">click me</button>
-      </form>
-    `;
+			<form>
+				<w-radio-group required name="required">
+					<w-radio value="foo">foo</w-radio>
+					<w-radio value="bar">bar</w-radio>
+				</w-radio-group>
+				<button style="margin-top: 16px;">click me</button>
+			</form>
+		`;
     },
 };
 export const DisabledGroup = {
     args: {
-        name: 'disabled group',
+        name: "disabled group",
         disabled: true,
-        helpText: 'This group is disabled',
+        helpText: "This group is disabled",
     },
 };
 export const DisabledRadio = {
     args: {},
     render() {
         return html `
-      <w-radio-group name="disabled radio">
-        <w-radio value="foo" disabled>disabled</w-radio>
-        <w-radio value="bar">not disabled</w-radio>
-      </w-radio-group>
-    `;
+			<w-radio-group name="disabled radio">
+				<w-radio value="foo" disabled>disabled</w-radio>
+				<w-radio value="bar">not disabled</w-radio>
+			</w-radio-group>
+		`;
     },
 };
 export const HelpText = {
     args: {
-        label: 'Help text',
-        helpText: 'Pick one option',
-        name: 'help-text',
+        label: "Help text",
+        helpText: "Pick one option",
+        name: "help-text",
     },
 };
 export const Optional = {
     args: {
-        label: 'Optional',
+        label: "Optional",
         optional: true,
-        helpText: 'This is optional',
-        name: 'optional',
+        helpText: "This is optional",
+        name: "optional",
     },
 };
 export const RadioGroup = {
     render: () => html `
-    <w-radio-group name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupWithHelpText = {
     render: () => html `
-    <w-radio-group help-text="Select one" name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group help-text="Select one" name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupWithLabel = {
     render: () => html `
-    <w-radio-group label="Label" name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group label="Label" name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupWithHelpTextAndLabel = {
     render: () => html `
-    <w-radio-group label="Label" help-text="help text" name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group label="Label" help-text="help text" name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupWithOptional = {
     render: () => html `
-    <w-radio-group label="Label" optional help-text="help text" name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group label="Label" optional help-text="help text" name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupWithInvalid = {
     render: () => html `
-    <w-radio-group label="Label" invalid help-text="help text" name="group">
-      <w-radio value="foo">Foo</w-radio>
-      <w-radio value="bar">Bar</w-radio>
-    </w-radio-group>
-  `,
+		<w-radio-group label="Label" invalid help-text="help text" name="group">
+			<w-radio value="foo">Foo</w-radio>
+			<w-radio value="bar">Bar</w-radio>
+		</w-radio-group>
+	`,
 };
 export const RadioGroupRequired = {
     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 an option.';
+                status.textContent = "Invalid: select an option.";
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px;">
-        <w-radio-group
-          label="Preferences"
-          required
-          name="group"
-          help-text="Choose an option"
-          @invalid=${handleInvalid}
-        >
-          <w-radio value="foo">Foo</w-radio>
-          <w-radio value="bar">Bar</w-radio>
-          <w-radio value="baz">Baz</w-radio>
-        </w-radio-group>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form @submit=${handleSubmit} style="display: grid; gap: 12px;">
+				<w-radio-group
+					label="Preferences"
+					required
+					name="group"
+					help-text="Choose an option"
+					@invalid=${handleInvalid}
+				>
+					<w-radio value="foo">Foo</w-radio>
+					<w-radio value="bar">Bar</w-radio>
+					<w-radio value="baz">Baz</w-radio>
+				</w-radio-group>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };
 export const RadioGroupFormAssociated = {
@@ -225,51 +235,57 @@ export const RadioGroupFormAssociated = {
         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 an option.';
+                status.textContent = "Invalid: select an option.";
         };
         return html `
-      <form @submit=${handleSubmit} style="display: grid; gap: 12px;">
-        <w-radio-group name="radio group form associated" label="Preferences" name="group" help-text="Choose an option" @invalid=${handleInvalid}>
-          <w-radio value="foo" checked>Foo</w-radio>
-          <w-radio value="bar">Bar</w-radio>
-          <w-radio value="baz">Baz</w-radio>
-        </w-radio-group>
-        <button type="submit">Submit</button>
-        <div data-status aria-live="polite"></div>
-      </form>
-    `;
+			<form @submit=${handleSubmit} style="display: grid; gap: 12px;">
+				<w-radio-group
+					name="radio group form associated"
+					label="Preferences"
+					name="group"
+					help-text="Choose an option"
+					@invalid=${handleInvalid}
+				>
+					<w-radio value="foo" checked>Foo</w-radio>
+					<w-radio value="bar">Bar</w-radio>
+					<w-radio value="baz">Baz</w-radio>
+				</w-radio-group>
+				<button type="submit">Submit</button>
+				<div data-status aria-live="polite"></div>
+			</form>
+		`;
     },
 };
 export const InvalidWithMessage = {
     args: {},
     render() {
         return html `
-      <w-radio-group name="invalid group" label="Invalid group" invalid>
-        <w-radio value="foo">foo</w-radio>
-        <w-radio value="bar">bar</w-radio>
-      </w-radio-group>
-    `;
+			<w-radio-group name="invalid group" label="Invalid group" invalid>
+				<w-radio value="foo">foo</w-radio>
+				<w-radio value="bar">bar</w-radio>
+			</w-radio-group>
+		`;
     },
 };
 export const SlottedLabelAndHint = {
     args: {},
     render() {
         return html `
-      <w-radio-group name="slotted label and hint">
-        <span slot="label">Slotted label</span>
-        <span slot="help-text">Slotted hint text</span>
-        <w-radio value="foo">foo</w-radio>
-        <w-radio value="bar">bar</w-radio>
-      </w-radio-group>
-    `;
+			<w-radio-group name="slotted label and hint">
+				<span slot="label">Slotted label</span>
+				<span slot="help-text">Slotted hint text</span>
+				<w-radio value="foo">foo</w-radio>
+				<w-radio value="bar">bar</w-radio>
+			</w-radio-group>
+		`;
     },
 };

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

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