@sbb-esta/lyne-elements 2.5.0 → 2.6.0

package/core/styles/mixins/table.scss

@@ -18,9 +18,6 @@
     --sbb-table-caption-color: var(--sbb-color-granite);
     --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
 
-    background-color: var(--sbb-table-background-color);
-    border: var(--sbb-table-border);
-    border-radius: var(--sbb-table-border-radius);
     border-spacing: 0;
     caption-side: bottom;
     color: var(--sbb-table-color);
@@ -28,8 +25,32 @@
   }
 
   thead {
-    & > tr > th {
-      @include table-header-cell;
+    & > tr {
+      @include table-header-row;
+
+      &:first-of-type {
+        & > th {
+          border-block-start: var(--sbb-table-border);
+        }
+
+        // Border radius on top-left corner
+        & > th:first-of-type {
+          border-start-start-radius: var(--sbb-table-border-radius);
+        }
+
+        // Border radius on top-right corner
+        & > th:last-of-type {
+          border-start-end-radius: var(--sbb-table-border-radius);
+        }
+      }
+
+      & > th {
+        @include table-header-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
     }
   }
 
@@ -39,6 +60,22 @@
 
       & > td {
         @include table-data-cell;
+
+        &:first-of-type {
+          border-inline-start: var(--sbb-table-border);
+        }
+      }
+
+      &:last-of-type {
+        // Border radius on bottom-left corner
+        & > td:first-of-type {
+          border-end-start-radius: var(--sbb-table-border-radius);
+        }
+
+        // Border radius on bottom-right corner
+        & > td:last-of-type {
+          border-end-end-radius: var(--sbb-table-border-radius);
+        }
       }
     }
   }
@@ -48,40 +85,36 @@
   }
 }
 
+@mixin table-header-row {
+  // If there is more than one header row, only the last one has the bottom border
+  &:last-of-type > th {
+    border-bottom: var(--sbb-table-border);
+  }
+}
+
 @mixin table-header-cell {
   @include typo.text-xs--bold;
 
-  border-bottom: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
   text-align: left;
-
-  // To avoid double border
-  &:last-of-type {
-    border-right: none;
-  }
 }
 
+// @deprecated No longer used internally.
 @mixin table-data-row {
-  // To avoid double borders
-  &:first-of-type td {
-    border-top: none;
-  }
+  // empty
 }
 
 @mixin table-data-cell {
   @include typo.text-s--regular;
 
-  border-top: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
-
-  // To avoid double border
-  &:last-of-type {
-    border-right: none;
-  }
 }
 
 @mixin table-caption {
@@ -93,15 +126,19 @@
   text-align: left;
 }
 
+@mixin table-filter {
+  padding-block-start: 0 !important;
+}
+
 @mixin table--striped {
-  tbody tr:nth-child(odd) {
+  tbody tr:nth-child(odd) :is(th, td) {
     @include table-row--striped;
   }
 }
 
 @mixin table--unstriped {
-  tbody tr:nth-child(odd) {
-    background-color: unset;
+  tbody tr:nth-child(odd) :is(th, td) {
+    background-color: var(--sbb-table-background-color);
   }
 }
 

package/core/styles/table.scss

@@ -40,6 +40,10 @@ sbb-table-wrapper[negative] .sbb-table,
   }
 }
 
+.sbb-table-header-row {
+  @include table.table-header-row;
+}
+
 .sbb-table-header-cell {
   @include table.table-header-cell;
 }
@@ -60,6 +64,18 @@ sbb-table-wrapper[negative] .sbb-table,
   @include table.table-caption;
 }
 
+.sbb-table-filter {
+  @include table.table-filter;
+}
+
+.sbb-table-sticky {
+  // Note that the table can either set this class or an inline style to make something sticky.
+  // We set the style as `!important` so that we get an identical specificity in both cases
+  // and to avoid cases where user styles have a higher specificity.
+  position: sticky !important;
+}
+
+// TODO: In future, move to the 'sbb-lean' theme
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   @include table.table--s;
 }

package/core/testing/scroll.d.ts

@@ -1,6 +1,7 @@
 /**
  * Can be used in tests where scroll events are not triggered by default.
  * @param options ScrollToOptions
+ * @deprecated Will be removed with next major version
  */
 export declare function mockScrollTo(options: ScrollToOptions): void;
 //# sourceMappingURL=scroll.d.ts.map

package/core/testing/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/scroll.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAM3D"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/scroll.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAM3D"}

package/core/testing/wait-for-image-ready.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAkCf"}
+{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwCf"}

package/core/testing.js

@@ -1,4 +1,4 @@
-import { isSafari as m } from "./dom.js";
+import { isSafari as a } from "./dom.js";
 class p {
   get count() {
     return this._count;
@@ -28,8 +28,8 @@ class p {
     {
       let r, s;
       const n = {
-        promise: new Promise((a, l) => {
-          r = a, s = l;
+        promise: new Promise((l, m) => {
+          r = l, s = m;
         }),
         resolve: r,
         reject: s
@@ -74,11 +74,14 @@ async function _(t, e = 2 * 1e3) {
   const i = t.localName === "sbb-image" ? ((r = t.shadowRoot) == null ? void 0 : r.querySelector(".sbb-image__img")) ?? null : t;
   if (!i)
     throw new Error("img tag not found");
-  t.complete ? await i.decode() : await new Promise((s, o) => {
+  t.complete ? await i.decode().then(() => {
+    if (a && t.localName === "sbb-image")
+      return new Promise((s) => setTimeout(s, 100));
+  }) : await new Promise((s, o) => {
     const n = setTimeout(() => o("image loading timeout"), e);
     t.addEventListener("load", () => {
       clearTimeout(n), i.decode().then(() => {
-        m && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
+        a && t.localName === "sbb-image" ? setTimeout(s, 100) : s();
       });
     }), t.addEventListener("error", () => {
       clearTimeout(n), o("image error");

package/core.css

@@ -1162,21 +1162,59 @@ html {
   opacity: 1;
 }
 
-sbb-form-field :where(input, textarea):disabled::placeholder {
-  color: var(--sbb-color-granite);
-  -webkit-text-fill-color: var(--sbb-color-granite);
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-input) {
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  -webkit-appearance: none;
+  outline: none !important;
+  overflow: var(--sbb-form-field-overflow);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--sbb-form-field-text-color);
+  -webkit-text-fill-color: var(--sbb-form-field-text-color);
+  opacity: 1;
+  background-color: transparent;
+  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-body-text) !important;
 }
-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;
+sbb-form-field :where(input, select, textarea, sbb-select, sbb-date-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] sbb-date-input::after {
+  color: transparent !important;
+  -webkit-text-fill-color: transparent !important;
 }
 @media (forced-colors: active) {
-  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;
+  sbb-form-field[floating-label] :where(input, select, textarea, sbb-select)::placeholder, sbb-form-field[floating-label] sbb-date-input::after {
+    color: Canvas !important;
+    -webkit-text-fill-color: Canvas !important;
   }
 }
-sbb-form-field textarea {
+sbb-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) {
+  vertical-align: middle;
+}
+sbb-form-field :where(select, sbb-select) {
+  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+}
+sbb-form-field :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1185,34 +1223,44 @@ sbb-form-field textarea {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field textarea::-webkit-scrollbar {
+sbb-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 textarea::-webkit-scrollbar-corner {
+sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field textarea::-webkit-scrollbar-thumb {
+sbb-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 textarea::-webkit-scrollbar-thumb:hover {
+sbb-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 textarea::-webkit-scrollbar-button, sbb-form-field textarea::-webkit-scrollbar-corner {
+sbb-form-field :where(textarea)::-webkit-scrollbar-button, sbb-form-field :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field textarea {
+  sbb-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[negative] textarea {
+sbb-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) {
+  padding-block-end: 0.34375rem;
+}
+sbb-form-field[negative] :where(textarea) {
   --sbb-scrollbar-thumb-width: 0.125rem;
   --sbb-scrollbar-thumb-width-hover: 0.25rem;
   --sbb-scrollbar-width-firefox: thin;
@@ -1221,29 +1269,29 @@ sbb-form-field[negative] textarea {
   --sbb-scrollbar-track-color: transparent;
   --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar {
+sbb-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] textarea::-webkit-scrollbar-corner {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
   background-color: var(--sbb-scrollbar-track-color, transparent);
 }
-sbb-form-field[negative] textarea::-webkit-scrollbar-thumb {
+sbb-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] textarea::-webkit-scrollbar-thumb:hover {
+sbb-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] textarea::-webkit-scrollbar-button, sbb-form-field[negative] textarea::-webkit-scrollbar-corner {
+sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-corner {
   display: none;
 }
 @supports not selector(::-webkit-scrollbar) {
-  sbb-form-field[negative] textarea {
+  sbb-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);
   }
@@ -1326,7 +1374,7 @@ img {
 }
 
 sbb-container > [slot=image]:is(sbb-image, img),
-sbb-container > [slot=image] :is(sbb-image, img) {
+sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   border-radius: var(--sbb-container-background-border-radius);
   height: 100%;
@@ -1334,7 +1382,7 @@ sbb-container > [slot=image] :is(sbb-image, img) {
 }
 
 sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
-sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
+sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: auto;
   --sbb-image-object-fit: cover;
   border-radius: 0;
@@ -1343,14 +1391,14 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img) {
 }
 
 sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
-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) {
+sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: var(--sbb-message-image-border-radius);
 }
 
@@ -1367,22 +1415,22 @@ sbb-message > [slot=image] :is(sbb-image, img) {
     --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
   }
 }
-:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img) {
+:is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   will-change: filter;
   filter: brightness(var(--sbb-teaser-image-brightness, 1));
   transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
 }
 
-:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img) {
+:is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   border-radius: 0;
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 16 / 9;
 }
-:is(sbb-teaser-product, sbb-teaser-product-static) img {
+:is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
   place-self: stretch;
 }
 
-sbb-teaser :is(sbb-image, img) {
+sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-object-fit: cover;
   --sbb-image-aspect-ratio: 4 / 3;
   transition-property: filter, scale;
@@ -1390,16 +1438,16 @@ sbb-teaser :is(sbb-image, img) {
   scale: var(--sbb-teaser-scale, 1);
 }
 
-:is(sbb-teaser-hero) :is(sbb-image, img) {
+sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
   --sbb-image-aspect-ratio: 1 / 1;
   border-radius: 0;
 }
 @media (min-width: calc(37.5rem)) {
-  :is(sbb-teaser-hero) :is(sbb-image, img) {
+  sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
     --sbb-image-aspect-ratio: 16 / 9;
   }
 }
-:is(sbb-teaser-hero) img {
+sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
   display: block;
   align-self: stretch;
   width: 100%;
@@ -1478,4 +1526,12 @@ sbb-sidebar:has(sbb-sidebar-title) {
 
 sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
   margin-block-start: var(--sbb-header-height);
+}
+
+.sbb-select-trigger {
+  width: 100%;
+  height: var(--sbb-size-element-xs);
+}
+sbb-form-field .sbb-select-trigger {
+  top: 0;
 }