@proximus/lavender 1.4.9-alpha.7 → 1.4.9-alpha.8

package/dist/lavender.es.js

@@ -15323,7 +15323,7 @@ class StickyContainer extends HTMLElement {
 if (!customElements.get("px-sticky-container")) {
   customElements.define("px-sticky-container", StickyContainer);
 }
-const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}.switch:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}.switch:has(input[inverted]):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none-default);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default);cursor:pointer}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media only screen and (min-width: 48em){label{padding:var(--px-padding-3xs-desktop)}}@media only screen and (min-width: 64.0625em){label{padding:var(--px-padding-3xs-desktop)}}';
+const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}:host(:focus-visible){outline:none}:host(:focus-visible) .switch{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([inverted]:focus-visible) .switch{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none-default);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default);cursor:pointer}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media only screen and (min-width: 48em){label{padding:var(--px-padding-3xs-desktop)}}@media only screen and (min-width: 64.0625em){label{padding:var(--px-padding-3xs-desktop)}}';
 const switchStyles = new CSSStyleSheet();
 switchStyles.replaceSync(switchCss);
 var InputState = /* @__PURE__ */ ((InputState2) => {
@@ -15335,50 +15335,51 @@ const _Switch = class _Switch extends PxElement {
   constructor() {
     var _a;
     super(switchStyles);
-    this.template = () => `<div class="switch" tabindex="0" role="switch">
-      <input type="checkbox" tabindex="-1"/>
+    this.template = () => `<div class="switch">
+      <input type="checkbox" tabindex="-1" inert/>
       <label></label>
     </div>`;
     this.shadowRoot.innerHTML = this.template();
     this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
+    this.role = "switch";
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "inverted", "hover"];
   }
   connectedCallback() {
-    this.$el.addEventListener("change", () => {
+    const toggle = () => {
       var _a;
-      this.checked = this.$el.checked;
-      const customEvent = new Event("change", {
-        bubbles: true,
-        composed: true
-        // Allow the event to pass through shadow DOM boundaries
-      });
-      this.dispatchEvent(customEvent);
-      (_a = this.internals) == null ? void 0 : _a.setFormValue(this.formData());
-    });
+      if (!this.disabled) {
+        this.checked = !this.checked;
+        this.dispatchEvent(
+          new Event("change", { bubbles: true, composed: true })
+        );
+        (_a = this.internals) == null ? void 0 : _a.setFormValue(this.formData());
+      }
+    };
+    this.addEventListener("click", toggle);
     this.addEventListener("keypress", (e) => {
       if (e.code === "Space" || e.code === "Enter") {
-        this.$el.click();
+        toggle();
       }
     });
-    this.setupForId();
+    this.tabIndex = 0;
     if (this.hasAttribute("checked")) {
       this.checked = true;
     }
-    this.$switch.ariaChecked = `${this.checked}`;
+    this.ariaChecked = `${this.checked}`;
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
         case "checked":
           this.$el.checked = newValue !== null;
-          this.$switch.ariaChecked = `${this.$el.checked}`;
+          this.ariaChecked = `${this.$el.checked}`;
           break;
         case "disabled":
           this.$el.disabled = newValue !== null;
-          this.$switch.ariaDisabled = `${this.$el.disabled}`;
-          this.$switch.tabIndex = this.$el.disabled ? -1 : 0;
+          this.ariaDisabled = `${this.$el.disabled}`;
+          this.tabIndex = this.$el.disabled ? -1 : 0;
           break;
         case "hover":
           this.$el.classList.toggle("hover");
@@ -15410,12 +15411,6 @@ const _Switch = class _Switch extends PxElement {
   setupForId() {
     const id = Math.random().toString(36).substr(2, 9);
     this.$el.setAttribute("id", id);
-    if (this.$label) {
-      this.$label.setAttribute("for", id);
-    }
-  }
-  get $label() {
-    return this.shadowRoot.querySelector("label");
   }
   get $switch() {
     return this.shadowRoot.querySelector(".switch");
@@ -15436,7 +15431,7 @@ const _Switch = class _Switch extends PxElement {
     } else {
       this.removeAttribute("checked");
     }
-    this.$switch.ariaChecked = `${value}`;
+    this.ariaChecked = `${value}`;
   }
   set disabled(value) {
     this.$el.disabled = value;
@@ -15445,7 +15440,8 @@ const _Switch = class _Switch extends PxElement {
     } else {
       this.removeAttribute("disabled");
     }
-    this.$switch.ariaDisabled = `${value}`;
+    this.ariaDisabled = `${value}`;
+    this.tabIndex = value ? -1 : 0;
   }
   get disabled() {
     return this.$el.disabled;