@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/footer.js

@@ -0,0 +1,229 @@
+import { css, LitElement, nothing } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { SbbNegativeMixin } from "./core/mixins.js";
+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. */
+*,
+::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: calc(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: normal;
+  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: calc(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: calc(37.5rem)) {
+  :host([variant=clock-columns]) slot {
+    grid-template-columns: calc(50% - var(--sbb-footer-gap-horizontal) / 2);
+  }
+}
+@media (min-width: calc(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: calc(37.5rem)) {
+  :host([variant=clock-columns]) ::slotted(sbb-clock) {
+    align-self: start;
+    grid-row: 2;
+  }
+}
+@media (min-width: calc(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: calc(37.5rem)) {
+  :host([variant=clock-columns]) ::slotted(sbb-divider) {
+    grid-row: 3;
+    grid-column: 1/4;
+    width: 100%;
+  }
+}
+@media (min-width: calc(80rem)) {
+  :host([variant=clock-columns]) ::slotted(sbb-divider) {
+    grid-row: 2;
+  }
+}
+@media (min-width: calc(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: calc(64rem)) {
+  :host([variant=clock-columns]) ::slotted(*:last-child) {
+    grid-column: 1/4;
+  }
+}
+@media (min-width: calc(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 __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 SbbFooterElement = class extends SbbNegativeMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.expanded = false;
+    this.accessibilityTitleLevel = "1";
+  }
+  render() {
+    const TITLE_TAG_NAME = `h${this.accessibilityTitleLevel}`;
+    const accessibilityTitle = html`<${unsafeStatic(TITLE_TAG_NAME)} class="sbb-footer__title"
+        >${this.accessibilityTitle}</${unsafeStatic(TITLE_TAG_NAME)}>`;
+    return html`
+      <footer class="sbb-footer">
+        <div class="sbb-footer-wrapper">
+          ${this.accessibilityTitle ? accessibilityTitle : nothing}
+          <slot></slot>
+        </div>
+      </footer>
+    `;
+  }
+};
+SbbFooterElement.styles = style;
+__decorateClass([
+  property({ reflect: true })
+], SbbFooterElement.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SbbFooterElement.prototype, "expanded", 2);
+__decorateClass([
+  property({ attribute: "accessibility-title" })
+], SbbFooterElement.prototype, "accessibilityTitle", 2);
+__decorateClass([
+  property({ attribute: "accessibility-title-level" })
+], SbbFooterElement.prototype, "accessibilityTitleLevel", 2);
+SbbFooterElement = __decorateClass([
+  customElement("sbb-footer")
+], SbbFooterElement);
+export {
+  SbbFooterElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9vdGVyLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvZm9vdGVyL2Zvb3Rlci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBMaXRFbGVtZW50LCBub3RoaW5nIH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCwgdW5zYWZlU3RhdGljIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHsgU2JiTmVnYXRpdmVNaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVMZXZlbCB9IGZyb20gJy4uL3RpdGxlLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vZm9vdGVyLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSBmb290ZXIgc2VjdGlvbiBmb3IgdGhlIHBhZ2UuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgZWxlbWVudHMgbGlrZSBgc2JiLWJsb2NrLWxpbmtgLCBgc2JiLWxpbmstbGlzdGAsIGBzYmItZGl2aWRlcmAgYW5kIHNvIG9uLlxuICovXG5AY3VzdG9tRWxlbWVudCgnc2JiLWZvb3RlcicpXG5leHBvcnQgY2xhc3MgU2JiRm9vdGVyRWxlbWVudCBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oTGl0RWxlbWVudCkge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICAvKipcbiAgICogVmFyaWFudHMgdG8gZGlzcGxheSB0aGUgZm9vdGVyLiBUaGUgZGVmYXVsdCwgZGlzcGxheXMgdGhlIGNvbnRlbnQgaW4gcmVndWxhciBibG9jayBlbGVtZW50XG4gICAqIGFwcHJvYWNoLiBUaGUgY2xvY2stY29sdW1ucywgdXNlZCBhIGNzcy1ncmlkIGZvciBkaXNwbGF5aW5nIHRoZSBjb250ZW50IG92ZXIgZGlmZmVyZW50XG4gICAqIGJyZWFrcG9pbnRzLlxuICAgKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgdmFyaWFudDogJ2RlZmF1bHQnIHwgJ2Nsb2NrLWNvbHVtbnMnID0gJ2RlZmF1bHQnO1xuXG4gIC8qKlxuICAgKiBXaGV0aGVyIHRvIGFsbG93IHRoZSBmb290ZXIgY29udGVudCB0byBzdHJldGNoIHRvIGZ1bGwgd2lkdGguXG4gICAqIEJ5IGRlZmF1bHQsIHRoZSBjb250ZW50IGhhcyB0aGUgYXBwcm9wcmlhdGUgcGFnZSBzaXplLlxuICAgKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSwgdHlwZTogQm9vbGVhbiB9KSBwdWJsaWMgZXhwYW5kZWQgPSBmYWxzZTtcblxuICAvKiogRm9vdGVyIHRpdGxlIHRleHQsIHZpc3VhbGx5IGhpZGRlbiwgbmVjZXNzYXJ5IGZvciBzY3JlZW4gcmVhZGVycy4gKi9cbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnYWNjZXNzaWJpbGl0eS10aXRsZScgfSkgcHVibGljIGFjY2Vzc2liaWxpdHlUaXRsZT86IHN0cmluZztcblxuICAvKiogTGV2ZWwgb2YgdGhlIGFjY2Vzc2liaWxpdHkgdGl0bGUsIHdpbGwgYmUgcmVuZGVyZWQgYXMgaGVhZGluZyB0YWcgKGUuZy4gaDEpLiBEZWZhdWx0cyB0byBsZXZlbCAxLiAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICdhY2Nlc3NpYmlsaXR5LXRpdGxlLWxldmVsJyB9KVxuICBwdWJsaWMgYWNjZXNzaWJpbGl0eVRpdGxlTGV2ZWw6IFNiYlRpdGxlTGV2ZWwgPSAnMSc7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgY29uc3QgVElUTEVfVEFHX05BTUUgPSBgaCR7dGhpcy5hY2Nlc3NpYmlsaXR5VGl0bGVMZXZlbH1gO1xuXG4gICAgLyogZXNsaW50LWRpc2FibGUgbGl0L2JpbmRpbmctcG9zaXRpb25zICovXG4gICAgY29uc3QgYWNjZXNzaWJpbGl0eVRpdGxlID0gaHRtbGA8JHt1bnNhZmVTdGF0aWMoVElUTEVfVEFHX05BTUUpfSBjbGFzcz1cInNiYi1mb290ZXJfX3RpdGxlXCJcbiAgICAgICAgPiR7dGhpcy5hY2Nlc3NpYmlsaXR5VGl0bGV9PC8ke3Vuc2FmZVN0YXRpYyhUSVRMRV9UQUdfTkFNRSl9PmA7XG4gICAgLyogZXNsaW50LWVuYWJsZSBsaXQvYmluZGluZy1wb3NpdGlvbnMgKi9cblxuICAgIHJldHVybiBodG1sYFxuICAgICAgPGZvb3RlciBjbGFzcz1cInNiYi1mb290ZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNiYi1mb290ZXItd3JhcHBlclwiPlxuICAgICAgICAgICR7dGhpcy5hY2Nlc3NpYmlsaXR5VGl0bGUgPyBhY2Nlc3NpYmlsaXR5VGl0bGUgOiBub3RoaW5nfVxuICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Zvb3Rlcj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItZm9vdGVyJzogU2JiRm9vdGVyRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBZ0JPLElBQU0sbUJBQU4sY0FBK0IsaUJBQWlCLFVBQVUsRUFBRTtBQUFBLEVBQTVELGNBQUE7QUFBQSxVQUFBLEdBQUEsU0FBQTtBQVF3QixTQUFPLFVBQXVDO0FBTS9CLFNBQU8sV0FBVztBQU85RCxTQUFPLDBCQUF5QztBQUFBLEVBQUE7QUFBQSxFQUU3QixTQUF5QjtBQUNwQyxVQUFBLGlCQUFpQixJQUFJLEtBQUssdUJBQXVCO0FBR3ZELFVBQU0scUJBQXFCLFFBQVEsYUFBYSxjQUFjLENBQUM7QUFBQSxXQUN4RCxLQUFLLGtCQUFrQixLQUFLLGFBQWEsY0FBYyxDQUFDO0FBR3hELFdBQUE7QUFBQTtBQUFBO0FBQUEsWUFHQyxLQUFLLHFCQUFxQixxQkFBcUIsT0FBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsRUFLaEU7QUFDRjtBQXhDYSxpQkFDWSxTQUF5QjtBQU9aLGdCQUFBO0FBQUEsRUFBbkMsU0FBUyxFQUFFLFNBQVMsTUFBTTtBQUFBLEdBUmhCLGlCQVF5QixXQUFBLFdBQUEsQ0FBQTtBQU1lLGdCQUFBO0FBQUEsRUFBbEQsU0FBUyxFQUFFLFNBQVMsTUFBTSxNQUFNLFNBQVM7QUFBQSxHQWQvQixpQkFjd0MsV0FBQSxZQUFBLENBQUE7QUFHSSxnQkFBQTtBQUFBLEVBQXRELFNBQVMsRUFBRSxXQUFXLHVCQUF1QjtBQUFBLEdBakJuQyxpQkFpQjRDLFdBQUEsc0JBQUEsQ0FBQTtBQUloRCxnQkFBQTtBQUFBLEVBRE4sU0FBUyxFQUFFLFdBQVcsNkJBQTZCO0FBQUEsR0FwQnpDLGlCQXFCSixXQUFBLDJCQUFBLENBQUE7QUFyQkksbUJBQU4sZ0JBQUE7QUFBQSxFQUROLGNBQWMsWUFBWTtBQUFBLEdBQ2QsZ0JBQUE7In0=

package/development/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/development/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/development/form-error.d.ts

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

package/development/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"}

package/development/form-error.js

@@ -0,0 +1,121 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { SbbNegativeMixin } from "./core/mixins.js";
+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. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-form-error-color: var(--sbb-color-red125);
+  --sbb-form-error-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
+  --sbb-form-error-icon-size: 1.0625rem;
+  --sbb-icon-svg-width: var(--sbb-form-error-icon-size);
+  --sbb-icon-svg-height: var(--sbb-form-error-icon-size);
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  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;
+  align-items: flex-start;
+  color: var(--sbb-form-error-color);
+  min-height: var(--sbb-form-error-height);
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-form-error-color: LinkText !important;
+  }
+}
+
+:host([negative]) {
+  --sbb-form-error-color: var(--sbb-color-red-mode-dark);
+}
+
+.form-error__icon {
+  display: flex;
+  align-items: center;
+  height: var(--sbb-form-error-height);
+  margin-inline-end: var(--sbb-spacing-fixed-1x);
+}
+
+.form-error-content {
+  line-height: var(--sbb-typo-line-height-body-text);
+  vertical-align: text-top;
+}
+
+.form-error__icon-svg {
+  stroke: currentcolor;
+  height: var(--sbb-form-error-height);
+}`;
+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 nextId = 0;
+let SbbFormErrorElement = class extends SbbNegativeMixin(LitElement) {
+  connectedCallback() {
+    var _a, _b;
+    super.connectedCallback();
+    this.id || (this.id = `sbb-form-error-${nextId++}`);
+    const formField = ((_a = this.closest) == null ? void 0 : _a.call(this, "sbb-form-field")) ?? ((_b = this.closest) == null ? void 0 : _b.call(this, "[data-form-field]"));
+    if (formField) {
+      this.negative = formField.hasAttribute("negative");
+    }
+  }
+  render() {
+    return html`
+      <span class="form-error__icon">
+        <slot name="icon">
+          <svg
+            class="form-error__icon-svg"
+            aria-hidden="true"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line x1="7" y1="3" x2="7" y2="8.5" />
+            <line x1="7" y1="10" x2="7" y2="11" />
+            <circle cx="7" cy="7" r="6.5" />
+          </svg>
+        </slot>
+      </span>
+      <span class="form-error-content">
+        <slot></slot>
+      </span>
+    `;
+  }
+};
+SbbFormErrorElement.styles = style;
+SbbFormErrorElement = __decorateClass([
+  customElement("sbb-form-error")
+], SbbFormErrorElement);
+export {
+  SbbFormErrorElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1lcnJvci5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2Zvcm0tZXJyb3IvZm9ybS1lcnJvci50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBodG1sLCBMaXRFbGVtZW50IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYk5lZ2F0aXZlTWl4aW4gfSBmcm9tICcuLi9jb3JlL21peGlucy5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2Zvcm0tZXJyb3Iuc2Nzcz9saXQmaW5saW5lJztcblxubGV0IG5leHRJZCA9IDA7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYW4gZXJyb3IgbWVzc2FnZSBpbiB0aGUgYHNiYi1mb3JtLWZpZWxkYC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGlzIHNsb3QgdG8gZGlzcGxheSB0aGUgZXJyb3IgbWVzc2FnZS5cbiAqIEBzbG90IGljb24gLSBVc2UgdGhpcyBzbG90IHRvIG92ZXJyaWRlIHRoZSBkZWZhdWx0IGVycm9yIGljb24uXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItZm9ybS1lcnJvcicpXG5leHBvcnQgY2xhc3MgU2JiRm9ybUVycm9yRWxlbWVudCBleHRlbmRzIFNiYk5lZ2F0aXZlTWl4aW4oTGl0RWxlbWVudCkge1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBzdHlsZTtcblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLmlkIHx8PSBgc2JiLWZvcm0tZXJyb3ItJHtuZXh0SWQrK31gO1xuICAgIGNvbnN0IGZvcm1GaWVsZCA9IHRoaXMuY2xvc2VzdD8uKCdzYmItZm9ybS1maWVsZCcpID8/IHRoaXMuY2xvc2VzdD8uKCdbZGF0YS1mb3JtLWZpZWxkXScpO1xuICAgIGlmIChmb3JtRmllbGQpIHtcbiAgICAgIHRoaXMubmVnYXRpdmUgPSBmb3JtRmllbGQuaGFzQXR0cmlidXRlKCduZWdhdGl2ZScpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJmb3JtLWVycm9yX19pY29uXCI+XG4gICAgICAgIDxzbG90IG5hbWU9XCJpY29uXCI+XG4gICAgICAgICAgPHN2Z1xuICAgICAgICAgICAgY2xhc3M9XCJmb3JtLWVycm9yX19pY29uLXN2Z1wiXG4gICAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgICAgICAgICAgd2lkdGg9XCIxNFwiXG4gICAgICAgICAgICBoZWlnaHQ9XCIxNFwiXG4gICAgICAgICAgICB2aWV3Qm94PVwiMCAwIDE0IDE0XCJcbiAgICAgICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxsaW5lIHgxPVwiN1wiIHkxPVwiM1wiIHgyPVwiN1wiIHkyPVwiOC41XCIgLz5cbiAgICAgICAgICAgIDxsaW5lIHgxPVwiN1wiIHkxPVwiMTBcIiB4Mj1cIjdcIiB5Mj1cIjExXCIgLz5cbiAgICAgICAgICAgIDxjaXJjbGUgY3g9XCI3XCIgY3k9XCI3XCIgcj1cIjYuNVwiIC8+XG4gICAgICAgICAgPC9zdmc+XG4gICAgICAgIDwvc2xvdD5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZm9ybS1lcnJvci1jb250ZW50XCI+XG4gICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgIDwvc3Bhbj5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItZm9ybS1lcnJvcic6IFNiYkZvcm1FcnJvckVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQVFBLElBQUksU0FBUztBQVNOLElBQU0sc0JBQU4sY0FBa0MsaUJBQWlCLFVBQVUsRUFBRTtBQUFBLEVBR3BELG9CQUEwQjs7QUFDeEMsVUFBTSxrQkFBa0I7QUFDbkIsU0FBQSxPQUFBLEtBQUEsS0FBTyxrQkFBa0IsUUFBUTtBQUN0QyxVQUFNLGNBQVksVUFBSyxZQUFMLDhCQUFlLHdCQUFxQixVQUFLLFlBQUwsOEJBQWU7QUFDckUsUUFBSSxXQUFXO0FBQ1IsV0FBQSxXQUFXLFVBQVUsYUFBYSxVQUFVO0FBQUEsSUFDbkQ7QUFBQSxFQUNGO0FBQUEsRUFFbUIsU0FBeUI7QUFDbkMsV0FBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLEVBc0JUO0FBQ0Y7QUFwQ2Esb0JBQ1ksU0FBeUI7QUFEckMsc0JBQU4sZ0JBQUE7QUFBQSxFQUROLGNBQWMsZ0JBQWdCO0FBQUEsR0FDbEIsbUJBQUE7In0=

package/development/form-field/form-field/form-field.d.ts

@@ -0,0 +1,101 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+declare const SbbFormFieldElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
+/**
+ * It wraps an input element adding label, errors, icon, etc.
+ *
+ * @slot - Use this slot to render an input/select or a supported non-native element.
+ * @slot label - Use this slot to render a label.
+ * @slot prefix - Use this slot to render an icon on the left side of the input.
+ * @slot suffix - Use this slot to render an icon on the right side of the input.
+ * @slot error - Use this slot to render an error.
+ */
+export declare class SbbFormFieldElement extends SbbFormFieldElement_base {
+    static styles: CSSResultGroup;
+    private readonly _supportedNativeInputElements;
+    private readonly _supportedInputElements;
+    private readonly _excludedFocusElements;
+    private readonly _floatingLabelSupportedInputElements;
+    private readonly _floatingLabelSupportedInputTypes;
+    /**
+     * Whether to reserve space for an error message.
+     * `none` does not reserve any space.
+     * `reserve` does reserve one row for an error message.
+     */
+    errorSpace?: 'none' | 'reserve';
+    /** Indicates whether the input is optional. */
+    optional?: boolean;
+    /** Size variant, either l or m. */
+    size?: 'l' | 'm';
+    /** Whether to display the form field without a border. */
+    borderless: boolean;
+    /** Defines the width of the component:
+     * - `default`: the component has defined width and min-width;
+     * - `collapse`: the component adapts itself to its inner input content. */
+    width: 'default' | 'collapse';
+    /** Whether to visually hide the label. If hidden, screen readers will still read it. */
+    hiddenLabel: boolean;
+    /** Whether the label should float. If activated, the placeholder of the input is hidden. */
+    floatingLabel: boolean;
+    /** It is used internally to get the `error` slot. */
+    private _errorElements;
+    /** Original aria-describedby value of the slotted input element. */
+    private _originalInputAriaDescribedby?;
+    /** Reference to the slotted input element. */
+    private _input?;
+    /** Reference to the slotted label elements. */
+    private _label?;
+    /** Returns the input element. */
+    get inputElement(): HTMLInputElement | HTMLSelectElement | HTMLElement | undefined;
+    private _abort;
+    private _language;
+    /**
+     * Listens to the changes on `readonly` and `disabled` attributes of `<input>`.
+     */
+    private _formFieldAttributeObserver;
+    private _inputAbortController;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _onPopupOpen;
+    private _onPopupClose;
+    private _handleWrapperClick;
+    private _isButtonOrPopup;
+    private _onSlotLabelChange;
+    /**
+     * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
+     */
+    private _onSlotInputChange;
+    private _syncLabelInputReferences;
+    private _registerInputListener;
+    private _getInputForm;
+    private _checkAndUpdateInputEmpty;
+    private _isInputEmpty;
+    private _isInputValueEmpty;
+    private _assignSlots;
+    private _readInputState;
+    /**
+     * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
+     */
+    private _onSlotErrorChange;
+    private _applyAriaDescribedby;
+    /** Manually reset the form field. Currently, this only resets the floating label. */
+    reset(): void;
+    /** Manually clears the input value. It only works for inputs, selects are not supported. */
+    clear(): void;
+    /**
+     * Returns the input element.
+     * @deprecated Use the 'inputElement' property instead
+     */
+    getInputElement(): HTMLInputElement | HTMLSelectElement | HTMLElement | undefined;
+    private _syncNegative;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-form-field': SbbFormFieldElement;
+    }
+}
+export {};
+//# sourceMappingURL=form-field.d.ts.map

package/development/form-field/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/elements/form-field/form-field/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAehD,OAAO,eAAe,CAAC;;AASvB;;;;;;;;GAQG;AACH,qBACa,mBAAoB,SAAQ,wBAA4B;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAAmC;IAEjF,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAItC;IAEF,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAA6B;IAEpE,OAAO,CAAC,QAAQ,CAAC,oCAAoC,CAKnD;IAEF,OAAO,CAAC,QAAQ,CAAC,iCAAiC,CAQhD;IAEF;;;;OAIG;IAEI,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAU;IAEhD,+CAA+C;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvD,mCAAmC;IACC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAO;IAE3D,0DAA0D;IACP,UAAU,UAAS;IAEtE;;+EAE2E;IACvC,KAAK,EAAE,SAAS,GAAG,UAAU,CAAa;IAE9E,wFAAwF;IACV,WAAW,UAAS;IAElG,4FAA4F;IACZ,aAAa,UACrF;IAER,qDAAqD;IAC5C,OAAO,CAAC,cAAc,CAAiB;IAEhD,oEAAoE;IACpE,OAAO,CAAC,6BAA6B,CAAC,CAAgB;IAEtD,8CAA8C;IACrC,OAAO,CAAC,MAAM,CAAC,CAAqD;IAE7E,+CAA+C;IACtC,OAAO,CAAC,MAAM,CAAC,CAAmB;IAE3C,iCAAiC;IACjC,IAAW,YAAY,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAExF;IAED,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAMjC;IAEF,OAAO,CAAC,qBAAqB,CAAyB;;IAOtC,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5D,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA4B1B,OAAO,CAAC,yBAAyB;IA4BjC,OAAO,CAAC,sBAAsB;IAuD9B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,qBAAqB;IAiB7B,qFAAqF;IAC9E,KAAK,IAAI,IAAI;IAIpB,4FAA4F;IACrF,KAAK,IAAI,IAAI;IAQpB;;;OAGG;IACI,eAAe,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,SAAS;IAIxF,OAAO,CAAC,aAAa;cAMF,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/development/form-field/form-field-clear/form-field-clear.d.ts

@@ -0,0 +1,24 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+
+declare const SbbFormFieldClearElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof SbbButtonBaseElement;
+/**
+ * Combined with `sbb-form-field`, it displays a button which clears the input value.
+ */
+export declare class SbbFormFieldClearElement extends SbbFormFieldClearElement_base {
+    static styles: CSSResultGroup;
+    private _formField?;
+    private _abort;
+    private _language;
+    connectedCallback(): void;
+    private _handleClick;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-form-field-clear': SbbFormFieldClearElement;
+    }
+}
+export {};
+//# sourceMappingURL=form-field-clear.d.ts.map

package/development/form-field/form-field-clear/form-field-clear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-clear.d.ts","sourceRoot":"","sources":["../../../../../src/elements/form-field/form-field-clear/form-field-clear.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAUnE,OAAO,eAAe,CAAC;;AAEvB;;GAEG;AACH,qBAIa,wBAAyB,SAAQ,6BAAsC;IAClF,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAAsB;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;YAa3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAKzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}

package/development/form-field/form-field-clear.d.ts

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

package/development/form-field/form-field-clear.d.ts.map

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