@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/form-field.pure.js

@@ -1,6 +1,907 @@
-import { t as SbbErrorElement } from "./error.component-Bp7ztvQB.js";
-import { n as SbbFormFieldElement, t as SbbFormFieldControlEvent } from "./form-field.component-YM-Z5aZf.js";
-import { SbbFormFieldClearElement } from "./form-field/form-field-clear/form-field-clear.component.js";
-import { SbbFormFieldTextCounterElement } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
-import { t as SbbHintElement } from "./hint.component-CdM71SNj.js";
-export { SbbErrorElement, SbbFormFieldClearElement, SbbFormFieldControlEvent, SbbFormFieldElement, SbbFormFieldTextCounterElement, SbbHintElement };
+import { html, isServer, unsafeCSS } from "lit";
+import { SbbButtonBaseElement, SbbElement, SbbLanguageController, SbbNegativeMixin, appendAriaElements, forceType, i18nClearInput, i18nRemainingCharacters, removeAriaElements, sbbInputModalityDetector, sbbLiveAnnouncer } from "./core.js";
+import { __esDecorate, __runInitializers } from "tslib";
+import { property, state } from "lit/decorators.js";
+import { SbbIconElement } from "./icon.pure.js";
+import { miniButtonStyle } from "./button.pure.js";
+
+//#region src/elements/form-field/error/error.scss?inline
+var error_default = ":host {\n  --_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);\n  --sbb-icon-svg-width: var(--sbb-error-icon-size);\n  --sbb-icon-svg-height: var(--sbb-error-icon-size);\n  display: flex;\n  align-items: flex-start;\n  color: var(--sbb-error-color);\n  min-height: var(--_sbb-error-height);\n  font-size: var(--sbb-error-font-size);\n  line-height: var(--sbb-typo-line-height-text);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n@media (forced-colors: active) {\n  :host {\n    --sbb-error-color: LinkText !important;\n  }\n}\n\n:host([negative]) {\n  --sbb-error-color: var(--sbb-color-red85);\n}\n\n.error__icon {\n  display: flex;\n  align-items: center;\n  height: var(--_sbb-error-height);\n  margin-inline-end: var(--sbb-spacing-fixed-1x);\n}\n\n.error-content {\n  line-height: var(--sbb-typo-line-height-text);\n  vertical-align: text-top;\n}\n\n.error__icon-svg {\n  stroke: currentcolor;\n  height: var(--_sbb-error-height);\n}\n";
+
+//#endregion
+//#region src/elements/form-field/error/error.component.ts
+/**
+* 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.
+*/
+var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
+	static {
+		this.elementName = "sbb-error";
+	}
+	static {
+		this.styles = [unsafeCSS(error_default)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const formField = this.closest?.("sbb-form-field");
+		if (formField) this.negative = formField.hasAttribute("negative");
+	}
+	render() {
+		return html`
+      <span class="error__icon">
+        <slot name="icon">
+          <svg
+            class="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="error-content">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+
+//#endregion
+//#region src/elements/form-field/form-field/form-field.scss?inline
+var form_field_default = "@charset \"UTF-8\";\n:host {\n  --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n  --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n  --sbb-form-field-select-inline-padding-end: calc(\n    var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n  );\n  --sbb-form-field-label-size: calc(\n    var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-text-line-height: calc(\n    var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-margin-block-start: calc(\n    (\n        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n            --sbb-form-field-text-line-height\n          ) +\n          var(--_sbb-form-field-label-to-input-overlapping)\n      ) /\n      2\n  );\n  --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n  --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  display: inline-block;\n  color: var(--sbb-form-field-color);\n  font-weight: normal;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n  min-width: 9.375rem;\n  width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n  color: var(--sbb-color-3-negative);\n  --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n  --sbb-form-field-text-color: var(--sbb-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n  :host([negative]) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host([size=s]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-xs);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n  --_sbb-form-field-input-margin-block-end: -0.125rem;\n  --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n  --_sbb-form-field-floating-label-transform: 0.34375rem;\n  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n  :host([size=s]) {\n    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n    --_sbb-form-field-floating-label-transform: 0.3125rem;\n    --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n  }\n}\n\n:host([size=m]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-m);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-l);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n  --_sbb-form-field-input-margin-block-end: 0;\n  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n  --_sbb-form-field-floating-label-transform: 0.53125rem;\n  --_sbb-form-field-spacer-margin-block-end: calc(\n    -1 * var(--_sbb-form-field-label-to-input-overlapping)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host(:is([size=m], [size=l])) {\n    --_sbb-form-field-floating-label-transform: 0.65625rem;\n  }\n}\n\n:host([error-space=reserve]) {\n  --sbb-form-field-hint-min-height: calc(\n    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n  );\n  --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3);\n  --sbb-form-field-border-color: var(--sbb-color-graphite);\n  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n  --sbb-form-field-arrow-color: var(--sbb-color-granite);\n  --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n  --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-label-color: GrayText !important;\n    --sbb-form-field-prefix-color: GrayText !important;\n    --sbb-form-field-text-color: GrayText !important;\n    --sbb-form-field-border-color: GrayText !important;\n  }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-text-color: var(--sbb-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3);\n  --sbb-form-field-prefix-color: var(--sbb-color-3);\n  --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n  --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(focus),[state--focus])) {\n    --sbb-form-field-border-color: Highlight;\n    --sbb-form-field-prefix-color: Highlight;\n  }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n  --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n  --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n  :host([floating-label]) {\n    --sbb-select-placeholder-color: Canvas;\n  }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n  --sbb-form-field-label-size: 0rem;\n  --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n  --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-form-field__wrapper {\n  display: flex;\n  flex: 1;\n  gap: var(--sbb-form-field-gap);\n  padding-inline: var(--sbb-form-field-padding-inline);\n  border-radius: var(--sbb-form-field-border-radius);\n  min-height: var(--sbb-form-field-min-height);\n  max-height: var(--sbb-form-field-max-height);\n  background-color: var(--sbb-form-field-background-color);\n  position: relative;\n}\n.sbb-form-field__wrapper::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0;\n  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n  border-radius: var(--sbb-form-field-border-radius);\n  pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n  :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n    border-color: transparent;\n  }\n  :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n    content: \"\";\n    position: absolute;\n    border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n    inset-inline: var(--sbb-form-field-padding-inline);\n    inset-block-end: 0;\n    z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n  }\n}\n\n::slotted(*[slot=prefix]) {\n  color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n  display: flex;\n  min-width: var(--sbb-icon-svg-width);\n  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n  display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n  display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n  display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n  padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n  ::slotted(*[slot=suffix]) {\n    color: var(--sbb-form-field-prefix-color);\n  }\n}\n.sbb-form-field__select-input-icon {\n  position: absolute;\n  top: 50%;\n  translate: 0 -50%;\n  display: none;\n  position: absolute;\n  inset-inline-end: 0;\n  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n  pointer-events: none;\n  color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n  display: inline-block;\n}\n\n.sbb-form-field__input-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  position: relative;\n  margin-block-start: var(--sbb-form-field-margin-block-start);\n  min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n  display: flex;\n  height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n  margin-block-end: var(--_sbb-form-field-spacer-margin-block-end);\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.sbb-form-field__label {\n  display: flex;\n  max-width: 100%;\n  cursor: var(--sbb-cursor-default);\n  position: absolute;\n  inset-block-start: 0;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-label-text-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n  transform-origin: 0 0;\n  pointer-events: none;\n  backface-visibility: hidden;\n  will-change: transform, font-size;\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n  font-size: var(--sbb-form-field-input-text-size);\n  transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n    z-index: 1;\n  }\n}\n\n.sbb-form-field__label-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n  display: flex;\n  flex: 1;\n  align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n  margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n  display: flex;\n  min-height: var(--sbb-form-field-hint-min-height);\n  flex-direction: column;\n  margin-inline-start: var(--sbb-form-field-padding-inline);\n  margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
+
+//#endregion
+//#region src/elements/form-field/form-field/form-field.component.ts
+let nextId = 0;
+const patchedInputs = /* @__PURE__ */ new WeakMap();
+const nativeInputElements = [
+	"input",
+	"textarea",
+	"select"
+];
+var SbbFormFieldControlEvent = class extends Event {
+	get control() {
+		return this._control;
+	}
+	constructor(control) {
+		super("formfieldcontrol");
+		this._control = control;
+	}
+};
+/**
+* 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.
+* @slot hint - Use this slot to render an `<sbb-hint>` or an `<sbb-form-field-text-counter>` element.
+*
+* @cssprop [--sbb-form-field-outline-offset] - To override the focus outline offset,
+* @cssprop [--sbb-form-field-focus-underline-z-index] - To override the z-index of the focus underline effect,
+*/
+let SbbFormFieldElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbElement);
+	let _errorSpace_decorators;
+	let _errorSpace_initializers = [];
+	let _errorSpace_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _borderless_decorators;
+	let _borderless_initializers = [];
+	let _borderless_extraInitializers = [];
+	let _width_decorators;
+	let _width_initializers = [];
+	let _width_extraInitializers = [];
+	let _hiddenLabel_decorators;
+	let _hiddenLabel_initializers = [];
+	let _hiddenLabel_extraInitializers = [];
+	let _floatingLabel_decorators;
+	let _floatingLabel_initializers = [];
+	let _floatingLabel_extraInitializers = [];
+	let __errorElements_decorators;
+	let __errorElements_initializers = [];
+	let __errorElements_extraInitializers = [];
+	let __hintElements_decorators;
+	let __hintElements_initializers = [];
+	let __hintElements_extraInitializers = [];
+	let __input_decorators;
+	let __input_initializers = [];
+	let __input_extraInitializers = [];
+	let __label_decorators;
+	let __label_initializers = [];
+	let __label_extraInitializers = [];
+	return class SbbFormFieldElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_errorSpace_decorators = [property({
+				attribute: "error-space",
+				reflect: true
+			})];
+			_size_decorators = [property({ reflect: true })];
+			_borderless_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_width_decorators = [property({ reflect: true })];
+			_hiddenLabel_decorators = [forceType(), property({
+				attribute: "hidden-label",
+				reflect: true,
+				type: Boolean
+			})];
+			_floatingLabel_decorators = [forceType(), property({
+				attribute: "floating-label",
+				reflect: true,
+				type: Boolean
+			})];
+			__errorElements_decorators = [state()];
+			__hintElements_decorators = [state()];
+			__input_decorators = [state()];
+			__label_decorators = [state()];
+			__esDecorate(this, null, _errorSpace_decorators, {
+				kind: "accessor",
+				name: "errorSpace",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "errorSpace" in obj,
+					get: (obj) => obj.errorSpace,
+					set: (obj, value) => {
+						obj.errorSpace = value;
+					}
+				},
+				metadata: _metadata
+			}, _errorSpace_initializers, _errorSpace_extraInitializers);
+			__esDecorate(this, null, _size_decorators, {
+				kind: "accessor",
+				name: "size",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "size" in obj,
+					get: (obj) => obj.size,
+					set: (obj, value) => {
+						obj.size = value;
+					}
+				},
+				metadata: _metadata
+			}, _size_initializers, _size_extraInitializers);
+			__esDecorate(this, null, _borderless_decorators, {
+				kind: "accessor",
+				name: "borderless",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "borderless" in obj,
+					get: (obj) => obj.borderless,
+					set: (obj, value) => {
+						obj.borderless = value;
+					}
+				},
+				metadata: _metadata
+			}, _borderless_initializers, _borderless_extraInitializers);
+			__esDecorate(this, null, _width_decorators, {
+				kind: "accessor",
+				name: "width",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "width" in obj,
+					get: (obj) => obj.width,
+					set: (obj, value) => {
+						obj.width = value;
+					}
+				},
+				metadata: _metadata
+			}, _width_initializers, _width_extraInitializers);
+			__esDecorate(this, null, _hiddenLabel_decorators, {
+				kind: "accessor",
+				name: "hiddenLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "hiddenLabel" in obj,
+					get: (obj) => obj.hiddenLabel,
+					set: (obj, value) => {
+						obj.hiddenLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _hiddenLabel_initializers, _hiddenLabel_extraInitializers);
+			__esDecorate(this, null, _floatingLabel_decorators, {
+				kind: "accessor",
+				name: "floatingLabel",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "floatingLabel" in obj,
+					get: (obj) => obj.floatingLabel,
+					set: (obj, value) => {
+						obj.floatingLabel = value;
+					}
+				},
+				metadata: _metadata
+			}, _floatingLabel_initializers, _floatingLabel_extraInitializers);
+			__esDecorate(this, null, __errorElements_decorators, {
+				kind: "accessor",
+				name: "_errorElements",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_errorElements" in obj,
+					get: (obj) => obj._errorElements,
+					set: (obj, value) => {
+						obj._errorElements = value;
+					}
+				},
+				metadata: _metadata
+			}, __errorElements_initializers, __errorElements_extraInitializers);
+			__esDecorate(this, null, __hintElements_decorators, {
+				kind: "accessor",
+				name: "_hintElements",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_hintElements" in obj,
+					get: (obj) => obj._hintElements,
+					set: (obj, value) => {
+						obj._hintElements = value;
+					}
+				},
+				metadata: _metadata
+			}, __hintElements_initializers, __hintElements_extraInitializers);
+			__esDecorate(this, null, __input_decorators, {
+				kind: "accessor",
+				name: "_input",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_input" in obj,
+					get: (obj) => obj._input,
+					set: (obj, value) => {
+						obj._input = value;
+					}
+				},
+				metadata: _metadata
+			}, __input_initializers, __input_extraInitializers);
+			__esDecorate(this, null, __label_decorators, {
+				kind: "accessor",
+				name: "_label",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_label" in obj,
+					get: (obj) => obj._label,
+					set: (obj, value) => {
+						obj._label = value;
+					}
+				},
+				metadata: _metadata
+			}, __label_initializers, __label_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-form-field";
+		}
+		static {
+			this.elementDependencies = [SbbIconElement];
+		}
+		static {
+			this.styles = [unsafeCSS(form_field_default)];
+		}
+		#errorSpace_accessor_storage;
+		/**
+		* Whether to reserve space for an error message, hint or text-counter.
+		* `none` does not reserve any space.
+		* `reserve` does reserve one row for an error message.
+		*/
+		get errorSpace() {
+			return this.#errorSpace_accessor_storage;
+		}
+		set errorSpace(value) {
+			this.#errorSpace_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s (lean theme default), m (standard theme default) or l.
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		#borderless_accessor_storage;
+		/** Whether to display the form field without a border. */
+		get borderless() {
+			return this.#borderless_accessor_storage;
+		}
+		set borderless(value) {
+			this.#borderless_accessor_storage = value;
+		}
+		#width_accessor_storage;
+		/** 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. */
+		get width() {
+			return this.#width_accessor_storage;
+		}
+		set width(value) {
+			this.#width_accessor_storage = value;
+		}
+		#hiddenLabel_accessor_storage;
+		/** Whether to visually hide the label. If hidden, screen readers will still read it. */
+		get hiddenLabel() {
+			return this.#hiddenLabel_accessor_storage;
+		}
+		set hiddenLabel(value) {
+			this.#hiddenLabel_accessor_storage = value;
+		}
+		#floatingLabel_accessor_storage;
+		/** Whether the label should float. If activated, the placeholder of the input is hidden. */
+		get floatingLabel() {
+			return this.#floatingLabel_accessor_storage;
+		}
+		set floatingLabel(value) {
+			this.#floatingLabel_accessor_storage = value;
+		}
+		#_errorElements_accessor_storage;
+		/** It is used internally to get the `error` slot. */
+		get _errorElements() {
+			return this.#_errorElements_accessor_storage;
+		}
+		set _errorElements(value) {
+			this.#_errorElements_accessor_storage = value;
+		}
+		#_hintElements_accessor_storage;
+		/** It is used internally to get the `hint` slot. */
+		get _hintElements() {
+			return this.#_hintElements_accessor_storage;
+		}
+		set _hintElements(value) {
+			this.#_hintElements_accessor_storage = value;
+		}
+		#_input_accessor_storage;
+		/** Reference to the slotted input element. */
+		get _input() {
+			return this.#_input_accessor_storage;
+		}
+		set _input(value) {
+			this.#_input_accessor_storage = value;
+		}
+		#_label_accessor_storage;
+		/** Reference to the slotted label elements. */
+		get _label() {
+			return this.#_label_accessor_storage;
+		}
+		set _label(value) {
+			this.#_label_accessor_storage = value;
+		}
+		/** Returns the input element. */
+		get inputElement() {
+			return this._input;
+		}
+		/** Reference to the slotted label. */
+		get label() {
+			return this._label;
+		}
+		constructor() {
+			super();
+			this._excludedFocusElements = [
+				"button",
+				"sbb-popover",
+				"sbb-option",
+				"sbb-chip"
+			];
+			this._floatingLabelSupportedInputElements = [
+				"input",
+				"select",
+				"textarea",
+				"sbb-select"
+			];
+			this._floatingLabelSupportedInputTypes = [
+				"email",
+				"number",
+				"password",
+				"search",
+				"tel",
+				"text",
+				"url"
+			];
+			this.#errorSpace_accessor_storage = __runInitializers(this, _errorSpace_initializers, "none");
+			this.#size_accessor_storage = (__runInitializers(this, _errorSpace_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this.#borderless_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _borderless_initializers, false));
+			this.#width_accessor_storage = (__runInitializers(this, _borderless_extraInitializers), __runInitializers(this, _width_initializers, "default"));
+			this.#hiddenLabel_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _hiddenLabel_initializers, false));
+			this.#floatingLabel_accessor_storage = (__runInitializers(this, _hiddenLabel_extraInitializers), __runInitializers(this, _floatingLabel_initializers, false));
+			this.#_errorElements_accessor_storage = (__runInitializers(this, _floatingLabel_extraInitializers), __runInitializers(this, __errorElements_initializers, []));
+			this.#_hintElements_accessor_storage = (__runInitializers(this, __errorElements_extraInitializers), __runInitializers(this, __hintElements_initializers, []));
+			this.#_input_accessor_storage = (__runInitializers(this, __hintElements_extraInitializers), __runInitializers(this, __input_initializers, null));
+			this.#_label_accessor_storage = (__runInitializers(this, __input_extraInitializers), __runInitializers(this, __label_initializers, void 0));
+			/**
+			* Listens to the changes on `readonly` and `disabled` attributes of `<input>`.
+			*/
+			this._formFieldAttributeObserver = (__runInitializers(this, __label_extraInitializers), !isServer ? new MutationObserver((mutations) => {
+				if (mutations.some((m) => m.type === "attributes") && this._input) {
+					this._readInputState();
+					this._registerInputFormListener();
+					this._checkAndUpdateInputEmpty();
+					/** @internal */
+					this.dispatchEvent(new Event("ɵinputattributechange"));
+				}
+			}) : null);
+			this._inputFormAbortController = new AbortController();
+			this._control = null;
+			this._previousType = null;
+			this.addEventListener?.("focusin", (event) => {
+				if (event.target === this.inputElement || event.target === this.inputElement?.inputElement) {
+					this.internals.states.add("focus");
+					this.internals.states.add(`focus-origin-${sbbInputModalityDetector.mostRecentModality}`);
+				}
+			}, { passive: true });
+			this.addEventListener?.("focusout", (event) => {
+				if (event.target === this.inputElement || event.target === this.inputElement?.inputElement) {
+					this._checkAndUpdateInputEmpty();
+					this.internals.states.delete("focus");
+					for (const state of this.internals.states) if (state.startsWith("focus-origin-")) this.internals.states.delete(state);
+				}
+			}, { passive: true });
+			this.addEventListener("input", () => this._checkAndUpdateInputEmpty());
+			this.addEventListener("displayvaluechange", () => this._checkAndUpdateInputEmpty());
+			this.addEventListener("invalid", (e) => e.preventDefault(), { capture: true });
+			this.addEventListener("formfieldcontrol", (e) => {
+				this._control = e.control;
+				if (this._connectInputElement() === "unchanged") {
+					this._assignAriaDescribedByElements();
+					this._readInputState();
+					this._checkAndUpdateInputEmpty();
+				}
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._assignSlots();
+			this._connectInputElement();
+			this._syncNegative();
+			this._syncSize();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("negative")) this._syncNegative();
+			if (changedProperties.has("size")) this._syncSize();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._formFieldAttributeObserver?.disconnect();
+			this._inputFormAbortController.abort();
+			if (this._input?.localName === "input" || this._input?.localName === "textarea") this._unpatchInputValue();
+		}
+		_handleWrapperClick(event) {
+			if (this._isElementFocusExcluded(event)) return;
+			if (this._control?.onContainerClick) this._control?.onContainerClick(event);
+			else if (event.target.localName !== "label") {
+				if (this._input?.localName === "sbb-select" && event.target.localName !== "sbb-select") this._input.click();
+				this._input?.focus();
+			}
+		}
+		_isElementFocusExcluded(event) {
+			return event.composedPath().some((el) => el instanceof window.HTMLElement && (el.getAttribute("tabindex") === "0" || el.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(el.localName));
+		}
+		_onSlotLabelChange() {
+			const labels = Array.from(this.querySelectorAll("label"));
+			if (labels.length > 1) console.warn(`Detected more than one label in sbb-form-field#${this.id}. Only one label is supported.`);
+			this._label = labels[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() {
+			this._assignSlots();
+			this._connectInputElement();
+		}
+		_assignSlots() {
+			this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label"));
+			this.querySelectorAll("sbb-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
+		}
+		_connectInputElement() {
+			let newInput;
+			if (this._control?.id) newInput = this.getRootNode().getElementById(this._control.id);
+			else {
+				const inputCandidates = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)"));
+				newInput = (inputCandidates.find((e) => this._isInputElement(e)) || inputCandidates[0]) ?? null;
+			}
+			if (newInput === this._input) return "unchanged";
+			else if (this._input) {
+				this.internals.states.delete(`input-element-${this._input.localName}`);
+				if (this._input.localName === "input" || this._input.localName === "textarea") this._unpatchInputValue();
+			}
+			if (!newInput) {
+				this._input = null;
+				return "no-input";
+			}
+			this._input = newInput;
+			this._registerInputFormListener();
+			this._assignAriaDescribedByElements();
+			this._readInputState();
+			this._checkAndUpdateInputEmpty();
+			if (this._input.localName === "textarea") {
+				this._input.setAttribute("rows", this._input.getAttribute("rows") || "3");
+				this._patchInputValue();
+			} else if (this._input.localName === "input") this._patchInputValue();
+			else if ((this._input.localName === "select" || this._input.localName === "sbb-select") && !this.hasUpdated) this.hydrationComplete.then(() => this.requestUpdate());
+			this._formFieldAttributeObserver?.disconnect();
+			this._formFieldAttributeObserver?.observe(this._input, {
+				attributes: true,
+				attributeFilter: [
+					"readonly",
+					"disabled",
+					"form",
+					"class",
+					"data-expanded",
+					"maxlength"
+				]
+			});
+			this.internals.states.add(`input-element-${this._input.localName}`);
+			this._syncLabelInputReferences();
+			return "changed";
+		}
+		_syncLabelInputReferences() {
+			if (!this._input || !this._label) return;
+			if (nativeInputElements.includes(this._input.localName) || customElements.get(this._input.localName)?.formAssociated) {
+				this._input.id ||= `sbb-form-field-input-${nextId++}`;
+				this._label.htmlFor = this._input.id;
+			} else {
+				this._label.id ||= `sbb-form-field-label-${nextId++}`;
+				const labelledby = this._input.getAttribute("aria-labelledby")?.split(" ").filter((l) => !!l && l !== this._label.id) ?? [];
+				this._input.setAttribute("aria-labelledby", [...labelledby, this._label.id].join(" "));
+			}
+		}
+		_isInputElement(input) {
+			return nativeInputElements.includes(input.localName) || !!customElements.get(input.localName)?.formAssociated;
+		}
+		_readInputState() {
+			this.toggleState("readonly", this._control?.readOnly ?? this._input.hasAttribute("readonly"));
+			this.toggleState("disabled", this._control?.disabled ?? this._input.hasAttribute("disabled"));
+			this.toggleState("has-popup-open", this._input.hasAttribute("data-expanded"));
+			if (this._previousType) this.internals.states.delete(`input-type-${this._previousType}`);
+			this._previousType = this._control?.type ?? this._input.type ?? "text";
+			this.internals.states.add(`input-type-${this._previousType}`);
+		}
+		_registerInputFormListener() {
+			this._inputFormAbortController.abort();
+			const { signal } = this._inputFormAbortController = new AbortController();
+			const form = this._input?.form ?? this._input?.closest("form");
+			const resetHandler = () => setTimeout(() => this.reset());
+			form?.addEventListener("reset", resetHandler, { signal });
+		}
+		_patchInputValue() {
+			const inputElement = this._input;
+			if (!inputElement || patchedInputs.has(inputElement)) return;
+			const originalDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inputElement), "value");
+			if (!originalDescriptor || !originalDescriptor.set || !originalDescriptor.get) return;
+			patchedInputs.set(inputElement, originalDescriptor);
+			const { get: getter, set: setter } = originalDescriptor;
+			const checkAndUpdateInputEmpty = () => {
+				this._checkAndUpdateInputEmpty();
+				/** @internal */
+				this.dispatchEvent(new Event("ɵinput"));
+			};
+			Object.defineProperty(inputElement, "value", {
+				...originalDescriptor,
+				get() {
+					return getter.call(this);
+				},
+				set(newValue) {
+					setter.call(this, newValue);
+					checkAndUpdateInputEmpty();
+				}
+			});
+		}
+		_unpatchInputValue() {
+			const inputElement = this._input;
+			const originalDescriptor = patchedInputs.get(inputElement);
+			if (originalDescriptor) {
+				Object.defineProperty(inputElement, "value", originalDescriptor);
+				patchedInputs.delete(inputElement);
+			}
+		}
+		_checkAndUpdateInputEmpty() {
+			this.toggleState("empty", this._control?.empty ?? (((this._floatingLabelSupportedInputElements.includes(this._input?.localName) || this._input?.constructor?.formFieldAssociated) ?? false) && this._isInputEmpty()));
+		}
+		_isInputEmpty() {
+			const chipGroupElem = this.querySelector("sbb-chip-group");
+			if (chipGroupElem) return this._isInputValueEmpty() && (Array.isArray(chipGroupElem.value) ? chipGroupElem.value.length === 0 : !chipGroupElem.querySelector("sbb-chip"));
+			else if (this._input instanceof HTMLInputElement) return this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty();
+			else if (this._input instanceof HTMLSelectElement) return this._input.selectedOptions?.item(0)?.label?.trim() === "";
+			else if (this._input?.localName === "sbb-select") return this._input.getDisplayValue?.()?.trim() === "";
+			else return this._isInputValueEmpty();
+		}
+		_isInputValueEmpty() {
+			const value = this._input.value;
+			return [
+				"",
+				void 0,
+				null
+			].includes(value) || Array.isArray(value) && value.length === 0;
+		}
+		/**
+		* It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-error> instances.
+		*/
+		_onSlotErrorChange(event) {
+			const errorElements = event.target.assignedElements();
+			if (this._input && this._input.ariaDescribedByElements?.length) this._input.ariaDescribedByElements = removeAriaElements(this._input.ariaDescribedByElements, ...this._errorElements ?? [], ...this._hintElements ?? []);
+			this._errorElements = errorElements;
+			for (const el of this._errorElements) el.role ||= "status";
+			this._assignAriaDescribedByElements();
+			this.toggleState("has-error", !!this._errorElements.length);
+			this._syncNegative();
+		}
+		/**
+		* It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-hint> instances.
+		*/
+		_onSlotHintChange(event) {
+			const hintElements = event.target.assignedElements();
+			if (this._input?.ariaDescribedByElements?.length && this._hintElements?.length) this._input.ariaDescribedByElements = removeAriaElements(this._input.ariaDescribedByElements, ...this._hintElements);
+			this._hintElements = hintElements;
+			this._assignAriaDescribedByElements();
+			this.toggleState("has-hint", !!this._hintElements.length);
+			this._syncNegative();
+		}
+		_assignAriaDescribedByElements() {
+			if (this._input) {
+				const elements = this._errorElements.length ? this._errorElements : this._hintElements;
+				this._input.ariaDescribedByElements = appendAriaElements(this._input.ariaDescribedByElements, ...elements);
+			}
+		}
+		/** 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() {
+			if (this._input?.localName !== "input") return;
+			this._input.value = "";
+			this._checkAndUpdateInputEmpty();
+		}
+		_syncNegative() {
+			this.querySelectorAll?.("sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group,sbb-hint,sbb-form-field-text-counter").forEach((element) => element.toggleAttribute("negative", this.negative));
+		}
+		_syncSize() {
+			this.querySelectorAll?.("sbb-autocomplete,sbb-autocomplete-grid,sbb-select").forEach((element) => element.size = this.size === "l" ? "m" : this.size);
+		}
+		render() {
+			return html`
+      <div class="sbb-form-field__space-wrapper">
+        ${""}
+        <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>
+              </span>
+            </span>
+            <div class="sbb-form-field__input">
+              <slot @slotchange=${this._onSlotInputChange}></slot>
+            </div>
+            <sbb-icon
+              name="chevron-small-down-small"
+              class="sbb-form-field__select-input-icon"
+            ></sbb-icon>
+          </div>
+          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
+        </div>
+
+        <div class="sbb-form-field__hint">
+          <slot name="hint" @slotchange=${this._onSlotHintChange}></slot>
+          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/form-field/form-field-clear/form-field-clear.component.ts
+/**
+* Combined with `sbb-form-field`, it displays a button which clears the input value.
+*
+* @event {Event} change - The change event is fired on the component's associated input when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
+* @event {InputEvent} input - The input event fires on the component's associated input when the value has been changed as a direct result of a user action.
+*/
+var SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseElement) {
+	static {
+		this.elementName = "sbb-form-field-clear";
+	}
+	static {
+		this.elementDependencies = [SbbIconElement];
+	}
+	static {
+		this.styles = [miniButtonStyle];
+	}
+	constructor() {
+		super();
+		this._language = new SbbLanguageController(this);
+		this.addEventListener?.("click", () => this._handleClick());
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._formField = this.closest("sbb-form-field");
+		if (this._formField) {
+			this.slot ||= "suffix";
+			this.negative = this._formField.hasAttribute("negative");
+		}
+	}
+	async _handleClick() {
+		const input = this._formField?.inputElement;
+		if (!input || input.localName !== "input") return;
+		this._formField?.clear();
+		input.focus();
+		input.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true
+		}));
+		input.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		this.internals.ariaLabel = i18nClearInput[this._language.current];
+	}
+	renderTemplate() {
+		return html`<sbb-icon name="cross-small"></sbb-icon>`;
+	}
+};
+
+//#endregion
+//#region src/elements/form-field/hint/hint.scss?inline
+var hint_default = ":host {\n  --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n  display: inline-block;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-hint-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  line-height: var(--sbb-typo-line-height-texts);\n}\n\n:host([negative]) {\n  --sbb-form-field-label-color: var(--sbb-color-5);\n}\n";
+
+//#endregion
+//#region src/elements/form-field/hint/hint.component.ts
+/**
+* It displays a hint message in the `sbb-form-field`.
+*
+* @slot - Use the unnamed slot to display the hint message.
+*/
+var SbbHintElement = class extends SbbNegativeMixin(SbbElement) {
+	constructor() {
+		super(...arguments);
+		this.formField = null;
+	}
+	static {
+		this.elementName = "sbb-hint";
+	}
+	static {
+		this.styles = [unsafeCSS(hint_default)];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.slot ||= "hint";
+		this.formField = this.closest?.("sbb-form-field");
+		this.negative = this.formField?.hasAttribute("negative") ?? false;
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+
+//#endregion
+//#region src/elements/form-field/form-field-text-counter/form-field-text-counter.component.ts
+const percentagesToRead = [
+	100,
+	50,
+	25,
+	10,
+	0
+];
+/**
+* It displays the remaining characters count for input/textarea elements with a configured
+* maxlength property in the `sbb-form-field`.
+* The component automatically uses the form field's inputElement and displays the remaining character count.
+* If the input is disabled, readonly or an `sbb-error` is present, the output is suppressed.
+* @slot - Use the unnamed slot to display a custom description text after the counter.
+*/
+let SbbFormFieldTextCounterElement = (() => {
+	let _classSuper = SbbHintElement;
+	let __remainingCharacters_decorators;
+	let __remainingCharacters_initializers = [];
+	let __remainingCharacters_extraInitializers = [];
+	return class SbbFormFieldTextCounterElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.#_remainingCharacters_accessor_storage = __runInitializers(this, __remainingCharacters_initializers, 0);
+			this._language = (__runInitializers(this, __remainingCharacters_extraInitializers), new SbbLanguageController(this));
+			this._abortController = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			__remainingCharacters_decorators = [state()];
+			__esDecorate(this, null, __remainingCharacters_decorators, {
+				kind: "accessor",
+				name: "_remainingCharacters",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "_remainingCharacters" in obj,
+					get: (obj) => obj._remainingCharacters,
+					set: (obj, value) => {
+						obj._remainingCharacters = value;
+					}
+				},
+				metadata: _metadata
+			}, __remainingCharacters_initializers, __remainingCharacters_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-form-field-text-counter";
+		}
+		#_remainingCharacters_accessor_storage;
+		get _remainingCharacters() {
+			return this.#_remainingCharacters_accessor_storage;
+		}
+		set _remainingCharacters(value) {
+			this.#_remainingCharacters_accessor_storage = value;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.internals.ariaHidden = "true";
+			this._abortController?.abort();
+			this._abortController = new AbortController();
+			if (this.formField) {
+				this.formField.addEventListener("ɵinput", () => this._onInputUpdate(), { signal: this._abortController.signal });
+				this.formField.addEventListener("input", () => this._onInputUpdate(), { signal: this._abortController.signal });
+				this.formField.addEventListener("ɵinputattributechange", () => this._onInputUpdate(), { signal: this._abortController.signal });
+				this.formField.addEventListener("focusin", (event) => {
+					if (event.target === this.formField?.inputElement) this.internals.ariaLabel = this._infoText();
+				}, { signal: this._abortController.signal });
+				this._onInputUpdate();
+			}
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._abortController?.abort();
+		}
+		_onInputUpdate() {
+			const inputElement = this.formField?.inputElement;
+			if (!inputElement) return;
+			const maxLength = inputElement.maxLength ?? 0;
+			const currentLength = inputElement.value?.length ?? 0;
+			this._remainingCharacters = Math.max(maxLength - currentLength, 0);
+			if ([...percentagesToRead.map((e) => Math.round(e / 100 * maxLength))].includes(this._remainingCharacters)) sbbLiveAnnouncer.announce(this._infoText());
+		}
+		_infoText() {
+			return `${this._remainingCharacters} ${i18nRemainingCharacters[this._language.current]}`;
+		}
+		render() {
+			return html`${this._remainingCharacters}<slot>
+        ${i18nRemainingCharacters[this._language.current]}</slot
+      >`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbErrorElement, SbbFormFieldClearElement, SbbFormFieldControlEvent, SbbFormFieldElement, SbbFormFieldTextCounterElement, SbbHintElement };