@sbb-esta/lyne-elements 2.3.0 → 2.5.0

package/core/styles/core.scss

@@ -75,7 +75,9 @@ sbb-form-field {
     -webkit-text-fill-color: var(--sbb-color-granite);
   }
 
-  &[floating-label] :where(input, textarea)::placeholder {
+  &[floating-label] :where(input, textarea)::placeholder,
+  // This covers the placeholder of the sbb-date-input
+  &[floating-label] sbb-date-input::after {
     color: transparent;
     -webkit-text-fill-color: transparent;
 
@@ -325,3 +327,84 @@ sbb-train-formation[view='top'] sbb-train-wagon {
   --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
+
+// Skip animation for the container, content and sidebars when a sidebar requests it
+// (during initialization or if animation is disabled, but only during transition)
+sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+// Controls the start margin of the sbb-sidebar-content.
+// Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position start, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar:not([position='end']):is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar:not([position='end'])))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+// Controls the end margin of the sbb-sidebar-content.
+// Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position end, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar[position='end']:is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar[position='end']))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+// Toggles visibility of backdrop if there is an affected sidebar inside the container.
+sbb-sidebar-container:has(
+    > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
+        [data-state='opening'],
+        [data-state='opened']
+      )
+  ) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+// Move the current-page-border to the right side if the sidebar is right positioned
+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;
+}
+
+// Set the border radius at the left top side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+// If there is no close button, avoid reserving any space for the button in the sidebar title
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+// If there is a title, remove top spacing for the content
+sbb-sidebar:has(sbb-sidebar-title) {
+  --sbb-sidebar__padding-block-start: 0;
+}
+
+// Move container below header
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}

package/core/styles/mixins/link.scss

@@ -30,6 +30,20 @@
   --sbb-link-color-active: var(--sbb-color-silver);
 }
 
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active {
+  --sbb-link-color-normal: var(--sbb-color-black);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active-negative {
+  --sbb-link-color-normal: var(--sbb-color-cement);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
 @mixin link-variables {
   @include link-common-variables;
 

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -92,11 +92,13 @@ $sbb-color-milk: #f6f6f6;
 $sbb-color-red: #eb0000;
 $sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
 $sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+$sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
 $sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
 $sbb-color-red-mode-dark: #ff3838;
 $sbb-color-red125: #c60018;
 $sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
 $sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+$sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
 $sbb-color-red150: #a20013;
 $sbb-color-royal: #06348b;
 $sbb-color-royal125: #032668;
@@ -108,6 +110,7 @@ $sbb-color-white-alpha-30: rgba(255, 255, 255, 0.3);
 $sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
 $sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
 $sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+$sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
 $sbb-color-sky: #0079c7;
 $sbb-color-night: #143a85;
 $sbb-color-violet: #6f2282;

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Oct 2024 06:34:22 GMT
+ * Generated on Wed, 19 Mar 2025 15:25:09 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -144,11 +144,13 @@
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
   --sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
   --sbb-color-royal125: #032668;
@@ -160,6 +162,7 @@
   --sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
   --sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0079c7;
   --sbb-color-night: #143a85;
   --sbb-color-violet: #6f2282;

package/core/testing/mocha-extensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mocha-extensions.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/mocha-extensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,UAAU,cACV,OAAO,SACX,MAAM,MACT,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,KACxB,KAAK,GAAG,IAIV,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,cAAe,OAAO,SAAS,MAAM,OAAO,IAAI,KAAG,IAAI,GAAG,IAI5E,CAAC"}
+{"version":3,"file":"mocha-extensions.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/mocha-extensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,UAAU,GACrB,WAAW,OAAO,EAClB,OAAO,MAAM,EACb,IAAI,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,KACxB,KAAK,GAAG,IAIV,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,WAAW,OAAO,EAAE,OAAO,MAAM,EAAE,KAAK,IAAI,KAAG,IAAI,GAAG,IAI5E,CAAC"}

package/core/testing/wait-for-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-render.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,YACnB,OAAO,KACf,OAAO,IAAI,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAE5D,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,WAAW,GAAG,gBAAgB,yCAElC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,KACnB,OAAO,CAAC,CAAC,CAeX,CAAC"}
+{"version":3,"file":"wait-for-render.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,SAAS,OAAO,KACf,OAAO,IAAI,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAE5D,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,WAAW,GAAG,gBAAgB,GAAG,WAAW,GAAG,gBAAgB,EAEzE,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,KACnB,OAAO,CAAC,CAAC,CAeX,CAAC"}

package/core.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 21 Oct 2024 06:34:22 GMT
+ * Generated on Wed, 19 Mar 2025 15:25:09 GMT
  */
 *,
 ::before,
@@ -149,11 +149,13 @@
   --sbb-color-red: #eb0000;
   --sbb-color-red-alpha-0: rgba(235, 0, 0, 0);
   --sbb-color-red-alpha-20: rgba(235, 0, 0, 0.2);
+  --sbb-color-red-alpha-60: rgba(235, 0, 0, 0.6);
   --sbb-color-red-alpha-90: rgba(235, 0, 0, 0.9);
   --sbb-color-red-mode-dark: #ff3838;
   --sbb-color-red125: #c60018;
   --sbb-color-red125-alpha-0: rgba(198, 0, 24, 0);
   --sbb-color-red125-alpha-20: rgba(198, 0, 24, 0.2);
+  --sbb-color-red125-alpha-60: rgba(198, 0, 0, 0.6);
   --sbb-color-red150: #a20013;
   --sbb-color-royal: #06348b;
   --sbb-color-royal125: #032668;
@@ -165,6 +167,7 @@
   --sbb-color-white-alpha-50: rgba(255, 255, 255, 0.5);
   --sbb-color-white-alpha-60: rgba(255, 255, 255, 0.6);
   --sbb-color-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --sbb-color-white-alpha-80: rgba(255, 255, 255, 0.8);
   --sbb-color-sky: #0079c7;
   --sbb-color-night: #143a85;
   --sbb-color-violet: #6f2282;
@@ -1163,12 +1166,12 @@ sbb-form-field :where(input, textarea):disabled::placeholder {
   color: var(--sbb-color-granite);
   -webkit-text-fill-color: var(--sbb-color-granite);
 }
-sbb-form-field[floating-label] :where(input, textarea)::placeholder {
+sbb-form-field[floating-label] :where(input, textarea)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
   color: transparent;
   -webkit-text-fill-color: transparent;
 }
 @media (forced-colors: active) {
-  sbb-form-field[floating-label] :where(input, textarea)::placeholder {
+  sbb-form-field[floating-label] :where(input, textarea)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
     color: Canvas;
     -webkit-text-fill-color: Canvas;
   }
@@ -1428,4 +1431,51 @@ sbb-train-formation[view=top] sbb-train-wagon {
   --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
   --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+}
+
+sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is([data-state=closing],
+[data-state=closed],
+[mode=over],
+[data-mode-over-forced])),
+:not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is([data-state=closing],
+[data-state=closed],
+[mode=over],
+[data-mode-over-forced])),
+:not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], [data-mode-over-forced]):is([data-state=opening],
+[data-state=opened])) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+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-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+sbb-sidebar:has(sbb-sidebar-title) {
+  --sbb-sidebar__padding-block-start: 0;
+}
+
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
 }