@sbb-esta/lyne-elements-dev 4.9.0-dev.1774354777 → 4.9.0-dev.1774426040

package/off-brand-theme.css

@@ -1736,6 +1736,27 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-slider-line-height: 0.25rem;
+  --sbb-slider-knob-size: 1.75rem;
+  --sbb-slider-knob-size-active: 1.9375rem;
+  --sbb-slider-knob-border-size: 0.1875rem;
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: 25rem;
+  --sbb-slider-min-width: 9.375rem;
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: 0.125rem;
   --sbb-status-color: var(--sbb-color-4);
   --sbb-status-gap: var(--sbb-spacing-fixed-1x);
   --sbb-status-font-size: var(--sbb-text-font-size-s);
@@ -1813,6 +1834,8 @@ slot[name=error]::slotted(*) {
     --sbb-signet-background-color: ButtonText !important;
     --sbb-signet-panel-color: ButtonText !important;
     --sbb-signet-icon-color: Canvas !important;
+    --sbb-slider-selected-line-color: Highlight;
+    --sbb-slider-line-color: CanvasText;
   }
 }
 :root {
@@ -3172,42 +3195,25 @@ sup {
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 }
-.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-block-end: 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 > th,
-.sbb-table-m thead > tr > th,
-.sbb-table-s thead > tr > th,
-.sbb-table-xs thead > tr > th {
+.sbb-table th,
+.sbb-table-m th,
+.sbb-table-s th,
+.sbb-table-xs th {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
-.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,
-.sbb-table-s tbody > tr > td,
-.sbb-table-xs tbody > tr > td {
+.sbb-table td,
+.sbb-table-m td,
+.sbb-table-s td,
+.sbb-table-xs td {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
@@ -3216,12 +3222,33 @@ sup {
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.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 {
+.sbb-table :is(th, td).sbb-table-group-with-next,
+.sbb-table-m :is(th, td).sbb-table-group-with-next,
+.sbb-table-s :is(th, td).sbb-table-group-with-next,
+.sbb-table-xs :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+.sbb-table :is(th, td):first-child,
+.sbb-table-m :is(th, td):first-child,
+.sbb-table-s :is(th, td):first-child,
+.sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,
@@ -3234,12 +3261,6 @@ sup {
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
-.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
-  border-block-start: var(--sbb-table-border);
-}
 
 .sbb-table-m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3325,10 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
 .sbb-table-row--striped {
@@ -3385,6 +3406,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+.sbb-table-align-start {
+  text-align: start;
+}
+
+.sbb-table-align-center {
+  text-align: center;
+}
+
+.sbb-table-align-end {
+  text-align: end;
+}
+
+.sbb-table-align-justify {
+  text-align: justify;
+}
+
+.sbb-table-align-left {
+  text-align: left;
+}
+
+.sbb-table-align-right {
+  text-align: right;
+}
+
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "4.9.0-dev.1774354777",
+  "version": "4.9.0-dev.1774426040",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/4be8dcd3d5f2613b8aa10fcdd898ec18ea9b4584"
+    "https://github.com/sbb-design-systems/lyne-components/commit/3fb659bc12e7589aeff103558c2db8a063501e06"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1736,6 +1736,27 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-slider-line-height: 0.25rem;
+  --sbb-slider-knob-size: 1.75rem;
+  --sbb-slider-knob-size-active: 1.9375rem;
+  --sbb-slider-knob-border-size: 0.1875rem;
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: 25rem;
+  --sbb-slider-min-width: 9.375rem;
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: 0.125rem;
   --sbb-status-color: var(--sbb-color-4);
   --sbb-status-gap: var(--sbb-spacing-fixed-1x);
   --sbb-status-font-size: var(--sbb-text-font-size-s);
@@ -1813,6 +1834,8 @@ slot[name=error]::slotted(*) {
     --sbb-signet-background-color: ButtonText !important;
     --sbb-signet-panel-color: ButtonText !important;
     --sbb-signet-icon-color: Canvas !important;
+    --sbb-slider-selected-line-color: Highlight;
+    --sbb-slider-line-color: CanvasText;
   }
 }
 :root {
@@ -3172,42 +3195,25 @@ sup {
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 }
-.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-block-end: 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 > th,
-.sbb-table-m thead > tr > th,
-.sbb-table-s thead > tr > th,
-.sbb-table-xs thead > tr > th {
+.sbb-table th,
+.sbb-table-m th,
+.sbb-table-s th,
+.sbb-table-xs th {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
-.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,
-.sbb-table-s tbody > tr > td,
-.sbb-table-xs tbody > tr > td {
+.sbb-table td,
+.sbb-table-m td,
+.sbb-table-s td,
+.sbb-table-xs td {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
@@ -3216,12 +3222,33 @@ sup {
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.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 {
+.sbb-table :is(th, td).sbb-table-group-with-next,
+.sbb-table-m :is(th, td).sbb-table-group-with-next,
+.sbb-table-s :is(th, td).sbb-table-group-with-next,
+.sbb-table-xs :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+.sbb-table :is(th, td):first-child,
+.sbb-table-m :is(th, td):first-child,
+.sbb-table-s :is(th, td):first-child,
+.sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,
@@ -3234,12 +3261,6 @@ sup {
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
-.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
-  border-block-start: var(--sbb-table-border);
-}
 
 .sbb-table-m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3325,10 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
 .sbb-table-row--striped {
@@ -3385,6 +3406,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+.sbb-table-align-start {
+  text-align: start;
+}
+
+.sbb-table-align-center {
+  text-align: center;
+}
+
+.sbb-table-align-end {
+  text-align: end;
+}
+
+.sbb-table-align-justify {
+  text-align: justify;
+}
+
+.sbb-table-align-left {
+  text-align: left;
+}
+
+.sbb-table-align-right {
+  text-align: right;
+}
+
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;

package/slider/slider.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../slider.component-MdvM78XU.js";
+import { t as e } from "../slider.component-D-yXlqJY.js";
 export { e as SbbSliderElement };

package/{slider.component-MdvM78XU.js → slider.component-D-yXlqJY.js}

@@ -8,7 +8,7 @@ import { boxSizingStyles as f } from "./core/styles.js";
 import "./icon.js";
 import { ref as p } from "lit/directives/ref.js";
 //#region src/elements/slider/slider.scss?lit&inline
-var m = n`@charset "UTF-8";:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-background-color-1);--sbb-slider-knob-border-color: var(--sbb-color-primary);--sbb-slider-icon-color: var(--sbb-color-1);--sbb-slider-selected-line-color: var(--sbb-color-primary);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-selected-line-disabled-color: light-dark( var(--sbb-color-smoke), var(--sbb-color-cement) );--sbb-slider-line-color: var(--sbb-border-color-5);--sbb-slider-line-disabled-color: var(--sbb-color-graphite);--sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite))}@media(forced-colors:active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-icon-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-slider-knob-border-color: var(--sbb-border-color-5);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-5);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media(forced-colors:active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;inset:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-box-shadow-level-5-hard);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`, h = (() => {
+var m = n`@charset "UTF-8";:host{--_sbb-slider-value-fraction: 0;outline:none!important;display:inline-block;min-width:var(--sbb-slider-min-width);width:min(var(--sbb-slider-width),100%)}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-icon-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-slider-knob-border-color: var(--sbb-border-color-5);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-5);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media(forced-colors:active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-slider-gap);padding-block:var(--sbb-slider-padding-block);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;inset:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--_sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-box-shadow-level-5-hard);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--_sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--_sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`, h = (() => {
 	let n = [c({ tabindex: "0" })], h, g = [], _, v = l(d(u(o))), y = [], b, x, S, C, w, T = [], E = [], D, O = [], k = [];
 	var A = class extends v {
 		static {
@@ -167,7 +167,7 @@ var m = n`@charset "UTF-8";:host{outline:none!important;display:inline-block;min
 			super(), this._value = (t(this, y), null), this._min = "0", this._max = "100", this.#e = t(this, T, ""), this.#t = (t(this, E), t(this, O, "")), this._rangeInput = t(this, k), this.addEventListener?.("keydown", (e) => this._handleKeydown(e));
 		}
 		willUpdate(e) {
-			super.willUpdate(e), e.has("readOnly") && (this.internals.ariaReadOnly = (!!this.readOnly).toString()), this.style?.setProperty("--sbb-slider-value-fraction", this._valueFraction().toString());
+			super.willUpdate(e), e.has("readOnly") && (this.internals.ariaReadOnly = (!!this.readOnly).toString()), this.style?.setProperty("--_sbb-slider-value-fraction", this._valueFraction().toString());
 		}
 		formResetCallback() {
 			this.value = this.getAttribute("value") ?? this._defaultValue();

package/slider.js

@@ -1,4 +1,4 @@
-import { t as e } from "./slider.component-MdvM78XU.js";
+import { t as e } from "./slider.component-D-yXlqJY.js";
 import "./slider.pure.js";
 //#region src/elements/slider.ts
 e.define();

package/slider.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./slider.component-MdvM78XU.js";
+import { t as e } from "./slider.component-D-yXlqJY.js";
 export { e as SbbSliderElement };

package/standard-theme.css

@@ -1736,6 +1736,27 @@ slot[name=error]::slotted(*) {
   --sbb-signet-panel-color: var(--sbb-color-brand);
   --sbb-signet-icon-color: var(--sbb-color-white);
   --sbb-signet-aspect-ratio: 2 / 1;
+  --sbb-slider-line-height: 0.25rem;
+  --sbb-slider-knob-size: 1.75rem;
+  --sbb-slider-knob-size-active: 1.9375rem;
+  --sbb-slider-knob-border-size: 0.1875rem;
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: 25rem;
+  --sbb-slider-min-width: 9.375rem;
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: 0.125rem;
   --sbb-status-color: var(--sbb-color-4);
   --sbb-status-gap: var(--sbb-spacing-fixed-1x);
   --sbb-status-font-size: var(--sbb-text-font-size-s);
@@ -1813,6 +1834,8 @@ slot[name=error]::slotted(*) {
     --sbb-signet-background-color: ButtonText !important;
     --sbb-signet-panel-color: ButtonText !important;
     --sbb-signet-icon-color: Canvas !important;
+    --sbb-slider-selected-line-color: Highlight;
+    --sbb-slider-line-color: CanvasText;
   }
 }
 :root {
@@ -3172,42 +3195,25 @@ sup {
   caption-side: bottom;
   color: var(--sbb-table-color);
   table-layout: auto;
+  text-align: left;
 }
-.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-block-end: 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 > th,
-.sbb-table-m thead > tr > th,
-.sbb-table-s thead > tr > th,
-.sbb-table-xs thead > tr > th {
+.sbb-table th,
+.sbb-table-m th,
+.sbb-table-s th,
+.sbb-table-xs th {
   font-size: var(--sbb-table-header-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
-.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,
-.sbb-table-s tbody > tr > td,
-.sbb-table-xs tbody > tr > td {
+.sbb-table td,
+.sbb-table-m td,
+.sbb-table-s td,
+.sbb-table-xs td {
   font-size: var(--sbb-table-data-cell-font-size);
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   background-color: var(--sbb-table-background-color);
@@ -3216,12 +3222,33 @@ sup {
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.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 {
+.sbb-table :is(th, td).sbb-table-group-with-next,
+.sbb-table-m :is(th, td).sbb-table-group-with-next,
+.sbb-table-s :is(th, td).sbb-table-group-with-next,
+.sbb-table-xs :is(th, td).sbb-table-group-with-next {
+  border-inline-end: none;
+}
+.sbb-table :is(th, td):first-child,
+.sbb-table-m :is(th, td):first-child,
+.sbb-table-s :is(th, td):first-child,
+.sbb-table-xs :is(th, td):first-child {
   border-inline-start: var(--sbb-table-border);
 }
+.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-s:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-s:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
+.sbb-table-xs:has(thead tr) thead tr:first-of-type > :is(th, td),
+.sbb-table-xs:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td) {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-m thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-s thead > tr:has(+ tr) > :is(th, td),
+.sbb-table-xs thead > tr:has(+ tr) > :is(th, td) {
+  border-block-end: none;
+}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,
@@ -3234,12 +3261,6 @@ sup {
   margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
   text-align: left;
 }
-.sbb-table:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-m:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-s:not(:has(thead tr)) tbody > tr:first-of-type > td,
-.sbb-table-xs:not(:has(thead tr)) tbody > tr:first-of-type > td {
-  border-block-start: var(--sbb-table-border);
-}
 
 .sbb-table-m {
   --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
@@ -3304,10 +3325,10 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-text);
   font-weight: bold;
   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-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
-  text-align: left;
 }
 
 .sbb-table-row--striped {
@@ -3385,6 +3406,30 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
 }
 
+.sbb-table-align-start {
+  text-align: start;
+}
+
+.sbb-table-align-center {
+  text-align: center;
+}
+
+.sbb-table-align-end {
+  text-align: end;
+}
+
+.sbb-table-align-justify {
+  text-align: justify;
+}
+
+.sbb-table-align-left {
+  text-align: left;
+}
+
+.sbb-table-align-right {
+  text-align: right;
+}
+
 .sbb-timetable-form {
   --sbb-timetable-form-content-max-width: 46.25rem;
   position: relative;