@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779280803 → 5.0.0-next.3-dev.1779281392

package/dialog/dialog/dialog.global.scss

@@ -0,0 +1,32 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
+  --sbb-dialog-color: var(--sbb-color-2);
+  --sbb-dialog-background-color: var(--sbb-background-color-1);
+  --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
+  --sbb-dialog-color-negative: var(--sbb-color-2-negative);
+  --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
+  --sbb-dialog-width: auto;
+  --sbb-dialog-max-width: 100%;
+  --sbb-dialog-height: auto;
+  --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
+  --sbb-dialog-inset-block: 0 auto;
+  --sbb-dialog-inset-inline: 0 auto;
+  --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
+  --sbb-dialog-animation-easing: ease;
+  --sbb-dialog-pointer-events: none;
+  --sbb-dialog-backdrop-visibility: hidden;
+  --sbb-dialog-backdrop-pointer-events: none;
+  --sbb-dialog-backdrop-color: transparent;
+  --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
+}
+
+@mixin base-breakpoint-small {
+  --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
+  --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
+  --sbb-dialog-max-width: 90vw;
+  --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
+}

package/dialog/dialog-close-button/dialog-close-button.global.scss

@@ -0,0 +1,35 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
+  --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+}
+
+@mixin rules {
+  sbb-dialog-close-button {
+    // If there is no dialog title, the close button should be positioned absolute
+    sbb-dialog:not(:has(> sbb-dialog-title)) > &,
+    sbb-dialog:state(has-intermediate-element):not(:has(> * > sbb-dialog-title)) > * > & {
+      position: absolute;
+      z-index: 1;
+    }
+
+    // The close button positioning needs the current dialog title size
+    sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='3'])
+      > *
+      > & {
+      --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
+    }
+
+    // The close button positioning needs the current dialog title size
+    sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title[visual-level='5'])
+      > *
+      > & {
+      --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
+    }
+  }
+}

package/dialog/dialog-content/dialog-content.global.scss

@@ -0,0 +1,13 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-dialog-content {
+    // If there is a title, reduce the top spacing for the content
+    sbb-dialog:has(> sbb-dialog-title) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-title) > * > & {
+      padding-block-start: var(--sbb-spacing-fixed-1x);
+    }
+  }
+}

package/dialog/dialog-title/dialog-title.global.scss

@@ -0,0 +1,13 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-dialog-title {
+    // Hide margin on the right side. Distance to button is defined by flex gap already.
+    sbb-dialog:has(> sbb-dialog-close-button) > &,
+    sbb-dialog:state(has-intermediate-element):has(> * > sbb-dialog-close-button) > * > & {
+      padding-inline-end: 0;
+    }
+  }
+}

package/divider/divider.global.scss

@@ -0,0 +1,9 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-divider-color: var(--sbb-background-color-4);
+  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
+  --sbb-divider-border-width: var(--sbb-border-width-1x);
+}

package/expansion-panel/expansion-panel/expansion-panel.global.scss

@@ -0,0 +1,21 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
+  --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
+  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
+
+  // Vars which will be used by child components
+  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
+  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
+  --sbb-expansion-panel-title-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-title-gap-l),
+        'lean': var(--sbb-expansion-panel-title-gap-s),
+      ),
+      $theme
+    )};
+}

package/expansion-panel/expansion-panel-content/expansion-panel-content.global.scss

@@ -0,0 +1,16 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
+  --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-content-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-content-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-content-padding-inline-s),
+      ),
+      $theme
+    )};
+}

package/expansion-panel/expansion-panel-header/expansion-panel-header.global.scss

@@ -0,0 +1,41 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
+  --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
+  --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
+  --sbb-expansion-panel-header-justify-content: space-between;
+  --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-gap-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-gap-l),
+        'lean': var(--sbb-expansion-panel-header-gap-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
+  --sbb-expansion-panel-header-padding-block-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-block-l),
+        'lean': var(--sbb-expansion-panel-header-padding-block-s),
+      ),
+      $theme
+    )};
+  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-padding-inline-default: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-expansion-panel-header-padding-inline-l),
+        'lean': var(--sbb-expansion-panel-header-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-expansion-panel-header-text-color: ButtonText;
+}

package/file-selector/common/file-selector.global.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-file-selector-color: var(--sbb-color-2);
+  --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-file-selector-background-color: var(--sbb-background-color-1);
+  --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
+  --_sbb-file-selector-dropzone-icon-medium-display: #{sbb.theme-pattern-select(
+      (
+        'standard': block,
+        'lean': none,
+      ),
+      $theme
+    )};
+  --_sbb-file-selector-dropzone-icon-small-display: #{sbb.theme-pattern-select(
+      (
+        'standard': none,
+        'lean': block,
+      ),
+      $theme
+    )};
+}

package/flip-card/flip-card/flip-card.global.scss

@@ -0,0 +1,25 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-flip-card-background-color: var(--sbb-background-color-4);
+  --sbb-flip-card-border: var(--sbb-border-width-2x);
+  --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
+  --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
+  --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
+  --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
+}
+
+@mixin base-breakpoint-large {
+  --sbb-flip-card-min-height: #{sbb.px-to-rem-build(320)};
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-flip-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-flip-card .sbb-action {
+    pointer-events: all;
+  }
+}

package/flip-card/flip-card-details/flip-card-details.global.scss

@@ -0,0 +1,7 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
+}

package/flip-card/flip-card-summary/flip-card-summary.global.scss

@@ -0,0 +1,17 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-flip-card-summary {
+    > [slot='image']:is(sbb-image, img),
+    > [slot='image'] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
+      --sbb-image-aspect-ratio: auto;
+      --sbb-image-object-fit: cover;
+
+      border-radius: 0;
+      display: block;
+      height: 100%;
+    }
+  }
+}

package/footer/footer.global.scss

@@ -0,0 +1,17 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(76)};
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
+  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
+  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+}
+
+@mixin base-breakpoint-small {
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
+}

package/form-field/error/error.global.scss

@@ -0,0 +1,9 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: #{sbb.px-to-rem-build(17)};
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
+}

package/form-field/form-field/form-field.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../form-field.component-DkqZz7aZ.js";
+import { n as e, t } from "../../form-field.component-BKWzdNHT.js";
 export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };

package/form-field/form-field/form-field.global.scss

@@ -0,0 +1,271 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-border-color: var(--sbb-border-color-5);
+  --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-color: var(--sbb-color-3);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-form-field-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+  --sbb-form-field-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-form-field-input-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-form-field-label-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-xs),
+        'lean': var(--sbb-text-font-size-xxs),
+      ),
+      $theme
+    )};
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(10)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(8.5)},
+        'lean': #{sbb.px-to-rem-build(5.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-input-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': 0,
+        'lean': #{sbb.px-to-rem-build(-2)},
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-form-field-border-color: ButtonBorder;
+}
+
+@mixin base-breakpoint-large {
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(11)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(10.5)},
+        'lean': #{sbb.px-to-rem-build(5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8)},
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  :is(sbb-form-field, sbb-timetable-form-field) {
+    :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+      @include sbb.ellipsis;
+      @include sbb.input-reset;
+
+      // Form elements are naturally in 'display: inline-block'; however, since the form-element container
+      // is in 'display: flex' (class "sbb-form-field__input"), they are block-ified, as per documentation:
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts#the_flex_container
+      // Setting 'display: flex' should not change anything on lyne-elements, but is useful for consumers of lyne-angular,
+      // since the rule is valid for Angular custom components which have an inner form element.
+      display: flex;
+
+      // Use !important here to not interfere with Firefox focus ring definition
+      // which appears in normalize CSS of several frameworks.
+      outline: none !important;
+      overflow: var(--sbb-form-field-overflow, hidden);
+      width: 100%;
+      box-sizing: border-box;
+      color: var(--sbb-form-field-text-color);
+
+      // Fill color needed for Safari
+      -webkit-text-fill-color: var(--sbb-form-field-text-color);
+      opacity: 1;
+      background-color: transparent;
+
+      // To be more specific than the styles in normalize.scss we need to use !important
+      // TODO: Find a better solution
+      font-size: var(--sbb-form-field-input-text-size) !important;
+      letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
+      font-family: var(--sbb-typo-font-family) !important;
+      line-height: var(--sbb-typo-line-height-text) !important;
+
+      &::placeholder {
+        @include sbb.placeholder;
+      }
+    }
+
+    &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
+      // This covers the placeholder of the sbb-date-input and sbb-time-input
+    &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+      color: transparent !important;
+      -webkit-text-fill-color: transparent !important;
+
+      @media (forced-colors: active) {
+        color: Canvas !important;
+        -webkit-text-fill-color: Canvas !important;
+      }
+    }
+
+    // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+    &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+      -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    }
+
+    // Fix positioning issue for select which occurs in Safari
+    :where(select) {
+      vertical-align: middle;
+    }
+
+    :where(select, sbb-select) {
+      padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+    }
+
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      :where(input, sbb-date-input, sbb-time-input) {
+      // We shrink the input's height to support all types of inputs (especially type=number).
+      // Factor 1.25 ensures, letters are not cut.
+      height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+
+      // Avoids Safari bug, where text gets misaligned with type=number
+      line-height: 1 !important;
+
+      // We add the missing block spacing to fit the line-height
+      margin-block: calc(
+        0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
+      );
+    }
+
+    // This rule matches the analogous one in the form-field.scss,
+    // and it's useful for Angular custom components, assuming that they have an internal form element.
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
+      margin-block-end: #{sbb.px-to-rem-build(-2)};
+    }
+
+    :where(textarea) {
+      @include sbb.scrollbar;
+
+      position: relative;
+      resize: none;
+
+      // White-space break needed for Firefox
+      white-space: break-spaces;
+      overflow-y: auto;
+      min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+      height: 100%;
+    }
+
+    &[size='l'] :where(textarea) {
+      padding-block-end: #{sbb.px-to-rem-build(5.5)};
+    }
+
+    &[negative] :where(textarea) {
+      @include sbb.scrollbar-variables--color-negative;
+    }
+
+    &:has(
+      :is(
+        :is(input, textarea, select):user-invalid,
+        :state(interacted):invalid,
+        .ng-touched.ng-invalid,
+        .sbb-invalid
+      )
+    ),
+    :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
+      --sbb-form-field-border-color: var(--sbb-color-error);
+      --sbb-form-field-text-color: var(--sbb-color-error);
+
+      &[negative] {
+        --sbb-form-field-border-color: var(--sbb-color-red85);
+        --sbb-form-field-text-color: var(--sbb-color-red85);
+      }
+
+      @media (forced-colors: active) {
+        --sbb-form-field-border-color: LinkText !important;
+        --sbb-form-field-text-color: LinkText !important;
+      }
+    }
+  }
+
+  :is(sbb-form-field, sbb-timetable-form-field):state(empty):not(
+      :state(readonly),
+      :state(disabled)
+    ) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      --sbb-form-field-background-color: light-dark(
+        color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+        color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+      );
+
+      &[negative] {
+        --sbb-form-field-background-color: color-mix(
+          in srgb,
+          var(--sbb-color-peach) 10%,
+          var(--sbb-background-color-1-negative)
+        );
+      }
+    }
+  }
+
+  // In high contrast we set, regardless of any state, an Asterix (*) for required fields, to ensure the requirement is visible.
+  :is(sbb-form-field, sbb-timetable-form-field):not(:state(readonly), :state(disabled)) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      @media (forced-colors: active) {
+        label::after {
+          content: ' *';
+          color: Highlight;
+        }
+      }
+    }
+  }
+}

package/{form-field.component-DkqZz7aZ.js → form-field.component-BKWzdNHT.js}

@@ -4,7 +4,7 @@ import { property as a, state as o } from "lit/decorators.js";
 import { SbbElement as s, SbbNegativeMixin as c, appendAriaElements as l, forceType as u, removeAriaElements as d, sbbInputModalityDetector as f } from "./core.js";
 import { SbbIconElement as p } from "./icon.pure.js";
 //#region src/elements/form-field/form-field/form-field.scss?inline
-var m = "@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;line-height:var(--sbb-typo-line-height-text)}: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-input-margin-block-end: -.125rem;--_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)}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--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-input-margin-block-end: 0;--_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(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform: .65625rem}}: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-element-sbb-slider),[state--input-element-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-element-sbb-slider),[state--input-element-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%;translate:0 -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-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-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-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-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-element-sbb-select),[state--input-element-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-element-textarea),[state--input-element-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(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.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))}", h = 0, g = /* @__PURE__ */ new WeakMap(), _ = [
+var m = "@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;line-height:var(--sbb-typo-line-height-text)}: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-input-margin-block-end: -.125rem;--_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)}:host([size=l]){--sbb-form-field-min-height: var(--sbb-size-element-l);--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs)}:host(:is([size=m],[size=l])){--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-input-margin-block-end: 0;--_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(:is([size=m],[size=l])){--_sbb-form-field-floating-label-transform: .65625rem}}: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-element-sbb-slider),[state--input-element-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-element-sbb-slider),[state--input-element-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%;translate:0 -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-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(explicit-input-element-select),[state--explicit-input-element-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-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-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-element-sbb-select),[state--input-element-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-element-textarea),[state--input-element-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(:is(:is(:state(input-element-input),[state--input-element-input]),:is(:state(input-element-select),[state--input-element-select]),:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input{margin-block-end:var(--_sbb-form-field-input-margin-block-end)}.sbb-form-field__hint{display:flex;min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-inline-start:var(--sbb-form-field-padding-inline);margin-block-start:var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start))}", h = 0, g = /* @__PURE__ */ new WeakMap(), _ = [
 	"input",
 	"textarea",
 	"select"

package/form-field.js

@@ -1,5 +1,5 @@
 import { t as e } from "./error.component-D9Tu2YIl.js";
-import { n as t, t as n } from "./form-field.component-DkqZz7aZ.js";
+import { n as t, t as n } from "./form-field.component-BKWzdNHT.js";
 import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
 import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
 import { t as a } from "./hint.component-DTKfI9tq.js";

package/form-field.pure.js

@@ -1,5 +1,5 @@
 import { t as e } from "./error.component-D9Tu2YIl.js";
-import { n as t, t as n } from "./form-field.component-DkqZz7aZ.js";
+import { n as t, t as n } from "./form-field.component-BKWzdNHT.js";
 import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
 import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
 import { t as a } from "./hint.component-DTKfI9tq.js";