@justeattakeaway/pie-switch 0.29.12 → 0.30.0

package/custom-elements.json

@@ -35,7 +35,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    checked: false,\n    required: false,\n    disabled: false,\n    value: 'on',\n    labelPlacement: 'leading',\n}"
+          "default": "{\r\n    checked: false,\r\n    disabled: false,\r\n    labelPlacement: 'leading',\r\n    required: false,\r\n    value: 'on',\r\n}"
         }
       ],
       "exports": [
@@ -74,19 +74,11 @@
           "description": "",
           "name": "PieSwitch",
           "members": [
-            {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement | undefined"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "SwitchProps['label']"
               },
               "privacy": "public",
               "attribute": "label"
@@ -94,9 +86,6 @@
             {
               "kind": "field",
               "name": "labelPlacement",
-              "type": {
-                "text": "SwitchProps['labelPlacement']"
-              },
               "privacy": "public",
               "attribute": "labelPlacement"
             },
@@ -104,7 +93,7 @@
               "kind": "field",
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "SwitchProps['aria']"
               },
               "privacy": "public",
               "attribute": "aria"
@@ -133,7 +122,7 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "SwitchProps['name']"
               },
               "privacy": "public",
               "attribute": "name"
@@ -145,6 +134,14 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "HTMLInputElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "focusTarget",
@@ -188,7 +185,7 @@
                   "text": ""
                 }
               },
-              "description": "Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"
+              "description": "Returns a boolean value which indicates validity of the value of the component. If the value is invalid, this method also fires the invalid event on the component.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity"
             },
             {
               "kind": "method",
@@ -199,7 +196,7 @@
                   "text": ""
                 }
               },
-              "description": "If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"
+              "description": "If the value is invalid, this method also fires the invalid event on the element, and (if the event isn't canceled) reports the problem to the user.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity"
             },
             {
               "kind": "method",
@@ -218,7 +215,7 @@
                   }
                 }
               ],
-              "description": "Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"
+              "description": "Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity"
             },
             {
               "kind": "field",
@@ -227,7 +224,7 @@
                 "text": "ValidityState"
               },
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
               "readonly": true
             },
             {
@@ -237,19 +234,27 @@
                 "text": "string"
               },
               "privacy": "public",
-              "description": "(Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).\nThis string is empty if the component is valid.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage",
+              "description": "(Read-only) Returns a string representing a localized message that describes the validation constraints that the control does not satisfy (if any).\r\nThis string is empty if the component is valid.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage",
               "readonly": true
             },
             {
               "kind": "method",
               "name": "renderSwitchLabel",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
+              "parameters": [
+                {
+                  "name": "placement",
+                  "type": {
+                    "text": "SwitchProps['labelPlacement']"
+                  }
                 }
-              },
-              "description": "Renders the label for a switch if provided.\nif invalid value is passed, nothing gets rendered"
+              ],
+              "description": "If a label is provided, renders it if `labelPlacement` matches the given position.\r\nIf no label is provided, or `labelPlacement` does not match the given position, nothing is rendered."
+            },
+            {
+              "kind": "method",
+              "name": "renderAriaDescription",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -271,21 +276,18 @@
             {
               "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "SwitchProps['label']"
               },
               "fieldName": "label"
             },
             {
               "name": "labelPlacement",
-              "type": {
-                "text": "SwitchProps['labelPlacement']"
-              },
               "fieldName": "labelPlacement"
             },
             {
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "SwitchProps['aria']"
               },
               "fieldName": "aria"
             },
@@ -304,7 +306,7 @@
             {
               "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "SwitchProps['name']"
               },
               "fieldName": "name"
             },

package/dist/index.d.ts

@@ -4,11 +4,10 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
-import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit-html';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     label?: string;
     describedBy?: string;
 };
@@ -17,8 +16,6 @@ export declare type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit
 
 export declare const defaultProps: DefaultProps;
 
-export declare type LabelPlacement = typeof labelPlacements[number];
-
 export declare const labelPlacements: readonly ["leading", "trailing"];
 
 /**
@@ -33,18 +30,18 @@ export declare const ON_SWITCH_CHANGED_EVENT = "change";
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PIEInputElement {
-    private input?;
-    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
-    protected updated(_changedProperties: PropertyValues<this>): void;
-    label?: string;
-    labelPlacement: SwitchProps['labelPlacement'];
-    aria: AriaProps;
+    label: SwitchProps['label'];
+    labelPlacement: "leading" | "trailing";
+    aria: SwitchProps['aria'];
     checked: boolean;
     required: boolean;
     value: string;
-    name?: string;
+    name: SwitchProps['name'];
     disabled: boolean;
+    private input?;
     focusTarget: HTMLElement;
+    protected firstUpdated(): void;
+    protected updated(): void;
     static styles: CSSResult;
     /**
      * Ensures that the form value and validation state are in sync with the component.
@@ -84,12 +81,13 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
      */
     get validationMessage(): string;
     /**
-     * Renders the label for a switch if provided.
-     * if invalid value is passed, nothing gets rendered
+     * If a label is provided, renders it if `labelPlacement` matches the given position.
+     * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
      *
      * @private
      */
     private renderSwitchLabel;
+    private renderAriaDescription;
     render(): TemplateResult<1>;
 }
 
@@ -119,7 +117,7 @@ export declare interface SwitchProps {
     /**
      * The placement of the label such as leading or trailing
      */
-    labelPlacement?: LabelPlacement;
+    labelPlacement?: typeof labelPlacements[number];
     /**
      * Same as the HTML name attribute - indicates the name of the switch (for use with forms)
      */

package/dist/index.js

@@ -1,18 +1,12 @@
-import { LitElement as Fe, html as A, nothing as C, unsafeCSS as Ae } from "lit";
-import { query as le, property as E } from "lit/decorators.js";
-import { FormControlMixin as Ie, RtlMixin as Se, wrapNativeEvent as Ve, validPropertyValues as Te, defineCustomElement as Le } from "@justeattakeaway/pie-webc-core";
+import { LitElement as xe, nothing as L, html as N, unsafeCSS as Fe } from "lit";
+import { property as E, query as le } from "lit/decorators.js";
+import { classMap as Se } from "lit/directives/class-map.js";
+import { ifDefined as Ie } from "lit/directives/if-defined.js";
+import { FormControlMixin as Ve, RtlMixin as Te, wrapNativeEvent as Le, validPropertyValues as Ne, defineCustomElement as Pe } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[data-is-rtl] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[data-is-rtl] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
-`, Pe = ["leading", "trailing"], ze = "change", x = {
-  checked: !1,
-  required: !1,
-  disabled: !1,
-  value: "on",
-  labelPlacement: "leading"
-};
 (function() {
-  (function(g) {
-    const n = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), V = {
+  (function(v) {
+    const o = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), F = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -56,72 +50,72 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       ariaValueText: "aria-valuetext",
       role: "role"
     }, de = (t, e) => {
-      for (let i in V) {
+      for (let i in F) {
         e[i] = null;
         let a = null;
-        const r = V[i];
+        const r = F[i];
         Object.defineProperty(e, i, {
           get() {
             return a;
           },
-          set(o) {
-            a = o, t.isConnected ? t.setAttribute(r, o) : I.set(t, e);
+          set(s) {
+            a = s, t.isConnected ? t.setAttribute(r, s) : A.set(t, e);
           }
         });
       }
     };
     function K(t) {
-      const e = c.get(t), { form: i } = e;
+      const e = l.get(t), { form: i } = e;
       Z(t, i, e), X(t, e.labels);
     }
     const G = (t, e = !1) => {
       const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
-        acceptNode(o) {
-          return c.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        acceptNode(s) {
+          return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
       let a = i.nextNode();
       const r = !e || t.disabled;
       for (; a; )
         a.formDisabledCallback && r && $(a, t.disabled), a = i.nextNode();
-    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((t) => {
+    }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, S = T() ? new MutationObserver((t) => {
       for (const e of t) {
         const i = e.target;
         if (e.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && G(i)), e.attributeName === "name" && i.constructor.formAssociated) {
-          const a = c.get(i), r = z.get(i);
+          const a = l.get(i), r = z.get(i);
           a.setFormValue(r);
         }
       }
     }) : {};
     function O(t) {
       t.forEach((e) => {
-        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
-        r.forEach((s) => {
+        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), s = Array.from(a);
+        r.forEach((n) => {
           var u;
-          if (c.has(s) && s.constructor.formAssociated && K(s), I.has(s)) {
-            const d = I.get(s);
-            Object.keys(V).filter((f) => d[f] !== null).forEach((f) => {
-              s.setAttribute(V[f], d[f]);
-            }), I.delete(s);
+          if (l.has(n) && n.constructor.formAssociated && K(n), A.has(n)) {
+            const d = A.get(n);
+            Object.keys(F).filter((f) => d[f] !== null).forEach((f) => {
+              n.setAttribute(F[f], d[f]);
+            }), A.delete(n);
           }
-          if (S.has(s)) {
-            const d = S.get(s);
-            s.setAttribute("internals-valid", d.validity.valid.toString()), s.setAttribute("internals-invalid", (!d.validity.valid).toString()), s.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(s);
+          if (x.has(n)) {
+            const d = x.get(n);
+            n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), x.delete(n);
           }
-          if (s.localName === "form") {
-            const d = y.get(s), v = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+          if (n.localName === "form") {
+            const d = y.get(n), b = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
               acceptNode(W) {
-                return c.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let f = v.nextNode();
+            let f = b.nextNode();
             for (; f; )
-              K(f), f = v.nextNode();
+              K(f), f = b.nextNode();
           }
-          s.localName === "fieldset" && ((u = T.observe) === null || u === void 0 || u.call(T, s, Y), G(s, !0));
-        }), o.forEach((s) => {
-          const u = c.get(s);
-          u && h.get(u) && J(u), M.has(s) && M.get(s).disconnect();
+          n.localName === "fieldset" && ((u = S.observe) === null || u === void 0 || u.call(S, n, Y), G(n, !0));
+        }), s.forEach((n) => {
+          const u = l.get(n);
+          u && h.get(u) && J(u), P.has(n) && P.get(n).disconnect();
         });
       });
     }
@@ -130,7 +124,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         const { removedNodes: i } = e;
         i.forEach((a) => {
           const r = U.get(e.target);
-          c.has(a) && te(a), r.disconnect();
+          l.has(a) && te(a), r.disconnect();
         });
       });
     }
@@ -139,7 +133,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       const a = new MutationObserver(he);
       !((e = window == null ? void 0 : window.ShadyDOM) === null || e === void 0) && e.inUse && t.mode && t.host && (t = t.host), (i = a.observe) === null || i === void 0 || i.call(a, t, { childList: !0 }), U.set(t, a);
     };
-    P() && new MutationObserver(O);
+    T() && new MutationObserver(O);
     const _ = {
       childList: !0,
       subtree: !0
@@ -154,20 +148,20 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       return i.type = "hidden", i.name = t.getAttribute("name"), t.after(i), h.get(e).push(i), i;
     }, pe = (t, e) => {
       var i;
-      h.set(e, []), (i = T.observe) === null || i === void 0 || i.call(T, t, Y);
+      h.set(e, []), (i = S.observe) === null || i === void 0 || i.call(S, t, Y);
     }, X = (t, e) => {
       if (e.length) {
         Array.from(e).forEach((a) => a.addEventListener("click", t.click.bind(t)));
         let i = e[0].id;
         e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
       }
-    }, L = (t) => {
-      const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = y.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => c.get(o).validity.valid), r = [...e, ...a].includes(!1);
+    }, I = (t) => {
+      const e = Array.from(t.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = y.get(t) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), r = [...e, ...a].includes(!1);
       t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
     }, fe = (t) => {
-      L(N(t.target));
+      I(V(t.target));
     }, me = (t) => {
-      L(N(t.target));
+      I(V(t.target));
     }, we = (t) => {
       const e = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${t.id ? `,${i}[form='${t.id}']` : ""}`).join(",");
       t.addEventListener("click", (i) => {
@@ -175,7 +169,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
           const r = y.get(t);
           if (t.noValidate)
             return;
-          r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          r.size && Array.from(r).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
     }, be = (t) => {
@@ -194,26 +188,26 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         }
         k.set(e, { ref: t, internals: i }), t.constructor.formAssociated && t.formAssociatedCallback && setTimeout(() => {
           t.formAssociatedCallback.apply(t, [e]);
-        }, 0), L(e);
+        }, 0), I(e);
       }
-    }, N = (t) => {
+    }, V = (t) => {
       let e = t.parentNode;
-      return e && e.tagName !== "FORM" && (e = N(e)), e;
-    }, b = (t, e, i = DOMException) => {
+      return e && e.tagName !== "FORM" && (e = V(e)), e;
+    }, w = (t, e, i = DOMException) => {
       if (!t.constructor.formAssociated)
         throw new i(e);
     }, ee = (t, e, i) => {
       const a = y.get(t);
       return a && a.size && a.forEach((r) => {
-        c.get(r)[i]() || (e = !1);
+        l.get(r)[i]() || (e = !1);
       }), e;
     }, te = (t) => {
       if (t.constructor.formAssociated) {
-        const e = c.get(t), { labels: i, form: a } = e;
+        const e = l.get(t), { labels: i, form: a } = e;
         X(t, i), Z(t, a, e);
       }
     };
-    function P() {
+    function T() {
       return typeof MutationObserver < "u";
     }
     class ve {
@@ -221,7 +215,7 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
       }
     }
-    const ge = (t) => (t.badInput = !1, t.customError = !1, t.patternMismatch = !1, t.rangeOverflow = !1, t.rangeUnderflow = !1, t.stepMismatch = !1, t.tooLong = !1, t.tooShort = !1, t.typeMismatch = !1, t.valid = !0, t.valueMissing = !1, t), ye = (t, e, i) => (t.valid = Ee(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && L(i), t), Ee = (t) => {
+    const ge = (t) => (t.badInput = !1, t.customError = !1, t.patternMismatch = !1, t.rangeOverflow = !1, t.rangeUnderflow = !1, t.stepMismatch = !1, t.tooLong = !1, t.tooShort = !1, t.typeMismatch = !1, t.valid = !0, t.valueMissing = !1, t), ye = (t, e, i) => (t.valid = Ee(e), Object.keys(e).forEach((a) => t[a] = e[a]), i && I(i), t), Ee = (t) => {
       let e = !0;
       for (let i in t)
         i !== "valid" && t[i] !== !1 && (e = !1);
@@ -275,10 +269,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return a === "a" ? r.call(t, i) : r ? r.value = i : e.set(t, i), i;
     }
-    var F;
+    var C;
     class Me {
       constructor(e) {
-        F.set(this, void 0), ke(this, F, e, "f");
+        C.set(this, void 0), ke(this, C, e, "f");
         for (let i = 0; i < e.length; i++) {
           let a = e[i];
           this[i] = a, a.hasAttribute("name") && (this[a.getAttribute("name")] = a);
@@ -286,10 +280,10 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         Object.freeze(this);
       }
       get length() {
-        return ae(this, F, "f").length;
+        return ae(this, C, "f").length;
       }
-      [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ae(this, F, "f")[Symbol.iterator]();
+      [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return ae(this, C, "f")[Symbol.iterator]();
       }
       item(e) {
         return this[e] == null ? null : this[e];
@@ -303,21 +297,21 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
       HTMLFormElement.prototype.checkValidity = i;
       const e = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = a;
-      function i(...o) {
-        let s = t.apply(this, o);
-        return ee(this, s, "checkValidity");
+      function i(...s) {
+        let n = t.apply(this, s);
+        return ee(this, n, "checkValidity");
       }
-      function a(...o) {
-        let s = e.apply(this, o);
-        return ee(this, s, "reportValidity");
+      function a(...s) {
+        let n = e.apply(this, s);
+        return ee(this, n, "reportValidity");
       }
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
-        get(...o) {
-          const s = r.call(this, ...o), u = Array.from(y.get(this) || []);
+        get(...s) {
+          const n = r.call(this, ...s), u = Array.from(y.get(this) || []);
           if (u.length === 0)
-            return s;
-          const d = Array.from(s).concat(u).sort((v, f) => v.compareDocumentPosition ? v.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+            return n;
+          const d = Array.from(n).concat(u).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
           return new Me(d);
         }
       });
@@ -330,13 +324,13 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         const i = e.getRootNode(), a = new ve();
-        this.states = new D(e), n.set(this, e), l.set(this, a), c.set(e, this), de(e, this), pe(e, this), Object.seal(this), i instanceof DocumentFragment && ue(i);
+        this.states = new D(e), o.set(this, e), c.set(this, a), l.set(e, this), de(e, this), pe(e, this), Object.seal(this), i instanceof DocumentFragment && ue(i);
       }
       checkValidity() {
-        const e = n.get(this);
-        if (b(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const e = o.get(this);
+        if (w(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = l.get(this);
+        const i = c.get(this);
         if (!i.valid) {
           const a = new Event("invalid", {
             bubbles: !1,
@@ -348,20 +342,20 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         return i.valid;
       }
       get form() {
-        const e = n.get(this);
-        b(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const e = o.get(this);
+        w(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
         let i;
-        return e.constructor.formAssociated === !0 && (i = N(e)), i;
+        return e.constructor.formAssociated === !0 && (i = V(e)), i;
       }
       get labels() {
-        const e = n.get(this);
-        b(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const e = o.get(this);
+        w(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
         const i = e.getAttribute("id"), a = e.getRootNode();
         return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
       }
       reportValidity() {
-        const e = n.get(this);
-        if (b(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const e = o.get(this);
+        if (w(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
         const i = this.checkValidity(), a = B.get(this);
         if (a && !e.constructor.formAssociated)
@@ -369,8 +363,8 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         return !i && a && (e.focus(), a.focus()), i;
       }
       setFormValue(e) {
-        const i = n.get(this);
-        if (b(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), e != null && !(e instanceof FormData)) {
+        const i = o.get(this);
+        if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), e != null && !(e instanceof FormData)) {
           if (i.getAttribute("name")) {
             const a = Q(i, this);
             a.value = e;
@@ -378,46 +372,46 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
         } else
           e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
             if (typeof r == "string") {
-              const o = Q(i, this);
-              o.name = a, o.value = r;
+              const s = Q(i, this);
+              s.name = a, s.value = r;
             }
           });
         z.set(i, e);
       }
       setValidity(e, i, a) {
-        const r = n.get(this);
-        if (b(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
+        const r = o.get(this);
+        if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
         B.set(this, a);
-        const o = l.get(this), s = {};
-        for (const v in e)
-          s[v] = e[v];
-        Object.keys(s).length === 0 && ge(o);
-        const u = Object.assign(Object.assign({}, o), s);
+        const s = c.get(this), n = {};
+        for (const b in e)
+          n[b] = e[b];
+        Object.keys(n).length === 0 && ge(s);
+        const u = Object.assign(Object.assign({}, s), n);
         delete u.valid;
-        const { valid: d } = ye(o, u, this.form);
+        const { valid: d } = ye(s, u, this.form);
         if (!d && !i)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-        w.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : S.set(r, this);
+        g.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : x.set(r, this);
       }
       get shadowRoot() {
-        const e = n.get(this), i = q.get(e);
+        const e = o.get(this), i = q.get(e);
         return i || null;
       }
       get validationMessage() {
-        const e = n.get(this);
-        return b(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), w.get(this);
+        const e = o.get(this);
+        return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), g.get(this);
       }
       get validity() {
-        const e = n.get(this);
-        return b(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), l.get(this);
+        const e = o.get(this);
+        return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
       }
       get willValidate() {
-        const e = n.get(this);
-        return b(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
+        const e = o.get(this);
+        return w(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
       }
     }
-    function xe() {
+    function Ae() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class t extends HTMLElement {
@@ -454,9 +448,9 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
           const e = CustomElementRegistry.prototype.define;
           CustomElementRegistry.prototype.define = function(i, a, r) {
             if (a.formAssociated) {
-              const o = a.prototype.connectedCallback;
+              const s = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), te(this);
+                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), te(this);
               };
             }
             e.call(this, i, a, r);
@@ -468,45 +462,53 @@ const Ne = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
               throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
           } else
             return {};
-          if (c.has(this))
+          if (l.has(this))
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
           return new re(this);
         }), typeof Element < "u") {
           let e = function(...a) {
             const r = i.apply(this, a);
-            if (q.set(this, r), P()) {
-              const o = new MutationObserver(O);
-              window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), M.set(this, o);
+            if (q.set(this, r), T()) {
+              const s = new MutationObserver(O);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), P.set(this, s);
             }
             return r;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = e;
         }
-        P() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
+        T() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, _), typeof HTMLFormElement < "u" && Ce(), (t || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (xe() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ne(!1)), g.forceCustomStateSetPolyfill = H, g.forceElementInternalsPolyfill = ne, Object.defineProperty(g, "__esModule", { value: !0 }), g;
+    return !!customElements.polyfillWrapFlushCallback || (Ae() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ne(!1)), v.forceCustomStateSetPolyfill = H, v.forceElementInternalsPolyfill = ne, Object.defineProperty(v, "__esModule", { value: !0 }), v;
   })({});
 })();
-var Oe = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, m = (g, n, l, h) => {
-  for (var c = h > 1 ? void 0 : h ? _e(n, l) : n, w = g.length - 1, k; w >= 0; w--)
-    (k = g[w]) && (c = (h ? k(n, l, c) : k(c)) || c);
-  return h && c && Oe(n, l, c), c;
+const Oe = `*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[disabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[checked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[checked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[checked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[checked]:focus,.c-switch[checked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[checked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[disabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;left:50%;transform:translate(-50%) translateY(-50%);bottom:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-wrapper--rtl .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper--rtl .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
+`, _e = ["leading", "trailing"], je = "change", M = {
+  checked: !1,
+  disabled: !1,
+  labelPlacement: "leading",
+  required: !1,
+  value: "on"
+};
+var $e = Object.defineProperty, Re = Object.getOwnPropertyDescriptor, m = (v, o, c, h) => {
+  for (var l = h > 1 ? void 0 : h ? Re(o, c) : o, g = v.length - 1, k; g >= 0; g--)
+    (k = v[g]) && (l = (h ? k(o, c, l) : k(l)) || l);
+  return h && l && $e(o, c, l), l;
 };
 const ce = "pie-switch";
-class p extends Ie(Se(Fe)) {
+class p extends Ve(Te(xe)) {
   constructor() {
-    super(...arguments), this.labelPlacement = x.labelPlacement, this.checked = x.checked, this.required = x.required, this.value = x.value, this.disabled = x.disabled;
+    super(...arguments), this.labelPlacement = M.labelPlacement, this.checked = M.checked, this.required = M.required, this.value = M.value, this.disabled = M.disabled;
   }
-  firstUpdated(n) {
-    var l;
-    super.firstUpdated(n), this.handleFormAssociation(), (l = this.input) == null || l.addEventListener("invalid", (h) => {
-      this.dispatchEvent(new Event("invalid", h));
+  firstUpdated() {
+    var o;
+    this.handleFormAssociation(), (o = this.input) == null || o.addEventListener("invalid", (c) => {
+      this.dispatchEvent(new Event("invalid", c));
     });
   }
-  updated(n) {
-    super.updated(n), this.handleFormAssociation();
+  updated() {
+    this.handleFormAssociation();
   }
   /**
    * Ensures that the form value and validation state are in sync with the component.
@@ -518,10 +520,10 @@ class p extends Ie(Se(Fe)) {
    * The handleChange function updates the checkbox state and emits an event for consumers.
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
-  handleChange(n) {
-    const { checked: l } = n == null ? void 0 : n.currentTarget;
-    this.checked = l;
-    const h = Ve(n);
+  handleChange(o) {
+    const { checked: c } = o == null ? void 0 : o.currentTarget;
+    this.checked = c;
+    const h = Le(o);
     this.dispatchEvent(h), this.handleFormAssociation();
   }
   /**
@@ -544,9 +546,9 @@ class p extends Ie(Se(Fe)) {
    * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
    */
-  setCustomValidity(n) {
-    var l;
-    (l = this.input) == null || l.setCustomValidity(n), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(o) {
+    var c;
+    (c = this.input) == null || c.setCustomValidity(o), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -564,68 +566,75 @@ class p extends Ie(Se(Fe)) {
     return this.input.validationMessage;
   }
   /**
-   * Renders the label for a switch if provided.
-   * if invalid value is passed, nothing gets rendered
+   * If a label is provided, renders it if `labelPlacement` matches the given position.
+   * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
    *
    * @private
    */
-  renderSwitchLabel() {
-    const { label: n, labelPlacement: l } = this;
-    return n ? A`
-                <span data-test-id="switch-label-${l}">
-                    ${n}
-                </span>` : A``;
+  renderSwitchLabel(o) {
+    const { label: c, labelPlacement: h } = this;
+    return !c || h !== o ? L : N`
+            <span data-test-id="switch-label-${h}">
+                ${c}
+            </span>`;
+  }
+  renderAriaDescription() {
+    var o;
+    return (o = this.aria) != null && o.describedBy ? N`
+            <div
+                id="switch-description"
+                data-test-id="switch-description"
+                class="c-switch-description">
+                ${this.aria.describedBy}
+            </div>` : L;
   }
   render() {
     const {
-      labelPlacement: n,
-      aria: l,
-      checked: h,
-      required: c,
-      disabled: w,
-      isRTL: k
-    } = this, M = "switch-description";
-    return A`
+      aria: o,
+      checked: c,
+      disabled: h,
+      isRTL: l,
+      required: g
+    } = this;
+    return N`
             <label
-                class="c-switch-wrapper"
-                ?data-is-rtl=${k}
-                ?disabled=${w}>
-                ${n === "leading" ? this.renderSwitchLabel() : C}
+                class="${Se({
+      "c-switch-wrapper": !0,
+      "c-switch-wrapper--rtl": l
+    })}"
+                ?disabled=${h}>
+                ${this.renderSwitchLabel("leading")}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${h}>
+                    ?checked=${c}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
-                        .required=${c}
-                        .checked="${h}"
-                        .disabled="${w}"
+                        .required=${g}
+                        .checked="${c}"
+                        .disabled="${h}"
                         @change="${this.handleChange}"
-                        aria-label="${(l == null ? void 0 : l.label) || C}"
-                        aria-describedby="${l != null && l.describedBy ? M : C}">
+                        aria-label="${Ie(o == null ? void 0 : o.label)}"
+                        aria-describedby="${o != null && o.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
-                        ${h ? A`<icon-check></icon-check>` : C}
+                        ${c ? N`<icon-check></icon-check>` : L}
                     </div>
                 </div>
-                ${n === "trailing" ? this.renderSwitchLabel() : C}
-                ${l != null && l.describedBy ? A`<div id="${M}" data-test-id="${M}" class="c-switch-description">${l == null ? void 0 : l.describedBy}</div>` : C}
-            </label>
-        `;
+                ${this.renderSwitchLabel("trailing")}
+                ${this.renderAriaDescription()}
+            </label>`;
   }
 }
-p.styles = Ae(Ne);
-m([
-  le('input[type="checkbox"]')
-], p.prototype, "input", 2);
+p.styles = Fe(Oe);
 m([
   E({ type: String })
 ], p.prototype, "label", 2);
 m([
   E({ type: String }),
-  Te(ce, Pe, x.labelPlacement)
+  Ne(ce, _e, M.labelPlacement)
 ], p.prototype, "labelPlacement", 2);
 m([
   E({ type: Object })
@@ -645,13 +654,16 @@ m([
 m([
   E({ type: Boolean, reflect: !0 })
 ], p.prototype, "disabled", 2);
+m([
+  le('input[type="checkbox"]')
+], p.prototype, "input", 2);
 m([
   le("label")
 ], p.prototype, "focusTarget", 2);
-Le(ce, p);
+Pe(ce, p);
 export {
-  ze as ON_SWITCH_CHANGED_EVENT,
+  je as ON_SWITCH_CHANGED_EVENT,
   p as PieSwitch,
-  x as defaultProps,
-  Pe as labelPlacements
+  M as defaultProps,
+  _e as labelPlacements
 };

package/dist/react.d.ts

@@ -4,12 +4,11 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
 import type { PIEInputElement } from '@justeattakeaway/pie-webc-core';
-import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
-import type { TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit-html';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     label?: string;
     describedBy?: string;
 };
@@ -18,8 +17,6 @@ export declare type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit
 
 export declare const defaultProps: DefaultProps;
 
-export declare type LabelPlacement = typeof labelPlacements[number];
-
 export declare const labelPlacements: readonly ["leading", "trailing"];
 
 /**
@@ -36,18 +33,18 @@ export declare const PieSwitch: React_2.ForwardRefExoticComponent<SwitchProps &
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInputElement {
-    private input?;
-    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
-    protected updated(_changedProperties: PropertyValues<this>): void;
-    label?: string;
-    labelPlacement: SwitchProps['labelPlacement'];
-    aria: AriaProps;
+    label: SwitchProps['label'];
+    labelPlacement: "leading" | "trailing";
+    aria: SwitchProps['aria'];
     checked: boolean;
     required: boolean;
     value: string;
-    name?: string;
+    name: SwitchProps['name'];
     disabled: boolean;
+    private input?;
     focusTarget: HTMLElement;
+    protected firstUpdated(): void;
+    protected updated(): void;
     static styles: CSSResult;
     /**
      * Ensures that the form value and validation state are in sync with the component.
@@ -87,12 +84,13 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
      */
     get validationMessage(): string;
     /**
-     * Renders the label for a switch if provided.
-     * if invalid value is passed, nothing gets rendered
+     * If a label is provided, renders it if `labelPlacement` matches the given position.
+     * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
      *
      * @private
      */
     private renderSwitchLabel;
+    private renderAriaDescription;
     render(): TemplateResult<1>;
 }
 
@@ -129,7 +127,7 @@ export declare interface SwitchProps {
     /**
      * The placement of the label such as leading or trailing
      */
-    labelPlacement?: LabelPlacement;
+    labelPlacement?: typeof labelPlacements[number];
     /**
      * Same as the HTML name attribute - indicates the name of the switch (for use with forms)
      */

package/dist/react.js

@@ -1,25 +1,27 @@
-import * as e from "react";
-import { createComponent as t } from "@lit/react";
+import * as t from "react";
+import { createComponent as e } from "@lit/react";
 import { PieSwitch as i } from "./index.js";
-import { ON_SWITCH_CHANGED_EVENT as P, defaultProps as w, labelPlacements as S } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as S, defaultProps as f, labelPlacements as C } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/class-map.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
-const o = t({
+const o = e({
   displayName: "PieSwitch",
   elementClass: i,
-  react: e,
+  react: t,
   tagName: "pie-switch",
   events: {
     onInvalid: "invalid",
     onChange: "change"
     // when the switch checked state is changed.
   }
-}), s = o;
+}), h = o;
 export {
-  P as ON_SWITCH_CHANGED_EVENT,
-  s as PieSwitch,
-  w as defaultProps,
-  S as labelPlacements
+  S as ON_SWITCH_CHANGED_EVENT,
+  h as PieSwitch,
+  f as defaultProps,
+  C as labelPlacements
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.29.12",
+  "version": "0.30.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.InputHTMLAttributes<HTMLInputElement>

package/src/defs.ts

@@ -2,9 +2,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const labelPlacements = ['leading', 'trailing'] as const;
 
-export type LabelPlacement = typeof labelPlacements[number];
-
-export type AriaProps = {
+type AriaProps = {
     label?: string,
     describedBy?: string
 };
@@ -33,7 +31,7 @@ export interface SwitchProps {
     /**
      * The placement of the label such as leading or trailing
      */
-    labelPlacement?: LabelPlacement;
+    labelPlacement?: typeof labelPlacements[number];
     /**
      * Same as the HTML name attribute - indicates the name of the switch (for use with forms)
      */
@@ -55,8 +53,8 @@ export type DefaultProps = ComponentDefaultProps<SwitchProps, keyof Omit<SwitchP
 
 export const defaultProps: DefaultProps = {
     checked: false,
-    required: false,
     disabled: false,
-    value: 'on',
     labelPlacement: 'leading',
+    required: false,
+    value: 'on',
 };

package/src/index.ts

@@ -1,17 +1,19 @@
 import {
-    LitElement, html, unsafeCSS, nothing, TemplateResult, PropertyValues,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import 'element-internals-polyfill';
+
 import {
-    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent, PIEInputElement,
+    RtlMixin, validPropertyValues, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
-import styles from './switch.scss?inline';
-import {
-    SwitchProps, AriaProps, labelPlacements, defaultProps,
-} from './defs';
-import 'element-internals-polyfill';
 import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js';
 
+import styles from './switch.scss?inline';
+import { type SwitchProps, labelPlacements, defaultProps } from './defs';
+
 // Valid values available to consumers
 export * from './defs';
 
@@ -22,34 +24,15 @@ const componentSelector = 'pie-switch';
  * @event {CustomEvent} change - when the switch checked state is changed.
  */
 export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements SwitchProps, PIEInputElement {
-    @query('input[type="checkbox"]')
-    private input?: HTMLInputElement;
-
-    protected firstUpdated (_changedProperties: PropertyValues<this>): void {
-        super.firstUpdated(_changedProperties);
-
-        this.handleFormAssociation();
-        // This ensures that invalid events triggered by checkValidity() are propagated to the custom element
-        // for consumers to listen to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
-        this.input?.addEventListener('invalid', (event) => {
-            this.dispatchEvent(new Event('invalid', event));
-        });
-    }
-
-    protected updated (_changedProperties: PropertyValues<this>): void {
-        super.updated(_changedProperties);
-        this.handleFormAssociation();
-    }
-
     @property({ type: String })
-    public label?: string;
+    public label: SwitchProps['label'];
 
     @property({ type: String })
     @validPropertyValues(componentSelector, labelPlacements, defaultProps.labelPlacement)
-    public labelPlacement: SwitchProps['labelPlacement'] = defaultProps.labelPlacement;
+    public labelPlacement = defaultProps.labelPlacement;
 
     @property({ type: Object })
-    public aria!: AriaProps;
+    public aria: SwitchProps['aria'];
 
     @property({ type: Boolean, reflect: true })
     public checked = defaultProps.checked;
@@ -61,14 +44,30 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
     public value = defaultProps.value;
 
     @property({ type: String })
-    public name?: string;
+    public name: SwitchProps['name'];
 
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
+    @query('input[type="checkbox"]')
+    private input?: HTMLInputElement;
+
     @query('label')
     public focusTarget!: HTMLElement;
 
+    protected firstUpdated (): void {
+        this.handleFormAssociation();
+        // This ensures that invalid events triggered by checkValidity() are propagated to the custom element
+        // for consumers to listen to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
+        this.input?.addEventListener('invalid', (event) => {
+            this.dispatchEvent(new Event('invalid', event));
+        });
+    }
+
+    protected updated (): void {
+        this.handleFormAssociation();
+    }
+
     static styles = unsafeCSS(styles);
 
     /**
@@ -148,42 +147,57 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
     }
 
     /**
-     * Renders the label for a switch if provided.
-     * if invalid value is passed, nothing gets rendered
+     * If a label is provided, renders it if `labelPlacement` matches the given position.
+     * If no label is provided, or `labelPlacement` does not match the given position, nothing is rendered.
      *
      * @private
      */
-    private renderSwitchLabel (): TemplateResult {
+    private renderSwitchLabel (placement : SwitchProps['labelPlacement']) {
         const { label, labelPlacement } = this;
 
-        if (label) {
-            return html`
-                <span data-test-id="switch-label-${labelPlacement}">
-                    ${label}
-                </span>`;
+        if (!label || labelPlacement !== placement) {
+            return nothing;
         }
 
-        return html``;
+        return html`
+            <span data-test-id="switch-label-${labelPlacement}">
+                ${label}
+            </span>`;
+    }
+
+    private renderAriaDescription () {
+        if (!this.aria?.describedBy) {
+            return nothing;
+        }
+
+        return html`
+            <div
+                id="switch-description"
+                data-test-id="switch-description"
+                class="c-switch-description">
+                ${this.aria.describedBy}
+            </div>`;
     }
 
     render () {
         const {
-            labelPlacement,
             aria,
             checked,
-            required,
             disabled,
             isRTL,
+            required,
         } = this;
 
-        const switchId = 'switch-description';
+        const classes = {
+            'c-switch-wrapper': true,
+            'c-switch-wrapper--rtl': isRTL,
+        };
 
         return html`
             <label
-                class="c-switch-wrapper"
-                ?data-is-rtl=${isRTL}
+                class="${classMap(classes)}"
                 ?disabled=${disabled}>
-                ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
+                ${this.renderSwitchLabel('leading')}
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
@@ -197,16 +211,15 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
                         .checked="${checked}"
                         .disabled="${disabled}"
                         @change="${this.handleChange}"
-                        aria-label="${aria?.label || nothing}"
-                        aria-describedby="${aria?.describedBy ? switchId : nothing}">
+                        aria-label="${ifDefined(aria?.label)}"
+                        aria-describedby="${aria?.describedBy ? 'switch-description' : nothing}">
                     <div class="c-switch-control">
                         ${checked ? html`<icon-check></icon-check>` : nothing}
                     </div>
                 </div>
-                ${labelPlacement === 'trailing' ? this.renderSwitchLabel() : nothing}
-                ${aria?.describedBy ? html`<div id="${switchId}" data-test-id="${switchId}" class="c-switch-description">${aria?.describedBy}</div>` : nothing}
-            </label>
-        `;
+                ${this.renderSwitchLabel('trailing')}
+                ${this.renderAriaDescription()}
+            </label>`;
     }
 }
 

package/src/switch.scss

@@ -111,6 +111,12 @@
     background-color: var(--dt-color-interactive-light);
     padding: var(--switch-padding);
 
+    .c-switch-wrapper--rtl & {
+        position: absolute;
+        left: initial;
+        right: 2px;
+    }
+
     .c-switch-input:checked + & {
         @include switch-transition(transform);
         transform: translateX(var(--switch-translation));
@@ -136,13 +142,7 @@
     @include p.visually-hidden;
 }
 
-.c-switch-wrapper[data-is-rtl] {
-    .c-switch-control {
-        position: absolute;
-        left: initial;
-        right: 2px;
-    }
-
+.c-switch-wrapper--rtl {
     .c-switch-input:checked + .c-switch-control {
         @include switch-transition(transform);
         transform: translateX(calc(-1 * var(--switch-translation)));