@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/navigation/navigation.js

@@ -0,0 +1,210 @@
+import { css as p, html as v } from "lit";
+import { property as m, state as u, customElement as _ } from "lit/decorators.js";
+import { ref as c } from "lit/directives/ref.js";
+import { SbbFocusHandler as f, setModalityOnNextFocus as g } from "../core/a11y.js";
+import { SbbOpenCloseBaseElement as w } from "../core/base-elements.js";
+import { SbbConnectedAbortController as k, SbbLanguageController as y } from "../core/controllers.js";
+import { hostAttributes as E } from "../core/decorators.js";
+import { SbbScrollHandler as x, findReferencedElement as C } from "../core/dom.js";
+import { i18nCloseNavigation as O } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as S } from "../core/mixins.js";
+import { AgnosticMutationObserver as A, AgnosticResizeObserver as N } from "../core/observers.js";
+import { isEventOnElement as l, removeAriaOverlayTriggerAttributes as z, setAriaOverlayTriggerAttributes as T, applyInertMechanism as d, removeInertMechanism as h } from "../core/overlay.js";
+import "../button/transparent-button.js";
+const L = p`*,:before,:after{box-sizing:border-box}:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x) );--sbb-navigation-animation-easing: ease-in;--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);--sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);--sbb-navigation-backdrop-visibility: hidden;--sbb-navigation-backdrop-pointer-events: none;--sbb-navigation-backdrop-color: transparent;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);--sbb-navigation-inline-start: 0;--sbb-navigation-expanded-width: 100%;--sbb-navigation-inset: 0 auto auto 0;--sbb-navigation-transform: translateX(-100%);--sbb-navigation-content-transform: translateX(0);--sbb-navigation-width: 100%;--sbb-navigation-height: 100vh;display:block;position:fixed;inset:var(--sbb-navigation-inset);z-index:var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));overflow:hidden;--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}@supports (height: 100dvh){:host{--sbb-navigation-height: 100dvh}}@media (min-width: 52.5rem){:host{--sbb-navigation-grid-column: 1 / 9}}@media (min-width: 64rem){:host{--sbb-navigation-grid-column: 1 / 5;--sbb-navigation-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x) );--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);--sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;--sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);--sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);--sbb-navigation-width: calc(100% + var(--sbb-layout-base-offset-responsive))}}@media (min-width: 90rem){:host{--sbb-navigation-grid-column: 1 / 6;--sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl)}}:host([data-state=opened]){--sbb-navigation-animation-easing: ease-out}:host(:is([data-state=opened],[data-state=opening])){--sbb-navigation-backdrop-visibility: visible;--sbb-navigation-backdrop-pointer-events: all;--sbb-navigation-backdrop-color: var(--sbb-color-black-alpha-70)}:host(:not([data-state=closed])){--sbb-navigation-inset: 0;--sbb-navigation-transform: translateX(0)}:host([data-has-navigation-section]){--sbb-navigation-content-transform: translateX(-100%)}@media (min-width: 64rem){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100vw;--sbb-navigation-content-transform: translateX(0%)}@supports (height: 100dvw){:host([data-has-navigation-section]){--sbb-navigation-expanded-width: 100dvw}}}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}.sbb-navigation__container{display:grid;gap:var(--sbb-grid-base-gutter-responsive);grid-template-columns:repeat(var(--sbb-grid-base-columns),1fr);padding-inline:0;pointer-events:none;transform:var(--sbb-navigation-transform)}@media (min-width: 64rem){.sbb-navigation__container{padding-inline:var(--sbb-layout-base-offset-responsive)}.sbb-navigation__container:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:background-color,visibility;content:"";visibility:var(--sbb-navigation-backdrop-visibility);pointer-events:var(--sbb-navigation-backdrop-pointer-events);position:fixed;inset:var(--sbb-navigation-inset);background-color:var(--sbb-navigation-backdrop-color)}}.sbb-navigation{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:none;width:var(--sbb-navigation-width);grid-column:var(--sbb-navigation-grid-column);padding:0;margin:0;position:relative;inset-inline-start:var(--sbb-navigation-inline-start);inset-block-start:0;border:none;pointer-events:none;height:var(--sbb-navigation-height);color:var(--sbb-color-white);background-color:var(--sbb-color-midnight)}.sbb-navigation:before{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;content:"";position:absolute;width:var(--sbb-navigation-expanded-width);height:var(--sbb-navigation-height);background:var(--sbb-color-midnight)}:host([data-state]:not([data-state=closed])) .sbb-navigation{display:block;pointer-events:all;animation-name:open;animation-duration:var(--sbb-navigation-animation-duration);animation-timing-function:var(--sbb-navigation-animation-easing)}:host([data-state][data-state=closing]) .sbb-navigation{pointer-events:none;animation-name:close}@media (forced-colors: active){.sbb-navigation{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-navigation__wrapper{outline:none}.sbb-navigation__header{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:width;display:flex;justify-content:flex-end;position:absolute;width:var(--sbb-navigation-expanded-width);pointer-events:none;padding:var(--sbb-spacing-responsive-xs);z-index:calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-navigation__close{pointer-events:all}.sbb-navigation__content{transition-duration:var(--sbb-navigation-animation-duration);transition-timing-function:var(--sbb-navigation-animation-easing);transition-property:transform;--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);display:flex;flex-direction:column;gap:var(--sbb-spacing-responsive-xxl);position:relative;height:var(--sbb-navigation-height);padding-inline:var(--sbb-navigation-padding-inline);padding-block:var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end);overflow-y:auto;transform:var(--sbb-navigation-content-transform)}.sbb-navigation__content::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-navigation__content::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-navigation__content::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-navigation__content::-webkit-scrollbar-button,.sbb-navigation__content::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-navigation__content{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}::slotted(:first-child){margin-block-start:var(--sbb-navigation-list-margin-block-start)}@keyframes open{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes close{0%{transform:translate(0)}to{transform:translate(-100%)}}`;
+var B = Object.defineProperty, H = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
+  for (var e = a > 1 ? void 0 : a ? H(i, n) : i, r = t.length - 1, b; r >= 0; r--)
+    (b = t[r]) && (e = (a ? b(i, n, e) : b(e)) || e);
+  return a && e && B(i, n, e), e;
+};
+const I = {
+  subtree: !0,
+  attributeFilter: ["data-state"]
+};
+let P = 0;
+const R = 150;
+let o = class extends S(w) {
+  constructor() {
+    super(...arguments), this._trigger = null, this._activeNavigationSection = null, this._triggerElement = null, this._abort = new k(this), this._language = new y(this), this._focusHandler = new f(), this._scrollHandler = new x(), this._isPointerDownEventOnNavigation = !1, this._resizeObserverTimeout = null, this._navigationObserver = new A(
+      (t) => this._onNavigationSectionChange(t)
+    ), this._navigationResizeObserver = new N(() => this._onNavigationResize()), this._trapFocusFilter = (t) => t.nodeName !== "SBB-NAVIGATION-SECTION" || t.getAttribute("data-state") === "opened", this._pointerDownListener = (t) => {
+      var i, n;
+      this._isPointerDownEventOnNavigation = l(this._navigation, t) || l(
+        (n = (i = this.querySelector(
+          'sbb-navigation-section[data-state="opened"]'
+        )) == null ? void 0 : i.shadowRoot) == null ? void 0 : n.querySelector("nav.sbb-navigation-section"),
+        t
+      );
+    }, this._closeOnBackdropClick = (t) => {
+      !this._isPointerDownEventOnNavigation && !l(this._navigation, t) && this.close();
+    };
+  }
+  set trigger(t) {
+    const i = this._trigger;
+    this._trigger = t, this._removeTriggerClickListener(this._trigger, i);
+  }
+  get trigger() {
+    return this._trigger;
+  }
+  get activeNavigationSection() {
+    return this._activeNavigationSection;
+  }
+  /**
+   * Opens the navigation.
+   */
+  open() {
+    var t;
+    this.state !== "closed" || !this._navigation || this.willOpen.emit() && (this.state = "opening", this._checkActiveActions(), this._checkActiveSection(), this.startUpdate(), this._scrollHandler.disableScroll(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "true"));
+  }
+  _checkActiveSection() {
+    var i;
+    const t = this.querySelector(
+      "sbb-navigation-button.sbb-active"
+    );
+    (i = t == null ? void 0 : t.connectedSection) == null || i.open();
+  }
+  _checkActiveActions() {
+    const t = Array.from(
+      this.querySelectorAll(":is(sbb-navigation-button, sbb-navigation-link).sbb-active")
+    );
+    t == null || t.forEach((i) => {
+      var n;
+      return (n = i.marker) == null ? void 0 : n.select(i);
+    });
+  }
+  /**
+   * Closes the navigation.
+   */
+  close() {
+    var t;
+    this.state === "opened" && this.willClose.emit() && (this.state = "closing", this.startUpdate(), (t = this._triggerElement) == null || t.setAttribute("aria-expanded", "false"));
+  }
+  // Removes trigger click listener on trigger change.
+  _removeTriggerClickListener(t, i) {
+    var n, a;
+    t !== i && ((n = this._navigationController) == null || n.abort(), (a = this._windowEventsController) == null || a.abort(), this._configure(this.trigger));
+  }
+  // Check if the trigger is valid and attach click event listeners.
+  _configure(t) {
+    var i;
+    z(this._triggerElement), t && (this._triggerElement = C(t), this._triggerElement && (T(this._triggerElement, "menu", this.id, this.state), (i = this._navigationController) == null || i.abort(), this._navigationController = new AbortController(), this._triggerElement.addEventListener("click", () => this.open(), {
+      signal: this._navigationController.signal
+    })));
+  }
+  // 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(t) {
+    var i, n;
+    t.animationName === "open" && this.state === "opening" ? (this.state = "opened", this.didOpen.emit(), this._navigationResizeObserver.observe(this), d(this), this._focusHandler.trap(this, { filter: this._trapFocusFilter }), this._attachWindowEvents(), this._setNavigationFocus()) : t.animationName === "close" && this.state === "closing" && (this.state = "closed", this._navigationContentElement.scrollTo(0, 0), g(this._triggerElement), h(), (i = this._triggerElement) == null || i.focus(), this.didClose.emit(), this._navigationResizeObserver.unobserve(this), this._resetMarkers(), (n = this._windowEventsController) == null || n.abort(), this._focusHandler.disconnect(), this._scrollHandler.enableScroll()), this.completeUpdate();
+  }
+  _resetMarkers() {
+    const t = Array.from(
+      this.querySelectorAll(
+        ":is(sbb-navigation-button, sbb-navigation-link)[data-action-active]:not(.sbb-active)"
+      )
+    );
+    t == null || t.forEach((i) => {
+      var n;
+      return (n = i.marker) == null ? void 0 : n.reset();
+    });
+  }
+  _attachWindowEvents() {
+    this._windowEventsController = new AbortController(), window.addEventListener("keydown", (t) => this._onKeydownEvent(t), {
+      signal: this._windowEventsController.signal
+    });
+  }
+  _handleNavigationClose(t) {
+    t.composedPath().filter((n) => n instanceof window.HTMLElement).some((n) => this._isCloseElement(n)) && this.close();
+  }
+  _isCloseElement(t) {
+    return t.nodeName === "A" || t.hasAttribute("sbb-navigation-close") && !t.hasAttribute("disabled");
+  }
+  // Closes the navigation on "Esc" key pressed.
+  _onKeydownEvent(t) {
+    this.state === "opened" && t.key === "Escape" && this.close();
+  }
+  // Set focus on the first focusable element.
+  _setNavigationFocus() {
+    const t = this.shadowRoot.querySelector(
+      "#sbb-navigation-close-button"
+    );
+    g(t), t.focus();
+  }
+  // Observe changes on navigation section data-state.
+  _onNavigationSectionChange(t) {
+    for (const i of t)
+      i.target.nodeName === "SBB-NAVIGATION-SECTION" && (this._activeNavigationSection = this.querySelector(
+        'sbb-navigation-section[data-state="opening"], sbb-navigation-section[data-state="opened"]'
+      ), this.toggleAttribute("data-has-navigation-section", !!this._activeNavigationSection));
+  }
+  _onNavigationResize() {
+    this.state === "opened" && (this._resizeObserverTimeout && clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-resize-disable-animation", !0), this._resizeObserverTimeout = setTimeout(
+      () => this.removeAttribute("data-resize-disable-animation"),
+      R
+    ));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id || (this.id = `sbb-navigation-${P++}`);
+    const t = this._abort.signal;
+    this.addEventListener("click", (i) => this._handleNavigationClose(i), { signal: t }), this._configure(this.trigger), this._navigationObserver.observe(this, I), this.addEventListener("pointerup", (i) => this._closeOnBackdropClick(i), { signal: t }), this.addEventListener("pointerdown", (i) => this._pointerDownListener(i), { signal: t }), this.state === "opened" && d(this);
+  }
+  disconnectedCallback() {
+    var t, i;
+    super.disconnectedCallback(), (t = this._navigationController) == null || t.abort(), (i = this._windowEventsController) == null || i.abort(), this._focusHandler.disconnect(), this._navigationObserver.disconnect(), this._navigationResizeObserver.disconnect(), h();
+  }
+  render() {
+    const t = v`
+      <sbb-transparent-button
+        id="sbb-navigation-close-button"
+        class="sbb-navigation__close"
+        aria-label=${this.accessibilityCloseLabel || O[this._language.current]}
+        aria-controls="sbb-navigation-overlay"
+        negative
+        size="m"
+        type="button"
+        icon-name="cross-small"
+        sbb-navigation-close
+      ></sbb-transparent-button>
+    `;
+    return v`
+      <div class="sbb-navigation__container">
+        <div
+          id="sbb-navigation-overlay"
+          @animationend=${(i) => this._onAnimationEnd(i)}
+          class="sbb-navigation"
+          ${c((i) => this._navigation = i)}
+        >
+          <div class="sbb-navigation__header">${t}</div>
+          <div class="sbb-navigation__wrapper">
+            <div
+              class="sbb-navigation__content"
+              ${c((i) => this._navigationContentElement = i)}
+            >
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+        <slot name="navigation-section"></slot>
+      </div>
+    `;
+  }
+};
+o.styles = L;
+s([
+  m()
+], o.prototype, "trigger", 1);
+s([
+  m({ attribute: "accessibility-close-label" })
+], o.prototype, "accessibilityCloseLabel", 2);
+s([
+  u()
+], o.prototype, "_activeNavigationSection", 2);
+o = s([
+  _("sbb-navigation"),
+  E({
+    role: "navigation"
+  })
+], o);
+export {
+  o as SbbNavigationElement
+};

package/navigation.d.ts

@@ -0,0 +1,8 @@
+export * from './navigation/navigation.js';
+export * from './navigation/navigation-list.js';
+export * from './navigation/navigation-marker.js';
+export * from './navigation/navigation-section.js';
+export * from './navigation/navigation-button.js';
+export * from './navigation/navigation-link.js';
+export * from './navigation/common.js';
+//# sourceMappingURL=navigation.d.ts.map

package/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/elements/navigation.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC"}

package/navigation.js

@@ -0,0 +1,7 @@
+export * from "./navigation/navigation.js";
+export * from "./navigation/navigation-list.js";
+export * from "./navigation/navigation-marker.js";
+export * from "./navigation/navigation-section.js";
+export * from "./navigation/navigation-button.js";
+export * from "./navigation/navigation-link.js";
+export * from "./navigation/common.js";

package/normalize.css

@@ -0,0 +1,189 @@
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+Document
+========
+*/
+/**
+1. Correct the line height in all browsers. ///// Commented out since we define own line-height /////
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size (opinionated).
+*/
+html {
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+}
+
+/*
+Sections
+========
+*/
+body {
+  margin: 0; /* Remove the margin in all browsers. */
+}
+
+/*
+Grouping content
+================
+*/
+/**
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+*/
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+}
+
+/*
+Text-level semantics
+====================
+*/
+/**
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+/**
+Add the correct font weight in Edge and Safari.
+*/
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+
+/*
+Tabular data
+============
+*/
+/**
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+}
+
+/*
+Forms
+=====
+*/
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+button,
+select {
+  text-transform: none;
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+:is(button, input):where([type=button], [type=reset], [type=submit]) {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the additional ':invalid' styles in Firefox.
+See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
+*/
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
+}

package/notification/notification.d.ts

@@ -0,0 +1,82 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+/**
+ * It displays messages which require a user's attention without interrupting its tasks.
+ *
+ * @slot - Use the unnamed slot to add content to the notification message.
+ * @slot title - Use this to provide a notification title (optional).
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-notification` starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-notification` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-notification` begins the closing transition.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-notification` is closed.
+ * @cssprop [--sbb-notification-margin=0] - Can be used to modify the margin in order to get a smoother animation.
+ * See style section for more information.
+ */
+export declare class SbbNotificationElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+    };
+    /**
+     * The type of the notification.
+     */
+    type: 'info' | 'success' | 'warn' | 'error';
+    /**
+     * Content of title.
+     */
+    titleContent?: string;
+    /**
+     * Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.
+     */
+    titleLevel: SbbTitleLevel;
+    /**
+     * Whether the notification is readonly.
+     * In readonly mode, there is no dismiss button offered to the user.
+     */
+    readonly: boolean;
+    /** Size variant, either s or m. */
+    size: 'm' | 's';
+    /**
+     * The enabled animations.
+     */
+    animation: 'open' | 'close' | 'all' | 'none';
+    /**
+     * The state of the notification.
+     */
+    private set _state(value);
+    private get _state();
+    private _notificationElement;
+    private _resizeObserverTimeout;
+    private _language;
+    private _notificationResizeObserver;
+    /** Emits whenever the `sbb-notification` starts the opening transition. */
+    private _willOpen;
+    /** Emits whenever the `sbb-notification` is opened. */
+    private _didOpen;
+    /** Emits whenever the `sbb-notification` begins the closing transition. */
+    private _willClose;
+    /** Emits whenever the `sbb-notification` is closed. */
+    private _didClose;
+    constructor();
+    private _open;
+    close(): void;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    disconnectedCallback(): void;
+    private _setNotificationHeight;
+    private _onNotificationResize;
+    private _onNotificationAnimationEnd;
+    private _handleOpening;
+    private _handleClosing;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-notification': SbbNotificationElement;
+    }
+}
+//# sourceMappingURL=notification.d.ts.map

package/notification/notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/elements/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AAarB;;;;;;;;;;;GAWG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IAEpD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;;MAKlB;IAEX;;OAEG;IACiC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAU;IAEzF;;OAEG;IAC6D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtF;;OAEG;IAC4C,UAAU,EAAE,aAAa,CAAO;IAE/E;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D;;OAEG;IACiC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAS;IAEzF;;OAEG;IACH,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,oBAAoB,CAAe;IAC3C,OAAO,CAAC,sBAAsB,CAA8C;IAC5E,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,2BAA2B,CAEjC;IAEF,2EAA2E;IAC3E,OAAO,CAAC,SAAS,CAGf;IAEF,uDAAuD;IACvD,OAAO,CAAC,QAAQ,CAGd;IAEF,2EAA2E;IAC3E,OAAO,CAAC,UAAU,CAGhB;IAEF,uDAAuD;IACvD,OAAO,CAAC,SAAS,CAGf;;IAOF,OAAO,CAAC,KAAK;IAON,KAAK,IAAI,IAAI;IAOJ,iBAAiB,IAAI,IAAI;cAMhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAa7E,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAmB7B,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;cAOH,MAAM,IAAI,cAAc;CAuC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,sBAAsB,CAAC;KAC5C;CACF"}

package/notification.d.ts

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

package/notification.d.ts.map

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