@justeattakeaway/pie-switch 0.28.0 → 0.29.0

package/dist/index.js

@@ -565,11 +565,9 @@ class p extends At(It(xt)) {
   renderSwitchLabel() {
     const { label: n, labelPlacement: c } = this;
     return n ? A`
-                <label
-                    for="switch"
-                    data-test-id="switch-label-${c}">
+                <span data-test-id="switch-label-${c}">
                     ${n}
-                </label>` : A``;
+                </span>` : A``;
   }
   render() {
     const {
@@ -581,17 +579,16 @@ class p extends At(It(xt)) {
       isRTL: k
     } = this, M = "switch-description";
     return A`
-            <div
+            <label
                 class="c-switch-wrapper"
                 ?isRTL=${k}
                 ?disabled=${w}>
                 ${n === "leading" ? this.renderSwitchLabel() : x}
-                <label
+                <div
                     data-test-id="switch-component"
                     class="c-switch"
                     ?checked=${h}>
                     <input
-                        id="switch"
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
@@ -605,10 +602,10 @@ class p extends At(It(xt)) {
                     <div class="c-switch-control">
                         ${h ? A`<icon-check></icon-check>` : x}
                     </div>
-                </label>
-                ${c != null && c.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : x}
+                </div>
                 ${n === "trailing" ? this.renderSwitchLabel() : x}
-            </div>
+                ${c != null && c.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : x}
+            </label>
         `;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -12,6 +12,9 @@
     "dist",
     "**/*.d.ts"
   ],
+  "pieMetadata": {
+    "componentStatus": "alpha"
+  },
   "scripts": {
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",

package/src/index.ts

@@ -158,11 +158,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
 
         if (label) {
             return html`
-                <label
-                    for="switch"
-                    data-test-id="switch-label-${labelPlacement}">
+                <span data-test-id="switch-label-${labelPlacement}">
                     ${label}
-                </label>`;
+                </span>`;
         }
 
         return html``;
@@ -181,17 +179,16 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         const switchId = 'switch-description';
 
         return html`
-            <div
+            <label
                 class="c-switch-wrapper"
                 ?isRTL=${isRTL}
                 ?disabled=${disabled}>
                 ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
-                <label
+                <div
                     data-test-id="switch-component"
                     class="c-switch"
                     ?checked=${checked}>
                     <input
-                        id="switch"
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
@@ -205,10 +202,10 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
                     <div class="c-switch-control">
                         ${checked ? html`<icon-check></icon-check>` : nothing}
                     </div>
-                </label>
-                ${aria?.describedBy ? html`<div id="${switchId}" data-test-id="${switchId}" class="c-switch-description">${aria?.describedBy}</div>` : nothing}
+                </div>
                 ${labelPlacement === 'trailing' ? this.renderSwitchLabel() : nothing}
-            </div>
+                ${aria?.describedBy ? html`<div id="${switchId}" data-test-id="${switchId}" class="c-switch-description">${aria?.describedBy}</div>` : nothing}
+            </label>
         `;
     }
 }