@sbb-esta/lyne-elements 3.5.0 → 3.7.0

package/core.css

@@ -991,24 +991,6 @@
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
-  /**
-   * Micro (value corresponds to --sbb-breakpoint-micro-min)
-   */
-  /**
-   * Small (value corresponds to --sbb-breakpoint-small-min)
-   */
-  /**
-   * Medium (value corresponds to --sbb-breakpoint-medium-min)
-   */
-  /**
-   * Large (value corresponds to --sbb-breakpoint-large-min)
-   */
-  /**
-   * Wide (value corresponds to --sbb-breakpoint-wide-min)
-   */
-  /**
-   * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
-   */
 }
 @media (forced-colors: active) {
   :root {
@@ -1018,6 +1000,11 @@
     --sbb-focus-outline-width: var(--sbb-border-width-2x);
   }
 }
+:root {
+  /**
+   * Micro (value corresponds to --sbb-breakpoint-micro-min)
+   */
+}
 @media (min-width: 22.5rem) {
   :root {
     /* Layout */
@@ -1026,6 +1013,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-micro);
   }
 }
+:root {
+  /**
+   * Small (value corresponds to --sbb-breakpoint-small-min)
+   */
+}
 @media (min-width: 37.5rem) {
   :root {
     /* Title */
@@ -1040,6 +1032,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
   }
 }
+:root {
+  /**
+   * Medium (value corresponds to --sbb-breakpoint-medium-min)
+   */
+}
 @media (min-width: 52.5rem) {
   :root {
     /* Title */
@@ -1076,6 +1073,11 @@
     --sbb-size-element-l: var(--sbb-size-element-l-medium);
   }
 }
+:root {
+  /**
+   * Large (value corresponds to --sbb-breakpoint-large-min)
+   */
+}
 @media (min-width: 64rem) {
   :root {
     /* Title */
@@ -1090,6 +1092,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
   }
 }
+:root {
+  /**
+   * Wide (value corresponds to --sbb-breakpoint-wide-min)
+   */
+}
 @media (min-width: 80rem) {
   :root {
     /* Spacing */
@@ -1100,6 +1107,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-wide);
   }
 }
+:root {
+  /**
+   * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
+   */
+}
 @media (min-width: 90rem) {
   :root {
     /* Title */
@@ -1136,7 +1148,6 @@
   --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
   --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
   --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
-  --sbb-border-radius-infinity: 100000em;
 }
 :root.sbb-lean {
   --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
@@ -1154,6 +1165,9 @@
   --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
   --sbb-title-margin-block-end-level-6: 0;
 }
+:root {
+  --sbb-border-radius-infinity: 100000em;
+}
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
 }
@@ -1203,7 +1217,7 @@ html {
   opacity: 1;
 }
 
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+: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-font-size-text-m);
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
@@ -1230,37 +1244,37 @@ sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-t
   font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-body-text) !important;
 }
-sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
+:is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
   color: var(--sbb-color-metal);
   -webkit-text-fill-color: var(--sbb-color-metal);
   opacity: 1;
 }
-sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+:is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
   color: transparent !important;
   -webkit-text-fill-color: transparent !important;
 }
 @media (forced-colors: active) {
-  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+  :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
     color: Canvas !important;
     -webkit-text-fill-color: Canvas !important;
   }
 }
-sbb-form-field:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+:is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
   color: var(--sbb-color-granite);
   -webkit-text-fill-color: var(--sbb-color-granite);
 }
-sbb-form-field :where(select) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(select) {
   vertical-align: middle;
 }
-sbb-form-field :where(select, sbb-select) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(select, sbb-select) {
   padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
 }
-sbb-form-field[size=s] :where(input, sbb-date-input, sbb-time-input) {
+:is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
   height: calc(var(--sbb-form-field-input-text-size) * 1.25);
   line-height: 1 !important;
   margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-body-text) - 1.25));
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1269,44 +1283,44 @@ sbb-form-field :where(textarea) {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
   position: relative;
   resize: none;
   white-space: break-spaces;
   overflow-y: auto;
   min-height: calc(var(--sbb-typo-line-height-body-text) * 1em);
 }
-sbb-form-field[size=l] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
   padding-block-end: 0.34375rem;
 }
-sbb-form-field[negative] :where(textarea) {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1315,52 +1329,52 @@ sbb-form-field[negative] :where(textarea) {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar {
   width: var(--sbb-scrollbar-width);
   height: var(--sbb-scrollbar-width);
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb {
   background-color: var(--sbb-scrollbar-color, currentcolor);
   border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
   border-radius: var(--sbb-border-radius-4x);
   background-clip: padding-box;
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-thumb:hover {
   background-color: var(--sbb-scrollbar-color-hover, currentcolor);
   border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
 }
-sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
+:is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field[negative] :where(textarea) {
+  :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
     scrollbar-width: var(--sbb-scrollbar-width-firefox);
     scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
   }
 }
-sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted), [state--interacted]):invalid,
+:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
+:is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
-.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
+.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
   --sbb-form-field-border-color: var(--sbb-color-red125);
   --sbb-form-field-text-color: var(--sbb-color-red125);
 }
-sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted), [state--interacted]):invalid,
+:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
+:is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
-.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid))[negative] {
+.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
   --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
   --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
 }
 @media (forced-colors: active) {
-  sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-  :is(:state(interacted), [state--interacted]):invalid,
+  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
+  :is(:state(interacted),[state--interacted]):invalid,
   .ng-touched.ng-invalid,
-  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
+  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
     --sbb-form-field-border-color: LinkText !important;
     --sbb-form-field-text-color: LinkText !important;
   }
@@ -1620,11 +1634,11 @@ sbb-toggle:has(:focus-visible) {
 sbb-dialog[negative] sbb-dialog-actions {
   --sbb-dialog-actions-border-color: var(--sbb-color-iron);
 }
-sbb-dialog:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
   --sbb-dialog-actions-border-color: transparent;
   box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color);
 }
-sbb-dialog[negative]:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
   box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-negative-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
 }