@proximus/lavender-switch 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/index.js

@@ -1,7 +1,7 @@
 import { PxElement as l } from "@proximus/lavender-common";
 const d = ':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-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}.switch:has(input[inverted]):focus-visible{outline-color:var(--px-border-color-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-background-color-action-neutral-strong-default);outline:var(--px-border-size-m) solid var(--px-border-color-none);width:var(--px-action-input-switch-size-width);height:calc(var(--px-action-size-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}input:not([disabled])+label:hover:not([disabled]){outline-color:var(--px-border-color-action-neutral-default)}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-action-size-m);max-width:var(--px-action-size-m);height:var(--px-action-size-m);border-radius:var(--px-radius-pill);background-color:var(--px-background-color-action-neutral-bare-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([checked]) label{background-color:var(--px-background-color-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-action-size-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-border-color-purpose-success-default)}:host([disabled]) label{background-color:var(--px-background-color-action-disabled-default)}:host([disabled]) label:after{background-color:var(--px-background-color-action-disabled-default)}:host([inverted]) label{background-color:var(--px-background-color-action-neutral-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-border-color-action-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-background-color-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-border-color-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-background-color-action-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-background-color-action-disabled-inverted)}@media only screen and (min-width: 768px){label{padding:var(--px-padding-3xs-tablet)}}@media only screen and (min-width: 1025px){label{padding:var(--px-padding-3xs-desktop)}}', a = new CSSStyleSheet();
 a.replaceSync(d);
-var n = /* @__PURE__ */ ((s) => (s.ERROR = "error", s.SUCCESS = "success", s))(n || {});
+var c = /* @__PURE__ */ ((i) => (i.ERROR = "error", i.SUCCESS = "success", i))(c || {});
 const o = class o extends l {
   constructor() {
     var e;
@@ -11,7 +11,7 @@ const o = class o extends l {
     </div>`, this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
   }
   static get observedAttributes() {
-    return [...super.observedAttributes, "inverted"];
+    return [...super.observedAttributes, "inverted", "hover"];
   }
   connectedCallback() {
     this.$el.addEventListener("change", () => {
@@ -27,17 +27,20 @@ const o = class o extends l {
       (e.code === "Space" || e.code === "Enter") && this.$el.click();
     }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$switch.ariaChecked = `${this.checked}`;
   }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
+  attributeChangedCallback(e, t, s) {
+    if (t !== s)
       switch (e) {
         case "checked":
-          this.$el.checked = i !== null, this.$switch.ariaChecked = `${this.$el.checked}`;
+          this.$el.checked = s !== null, this.$switch.ariaChecked = `${this.$el.checked}`;
           break;
         case "disabled":
-          this.$el.disabled = i !== null, this.$switch.ariaDisabled = `${this.$el.disabled}`;
+          this.$el.disabled = s !== null, this.$switch.ariaDisabled = `${this.$el.disabled}`;
+          break;
+        case "hover":
+          this.$el.classList.toggle("hover");
           break;
         default:
-          super.attributeChangedCallback(e, t, i);
+          super.attributeChangedCallback(e, t, s);
           break;
       }
   }
@@ -53,7 +56,10 @@ const o = class o extends l {
   }
   // Set default behavior when the element is attached to a form
   formResetCallback() {
-    this.$el.value = "";
+    this.checked = !1;
+  }
+  formStateRestoreCallback(e) {
+    this.checked = e;
   }
   setupForId() {
     const e = Math.random().toString(36).substr(2, 9);
@@ -88,6 +94,6 @@ o.nativeName = "input";
 let r = o;
 customElements.define("px-switch", r);
 export {
-  n as InputState,
+  c as InputState,
   r as Switch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-switch",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edec2b5a831e4286158fde73db21ad0b49b61480",
+  "gitHead": "9eeabb86abf7f1326ab1a0694ac7a079dfb024c8",
   "lerna": {
     "command": {
       "publish": {