@sbb-esta/lyne-elements 1.3.0 → 1.4.0

package/image.js

@@ -1,14 +1,14 @@
-import { css as y, LitElement as _, html as d, nothing as l } from "lit";
+import { css as y, LitElement as _, html as d, nothing as m } from "lit";
 import { property as s, eventOptions as k, customElement as v } from "lit/decorators.js";
 import { ref as $ } from "lit/directives/ref.js";
 import { hostContext as x } from "./core/dom.js";
-const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{margin:0}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{position:relative;overflow:hidden;max-width:100%;border-radius:var(--sbb-image-border-radius);aspect-ratio:var(--sbb-image-aspect-ratio)}.sbb-image__caption{--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);margin-block-start:var(--sbb-spacing-fixed-4x)}`;
-var h = Object.freeze, u = Object.defineProperty, A = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? A(t, r) : t, p = e.length - 1, b; p >= 0; p--)
+const w = 0, S = 359, P = 360, M = 599, z = 600, C = 839, B = 840, L = 1023, O = 1024, Q = 1279, F = 1280, D = 1439, E = 1440, T = 2579, I = 16, R = y`*,:before,:after{box-sizing:border-box}:host{--sbb-image-border-radius: var(--sbb-border-radius-4x);--sbb-image-aspect-ratio: auto;--sbb-image-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}:host([aspect-ratio="1-1"]){--sbb-image-aspect-ratio: 1 / 1}:host([aspect-ratio="1-2"]){--sbb-image-aspect-ratio: 1 / 2}:host([aspect-ratio="2-1"]){--sbb-image-aspect-ratio: 2 / 1}:host([aspect-ratio="2-3"]){--sbb-image-aspect-ratio: 2 / 3}:host([aspect-ratio="3-2"]){--sbb-image-aspect-ratio: 3 / 2}:host([aspect-ratio="3-4"]){--sbb-image-aspect-ratio: 3 / 4}:host([aspect-ratio="4-3"]){--sbb-image-aspect-ratio: 4 / 3}:host([aspect-ratio="4-5"]){--sbb-image-aspect-ratio: 4 / 5}:host([aspect-ratio="5-4"]){--sbb-image-aspect-ratio: 5 / 4}:host([aspect-ratio="16-9"]){--sbb-image-aspect-ratio: 16 / 9}:host([aspect-ratio="9-16"]){--sbb-image-aspect-ratio: 9 / 16}:host([data-teaser]){--sbb-image-aspect-ratio: 1 / 1}@media (min-width: 37.5rem){:host([data-teaser]){--sbb-image-aspect-ratio: 16 / 9}}:host(:is([border-radius=none],[data-teaser])){--sbb-image-border-radius: 0}:host([border-radius=round]:not([data-teaser])){--sbb-image-border-radius: var(--sbb-border-radius-infinity)}.sbb-image__figure{display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-4x);margin:0;height:100%}.sbb-image__img{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.000001}:host([data-loaded]) .sbb-image__img{opacity:.999999}:host([data-loaded]) .sbb-image__blurred{opacity:0}:is(.sbb-image__img,.sbb-image__blurred){width:100%;height:100%;object-fit:cover;object-position:var(--sbb-image-object-position);transition:opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing)}.sbb-image__wrapper{display:flex;position:relative;overflow:hidden;width:100%;height:100%;aspect-ratio:var(--sbb-image-aspect-ratio);border-radius:var(--sbb-image-border-radius)}.sbb-image__caption{--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)}`;
+var h = Object.freeze, u = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (e, t, r, i) => {
+  for (var n = i > 1 ? void 0 : i ? j(t, r) : t, p = e.length - 1, b; p >= 0; p--)
     (b = e[p]) && (n = (i ? b(t, r, n) : b(n)) || n);
   return i && n && u(t, r, n), n;
-}, U = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
-const H = (e) => {
+}, A = (e, t) => h(u(e, "raw", { value: h(e.slice()) })), g;
+const U = (e) => {
   if (!e || e.length === 0)
     return [];
   let t;
@@ -25,13 +25,13 @@ const H = (e) => {
   const n = ["image", "mediaQueries"];
   return t.breakpoints.forEach((p) => {
     const b = Object.keys(p);
-    b.forEach((m) => {
-      n.includes(m) || (r = !0);
-    }), n.forEach((m) => {
-      b.includes(m) || (i = !0);
+    b.forEach((l) => {
+      n.includes(l) || (r = !0);
+    }), n.forEach((l) => {
+      b.includes(l) || (i = !0);
     });
   }), r || i ? [] : t.breakpoints;
-}, j = {
+}, H = {
   once: !0,
   passive: !0
 }, c = (e) => e / I, V = {
@@ -146,7 +146,7 @@ let a = class extends _ {
             ]
           }
         ]
-      }`, H(e);
+      }`, U(e);
   }
   _createMediaQueryString(e) {
     let t = "";
@@ -177,25 +177,25 @@ let a = class extends _ {
     return d`
       <figure class="sbb-image__figure">
         <div class="sbb-image__wrapper">
-          ${this.skipLqip ? l : d`<img
+          ${this.skipLqip ? m : d`<img
                 alt=""
                 class="sbb-image__blurred"
                 src=${r}
                 width="1000"
                 height="562"
-                loading=${this.loading ?? l}
-                decoding=${this.decoding ?? l}
+                loading=${this.loading ?? m}
+                decoding=${this.decoding ?? m}
               />`}
 
           <picture>
             <!-- render picture element sources -->
             ${n.map((p) => {
-      const b = p.image.height, m = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
+      const b = p.image.height, l = p.image.width, f = this._createMediaQueryString(p.mediaQueries);
       return [
         d` <source
                   media=${`${f}`}
-                  sizes=${`${m}px`}
-                  srcset=${`${i}&w=${m}&h=${b}&q=${this._config.nonRetinaQuality} ${m}w, ${i}&w=${m * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${m * 2}w`}
+                  sizes=${`${l}px`}
+                  srcset=${`${i}&w=${l}&h=${b}&q=${this._config.nonRetinaQuality} ${l}w, ${i}&w=${l * 2}&h=${b * 2}&q=${this._config.retinaQuality} ${l * 2}w`}
                 ></source>`
       ];
     })}
@@ -207,9 +207,9 @@ let a = class extends _ {
               src=${this.imageSrc}
               width="1000"
               height="562"
-              loading=${this.loading ?? l}
-              decoding=${this.decoding ?? l}
-              .fetchPriority=${this.importance ?? l}
+              loading=${this.loading ?? m}
+              decoding=${this.decoding ?? m}
+              .fetchPriority=${this.importance ?? m}
             />
           </picture>
         </div>
@@ -219,8 +219,8 @@ let a = class extends _ {
               ${$((p) => {
       this._captionElement = p;
     })}
-            ></figcaption>` : l}
-        ${t ? d(g || (g = U(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : l}
+            ></figcaption>` : m}
+        ${t ? d(g || (g = A(['<script type="application/ld+json" .innerHTML=', "><\/script>"])), t) : m}
       </figure>
     `;
   }
@@ -282,7 +282,7 @@ o([
   s({ attribute: "aspect-ratio", reflect: !0 })
 ], a.prototype, "aspectRatio", 2);
 o([
-  k(j)
+  k(H)
 ], a.prototype, "_imageLoaded", 1);
 a = o([
   v("sbb-image")

package/index.d.ts

@@ -3,6 +3,12 @@ import { SbbActionGroupElement } from "./action-group.js";
 import { SbbAlertElement } from "./alert/alert.js";
 import { SbbAlertGroupElement } from "./alert/alert-group.js";
 import { SbbAutocompleteElement } from "./autocomplete.js";
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid.js";
+import { SbbAutocompleteGridButtonElement } from "./autocomplete-grid/autocomplete-grid-button.js";
+import { SbbAutocompleteGridCellElement } from "./autocomplete-grid/autocomplete-grid-cell.js";
+import { SbbAutocompleteGridOptgroupElement } from "./autocomplete-grid/autocomplete-grid-optgroup.js";
+import { SbbAutocompleteGridOptionElement } from "./autocomplete-grid/autocomplete-grid-option.js";
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid/autocomplete-grid-row.js";
 import { SbbBreadcrumbElement } from "./breadcrumb/breadcrumb.js";
 import { SbbBreadcrumbGroupElement } from "./breadcrumb/breadcrumb-group.js";
 import { SbbButtonElement } from "./button/button.js";
@@ -120,6 +126,12 @@ declare global {
   var SbbAlertElement: SbbAlertElement;
   var SbbAlertGroupElement: SbbAlertGroupElement;
   var SbbAutocompleteElement: SbbAutocompleteElement;
+  var SbbAutocompleteGridElement: SbbAutocompleteGridElement;
+  var SbbAutocompleteGridButtonElement: SbbAutocompleteGridButtonElement;
+  var SbbAutocompleteGridCellElement: SbbAutocompleteGridCellElement;
+  var SbbAutocompleteGridOptgroupElement: SbbAutocompleteGridOptgroupElement;
+  var SbbAutocompleteGridOptionElement: SbbAutocompleteGridOptionElement;
+  var SbbAutocompleteGridRowElement: SbbAutocompleteGridRowElement;
   var SbbBreadcrumbElement: SbbBreadcrumbElement;
   var SbbBreadcrumbGroupElement: SbbBreadcrumbGroupElement;
   var SbbButtonElement: SbbButtonElement;

package/index.js

@@ -3,6 +3,12 @@ import { SbbActionGroupElement } from "./action-group.js";
 import { SbbAlertElement } from "./alert/alert.js";
 import { SbbAlertGroupElement } from "./alert/alert-group.js";
 import { SbbAutocompleteElement } from "./autocomplete.js";
+import { SbbAutocompleteGridElement } from "./autocomplete-grid/autocomplete-grid.js";
+import { SbbAutocompleteGridButtonElement } from "./autocomplete-grid/autocomplete-grid-button.js";
+import { SbbAutocompleteGridCellElement } from "./autocomplete-grid/autocomplete-grid-cell.js";
+import { SbbAutocompleteGridOptgroupElement } from "./autocomplete-grid/autocomplete-grid-optgroup.js";
+import { SbbAutocompleteGridOptionElement } from "./autocomplete-grid/autocomplete-grid-option.js";
+import { SbbAutocompleteGridRowElement } from "./autocomplete-grid/autocomplete-grid-row.js";
 import { SbbBreadcrumbElement } from "./breadcrumb/breadcrumb.js";
 import { SbbBreadcrumbGroupElement } from "./breadcrumb/breadcrumb-group.js";
 import { SbbButtonElement } from "./button/button.js";
@@ -119,6 +125,12 @@ globalThis.SbbActionGroupElement = SbbActionGroupElement;
 globalThis.SbbAlertElement = SbbAlertElement;
 globalThis.SbbAlertGroupElement = SbbAlertGroupElement;
 globalThis.SbbAutocompleteElement = SbbAutocompleteElement;
+globalThis.SbbAutocompleteGridElement = SbbAutocompleteGridElement;
+globalThis.SbbAutocompleteGridButtonElement = SbbAutocompleteGridButtonElement;
+globalThis.SbbAutocompleteGridCellElement = SbbAutocompleteGridCellElement;
+globalThis.SbbAutocompleteGridOptgroupElement = SbbAutocompleteGridOptgroupElement;
+globalThis.SbbAutocompleteGridOptionElement = SbbAutocompleteGridOptionElement;
+globalThis.SbbAutocompleteGridRowElement = SbbAutocompleteGridRowElement;
 globalThis.SbbBreadcrumbElement = SbbBreadcrumbElement;
 globalThis.SbbBreadcrumbGroupElement = SbbBreadcrumbGroupElement;
 globalThis.SbbButtonElement = SbbButtonElement;

package/map-container.js

@@ -1,11 +1,11 @@
 import { css as m, LitElement as p, html as n, nothing as l } from "lit";
 import { property as h, state as u, customElement as v } from "lit/decorators.js";
 import { ref as d } from "lit/directives/ref.js";
-import { SbbLanguageController as g } from "./core/controllers.js";
-import { i18nMapContainerButtonLabel as _ } from "./core/i18n.js";
+import { SbbLanguageController as _ } from "./core/controllers.js";
+import { i18nMapContainerButtonLabel as g } from "./core/i18n.js";
 import { AgnosticIntersectionObserver as w } from "./core/observers.js";
 import "./button/tertiary-button.js";
-const f = m`*,:before,:after{box-sizing:border-box}:host{--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-border-radius-4x) );--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto;height:100%}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)));overflow:hidden}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);grid-column:1/3;grid-row:2/3;width:100%;height:calc(100% + var(--sbb-map-container-border-radius));overflow:hidden auto;position:relative;z-index:2;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;z-index:1;grid-row:1/2;grid-column:1/3;height:var(--sbb-map-container-map-height)}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;height:100%;position:relative}}`;
+const f = m`*,:before,:after{box-sizing:border-box}:host{--sbb-map-container-map-height-zero: 18.4375rem;--sbb-map-container-map-height-small: 20rem;--sbb-map-container-sidebar-width: 25rem;--sbb-map-container-sidebar-background-color: var(--sbb-color-white);--sbb-map-container-border-radius: var(--sbb-border-radius-4x);--sbb-map-container-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-zero) + var(--sbb-map-container-border-radius) );display:block}@media (min-width: 37.5rem){:host{--sbb-map-container-map-height: calc( var(--sbb-map-container-map-height-small) + var(--sbb-map-container-border-radius) )}}@media (min-width: 80rem){:host{--sbb-map-container-sidebar-width: 30rem}}.sbb-map-container{display:grid;grid-template-rows:auto auto}@media (min-width: 52.5rem){.sbb-map-container{grid-template-columns:max(var(--sbb-map-container-sidebar-width)) calc(100% - var(--sbb-map-container-sidebar-width));height:calc(100vh - var(--sbb-map-container-margin-start, var(--sbb-header-height)))}}.sbb-map-container__sidebar-button{position:fixed;left:50%;inset-block-end:var(--sbb-spacing-fixed-5x);visibility:hidden;opacity:0;transform:translate(-50%) translateY(calc(100% + var(--sbb-spacing-fixed-5x)));transition:opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing) var(--sbb-map-container-animation-duration),transform var(--sbb-map-container-animation-duration) var(--sbb-animation-easing)}:host([data-scroll-up-button-visible]) .sbb-map-container__sidebar-button{transition:visibility var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-map-container-animation-duration) var(--sbb-animation-easing),transform var(--sbb-map-container-animation-duration) ease-out;visibility:visible;opacity:1;transform:translate(-50%) translateY(0)}@media (min-width: 52.5rem){.sbb-map-container__sidebar-button{display:none}}.sbb-map-container__sidebar{--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);grid-column:1/3;grid-row:2/3;width:100%;overflow:hidden auto;position:relative;border-start-end-radius:var(--sbb-map-container-border-radius);border-start-start-radius:var(--sbb-map-container-border-radius);margin-block-start:calc(var(--sbb-map-container-border-radius) * -1);background-color:var(--sbb-map-container-sidebar-background-color)}.sbb-map-container__sidebar::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-map-container__sidebar::-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-map-container__sidebar::-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-map-container__sidebar::-webkit-scrollbar-button,.sbb-map-container__sidebar::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-map-container__sidebar{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (min-width: 52.5rem){.sbb-map-container__sidebar{grid-column:1/2;grid-row:1/3;border-radius:0;margin-block-start:0;border-block-start:var(--sbb-border-width-1x) solid var(--sbb-color-cloud)}}.sbb-map-container__map{position:sticky;inset-block-start:0;inset-inline:0;grid-row:1/2;grid-column:1/3}@media (max-width: 52.4375rem){.sbb-map-container__map{height:var(--sbb-map-container-map-height)}}@media (min-width: 52.5rem){.sbb-map-container__map{grid-row:1/3;grid-column:2/3;position:relative}}`;
 var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i, b) => {
   for (var a = b > 1 ? void 0 : b ? y(t, i) : t, s = r.length - 1, e; s >= 0; s--)
     (e = r[s]) && (a = (b ? e(t, i, a) : e(a)) || a);
@@ -13,7 +13,7 @@ var k = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, t, i
 };
 let o = class extends p {
   constructor() {
-    super(...arguments), this.hideScrollUpButton = !1, this._scrollUpButtonVisible = !1, this._language = new g(this), this._observer = new w(
+    super(...arguments), this.hideScrollUpButton = !1, this._scrollUpButtonVisible = !1, this._language = new _(this), this._observer = new w(
       (r) => this._toggleButtonVisibilityOnIntersect(r)
     );
   }
@@ -47,6 +47,9 @@ let o = class extends p {
   render() {
     return n`
       <div class="sbb-map-container">
+        <div class="sbb-map-container__map">
+          <slot name="map"></slot>
+        </div>
         <div class="sbb-map-container__sidebar">
           ${this.hideScrollUpButton ? l : n`<span
                 ${d((r) => {
@@ -66,12 +69,9 @@ let o = class extends p {
       r && (r.inert = !this._scrollUpButtonVisible);
     })}
               >
-                ${_[this._language.current]}
+                ${g[this._language.current]}
               </sbb-tertiary-button>`}
         </div>
-        <div class="sbb-map-container__map">
-          <slot name="map"></slot>
-        </div>
       </div>
     `;
   }

package/navigation/navigation-marker/navigation-marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-marker/navigation-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAGnC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAElD,OAAO,CAAC,oBAAoB,CAAC,CAAwD;IAE9F,OAAO,CAAC,+BAA+B,CAErC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAS9F,OAAO,CAAC,oBAAoB;IAWZ,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,kBAAkB;IASV,oBAAoB,IAAI,IAAI;IAKrC,MAAM,CAAC,MAAM,EAAE,0BAA0B,GAAG,wBAAwB,GAAG,IAAI;cAU/D,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAKzF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,kBAAkB;cAcP,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
+{"version":3,"file":"navigation-marker.d.ts","sourceRoot":"","sources":["../../../../src/elements/navigation/navigation-marker/navigation-marker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;AAItE;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,+BAGnC;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAG7C;IAEF;;OAEG;IACiC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAElD,OAAO,CAAC,oBAAoB,CAAC,CAAwD;IAE9F,OAAO,CAAC,+BAA+B,CAErC;cAEiB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAS9F,OAAO,CAAC,oBAAoB;IAWZ,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,kBAAkB;IASV,oBAAoB,IAAI,IAAI;IAKrC,MAAM,CAAC,MAAM,EAAE,0BAA0B,GAAG,wBAAwB,GAAG,IAAI;cAU/D,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;IAMzF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,kBAAkB;cAcP,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}

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

@@ -0,0 +1,28 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { SbbOptionBaseElement } from '../option.js';
+
+declare const SbbOptgroupBaseElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+export declare abstract class SbbOptgroupBaseElement extends SbbOptgroupBaseElement_base {
+    static styles: CSSResultGroup;
+    /** Option group label. */
+    label: string;
+    protected negative: boolean;
+    private _inertAriaGroups;
+    private _negativeObserver;
+    protected abstract get options(): SbbOptionBaseElement[];
+    protected abstract setAttributeFromParent(): void;
+    protected abstract getAutocompleteParent(): SbbAutocompleteBaseElement | null;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _handleSlotchange;
+    private _proxyGroupLabelToOptions;
+    protected proxyDisabledToOptions(): void;
+    private _highlightOptions;
+    private _onNegativeChange;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=optgroup-base-element.d.ts.map

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

@@ -0,0 +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;IACzD,SAAS,CAAC,QAAQ,CAAC,sBAAsB,IAAI,IAAI;IACjD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,IAAI,0BAA0B,GAAG,IAAI;;IAc7D,iBAAiB,IAAI,IAAI;cAYtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5D,oBAAoB,IAAI,IAAI;IAK5C,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/optgroup.d.ts

@@ -1,35 +1,22 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbAutocompleteElement } from '../../autocomplete.js';
+import { SbbOptionElement } from '../option.js';
+import { SbbOptgroupBaseElement } from './optgroup-base-element.js';
 
-declare const SbbOptGroupElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
 /**
  * It can be used as a container for one or more `sbb-option`.
  *
  * @slot - Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.
  */
-export declare class SbbOptGroupElement extends SbbOptGroupElement_base {
-    static styles: CSSResultGroup;
-    /** Option group label. */
-    label: string;
-    private _negative;
-    private _inertAriaGroups;
-    private _negativeObserver;
-    private get _options();
-    constructor();
+export declare class SbbOptGroupElement extends SbbOptgroupBaseElement {
+    protected get options(): SbbOptionElement[];
+    protected getAutocompleteParent(): SbbAutocompleteElement | null;
+    protected setAttributeFromParent(): void;
     connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
     private _setVariantByContext;
-    private _handleSlotchange;
-    private _proxyGroupLabelToOptions;
-    private _proxyDisabledToOptions;
-    private _highlightOptions;
-    private _onNegativeChange;
-    protected render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sbb-optgroup': SbbOptGroupElement;
     }
 }
-export {};
 //# sourceMappingURL=optgroup.d.ts.map

package/option/optgroup/optgroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAWvC,OAAO,kBAAkB,CAAC;;AAS1B;;;;GAIG;AACH,qBAEa,kBAAmB,SAAQ,uBAA+C;IACrF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,0BAA0B;IACP,KAAK,EAAG,MAAM,CAAC;IAEzB,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,gBAAgB,CAAS;IAE1C,OAAO,CAAC,iBAAiB,CAAgE;IAEzF,OAAO,KAAK,QAAQ,GAEnB;;IAce,iBAAiB,IAAI,IAAI;cAmBtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAe5D,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,yBAAyB;IAkBjC,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
+{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../../src/elements/option/optgroup/optgroup.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,sBAAsB;IAC5D,SAAS,KAAK,OAAO,IAAI,gBAAgB,EAAE,CAE1C;IAED,SAAS,CAAC,qBAAqB,IAAI,sBAAsB,GAAG,IAAI;IAIhE,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAKxB,iBAAiB,IAAI,IAAI;IAMzC,OAAO,CAAC,oBAAoB;CAO7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/option/optgroup.d.ts

@@ -1,2 +1,3 @@
 export * from './optgroup/optgroup.js';
+export * from './optgroup/optgroup-base-element.js';
 //# sourceMappingURL=optgroup.d.ts.map

package/option/optgroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../src/elements/option/optgroup.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"optgroup.d.ts","sourceRoot":"","sources":["../../../src/elements/option/optgroup.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qCAAqC,CAAC"}

package/option/optgroup.js

@@ -1,83 +1,74 @@
-import { css as d, LitElement as g, html as c } from "lit";
-import { property as h, state as n, customElement as u } from "lit/decorators.js";
-import { hostAttributes as v } from "../core/decorators.js";
-import { setOrRemoveAttribute as f, isSafari as x } from "../core/dom.js";
-import { SbbDisabledMixin as _, SbbHydrationMixin as m } from "../core/mixins.js";
-import { AgnosticMutationObserver as y } from "../core/observers.js";
+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 "../divider.js";
-const A = d`*,: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 O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, e, i, o) => {
-  for (var s = o > 1 ? void 0 : o ? z(e, i) : e, l = t.length - 1, p; l >= 0; l--)
-    (p = t[l]) && (s = (o ? p(e, i, s) : p(s)) || s);
-  return o && s && O(e, i, s), s;
+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--)
+    (r = t[a]) && (s = (o ? r(i, e, s) : r(s)) || s);
+  return o && s && C(i, e, s), s;
 };
-const r = x;
-let a = class extends _(m(g)) {
+const l = m;
+let b = class extends _(
+  y(h)
+) {
   constructor() {
-    super(), this._negative = !1, this._inertAriaGroups = !1, this._negativeObserver = new y(() => this._onNegativeChange()), r && (this.hydrationRequired ? this.hydrationComplete.then(() => this._inertAriaGroups = r) : this._inertAriaGroups = r);
-  }
-  get _options() {
-    var t;
-    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
+    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);
   }
   connectedCallback() {
-    var t, e;
-    super.connectedCallback(), (t = this._negativeObserver) == null || t.disconnect(), this._negative = !!((e = this.closest) != null && e.call(
-      this,
-      ":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]"
-    )), this.toggleAttribute("data-negative", this._negative), this._negativeObserver.observe(this, {
+    var t;
+    super.connectedCallback(), (t = this._negativeObserver) == null || t.disconnect(), this.setAttributeFromParent(), this._negativeObserver.observe(this, {
       attributes: !0,
       attributeFilter: ["data-negative"]
-    }), this._setVariantByContext(), this._proxyGroupLabelToOptions(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]"));
+    }), 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();
+    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();
   }
-  _setVariantByContext() {
-    var t, e;
-    (t = this.closest) != null && t.call(this, "sbb-autocomplete") ? this.setAttribute("data-variant", "autocomplete") : (e = this.closest) != null && e.call(this, "sbb-select") && this.setAttribute("data-variant", "select");
-  }
   _handleSlotchange() {
-    this._proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
+    this.proxyDisabledToOptions(), this._proxyGroupLabelToOptions(), this._highlightOptions();
   }
   _proxyGroupLabelToOptions() {
-    var t, e;
+    var t, i;
     if (this._inertAriaGroups)
       if (this.label) {
         this.removeAttribute("aria-label");
-        for (const i of this._options)
-          i.setAttribute("data-group-label", this.label), (t = i.requestUpdate) == null || t.call(i);
+        for (const e of this.options)
+          e.setAttribute("data-group-label", this.label), (t = e.requestUpdate) == null || t.call(e);
       } else
-        for (const i of this._options)
-          i.removeAttribute("data-group-label"), (e = i.requestUpdate) == null || e.call(i);
+        for (const e of this.options)
+          e.removeAttribute("data-group-label"), (i = e.requestUpdate) == null || i.call(e);
     else {
-      f(this, "aria-label", this.label);
+      x(this, "aria-label", this.label);
       return;
     }
   }
-  _proxyDisabledToOptions() {
-    for (const t of this._options)
+  proxyDisabledToOptions() {
+    for (const t of this.options)
       t.toggleAttribute("data-group-disabled", this.disabled);
   }
   _highlightOptions() {
-    var i;
-    const t = this.closest("sbb-autocomplete");
+    var e;
+    const t = this.getAutocompleteParent();
     if (!t)
       return;
-    const e = (i = t.triggerElement) == null ? void 0 : i.value;
-    e && this._options.forEach((o) => o.highlight(e));
+    const i = (e = t.triggerElement) == null ? void 0 : e.value;
+    i && this.options.forEach((o) => o.highlight(i));
   }
   _onNegativeChange() {
-    this._negative = this.hasAttribute("data-negative");
+    this.negative = this.hasAttribute("data-negative");
   }
   render() {
-    return c`
+    return v`
       <div class="sbb-optgroup__divider">
-        <sbb-divider ?negative=${this._negative}></sbb-divider>
+        <sbb-divider ?negative=${this.negative}></sbb-divider>
       </div>
       <div class="sbb-optgroup__label" aria-hidden="true">
         <div class="sbb-optgroup__icon-space"></div>
@@ -87,20 +78,49 @@ let a = class extends _(m(g)) {
     `;
   }
 };
-a.styles = A;
-b([
-  h()
-], a.prototype, "label", 2);
-b([
-  n()
-], a.prototype, "_negative", 2);
-b([
-  n()
-], a.prototype, "_inertAriaGroups", 2);
-a = b([
-  u("sbb-optgroup"),
-  v({ role: r ? null : "group" })
-], a);
+b.styles = O;
+n([
+  g()
+], b.prototype, "label", 2);
+n([
+  d()
+], b.prototype, "negative", 2);
+n([
+  d()
+], b.prototype, "_inertAriaGroups", 2);
+b = n([
+  f({ 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 {
+  get options() {
+    var t;
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-option")) ?? []);
+  }
+  getAutocompleteParent() {
+    var t;
+    return ((t = this.closest) == null ? void 0 : t.call(this, "sbb-autocomplete")) || null;
+  }
+  setAttributeFromParent() {
+    var t;
+    this.negative = !!((t = this.closest) != null && t.call(this, ":is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]")), this.toggleAttribute("data-negative", this.negative);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]")), this._setVariantByContext();
+  }
+  _setVariantByContext() {
+    var t, i;
+    (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([
+  c("sbb-optgroup")
+], p);
 export {
-  a as SbbOptGroupElement
+  p as SbbOptGroupElement,
+  b as SbbOptgroupBaseElement
 };

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

@@ -0,0 +1,69 @@
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { EventEmitter } from '../../core/eventing.js';
+
+declare const SbbOptionBaseElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+export declare abstract class SbbOptionBaseElement extends SbbOptionBaseElement_base {
+    protected abstract optionId: string;
+    /**
+     * Value of the option.
+     *
+     * @description Developer note: In this case updating the attribute must be synchronous.
+     * Due to this, it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     */
+    set value(value: string);
+    get value(): string;
+    /** Whether the option is currently active. */
+    active?: boolean;
+    /** Whether the option is selected. */
+    set selected(value: boolean);
+    get selected(): boolean;
+    /** Emits when the option selection status changes. */
+    protected abstract selectionChange: EventEmitter;
+    /** Emits when an option was selected by user. */
+    protected abstract optionSelected: EventEmitter;
+    /** Whether to apply the negative styling */
+    protected negative: boolean;
+    /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+    protected disabledFromGroup: boolean;
+    protected label?: string;
+    /** Disable the highlight of the label. */
+    protected disableLabelHighlight: boolean;
+    /** The portion of the highlighted label. */
+    private _highlightString;
+    private _inertAriaGroups;
+    private _abort;
+    protected abstract selectByClick(event: MouseEvent): void;
+    protected abstract setAttributeFromParent(): void;
+    protected updateDisableHighlight(disabled: boolean): void;
+    /** MutationObserver on data attributes. */
+    private _optionAttributeObserver;
+    constructor();
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+     * Highlight the label of the option
+     * @param value the highlighted portion of the label
+     * @internal
+     */
+    highlight(value: string): void;
+    /**
+     * @internal
+     */
+    setSelectedViaUserInteraction(selected: boolean): void;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected init(): void;
+    protected updateAriaDisabled(): void;
+    private _updateAriaSelected;
+    /** Observe changes on data attributes and set the appropriate values. */
+    protected onOptionAttributesChange(mutationsList: MutationRecord[]): void;
+    protected handleHighlightState(): void;
+    protected getHighlightedLabel(): TemplateResult;
+    protected renderIcon(): TemplateResult;
+    protected renderLabel(): TemplateResult | typeof nothing;
+    protected renderTick(): TemplateResult | typeof nothing;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=option-base-element.d.ts.map

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

@@ -0,0 +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,8CAA8C;IACK,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;IACvD,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,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,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"}