@sbb-esta/lyne-elements-dev 4.10.0-dev.1776085193 → 4.10.0-dev.1776087145

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/custom-elements.json +245 -223
  2. package/development/form-field/form-field/form-field.component.d.ts +6 -0
  3. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  4. package/development/form-field/form-field/form-field.component.js +1 -1
  5. package/development/form-field/form-field.js +1 -1
  6. package/development/form-field.component-DfMO_ihX.js +706 -0
  7. package/development/form-field.js +1 -1
  8. package/development/form-field.pure.js +1 -1
  9. package/form-field/form-field/form-field.component.js +1 -1
  10. package/form-field/form-field.js +1 -1
  11. package/{form-field.component-D50q1wC0.js → form-field.component-Cx5Keg_p.js} +15 -15
  12. package/form-field.js +1 -1
  13. package/form-field.pure.js +1 -1
  14. package/package.json +2 -2
  15. package/development/form-field.component-BEXX0OcL.js +0 -702
package/development/form-field.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as SbbErrorElement } from "./error.component-xD_c9IBA.js";
2
- import { n as SbbFormFieldElement, t as SbbFormFieldControlEvent } from "./form-field.component-BEXX0OcL.js";
2
+ import { n as SbbFormFieldElement, t as SbbFormFieldControlEvent } from "./form-field.component-DfMO_ihX.js";
3
3
  import { SbbFormFieldClearElement } from "./form-field/form-field-clear/form-field-clear.component.js";
4
4
  import { SbbFormFieldTextCounterElement } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
5
5
  import { t as SbbHintElement } from "./hint.component-BsIzdUOV.js";
package/development/form-field.pure.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as SbbErrorElement } from "./error.component-xD_c9IBA.js";
2
- import { n as SbbFormFieldElement, t as SbbFormFieldControlEvent } from "./form-field.component-BEXX0OcL.js";
2
+ import { n as SbbFormFieldElement, t as SbbFormFieldControlEvent } from "./form-field.component-DfMO_ihX.js";
3
3
  import { SbbFormFieldClearElement } from "./form-field/form-field-clear/form-field-clear.component.js";
4
4
  import { SbbFormFieldTextCounterElement } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
5
5
  import { t as SbbHintElement } from "./hint.component-BsIzdUOV.js";
package/form-field/form-field/form-field.component.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../../form-field.component-D50q1wC0.js";
1
+ import { n as e, t } from "../../form-field.component-Cx5Keg_p.js";
2
2
  export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };
package/form-field/form-field.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e, t } from "../form-field.component-D50q1wC0.js";
1
+ import { n as e, t } from "../form-field.component-Cx5Keg_p.js";
2
2
  e.define(), console.warn("The entrypoint '@sbb-esta/elements/form-field/form-field.js' has been deprecated.\nUse either '@sbb-esta/elements/form-field.js' or '@sbb-esta/elements/form-field.pure.js' instead.");
3
3
  //#endregion
4
4
  export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };
package/{form-field.component-D50q1wC0.js → form-field.component-Cx5Keg_p.js} RENAMED
@@ -1,9 +1,9 @@
1
1
  import { __esDecorate as e, __runInitializers as t } from "tslib";
2
2
  import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
3
3
  import { property as o, state as s } from "lit/decorators.js";
4
- import { SbbElement as ee } from "./core/base-elements.js";
5
- import { forceType as c } from "./core/decorators.js";
6
- import { isLean as l } from "./core/dom.js";
4
+ import { SbbElement as c } from "./core/base-elements.js";
5
+ import { forceType as l } from "./core/decorators.js";
6
+ import { isLean as ee } from "./core/dom.js";
7
7
  import { SbbNegativeMixin as u, appendAriaElements as d, removeAriaElements as f } from "./core/mixins.js";
8
8
  import { boxSizingStyles as p } from "./core/styles.js";
9
9
  import { SbbLanguageController as m } from "./core/controllers.js";
@@ -11,7 +11,7 @@ import { i18nOptional as te } from "./core/i18n.js";
11
11
  import "./icon.js";
12
12
  import { sbbInputModalityDetector as h } from "./core/a11y.js";
13
13
  //#region src/elements/form-field/form-field/form-field.scss?inline
14
- var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-icon-svg-width: var(--sbb-form-field-icon-size);--sbb-icon-svg-height: var(--sbb-form-field-icon-size);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );display:inline-block;color:var(--sbb-form-field-color);font-weight:400}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--_sbb-form-field-label-to-input-overlapping: .625rem;--_sbb-form-field-floating-label-transform: .34375rem;--_sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping: .6875rem;--_sbb-form-field-floating-label-transform: .3125rem;--_sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=m]){--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform: .53125rem;--_sbb-form-field-spacer-margin-block-end: calc( -1 * var(--_sbb-form-field-label-to-input-overlapping) )}@media(min-width:64rem){:host([size=m]){--_sbb-form-field-floating-label-transform: .65625rem}}: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-hint-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--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(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-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(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--_sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;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;inset: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);pointer-events:none}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[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;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::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(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}:host(:is(:state(has-error),[state--has-error])) slot[name=hint]{display:none}:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end: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{display:flex;flex-direction:column;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-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-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-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--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-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__hint{display:flex;min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start))}", _ = 0, v = /* @__PURE__ */ new WeakMap(), y = [
14
+ var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text) );--sbb-form-field-margin-block-start: calc( ( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var( --sbb-form-field-text-line-height ) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2 );--sbb-icon-svg-width: var(--sbb-form-field-icon-size);--sbb-icon-svg-height: var(--sbb-form-field-icon-size);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );display:inline-block;color:var(--sbb-form-field-color);font-weight:400}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color: var(--sbb-background-color-1-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5);--sbb-form-field-text-color: var(--sbb-color-3-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host([negative]){--sbb-form-field-border-color: ButtonBorder}}:host([size=s]){--sbb-form-field-min-height: var(--sbb-size-element-xs);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-s);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);--_sbb-form-field-label-to-input-overlapping: .625rem;--_sbb-form-field-floating-label-transform: .34375rem;--_sbb-form-field-spacer-margin-block-end: -.53125rem}@media(min-width:64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping: .6875rem;--_sbb-form-field-floating-label-transform: .3125rem;--_sbb-form-field-spacer-margin-block-end: -.5rem}}:host([size=m]){--sbb-form-field-min-height: var(--sbb-size-element-m);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-input-text-size: var(--sbb-text-font-size-m);--sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);--_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform: .53125rem;--_sbb-form-field-spacer-margin-block-end: calc( -1 * var(--_sbb-form-field-label-to-input-overlapping) )}@media(min-width:64rem){:host([size=m]){--_sbb-form-field-floating-label-transform: .65625rem}}: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-hint-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color: var(--sbb-background-color-3);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}@media(forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color: var(--sbb-background-color-3-negative);--sbb-form-field-border-color: var(--sbb-border-color-5);--sbb-form-field-arrow-color: var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));--sbb-form-field-border-style: dashed}@media(forced-colors:active){:host(:where(:is(:state(disabled),[state--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(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color: var(--sbb-color-5);--sbb-form-field-label-color: var(--sbb-color-5);--sbb-form-field-prefix-color: var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color: var(--sbb-border-color-3);--sbb-form-field-prefix-color: var(--sbb-color-3);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color: var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color: var(--sbb-color-3-negative)}@media(forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color: Highlight;--sbb-form-field-prefix-color: Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-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(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size: 0rem;--_sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow: visible}.sbb-form-field__space-wrapper{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;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;inset: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);pointer-events:none}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset))}@media(forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[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;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::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(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}:host(:is(:state(has-error),[state--has-error])) slot[name=hint]{display:none}:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){display:none}::slotted(sbb-datepicker-toggle){padding-block-end: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%);display:none;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)}:host(:is(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(explicit-input-type-select),[state--explicit-input-type-select]))) .sbb-form-field__select-input-icon{display:inline-block}.sbb-form-field__input-container{display:flex;flex-direction:column;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-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end)}:host(:not(:is(:state(slotted-label),[state--slotted-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-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--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-duration, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media(forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__hint{display:flex;min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start))}", _ = 0, v = /* @__PURE__ */ new WeakMap(), y = [
15
15
  "input",
16
16
  "textarea",
17
17
  "select"
@@ -23,21 +23,21 @@ var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb
23
23
  super("formfieldcontrol"), this._control = e;
24
24
  }
25
25
  }, x = (() => {
26
- let b = u(ee), x, S = [], C = [], w, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L = [], R = [], z, B = [], V = [], H, U = [], W = [], G, K = [], q = [], J, Y = [], X = [], Z, Q = [], $ = [];
26
+ let b = u(c), x, S = [], C = [], w, T = [], E = [], D, O = [], k = [], A, j = [], M = [], N, P = [], F = [], I, L = [], R = [], z, B = [], V = [], H, U = [], W = [], G, K = [], q = [], J, Y = [], X = [], Z, Q = [], $ = [];
27
27
  return class extends b {
28
28
  static {
29
29
  let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
30
30
  x = [o({
31
31
  attribute: "error-space",
32
32
  reflect: !0
33
- })], w = [c(), o({ type: Boolean })], D = [o({ reflect: !0 })], A = [c(), o({
33
+ })], w = [l(), o({ type: Boolean })], D = [o({ reflect: !0 })], A = [l(), o({
34
34
  reflect: !0,
35
35
  type: Boolean
36
- })], N = [o({ reflect: !0 })], I = [c(), o({
36
+ })], N = [o({ reflect: !0 })], I = [l(), o({
37
37
  attribute: "hidden-label",
38
38
  reflect: !0,
39
39
  type: Boolean
40
- })], z = [c(), o({
40
+ })], z = [l(), o({
41
41
  attribute: "floating-label",
42
42
  reflect: !0,
43
43
  type: Boolean
@@ -299,9 +299,9 @@ var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb
299
299
  "tel",
300
300
  "text",
301
301
  "url"
302
- ], this.#e = t(this, S, "none"), this.#t = (t(this, C), t(this, T, !1)), this.#n = (t(this, E), t(this, O, l() ? "s" : "m")), this.#r = (t(this, k), t(this, j, !1)), this.#i = (t(this, M), t(this, P, "default")), this.#a = (t(this, F), t(this, L, !1)), this.#o = (t(this, R), t(this, B, !1)), this.#s = (t(this, V), t(this, U, [])), this.#c = (t(this, W), t(this, K, [])), this.#l = (t(this, q), t(this, Y, null)), this.#u = (t(this, X), t(this, Q, void 0)), this._language = (t(this, $), new m(this)), this._formFieldAttributeObserver = r ? null : new MutationObserver((e) => {
302
+ ], this.#e = t(this, S, "none"), this.#t = (t(this, C), t(this, T, !1)), this.#n = (t(this, E), t(this, O, ee() ? "s" : "m")), this.#r = (t(this, k), t(this, j, !1)), this.#i = (t(this, M), t(this, P, "default")), this.#a = (t(this, F), t(this, L, !1)), this.#o = (t(this, R), t(this, B, !1)), this.#s = (t(this, V), t(this, U, [])), this.#c = (t(this, W), t(this, K, [])), this.#l = (t(this, q), t(this, Y, null)), this.#u = (t(this, X), t(this, Q, void 0)), this._language = (t(this, $), new m(this)), this._formFieldAttributeObserver = r ? null : new MutationObserver((e) => {
303
303
  e.some((e) => e.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty(), this.dispatchEvent(new Event("ɵinputattributechange")));
304
- }), this._inputFormAbortController = new AbortController(), this._control = null, this.addEventListener?.("focusin", (e) => {
304
+ }), this._inputFormAbortController = new AbortController(), this._control = null, this._previousType = null, this.addEventListener?.("focusin", (e) => {
305
305
  (e.target === this.inputElement || e.target === this.inputElement?.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${h.mostRecentModality}`));
306
306
  }, { passive: !0 }), this.addEventListener?.("focusout", (e) => {
307
307
  if (e.target === this.inputElement || e.target === this.inputElement?.inputElement) {
@@ -367,7 +367,7 @@ var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb
367
367
  return y.includes(e.localName) || !!customElements.get(e.localName)?.formAssociated;
368
368
  }
369
369
  _readInputState() {
370
- 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"));
370
+ 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")), this._previousType && this.internals.states.delete(`explicit-input-type-${this._previousType}`), this._previousType = this._control?.type ?? this._input.type ?? "text", this.internals.states.add(`explicit-input-type-${this._previousType}`);
371
371
  }
372
372
  _registerInputFormListener() {
373
373
  this._inputFormAbortController.abort();
@@ -457,10 +457,10 @@ var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb
457
457
  <div class="sbb-form-field__input">
458
458
  <slot @slotchange=${this._onSlotInputChange}></slot>
459
459
  </div>
460
- ${this.hasUpdated && ["select", "sbb-select"].includes(this._input?.localName) ? n`<sbb-icon
461
- name="chevron-small-down-small"
462
- class="sbb-form-field__select-input-icon"
463
- ></sbb-icon>` : i}
460
+ <sbb-icon
461
+ name="chevron-small-down-small"
462
+ class="sbb-form-field__select-input-icon"
463
+ ></sbb-icon>
464
464
  </div>
465
465
  <slot name="suffix" @slotchange=${this._syncNegative}></slot>
466
466
  </div>
package/form-field.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "./error.component-B_D8WUP5.js";
2
- import { n as t, t as n } from "./form-field.component-D50q1wC0.js";
2
+ import { n as t, t as n } from "./form-field.component-Cx5Keg_p.js";
3
3
  import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
4
4
  import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
5
5
  import { t as a } from "./hint.component-BVUUrSSu.js";
package/form-field.pure.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "./error.component-B_D8WUP5.js";
2
- import { n as t, t as n } from "./form-field.component-D50q1wC0.js";
2
+ import { n as t, t as n } from "./form-field.component-Cx5Keg_p.js";
3
3
  import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
4
4
  import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
5
5
  import { t as a } from "./hint.component-BVUUrSSu.js";
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements-dev",
3
- "version": "4.10.0-dev.1776085193",
3
+ "version": "4.10.0-dev.1776087145",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
7
7
  "web components",
8
8
  "lit",
9
- "https://github.com/sbb-design-systems/lyne-components/commit/e742832dd9934a74961d64af573e0bcab0875381"
9
+ "https://github.com/sbb-design-systems/lyne-components/commit/b8e801f3da07346251a737fb2d80815a4d388658"
10
10
  ],
11
11
  "type": "module",
12
12
  "exports": {