@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/container/sticky-bar.js

@@ -0,0 +1,57 @@
+import { css as d, LitElement as c, html as l } from "lit";
+import { property as v, customElement as p } from "lit/decorators.js";
+import { hostAttributes as k } from "../core/decorators.js";
+import { AgnosticIntersectionObserver as h } from "../core/observers.js";
+const y = d`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);display:contents}:host([data-sticking]){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) )}:host([data-sticking][color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking][color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}.sbb-sticky-bar__wrapper{position:sticky;inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index)}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";top:0;right:0;bottom:0;left: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))}}:host([data-expanded]) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius)}:host([data-sticking]) .sbb-sticky-bar__wrapper:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]) .sbb-sticky-bar__wrapper:after{border-block-start:var(--sbb-border-width-1x) solid CanvasText;border-radius:0}}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left: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-fade-out-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]) .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-elevation-level-11-soft-2-color),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-elevation-level-11-soft-1-color);transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}: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:transparent;pointer-events:none;transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing)}:host([data-sticking]) .sbb-sticky-bar__intersector:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration);background-color:var(--sbb-sticky-bar-sticky-background-color)}`;
+var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (a, s, e, r) => {
+  for (var t = r > 1 ? void 0 : r ? g(s, e) : s, o = a.length - 1, b; o >= 0; o--)
+    (b = a[o]) && (t = (r ? b(s, e, t) : b(t)) || t);
+  return r && t && u(s, e, t), t;
+};
+let i = class extends c {
+  constructor() {
+    super(...arguments), this._observer = new h(
+      (a) => this._toggleShadowVisibility(a[0])
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const a = this.closest("sbb-container");
+    a && this.toggleAttribute("data-expanded", a.expanded), this._intersector && this._observer.observe(this._intersector);
+  }
+  firstUpdated(a) {
+    super.firstUpdated(a), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
+  }
+  _toggleShadowVisibility(a) {
+    this.toggleAttribute(
+      "data-sticking",
+      !a.isIntersecting && a.boundingClientRect.top > 0
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._observer.disconnect();
+  }
+  render() {
+    return l`
+      <div class="sbb-sticky-bar__wrapper">
+        <div class="sbb-sticky-bar">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="sbb-sticky-bar__intersector"></div>
+    `;
+  }
+};
+i.styles = y;
+n([
+  v({ reflect: !0 })
+], i.prototype, "color", 2);
+i = n([
+  p("sbb-sticky-bar"),
+  k({
+    slot: "sticky-bar"
+  })
+], i);
+export {
+  i as SbbStickyBarElement
+};

package/container.d.ts

@@ -0,0 +1,3 @@
+export * from './container/container.js';
+export * from './container/sticky-bar.js';
+//# sourceMappingURL=container.d.ts.map

package/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/elements/container.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}

package/container.js

@@ -0,0 +1,2 @@
+export * from "./container/container.js";
+export * from "./container/sticky-bar.js";

package/core/a11y/arrow-navigation.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Check if the key pressed is among those allowed for navigation.
+ * @param event The keyboard event to check.
+ */
+export declare function isArrowKeyPressed(event: KeyboardEvent): boolean;
+/**
+ * Check if the key pressed should move the navigation to the next element.
+ * @param event The keyboard event to check.
+ */
+export declare function isPreviousArrowKeyPressed(event: KeyboardEvent): boolean;
+/**
+ * Check if the key pressed should move the navigation to the next element.
+ * @param event The keyboard event to check.
+ */
+export declare function isNextArrowKeyPressed(event: KeyboardEvent): boolean;
+/**
+ * Check if the key pressed is among those allowed for navigation.
+ * @param event The keyboard event to check.
+ */
+export declare function isArrowKeyOrPageKeysPressed(event: KeyboardEvent): boolean;
+/**
+ * Gets the index of the element to move to, based on the keyboard input, the current element in the list and the list size.
+ * @param event The keyboard event to check.
+ * @param current The index of the current element in the list.
+ * @param size The size of the list.
+ * @returns if it is a 'previous' event, returns the index of the previous element,
+ * or the index of the last one if the current element is the first in the list;
+ * if it is a 'next' event, returns the index of the next element,
+ * or the index of the first one, if the current is the last in the list.
+ */
+export declare function getNextElementIndex(event: KeyboardEvent, current: number, size: number): number;
+//# sourceMappingURL=arrow-navigation.d.ts.map

package/core/a11y/arrow-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/arrow-navigation.ts"],"names":[],"mappings":"AAeA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE/D;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEnE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEzE;AAkBD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAS/F"}

package/core/a11y/fake-event-detection.d.ts

@@ -0,0 +1,5 @@
+/** Gets whether an event could be a faked `mousedown` event dispatched by a screen reader. */
+export declare function isFakeMousedownFromScreenReader(event: MouseEvent): boolean;
+/** Gets whether an event could be a faked `touchstart` event dispatched by a screen reader. */
+export declare function isFakeTouchstartFromScreenReader(event: TouchEvent): boolean;
+//# sourceMappingURL=fake-event-detection.d.ts.map

package/core/a11y/fake-event-detection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fake-event-detection.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/fake-event-detection.ts"],"names":[],"mappings":"AAEA,8FAA8F;AAC9F,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAO1E;AAED,+FAA+F;AAC/F,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAc3E"}

package/core/a11y/focus-visible-within-controller.d.ts

@@ -0,0 +1,11 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export declare class SbbFocusVisibleWithinController implements ReactiveController {
+    private _host;
+    private _focusinHandler;
+    private _focusoutHandler;
+    constructor(_host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=focus-visible-within-controller.d.ts.map

package/core/a11y/focus-visible-within-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-visible-within-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus-visible-within-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAKtE,qBAAa,+BAAgC,YAAW,kBAAkB;IAYrD,OAAO,CAAC,KAAK;IAXhC,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;gBAEyB,KAAK,EAAE,sBAAsB,GAAG,WAAW;IAI/D,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;CAIhC"}

package/core/a11y/focus.d.ts

@@ -0,0 +1,22 @@
+export declare const IS_FOCUSABLE_QUERY: string;
+export declare function getFocusableElements(elements: HTMLElement[], properties?: {
+    filter?: (el: HTMLElement) => boolean;
+    findFirstFocusable?: boolean;
+    includeInvisibleElements?: boolean;
+}): HTMLElement[];
+export declare function getFirstFocusableElement(elements: HTMLElement[], filter?: (el: HTMLElement) => boolean): HTMLElement | null;
+export declare class SbbFocusHandler {
+    private _controller;
+    /**
+     * @param element in which the focus should be trapped.
+     * @param options options object.
+     * @param options.filter filter function which is applied during searching for focusable element. If an element is filtered, also child elements are filtered.
+     * @param options.postFilter filter function which is applied after collecting focusable elements.
+     */
+    trap(element: HTMLElement, options?: {
+        filter?: (el: HTMLElement) => boolean;
+        postFilter?: (el: HTMLElement) => boolean;
+    }): void;
+    disconnect(): void;
+}
+//# sourceMappingURL=focus.d.ts.map

package/core/a11y/focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAWnB,CAAC;AAGb,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,EAAE,EACvB,UAAU,CAAC,EAAE;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GACA,WAAW,EAAE,CAuCf;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,WAAW,EAAE,EACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,GACpC,WAAW,GAAG,IAAI,CAMpB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,WAAW,CAAyB;IAE5C;;;;;OAKG;IACI,IAAI,CACT,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;QACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;KAC3C,GACA,IAAI;IA4CA,UAAU,IAAI,IAAI;CAI1B"}

package/core/a11y/input-modality-detector.d.ts

@@ -0,0 +1,58 @@
+export type SbbInputModality = 'touch' | 'mouse' | 'keyboard' | 'program' | null;
+/**
+ * Service that detects the user's input modality.
+ *
+ * This service does not update the input modality when a user navigates with a screen reader
+ * (e.g. linear navigation with VoiceOver, object navigation / browse mode with NVDA, virtual PC
+ * cursor mode with JAWS). This is in part due to technical limitations (i.e. keyboard events do not
+ * fire as expected in these modes) but is also arguably the correct behavior. Navigating with a
+ * screen reader is akin to visually scanning a page, and should not be interpreted as actual user
+ * input interaction.
+ *
+ * When a user is not navigating but *interacting* with a screen reader, this service attempts to
+ * update the input modality to keyboard, but in general this service's behavior is largely
+ * undefined.
+ */
+declare class SbbInputModalityDetector {
+    /** The most recently detected input modality. */
+    get mostRecentModality(): SbbInputModality | null;
+    reset(): void;
+    /**
+     * The most recent modality must be initialised with the value 'mouse' to cover the case where an action is
+     * performed but no mouse or keyboard event has yet occurred on the page (e.g. `sbb-popover` with hover trigger).
+     */
+    private _mostRecentModality;
+    /**
+     * The most recently detected input modality event target. Is null if no input modality has been
+     * detected or if the associated event target is null for some unknown reason.
+     */
+    get mostRecentTarget(): HTMLElement | null;
+    private _mostRecentTarget;
+    /** Options for this SbbInputModalityDetector. */
+    private readonly _options;
+    /**
+     * The timestamp of the last touch input modality. Used to determine whether mousedown events
+     * should be attributed to mouse or touch.
+     */
+    private _lastTouchMs;
+    /**
+     * Handles keydown events. Must be an arrow function in order to preserve the context when it gets
+     * bound.
+     */
+    private _onKeydown;
+    /**
+     * Handles mousedown events. Must be an arrow function in order to preserve the context when it
+     * gets bound.
+     */
+    private _onMousedown;
+    /**
+     * Handles touchstart events. Must be an arrow function in order to preserve the context when it
+     * gets bound.
+     */
+    private _onTouchstart;
+    constructor();
+}
+export declare const sbbInputModalityDetector: SbbInputModalityDetector;
+export declare function setModalityOnNextFocus(elementToFocus: HTMLElement | null | undefined): void;
+export {};
+//# sourceMappingURL=input-modality-detector.d.ts.map

package/core/a11y/input-modality-detector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-modality-detector.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/input-modality-detector.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;AAmDjF;;;;;;;;;;;;;GAaG;AACH,cAAM,wBAAwB;IAC5B,iDAAiD;IACjD,IAAW,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAEvD;IAEM,KAAK,IAAI,IAAI;IAMpB;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAAoC;IAE/D;;;OAGG;IACH,IAAW,gBAAgB,IAAI,WAAW,GAAG,IAAI,CAEhD;IACD,OAAO,CAAC,iBAAiB,CAA4B;IAErD,iDAAiD;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAEvB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY,CAAK;IAEzB;;;OAGG;IACH,OAAO,CAAC,UAAU,CAShB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY,CAYlB;IAEF;;;OAGG;IACH,OAAO,CAAC,aAAa,CAenB;;CASH;AAED,eAAO,MAAM,wBAAwB,0BAAiC,CAAC;AAGvE,wBAAgB,sBAAsB,CAAC,cAAc,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAyB3F"}

package/core/a11y/interactivity-checker.d.ts

@@ -0,0 +1,17 @@
+export declare function hasGeometry(element: HTMLElement): boolean;
+export interface InterfaceInteractivityChecker {
+    isVisible(element: HTMLElement): boolean;
+}
+export declare class InteractivityChecker implements InterfaceInteractivityChecker {
+    /**
+     * Gets whether an element is visible for the purposes of interactivity.
+     *
+     * This will capture states like `display: none` and `visibility: hidden`, but not things like
+     * being clipped by an `overflow: hidden` parent or being outside the viewport.
+     *
+     * @returns Whether the element is visible.
+     */
+    isVisible(element: HTMLElement): boolean;
+}
+export declare const interactivityChecker: InterfaceInteractivityChecker;
+//# sourceMappingURL=interactivity-checker.d.ts.map

package/core/a11y/interactivity-checker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactivity-checker.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/interactivity-checker.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAQzD;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC;CAC1C;AAED,qBAAa,oBAAqB,YAAW,6BAA6B;IACxE;;;;;;;OAOG;IACI,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;CAGhD;AAUD,eAAO,MAAM,oBAAoB,EAAE,6BAIH,CAAC"}

package/core/a11y.d.ts

@@ -0,0 +1,7 @@
+export * from './a11y/arrow-navigation.js';
+export * from './a11y/fake-event-detection.js';
+export * from './a11y/focus-visible-within-controller.js';
+export * from './a11y/focus.js';
+export * from './a11y/interactivity-checker.js';
+export * from './a11y/input-modality-detector.js';
+//# sourceMappingURL=a11y.d.ts.map

package/core/a11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../../src/elements/core/a11y.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}

package/core/a11y.js

@@ -0,0 +1,226 @@
+import { getDocumentWritingMode as _ } from "./dom.js";
+import { isServer as w } from "lit";
+import { getEventTarget as a } from "./eventing.js";
+function d() {
+  return _() === "rtl" ? { prevKey: "ArrowRight", nextKey: "ArrowLeft" } : { prevKey: "ArrowLeft", nextKey: "ArrowRight" };
+}
+function R(t) {
+  return ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(t.key);
+}
+function V(t) {
+  return t.key === "ArrowUp" || t.key === d().prevKey;
+}
+function W(t) {
+  return t.key === "ArrowDown" || t.key === d().nextKey;
+}
+function Y(t) {
+  return R(t) || ["PageUp", "PageDown", "Home", "End"].includes(t.key);
+}
+function f(t, e, o) {
+  return (t + o + e) % e;
+}
+function A(t) {
+  return t - 1;
+}
+const y = 0;
+function B(t, e, o) {
+  const { prevKey: s, nextKey: r } = d();
+  return t.key === s || t.key === "ArrowUp" ? e < y ? A(o) : f(e, o, -1) : t.key === r || t.key === "ArrowDown" ? e >= o ? y : f(e, o, 1) : e;
+}
+function E(t) {
+  return t.buttons === 0 || t.detail === 0;
+}
+function M(t) {
+  const e = t.touches && t.touches[0] || t.changedTouches && t.changedTouches[0];
+  return !!e && e.identifier === -1 && (e.radiusX == null || e.radiusX === 1) && (e.radiusY == null || e.radiusY === 1);
+}
+const k = 16, v = 17, T = 18, K = 91, L = 224, C = {
+  ignoreKeys: [T, v, L, K, k]
+}, x = 650, l = {
+  passive: !0,
+  capture: !0
+};
+class F {
+  constructor() {
+    this._mostRecentModality = "mouse", this._mostRecentTarget = null, this._options = {
+      ...C
+    }, this._lastTouchMs = 0, this._onKeydown = (e) => {
+      var o, s;
+      (s = (o = this._options) == null ? void 0 : o.ignoreKeys) != null && s.some((r) => r === e.keyCode) || (this._mostRecentModality = "keyboard", this._mostRecentTarget = a(e));
+    }, this._onMousedown = (e) => {
+      Date.now() - this._lastTouchMs < x || (this._mostRecentModality = E(e) ? "keyboard" : "mouse", this._mostRecentTarget = a(e));
+    }, this._onTouchstart = (e) => {
+      if (M(e)) {
+        this._mostRecentModality = "keyboard", this._mostRecentTarget = a(e);
+        return;
+      }
+      this._lastTouchMs = Date.now(), this._mostRecentModality = "touch", this._mostRecentTarget = a(e);
+    }, w || (document.addEventListener("keydown", this._onKeydown, l), document.addEventListener("mousedown", this._onMousedown, l), document.addEventListener("touchstart", this._onTouchstart, l));
+  }
+  /** The most recently detected input modality. */
+  get mostRecentModality() {
+    return this._mostRecentModality;
+  }
+  reset() {
+    this._mostRecentModality = "mouse", this._mostRecentTarget = null, this._lastTouchMs = 0;
+  }
+  /**
+   * The most recently detected input modality event target. Is null if no input modality has been
+   * detected or if the associated event target is null for some unknown reason.
+   */
+  get mostRecentTarget() {
+    return this._mostRecentTarget;
+  }
+}
+const m = new F();
+function X(t) {
+  if (!t)
+    return;
+  const e = m.mostRecentModality;
+  t && e !== null && t.addEventListener(
+    "focus",
+    () => {
+      t.setAttribute("data-focus-origin", e), t.addEventListener(
+        "blur",
+        () => t.removeAttribute("data-focus-origin"),
+        {
+          once: !0
+        }
+      );
+    },
+    { once: !0 }
+  );
+}
+class j {
+  constructor(e) {
+    this._host = e, this._focusinHandler = () => {
+      this._host.toggleAttribute(
+        "data-has-visible-focus-within",
+        m.mostRecentModality === "keyboard"
+      );
+    }, this._focusoutHandler = () => {
+      this._host.removeAttribute("data-has-visible-focus-within");
+    }, this._host.addController(this);
+  }
+  hostConnected() {
+    this._host.addEventListener("focusin", this._focusinHandler), this._host.addEventListener("focusout", this._focusoutHandler);
+  }
+  hostDisconnected() {
+    this._host.removeEventListener("focusin", this._focusinHandler), this._host.removeEventListener("focusout", this._focusoutHandler);
+  }
+}
+function S(t) {
+  return !!(t.offsetWidth || t.offsetHeight || typeof t.getClientRects == "function" && t.getClientRects().length);
+}
+class D {
+  /**
+   * Gets whether an element is visible for the purposes of interactivity.
+   *
+   * This will capture states like `display: none` and `visibility: hidden`, but not things like
+   * being clipped by an `overflow: hidden` parent or being outside the viewport.
+   *
+   * @returns Whether the element is visible.
+   */
+  isVisible(e) {
+    return S(e) && getComputedStyle(e).visibility === "visible";
+  }
+}
+class I {
+  isVisible() {
+    return !0;
+  }
+}
+const H = typeof getComputedStyle > "u" || getComputedStyle(document.documentElement).visibility === "" ? new I() : new D(), N = [
+  "button",
+  "[href]",
+  "input",
+  "select",
+  "textarea",
+  "details",
+  "summary:not(:disabled)",
+  "[tabindex]"
+].map((t) => `${t}:not([disabled],[tabindex="-1"])`).join(",");
+function g(t, e) {
+  const o = /* @__PURE__ */ new Set();
+  function s(r, c) {
+    var i;
+    for (const n of r)
+      if (!(c && !c(n))) {
+        if (n.nodeName === "SLOT") {
+          s(
+            Array.from(n.assignedElements()),
+            c
+          );
+          continue;
+        }
+        if (n.matches(N) && ((e == null ? void 0 : e.includeInvisibleElements) ?? H.isVisible(n)) && o.add(n), e != null && e.findFirstFocusable && o.size > 0)
+          break;
+        if (n.children.length || (i = n.shadowRoot) != null && i.children.length) {
+          const u = Array.from(n.children).length ? Array.from(n.children) : Array.from(n.shadowRoot.children);
+          s(u, c);
+        }
+      }
+  }
+  return s(t, e == null ? void 0 : e.filter), [...o];
+}
+function G(t, e) {
+  const o = g(t, {
+    filter: e,
+    findFirstFocusable: !0
+  });
+  return o.length ? o[0] : null;
+}
+class Q {
+  constructor() {
+    this._controller = new AbortController();
+  }
+  /**
+   * @param element in which the focus should be trapped.
+   * @param options options object.
+   * @param options.filter filter function which is applied during searching for focusable element. If an element is filtered, also child elements are filtered.
+   * @param options.postFilter filter function which is applied after collecting focusable elements.
+   */
+  trap(e, o) {
+    e.addEventListener(
+      "keydown",
+      (s) => {
+        if (s.key !== "Tab")
+          return;
+        const r = Array.from(
+          e.shadowRoot.children || []
+        ), i = g(r, {
+          filter: o == null ? void 0 : o.filter
+        }).filter(
+          (o == null ? void 0 : o.postFilter) ?? (() => !0)
+        );
+        if (!i.length)
+          return;
+        const n = i[0], u = i[i.length - 1], [h, b] = s.shiftKey ? [n, u] : [u, n];
+        (n.getRootNode().activeElement === h || u.getRootNode().activeElement === h) && (b.focus(), s.preventDefault());
+      },
+      { signal: this._controller.signal }
+    );
+  }
+  disconnect() {
+    this._controller.abort(), this._controller = new AbortController();
+  }
+}
+export {
+  N as IS_FOCUSABLE_QUERY,
+  D as InteractivityChecker,
+  Q as SbbFocusHandler,
+  j as SbbFocusVisibleWithinController,
+  G as getFirstFocusableElement,
+  g as getFocusableElements,
+  B as getNextElementIndex,
+  S as hasGeometry,
+  H as interactivityChecker,
+  Y as isArrowKeyOrPageKeysPressed,
+  R as isArrowKeyPressed,
+  E as isFakeMousedownFromScreenReader,
+  M as isFakeTouchstartFromScreenReader,
+  W as isNextArrowKeyPressed,
+  V as isPreviousArrowKeyPressed,
+  m as sbbInputModalityDetector,
+  X as setModalityOnNextFocus
+};

package/core/base-elements/action-base-element.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare abstract class SbbActionBaseElement extends LitElement {
+    protected get maybeDisabled(): boolean | undefined;
+    protected setupBaseEventHandlers(): void;
+    /** Override this method to render the component template. */
+    protected renderTemplate(): TemplateResult;
+    /** Default render method for button-like components. */
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=action-base-element.d.ts.map

package/core/base-elements/action-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/action-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAe5D,8BAIsB,oBAAqB,SAAQ,UAAU;IAC3D,SAAS,KAAK,aAAa,IAAI,OAAO,GAAG,SAAS,CAGjD;IAED,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAexC,6DAA6D;IAC7D,SAAS,CAAC,cAAc,IAAI,cAAc;IAI1C,wDAAwD;cACrC,MAAM,IAAI,cAAc;CAO5C"}

package/core/base-elements/button-base-element.d.ts

@@ -0,0 +1,46 @@
+import { SbbActionBaseElement } from './action-base-element.js';
+
+/** Enumeration for type attribute in <button> HTML tag. */
+export type SbbButtonType = 'button' | 'reset' | 'submit';
+/** Button base class. */
+export declare abstract class SbbButtonBaseElement extends SbbActionBaseElement {
+    /** The type attribute to use for the button. */
+    type: SbbButtonType;
+    /**
+     * The name of the button element.
+     *
+     * @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 name(name: string);
+    get name(): string;
+    /**
+     * The value of the button element.
+     *
+     * @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;
+    /** The <form> element to associate the button with. */
+    form?: string;
+    private _handleButtonClick;
+    /**
+     * Prevents scrolling from pressing Space, when the event target is an action element.
+     * Also sets data-active attribute.
+     * @param event The origin event.
+     */
+    private _preventScrollOnSpaceKeydown;
+    private _removeActiveMarker;
+    /**
+     * Dispatches a 'click' PointerEvent if the original keyboard event is a 'Space' press.
+     * As verified with the native button, when 'Space' is pressed, a 'click' event is dispatched
+     * after the 'keyup' event.
+     * @param event The origin event.
+     */
+    private _dispatchClickEventOnSpaceKeyup;
+    private _dispatchClickEvent;
+    constructor();
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+}
+//# sourceMappingURL=button-base-element.d.ts.map

package/core/base-elements/button-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/button-base-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,2DAA2D;AAC3D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D,yBAAyB;AACzB,8BAKsB,oBAAqB,SAAQ,oBAAoB;IACrE,gDAAgD;IAC7B,IAAI,EAAE,aAAa,CAAY;IAElD;;;;;OAKG;IACH,IACW,IAAI,CAAC,IAAI,EAAE,MAAM,EAE3B;IACD,IAAW,IAAI,IAAI,MAAM,CAExB;IAED;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,uDAAuD;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEjC,OAAO,CAAC,kBAAkB,CAmBxB;IAEF;;;;OAIG;IACH,OAAO,CAAC,4BAA4B,CAKlC;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,+BAA+B,CAKrC;IAEF,OAAO,CAAC,mBAAmB,CAezB;;IAwBc,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;CAKR"}

package/core/base-elements/link-base-element.d.ts

@@ -0,0 +1,31 @@
+import { TemplateResult } from 'lit';
+import { SbbLanguageController } from '../controllers.js';
+import { SbbActionBaseElement } from './action-base-element.js';
+
+/** Enumeration for 'target' attribute in <a> HTML tag. */
+export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top';
+/** Link base class. */
+export declare abstract class SbbLinkBaseElement extends SbbActionBaseElement {
+    /** The href value you want to link to. */
+    href?: string;
+    /** Where to display the linked URL. */
+    target?: LinkTargetType | string;
+    /** The relationship of the linked URL as space-separated link types. */
+    rel?: string;
+    /** Whether the browser will show the download dialog on click. */
+    download?: boolean;
+    /** This will be forwarded as aria-label to the inner anchor element. */
+    accessibilityLabel: string | undefined;
+    protected language: SbbLanguageController;
+    constructor();
+    /** @internal */
+    focus(options?: FocusOptions | undefined): void;
+    /** @internal */
+    blur(): void;
+    /** @internal */
+    click(): void;
+    private _evaluateRelAttribute;
+    /** Default render method for link-like components. Can be overridden if the LinkRenderVariables are not needed. */
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=link-base-element.d.ts.map

package/core/base-elements/link-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/link-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAErC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAErE,uBAAuB;AACvB,8BAGsB,kBAAmB,SAAQ,oBAAoB;IACnE,0CAA0C;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEjC,uCAAuC;IACpB,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAEpD,wEAAwE;IACrD,GAAG,CAAC,EAAE,MAAM,CAAC;IAEhC,kEAAkE;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvD,wEAAwE;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,SAAS,CAAC,QAAQ,wBAAmC;;IASrD,gBAAgB;IACA,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAI/D,gBAAgB;IACA,IAAI,IAAI,IAAI;IAI5B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAI7B,OAAO,CAAC,qBAAqB,CAE3B;IAEF,mHAAmH;cAChG,MAAM,IAAI,cAAc;CAqB5C"}

package/core/base-elements/open-close-base-element.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { EventEmitter } from '../eventing.js';
+import { SbbOpenedClosedState } from '../interfaces.js';
+
+/**
+ * Base class for overlay components.
+ *
+ * @event willOpen - Emits whenever the component starts the opening transition. Can be canceled.
+ * @event didOpen - Emits whenever the component is opened.
+ * @event willClose - Emits whenever the component begins the closing transition. Can be canceled.
+ * @event didClose - Emits whenever the component is closed.
+ */
+export declare abstract class SbbOpenCloseBaseElement extends LitElement {
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+    };
+    /** The state of the component. */
+    protected set state(state: SbbOpenedClosedState);
+    protected get state(): SbbOpenedClosedState;
+    /** Emits whenever the component starts the opening transition. */
+    protected willOpen: EventEmitter;
+    /** Emits whenever the component is opened. */
+    protected didOpen: EventEmitter;
+    /** Emits whenever the component begins the closing transition. */
+    protected willClose: EventEmitter;
+    /** Emits whenever the component is closed. */
+    protected didClose: EventEmitter;
+    /** Opens the component. */
+    abstract open(): void;
+    /** Closes the component. */
+    abstract close(): void;
+    connectedCallback(): void;
+}
+//# sourceMappingURL=open-close-base-element.d.ts.map

package/core/base-elements/open-close-base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-close-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/open-close-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;GAOG;AACH,8BAAsB,uBAAwB,SAAQ,UAAU;IAC9D,gBAAuB,MAAM;;;;;MAKlB;IAEX,kCAAkC;IAClC,SAAS,KAAK,KAAK,CAAC,KAAK,EAAE,oBAAoB,EAE9C;IACD,SAAS,KAAK,KAAK,IAAI,oBAAoB,CAE1C;IAED,kEAAkE;IAClE,SAAS,CAAC,QAAQ,EAAE,YAAY,CAG9B;IAEF,8CAA8C;IAC9C,SAAS,CAAC,OAAO,EAAE,YAAY,CAAkE;IAEjG,kEAAkE;IAClE,SAAS,CAAC,SAAS,EAAE,YAAY,CAG/B;IAEF,8CAA8C;IAC9C,SAAS,CAAC,QAAQ,EAAE,YAAY,CAG9B;IAEF,2BAA2B;aACX,IAAI,IAAI,IAAI;IAC5B,4BAA4B;aACZ,KAAK,IAAI,IAAI;IAEb,iBAAiB,IAAI,IAAI;CAI1C"}

package/core/base-elements.d.ts

@@ -0,0 +1,5 @@
+export * from './base-elements/action-base-element.js';
+export * from './base-elements/button-base-element.js';
+export * from './base-elements/link-base-element.js';
+export * from './base-elements/open-close-base-element.js';
+//# sourceMappingURL=base-elements.d.ts.map

package/core/base-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-elements.d.ts","sourceRoot":"","sources":["../../../src/elements/core/base-elements.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC"}