@proximus/lavender 2.0.0-alpha.80 → 2.0.0-alpha.82

package/dist/lavender.es.js

@@ -2395,57 +2395,57 @@ const subgridRowsValues = [
   "11",
   "12"
 ];
-const attributeBreakpointCSSSelector$4 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
+const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
 const paddingPrefix$1 = "px-padding";
 const containerBreakpoints = [
   cssTokenBreakpoints(
     "padding",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1,
     "--container-padding"
   ),
   cssTokenBreakpoints(
     "padding-inline",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1
   ),
   cssTokenBreakpoints(
     "padding-block",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1
   ),
   cssTokenBreakpoints(
     "padding-top",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1
   ),
   cssTokenBreakpoints(
     "padding-right",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1,
     "--container-padding-right"
   ),
   cssTokenBreakpoints(
     "padding-bottom",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1
   ),
   cssTokenBreakpoints(
     "padding-left",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     paddingValues,
     paddingPrefix$1,
     "--container-padding-left"
   ),
   cssTokenBreakpoints(
     "gap",
-    attributeBreakpointCSSSelector$4,
+    attributeBreakpointCSSSelector$3,
     gapValues,
     "px-spacing",
     void 0,
@@ -3539,11 +3539,11 @@ const contentAlignmentValues = [
   "stretch"
 ];
 const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
-const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
+const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
 const gapPrefix$1 = "px-spacing";
 const gapCssTokenBreakpoints = cssTokenBreakpoints(
   "gap",
-  attributeBreakpointCSSSelector$3,
+  attributeBreakpointCSSSelector$2,
   gapValues,
   gapPrefix$1,
   "--grid-gap"
@@ -4868,7 +4868,7 @@ const cardBackgroundColorValues = [
 const cardPaddingValues = ["", "s", "m", "l"];
 const cardMediaLeftSizeValues = ["", "s", "m"];
 const cardMediaPositionValues = ["", "top", "left", "background"];
-const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
+const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
 const paddingPrefix = "px-padding";
 const _Card = class _Card extends VerticallyExtendedElement {
   constructor() {
@@ -4876,7 +4876,7 @@ const _Card = class _Card extends VerticallyExtendedElement {
       styleSheet$B,
       cssTokenBreakpoints(
         "padding",
-        attributeBreakpointCSSSelector$2,
+        attributeBreakpointCSSSelector$1,
         cardPaddingValues,
         paddingPrefix,
         "--card__content-padding"
@@ -5237,8 +5237,8 @@ let Card = _Card;
 if (!customElements.get("px-card")) {
   customElements.define("px-card", Card);
 }
-const styles$G = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}";
-const itemStyles = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}";
+const styles$G = ':host{display:block;--px-carousel-visible-items: 1;--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host *{box-sizing:border-box}:host([visible-items="1"]){--px-carousel-visible-items: 1}:host([visible-items="2"]){--px-carousel-visible-items: 2}:host([visible-items="3"]){--px-carousel-visible-items: 3}:host([visible-items="4"]){--px-carousel-visible-items: 4}:host([visible-items="5"]){--px-carousel-visible-items: 5}:host([visible-items="6"]){--px-carousel-visible-items: 6}:host([visible-items="7"]){--px-carousel-visible-items: 7}:host([visible-items="8"]){--px-carousel-visible-items: 8}:host([visible-items="9"]){--px-carousel-visible-items: 9}:host([visible-items--mobile="1"]){--px-carousel-visible-items--mobile: 1}:host([visible-items--mobile="2"]){--px-carousel-visible-items--mobile: 2}:host([visible-items--mobile="3"]){--px-carousel-visible-items--mobile: 3}:host([visible-items--mobile="4"]){--px-carousel-visible-items--mobile: 4}:host([visible-items--mobile="5"]){--px-carousel-visible-items--mobile: 5}:host([visible-items--mobile="6"]){--px-carousel-visible-items--mobile: 6}:host([visible-items--mobile="7"]){--px-carousel-visible-items--mobile: 7}:host([visible-items--mobile="8"]){--px-carousel-visible-items--mobile: 8}:host([visible-items--mobile="9"]){--px-carousel-visible-items--mobile: 9}:host([visible-items--tablet="1"]){--px-carousel-visible-items--tablet: 1}:host([visible-items--tablet="2"]){--px-carousel-visible-items--tablet: 2}:host([visible-items--tablet="3"]){--px-carousel-visible-items--tablet: 3}:host([visible-items--tablet="4"]){--px-carousel-visible-items--tablet: 4}:host([visible-items--tablet="5"]){--px-carousel-visible-items--tablet: 5}:host([visible-items--tablet="6"]){--px-carousel-visible-items--tablet: 6}:host([visible-items--tablet="7"]){--px-carousel-visible-items--tablet: 7}:host([visible-items--tablet="8"]){--px-carousel-visible-items--tablet: 8}:host([visible-items--tablet="9"]){--px-carousel-visible-items--tablet: 9}:host([visible-items--laptop="1"]){--px-carousel-visible-items--laptop: 1}:host([visible-items--laptop="2"]){--px-carousel-visible-items--laptop: 2}:host([visible-items--laptop="3"]){--px-carousel-visible-items--laptop: 3}:host([visible-items--laptop="4"]){--px-carousel-visible-items--laptop: 4}:host([visible-items--laptop="5"]){--px-carousel-visible-items--laptop: 5}:host([visible-items--laptop="6"]){--px-carousel-visible-items--laptop: 6}:host([visible-items--laptop="7"]){--px-carousel-visible-items--laptop: 7}:host([visible-items--laptop="8"]){--px-carousel-visible-items--laptop: 8}:host([visible-items--laptop="9"]){--px-carousel-visible-items--laptop: 9}:host([visible-items--desktop="1"]){--px-carousel-visible-items--desktop: 1}:host([visible-items--desktop="2"]){--px-carousel-visible-items--desktop: 2}:host([visible-items--desktop="3"]){--px-carousel-visible-items--desktop: 3}:host([visible-items--desktop="4"]){--px-carousel-visible-items--desktop: 4}:host([visible-items--desktop="5"]){--px-carousel-visible-items--desktop: 5}:host([visible-items--desktop="6"]){--px-carousel-visible-items--desktop: 6}:host([visible-items--desktop="7"]){--px-carousel-visible-items--desktop: 7}:host([visible-items--desktop="8"]){--px-carousel-visible-items--desktop: 8}:host([visible-items--desktop="9"]){--px-carousel-visible-items--desktop: 9}:host([gap="default"]){--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host([gap="s"]){--px-carousel-gap-default: var(--px-spacing-s-desktop)}:host([gap="xs"]){--px-carousel-gap-default: var(--px-spacing-xs-desktop)}:host([gap="2xs"]){--px-carousel-gap-default: var(--px-spacing-2xs-desktop)}:host([gap="l"]){--px-carousel-gap-default: var(--px-spacing-l-desktop)}:host([gap="none"]){--px-carousel-gap-default: 0}:host([gap--mobile="default"]){--px-carousel-gap-default--mobile: var(--px-spacing-default-mobile)}:host([gap--mobile="s"]){--px-carousel-gap-default--mobile: var(--px-spacing-s-mobile)}:host([gap--mobile="xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-xs-mobile)}:host([gap--mobile="2xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-2xs-mobile)}:host([gap--mobile="l"]){--px-carousel-gap-default--mobile: var(--px-spacing-l-mobile)}:host([gap--mobile="none"]){--px-carousel-gap-default--mobile: 0}:host([gap--tablet="default"]){--px-carousel-gap-default--tablet: var(--px-spacing-default-tablet)}:host([gap--tablet="s"]){--px-carousel-gap-default--tablet: var(--px-spacing-s-tablet)}:host([gap--tablet="xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-xs-tablet)}:host([gap--tablet="2xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-2xs-tablet)}:host([gap--tablet="l"]){--px-carousel-gap-default--tablet: var(--px-spacing-l-tablet)}:host([gap--tablet="none"]){--px-carousel-gap-default--tablet: 0}:host([gap--laptop="default"]){--px-carousel-gap-default--laptop: var(--px-spacing-default-laptop)}:host([gap--laptop="s"]){--px-carousel-gap-default--laptop: var(--px-spacing-s-laptop)}:host([gap--laptop="xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-xs-laptop)}:host([gap--laptop="2xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-2xs-laptop)}:host([gap--laptop="l"]){--px-carousel-gap-default--laptop: var(--px-spacing-l-laptop)}:host([gap--laptop="none"]){--px-carousel-gap-default--laptop: 0}:host([gap--desktop="default"]){--px-carousel-gap-default--desktop: var(--px-spacing-default-desktop)}:host([gap--desktop="s"]){--px-carousel-gap-default--desktop: var(--px-spacing-s-desktop)}:host([gap--desktop="xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-xs-desktop)}:host([gap--desktop="2xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-2xs-desktop)}:host([gap--desktop="l"]){--px-carousel-gap-default--desktop: var(--px-spacing-l-desktop)}:host([gap--desktop="none"]){--px-carousel-gap-default--desktop: 0}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default))}@media only screen and (max-width: 48em){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media only screen and (min-width: 48.0625em) and (max-width: 64em){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 48em){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}';
+const itemStyles = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;border-radius:var(--px-radius-main);background:#fff;overflow:hidden;--visible-items: var(--px-carousel-visible-items--desktop, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)));min-width:calc((100% - max(var(--visible-items),2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items),2))}@media only screen and (max-width: 48em){:host{--visible-items: var(--px-carousel-visible-items--mobile, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default, var(--px-spacing-s-mobile)))}}@media only screen and (min-width: 48.0625em) and (max-width: 64em){:host{--visible-items: var(--px-carousel-visible-items--tablet, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host{--visible-items: var(--px-carousel-visible-items--laptop, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)))}}@media screen and (max-width: 48em){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 48em) and (max-width: 64em){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}";
 const styles$F = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}";
 const styleSheet$A = new CSSStyleSheet();
 styleSheet$A.replaceSync(styles$F);
@@ -5486,19 +5486,10 @@ function throttle(func, wait, options) {
 const styleSheet$z = new CSSStyleSheet();
 styleSheet$z.replaceSync(styles$G);
 const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
-const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
-const prefix = "px-spacing";
-const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100%  - ${Math.max(parseInt(numberOfItems), 2)}  * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
 class Carousel extends HTMLElement {
   constructor() {
     super();
     __privateAdd(this, _Carousel_instances);
-    this.visibleItemsAttributeDelegate = new AttributeBreakpointHandlerDelegate(
-      this,
-      "visible-items",
-      visibleItemCalcFunction("s"),
-      "--px-carousel-min-width"
-    );
     this.template = `<px-vstack gap="default">
     <div class="carousel">
       <slot></slot>
@@ -5550,42 +5541,9 @@ class Carousel extends HTMLElement {
     };
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template;
-    this.shadowRoot.adoptedStyleSheets = [
-      styleSheet$z,
-      cssTokenBreakpoints(
-        "gap",
-        attributeBreakpointCSSSelector$1,
-        gapValues,
-        prefix
-      )
-    ];
-  }
-  static get observedAttributes() {
-    return ["visible-items"];
-  }
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    if (oldValue !== newValue) {
-      switch (attrName) {
-        case "gap":
-        case "gap--mobile":
-        case "gap--tablet":
-        case "gap--desktop":
-          this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(newValue);
-          break;
-        default:
-          this.visibleItemsAttributeDelegate.attributeChangedCallback(
-            attrName,
-            oldValue,
-            newValue
-          );
-      }
-    }
+    this.shadowRoot.adoptedStyleSheets = [styleSheet$z];
   }
   connectedCallback() {
-    this.visibleItemsAttributeDelegate.init("1");
-    this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(
-      this.getAttribute("gap") || "s"
-    );
     this.addEventListener(CAROUSEL_ITEM_CONNECTED_EVENT, () => {
       __privateMethod(this, _Carousel_instances, syncItems_fn).call(this);
     });
@@ -5669,7 +5627,7 @@ class CarouselItem extends HTMLElement {
   </div>`;
     this.attachShadow({ mode: "open" });
     this.shadowRoot.innerHTML = this.template;
-    this.shadowRoot.adoptedStyleSheets = [styleSheet$z, itemStyleSheet];
+    this.shadowRoot.adoptedStyleSheets = [itemStyleSheet];
   }
   connectedCallback() {
     this.dispatchEvent(
@@ -15365,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) => {
@@ -15377,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");
@@ -15452,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");
@@ -15478,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;
@@ -15487,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;