@warp-ds/elements 2.8.1-next.4 → 2.8.1

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

@@ -1,3 +1,4 @@
+import { html } from 'lit';
 import './switch.js';
 const meta = {
     title: 'Forms/Switch',
@@ -33,3 +34,53 @@ export const DisabledChecked = {
         disabled: true,
     },
 };
+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>
+  `,
+};
+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>
+  `,
+};
+export const SwitchFormAssociated = {
+    render: () => {
+        const handleSubmit = (event) => {
+            event.preventDefault();
+            const form = event.currentTarget;
+            const status = form.querySelector('[data-status]');
+            if (!status)
+                return;
+            const data = new FormData(form);
+            const name = 'notifications';
+            const value = data.get(name);
+            status.textContent =
+                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>
+    `;
+    },
+};

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

@@ -38,3 +38,38 @@ test('can reset switch by resetting surrounding form', async () => {
     const data3 = new FormData(form);
     expect(Array.from(data3.entries()).length).toBe(1);
 });
+test('mouse click toggles switch once', async () => {
+    render(html `<w-switch aria-label="Enable notifications"></w-switch>`);
+    const wSwitch = document.querySelector('w-switch');
+    await wSwitch.updateComplete;
+    const button = wSwitch.shadowRoot.querySelector('button');
+    expect(wSwitch.checked).toBe(false);
+    expect(wSwitch.getAttribute('aria-checked')).toBe('false');
+    button.click();
+    await wSwitch.updateComplete;
+    expect(wSwitch.checked).toBe(true);
+    expect(wSwitch.getAttribute('aria-checked')).toBe('true');
+});
+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');
+    await wSwitch.updateComplete;
+    expect(wSwitch.checked).toBe(false);
+    expect(wSwitch.getAttribute('aria-checked')).toBe('false');
+    label.click();
+    await wSwitch.updateComplete;
+    expect(wSwitch.checked).toBe(true);
+    expect(wSwitch.getAttribute('aria-checked')).toBe('true');
+    label.click();
+    await wSwitch.updateComplete;
+    expect(wSwitch.checked).toBe(false);
+    expect(wSwitch.getAttribute('aria-checked')).toBe('false');
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.8.1-next.3",
+  "version": "2.8.1-next.5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1185,42 +1185,32 @@
         },
         {
           "name": "w-radio-group",
-          "description": "\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio group.\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
+          "description": "\n---\n\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.\n- **help-text** - Alternative to the `help-text` attribute should you need custom HTML.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "label",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-              "value": { "type": "string", "default": "''" }
-            },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "help-text",
-              "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "optional",
-              "description": "Optional indicator for the label.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "invalid",
-              "description": "Marks the radio group as invalid.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "name",
-              "description": "The name of the radio group",
               "value": { "type": "string | null", "default": "null" }
             },
             {
               "name": "disabled",
-              "description": "Disables the radio group and all child radios.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -1238,45 +1228,14 @@
           "js": {
             "properties": [
               { "name": "hasInteracted", "type": "boolean" },
-              {
-                "name": "label",
-                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-                "type": "string"
-              },
-              {
-                "name": "helpText",
-                "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "optional",
-                "description": "Optional indicator for the label.",
-                "type": "boolean"
-              },
-              {
-                "name": "invalid",
-                "description": "Marks the radio group as invalid.",
-                "type": "boolean"
-              },
-              {
-                "name": "name",
-                "description": "The name of the radio group",
-                "type": "string | null"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the radio group and all child radios.",
-                "type": "boolean"
-              },
-              {
-                "name": "required",
-                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
-                "type": "boolean"
-              },
-              {
-                "name": "validationTarget",
-                "description": "We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on\nthe first radio element."
-              }
+              { "name": "label", "type": "string" },
+              { "name": "helpText", "type": "string" },
+              { "name": "optional", "type": "boolean" },
+              { "name": "invalid", "type": "boolean" },
+              { "name": "name", "type": "string | null" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              { "name": "validationTarget" }
             ],
             "events": []
           }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.8.1-next.4",
+  "version": "2.8.1",
   "packageManager": "pnpm@10.30.3",
   "description": "Custom elements for Warp",
   "exports": {