@sbb-esta/lyne-elements-dev 4.7.0-dev.1773208987 → 4.7.0-dev.1773217409

package/core/styles/core.scss

@@ -107,9 +107,18 @@ $theme: 'standard' !default;
 @use '../../footer/footer.global' as footer with (
   $theme: $theme
 );
+@use '../../form-field/error/error.global' as error with (
+  $theme: $theme
+);
+@use '../../form-field/form-field/form-field.global' as form-field with (
+  $theme: $theme
+);
 @use '../../icon-sidebar/icon-sidebar/icon-sidebar.global' as icon-sidebar with (
   $theme: $theme
 );
+@use '../../lead-container/lead-container.global' as lead-container with (
+  $theme: $theme
+);
 @use '../../option/option/option.global' as option with (
   $theme: $theme
 );
@@ -176,13 +185,16 @@ $theme: 'standard' !default;
   @include dialog.base;
   @include dialog-close-button.base;
   @include divider.base;
+  @include error.base;
   @include expansion-panel.base;
   @include expansion-panel-content.base;
   @include expansion-panel-header.base;
   @include flip-card.base;
   @include flip-card-details.base;
   @include footer.base;
+  @include form-field.base;
   @include icon-sidebar.base;
+  @include lead-container.base;
   @include option.base;
   @include option-hint.base;
   @include optgroup.base;
@@ -203,6 +215,7 @@ $theme: 'standard' !default;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
     @include expansion-panel-header.base-forced-colors;
+    @include form-field.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;
   }
@@ -281,6 +294,7 @@ $theme: 'standard' !default;
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;
     @include flip-card.base-breakpoint-large;
+    @include form-field.base-breakpoint-large;
 
     // TODO: Remove complete block when new lean theme is complete
     // Only render the block in standard theme as fallback for CSS class usage
@@ -303,6 +317,8 @@ $theme: 'standard' !default;
 
   @include mediaqueries.mq($from: ultra) {
     @include sbb-css-tokens.breakpoint-ultra;
+
+    @include lead-container.base-breakpoint-ultra;
   }
 }
 
@@ -315,7 +331,9 @@ $theme: 'standard' !default;
 @include dialog-content.rules;
 @include dialog-title.rules;
 @include flip-card-summary.rules;
+@include form-field.rules;
 @include icon-sidebar.rules;
+@include lead-container.rules;
 @include option.rules;
 @include tab-nav-bar.rules;
 
@@ -345,122 +363,6 @@ html {
   @include typo.placeholder;
 }
 
-:is(sbb-form-field, sbb-timetable-form-field) {
-  :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-    @include typo.text-m--regular;
-    @include helpers.ellipsis;
-    @include inputs.input-reset;
-
-    // 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);
-    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;
-    font-family: var(--sbb-typo-font-family) !important;
-    line-height: var(--sbb-typo-line-height-text) !important;
-
-    &::placeholder {
-      @include typo.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;
-
-    @include a11y.if-forced-colors {
-      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);
-  }
-
-  &[size='s'] :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))
-    );
-  }
-
-  :where(textarea) {
-    @include scrollbar.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: #{functions.px-to-rem-build(5.5)};
-  }
-
-  &[negative] :where(textarea) {
-    @include scrollbar.scrollbar($negative: true);
-  }
-
-  &: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);
-    }
-
-    @include a11y.if-forced-colors {
-      --sbb-form-field-border-color: LinkText !important;
-      --sbb-form-field-text-color: LinkText !important;
-    }
-  }
-}
-
 // Hiding components until they are instantiated
 :is(
   sbb-autocomplete,
@@ -530,17 +432,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-// TODO: Move back to the sbb-lead-container components when the global CSS refactoring happens
-sbb-lead-container {
-  > [slot='image']:is(sbb-image, img, picture),
-  > [slot='image'] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-    --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-    --sbb-image-object-fit: cover;
-
-    border-radius: var(--sbb-lead-container-image-border-radius);
-  }
-}
-
 // TODO: Move back to the sbb-message components when the global CSS refactoring happens
 sbb-message {
   > [slot='image']:is(sbb-image, img),

package/core.css

@@ -1436,6 +1436,9 @@
   --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);
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: 1.0625rem;
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --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);
@@ -1476,8 +1479,37 @@
   --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);
+  --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: var(--sbb-color-metal);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color: var(--sbb-color-metal);
+  --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: 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: 0.53125rem;
+  --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
   --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
   --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-lead-container-background-color: var(--sbb-background-color-1);
+  --sbb-lead-container-image-ratio: 2 / 1;
+  --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
+  --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
+  --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
+  --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
+  --sbb-lead-container-image-border-radius: 0;
   --sbb-option-color: var(--sbb-color-3);
   --sbb-option-background-color: inherit;
   --sbb-option-background-color-hover: var(--sbb-background-color-3);
@@ -1599,6 +1631,7 @@
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
     --sbb-expansion-panel-header-text-color: ButtonText;
+    --sbb-form-field-border-color: ButtonBorder;
     --sbb-visual-checkbox-selection-color: Canvas;
     --sbb-visual-checkbox-selection-color-negative: Canvas;
     --sbb-visual-checkbox-selection-color-disabled: Canvas;
@@ -1708,6 +1741,9 @@
     --sbb-dialog-padding-inline: var(--sbb-spacing-responsive-s);
     --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-16x));
     --sbb-flip-card-min-height: 20rem;
+    --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-floating-label-transform: 0.65625rem;
+    --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
   }
   :root.sbb-lean {
     --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
@@ -1733,6 +1769,8 @@
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
+    --sbb-lead-container-image-ratio: 21 / 9;
+    --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
   }
 }
 
@@ -1800,70 +1838,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   height: 100%;
 }
 
-sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
-  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
-}
-
-sbb-icon-sidebar-content + sbb-icon-sidebar {
-  border-start-end-radius: 0;
-  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
-}
-
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
-  --sbb-option-min-height: var(--sbb-size-element-xxs);
-  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
-}
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
-  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
-}
-
-sbb-tab-nav-bar .sbb-tab-amount {
-  margin: 0;
-  color: var(--sbb-tab-label-amount-color);
-  font-weight: normal;
-  text-decoration: var(--sbb-tab-label-text-decoration);
-}
-
-.sbb-dark {
-  color-scheme: dark;
-}
-
-.sbb-light {
-  color-scheme: light;
-}
-
-.sbb-light-dark {
-  color-scheme: light dark;
-}
-
-html {
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
-  color-scheme: light dark;
-  color: var(--sbb-font-color-default);
-  background-color: var(--sbb-background-color-1);
-}
-
-::placeholder {
-  color: var(--sbb-color-5);
-  -webkit-text-fill-color: var(--sbb-color-5);
-  opacity: 1;
-}
-
 :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
-  --sbb-text-font-size: var(--sbb-text-font-size-m);
-  font-family: var(--sbb-typo-font-family);
-  font-weight: normal;
-  line-height: var(--sbb-typo-line-height-text);
-  letter-spacing: var(--sbb-typo-letter-spacing-text);
-  font-size: var(--sbb-text-font-size);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1873,7 +1848,7 @@ html {
   padding: 0;
   appearance: none;
   outline: none !important;
-  overflow: var(--sbb-form-field-overflow);
+  overflow: var(--sbb-form-field-overflow, hidden);
   width: 100%;
   box-sizing: border-box;
   color: var(--sbb-form-field-text-color);
@@ -1881,6 +1856,7 @@ html {
   opacity: 1;
   background-color: transparent;
   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;
 }
@@ -2031,6 +2007,70 @@ html {
   }
 }
 
+sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
+  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
+}
+
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
+sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
+  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
+  --sbb-image-object-fit: cover;
+  border-radius: var(--sbb-lead-container-image-border-radius);
+}
+
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
+  --sbb-option-min-height: var(--sbb-size-element-xxs);
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
+  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+}
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+}
+
+sbb-tab-nav-bar .sbb-tab-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
+html {
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+  color-scheme: light dark;
+  color: var(--sbb-font-color-default);
+  background-color: var(--sbb-background-color-1);
+}
+
+::placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
+  opacity: 1;
+}
+
 :is(sbb-autocomplete,
 sbb-autocomplete-grid,
 sbb-datepicker,
@@ -2099,13 +2139,6 @@ img {
   object-position: var(--sbb-image-object-position);
 }
 
-sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
-sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
-  --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
-  --sbb-image-object-fit: cover;
-  border-radius: var(--sbb-lead-container-image-border-radius);
-}
-
 sbb-message > [slot=image]:is(sbb-image, img),
 sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: var(--sbb-message-image-border-radius);