@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/standard-theme.css

@@ -1224,6 +1224,9 @@ summary {
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
 }
+:root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+  --sbb-focus-outline-style: none;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
@@ -1268,21 +1271,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;
@@ -1291,34 +1332,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;
@@ -1327,29 +1378,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);
   }
@@ -1432,7 +1483,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%;
@@ -1440,7 +1491,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;
@@ -1449,14 +1500,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);
 }
 
@@ -1473,22 +1524,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;
@@ -1496,16 +1547,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%;
@@ -1586,6 +1637,14 @@ 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;
+}
+
 sub {
   bottom: -0.36em;
 }
@@ -1660,12 +1719,12 @@ sup {
 
 .sbb-focus-outline:focus-visible {
   outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 
 .sbb-focus-outline-dark:focus-visible {
   outline-offset: var(--sbb-focus-outline-offset);
-  outline: var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }
 
@@ -1723,7 +1782,7 @@ sup {
   grid-auto-rows: auto;
   margin: 0;
 }
-.sbb-figure :is(img, sbb-image, .sbb-image) {
+.sbb-figure :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
   grid-row: 1;
   grid-column: 1;
   width: 100%;
@@ -2202,10 +2261,10 @@ sup {
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd),
-.sbb-table-m tbody tr:nth-child(odd),
-.sbb-table-s tbody tr:nth-child(odd),
-.sbb-table-xs tbody tr:nth-child(odd) {
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
   background-color: var(--sbb-table-row-striped-color);
 }
 .sbb-table,
@@ -2220,14 +2279,38 @@ sup {
   --sbb-table-color: inherit;
   --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);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
 }
+.sbb-table thead > tr:last-of-type > th,
+.sbb-table-m thead > tr:last-of-type > th,
+.sbb-table-s thead > tr:last-of-type > th,
+.sbb-table-xs thead > tr:last-of-type > th {
+  border-bottom: var(--sbb-table-border);
+}
+.sbb-table thead > tr:first-of-type > th,
+.sbb-table-m thead > tr:first-of-type > th,
+.sbb-table-s thead > tr:first-of-type > th,
+.sbb-table-xs thead > tr:first-of-type > th {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:first-of-type > th:first-of-type,
+.sbb-table-m thead > tr:first-of-type > th:first-of-type,
+.sbb-table-s thead > tr:first-of-type > th:first-of-type,
+.sbb-table-xs thead > tr:first-of-type > th:first-of-type {
+  border-start-start-radius: var(--sbb-table-border-radius);
+}
+.sbb-table thead > tr:first-of-type > th:last-of-type,
+.sbb-table-m thead > tr:first-of-type > th:last-of-type,
+.sbb-table-s thead > tr:first-of-type > th:last-of-type,
+.sbb-table-xs thead > tr:first-of-type > th:last-of-type {
+  border-start-end-radius: var(--sbb-table-border-radius);
+}
 .sbb-table thead > tr > th,
 .sbb-table-m thead > tr > th,
 .sbb-table-s thead > tr > th,
@@ -2239,23 +2322,17 @@ sup {
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: 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;
 }
-.sbb-table thead > tr > th:last-of-type,
-.sbb-table-m thead > tr > th:last-of-type,
-.sbb-table-s thead > tr > th:last-of-type,
-.sbb-table-xs thead > tr > th:last-of-type {
-  border-right: none;
-}
-.sbb-table tbody > tr:first-of-type td,
-.sbb-table-m tbody > tr:first-of-type td,
-.sbb-table-s tbody > tr:first-of-type td,
-.sbb-table-xs tbody > tr:first-of-type td {
-  border-top: none;
+.sbb-table thead > tr > th:first-of-type,
+.sbb-table-m thead > tr > th:first-of-type,
+.sbb-table-s thead > tr > th:first-of-type,
+.sbb-table-xs thead > tr > th:first-of-type {
+  border-inline-start: var(--sbb-table-border);
 }
 .sbb-table tbody > tr > td,
 .sbb-table-m tbody > tr > td,
@@ -2267,16 +2344,29 @@ sup {
   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);
-  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);
 }
-.sbb-table tbody > tr > td:last-of-type,
-.sbb-table-m tbody > tr > td:last-of-type,
-.sbb-table-s tbody > tr > td:last-of-type,
-.sbb-table-xs tbody > tr > td:last-of-type {
-  border-right: none;
+.sbb-table tbody > tr > td:first-of-type,
+.sbb-table-m tbody > tr > td:first-of-type,
+.sbb-table-s tbody > tr > td:first-of-type,
+.sbb-table-xs tbody > tr > td:first-of-type {
+  border-inline-start: var(--sbb-table-border);
+}
+.sbb-table tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-m tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-s tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-xs tbody > tr:last-of-type > td:first-of-type {
+  border-end-start-radius: var(--sbb-table-border-radius);
+}
+.sbb-table tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-m tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-s tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-xs tbody > tr:last-of-type > td:last-of-type {
+  border-end-end-radius: var(--sbb-table-border-radius);
 }
 .sbb-table caption,
 .sbb-table-m caption,
@@ -2339,12 +2429,12 @@ sbb-table-wrapper[negative] .sbb-table,
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
-.sbb-table--striped tbody tr:nth-child(odd) {
+.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
   background-color: var(--sbb-table-row-striped-color);
 }
 
-.sbb-table--unstriped tbody tr:nth-child(odd) {
-  background-color: unset;
+.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-background-color);
 }
 
 .sbb-table--theme-iron {
@@ -2357,6 +2447,10 @@ sbb-table-wrapper[negative] .sbb-table,
   --sbb-table-cell-color: var(--sbb-color-cloud);
 }
 
+.sbb-table-header-row:last-of-type > th {
+  border-bottom: var(--sbb-table-border);
+}
+
 .sbb-table-header-cell {
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
   font-family: var(--sbb-typo-font-family);
@@ -2365,19 +2459,12 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: 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;
 }
-.sbb-table-header-cell:last-of-type {
-  border-right: none;
-}
-
-.sbb-table-data-row:first-of-type td {
-  border-top: none;
-}
 
 .sbb-table-row--striped {
   background-color: var(--sbb-table-row-striped-color);
@@ -2390,14 +2477,12 @@ sbb-table-wrapper[negative] .sbb-table,
   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);
-  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);
 }
-.sbb-table-data-cell:last-of-type {
-  border-right: none;
-}
 
 .sbb-table-caption {
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
@@ -2411,6 +2496,48 @@ sbb-table-wrapper[negative] .sbb-table,
   text-align: left;
 }
 
+.sbb-table-filter {
+  padding-block-start: 0 !important;
+}
+
+.sbb-table-sticky {
+  position: sticky !important;
+}
+
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: "";
+  transition-timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+  transition-duration: var(--sbb-table-sticky-shadow-transition-duration);
+  transition-property: visibility, opacity;
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left {
+  border-inline-end: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: unset;
+  inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+}
+
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+  inset-inline-end: unset;
+}
+
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);

package/status/status.d.ts

@@ -8,6 +8,10 @@ declare const SbbStatusElement_base: import('../core/mixins.js').AbstractConstru
  * @slot - Use the unnamed slot to add content to the status message.
  * @slot title - Use this to provide a title for the status (optional).
  * @slot icon - Use this slot to override the default status icon.
+ * @cssprop [--sbb-status-color=var(--sbb-color-iron)] - Specify a custom color,
+ * which will override the predefined color for any type.
+ * @cssprop [--sbb-status-text-color=var(--sbb-status-color)] - Specify a custom text color,
+ * which will override the predefined color for any type. Only valid for a status without a title.
  */
 export declare class SbbStatusElement extends SbbStatusElement_base {
     static styles: CSSResultGroup;

package/status/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;GAMG;AACH,qBAGM,gBAAiB,SAAQ,qBAA4B;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;;;;;GAUG;AACH,qBAGM,gBAAiB,SAAQ,qBAA4B;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/status/status.js

@@ -0,0 +1,89 @@
+var I = (t) => {
+  throw TypeError(t);
+};
+var w = (t, e, a) => e.has(t) || I("Cannot " + a);
+var m = (t, e, a) => (w(t, e, "read from private field"), a ? a.call(t) : e.get(t)), _ = (t, e, a) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, a), r = (t, e, a, o) => (w(t, e, "write to private field"), o ? o.call(t, a) : e.set(t, a), a);
+import { __esDecorate as v, __runInitializers as n } from "tslib";
+import { css as T, LitElement as $, html as E } from "lit";
+import { customElement as D, property as h } from "lit/decorators.js";
+import { slotState as j, forceType as M, omitEmptyConverter as N } from "../core/decorators.js";
+import { SbbIconNameMixin as O } from "../icon.js";
+import "../title.js";
+const P = T`*,:before,:after{box-sizing:border-box}:host{--sbb-status-color: var(--sbb-color-iron);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);--_sbb-status-icon-font-size: var(--sbb-font-size-text-s);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-red125)}:host([type=success]){--sbb-status-color: var(--sbb-color-green)}:host([type=warning]){--sbb-status-color: var(--sbb-color-charcoal)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-red125)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-smoke);--sbb-status-text-color: var(--sbb-color-charcoal)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}:host(:is([data-slot-names~=title],[title-content])){--sbb-status-gap: var(--sbb-spacing-responsive-xxxs);--_sbb-status-text-color-override: var(--sbb-color-granite);--_sbb-status-icon-font-size: var(--sbb-font-size-title-5)}.sbb-status{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;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);display:flex;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-icon-font-size) * var(--sbb-typo-line-height-body-text) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__title{margin-block:0}:host(:not(:is([data-slot-names~=title],[title-content]))) .sbb-status__title{display:none}.sbb-status__content-slot{display:inline;margin:0;padding:0}`;
+let Q = (() => {
+  var c, b, p, i;
+  let t = [D("sbb-status"), j()], e, a = [], o, d = O($), y, f = [], g = [], x, z = [], k = [], C, L = [], S = [];
+  return i = class extends d {
+    constructor() {
+      super(...arguments);
+      _(this, c);
+      _(this, b);
+      _(this, p);
+      this._statusTypes = /* @__PURE__ */ new Map([
+        ["info", "circle-information-small"],
+        ["success", "circle-tick-small"],
+        ["warning", "circle-exclamation-point-small"],
+        ["error", "circle-cross-small"],
+        ["pending", "circle-three-dots-small"],
+        ["incomplete", "circle-dotted-part-x-small"],
+        ["not-started", "circle-dotted-small"],
+        ["in-progress", "circle-dotted-part-small"]
+      ]), r(this, c, n(this, f, "info")), r(this, b, (n(this, g), n(this, z, ""))), r(this, p, (n(this, k), n(this, L, "3"))), n(this, S);
+    }
+    /** The type of the status. */
+    get type() {
+      return m(this, c);
+    }
+    set type(l) {
+      r(this, c, l);
+    }
+    /** Content of title. */
+    get titleContent() {
+      return m(this, b);
+    }
+    set titleContent(l) {
+      r(this, b, l);
+    }
+    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
+    get titleLevel() {
+      return m(this, p);
+    }
+    set titleLevel(l) {
+      r(this, p, l);
+    }
+    renderIconSlot() {
+      return E`
+      <slot name="icon">
+        <sbb-icon name=${this.iconName || this._statusTypes.get(this.type)}></sbb-icon>
+      </slot>
+    `;
+    }
+    render() {
+      return E`
+      <div class="sbb-status">
+        <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
+        <span class="sbb-status__content">
+          <sbb-title class="sbb-status__title" level=${this.titleLevel} visual-level="5">
+            <slot name="title">${this.titleContent}</slot>
+          </sbb-title>
+          <p class="sbb-status__content-slot">
+            <slot></slot>
+          </p>
+        </span>
+      </div>
+    `;
+    }
+  }, c = new WeakMap(), b = new WeakMap(), p = new WeakMap(), o = i, (() => {
+    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+    y = [h({ reflect: !0 })], x = [M(), h({ attribute: "title-content", reflect: !0, converter: N })], C = [h({ attribute: "title-level" })], v(i, null, y, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (s) => "type" in s, get: (s) => s.type, set: (s, u) => {
+      s.type = u;
+    } }, metadata: l }, f, g), v(i, null, x, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, u) => {
+      s.titleContent = u;
+    } }, metadata: l }, z, k), v(i, null, C, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, u) => {
+      s.titleLevel = u;
+    } }, metadata: l }, L, S), v(null, e = { value: o }, t, { kind: "class", name: o.name, metadata: l }, null, a), o = e.value, l && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
+  })(), i.styles = P, n(o, a), o;
+})();
+export {
+  Q as SbbStatusElement
+};

package/status.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './status/status.js';
 //# sourceMappingURL=status.d.ts.map

package/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/elements/status.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/elements/status.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC"}