@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/alert/alert.js

@@ -0,0 +1,139 @@
+import { css as m, LitElement as v, html as d, nothing as r } from "lit";
+import { property as i, customElement as h } from "lit/decorators.js";
+import { SbbLanguageController as u } from "../core/controllers.js";
+import { EventEmitter as c } from "../core/eventing.js";
+import { i18nFindOutMore as g, i18nCloseAlert as _ } from "../core/i18n.js";
+import { SbbIconNameMixin as f } from "../icon.js";
+import "../button/transparent-button.js";
+import "../divider.js";
+import "../link.js";
+import "../title.js";
+const y = m`*,:before,:after{box-sizing:border-box}:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-alert-background-color: var(--sbb-color-midnight);--sbb-alert-border-radius: var(--sbb-border-radius-4x);--sbb-alert-color: var(--sbb-color-aluminium);--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);--sbb-alert-icon-size: 1.25rem;--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );display:block}@media (min-width: 52.5rem){:host{--sbb-alert-icon-size: 1.75rem}}@media (forced-colors: active){:host{outline:var(--sbb-border-width-1x) solid CanvasText;border-radius:var(--sbb-alert-border-radius)}}:host([animation=none]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-size-icon-ui-small)}@media (min-width: 52.5rem){:host([size=l]){--sbb-alert-icon-size: 2.125rem}}.sbb-alert__transition-wrapper{display:grid;grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-alert__transition-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-alert__transition-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:ease-in;animation-delay:0s,var(--sbb-alert-animation-duration)}.sbb-alert__transition-sub-wrapper{overflow:hidden}.sbb-alert{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius)}@media (min-width: 37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{order:3;grid-column:1/3}@media (min-width: 37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__title{margin:0}.sbb-alert__close-button-wrapper{display:flex;justify-content:flex-end;align-items:center;height:100%}@media (min-width: 37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:none}@media (min-width: 37.5rem){.sbb-alert__close-button-divider{display:block;height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}`;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (s, n, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(n, l) : n, b = s.length - 1, p; b >= 0; b--)
+    (p = s[b]) && (a = (o ? p(n, l, a) : p(a)) || a);
+  return o && a && w(n, l, a), a;
+};
+let t = class extends f(v) {
+  constructor() {
+    super(...arguments), this.readonly = !1, this.size = "m", this.iconName = "info", this.titleLevel = "3", this.animation = "open", this._willOpen = new c(this, t.events.willOpen), this._didOpen = new c(this, t.events.didOpen), this._dismissalRequested = new c(
+      this,
+      t.events.dismissalRequested
+    ), this._language = new u(this);
+  }
+  /** The state of the alert. */
+  get _state() {
+    return this.getAttribute("data-state") ?? "closed";
+  }
+  set _state(s) {
+    this.setAttribute("data-state", s);
+  }
+  async firstUpdated(s) {
+    super.firstUpdated(s), this._open();
+  }
+  /** Requests dismissal of the alert. */
+  requestDismissal() {
+    this._dismissalRequested.emit();
+  }
+  /** Open the alert. */
+  _open() {
+    this._state = "opening", this._willOpen.emit();
+  }
+  _onAnimationEnd(s) {
+    this._state === "opening" && s.animationName === "open-opacity" && (this._state = "opened", this._didOpen.emit());
+  }
+  render() {
+    return d`
+      <div class="sbb-alert__transition-wrapper" @animationend=${this._onAnimationEnd}>
+        <!-- sub wrapper needed to properly support fade in animation -->
+        <div class="sbb-alert__transition-sub-wrapper">
+          <div class="sbb-alert">
+            <span class="sbb-alert__icon"> ${this.renderIconSlot()} </span>
+            <span class="sbb-alert__content">
+              <sbb-title
+                class="sbb-alert__title"
+                level=${this.titleLevel}
+                visual-level=${this.size === "l" ? "3" : "5"}
+                negative
+              >
+                <slot name="title">${this.titleContent}</slot>
+              </sbb-title>
+              <p class="sbb-alert__content-slot">
+                <slot></slot>
+              </p>
+              ${this.href ? d` <sbb-link
+                    accessibility-label=${this.accessibilityLabel ?? r}
+                    href=${this.href ?? r}
+                    target=${this.target ?? r}
+                    rel=${this.rel ?? r}
+                    negative
+                  >
+                    ${this.linkContent ? this.linkContent : g[this._language.current]}
+                  </sbb-link>` : r}
+            </span>
+            ${this.readonly ? r : d`<span class="sbb-alert__close-button-wrapper">
+                  <sbb-divider
+                    orientation="vertical"
+                    negative
+                    class="sbb-alert__close-button-divider"
+                  ></sbb-divider>
+                  <sbb-transparent-button
+                    negative
+                    size=${this.size === "l" ? "m" : this.size}
+                    icon-name="cross-small"
+                    @click=${() => this.requestDismissal()}
+                    aria-label=${_[this._language.current]}
+                    class="sbb-alert__close-button"
+                  ></sbb-transparent-button>
+                </span>`}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = y;
+t.events = {
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  dismissalRequested: "dismissalRequested"
+};
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "readonly", 2);
+e([
+  i({ reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  i({ attribute: "icon-name" })
+], t.prototype, "iconName", 2);
+e([
+  i({ attribute: "title-content" })
+], t.prototype, "titleContent", 2);
+e([
+  i({ attribute: "title-level" })
+], t.prototype, "titleLevel", 2);
+e([
+  i({ attribute: "link-content" })
+], t.prototype, "linkContent", 2);
+e([
+  i()
+], t.prototype, "href", 2);
+e([
+  i()
+], t.prototype, "target", 2);
+e([
+  i()
+], t.prototype, "rel", 2);
+e([
+  i({ attribute: "accessibility-label" })
+], t.prototype, "accessibilityLabel", 2);
+e([
+  i({ reflect: !0 })
+], t.prototype, "animation", 2);
+t = e([
+  h("sbb-alert")
+], t);
+export {
+  t as SbbAlertElement
+};

package/alert.d.ts

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

package/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/elements/alert.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/alert.js

@@ -0,0 +1,2 @@
+export * from "./alert/alert.js";
+export * from "./alert/alert-group.js";

package/animation.css

@@ -0,0 +1,18 @@
+.sbb-disable-animation {
+  --sbb-disable-animation-time: 0.1ms;
+  --sbb-disable-animation-zero-time: 0s;
+}
+
+.sbb-disable-animation-locally {
+  --sbb-disable-animation-time: 0.1ms;
+  --sbb-disable-animation-zero-time: 0s;
+}
+.sbb-disable-animation-locally > * {
+  --sbb-disable-animation-time: initial;
+  --sbb-disable-animation-zero-time: initial;
+}
+
+.sbb-enable-animation {
+  --sbb-disable-animation-time: initial;
+  --sbb-disable-animation-zero-time: initial;
+}

package/autocomplete/autocomplete.d.ts

@@ -0,0 +1,108 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+
+declare const SbbAutocompleteElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof SbbOpenCloseBaseElement;
+/**
+ * Combined with a native input, it displays a panel with a list of available options.
+ *
+ * @slot - Use the unnamed slot to add `sbb-option` or `sbb-optgroup` elements to the `sbb-autocomplete`.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-autocomplete` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-autocomplete` is closed.
+ * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbAutocompleteElement extends SbbAutocompleteElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The element where the autocomplete will attach; accepts both an element's id or an HTMLElement.
+     * If not set, will search for the first 'sbb-form-field' ancestor.
+     */
+    origin?: string | HTMLElement;
+    /**
+     * The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement.
+     * By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element.
+     * If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor.
+     */
+    trigger?: string | HTMLInputElement;
+    /** Whether the icon space is preserved when no icon is set. */
+    preserveIconSpace?: boolean;
+    private _overlay;
+    private _optionContainer;
+    /** Returns the element where autocomplete overlay is attached to. */
+    get originElement(): HTMLElement;
+    private _originElement?;
+    /** Returns the trigger element. */
+    get triggerElement(): HTMLInputElement | undefined;
+    private _triggerElement;
+    private _triggerEventsController;
+    private _openPanelEventsController;
+    private _overlayId;
+    private _activeItemIndex;
+    private _didLoad;
+    private _isPointerDownEventOnMenu;
+    private _abort;
+    /** The autocomplete should inherit 'readonly' state from the trigger. */
+    private get _readonly();
+    private get _options();
+    /** Opens the autocomplete. */
+    open(): void;
+    /** Closes the autocomplete. */
+    close(): void;
+    /** Removes trigger click listener on trigger change. */
+    private _resetOriginClickListener;
+    /** Removes trigger click listener on trigger change. */
+    private _resetTriggerClickListener;
+    /** When an option is selected, update the input value and close the autocomplete. */
+    private _onOptionSelected;
+    private _onOptionClick;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _syncNegative;
+    disconnectedCallback(): void;
+    private _componentSetup;
+    /**
+     * Retrieve the element where the autocomplete will be attached.
+     * @returns 'origin' or the first 'sbb-form-field' ancestor.
+     */
+    private _findOriginElement;
+    /**
+     * Retrieve the element that will trigger the autocomplete opening.
+     * @returns 'trigger' or the first 'input' inside the origin element.
+     */
+    private _getTriggerElement;
+    private _bindTo;
+    private _setupTriggerEvents;
+    private _setOverlayPosition;
+    /** On open/close animation end.
+     *  In rare cases it can be that the animationEnd event is triggered twice.
+     *  To avoid entering a corrupt state, exit when state is not expected.
+     */
+    private _onAnimationEnd;
+    private _onOpenAnimationEnd;
+    private _onCloseAnimationEnd;
+    private _attachOpenPanelEvents;
+    private _pointerDownListener;
+    private _closeOnBackdropClick;
+    private _closedPanelKeyboardInteraction;
+    private _openedPanelKeyboardInteraction;
+    private _selectByKeyboard;
+    private _setNextActiveOption;
+    private _resetActiveElement;
+    /** Highlight the searched text on the options. */
+    private _highlightOptions;
+    private _setTriggerAttributes;
+    private _removeTriggerAttributes;
+    private _handleSlotchange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-autocomplete': SbbAutocompleteElement;
+    }
+}
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

package/autocomplete/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;;AAwBnE;;;;;;;;;;;GAWG;AACH,qBAKa,sBAAuB,SAAQ,2BAE3C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAEjD;;;;OAIG;IACgB,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC;IAEvD,+DAA+D;IAExD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEnC,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,gBAAgB,CAAe;IAEvC,qEAAqE;IACrE,IAAW,aAAa,IAAI,WAAW,CAKtC;IACD,OAAO,CAAC,cAAc,CAAC,CAAc;IAErC,mCAAmC;IACnC,IAAW,cAAc,IAAI,gBAAgB,GAAG,SAAS,CAExD;IACD,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,wBAAwB,CAAmB;IACnD,OAAO,CAAC,0BAA0B,CAAmB;IACrD,OAAO,CAAC,UAAU,CAAkC;IACpD,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,yBAAyB,CAAkB;IACnD,OAAO,CAAC,MAAM,CAAyC;IAEvD,yEAAyE;IACzE,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,8BAA8B;IACvB,IAAI,IAAI,IAAI;IAYnB,+BAA+B;IACxB,KAAK,IAAI,IAAI;IAYpB,wDAAwD;IACxD,OAAO,CAAC,yBAAyB;IASjC,wDAAwD;IACxD,OAAO,CAAC,0BAA0B;IASlC,qFAAqF;IACrF,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,cAAc;IAUN,iBAAiB,IAAI,IAAI;cA0BtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAczD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,aAAa;IAQL,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,eAAe;IAgBvB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,OAAO;IAcf,OAAO,CAAC,mBAAmB;IA0B3B,OAAO,CAAC,mBAAmB;IAU3B;;;OAGG;IACH,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,sBAAsB;IAgC9B,OAAO,CAAC,oBAAoB,CAE1B;IAGF,OAAO,CAAC,qBAAqB,CAQ3B;IAEF,OAAO,CAAC,+BAA+B;IAcvC,OAAO,CAAC,+BAA+B;IAsBvC,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,mBAAmB;IAU3B,kDAAkD;IAClD,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,iBAAiB;cAIN,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/autocomplete.d.ts

@@ -0,0 +1,2 @@
+export * from './autocomplete/autocomplete.js';
+//# sourceMappingURL=autocomplete.d.ts.map

package/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/elements/autocomplete.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}

package/autocomplete.js

@@ -0,0 +1,300 @@
+import { css as g, isServer as u, html as m, nothing as h } from "lit";
+import { property as d, customElement as f } from "lit/decorators.js";
+import { ref as c } from "lit/directives/ref.js";
+import { getNextElementIndex as _ } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as w } from "./core/base-elements.js";
+import { SbbConnectedAbortController as y } from "./core/controllers.js";
+import { hostAttributes as x } from "./core/decorators.js";
+import { findReferencedElement as v, getDocumentWritingMode as E, isSafari as k } from "./core/dom.js";
+import { SbbNegativeMixin as C, SbbHydrationMixin as A } from "./core/mixins.js";
+import { isEventOnElement as p, setOverlayPosition as O, setAriaComboBoxAttributes as I, removeAriaComboBoxAttributes as S, overlayGapFixCorners as P } from "./core/overlay.js";
+const L = g`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__panel:before,.sbb-autocomplete__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-autocomplete__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-autocomplete__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-autocomplete__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-autocomplete__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__options{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-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-autocomplete__options::-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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (forced-colors: active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
+var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, b = (e, t, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? D(t, o) : t, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (s = (i ? n(t, o, s) : n(s)) || s);
+  return i && s && T(t, o, s), s;
+};
+let N = 0;
+const l = k;
+let r = class extends C(
+  A(w)
+) {
+  constructor() {
+    super(...arguments), this._overlayId = `sbb-autocomplete-${++N}`, this._activeItemIndex = -1, this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new y(this), this._pointerDownListener = (e) => {
+      this._isPointerDownEventOnMenu = p(this._overlay, e);
+    }, this._closeOnBackdropClick = (e) => {
+      !this._isPointerDownEventOnMenu && !p(this._overlay, e) && !p(this.originElement, e) && this.close();
+    };
+  }
+  /** Returns the element where autocomplete overlay is attached to. */
+  get originElement() {
+    return this._originElement || (this._originElement = this._findOriginElement()), this._originElement;
+  }
+  /** Returns the trigger element. */
+  get triggerElement() {
+    return this._triggerElement;
+  }
+  /** The autocomplete should inherit 'readonly' state from the trigger. */
+  get _readonly() {
+    var e;
+    return ((e = this.triggerElement) == null ? void 0 : e.hasAttribute("readonly")) ?? !1;
+  }
+  get _options() {
+    var e;
+    return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-option")) ?? []);
+  }
+  /** Opens the autocomplete. */
+  open() {
+    this.state !== "closed" || !this._overlay || this._options.length === 0 || this._readonly || this.willOpen.emit() && (this.state = "opening", this._setOverlayPosition());
+  }
+  /** Closes the autocomplete. */
+  close() {
+    this.state === "opened" && this.willClose.emit() && (this.state = "closing", this._openPanelEventsController.abort());
+  }
+  /** Removes trigger click listener on trigger change. */
+  _resetOriginClickListener(e, t) {
+    e !== t && this._componentSetup();
+  }
+  /** Removes trigger click listener on trigger change. */
+  _resetTriggerClickListener(e, t) {
+    e !== t && this._componentSetup();
+  }
+  /** When an option is selected, update the input value and close the autocomplete. */
+  _onOptionSelected(e) {
+    const t = e.target;
+    t.selected && (this._options.filter((o) => o.id !== t.id && o.selected).forEach((o) => o.selected = !1), this.triggerElement && (this.triggerElement.value = t.value, this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 }))), this.close());
+  }
+  _onOptionClick(e) {
+    e.target.localName !== "sbb-option" || e.target.disabled || this.close();
+  }
+  connectedCallback() {
+    var o, i;
+    super.connectedCallback(), l && (this.id || (this.id = this._overlayId));
+    const e = this._abort.signal, t = ((o = this.closest) == null ? void 0 : o.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
+    t && (this.negative = t.hasAttribute("negative")), this._didLoad && this._componentSetup(), this._syncNegative(), this.addEventListener(
+      "optionSelectionChange",
+      (s) => this._onOptionSelected(s),
+      { signal: e }
+    ), this.addEventListener("click", (s) => this._onOptionClick(s), { signal: e });
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("origin") && this._resetOriginClickListener(this.origin, e.get("origin")), e.has("trigger") && this._resetTriggerClickListener(this.trigger, e.get("trigger")), e.has("negative") && this._syncNegative();
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._componentSetup(), this._didLoad = !0;
+  }
+  _syncNegative() {
+    var e, t;
+    (e = this.querySelectorAll) == null || e.call(this, "sbb-divider").forEach((o) => o.negative = this.negative), (t = this.querySelectorAll) == null || t.call(
+      this,
+      "sbb-option, sbb-optgroup"
+    ).forEach((o) => o.toggleAttribute("data-negative", this.negative));
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), (e = this._triggerEventsController) == null || e.abort(), (t = this._openPanelEventsController) == null || t.abort();
+  }
+  _componentSetup() {
+    var e, t, o, i;
+    u || ((e = this._triggerEventsController) == null || e.abort(), (t = this._openPanelEventsController) == null || t.abort(), this._originElement = void 0, this.toggleAttribute(
+      "data-option-panel-origin-borderless",
+      !!((i = (o = this.closest) == null ? void 0 : o.call(this, "sbb-form-field")) != null && i.hasAttribute("borderless"))
+    ), this._bindTo(this._getTriggerElement()));
+  }
+  /**
+   * Retrieve the element where the autocomplete will be attached.
+   * @returns 'origin' or the first 'sbb-form-field' ancestor.
+   */
+  _findOriginElement() {
+    var t, o, i, s;
+    let e;
+    if (this.origin ? e = v(this.origin) : e = (s = (i = (o = (t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field")) == null ? void 0 : o.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#overlay-anchor"), !e)
+      throw new Error(
+        'Cannot find the origin element. Please specify a valid element or read the "origin" prop documentation'
+      );
+    return e;
+  }
+  /**
+   * Retrieve the element that will trigger the autocomplete opening.
+   * @returns 'trigger' or the first 'input' inside the origin element.
+   */
+  _getTriggerElement() {
+    var t, o;
+    if (!this.trigger)
+      return (o = (t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field")) == null ? void 0 : o.querySelector("input");
+    const e = v(this.trigger);
+    if (!e)
+      throw new Error(
+        'Cannot find the trigger element. Please specify a valid element or read the "trigger" prop documentation'
+      );
+    return e;
+  }
+  _bindTo(e) {
+    e && (this._removeTriggerAttributes(this.triggerElement), this._setTriggerAttributes(e), this._triggerElement = e, this._setupTriggerEvents());
+  }
+  _setupTriggerEvents() {
+    var e, t, o, i;
+    this._triggerEventsController = new AbortController(), (e = this.triggerElement) == null || e.addEventListener("focus", () => this.open(), {
+      signal: this._triggerEventsController.signal
+    }), (t = this.triggerElement) == null || t.addEventListener("click", () => this.open(), {
+      signal: this._triggerEventsController.signal
+    }), (o = this.triggerElement) == null || o.addEventListener(
+      "input",
+      (s) => {
+        this.open(), this._highlightOptions(s.target.value);
+      },
+      { signal: this._triggerEventsController.signal }
+    ), (i = this.triggerElement) == null || i.addEventListener(
+      "keydown",
+      (s) => this._closedPanelKeyboardInteraction(s),
+      { signal: this._triggerEventsController.signal }
+    );
+  }
+  // Set overlay position, width and max height
+  _setOverlayPosition() {
+    O(
+      this._overlay,
+      this.originElement,
+      this._optionContainer,
+      this.shadowRoot.querySelector(".sbb-autocomplete__container"),
+      this
+    );
+  }
+  /** On open/close animation end.
+   *  In rare cases it can be that the animationEnd event is triggered twice.
+   *  To avoid entering a corrupt state, exit when state is not expected.
+   */
+  _onAnimationEnd(e) {
+    e.animationName === "open" && this.state === "opening" ? this._onOpenAnimationEnd() : e.animationName === "close" && this.state === "closing" && this._onCloseAnimationEnd();
+  }
+  _onOpenAnimationEnd() {
+    var e;
+    this.state = "opened", this._attachOpenPanelEvents(), (e = this.triggerElement) == null || e.setAttribute("aria-expanded", "true"), this.didOpen.emit();
+  }
+  _onCloseAnimationEnd() {
+    var e;
+    this.state = "closed", (e = this.triggerElement) == null || e.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._optionContainer.scrollTop = 0, this.didClose.emit();
+  }
+  _attachOpenPanelEvents() {
+    var e;
+    this._openPanelEventsController = new AbortController(), document.addEventListener("scroll", () => this._setOverlayPosition(), {
+      passive: !0,
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("resize", () => this._setOverlayPosition(), {
+      passive: !0,
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("pointerdown", (t) => this._pointerDownListener(t), {
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("pointerup", (t) => this._closeOnBackdropClick(t), {
+      signal: this._openPanelEventsController.signal
+    }), (e = this.triggerElement) == null || e.addEventListener(
+      "keydown",
+      (t) => this._openedPanelKeyboardInteraction(t),
+      {
+        signal: this._openPanelEventsController.signal
+      }
+    );
+  }
+  _closedPanelKeyboardInteraction(e) {
+    if (this.state === "closed")
+      switch (e.key) {
+        case "Enter":
+        case "ArrowDown":
+        case "ArrowUp":
+          this.open();
+          break;
+      }
+  }
+  _openedPanelKeyboardInteraction(e) {
+    if (this.state === "opened")
+      switch (e.key) {
+        case "Escape":
+        case "Tab":
+          this.close();
+          break;
+        case "Enter":
+          this._selectByKeyboard();
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+          this._setNextActiveOption(e);
+          break;
+      }
+  }
+  _selectByKeyboard() {
+    const e = this._options[this._activeItemIndex];
+    e && e.setSelectedViaUserInteraction(!0);
+  }
+  _setNextActiveOption(e) {
+    var a;
+    const t = this._options.filter(
+      (n) => !n.disabled && !n.hasAttribute("data-group-disabled")
+    ), o = _(e, this._activeItemIndex, t.length), i = t[o];
+    i.active = !0, (a = this.triggerElement) == null || a.setAttribute("aria-activedescendant", i.id), i.scrollIntoView({ block: "nearest" });
+    const s = t[this._activeItemIndex];
+    s && (s.active = !1), this._activeItemIndex = o;
+  }
+  _resetActiveElement() {
+    var t;
+    const e = this._options[this._activeItemIndex];
+    e && (e.active = !1), this._activeItemIndex = -1, (t = this.triggerElement) == null || t.removeAttribute("aria-activedescendant");
+  }
+  /** Highlight the searched text on the options. */
+  _highlightOptions(e) {
+    e && this._options.forEach((t) => t.highlight(e));
+  }
+  _setTriggerAttributes(e) {
+    I(e, this.id || this._overlayId, !1);
+  }
+  _removeTriggerAttributes(e) {
+    S(e);
+  }
+  _handleSlotchange() {
+    var e;
+    this._highlightOptions((e = this.triggerElement) == null ? void 0 : e.value);
+  }
+  render() {
+    return m`
+      <div class="sbb-autocomplete__gap-fix"></div>
+      <div class="sbb-autocomplete__container">
+        <div class="sbb-autocomplete__gap-fix">${P()}</div>
+        <div
+          @animationend=${this._onAnimationEnd}
+          class="sbb-autocomplete__panel"
+          ${c((e) => this._overlay = e)}
+        >
+          <div class="sbb-autocomplete__wrapper">
+            <div
+              class="sbb-autocomplete__options"
+              role=${l ? h : "listbox"}
+              id=${l ? h : this._overlayId}
+              ${c((e) => this._optionContainer = e)}
+            >
+              <slot @slotchange=${this._handleSlotchange}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = L;
+b([
+  d()
+], r.prototype, "origin", 2);
+b([
+  d()
+], r.prototype, "trigger", 2);
+b([
+  d({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })
+], r.prototype, "preserveIconSpace", 2);
+r = b([
+  f("sbb-autocomplete"),
+  x({
+    dir: E(),
+    role: l ? "listbox" : null
+  })
+], r);
+export {
+  r as SbbAutocompleteElement
+};

package/breadcrumb/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../../core/base-elements.js';
+
+declare const SbbBreadcrumbElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbHydrationMixinType> & typeof SbbLinkBaseElement;
+/**
+ * It displays a link to a page; used within a `sbb-breadcrumb-group` it can display the path to the current page.
+ *
+ * @slot - Use the unnamed slot to add content to the breadcrumb.
+ * @slot icon - Use this to display an icon as breadcrumb.
+ */
+export declare class SbbBreadcrumbElement extends SbbBreadcrumbElement_base {
+    static styles: CSSResultGroup;
+    private _hasText;
+    private _handleSlotchange;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-breadcrumb': SbbBreadcrumbElement;
+    }
+}
+export {};
+//# sourceMappingURL=breadcrumb.d.ts.map

package/breadcrumb/breadcrumb/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/elements/breadcrumb/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;;AAMjE;;;;;GAKG;AACH,qBACa,oBAAqB,SAAQ,yBAAuD;IAC/F,OAAuB,MAAM,EAAE,cAAc,CAAS;IAE7C,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,iBAAiB;cAMN,cAAc,IAAI,cAAc;CAQpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,oBAAoB,CAAC;KACxC;CACF"}