@sbb-esta/lyne-elements 1.10.0 → 1.11.1

package/navigation/navigation-marker.js

@@ -1,21 +1,22 @@
-import { css as c, LitElement as l } from "lit";
-import { property as v, state as g, customElement as h } from "lit/decorators.js";
-import { SbbNamedSlotListMixin as d } from "../core/mixins.js";
-import { AgnosticResizeObserver as p } from "../core/observers.js";
-const m = c`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-titles);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-body-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;padding:0;font-size:inherit;--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:"";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host([data-has-active-action]) .sbb-navigation-marker:before{opacity:1}@media (forced-colors: active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}`;
-var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, b = (t, i, n, e) => {
-  for (var a = e > 1 ? void 0 : e ? k(i, n) : i, s = t.length - 1, o; s >= 0; s--)
+import { ResizeController as l } from "@lit-labs/observers/resize-controller.js";
+import { css as c, LitElement as v } from "lit";
+import { property as g, customElement as h } from "lit/decorators.js";
+import { SbbNamedSlotListMixin as p } from "../core/mixins.js";
+const d = c`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-titles);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-body-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;padding:0;font-size:inherit;--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-4);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:"";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host([data-has-active-action]) .sbb-navigation-marker:before{opacity:1}@media (forced-colors: active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);font-weight:700}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}`;
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, b = (t, i, n, e) => {
+  for (var a = e > 1 ? void 0 : e ? f(i, n) : i, s = t.length - 1, o; s >= 0; s--)
     (o = t[s]) && (a = (e ? o(i, n, a) : o(a)) || a);
-  return e && a && f(i, n, a), a;
+  return e && a && m(i, n, a), a;
 };
-let r = class extends d(l) {
+let r = class extends p(v) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = [
+    super(), this.listChildLocalNames = [
       "sbb-navigation-button",
       "sbb-navigation-link"
-    ], this.size = "l", this._navigationMarkerResizeObserver = new p(
-      () => this._setMarkerPosition()
-    );
+    ], this.size = "l", new l(this, {
+      skipInitial: !0,
+      callback: () => this._setMarkerPosition()
+    });
   }
   willUpdate(t) {
     super.willUpdate(t), (t.has("size") || t.has("listChildren")) && this._updateMarkerActions(), this.toggleAttribute("data-has-active-action", !!this._currentActiveAction);
@@ -28,7 +29,7 @@ let r = class extends d(l) {
     ), this._setMarkerPosition();
   }
   connectedCallback() {
-    super.connectedCallback(), this._navigationMarkerResizeObserver.observe(this), this._checkActiveAction();
+    super.connectedCallback(), this._checkActiveAction();
   }
   _checkActiveAction() {
     const t = this.querySelector(
@@ -36,9 +37,6 @@ let r = class extends d(l) {
     );
     t && this.select(t);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._navigationMarkerResizeObserver.disconnect();
-  }
   select(t) {
     t && (this.reset(), t.toggleAttribute("data-action-active", !0), this._currentActiveAction = t, setTimeout(() => this._setMarkerPosition()));
   }
@@ -62,13 +60,10 @@ let r = class extends d(l) {
     return this.renderList();
   }
 };
-r.styles = m;
+r.styles = d;
 b([
-  v({ reflect: !0 })
+  g({ reflect: !0 })
 ], r.prototype, "size", 2);
-b([
-  g()
-], r.prototype, "_currentActiveAction", 2);
 r = b([
   h("sbb-navigation-marker")
 ], r);

package/navigation/navigation.js

@@ -1,33 +1,35 @@
-import { css as h, html as v } from "lit";
-import { property as d, state as m, customElement as p } from "lit/decorators.js";
-import { ref as c } from "lit/directives/ref.js";
-import { SbbFocusHandler as u, setModalityOnNextFocus as g } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as _ } from "../core/base-elements.js";
-import { SbbConnectedAbortController as f, SbbLanguageController as w, SbbInertController as k } from "../core/controllers.js";
-import { hostAttributes as y } from "../core/decorators.js";
-import { SbbScrollHandler as E, findReferencedElement as x } from "../core/dom.js";
-import { i18nCloseNavigation as C } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as O } from "../core/mixins.js";
-import { AgnosticMutationObserver as S, AgnosticResizeObserver as A } from "../core/observers.js";
-import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as N, setAriaOverlayTriggerAttributes as z } from "../core/overlay.js";
+import { MutationController as h } from "@lit-labs/observers/mutation-controller.js";
+import { ResizeController as p } from "@lit-labs/observers/resize-controller.js";
+import { css as m, html as c } from "lit";
+import { property as d, state as u, customElement as _ } from "lit/decorators.js";
+import { ref as v } from "lit/directives/ref.js";
+import { SbbFocusHandler as f, setModalityOnNextFocus as g } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as w } from "../core/base-elements.js";
+import { SbbConnectedAbortController as k, SbbLanguageController as y, SbbInertController as E } from "../core/controllers.js";
+import { hostAttributes as C } from "../core/decorators.js";
+import { SbbScrollHandler as x, findReferencedElement as S } from "../core/dom.js";
+import { i18nCloseNavigation as N } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as A } from "../core/mixins.js";
+import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as O, setAriaOverlayTriggerAttributes as z } from "../core/overlay.js";
 import "../button/transparent-button.js";
-const T = h`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
+const T = m`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-navigation__content{display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
 var L = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
   for (var o = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
     (b = t[r]) && (o = (a ? b(i, n, o) : b(o)) || o);
   return a && o && L(i, n, o), o;
 };
-const B = {
+const I = {
   subtree: !0,
   attributeFilter: ["data-state"]
 };
-let P = 0;
-const R = 150;
-let e = class extends O(_) {
+let B = 0;
+const P = 150;
+let e = class extends A(w) {
   constructor() {
-    super(...arguments), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new f(this), this._language = new w(this), this._inertController = new k(this), this._focusHandler = new u(), this._scrollHandler = new E(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationObserver = new S(
-      (t) => this._onNavigationSectionChange(t)
-    ), this._navigationResizeObserver = new A(() => this._onNavigationResize()), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
+    super(), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new k(this), this._language = new y(this), this._inertController = new E(this), this._focusHandler = new f(), this._scrollHandler = new x(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationResizeObserver = new p(this, {
+      skipInitial: !0,
+      callback: () => this._onNavigationResize()
+    }), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
       var i, n;
       this._isPointerDownEventOnNavigation = l(this._navigation, t) || l(
         (n = (i = this.querySelector(
@@ -37,7 +39,11 @@ let e = class extends O(_) {
       );
     }, this._closeOnBackdropClick = (t) => {
       !this._isPointerDownEventOnNavigation && !l(this._navigation, t) && this.close();
-    };
+    }, new h(this, {
+      skipInitial: !0,
+      config: I,
+      callback: (t) => this._onNavigationSectionChange(t)
+    });
   }
   set trigger(t) {
     const i = this._trigger;
@@ -87,7 +93,7 @@ let e = class extends O(_) {
   // Check if the trigger is valid and attach click event listeners.
   _configure(t) {
     var i;
-    N(this._triggerElement), t && (this._triggerElement = x(t), this._triggerElement && (z(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+    O(this._triggerElement), t && (this._triggerElement = S(t), this._triggerElement && (z(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
       signal: this._navigationController.signal
     })));
   }
@@ -140,24 +146,24 @@ let e = class extends O(_) {
   _onNavigationResize() {
     this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
       () => this.removeAttribute("data-resize-disable-animation"),
-      R
+      P
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${P++}`);
+    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${B++}`);
     const t = this._abort.signal;
-    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this._navigationObserver.observe(this, B), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t });
+    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t });
   }
   disconnectedCallback() {
     var t, i;
-    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), this._scrollHandler.enableScroll();
+    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll();
   }
   render() {
-    const t = v`
+    const t = c`
       <sbb-transparent-button
         id="sbb-navigation-close-button"
         class="sbb-navigation__close"
-        aria-label=${this.accessibilityCloseLabel || C[this._language.current]}
+        aria-label=${this.accessibilityCloseLabel || N[this._language.current]}
         aria-controls="sbb-navigation-overlay"
         negative
         size="m"
@@ -166,19 +172,19 @@ let e = class extends O(_) {
         sbb-navigation-close
       ></sbb-transparent-button>
     `;
-    return v`
+    return c`
       <div class="sbb-navigation__container">
         <div
           id="sbb-navigation-overlay"
           @animationend=${(i) => this._onAnimationEnd(i)}
           class="sbb-navigation"
-          ${c((i) => this._navigation = i)}
+          ${v((i) => this._navigation = i)}
         >
           <div class="sbb-navigation__header">${t}</div>
           <div class="sbb-navigation__wrapper">
             <div
               class="sbb-navigation__content"
-              ${c((i) => this._navigationContentElement = i)}
+              ${v((i) => this._navigationContentElement = i)}
             >
               <slot></slot>
             </div>
@@ -197,11 +203,11 @@ s([
   d({ attribute: "accessibility-close-label" })
 ], e.prototype, "accessibilityCloseLabel", 2);
 s([
-  m()
+  u()
 ], e.prototype, "_activeNavigationSection", 2);
 e = s([
-  p("sbb-navigation"),
-  y({
+  _("sbb-navigation"),
+  C({
     role: "navigation"
   })
 ], e);

package/notification/notification.d.ts

@@ -54,7 +54,6 @@ export declare class SbbNotificationElement extends LitElement {
     close(): void;
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
-    disconnectedCallback(): void;
     private _setNotificationHeight;
     private _onNotificationResize;
     private _onNotificationAnimationEnd;

package/notification/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAShD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAEa,sBAAuB,SAAQ,UAAU;IAEpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACA,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAEzF,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;IAE/E;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF,qCAAqC;IACrC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAEjC;IAEF,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAWrB;;;;;;;;;;;GAWG;AACH,qBAEa,sBAAuB,SAAQ,UAAU;IAEpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,oCAAoC;IACA,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAEzF,wBAAwB;IACwC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF,yFAAyF;IAC1C,UAAU,EAAE,aAAa,CAAO;IAE/E;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,8BAA8B;IACM,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF,qCAAqC;IACrC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAIhC;IAEH,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7F,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/notification.js

@@ -1,15 +1,15 @@
-import { css as f, LitElement as p, html as d, nothing as m } from "lit";
-import { property as a, customElement as h } from "lit/decorators.js";
-import { SbbLanguageController as v } from "./core/controllers.js";
-import { slotState as g } from "./core/decorators.js";
+import { ResizeController as f } from "@lit-labs/observers/resize-controller.js";
+import { css as p, LitElement as m, html as d, nothing as h } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
+import { SbbLanguageController as g } from "./core/controllers.js";
+import { slotState as _ } from "./core/decorators.js";
 import { EventEmitter as r } from "./core/eventing.js";
-import { i18nCloseNotification as _ } from "./core/i18n.js";
-import { AgnosticResizeObserver as u } from "./core/observers.js";
+import { i18nCloseNotification as u } from "./core/i18n.js";
 import "./button/secondary-button.js";
 import "./divider.js";
 import "./icon.js";
 import "./title.js";
-const y = f`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: #f9f9f9;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: #f2f9f5}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: #fffcf2;--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: #fef2f2}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
+const y = p`*,:before,:after{box-sizing:border-box}:host{--sbb-notification-margin: 0;--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-notification-color: var(--sbb-color-charcoal);--sbb-notification-icon-color: var(--sbb-notification-type-color);--sbb-notification-icon-margin-block-start: 0;--sbb-notification-border-width: var(--sbb-border-width-1x);--sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-base-radius: var(--sbb-border-radius-4x);--sbb-notification-border-radius: calc(var(--sbb-notification-base-radius) / 2) var(--sbb-notification-base-radius) var(--sbb-notification-base-radius) calc(var(--sbb-notification-base-radius) / 2);--sbb-notification-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-notification-timing-function: ease-in;--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-state=opening]:not([animation=open],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-state=closing]:not([animation=close],[animation=all])){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([type=info]){--sbb-notification-type-color: var(--sbb-color-smoke);--sbb-notification-type-color-sass: rgb(249.3, 249.3, 249.3);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=success]){--sbb-notification-type-color: var(--sbb-color-green);--sbb-notification-type-color-sass: rgb(242.25, 249.15, 244.95)}:host([type=warn]){--sbb-notification-type-color: var(--sbb-color-peach);--sbb-notification-type-color-sass: rgb(254.85, 251.6, 242.25);--sbb-notification-icon-color: var(--sbb-notification-color)}:host([type=error]){--sbb-notification-type-color: var(--sbb-color-red);--sbb-notification-type-color-sass: rgb(254, 242.25, 242.25)}:host([size=s]){--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs);--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs)}@media (min-width: 37.5rem){:host{--sbb-notification-icon-margin-block-start: calc( ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 )}:host(:where([data-slot-names~=title],[title-content])){--sbb-notification-icon-margin-block-start: calc( ( (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( --sbb-size-icon-ui-small ) ) / 2 )}:host([size=s]){--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-notification-icon-margin-block-start: 0}}.sbb-notification__wrapper{position:relative;inset-inline-start:calc(var(--sbb-notification-base-radius) - var(--sbb-notification-border-width));width:calc(100% - (var(--sbb-notification-base-radius) - var(--sbb-notification-border-width)));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius);opacity:0;max-height:0;margin:0}.sbb-notification__wrapper:before{content:"";position:absolute;inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-radius)}:host(:is([data-state=opened],[data-state=closing])) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}:host([data-state=opening]) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host([data-state=closing]) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s,var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))}.sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius);overflow:hidden;background-color:var(--sbb-notification-type-color-sass)}@supports (background-color: color-mix(in srgb,transparent 5%,white)){.sbb-notification{background-color:color-mix(in srgb,var(--sbb-notification-type-color) 5%,white)}}@media (min-width: 37.5rem){.sbb-notification{grid-template-columns:auto 1fr auto;align-items:flex-start}}:host([size=s]) .sbb-notification{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-notification__icon{color:var(--sbb-notification-icon-color);margin-block-start:var(--sbb-notification-icon-margin-block-start);--sbb-icon-svg-width: var(--sbb-notification-icon-size)}.sbb-notification__title{margin:0}:host(:not([data-slot-names~=title],[title-content])) .sbb-notification__title{display:none}.sbb-notification__content{order:3;grid-area:2/1/3/3;margin-block-start:var(--sbb-spacing-fixed-2x)}@media (min-width: 37.5rem){.sbb-notification__content{order:initial;grid-area:initial;margin-block-start:0;padding-inline:var(--sbb-notification-content-padding-inline)}}.sbb-notification__close-wrapper{display:flex;align-items:center;gap:var(--sbb-spacing-responsive-xxs);height:100%}.sbb-notification__divider{--sbb-divider-color: var(--sbb-notification-type-color);display:none;position:relative;inset-inline-start:var(--sbb-border-width-1x);opacity:.2}@media (min-width: 37.5rem){.sbb-notification__divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin, 0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin, 0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}`;
 var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (t, o, b, s) => {
   for (var n = s > 1 ? void 0 : s ? w(o, b) : o, c = t.length - 1, l; c >= 0; c--)
     (l = t[c]) && (n = (s ? l(o, b, n) : l(n)) || n);
@@ -21,11 +21,13 @@ const z = /* @__PURE__ */ new Map([
   ["warn", "circle-exclamation-point-small"],
   ["error", "circle-cross-small"]
 ]), O = 150;
-let i = class extends p {
+let i = class extends m {
   constructor() {
-    super(...arguments), this.type = "info", this.titleLevel = "3", this.readonly = !1, this.size = "m", this.animation = "all", this._resizeObserverTimeout = null, this._language = new v(this), this._notificationResizeObserver = new u(
-      () => this._onNotificationResize()
-    ), this._willOpen = new r(
+    super(...arguments), this.type = "info", this.titleLevel = "3", this.readonly = !1, this.size = "m", this.animation = "all", this._resizeObserverTimeout = null, this._language = new g(this), this._notificationResizeObserver = new f(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => this._onNotificationResize()
+    }), this._willOpen = new r(
       this,
       i.events.willOpen
     ), this._didOpen = new r(
@@ -61,9 +63,6 @@ let i = class extends p {
       ".sbb-notification__wrapper"
     ), await this.updateComplete, this._setNotificationHeight(), this._open();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._notificationResizeObserver.disconnect();
-  }
   _setNotificationHeight() {
     var o;
     if (!((o = this._notificationElement) != null && o.scrollHeight))
@@ -109,13 +108,13 @@ let i = class extends p {
             <slot></slot>
           </span>
 
-          ${this.readonly ? m : d`<span class="sbb-notification__close-wrapper">
+          ${this.readonly ? h : d`<span class="sbb-notification__close-wrapper">
                 <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
                 <sbb-secondary-button
                   size=${this.size}
                   icon-name="cross-small"
                   @click=${() => this.close()}
-                  aria-label=${_[this._language.current]}
+                  aria-label=${u[this._language.current]}
                   class="sbb-notification__close"
                 ></sbb-secondary-button>
               </span>`}
@@ -150,8 +149,8 @@ e([
   a({ reflect: !0 })
 ], i.prototype, "animation", 2);
 i = e([
-  h("sbb-notification"),
-  g()
+  v("sbb-notification"),
+  _()
 ], i);
 export {
   i as SbbNotificationElement

package/option/optgroup/optgroup-base-element.d.ts

@@ -8,12 +8,10 @@ export declare abstract class SbbOptgroupBaseElement extends SbbOptgroupBaseElem
     label: string;
     protected negative: boolean;
     private _inertAriaGroups;
-    private _negativeObserver;
     protected abstract get options(): SbbOptionBaseElement[];
     constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
     protected abstract setAttributeFromParent(): void;
     protected abstract getAutocompleteParent(): SbbAutocompleteBaseElement | null;
     private _handleSlotchange;

package/option/optgroup/optgroup-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optgroup-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,kBAAkB,CAAC;;AAS1B,8BACsB,sBAAuB,SAAQ,2BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,SAAS,CAAC,QAAQ,UAAS;IAE3B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,iBAAiB,CAAgE;IAEzF,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;;IAczC,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5D,oBAAoB,IAAI,IAAI;IAK5C,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;IAE7E,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C"}
+{"version":3,"file":"optgroup-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAIxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,kBAAkB,CAAC;;AAS1B,8BACsB,sBAAuB,SAAQ,2BAEpD;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,SAAS,CAAC,QAAQ,UAAS;IAE3B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,SAAS,CAAC,QAAQ,KAAK,OAAO,IAAI,oBAAoB,EAAE,CAAC;;IAsBzC,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5E,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;IAE7E,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAMxC,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C"}

package/option/optgroup.js

@@ -1,37 +1,35 @@
 import { property as g, state as d, customElement as c } from "lit/decorators.js";
-import { css as u, LitElement as h, html as v } from "lit";
-import { hostAttributes as f } from "../core/decorators.js";
-import { setOrRemoveAttribute as x, isSafari as m } from "../core/dom.js";
-import { SbbDisabledMixin as _, SbbHydrationMixin as y } from "../core/mixins.js";
-import { AgnosticMutationObserver as A } from "../core/observers.js";
+import { MutationController as u } from "@lit-labs/observers/mutation-controller.js";
+import { css as h, LitElement as v, html as f } from "lit";
+import { hostAttributes as x } from "../core/decorators.js";
+import { setOrRemoveAttribute as m, isSafari as _ } from "../core/dom.js";
+import { SbbDisabledMixin as y, SbbHydrationMixin as A } from "../core/mixins.js";
 import "../divider.js";
-const O = u`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`;
-var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, e, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(i, e) : i, a = t.length - 1, r; a >= 0; a--)
+const O = h`*,:before,:after{box-sizing:border-box}:host{--sbb-optgroup-divider-display: block;--sbb-optgroup-divider-spacing: 0;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);--sbb-optgroup-label-color: var(--sbb-color-metal);display:block}:host(:first-child){--sbb-optgroup-divider-display: none;--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x)}:host([data-variant=select]){--sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);--sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-optgroup-label-padding-start: 0;--sbb-optgroup-label-font-size: inherit}:host([data-variant=select]:first-child){--sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x)}:host([data-negative]){--sbb-optgroup-label-color: var(--sbb-color-smoke)}.sbb-optgroup{margin-block:var(--sbb-spacing-fixed-4x);margin-inline:var(--sbb-spacing-fixed-4x)}.sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;column-gap:var(--sbb-spacing-responsive-xxxs);color:var(--sbb-optgroup-label-color);-webkit-text-fill-color:var(--sbb-optgroup-label-color);padding-inline:var(--sbb-optgroup-label-padding-inline);padding-block:var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x)}:host([data-variant=select][data-multiple]) .sbb-optgroup__label{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);padding-inline-start:calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x))}.sbb-optgroup__divider{display:var(--sbb-optgroup-divider-display);padding-block:var(--sbb-optgroup-divider-spacing)}.sbb-optgroup__icon-space{display:var(--sbb-option-icon-container-display, none);min-width:var(--sbb-size-icon-ui-small)}`;
+var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (t, i, e, o) => {
+  for (var s = o > 1 ? void 0 : o ? C(i, e) : i, a = t.length - 1, r; a >= 0; a--)
     (r = t[a]) && (s = (o ? r(i, e, s) : r(s)) || s);
-  return o && s && C(i, e, s), s;
+  return o && s && z(i, e, s), s;
 };
-const l = m;
-let b = class extends _(
-  y(h)
+const l = _;
+let b = class extends y(
+  A(v)
 ) {
   constructor() {
-    super(), this.negative = !1, this._inertAriaGroups = !1, this._negativeObserver = new A(() => this._onNegativeChange()), l && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = l) : this._inertAriaGroups = l);
+    super(), this.negative = !1, this._inertAriaGroups = !1, new u(this, {
+      config: {
+        attributes: !0,
+        attributeFilter: ["data-negative"]
+      },
+      callback: () => this._onNegativeChange()
+    }), l && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = l) : this._inertAriaGroups = l);
   }
   connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = this._negativeObserver) == null || t.disconnect(), this.setAttributeFromParent(), this._negativeObserver.observe(this, {
-      attributes: !0,
-      attributeFilter: ["data-negative"]
-    }), this._proxyGroupLabelToOptions();
+    super.connectedCallback(), this.setAttributeFromParent(), this._proxyGroupLabelToOptions();
   }
   willUpdate(t) {
     super.willUpdate(t), t.has("disabled") && (this._inertAriaGroups || this.setAttribute("aria-disabled", this.disabled.toString()), this.proxyDisabledToOptions()), t.has("label") && this._proxyGroupLabelToOptions();
   }
-  disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this._negativeObserver) == null || t.disconnect();
-  }
   _handleSlotchange() {
     this.proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
   }
@@ -46,7 +44,7 @@ let b = class extends _(
         for (const e of this.options)
           e.removeAttribute("data-group-label"), (i = e.requestUpdate) == null || i.call(e);
     else {
-      x(this, "aria-label", this.label);
+      m(this, "aria-label", this.label);
       return;
     }
   }
@@ -66,7 +64,7 @@ let b = class extends _(
     this.negative = this.hasAttribute("data-negative");
   }
   render() {
-    return v`
+    return f`
       <div class="sbb-optgroup__divider">
         <sbb-divider ?negative=${this.negative}></sbb-divider>
       </div>
@@ -79,24 +77,24 @@ let b = class extends _(
   }
 };
 b.styles = O;
-n([
+p([
   g()
 ], b.prototype, "label", 2);
-n([
+p([
   d()
 ], b.prototype, "negative", 2);
-n([
+p([
   d()
 ], b.prototype, "_inertAriaGroups", 2);
-b = n([
-  f({ role: l ? null : "group" })
+b = p([
+  x({ role: l ? null : "group" })
 ], b);
 var G = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (t, i, e, o) => {
   for (var s = o > 1 ? void 0 : o ? w(i, e) : i, a = t.length - 1, r; a >= 0; a--)
     (r = t[a]) && (s = (o ? r(i, e, s) : r(s)) || s);
   return o && s && G(i, e, s), s;
 };
-let p = class extends b {
+let n = class extends b {
   get options() {
     var t;
     return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
@@ -117,10 +115,10 @@ let p = class extends b {
     (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : (i = this.closest) != null && i.call(this, "sbb-select") && this.setAttribute("data-variant", "select");
   }
 };
-p = P([
+n = P([
   c("sbb-optgroup")
-], p);
+], n);
 export {
-  p as SbbOptGroupElement,
+  n as SbbOptGroupElement,
   b as SbbOptgroupBaseElement
 };

package/option/option/option-base-element.d.ts

@@ -36,8 +36,6 @@ export declare abstract class SbbOptionBaseElement extends SbbOptionBaseElement_
     private _highlightString;
     private _inertAriaGroups;
     private _abort;
-    /** MutationObserver on data attributes. */
-    private _optionAttributeObserver;
     constructor();
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /**
@@ -53,7 +51,6 @@ export declare abstract class SbbOptionBaseElement extends SbbOptionBaseElement_
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
     protected abstract selectByClick(event: MouseEvent): void;
     protected abstract setAttributeFromParent(): void;
     protected updateDisableHighlight(disabled: boolean): void;

package/option/option/option-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAgBrC,8BACsB,oBAAqB,SAAQ,yBAElD;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED;;;;;OAKG;IACgD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,UAAS;IAEpC,yFAAyF;IAChF,SAAS,CAAC,iBAAiB,UAAS;IAEpC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAElC,0CAA0C;IACjC,SAAS,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAE1D,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,MAAM,CAAyC;IAEvD,2CAA2C;IAC3C,OAAO,CAAC,wBAAwB,CAE9B;;IAcc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAK5C,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAUtB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,yEAAyE;IACzE,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAWzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}
+{"version":3,"file":"option-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/option/option-base-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAI3D,OAAO,6BAA6B,CAAC;;AAgBrC,8BACsB,oBAAqB,SAAQ,yBAElD;IACC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAEpC;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED;;;;;OAKG;IACgD,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,YAAY,CAAC;IAEjD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,EAAE,YAAY,CAAC;IAEhD,4CAA4C;IACnC,SAAS,CAAC,QAAQ,UAAS;IAEpC,yFAAyF;IAChF,SAAS,CAAC,iBAAiB,UAAS;IAEpC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAElC,0CAA0C;IACjC,SAAS,CAAC,qBAAqB,EAAE,OAAO,CAAS;IAE1D,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAE/C,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,MAAM,CAAyC;;IAmBvC,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7C,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IAEjD,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKzD;;;OAGG;IACI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAItC,SAAS,CAAC,IAAI,IAAI,IAAI;IAStB,SAAS,CAAC,kBAAkB,IAAI,IAAI;IAQpC,OAAO,CAAC,mBAAmB;IAI3B,yEAAyE;IACzE,SAAS,CAAC,wBAAwB,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAWzE,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAuBtC,SAAS,CAAC,mBAAmB,IAAI,cAAc;IAwB/C,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,WAAW,IAAI,cAAc,GAAG,OAAO,OAAO;IAIxD,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;cAIpC,MAAM,IAAI,cAAc;CAmB5C"}