@sbb-esta/lyne-elements 0.0.0 → 0.52.1

package/expansion-panel/expansion-panel.js

@@ -0,0 +1,142 @@
+import { css as c, LitElement as h } from "lit";
+import { property as r, customElement as x } from "lit/decorators.js";
+import { html as u, unsafeStatic as p } from "lit/static-html.js";
+import { SbbConnectedAbortController as m } from "../core/controllers.js";
+import { EventEmitter as b } from "../core/eventing.js";
+import { SbbHydrationMixin as v } from "../core/mixins.js";
+const g = c`*,:before,:after{box-sizing:border-box}:host{--sbb-expansion-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-expansion-panel-background-color: var(--sbb-color-white);--sbb-expansion-panel-content-visibility: hidden;--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-border-block-start-color: var(--sbb-color-cloud);--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x);--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);display:block}:host([size=s]){--sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-2x)}@media (forced-colors: active){:host([disabled]){--sbb-expansion-panel-border-color: GrayText;--sbb-expansion-panel-border-block-start-color: GrayText}}:host([expanded]){--sbb-expansion-panel-content-visibility: visible}:host([data-accordion][data-accordion-first]){--sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent;--sbb-expansion-panel-start-end-radius: 0;--sbb-expansion-panel-start-start-radius: 0}:host([data-accordion][data-accordion-last]){--sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius)}:host([data-accordion]:not([data-accordion-last])){--sbb-expansion-panel-end-end-radius: 0;--sbb-expansion-panel-end-start-radius: 0}:host([color=milk]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}:host([borderless]){--sbb-expansion-panel-border-width: 0;--sbb-expansion-panel-border-color: transparent;--sbb-expansion-panel-border-block-start-width: 0;--sbb-expansion-panel-border-block-start-color: transparent}@media (forced-colors: active){:host([borderless]){--sbb-expansion-panel-border-width: var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width)}}:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x)}@media (forced-colors: active){:host([borderless][data-accordion]:not([data-accordion-first])){--sbb-expansion-panel-border-block-start-width: 0}}:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-milk)}@media (forced-colors: active){:host(:not([disabled])[data-toggle-hover]){--sbb-expansion-panel-border-color: Highlight;--sbb-expansion-panel-border-block-start-color: Highlight}}:host(:not([disabled])[color=milk][data-toggle-hover]){--sbb-expansion-panel-background-color: var(--sbb-color-white)}.sbb-expansion-panel{background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:grid;visibility:var(--sbb-expansion-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-expansion-panel__content-wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-expansion-panel-animation-duration)}:host([data-state=closing]) .sbb-expansion-panel__content-wrapper{animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}.sbb-expansion-panel__content{overflow:hidden}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, a, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? w(a, t) : a, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (i = (n ? l(a, t, i) : l(i)) || i);
+  return n && i && f(a, t, i), i;
+};
+let y = 0, s = class extends v(h) {
+  constructor() {
+    super(...arguments), this.color = "white", this.e = !1, this.d = !1, this.borderless = !1, this.size = "l", this.l = new b(
+      this,
+      s.events.willOpen
+    ), this.f = new b(
+      this,
+      s.events.didOpen
+    ), this.m = new b(
+      this,
+      s.events.willClose
+    ), this.n = new b(
+      this,
+      s.events.didClose
+    ), this.g = `-${++y}`, this.o = new m(this), this.h = !1;
+  }
+  set expanded(e) {
+    this.e = e, this.j();
+  }
+  get expanded() {
+    return this.e;
+  }
+  set disabled(e) {
+    this.d = e, this.k(this.d);
+  }
+  get disabled() {
+    return this.d;
+  }
+  /**
+   * The state of the notification.
+   */
+  set b(e) {
+    this.setAttribute("data-state", e);
+  }
+  get b() {
+    return this.getAttribute("data-state");
+  }
+  connectedCallback() {
+    var a;
+    super.connectedCallback();
+    const e = this.o.signal;
+    this.addEventListener("toggleExpanded", () => this.p(), { signal: e }), this.toggleAttribute("data-accordion", !!((a = this.closest) != null && a.call(this, "sbb-accordion")));
+  }
+  willUpdate(e) {
+    var a, t;
+    super.willUpdate(e), e.has("size") && ((a = this.a) == null || a.setAttribute("data-size", String(this.size)), (t = this.c) == null || t.setAttribute("data-size", String(this.size)));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeAttribute("data-accordion");
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.h = !0;
+  }
+  p() {
+    this.expanded = !this.expanded;
+  }
+  j() {
+    var e, a;
+    (e = this.a) == null || e.setAttribute("aria-expanded", String(this.expanded)), (a = this.c) == null || a.setAttribute("aria-hidden", String(!this.expanded)), this.expanded ? this.q(!this.h) : this.b === "opened" && this.r();
+  }
+  q(e = !1) {
+    this.b = "opening", this.l.emit(), e && (this.b = "opened", this.f.emit());
+  }
+  r() {
+    this.b = "closing", this.m.emit();
+  }
+  k(e) {
+    this.a && (this.a.disabled = e);
+  }
+  i() {
+    const e = Array.from(this.children ?? []), a = e.find(
+      (n) => n.localName === "sbb-expansion-panel-header"
+    ), t = e.find(
+      (n) => n.localName === "sbb-expansion-panel-content"
+    );
+    this.a === a && this.c === t || (a && this.a !== a && (a.id || (a.id = `sbb-expansion-panel-header${this.g}`), a.setAttribute("aria-expanded", String(this.expanded)), a.toggleAttribute("disabled", this.disabled), a.setAttribute("data-size", String(this.size))), t && this.c !== t && (t.id || (t.id = `sbb-expansion-panel-content${this.g}`), t.setAttribute("aria-hidden", String(!this.expanded)), t.setAttribute("data-size", String(this.size))), this.a = a, this.c = t, this.a && this.c && (this.a.setAttribute("aria-controls", this.c.id), this.c.setAttribute("aria-labelledby", this.a.id), this.c.toggleAttribute(
+      "data-icon-space",
+      this.a.hasAttribute("data-icon")
+    )));
+  }
+  s(e) {
+    e.animationName === "open-opacity" && this.b === "opening" ? (this.b = "opened", this.f.emit()) : e.animationName === "close" && this.b === "closing" && (this.b = "closed", this.n.emit());
+  }
+  render() {
+    const e = this.titleLevel ? `h${this.titleLevel}` : "div";
+    return u`
+      <div class="sbb-expansion-panel">
+        <${p(e)} class="sbb-expansion-panel__header">
+          <slot name="header" @slotchange=${this.i}></slot>
+        </${p(e)}>
+        <div class="sbb-expansion-panel__content-wrapper" @animationend=${this.s}>
+          <span class="sbb-expansion-panel__content">
+            <slot name="content" @slotchange=${this.i}></slot>
+          </span>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = g;
+s.events = {
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose"
+};
+o([
+  r({ attribute: "title-level" })
+], s.prototype, "titleLevel", 2);
+o([
+  r()
+], s.prototype, "color", 2);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "expanded", 1);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "disabled", 1);
+o([
+  r({ reflect: !0, type: Boolean })
+], s.prototype, "borderless", 2);
+o([
+  r({ reflect: !0 })
+], s.prototype, "size", 2);
+s = o([
+  x("sbb-expansion-panel")
+], s);
+export {
+  s as SbbExpansionPanelElement
+};

package/expansion-panel.d.ts

@@ -0,0 +1,4 @@
+export * from './expansion-panel/expansion-panel.js';
+export * from './expansion-panel/expansion-panel-content.js';
+export * from './expansion-panel/expansion-panel-header.js';
+//# sourceMappingURL=expansion-panel.d.ts.map

package/expansion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expansion-panel.d.ts","sourceRoot":"","sources":["../../src/elements/expansion-panel.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,6CAA6C,CAAC"}

package/expansion-panel.js

@@ -0,0 +1,3 @@
+export * from "./expansion-panel/expansion-panel.js";
+export * from "./expansion-panel/expansion-panel-content.js";
+export * from "./expansion-panel/expansion-panel-header.js";

package/file-selector/file-selector.d.ts

@@ -0,0 +1,74 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+export type DOMEvent = globalThis.Event;
+declare const SbbFileSelectorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
+/**
+ * It allows to select one or more file from storage devices and display them.
+ *
+ * @slot error - Use this to provide a `sbb-form-error` to show an error message.
+ * @event {CustomEvent<File[]>} fileChanged - An event which is emitted each time the file list changes.
+ */
+export declare class SbbFileSelectorElement extends SbbFileSelectorElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly fileChangedEvent: "fileChanged";
+    };
+    /** Whether the component has a dropzone area or not. */
+    variant: 'default' | 'dropzone';
+    /** Size variant, either s or m. */
+    size: 's' | 'm';
+    /** Whether more than one file can be selected. */
+    multiple: boolean;
+    /** Whether the newly added files should override the previously added ones. */
+    multipleMode: 'default' | 'persistent';
+    /** A comma-separated list of allowed unique file type specifiers. */
+    accept?: string;
+    /** The title displayed in `dropzone` variant. */
+    titleContent?: string;
+    /** This will be forwarded as aria-label to the native input element. */
+    accessibilityLabel: string | undefined;
+    /** The list of selected files. */
+    private _files?;
+    /** An event which is emitted each time the file list changes. */
+    private _fileChangedEvent;
+    /**
+     * Gets the currently selected files.
+     */
+    get files(): File[];
+    /**
+     * @deprecated use 'files' property instead
+     */
+    getFiles(): File[];
+    private _counter;
+    private _loadButton;
+    private _dragTarget?;
+    private _hiddenInput;
+    private _suffixes;
+    private _liveRegion;
+    private _language;
+    constructor();
+    private _blockEvent;
+    private _checkFileEquality;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onFileDrop;
+    private _onFocus;
+    private _onBlur;
+    private _setDragState;
+    private _readFiles;
+    private _createFileList;
+    private _removeFile;
+    /** Calculates the correct unit for the file's size. */
+    private _formatFileSize;
+    private _renderDefaultMode;
+    private _renderDropzoneArea;
+    private _renderFileList;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-file-selector': SbbFileSelectorElement;
+    }
+}
+export {};
+//# sourceMappingURL=file-selector.d.ts.map

package/file-selector/file-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-selector.d.ts","sourceRoot":"","sources":["../../../src/elements/file-selector/file-selector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAmB1C,OAAO,+BAA+B,CAAC;AACvC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;;AAExC;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,wDAAwD;IACrC,OAAO,EAAE,SAAS,GAAG,UAAU,CAAa;IAE/D,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,kDAAkD;IACd,QAAQ,EAAE,OAAO,CAAS;IAE9D,+EAA+E;IAExE,YAAY,EAAE,SAAS,GAAG,YAAY,CAAa;IAE1D,qEAAqE;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEnC,iDAAiD;IACA,YAAY,CAAC,EAAE,MAAM,CAAC;IAEvE,wEAAwE;IACjB,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9F,kCAAkC;IACzB,OAAO,CAAC,MAAM,CAAC,CAAS;IAEjC,iEAAiE;IACjE,OAAO,CAAC,iBAAiB,CAGvB;IAEF;;OAEG;IACH,IAAW,KAAK,IAAI,IAAI,EAAE,CAEzB;IAED;;OAEG;IACI,QAAQ,IAAI,IAAI,EAAE;IAMzB,OAAO,CAAC,QAAQ,CAAa;IAE7B,OAAO,CAAC,WAAW,CAAmC;IACtD,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,YAAY,CAAoB;IACxC,OAAO,CAAC,SAAS,CAA2C;IAC5D,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,SAAS,CAAmC;;IAOpD,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,WAAW;IAYnB,uDAAuD;IACvD,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,eAAe;cA4BJ,MAAM,IAAI,cAAc;CA2C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/file-selector.d.ts

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

package/file-selector.d.ts.map

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

package/file-selector.js

@@ -0,0 +1,218 @@
+import { css as g, LitElement as v, nothing as f } from "lit";
+import { property as l, state as y, customElement as _ } from "lit/decorators.js";
+import { ref as n } from "lit/directives/ref.js";
+import { html as a, unsafeStatic as c } from "lit/static-html.js";
+import { sbbInputModalityDetector as m } from "./core/a11y.js";
+import { SbbLanguageController as x, SbbSlotStateController as $ } from "./core/controllers.js";
+import { EventEmitter as z } from "./core/eventing.js";
+import { i18nFileSelectorCurrentlySelected as u, i18nFileSelectorButtonLabel as p, i18nFileSelectorSubtitleLabel as w, i18nFileSelectorDeleteFile as E } from "./core/i18n.js";
+import { SbbDisabledMixin as k } from "./core/mixins.js";
+import "./button/secondary-button.js";
+import "./button/secondary-button-static.js";
+import "./icon.js";
+const M = g`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host([disabled]){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host([data-active]){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host([data-active]){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--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:700;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);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);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);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--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:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
+var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (e, t, s, b) => {
+  for (var r = b > 1 ? void 0 : b ? P(t, s) : t, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (r = (b ? h(t, s, r) : h(r)) || r);
+  return b && r && S(t, s, r), r;
+};
+let i = class extends k(v) {
+  constructor() {
+    super(), this.variant = "default", this.size = "m", this.multiple = !1, this.multipleMode = "default", this.h = new z(
+      this,
+      i.events.fileChangedEvent
+    ), this.d = 0, this.m = ["B", "kB", "MB", "GB", "TB"], this.b = new x(this), new $(this);
+  }
+  /**
+   * Gets the currently selected files.
+   */
+  get files() {
+    return this.a || [];
+  }
+  /**
+   * @deprecated use 'files' property instead
+   */
+  getFiles() {
+    return this.a || [];
+  }
+  e(e) {
+    e.stopPropagation(), e.preventDefault();
+  }
+  k(e, t) {
+    return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+  }
+  n(e) {
+    this.d++, this.disabled || (this.g(e.target, !0), this.e(e));
+  }
+  o(e) {
+    this.d--, !this.disabled && e.target === this.i && this.d === 0 && (this.g(), this.e(e));
+  }
+  p(e) {
+    this.d = 0, this.disabled || (this.g(), this.e(e), this.l(e.dataTransfer.files));
+  }
+  q() {
+    m.mostRecentModality === "keyboard" && this.c.toggleAttribute("data-focus-visible", !0);
+  }
+  r() {
+    m.mostRecentModality === "keyboard" && this.c.removeAttribute("data-focus-visible");
+  }
+  g(e = void 0, t = !1) {
+    this.i = e, this.toggleAttribute("data-active", t), this.c.toggleAttribute("data-active", t);
+  }
+  s(e) {
+    const t = e.target;
+    t.files && this.l(t.files);
+  }
+  l(e) {
+    !this.multiple || this.multipleMode !== "persistent" || !this.a || this.a.length === 0 ? this.a = Array.from(e) : this.a = Array.from(e).filter(
+      (t) => this.a.findIndex((s) => this.k(t, s)) === -1
+    ).concat(this.a), this.f.innerText = u(this.a.map((t) => t.name))[this.b.current], this.h.emit(this.a);
+  }
+  t(e) {
+    this.a = this.a.filter((s) => !this.k(e, s));
+    const t = new DataTransfer();
+    this.a.forEach((s) => t.items.add(s)), this.j.files = t.files, this.f.innerText = u(this.a.map((s) => s.name))[this.b.current], this.h.emit(this.a);
+  }
+  /** Calculates the correct unit for the file's size. */
+  u(e) {
+    const t = Math.floor(Math.log(e) / Math.log(1024));
+    return `${(e / Math.pow(1024, t)).toFixed(0)} ${this.m[t]}`;
+  }
+  v() {
+    return a`
+      <sbb-secondary-button-static
+        size=${this.size}
+        icon-name="folder-open-small"
+        ?disabled=${this.disabled}
+        ${n((e) => {
+      this.c = e;
+    })}
+      >
+        ${p[this.b.current]}
+      </sbb-secondary-button-static>
+    `;
+  }
+  w() {
+    return a`
+      <span class="sbb-file-selector__dropzone-area">
+        <span class="sbb-file-selector__dropzone-area--icon">
+          <sbb-icon
+            name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
+          ></sbb-icon>
+        </span>
+        <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
+        <span class="sbb-file-selector__dropzone-area--subtitle">
+          ${w[this.b.current]}
+        </span>
+        <span class="sbb-file-selector__dropzone-area--button">
+          <sbb-secondary-button-static
+            size=${this.size}
+            ?disabled=${this.disabled}
+            ${n((e) => {
+      this.c = e;
+    })}
+          >
+            ${p[this.b.current]}
+          </sbb-secondary-button-static>
+        </span>
+      </span>
+    `;
+  }
+  x() {
+    const e = this.a.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
+    return a`
+      <${c(e.WRAPPER)} class="sbb-file-selector__file-list">
+        ${this.a.map(
+      (t) => a`
+          <${c(e.ELEMENT)} class="sbb-file-selector__file">
+            <span class="sbb-file-selector__file-details">
+              <span class="sbb-file-selector__file-name">${t.name}</span>
+              <span class="sbb-file-selector__file-size">${this.u(t.size)}</span>
+            </span>
+            <sbb-secondary-button
+              size=${this.size}
+              icon-name="trash-small"
+              @click=${() => this.t(t)}
+              aria-label=${`${E[this.b.current]} - ${t.name}`}
+            ></sbb-secondary-button>
+          </${c(e.ELEMENT)}>`
+    )}
+      </${c(e.WRAPPER)}>
+    `;
+  }
+  render() {
+    const e = this.accessibilityLabel ? `${p[this.b.current]} - ${this.accessibilityLabel}` : void 0;
+    return a`
+      <div class="sbb-file-selector">
+        <div
+          class="sbb-file-selector__input-container"
+          @dragenter=${this.n}
+          @dragover=${this.e}
+          @dragleave=${this.o}
+          @drop=${this.p}
+        >
+          <label>
+            ${this.variant === "default" ? this.v() : this.w()}
+            <input
+              class="sbb-file-selector__visually-hidden"
+              type="file"
+              ?disabled=${this.disabled}
+              ?multiple=${this.multiple}
+              accept=${this.accept || f}
+              aria-label=${e || f}
+              @change=${this.s}
+              @focus=${this.q}
+              @blur=${this.r}
+              ${n((t) => {
+      this.j = t;
+    })}
+            />
+          </label>
+        </div>
+        <p
+          role="status"
+          class="sbb-file-selector__visually-hidden"
+          ${n((t) => this.f = t)}
+        ></p>
+        ${this.a && this.a.length > 0 ? this.x() : f}
+        <div class="sbb-file-selector__error">
+          <slot name="error"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = M;
+i.events = {
+  fileChangedEvent: "fileChanged"
+};
+o([
+  l()
+], i.prototype, "variant", 2);
+o([
+  l({ reflect: !0 })
+], i.prototype, "size", 2);
+o([
+  l({ type: Boolean })
+], i.prototype, "multiple", 2);
+o([
+  l({ attribute: "multiple-mode" })
+], i.prototype, "multipleMode", 2);
+o([
+  l()
+], i.prototype, "accept", 2);
+o([
+  l({ attribute: "title-content" })
+], i.prototype, "titleContent", 2);
+o([
+  l({ attribute: "accessibility-label" })
+], i.prototype, "accessibilityLabel", 2);
+o([
+  y()
+], i.prototype, "a", 2);
+i = o([
+  _("sbb-file-selector")
+], i);
+export {
+  i as SbbFileSelectorElement
+};

package/font-characters-extension.css

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff") format("woff");
+  font-display: fallback;
+  font-weight: 400;
+}
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff") format("woff");
+  font-display: swap;
+  font-weight: 700;
+}
+@font-face {
+  font-family: SBB;
+  src: url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff2") format("woff2"), url("https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff") format("woff");
+  font-display: swap;
+  font-weight: 300;
+}

package/footer/footer.d.ts

@@ -0,0 +1,35 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+declare const SbbFooterElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * It displays a footer section for the page.
+ *
+ * @slot - Use the unnamed slot to add elements like `sbb-block-link`, `sbb-link-list`, `sbb-divider` and so on.
+ */
+export declare class SbbFooterElement extends SbbFooterElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * Variants to display the footer. The default, displays the content in regular block element
+     * approach. The clock-columns, used a css-grid for displaying the content over different
+     * breakpoints.
+     */
+    variant: 'default' | 'clock-columns';
+    /**
+     * Whether to allow the footer content to stretch to full width.
+     * By default, the content has the appropriate page size.
+     */
+    expanded: boolean;
+    /** Footer title text, visually hidden, necessary for screen readers. */
+    accessibilityTitle?: string;
+    /** Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. */
+    accessibilityTitleLevel: SbbTitleLevel;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-footer': SbbFooterElement;
+    }
+}
+export {};
+//# sourceMappingURL=footer.d.ts.map

package/footer/footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../src/elements/footer/footer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAK1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;;OAIG;IACiC,OAAO,EAAE,SAAS,GAAG,eAAe,CAAa;IAErF;;;OAGG;IACgD,QAAQ,UAAS;IAEpE,wEAAwE;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAEnF,wGAAwG;IAEjG,uBAAuB,EAAE,aAAa,CAAO;cAEjC,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/footer.d.ts

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

package/footer.d.ts.map

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

package/footer.js

@@ -0,0 +1,46 @@
+import { css as m, LitElement as h, nothing as p } from "lit";
+import { property as l, customElement as v } from "lit/decorators.js";
+import { html as b, unsafeStatic as d } from "lit/static-html.js";
+import { SbbNegativeMixin as f } from "./core/mixins.js";
+const g = m`*,:before,:after{box-sizing:border-box}:host{--sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);--sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);--sbb-footer-background-color: var(--sbb-color-milk);--sbb-footer-clock-width: 4.75rem;--sbb-footer-color: var(--sbb-color-granite);--sbb-link-text-decoration: none;display:block}@media (min-width: 37.5rem){:host{--sbb-footer-clock-width: 7rem}}:host([negative]){--sbb-footer-background-color: var(--sbb-color-charcoal);--sbb-footer-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{--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);color:var(--sbb-footer-color);padding-block:var(--sbb-spacing-responsive-l);background-color:var(--sbb-footer-background-color)}@media (forced-colors: active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-footer-wrapper{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-footer-wrapper{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-footer__title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media (min-width: 37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media (min-width: 80rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media (min-width: 37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media (min-width: 64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media (min-width: 80rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}`;
+var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (i, e, a, r) => {
+  for (var t = r > 1 ? void 0 : r ? w(e, a) : e, c = i.length - 1, n; c >= 0; c--)
+    (n = i[c]) && (t = (r ? n(e, a, t) : n(t)) || t);
+  return r && t && u(e, a, t), t;
+};
+let o = class extends f(h) {
+  constructor() {
+    super(...arguments), this.variant = "default", this.expanded = !1, this.accessibilityTitleLevel = "1";
+  }
+  render() {
+    const i = `h${this.accessibilityTitleLevel}`, e = b`<${d(i)} class="sbb-footer__title"
+        >${this.accessibilityTitle}</${d(i)}>`;
+    return b`
+      <footer class="sbb-footer">
+        <div class="sbb-footer-wrapper">
+          ${this.accessibilityTitle ? e : p}
+          <slot></slot>
+        </div>
+      </footer>
+    `;
+  }
+};
+o.styles = g;
+s([
+  l({ reflect: !0 })
+], o.prototype, "variant", 2);
+s([
+  l({ reflect: !0, type: Boolean })
+], o.prototype, "expanded", 2);
+s([
+  l({ attribute: "accessibility-title" })
+], o.prototype, "accessibilityTitle", 2);
+s([
+  l({ attribute: "accessibility-title-level" })
+], o.prototype, "accessibilityTitleLevel", 2);
+o = s([
+  v("sbb-footer")
+], o);
+export {
+  o as SbbFooterElement
+};

package/form-error/form-error.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+declare const SbbFormErrorElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * It displays an error message in the `sbb-form-field`.
+ *
+ * @slot - Use this slot to display the error message.
+ * @slot icon - Use this slot to override the default error icon.
+ */
+export declare class SbbFormErrorElement extends SbbFormErrorElement_base {
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-form-error': SbbFormErrorElement;
+    }
+}
+export {};
+//# sourceMappingURL=form-error.d.ts.map

package/form-error/form-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-error.d.ts","sourceRoot":"","sources":["../../../src/elements/form-error/form-error.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,wBAA4B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtC,iBAAiB,IAAI,IAAI;cAStB,MAAM,IAAI,cAAc;CAwB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/form-error.d.ts

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

package/form-error.d.ts.map

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