@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/title/title.d.ts

@@ -0,0 +1,16 @@
+import { CSSResultGroup } from 'lit';
+import { SbbTitleBase } from './title-base.js';
+
+/**
+ * @cssprop [--sbb-title-margin-block-start=var(--sbb-spacing-responsive-m)] - Margin block start of the title.
+ * @cssprop [--sbb-title-margin-block-end=var(--sbb-spacing-responsive-s)] - Margin block end of the title.
+ */
+export declare class SbbTitleElement extends SbbTitleBase {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-title': SbbTitleElement;
+    }
+}
+//# sourceMappingURL=title.d.ts.map

package/development/title/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/elements/title/title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;;GAGG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAgC;CAC9E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/development/title.d.ts

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

package/development/title.d.ts.map

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

package/development/title.js

@@ -0,0 +1,260 @@
+import { property, customElement } from "lit/decorators.js";
+import { css, LitElement } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { hostAttributes } from "./core/decorators.js";
+import { SbbNegativeMixin } from "./core/mixins.js";
+const style$1 = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-title-text-color-normal: var(
+    --sbb-title-text-color-normal-override,
+    var(--sbb-color-charcoal)
+  );
+  display: block;
+}
+
+:host([negative]) {
+  --sbb-title-text-color-normal: var(--sbb-color-milk);
+}
+
+:host([id]) {
+  scroll-margin-block-start: var(--sbb-spacing-fixed-10x);
+}
+
+.sbb-title {
+  color: var(--sbb-title-text-color-normal);
+}
+:host([visually-hidden]) .sbb-title {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+:host(:is([level="1"]:not([visual-level]), [visual-level="1"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-1);
+}
+:host(:is([level="2"]:not([visual-level]), [visual-level="2"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-2);
+}
+:host(:is([level="3"]:not([visual-level]), [visual-level="3"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-3);
+}
+:host(:is([level="4"]:not([visual-level]), [visual-level="4"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-4);
+}
+:host(:is([level="5"]:not([visual-level]), [visual-level="5"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-5);
+  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+}
+:host(:is([level="6"]:not([visual-level]), [visual-level="6"])) .sbb-title {
+  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  line-height: var(--sbb-title-line-height);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
+  font-size: var(--sbb-title-font-size);
+  --sbb-title-font-size: var(--sbb-font-size-title-6);
+  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
+}`;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+let SbbTitleBase = class extends SbbNegativeMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.level = "1";
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("level")) {
+      this.setAttribute("aria-level", this.level);
+    }
+  }
+  render() {
+    const TAGNAME = `h${this.level}`;
+    return html`
+      <${unsafeStatic(TAGNAME)} class="sbb-title" role="presentation">
+        <slot></slot>
+      </${unsafeStatic(TAGNAME)}>
+    `;
+  }
+};
+SbbTitleBase.styles = style$1;
+__decorateClass$1([
+  property({ reflect: true })
+], SbbTitleBase.prototype, "level", 2);
+__decorateClass$1([
+  property({ attribute: "visual-level", reflect: true })
+], SbbTitleBase.prototype, "visualLevel", 2);
+__decorateClass$1([
+  property({ attribute: "visually-hidden", reflect: true, type: Boolean })
+], SbbTitleBase.prototype, "visuallyHidden", 2);
+SbbTitleBase = __decorateClass$1([
+  hostAttributes({
+    role: "heading"
+  })
+], SbbTitleBase);
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+:host {
+  --sbb-title-margin-block-start: 0;
+  --sbb-title-margin-block-end: 0;
+  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
+}
+
+:host(:where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
+  --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
+}
+
+:host(:where([level="1"]:not([visual-level]), [visual-level="1"]):where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-start: var(--sbb-spacing-responsive-l);
+}
+
+:host(:where([level="2"]:not([visual-level]), [visual-level="2"]):where(:not([visually-hidden]))),
+:host(:where([level="3"]:not([visual-level]), [visual-level="3"]):where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
+}
+
+:host(:where([level="4"]:not([visual-level]), [visual-level="4"]):where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x);
+}
+
+:host(:where([level="5"]:not([visual-level]), [visual-level="5"]):where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x);
+}
+
+:host(:where([level="6"]:not([visual-level]), [visual-level="6"]):where(:not([visually-hidden]))) {
+  --sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbTitleElement = class extends SbbTitleBase {
+};
+SbbTitleElement.styles = [SbbTitleBase.styles, style];
+SbbTitleElement = __decorateClass([
+  customElement("sbb-title")
+], SbbTitleElement);
+export {
+  SbbTitleBase,
+  SbbTitleElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGl0bGUuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90aXRsZS90aXRsZS1iYXNlLnRzIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RpdGxlL3RpdGxlLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFByb3BlcnR5VmFsdWVzLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCwgdW5zYWZlU3RhdGljIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHsgaG9zdEF0dHJpYnV0ZXMgfSBmcm9tICcuLi9jb3JlL2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGl0bGUtY29tbW9uLnNjc3M/bGl0JmlubGluZSc7XG5cbmV4cG9ydCB0eXBlIFNiYlRpdGxlTGV2ZWwgPSAnMScgfCAnMicgfCAnMycgfCAnNCcgfCAnNScgfCAnNic7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSB0aXRsZSB3aXRoIGEgaGVhZGluZyByb2xlLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gZGlzcGxheSB0aGUgdGl0bGUuXG4gKi9cbkBob3N0QXR0cmlidXRlcyh7XG4gIHJvbGU6ICdoZWFkaW5nJyxcbn0pXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgU2JiVGl0bGVCYXNlIGV4dGVuZHMgU2JiTmVnYXRpdmVNaXhpbihMaXRFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKiBUaXRsZSBsZXZlbCAqL1xuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlIH0pIHB1YmxpYyBsZXZlbDogU2JiVGl0bGVMZXZlbCA9ICcxJztcblxuICAvKiogVmlzdWFsIGxldmVsIGZvciB0aGUgdGl0bGUuIE9wdGlvbmFsLCBpZiBub3Qgc2V0LCB0aGUgdmFsdWUgb2YgbGV2ZWwgd2lsbCBiZSB1c2VkLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICd2aXN1YWwtbGV2ZWwnLCByZWZsZWN0OiB0cnVlIH0pXG4gIHB1YmxpYyB2aXN1YWxMZXZlbD86IFNiYlRpdGxlTGV2ZWw7XG5cbiAgLyoqXG4gICAqIFNvbWV0aW1lcyB3ZSBuZWVkIGEgdGl0bGUgaW4gdGhlIG1hcmt1cCB0byBwcmVzZW50IGEgcHJvcGVyIGhpZXJhcmNoeVxuICAgKiB0byB0aGUgc2NyZWVuIHJlYWRlcnMgd2hpbGUgd2UgZG8gbm90IHdhbnQgdG8gbGV0IHRoYXQgdGl0bGUgYXBwZWFyXG4gICAqIHZpc3VhbGx5LiBJbiB0aGlzIGNhc2Ugd2Ugc2V0IHZpc3VhbGx5SGlkZGVuIHRvIHRydWUuXG4gICAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICd2aXN1YWxseS1oaWRkZW4nLCByZWZsZWN0OiB0cnVlLCB0eXBlOiBCb29sZWFuIH0pXG4gIHB1YmxpYyB2aXN1YWxseUhpZGRlbj86IGJvb2xlYW47XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHdpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogdm9pZCB7XG4gICAgc3VwZXIud2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllcyk7XG5cbiAgICBpZiAoY2hhbmdlZFByb3BlcnRpZXMuaGFzKCdsZXZlbCcpKSB7XG4gICAgICB0aGlzLnNldEF0dHJpYnV0ZSgnYXJpYS1sZXZlbCcsIHRoaXMubGV2ZWwpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIGNvbnN0IFRBR05BTUUgPSBgaCR7dGhpcy5sZXZlbH1gO1xuXG4gICAgLyogZXNsaW50LWRpc2FibGUgbGl0L2JpbmRpbmctcG9zaXRpb25zICovXG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8JHt1bnNhZmVTdGF0aWMoVEFHTkFNRSl9IGNsYXNzPVwic2JiLXRpdGxlXCIgcm9sZT1cInByZXNlbnRhdGlvblwiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8LyR7dW5zYWZlU3RhdGljKFRBR05BTUUpfT5cbiAgICBgO1xuICAgIC8qIGVzbGludC1lbmFibGUgbGl0L2JpbmRpbmctcG9zaXRpb25zICovXG4gIH1cbn1cbiIsImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgU2JiVGl0bGVCYXNlIH0gZnJvbSAnLi90aXRsZS1iYXNlLmpzJztcbmltcG9ydCBzdHlsZSBmcm9tICcuL3RpdGxlLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQGNzc3Byb3AgWy0tc2JiLXRpdGxlLW1hcmdpbi1ibG9jay1zdGFydD12YXIoLS1zYmItc3BhY2luZy1yZXNwb25zaXZlLW0pXSAtIE1hcmdpbiBibG9jayBzdGFydCBvZiB0aGUgdGl0bGUuXG4gKiBAY3NzcHJvcCBbLS1zYmItdGl0bGUtbWFyZ2luLWJsb2NrLWVuZD12YXIoLS1zYmItc3BhY2luZy1yZXNwb25zaXZlLXMpXSAtIE1hcmdpbiBibG9jayBlbmQgb2YgdGhlIHRpdGxlLlxuICovXG5AY3VzdG9tRWxlbWVudCgnc2JiLXRpdGxlJylcbmV4cG9ydCBjbGFzcyBTYmJUaXRsZUVsZW1lbnQgZXh0ZW5kcyBTYmJUaXRsZUJhc2Uge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbU2JiVGl0bGVCYXNlLnN0eWxlcywgc3R5bGVdO1xufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRpdGxlJzogU2JiVGl0bGVFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOlsic3R5bGUiLCJfX2RlY29yYXRlQ2xhc3MiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBb0JPLElBQWUsZUFBZixjQUFvQyxpQkFBaUIsVUFBVSxFQUFFO0FBQUEsRUFBakUsY0FBQTtBQUFBLFVBQUEsR0FBQSxTQUFBO0FBSXdCLFNBQU8sUUFBdUI7QUFBQSxFQUFBO0FBQUEsRUFjeEMsV0FBVyxtQkFBK0M7QUFDM0UsVUFBTSxXQUFXLGlCQUFpQjtBQUU5QixRQUFBLGtCQUFrQixJQUFJLE9BQU8sR0FBRztBQUM3QixXQUFBLGFBQWEsY0FBYyxLQUFLLEtBQUs7QUFBQSxJQUM1QztBQUFBLEVBQ0Y7QUFBQSxFQUVtQixTQUF5QjtBQUNwQyxVQUFBLFVBQVUsSUFBSSxLQUFLLEtBQUs7QUFHdkIsV0FBQTtBQUFBLFNBQ0YsYUFBYSxPQUFPLENBQUM7QUFBQTtBQUFBLFVBRXBCLGFBQWEsT0FBTyxDQUFDO0FBQUE7QUFBQSxFQUc3QjtBQUNGO0FBckNzQixhQUNHLFNBQXlCQTtBQUdaQyxrQkFBQTtBQUFBLEVBQW5DLFNBQVMsRUFBRSxTQUFTLE1BQU07QUFBQSxHQUpQLGFBSWdCLFdBQUEsU0FBQSxDQUFBO0FBSTdCQSxrQkFBQTtBQUFBLEVBRE4sU0FBUyxFQUFFLFdBQVcsZ0JBQWdCLFNBQVMsTUFBTTtBQUFBLEdBUGxDLGFBUWIsV0FBQSxlQUFBLENBQUE7QUFRQUEsa0JBQUE7QUFBQSxFQUROLFNBQVMsRUFBRSxXQUFXLG1CQUFtQixTQUFTLE1BQU0sTUFBTSxTQUFTO0FBQUEsR0FmcEQsYUFnQmIsV0FBQSxrQkFBQSxDQUFBO0FBaEJhLGVBQWZBLGtCQUFBO0FBQUEsRUFITixlQUFlO0FBQUEsSUFDZCxNQUFNO0FBQUEsRUFBQSxDQUNQO0FBQUEsR0FDcUIsWUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FDVFQsSUFBQSxrQkFBTixjQUE4QixhQUFhO0FBRWxEO0FBRmEsZ0JBQ1ksU0FBeUIsQ0FBQyxhQUFhLFFBQVEsS0FBSztBQURoRSxrQkFBTixnQkFBQTtBQUFBLEVBRE4sY0FBYyxXQUFXO0FBQUEsR0FDYixlQUFBOyJ9

package/development/toast/toast.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+
+type SbbToastPositionVertical = 'top' | 'bottom';
+type SbbToastPositionHorizontal = 'left' | 'start' | 'center' | 'right' | 'end';
+export type SbbToastPosition = `${SbbToastPositionVertical}-${SbbToastPositionHorizontal}`;
+declare const SbbToastElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof SbbOpenCloseBaseElement;
+/**
+ * It displays a toast notification.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-toast`.
+ * @slot icon - Assign a custom icon via slot.
+ * @slot action - Provide a custom action for this toast.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-toast` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-toast` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-toast` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-toast` is closed.
+ * @cssprop [--sbb-toast-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 SbbToastElement extends SbbToastElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The length of time in milliseconds to wait before automatically dismissing the toast.
+     * If 0, it stays open indefinitely.
+     */
+    timeout: number;
+    /** The position where to place the toast. */
+    position: SbbToastPosition;
+    /** Whether the toast has a close button. */
+    dismissible: boolean;
+    /**
+     * The ARIA politeness level.
+     * Check https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions for further info
+     */
+    politeness: 'polite' | 'assertive' | 'off';
+    private _closeTimeout?;
+    private _abort;
+    private _language;
+    /**
+     * Role of the live region. This is only for Firefox as there is a known issue where Firefox +
+     * JAWS does not read out aria-live message.
+     */
+    private get _role();
+    /**
+     * Open the toast.
+     * If there are other opened toasts in the page, close them first.
+     */
+    open(): void;
+    /**
+     * Close the toast.
+     */
+    close(): void;
+    private _onClick;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Slotted text nodes are not read correctly by screen readers on Chrome.
+     * To address the problem, if there is at least a root text node,
+     * we wrap the whole content in a <span> tag
+     */
+    private _onContentSlotChange;
+    private _onActionSlotChange;
+    private _onToastAnimationEnd;
+    /**
+     * Since we do not stack toasts, we force the closing on other existing opened ones
+     */
+    private _closeOtherToasts;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-toast': SbbToastElement;
+    }
+}
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/development/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/elements/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAWnE,OAAO,iCAAiC,CAAC;AAIzC,KAAK,wBAAwB,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjD,KAAK,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,wBAAwB,IAAI,0BAA0B,EAAE,CAAC;;AAK3F;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,oBAAyC;IAC5E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgC,OAAO,SAAQ;IAElD,6CAA6C;IACT,QAAQ,EAAE,gBAAgB,CAAmB;IAEjF,4CAA4C;IACO,WAAW,UAAS;IAEvE;;;OAGG;IACgB,UAAU,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAY;IAEzE,OAAO,CAAC,aAAa,CAAC,CAAgC;IACtD,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;;OAGG;IACH,OAAO,KAAK,KAAK,GAUhB;IAED;;;OAGG;IACI,IAAI,IAAI,IAAI;IAYnB;;OAEG;IACI,KAAK,IAAI,IAAI;IAapB,OAAO,CAAC,QAAQ;;IAaA,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAQ5C;;;;OAIG;IACH,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,oBAAoB;IAmB5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;cAQN,MAAM,IAAI,cAAc;CAiC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/development/toast.d.ts

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

package/development/toast.d.ts.map

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