@sbb-esta/lyne-elements 3.10.0 → 3.12.0

package/container/sticky-bar/sticky-bar.component.js

@@ -3,22 +3,22 @@ var w = (a) => {
 };
 var x = (a, s, e) => s.has(a) || w("Cannot " + e);
 var k = (a, s, e) => (x(a, s, "read from private field"), e ? e.call(a) : s.get(a)), u = (a, s, e) => s.has(a) ? w("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, e), d = (a, s, e, r) => (x(a, s, "write to private field"), r ? r.call(a, e) : s.set(a, e), e);
-import { __runInitializers as l, __esDecorate as y } from "tslib";
+import { __runInitializers as l, __esDecorate as h } from "tslib";
 import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
 import { css as A, LitElement as C, html as R } from "lit";
 import { customElement as B, property as z } from "lit/decorators.js";
 import { isLean as I, isZeroAnimationDuration as D } from "../../core/dom.js";
 import { SbbUpdateSchedulerMixin as U } from "../../core/mixins.js";
-const T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+const T = A`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([size=s]){--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xxxs)}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-background-color-1) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media(forced-colors:active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-3)}:host([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-1-negative)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-background-color-2-negative)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";inset:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;inset:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-color-soft-2),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-color-soft-1)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
 let M = (() => {
   var n, b, o;
-  let a = [B("sbb-sticky-bar")], s, e = [], r, h = U(C), v, m = [], g = [], _, p = [], f = [];
-  return o = class extends h {
+  let a = [B("sbb-sticky-bar")], s, e = [], r, y = U(C), v, g = [], m = [], p, _ = [], f = [];
+  return o = class extends y {
     constructor() {
       super(...arguments);
       u(this, n);
       u(this, b);
-      d(this, n, l(this, m, null)), d(this, b, (l(this, g), l(this, p, I() ? "s" : "m"))), this._intersector = l(this, f), this._observer = new S(this, {
+      d(this, n, l(this, g, null)), d(this, b, (l(this, m), l(this, _, I() ? "s" : "m"))), this._intersector = l(this, f), this._observer = new S(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
@@ -102,12 +102,12 @@ let M = (() => {
     `;
     }
   }, n = new WeakMap(), b = new WeakMap(), r = o, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-    v = [z({ reflect: !0 })], _ = [z({ reflect: !0 })], y(o, null, v, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, c) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    v = [z({ reflect: !0 })], p = [z({ reflect: !0 })], h(o, null, v, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, c) => {
       i.color = c;
-    } }, metadata: t }, m, g), y(o, null, _, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, c) => {
+    } }, metadata: t }, g, m), h(o, null, p, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, c) => {
       i.size = c;
-    } }, metadata: t }, p, f), y(null, s = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    } }, metadata: t }, _, f), h(null, s = { value: r }, a, { kind: "class", name: r.name, metadata: t }, null, e), r = s.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), o.styles = T, o.events = {
     beforestick: "beforestick",
     stick: "stick",

package/core/controllers/escapable-overlay-controller.d.ts

@@ -1,5 +1,8 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
 import { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.js';
+/**
+ * Handles the stack of overlays and closes the last opened one when pressing Escape.
+ */
 export declare class SbbEscapableOverlayController implements ReactiveController {
     private _host;
     private _overlayStack;

package/core/controllers/escapable-overlay-controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"escapable-overlay-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/escapable-overlay-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAa3F,qBAAa,6BAA8B,YAAW,kBAAkB;IAEpE,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,aAAa;gBADb,KAAK,EAAE,sBAAsB,GAAG,uBAAuB,EACvD,aAAa,GAAE,uBAAuB,EAAiB;IAK1D,gBAAgB,IAAI,IAAI;IAKxB,OAAO,IAAI,IAAI;IAQf,UAAU,IAAI,IAAI;CAQ1B"}
+{"version":3,"file":"escapable-overlay-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/escapable-overlay-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAa3F;;GAEG;AACH,qBAAa,6BAA8B,YAAW,kBAAkB;IAEpE,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,aAAa;gBADb,KAAK,EAAE,sBAAsB,GAAG,uBAAuB,EACvD,aAAa,GAAE,uBAAuB,EAAiB;IAK1D,gBAAgB,IAAI,IAAI;IAKxB,OAAO,IAAI,IAAI;IAQf,UAAU,IAAI,IAAI;CAQ1B"}

package/core/controllers/overlay-position-controller.d.ts

@@ -0,0 +1,60 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Controller for managing overlays positioning. Also acts as a polyfill when native
+ * CSS Anchor Positioning is not supported (enough).
+ * Applies unique anchor names when using native CSS Anchor Positioning
+ * or calculates and applies correct positions in polyfill mode.
+ *
+ * Also, the controller sets the 'data-overlay-position' attribute on the overlay element.
+ * This can be used to apply specific styles based on the current position of the overlay.
+ *
+ * ### Implementation
+ * Define and apply the following CSS variables on the overlay element:
+ * ```scss
+ *   --sbb-overlay-position-area: block-end; // Default
+ *   --sbb-overlay-position-try-fallbacks: block-start, inline-end, inline-start; // Fallbacks
+ *
+ *   position-area: var(--sbb-overlay-position-area);
+ *   position-try-fallbacks: var(--sbb-overlay-position-try-fallbacks);
+ * ```
+ */
+export declare class SbbOverlayPositionController implements ReactiveController {
+    private _usePolyfill;
+    private readonly _resizeObserver;
+    private readonly _overlay;
+    private _abortController?;
+    private _anchor?;
+    private _overlayStyles?;
+    private _frame?;
+    private _anchorName;
+    private _positions;
+    private _lastPosition?;
+    /** Get the current position. (e.g. block-end, block-start, etc.) */
+    get currentPosition(): string;
+    constructor(host: ReactiveControllerHost & HTMLElement, overlay?: HTMLElement, _usePolyfill?: boolean);
+    hostConnected(): void;
+    hostUpdate(): void;
+    /**
+     * Connects the overlay to the given trigger element and determines the optimal position.
+     * Usually, this is called when the overlay is opened.
+     * @param anchor The anchor element.
+     */
+    connect(anchor: HTMLElement): void;
+    disconnect(): void;
+    private _requestCalculatePosition;
+    private _calculatePosition;
+    /**
+     * Calculates the optimal position that fits the overlay.
+     * @param positions The list of positions to check.
+     * @private
+     */
+    private _getOptimalPosition;
+    private _applyOverlayPosition;
+    /**
+     * Only used in polyfill mode.
+     * Reads the list of the configured positions from the CSS variables.
+     * @private
+     */
+    private _readPositionsFromCss;
+}
+//# sourceMappingURL=overlay-position-controller.d.ts.map

package/core/controllers/overlay-position-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-position-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/overlay-position-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAqDrF;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,4BAA6B,YAAW,kBAAkB;IA0BnE,OAAO,CAAC,YAAY;IAzBtB,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEtB;IACV,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAc;IACvC,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAC3C,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAsB;IAC7C,OAAO,CAAC,MAAM,CAAC,CAA2C;IAC1D,OAAO,CAAC,WAAW,CAAsC;IACzD,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,oEAAoE;IACpE,IAAW,eAAe,IAAI,MAAM,CAOnC;gBAGC,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAC1C,OAAO,CAAC,EAAE,WAAW,EACb,YAAY,UAA8B;IAM7C,aAAa,IAAI,IAAI;IASrB,UAAU,IAAI,IAAI;IAOzB;;;;OAIG;IACI,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAmClC,UAAU,IAAI,IAAI;IAOzB,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,kBAAkB;IAY1B;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IAiL3B,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;CA6B9B"}

package/core/controllers/overlay-position-controller.js

@@ -0,0 +1,224 @@
+import { isServer as k } from "lit";
+const m = !k && CSS.supports("anchor-name", "--test"), C = [
+  "block-start",
+  "block-end",
+  "inline-start",
+  "inline-end",
+  "block-start span-inline-start",
+  "block-start span-inline-end",
+  "block-end span-inline-start",
+  "block-end span-inline-end",
+  "inline-start span-block-start",
+  "inline-start span-block-end",
+  "inline-end span-block-start",
+  "inline-end span-block-end"
+], S = {
+  "block-start": "block-start",
+  "block-end": "block-end",
+  "inline-start": "inline-end",
+  "inline-end": "inline-start",
+  "block-start span-inline-start": "block-start span-inline-end",
+  "block-start span-inline-end": "block-start span-inline-start",
+  "block-end span-inline-start": "block-end span-inline-end",
+  "block-end span-inline-end": "block-end span-inline-start",
+  "inline-start span-block-start": "inline-end span-block-start",
+  "inline-start span-block-end": "inline-end span-block-end",
+  "inline-end span-block-start": "inline-start span-block-start",
+  "inline-end span-block-end": "inline-start span-block-end"
+};
+let O = 0;
+class W {
+  /** Get the current position. (e.g. block-end, block-start, etc.) */
+  get currentPosition() {
+    return this._usePolyfill ? this._lastPosition ?? this._positions[0] ?? "" : (this._overlayStyles ??= getComputedStyle(this._overlay), this._overlayStyles.getPropertyValue("position-area"));
+  }
+  constructor(e, t, o = !m) {
+    this._usePolyfill = o, this._resizeObserver = k ? null : new ResizeObserver(() => this._requestCalculatePosition()), this._anchorName = `--sbb-overlay-anchor-${++O}`, this._positions = [], e.addController(this), this._overlay = t ?? e;
+  }
+  hostConnected() {
+    this._usePolyfill ? this._overlay.style.setProperty("position-area", "initial") : this._overlay.style.setProperty("position-anchor", this._anchorName);
+  }
+  hostUpdate() {
+    k || this._readPositionsFromCss();
+  }
+  /**
+   * Connects the overlay to the given trigger element and determines the optimal position.
+   * Usually, this is called when the overlay is opened.
+   * @param anchor The anchor element.
+   */
+  connect(e) {
+    k || (this._anchor && this.disconnect(), this._anchor = e, this._usePolyfill || this._anchor.style.setProperty("anchor-name", this._anchorName), this._readPositionsFromCss(), this._calculatePosition(), this._abortController?.abort(), this._abortController = new AbortController(), document.addEventListener("scroll", () => this._requestCalculatePosition(), {
+      capture: !0,
+      passive: !0,
+      signal: this._abortController.signal
+    }), window.addEventListener("resize", () => this._requestCalculatePosition(), {
+      passive: !0,
+      signal: this._abortController.signal
+    }), this._resizeObserver.observe(e, { box: "border-box" }), this._resizeObserver.observe(this._overlay, { box: "border-box" }));
+  }
+  disconnect() {
+    this._anchor?.style.removeProperty("anchor-name"), this._anchor = void 0, this._abortController?.abort(), this._resizeObserver.disconnect();
+  }
+  _requestCalculatePosition() {
+    this._frame ??= requestAnimationFrame(() => {
+      this._calculatePosition(), this._frame = void 0;
+    });
+  }
+  _calculatePosition() {
+    if (this._anchor) {
+      if (this._usePolyfill) {
+        const e = this._getOptimalPosition(this._positions);
+        this._applyOverlayPosition(e.position, e.left, e.top);
+      }
+      this._overlay.setAttribute("data-position", this.currentPosition);
+    }
+  }
+  /**
+   * Calculates the optimal position that fits the overlay.
+   * @param positions The list of positions to check.
+   * @private
+   */
+  _getOptimalPosition(e) {
+    const { offsetHeight: t, offsetWidth: o } = this._overlay, { innerHeight: u, innerWidth: g } = window, { top: n, left: r, height: l, width: d } = this._anchor.getBoundingClientRect(), P = this._overlay.matches(":dir(rtl)"), a = n, c = u - l - n, p = r, h = g - d - r, b = o - d, y = t - l, f = b / 2, _ = y / 2;
+    this._overlay.style.setProperty("--sbb-overlay-controller-trigger-height", `${l}px`), this._overlay.style.setProperty("--sbb-overlay-controller-trigger-width", `${d}px`);
+    let s = { left: 0, top: 0, position: "" }, v;
+    for (const i of e) {
+      switch (P && C.includes(i) ? S[i] : i) {
+        default:
+        case "bottom":
+        case "block-end":
+          s = {
+            position: i,
+            left: r - f,
+            top: n + l,
+            fits: t <= c && f <= p && f <= h
+          };
+          break;
+        case "top":
+        case "block-start":
+          s = {
+            position: i,
+            left: r - f,
+            top: n - t,
+            fits: t <= a && f <= p && f <= h
+          };
+          break;
+        case "right":
+        case "inline-end":
+          s = {
+            position: i,
+            left: r + d,
+            top: n - _,
+            fits: o <= h && _ <= a && _ <= c
+          };
+          break;
+        case "left":
+        case "inline-start":
+          s = {
+            position: i,
+            left: r - o,
+            top: n - _,
+            fits: o <= p && _ <= a && _ <= c
+          };
+          break;
+        case "top span-left":
+        case "block-start span-inline-start":
+          s = {
+            position: i,
+            left: r - b,
+            top: n - t,
+            fits: t <= a && b <= p
+          };
+          break;
+        case "top span-right":
+        case "block-start span-inline-end":
+          s = {
+            position: i,
+            left: r,
+            top: n - t,
+            fits: t <= a && b <= h
+          };
+          break;
+        case "bottom span-left":
+        case "block-end span-inline-start":
+          s = {
+            position: i,
+            left: r - b,
+            top: n + l,
+            fits: t <= c && b <= p
+          };
+          break;
+        case "bottom span-right":
+        case "block-end span-inline-end":
+          s = {
+            position: i,
+            left: r,
+            top: n + l,
+            fits: t <= c && b <= h
+          };
+          break;
+        case "left span-top":
+        case "inline-start span-block-start":
+          s = {
+            position: i,
+            left: r - o,
+            top: n + l - t,
+            fits: o <= p && y <= a
+          };
+          break;
+        case "left span-bottom":
+        case "inline-start span-block-end":
+          s = {
+            position: i,
+            left: r - o,
+            top: n,
+            fits: o <= p && y <= c
+          };
+          break;
+        case "right span-top":
+        case "inline-end span-block-start":
+          s = {
+            position: i,
+            left: r + d,
+            top: n + l - t,
+            fits: o <= h && y <= a
+          };
+          break;
+        case "right span-bottom":
+        case "inline-end span-block-end":
+          s = {
+            position: i,
+            left: r + d,
+            top: n,
+            fits: o <= h && y <= c
+          };
+          break;
+      }
+      if (s.fits)
+        return s;
+      v ??= s;
+    }
+    return v;
+  }
+  _applyOverlayPosition(e, t, o) {
+    this._lastPosition = e, this._overlay.style.left = `${t}px`, this._overlay.style.top = `${o}px`;
+  }
+  /**
+   * Only used in polyfill mode.
+   * Reads the list of the configured positions from the CSS variables.
+   * @private
+   */
+  _readPositionsFromCss() {
+    if (!this._usePolyfill)
+      return;
+    this._overlayStyles ??= getComputedStyle(this._overlay);
+    const e = [
+      this._overlayStyles.getPropertyValue("--sbb-overlay-position-area") || "block-end",
+      ...this._overlayStyles.getPropertyValue("--sbb-overlay-position-try-fallbacks").split(",").map((t) => t.trim()).filter((t) => !!t)
+    ];
+    this._positions = e, this._lastPosition && !this._positions.includes(this._lastPosition) && (this._lastPosition = void 0);
+  }
+}
+export {
+  W as SbbOverlayPositionController
+};

package/core/controllers.d.ts

@@ -7,4 +7,5 @@ export * from './controllers/inert-controller.js';
 export * from './controllers/language-controller.js';
 export * from './controllers/media-matchers-controller.js';
 export * from './controllers/slot-state-controller.js';
+export * from './controllers/overlay-position-controller.js';
 //# sourceMappingURL=controllers.d.ts.map

package/core/controllers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,+CAA+C,CAAC;AAC9D,cAAc,0CAA0C,CAAC;AACzD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,+CAA+C,CAAC;AAC9D,cAAc,0CAA0C,CAAC;AACzD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AACvD,cAAc,8CAA8C,CAAC"}

package/core/controllers.js

@@ -1,22 +1,24 @@
 import { SbbEscapableOverlayController as o } from "./controllers/escapable-overlay-controller.js";
-import { SbbIdReferenceController as a } from "./controllers/id-reference-controller.js";
-import { SbbInertController as t } from "./controllers/inert-controller.js";
-import { SbbLanguageController as n } from "./controllers/language-controller.js";
-import { SbbDarkModeController as i, SbbMediaMatcherController as M, SbbMediaQueryBreakpointMediumAndAbove as p, SbbMediaQueryBreakpointMediumAndBelow as u, SbbMediaQueryBreakpointSmallAndBelow as m, SbbMediaQueryDarkMode as C, SbbMediaQueryForcedColors as y, SbbMediaQueryHover as f, SbbMediaQueryPointerCoarse as Q } from "./controllers/media-matchers-controller.js";
+import { SbbIdReferenceController as l } from "./controllers/id-reference-controller.js";
+import { SbbInertController as a } from "./controllers/inert-controller.js";
+import { SbbLanguageController as S } from "./controllers/language-controller.js";
+import { SbbDarkModeController as i, SbbMediaMatcherController as M, SbbMediaQueryBreakpointMediumAndAbove as p, SbbMediaQueryBreakpointMediumAndBelow as m, SbbMediaQueryBreakpointSmallAndBelow as u, SbbMediaQueryDarkMode as C, SbbMediaQueryForcedColors as y, SbbMediaQueryHover as f, SbbMediaQueryPointerCoarse as x } from "./controllers/media-matchers-controller.js";
 import { SbbSlotStateController as k } from "./controllers/slot-state-controller.js";
+import { SbbOverlayPositionController as c } from "./controllers/overlay-position-controller.js";
 export {
   i as SbbDarkModeController,
   o as SbbEscapableOverlayController,
-  a as SbbIdReferenceController,
-  t as SbbInertController,
-  n as SbbLanguageController,
+  l as SbbIdReferenceController,
+  a as SbbInertController,
+  S as SbbLanguageController,
   M as SbbMediaMatcherController,
   p as SbbMediaQueryBreakpointMediumAndAbove,
-  u as SbbMediaQueryBreakpointMediumAndBelow,
-  m as SbbMediaQueryBreakpointSmallAndBelow,
+  m as SbbMediaQueryBreakpointMediumAndBelow,
+  u as SbbMediaQueryBreakpointSmallAndBelow,
   C as SbbMediaQueryDarkMode,
   y as SbbMediaQueryForcedColors,
   f as SbbMediaQueryHover,
-  Q as SbbMediaQueryPointerCoarse,
+  x as SbbMediaQueryPointerCoarse,
+  c as SbbOverlayPositionController,
   k as SbbSlotStateController
 };

package/core/mixins.js

@@ -14,7 +14,7 @@ import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
 import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
 import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-3) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-border-color-3);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media(forced-colors:active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
   b as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,

package/core/overlay/overlay-option-panel.d.ts

@@ -5,6 +5,7 @@
  * @param optionContainer The reference to the option panel.
  * @param container The element which has the position:fixed applied.
  * @param element The reference to the component.
+ * @param position The allowed position of the overlay relative to the origin.
  */
-export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement): void;
+export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement, position?: 'auto' | 'above' | 'below'): void;
 //# sourceMappingURL=overlay-option-panel.d.ts.map

package/core/overlay/overlay-option-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,GACnB,IAAI,CAmBN"}
+{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CAsBN"}

package/core/overlay/overlay-option-panel.js

@@ -1,11 +1,14 @@
-import { getElementPosition as a } from "./position.js";
-function r(p, o, i, e, t) {
-  if (!p || !o)
+import { getElementPosition as r } from "./position.js";
+function b(e, o, i, a, t, p = "auto") {
+  if (!e || !o)
     return;
   t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
-  const s = a(i, o, e);
+  const s = r(i, o, a, {
+    forceBelow: p === "below",
+    forceAbove: p === "above"
+  });
   t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
 }
 export {
-  r as setOverlayPosition
+  b as setOverlayPosition
 };

package/core/overlay/position.d.ts

@@ -37,6 +37,8 @@ export declare function getElementPosition(element: HTMLElement, trigger: HTMLEl
     horizontalOffset?: number;
     centered?: boolean;
     responsiveHeight?: boolean;
+    forceAbove?: boolean;
+    forceBelow?: boolean;
 }): SbbElementPositionInfos;
 /**
  * Determines the position of an element relative to a trigger element by evaluating

package/core/overlay/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GACA,uBAAuB,CAsGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}

package/core/overlay/position.js

@@ -1,6 +1,6 @@
 function R(t) {
-  const o = window.getComputedStyle(t), c = o.display, h = parseInt(o.maxHeight, 10).toString();
-  if (c !== "none" && h !== "0")
+  const o = window.getComputedStyle(t), c = o.display, s = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && s !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -10,8 +10,8 @@ function R(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const v = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
+  const p = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: p, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
 }
 function x(t, o) {
   if (!t || !o)
@@ -19,33 +19,35 @@ function x(t, o) {
   const c = t.getBoundingClientRect();
   return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
 }
-function y(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = h?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
-  let s = f, m = H + e.height + n, l = i.offsetWidth - e.width;
+function w(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = s?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
+  let h = f, m = H + e.height + n, l = i.offsetWidth - e.width;
   const a = { horizontal: "start", vertical: "below" };
   let O = `${u - n}px`;
-  h?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (s -= l /= 2, a.horizontal = "center"), W < l && f > l && (s = s - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (s += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (s = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
-  const p = c.getBoundingClientRect();
-  return p.left < 0 && (s -= p.left), p.top < 0 && (m -= p.top), {
+  s?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (h -= l /= 2, a.horizontal = "center"), W < l && f > l && (h = h - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (h += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (h = document.documentElement.clientWidth / 2 - i.offsetWidth / 2);
+  const b = u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r;
+  !s?.forceBelow && (s?.forceAbove || b) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
+  const v = c.getBoundingClientRect();
+  return v.left < 0 && (h -= v.left), v.top < 0 && (m -= v.top), {
     top: m,
-    left: s,
+    left: h,
     maxHeight: O,
     alignment: a
   };
 }
-function b(t, o, c, h) {
-  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(h?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, s = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
+function y(t, o, c, s) {
+  const n = s?.verticalOffset || 0, g = s?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(s?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, h = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
   let l = i.right, a = r.top + n;
-  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, s.horizontal = "start"), g && s.horizontal !== "center" && (l += g * (s.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
+  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, h.horizontal = "start"), g && h.horizontal !== "center" && (l += g * (h.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
     top: a,
     left: l,
     maxHeight: u,
-    alignment: s
+    alignment: h
   };
 }
 export {
-  y as getElementPosition,
-  b as getElementPositionHorizontal,
+  w as getElementPosition,
+  y as getElementPositionHorizontal,
   R as getElementRectangle,
   x as isEventOnElement
 };

package/core/styles/core.scss

@@ -273,8 +273,7 @@ html {
   sbb-navigation,
   sbb-overlay,
   sbb-popover,
-  sbb-toast,
-  sbb-tooltip
+  sbb-toast
 ) {
   @include popover.popover-reset;
 }
@@ -654,3 +653,29 @@ sbb-status:has(sbb-title) {
   --sbb-option-overflow: hidden;
   --sbb-option-white-space: nowrap;
 }
+
+sbb-mini-calendar[orientation='horizontal'] {
+  sbb-mini-calendar-month {
+    --sbb-mini-calendar-grid-auto-flow: row;
+    --sbb-mini-calendar-month-height: #{functions.px-to-rem-build(48)};
+    --sbb-mini-calendar-month-grid-template-rows: none;
+    --sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr);
+
+    sbb-mini-calendar-day:first-child {
+      grid-column-start: var(--sbb-mini-calendar-month-offset);
+    }
+  }
+}
+
+sbb-mini-calendar[orientation='vertical'] {
+  sbb-mini-calendar-month {
+    --sbb-mini-calendar-grid-auto-flow: column;
+    --sbb-mini-calendar-month-height: auto;
+    --sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);
+    --sbb-mini-calendar-month-grid-template-columns: none;
+
+    sbb-mini-calendar-day:first-child {
+      grid-row-start: var(--sbb-mini-calendar-month-offset);
+    }
+  }
+}

package/core/styles/layout.scss

@@ -14,3 +14,7 @@
 .sbb-grid-expanded {
   @include layout.grid-base;
 }
+
+.sbb-grid-only {
+  @include layout.grid-base;
+}

package/core/styles/mixins/badge.scss

@@ -12,6 +12,9 @@
   color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
+
+  // Transparent outline is visible in forced colors mode to ensure readability
+  outline: var(--sbb-border-width-1x) solid transparent;
 }
 
 @mixin badge-attribute {