@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/form-error.js

@@ -0,0 +1,48 @@
+import { css as l, LitElement as a, html as c } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { SbbNegativeMixin as m } from "./core/mixins.js";
+const h = l`*,: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: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;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 v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, x = (t, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? g(r, o) : r, i = t.length - 1, n; i >= 0; i--)
+    (n = t[i]) && (e = (s ? n(r, o, e) : n(e)) || e);
+  return s && e && v(r, o, e), e;
+};
+let d = 0, b = class extends m(a) {
+  connectedCallback() {
+    var r, o;
+    super.connectedCallback(), this.id || (this.id = `sbb-form-error-${d++}`);
+    const t = ((r = this.closest) == null ? void 0 : r.call(this, "sbb-form-field")) ?? ((o = this.closest) == null ? void 0 : o.call(this, "[data-form-field]"));
+    t && (this.negative = t.hasAttribute("negative"));
+  }
+  render() {
+    return c`
+      <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>
+    `;
+  }
+};
+b.styles = h;
+b = x([
+  f("sbb-form-error")
+], b);
+export {
+  b as SbbFormErrorElement
+};

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

package/form-field/form-field-clear.js

@@ -0,0 +1,46 @@
+import { css as l, html as c } from "lit";
+import { customElement as d } from "lit/decorators.js";
+import { SbbButtonBaseElement as u } from "../core/base-elements.js";
+import { SbbConnectedAbortController as v, SbbLanguageController as h } from "../core/controllers.js";
+import { hostAttributes as f } from "../core/decorators.js";
+import { hostContext as i } from "../core/dom.js";
+import { i18nClearInput as m } from "../core/i18n.js";
+import { SbbNegativeMixin as p } from "../core/mixins.js";
+import "../icon.js";
+const g = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-charcoal);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-hover-border: var(--sbb-color-milk);--sbb-button-color-hover-text: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-active-border: var(--sbb-color-cloud);--sbb-button-color-active-text: var(--sbb-color-charcoal);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-style: solid;--sbb-button-border-disabled-style: dashed;--sbb-button-border-width: 0rem;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing);--sbb-button-inset: 0}@media (forced-colors: active){:host{--sbb-button-color-default-text: ButtonText !important;--sbb-button-color-default-border: CanvasText !important;--sbb-button-color-active-text: ButtonText !important;--sbb-button-color-active-border: Highlight !important;--sbb-button-color-hover-text: ButtonText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-default-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:var(--sbb-button-display)}:host .sbb-form-field-clear:before{position:absolute;content:"";inset:var(--sbb-button-inset);border:var(--sbb-button-border-width) var(--sbb-button-border-style) var(--sbb-button-color-default-border);border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color,border-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-default-border: var(--sbb-color-black-alpha-0);--sbb-button-color-default-text: var(--sbb-color-milk);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-hover-border: var(--sbb-color-charcoal);--sbb-button-color-hover-text: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-active-border: var(--sbb-color-iron);--sbb-button-color-active-text: var(--sbb-color-milk);--sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],[data-disabled])){--sbb-button-border-width: var(--sbb-border-width-1x)}@media (forced-colors: active){:host(:is([disabled],[data-disabled])){--sbb-button-color-disabled-text: GrayText !important}}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],[data-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border-color:var(--sbb-button-color-disabled-border);border-style:var(--sbb-button-border-disabled-style)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (forced-colors: active){:host(:not([disabled],[data-disabled],:active,[data-active]):hover){--sbb-button-color-hover-border: Highlight !important}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{inset:calc(var(--sbb-button-border-width) * -1);background-color:var(--sbb-button-color-hover-background);border-color:var(--sbb-button-color-hover-border)}}@media (any-hover: hover){:host(:not([disabled],[data-disabled],:active,[data-active]):hover) .sbb-form-field-clear{color:var(--sbb-button-color-hover-text)}}:host(:not([disabled],[data-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{color:var(--sbb-button-color-active-text);background-color:var(--sbb-button-color-active-background);border-color:var(--sbb-button-color-active-border)}`;
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, y = (o, t, b, e) => {
+  for (var r = e > 1 ? void 0 : e ? x(t, b) : t, a = o.length - 1, s; a >= 0; a--)
+    (s = o[a]) && (r = (e ? s(t, b, r) : s(r)) || r);
+  return e && r && k(t, b, r), r;
+};
+let n = class extends p(u) {
+  constructor() {
+    super(...arguments), this._abort = new v(this), this._language = new h(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const o = this._abort.signal;
+    this.addEventListener("click", () => this._handleClick(), { signal: o }), this._formField = i("sbb-form-field", this) ?? i("[data-form-field]", this), this._formField && (this.negative = this._formField.hasAttribute("negative"));
+  }
+  async _handleClick() {
+    var t, b;
+    const o = (t = this._formField) == null ? void 0 : t.inputElement;
+    !o || o.localName !== "input" || ((b = this._formField) == null || b.clear(), o.focus(), o.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), o.dispatchEvent(new Event("change", { bubbles: !0 })));
+  }
+  willUpdate(o) {
+    super.willUpdate(o), this.setAttribute("aria-label", m[this._language.current]);
+  }
+  renderTemplate() {
+    return c` <sbb-icon name="cross-small"></sbb-icon> `;
+  }
+};
+n.styles = g;
+n = y([
+  d("sbb-form-field-clear"),
+  f({
+    slot: "suffix"
+  })
+], n);
+export {
+  n as SbbFormFieldClearElement
+};

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

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

package/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.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/form-field/form-field.js

@@ -0,0 +1,268 @@
+import { css as u, LitElement as m, html as d, nothing as f } from "lit";
+import { property as a, state as c, customElement as v } from "lit/decorators.js";
+import { sbbInputModalityDetector as _ } from "../core/a11y.js";
+import { SbbConnectedAbortController as g, SbbLanguageController as x, SbbSlotStateController as y } from "../core/controllers.js";
+import { isFirefox as w, setOrRemoveAttribute as k } from "../core/dom.js";
+import { i18nOptional as A } from "../core/i18n.js";
+import { SbbNegativeMixin as E } from "../core/mixins.js";
+import { AgnosticMutationObserver as I } from "../core/observers.js";
+import "../icon.js";
+const z = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-border-style: solid;--sbb-form-field-border-radius: var(--sbb-border-radius-4x);--sbb-form-field-border-width: var(--sbb-border-width-1x);--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-label-size: calc( var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-input-size: calc( var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-input-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:inline-block}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@media (forced-colors: active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height: calc( var(--sbb-typo-line-height-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:is([data-readonly],[data-disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host([data-disabled]){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host([data-disabled]){--sbb-form-field-label-color: GrayText !important;--sbb-form-field-prefix-color: GrayText !important;--sbb-form-field-text-color: GrayText !important;--sbb-form-field-border-color: GrayText !important}}:host([data-disabled][negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-has-error])){--sbb-form-field-error-padding-block-start: 0}:host([floating-label]){--sbb-select-placeholder-color: transparent}@media (forced-colors: active){:host([floating-label]){--sbb-select-placeholder-color: Canvas}}:host(:is(:not([data-slot-names~=label],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-input-type=textarea]){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);position:relative}.sbb-form-field__wrapper:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius)}:host([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open])[borderless]) .sbb-form-field__wrapper:after{content:"";position:absolute;border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);inset-block-end:0}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:is([data-input-empty],[data-disabled],[data-readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height:calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors: active){::slotted(*[slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;height:calc(var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text));margin-block-end:calc(-1 * var(--sbb-form-field-label-to-input-overlapping))}:host(:not([data-slot-names~=label],[label])) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{--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);display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-input-type=sbb-select]) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform,font-size;transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-font-size-text-m);transform:translateY(.53125rem)}@media (min-width: 52.5rem){:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{transform:translateY(.65625rem)}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-font-size-text-m)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-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-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-form-field__input ::slotted(textarea){--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)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-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)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
+var C = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
+  for (var s = l > 1 ? void 0 : l ? L(t, r) : t, b = e.length - 1, n; b >= 0; b--)
+    (n = e[b]) && (s = (l ? n(t, r, s) : n(s)) || s);
+  return l && s && C(t, r, s), s;
+};
+let p = 0, S = 0;
+const h = ["sbb-autocomplete", "sbb-select"];
+let o = class extends E(m) {
+  constructor() {
+    super(), this._supportedNativeInputElements = ["input", "select", "textarea"], this._supportedInputElements = [
+      ...this._supportedNativeInputElements,
+      "sbb-select",
+      "sbb-slider"
+    ], this._excludedFocusElements = ["button", "sbb-popover"], this._floatingLabelSupportedInputElements = [
+      "input",
+      "select",
+      "sbb-select",
+      "textarea"
+    ], this._floatingLabelSupportedInputTypes = [
+      "email",
+      "number",
+      "password",
+      "search",
+      "tel",
+      "text",
+      "url"
+    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new g(this), this._language = new x(this), this._formFieldAttributeObserver = new I(
+      (e) => {
+        e.some((t) => t.type === "attributes") && this._readInputState();
+      }
+    ), this._inputAbortController = new AbortController(), new y(this);
+  }
+  /** Returns the input element. */
+  get inputElement() {
+    return this._input;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this._abort.signal;
+    this.addEventListener("willOpen", (t) => this._onPopupOpen(t), { signal: e }), this.addEventListener("didClose", (t) => this._onPopupClose(t), { signal: e }), this._registerInputListener(), this._syncNegative();
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("negative") && this._syncNegative();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._formFieldAttributeObserver.disconnect(), this._inputAbortController.abort();
+  }
+  _onPopupOpen({ target: e }) {
+    h.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
+  }
+  _onPopupClose({ target: e }) {
+    h.includes(e.localName) && this.removeAttribute("data-has-popup-open");
+  }
+  _handleWrapperClick(e) {
+    var t, r;
+    this._isButtonOrPopup(e) || (((t = this._input) == null ? void 0 : t.localName) === "sbb-select" ? (this._input.click(), this._input.focus()) : e.target.localName !== "label" && ((r = this._input) == null || r.focus()));
+  }
+  _isButtonOrPopup(e) {
+    return e.composedPath().some(
+      (t) => t instanceof window.HTMLElement && t.getAttribute("role") === "button" || this._excludedFocusElements.includes(t.localName)
+    );
+  }
+  _onSlotLabelChange() {
+    const e = Array.from(this.querySelectorAll("label"));
+    this._label = e[0], this._syncLabelInputReferences();
+  }
+  /**
+   * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
+   */
+  _onSlotInputChange(e) {
+    this._input = e.target.assignedElements().find((t) => this._supportedInputElements.includes(t.localName)), this._assignSlots(), this._input && (this._originalInputAriaDescribedby = this._input.getAttribute("aria-describedby"), this._applyAriaDescribedby(), this._readInputState(), this._registerInputListener(), this._input.localName === "textarea" && this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), this._formFieldAttributeObserver.disconnect(), this._formFieldAttributeObserver.observe(this._input, {
+      attributes: !0,
+      attributeFilter: ["readonly", "disabled", "class", "data-sbb-invalid"]
+    }), this.setAttribute("data-input-type", this._input.localName), this._syncLabelInputReferences());
+  }
+  _syncLabelInputReferences() {
+    var e;
+    if (!(!this._input || !this._label))
+      if (this._supportedNativeInputElements.includes(this._input.localName))
+        this._input.id || (this._input.id = `sbb-form-field-input-${p++}`), this._label.htmlFor = this._input.id;
+      else {
+        this._label.id || (this._label.id = `sbb-form-field-label-${p++}`);
+        const t = ((e = this._input.getAttribute("aria-labelledby")) == null ? void 0 : e.split(" ").filter((r) => !!r && r !== this._label.id)) ?? [];
+        this._input.setAttribute("aria-labelledby", [...t, this._label.id].join(" "));
+      }
+  }
+  _registerInputListener() {
+    var t;
+    if (!this._input)
+      return;
+    this._inputAbortController.abort(), this._inputAbortController = new AbortController(), this._checkAndUpdateInputEmpty(), (t = this._getInputForm()) == null || t.addEventListener("reset", () => setTimeout(() => this.reset()), {
+      signal: this._inputAbortController.signal
+    }), this._input.addEventListener("input", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
+    }), this._input.addEventListener("blur", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
+    });
+    let e = this._input;
+    this._input.localName === "sbb-select" && (this._input.addEventListener("stateChange", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
+    }), e = this._input.inputElement), e.addEventListener(
+      "focusin",
+      () => {
+        this.toggleAttribute("data-input-focused", !0), this.setAttribute(
+          "data-focus-origin",
+          _.mostRecentModality ?? ""
+        );
+      },
+      {
+        signal: this._inputAbortController.signal
+      }
+    ), e.addEventListener(
+      "focusout",
+      () => ["data-focus-origin", "data-input-focused"].forEach((r) => this.removeAttribute(r)),
+      {
+        signal: this._inputAbortController.signal
+      }
+    );
+  }
+  _getInputForm() {
+    var e;
+    return this._input instanceof HTMLInputElement || this._input instanceof HTMLSelectElement ? this._input.form : (e = this._input) == null ? void 0 : e.closest("form");
+  }
+  _checkAndUpdateInputEmpty() {
+    var e;
+    this.toggleAttribute(
+      "data-input-empty",
+      this._floatingLabelSupportedInputElements.includes((e = this._input) == null ? void 0 : e.localName) && this._isInputEmpty()
+    );
+  }
+  _isInputEmpty() {
+    var e, t, r, l, s;
+    return this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? ((r = (t = (e = this._input.selectedOptions) == null ? void 0 : e.item(0)) == null ? void 0 : t.label) == null ? void 0 : r.trim()) === "" : ((l = this._input) == null ? void 0 : l.localName) === "sbb-select" ? ((s = this._input.getDisplayValue()) == null ? void 0 : s.trim()) === "" : this._isInputValueEmpty();
+  }
+  _isInputValueEmpty() {
+    const e = this._input.value;
+    return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
+  }
+  _assignSlots() {
+    this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach(
+      (e) => e.setAttribute("slot", "error")
+    );
+  }
+  _readInputState() {
+    this._input && (this.toggleAttribute("data-readonly", this._input.hasAttribute("readonly")), this.toggleAttribute("data-disabled", this._input.hasAttribute("disabled")), this.toggleAttribute(
+      "data-invalid",
+      this._input.hasAttribute("data-sbb-invalid") || this._input.classList.contains("sbb-invalid") || this._input.classList.contains("ng-touched") && this._input.classList.contains("ng-invalid")
+    ));
+  }
+  /**
+   * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
+   */
+  _onSlotErrorChange(e) {
+    this._errorElements = e.target.assignedElements();
+    for (const t of this._errorElements)
+      t.id || (t.id = `sbb-form-field-error-${++S}`), t.role || (t.role = "status", w && t.setAttribute("role", "status"));
+    this._applyAriaDescribedby(), this.toggleAttribute("data-has-error", !!this._errorElements.length), this._syncNegative();
+  }
+  _applyAriaDescribedby() {
+    const e = [];
+    this._originalInputAriaDescribedby && e.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((r) => e.push(r.id));
+    const t = e.join(" ");
+    this._input && k(this._input, "aria-describedby", t);
+  }
+  /** Manually reset the form field. Currently, this only resets the floating label. */
+  reset() {
+    this._checkAndUpdateInputEmpty();
+  }
+  /** Manually clears the input value. It only works for inputs, selects are not supported. */
+  clear() {
+    var e;
+    ((e = this._input) == null ? void 0 : e.localName) === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
+  }
+  /**
+   * Returns the input element.
+   * @deprecated Use the 'inputElement' property instead
+   */
+  getInputElement() {
+    return this._input;
+  }
+  _syncNegative() {
+    var e;
+    (e = this.querySelectorAll) == null || e.call(
+      this,
+      "sbb-form-error,sbb-mini-button,sbb-popover-trigger,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete"
+    ).forEach((t) => t.toggleAttribute("negative", this.negative));
+  }
+  render() {
+    var e;
+    return d`
+      <div class="sbb-form-field__space-wrapper">
+        ${/* Queried by id from the autocomplete/select to be used as the anchor element */
+    ""}
+        <div @click=${this._handleWrapperClick} class="sbb-form-field__wrapper" id="overlay-anchor">
+          <slot name="prefix" @slotchange=${this._syncNegative}></slot>
+          <div class="sbb-form-field__input-container">
+            <span class="sbb-form-field__label-spacer" aria-hidden="true"></span>
+            <span class="sbb-form-field__label">
+              <span class="sbb-form-field__label-ellipsis">
+                <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
+                ${this.optional ? d` <span aria-hidden="true"> ${A[this._language.current]} </span>` : f}
+              </span>
+            </span>
+            <div class="sbb-form-field__input">
+              <slot @slotchange=${this._onSlotInputChange}></slot>
+            </div>
+            ${["select", "sbb-select"].includes((e = this._input) == null ? void 0 : e.localName) ? d`<sbb-icon
+                  name="chevron-small-down-small"
+                  class="sbb-form-field__select-input-icon"
+                ></sbb-icon>` : f}
+          </div>
+          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
+        </div>
+
+        <div class="sbb-form-field__error">
+          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = z;
+i([
+  a({ attribute: "error-space", reflect: !0 })
+], o.prototype, "errorSpace", 2);
+i([
+  a({ type: Boolean })
+], o.prototype, "optional", 2);
+i([
+  a({ reflect: !0 })
+], o.prototype, "size", 2);
+i([
+  a({ reflect: !0, type: Boolean })
+], o.prototype, "borderless", 2);
+i([
+  a({ reflect: !0 })
+], o.prototype, "width", 2);
+i([
+  a({ attribute: "hidden-label", reflect: !0, type: Boolean })
+], o.prototype, "hiddenLabel", 2);
+i([
+  a({ attribute: "floating-label", reflect: !0, type: Boolean })
+], o.prototype, "floatingLabel", 2);
+i([
+  c()
+], o.prototype, "_errorElements", 2);
+i([
+  c()
+], o.prototype, "_input", 2);
+i([
+  c()
+], o.prototype, "_label", 2);
+o = i([
+  v("sbb-form-field")
+], o);
+export {
+  o as SbbFormFieldElement
+};

package/form-field.d.ts

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

package/form-field.d.ts.map

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

package/form-field.js

@@ -0,0 +1,2 @@
+export * from "./form-field/form-field.js";
+export * from "./form-field/form-field-clear.js";

package/header/common/header-action-common.d.ts

@@ -0,0 +1,11 @@
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbHorizontalFrom } from '../../core/interfaces.js';
+import { AbstractConstructor } from '../../core/mixins.js';
+import { SbbIconNameMixinType } from '../../icon.js';
+
+export declare class SbbHeaderActionCommonElementMixinType implements Partial<SbbIconNameMixinType> {
+    expandFrom: SbbHorizontalFrom;
+    iconName?: string;
+}
+export declare const SbbHeaderActionCommonElementMixin: <T extends AbstractConstructor<SbbActionBaseElement>>(superClass: T) => AbstractConstructor<SbbHeaderActionCommonElementMixinType> & T;
+//# sourceMappingURL=header-action-common.d.ts.map

package/header/common/header-action-common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-action-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/header/common/header-action-common.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI5E,MAAM,CAAC,OAAO,OAAO,qCACnB,YAAW,OAAO,CAAC,oBAAoB,CAAC;IAEjC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,eAAO,MAAM,iCAAiC,oEAGhC,CAAC,KACZ,oBAAoB,qCAAqC,CAAC,GAAG,CA4B/D,CAAC"}

package/header/common.d.ts

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

package/header/common.d.ts.map

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

package/header/common.js

@@ -0,0 +1,35 @@
+import { property as n } from "lit/decorators.js";
+import { html as s } from "lit/static-html.js";
+import { SbbIconNameMixin as d } from "../icon.js";
+import { css as b } from "lit";
+const h = b`*,:before,:after{box-sizing:border-box}:host{--sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x);--sbb-header-action-color: var(--sbb-color-black);--sbb-header-action-background-color: transparent;--sbb-header-action-min-height: var(--sbb-size-element-s);--sbb-header-action-min-width: var(--sbb-header-action-min-height);--sbb-header-action-transition-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-header-action-transition-easing: var(--sbb-animation-easing);--sbb-header-action-border-color: transparent;--sbb-header-action-background-inset: 0;--sbb-header-action-translate-y: 0;--sbb-header-action-gap: var(--sbb-spacing-fixed-2x);--sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline));display:inline-block;outline:none!important}@media (forced-colors: active){:host{--sbb-header-action-border-color: CanvasText;--sbb-header-action-color: LinkText}}@media (any-hover: hover){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-background-color: var(--sbb-color-milk);--sbb-header-action-translate-y: -.0625rem;--sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover: hover) and (forced-colors: active){:host(:hover:not(:active,[data-active],[aria-expanded=true])){--sbb-header-action-border-color: Highlight}}:host(:is(:active,[data-active])){--sbb-header-action-background-color: var(--sbb-color-cloud)}@media (forced-colors: active){:host(:is(:active,[data-active])){--sbb-header-action-border-color: Highlight}}@media (forced-colors: active){:host([role=button]){--sbb-header-action-color: ButtonText}}:is(.sbb-header-button,.sbb-header-link){font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;display:flex;position:relative;align-items:center;justify-content:center;color:var(--sbb-header-action-color);text-decoration:none;min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none}:is(.sbb-header-button,.sbb-header-link):before{position:absolute;content:"";inset:var(--sbb-header-action-background-inset);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);transition-property:inset,background-color;border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color)}@media (forced-colors: active){:is(.sbb-header-button,.sbb-header-link):before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):before,:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) :is(.sbb-header-button,.sbb-header-link):focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-header-action__wrapper{display:flex;align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%}.sbb-header-action__icon{--sbb-icon-svg-stroke-color: currentcolor;--sbb-icon-svg-stroke-width: 1px;min-width:var(--sbb-size-icon-ui-small);min-height:var(--sbb-size-icon-ui-small);line-height:0}.sbb-header-action__text{--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);font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}@media (max-width: -.0625rem){:host([expand-from=zero]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=zero]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 22.4375rem){:host([expand-from=micro]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=micro]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 37.4375rem){:host([expand-from=small]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=small]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 52.4375rem){:host([expand-from=medium]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=medium]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 63.9375rem){:host([expand-from=large]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=large]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 79.9375rem){:host([expand-from=wide]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=wide]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: 89.9375rem){:host([expand-from=ultra]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}@media (max-width: calc(99rem-0.0625rem)){:host([expand-from=ultra--max-content]){--sbb-header-first-item-margin-inline-start: -.75rem;--sbb-header-action-padding-inline: 0}:host([expand-from=ultra--max-content]) .sbb-header-action__text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:flex}}`;
+var c = Object.defineProperty, l = (t, e, i, p) => {
+  for (var a = void 0, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (a = o(e, i, a) || a);
+  return a && c(e, i, a), a;
+};
+const u = (t) => {
+  const i = class i extends d(t) {
+    constructor() {
+      super(...arguments), this.expandFrom = "medium";
+    }
+    renderTemplate() {
+      return s`
+        <span class="sbb-header-action__wrapper">
+          <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-header-action__text">
+            <slot></slot>
+          </span>
+        </span>
+      `;
+    }
+  };
+  i.styles = h;
+  let e = i;
+  return l([
+    n({ attribute: "expand-from", reflect: !0 })
+  ], e.prototype, "expandFrom"), e;
+};
+export {
+  u as SbbHeaderActionCommonElementMixin
+};