@sbb-esta/lyne-elements 1.2.0 → 1.3.0

package/core/mixins/hydration-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hydration-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/hydration-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,KAAK,CAAC;AAI3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qBAAqB;IACjD;;;;;;OAMG;IACH,IAAW,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD,+DAA+D;IAC/D,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAAC;CAC5C;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,QACnE,CAAC,KACN,mBAAmB,CAAC,qBAAqB,CAAC,GAAG,CAsE/C,CAAC"}
+{"version":3,"file":"hydration-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/hydration-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAEtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qBAAqB;IACjD;;;;;;OAMG;IACH,IAAW,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD,+DAA+D;IAC/D,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAAC;CAC5C;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,QACnE,CAAC,KACN,mBAAmB,CAAC,qBAAqB,CAAC,GAAG,CAwE/C,CAAC"}

package/core/mixins.js

@@ -1,16 +1,16 @@
-import { property as o, state as _ } from "lit/decorators.js";
-import { defaultConverter as b, html as l, nothing as h, css as y } from "lit";
-import { hostAttributes as C } from "./decorators.js";
-import { preventScrollOnSpacebarPress as u, forwardEventToHost as x, EventEmitter as k } from "./eventing.js";
-import { getLocalName as p } from "./dom.js";
+import { property as o, state as y } from "lit/decorators.js";
+import { defaultConverter as u, html as b, nothing as p, css as x } from "lit";
+import { hostAttributes as k } from "./decorators.js";
+import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
+import { getLocalName as f } from "./dom.js";
 import "../screen-reader-only.js";
-var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, E = (n, r, s, t) => {
-  for (var e = S(r, s), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && w(r, s, e), e;
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, s, r, t) => {
+  for (var e = E(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && S(s, r, e), e;
 };
-const g = (n) => {
-  class r extends n {
+const C = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -28,24 +28,24 @@ const g = (n) => {
       return !1;
     }
   }
-  return E([
+  return P([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "disabled"), r;
-}, G = (n) => {
-  class r extends g(n) {
+  ], s.prototype, "disabled"), s;
+}, J = (n) => {
+  class s extends C(n) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
-  return r;
+  return s;
 };
-var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (n, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? $(r, s) : r, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(r, s, e) : a(e)) || e);
-  return t && e && P(r, s, e), e;
+var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, c = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? R(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+  return t && e && $(s, r, e), e;
 };
-const R = (n) => {
-  const s = class s extends n {
+const A = (n) => {
+  const r = class r extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -133,23 +133,23 @@ const R = (n) => {
       this.internals.setFormValue(this.value);
     }
   };
-  s.formAssociated = !0;
-  let r = s;
-  return d([
+  r.formAssociated = !0;
+  let s = r;
+  return c([
     o()
-  ], r.prototype, "name", 1), d([
+  ], s.prototype, "name", 1), c([
     o()
-  ], r.prototype, "value", 1), d([
-    _()
-  ], r.prototype, "formDisabled", 2), r;
+  ], s.prototype, "value", 1), c([
+    y()
+  ], s.prototype, "formDisabled", 2), s;
 };
-var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, q = (n, r, s, t) => {
-  for (var e = O(r, s), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && A(r, s, e), e;
+var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, L = (n, s, r, t) => {
+  for (var e = q(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && O(s, r, e), e;
 };
-const L = (n) => {
-  class r extends n {
+const D = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._required = !1;
     }
@@ -170,40 +170,40 @@ const L = (n) => {
       return !1;
     }
   }
-  return q([
+  return L([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "required"), r;
+  ], s.prototype, "required"), s;
 };
-var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, v = (n, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? M(r, s) : r, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(r, s, e) : a(e)) || e);
-  return t && e && D(r, s, e), e;
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+  return t && e && M(s, r, e), e;
 };
-const J = (n) => {
-  let r = class extends g(L(R(n))) {
+const Q = (n) => {
+  let s = class extends C(D(A(n))) {
     constructor() {
-      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (s) => {
-        s.key === " " && this._handleUserInteraction();
+      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
+        r.key === " " && this._handleUserInteraction();
       }, this._handleUserInteraction = () => {
-        var s;
-        this.disabled || ((s = this.withUserInteraction) == null || s.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
+        var r;
+        this.disabled || ((r = this.withUserInteraction) == null || r.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
       }, this.internals.role = "checkbox";
     }
-    set checked(s) {
-      const t = typeof s == "object" ? s.attribute : !1;
-      t && (s = s.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
+    set checked(r) {
+      const t = typeof r == "object" ? r.attribute : !1;
+      t && (r = r.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!r, this.updateFormValue();
     }
     get checked() {
       return this._checked;
     }
     connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", u), this.addEventListener("keyup", this._handleKeyboardInteraction);
+      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", v), this.addEventListener("keyup", this._handleKeyboardInteraction);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", u), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", v), this.removeEventListener("keyup", this._handleKeyboardInteraction);
     }
-    attributeChangedCallback(s, t, e) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, t, e);
+    attributeChangedCallback(r, t, e) {
+      (r !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(r, t, e);
     }
     /**
      * Is called whenever the form is being reset.
@@ -222,54 +222,48 @@ const J = (n) => {
      *
      * @internal
      */
-    formStateRestoreCallback(s, t) {
-      s && (this.checked = s === "true");
+    formStateRestoreCallback(r, t) {
+      r && (this.checked = r === "true");
     }
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
   };
-  return v([
+  return m([
     o({
       type: Boolean,
       converter: {
-        ...b,
+        ...u,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (s, t) => {
+        fromAttribute: (r, t) => {
           var i, a;
-          return { value: (a = (i = b).fromAttribute) == null ? void 0 : a.call(i, s, t), attribute: !0 };
+          return { value: (a = (i = u).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
         }
       }
     })
-  ], r.prototype, "checked", 1), r = v([
-    C({
+  ], s.prototype, "checked", 1), s = m([
+    k({
       tabindex: "0"
     })
-  ], r), r;
-}, U = (n) => {
-  class r extends n {
+  ], s), s;
+}, I = (n) => {
+  class s extends n {
     constructor(...t) {
       var e;
       if (super(...t), this._hydrationComplete = new Promise(
         (i) => this._resolveHydration = i
-      ), this._handleBeforeHydrationSlotchange = (i) => {
-        if (!this._hydrationRequired)
-          return;
-        i.stopImmediatePropagation();
-        const a = i.target;
-        this.hydrationComplete.then(() => x(i, a));
-      }, this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+      ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const i = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
-        i != null && i.length && (i.forEach(
-          (a) => a.addEventListener("slotchange", this._handleBeforeHydrationSlotchange, {
-            capture: !0
-          })
+        const i = (l) => {
+          this._hydrationRequired && l.stopImmediatePropagation();
+        }, a = { capture: !0 }, d = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
+        d != null && d.length && (d.forEach(
+          (l) => l.addEventListener("slotchange", i, a)
         ), this.hydrationComplete.then(
-          () => i.forEach(
-            (a) => a.removeEventListener("slotchange", this._handleBeforeHydrationSlotchange)
-          )
+          () => d.forEach((l) => {
+            l.removeEventListener("slotchange", i, a), l.assignedNodes().length && l.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+          })
         ));
       }
     }
@@ -292,23 +286,23 @@ const J = (n) => {
       super.update(t), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
     }
   }
-  return r;
+  return s;
 };
-var B = Object.defineProperty, I = (n, r, s, t) => {
+var N = Object.defineProperty, B = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && B(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && N(s, r, e), e;
 };
-const f = "data-ssr-child-count", m = "li", Q = (n) => {
-  class r extends U(n) {
+const _ = "data-ssr-child-count", g = "li", W = (n) => {
+  class s extends I(n) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
         t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, i) => e.setAttribute("slot", `${m}-${i}`)
-        ), this.removeAttribute(f));
+          (e, i) => e.setAttribute("slot", `${g}-${i}`)
+        ), this.removeAttribute(_));
       };
     }
     connectedCallback() {
@@ -330,17 +324,17 @@ const f = "data-ssr-child-count", m = "li", Q = (n) => {
      */
     renderList(t = {}) {
       const e = this.listSlotNames();
-      return e.length >= 2 ? l`
+      return e.length >= 2 ? b`
           <ul
-            class=${t.class || (this.localName ?? p(this))}
-            aria-label=${t.ariaLabel || h}
-            aria-labelledby=${t.ariaLabelledby || h}
+            class=${t.class || (this.localName ?? f(this))}
+            aria-label=${t.ariaLabel || p}
+            aria-labelledby=${t.ariaLabelledby || p}
           >
-            ${e.map((i) => l`<li><slot name=${i}></slot></li>`)}
+            ${e.map((i) => b`<li><slot name=${i}></slot></li>`)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : e.length === 1 ? l`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || (this.localName ?? p(this))}>
+        ` : e.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+          <span class=${t.class || (this.localName ?? f(this))}>
             <span><slot name=${e[0]}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
@@ -355,7 +349,7 @@ const f = "data-ssr-child-count", m = "li", Q = (n) => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotNames() {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(f) ?? 0) })).map((e, i) => `${m}-${i}`);
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((e, i) => `${g}-${i}`);
     }
     /**
      * Returns a hidden slot, which is intended as the children change detection.
@@ -363,38 +357,38 @@ const f = "data-ssr-child-count", m = "li", Q = (n) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return l`<span hidden><slot></slot></span>`;
+      return b`<span hidden><slot></slot></span>`;
     }
   }
-  return I([
-    _()
-  ], r.prototype, "listChildren"), r;
+  return B([
+    y()
+  ], s.prototype, "listChildren"), s;
 };
-var N = Object.defineProperty, H = (n, r, s, t) => {
+var V = Object.defineProperty, j = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && N(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && V(s, r, e), e;
 };
-const W = (n) => {
-  class r extends n {
+const Y = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return H([
+  return j([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "negative"), r;
+  ], s.prototype, "negative"), s;
 };
-var V = Object.defineProperty, c = (n, r, s, t) => {
+var H = Object.defineProperty, h = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && V(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && H(s, r, e), e;
 };
-const Y = (n) => {
+const Z = (n) => {
   var t;
-  const r = (t = class extends n {
+  const s = (t = class extends n {
     constructor() {
-      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new k(
+      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
         this,
         t.events.panelConnected,
         { bubbles: !0 }
@@ -406,15 +400,15 @@ const Y = (n) => {
   }, t.events = {
     panelConnected: "panelConnected"
   }, t);
-  return c([
+  return h([
     o()
-  ], r.prototype, "color"), c([
+  ], s.prototype, "color"), h([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "borderless"), c([
+  ], s.prototype, "borderless"), h([
     o()
-  ], r.prototype, "expansionState"), r;
-}, Z = (n) => {
-  class r extends n {
+  ], s.prototype, "expansionState"), s;
+}, ee = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -430,18 +424,18 @@ const Y = (n) => {
       return await this._updatePromise, t;
     }
   }
-  return r;
-}, ee = y`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+  return s;
+}, te = x`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  g as SbbDisabledMixin,
-  G as SbbDisabledTabIndexActionMixin,
-  J as SbbFormAssociatedCheckboxMixin,
-  R as SbbFormAssociatedMixin,
-  U as SbbHydrationMixin,
-  Q as SbbNamedSlotListMixin,
-  W as SbbNegativeMixin,
-  Y as SbbPanelMixin,
-  L as SbbRequiredMixin,
-  Z as SbbUpdateSchedulerMixin,
-  ee as panelCommonStyle
+  C as SbbDisabledMixin,
+  J as SbbDisabledTabIndexActionMixin,
+  Q as SbbFormAssociatedCheckboxMixin,
+  A as SbbFormAssociatedMixin,
+  I as SbbHydrationMixin,
+  W as SbbNamedSlotListMixin,
+  Y as SbbNegativeMixin,
+  Z as SbbPanelMixin,
+  D as SbbRequiredMixin,
+  ee as SbbUpdateSchedulerMixin,
+  te as panelCommonStyle
 };

package/core/styles/mixins/buttons.scss

@@ -48,49 +48,38 @@
 
 // Variables used in the icon-button
 @mixin icon-button-variables {
+  --sbb-button-color-text: var(--sbb-color-charcoal);
   --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-default-text: var(--sbb-color-charcoal);
   --sbb-button-color-hover-background: var(--sbb-color-milk);
-  --sbb-button-color-hover-border: var(--sbb-color-milk);
-  --sbb-button-color-hover-text: var(--sbb-color-charcoal);
   --sbb-button-color-active-background: var(--sbb-color-cloud);
-  --sbb-button-color-active-border: var(--sbb-color-cloud);
-  --sbb-button-color-active-text: var(--sbb-color-charcoal);
   --sbb-button-color-disabled-background: var(--sbb-color-milk);
   --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-granite);
-  --sbb-button-border-style: solid;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
   --sbb-button-border-disabled-style: dashed;
-  --sbb-button-border-width: #{functions.px-to-rem-build(0)};
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-transition-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-2x)
   );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);
-  --sbb-button-inset: 0;
 
   @include a11y.if-forced-colors {
-    --sbb-button-color-default-text: ButtonText !important;
-    --sbb-button-color-default-border: CanvasText !important;
-    --sbb-button-color-active-text: ButtonText !important;
-    --sbb-button-color-active-border: Highlight !important;
-    --sbb-button-color-hover-text: ButtonText !important;
+    --sbb-button-color-text: ButtonText !important;
+    --sbb-button-color-hover-background: Highlight !important;
+    --sbb-button-color-active-background: Highlight !important;
+    --sbb-button-color-disabled-background: Canvas !important;
+    --sbb-button-color-disabled-border: GrayText !important;
+    --sbb-button-color-disabled-text: GrayText !important;
   }
 }
 
 // Variables used in the icon-button negative variant
 @mixin icon-button-variables-negative {
+  --sbb-button-color-text: var(--sbb-color-milk);
   --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-default-border: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-default-text: var(--sbb-color-milk);
   --sbb-button-color-hover-background: var(--sbb-color-charcoal);
-  --sbb-button-color-hover-border: var(--sbb-color-charcoal);
-  --sbb-button-color-hover-text: var(--sbb-color-milk);
   --sbb-button-color-active-background: var(--sbb-color-iron);
-  --sbb-button-color-active-border: var(--sbb-color-iron);
-  --sbb-button-color-active-text: var(--sbb-color-milk);
   --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
   --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-smoke);
@@ -115,23 +104,21 @@
       transition-timing-function: var(--sbb-button-transition-easing-function);
       transition-property: color;
       border-radius: var(--sbb-button-border-radius);
-      color: var(--sbb-button-color-default-text);
+      color: var(--sbb-button-color-text);
       cursor: pointer;
       user-select: none;
       display: flex;
 
-      // Renders background and border in the background absolute to enable the hover animation
+      // Renders background in the background absolute to enable the hover animation
       &::before {
         position: absolute;
         content: '';
-        inset: var(--sbb-button-inset);
-        border: var(--sbb-button-border-width) var(--sbb-button-border-style)
-          var(--sbb-button-color-default-border);
+        inset: 0;
         border-radius: var(--sbb-button-border-radius);
         background-color: var(--sbb-button-color-default-background);
         transition-duration: var(--sbb-button-transition-duration);
         transition-timing-function: var(--sbb-button-transition-easing-function);
-        transition-property: inset, background-color, border-color;
+        transition-property: inset, background-color;
       }
     }
   }
@@ -148,12 +135,6 @@
 
 // Disabled state for icon-button in form-field
 @mixin icon-button-disabled($button-selector) {
-  --sbb-button-border-width: var(--sbb-border-width-1x);
-
-  @include a11y.if-forced-colors {
-    --sbb-button-color-disabled-text: GrayText !important;
-  }
-
   #{$button-selector} {
     color: var(--sbb-button-color-disabled-text);
     cursor: default;
@@ -162,8 +143,8 @@
 
   #{$button-selector}::before {
     background-color: var(--sbb-button-color-disabled-background);
-    border-color: var(--sbb-button-color-disabled-border);
-    border-style: var(--sbb-button-border-disabled-style);
+    border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)
+      var(--sbb-button-color-disabled-border);
   }
 }
 
@@ -179,21 +160,9 @@
     --sbb-button-translate-y-content-hover: #{functions.px-to-rem-build(-1)};
   }
 
-  @include a11y.if-forced-colors {
-    --sbb-button-color-hover-border: Highlight !important;
-  }
-
   #{$button-selector}::before {
     @include mediaqueries.hover-mq($hover: true) {
-      inset: calc(var(--sbb-button-border-width) * -1);
       background-color: var(--sbb-button-color-hover-background);
-      border-color: var(--sbb-button-color-hover-border);
-    }
-  }
-
-  #{$button-selector} {
-    @include mediaqueries.hover-mq($hover: true) {
-      color: var(--sbb-button-color-hover-text);
     }
   }
 }
@@ -201,8 +170,6 @@
 // Active state for icon-button in form-field
 @mixin icon-button-active($button-selector) {
   #{$button-selector}::before {
-    color: var(--sbb-button-color-active-text);
     background-color: var(--sbb-button-color-active-background);
-    border-color: var(--sbb-button-color-active-border);
   }
 }