@sbb-esta/lyne-elements-dev 5.10.0-dev.1790760894 → 5.10.0-dev.1790846348

package/standard-theme.css

@@ -1329,7 +1329,6 @@ summary {
   --sbb-download-info-color: var(--sbb-color-granite);
   --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
-  --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
   --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
   --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
@@ -1352,6 +1351,9 @@ summary {
   --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
   --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
   --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
+  --sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
+  --sbb-expansion-panel-header-translate-y-hover: -0.125rem;
+  --sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
   --sbb-file-selector-color: var(--sbb-color-2);
   --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
   --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
@@ -1774,6 +1776,13 @@ summary {
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sbb-table-sort-header-color: var(--sbb-color-2);
+  --sbb-table-sort-header-hover-color: var(--sbb-color-primary125);
+  --sbb-table-sort-header-hover-color: light-dark(
+    var(--sbb-color-primary125),
+    var(--sbb-color-primary85)
+  );
   --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
   --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
   --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
@@ -3276,6 +3285,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
   );
+  --sbb-table-sort-header-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-6x)
+  );
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -3362,6 +3375,8 @@ sbb-table-wrapper[negative] .sbb-table,
   --sbb-table-color: var(--sbb-color-1-negative);
   --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
   --sbb-table-caption-color: var(--sbb-color-cement);
+  --sbb-table-sort-header-color: var(--sbb-color-2-negative);
+  --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
 }
 
 .sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
@@ -3489,6 +3504,153 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
   text-align: right;
 }
 
+.sbb-sort-header {
+  position: relative;
+}
+.sbb-sort-header:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused), .sbb-sort-header:has(.sbb-sort-header-container:focus-visible) {
+  --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
+  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-sort-header:not(.sbb-sort-header-disabled) {
+  cursor: pointer;
+}
+.sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
+  color: var(--sbb-table-sort-header-hover-color);
+}
+
+.sbb-sort-header-sorted {
+  color: var(--sbb-table-sort-header-color);
+}
+
+.sbb-sort-header-container {
+  display: flex;
+  letter-spacing: normal;
+  text-align: left;
+  height: 100%;
+  outline: 0;
+}
+.sbb-sort-header-disabled .sbb-sort-header-container {
+  cursor: default;
+}
+.sbb-table-align-center .sbb-sort-header-container {
+  text-align: center;
+}
+
+.sbb-sort-header-content {
+  flex-shrink: 1;
+  flex-grow: 1;
+}
+
+.sbb-sort-header-position-before {
+  flex-direction: row-reverse;
+}
+
+.sbb-sort-header-arrow {
+  height: var(--sbb-size-icon-ui-small);
+  width: var(--sbb-size-icon-ui-small);
+  min-width: var(--sbb-size-icon-ui-small);
+  position: relative;
+  opacity: 0;
+  animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
+  transition-property: opacity, translate;
+  transition-duration: var(--sbb-table-sort-header-animation-duration);
+  transition-timing-function: var(--sbb-table-sort-header-animation-easing);
+  margin: -0.0625rem -0.5rem -0.0625rem -0.25rem;
+}
+.sbb-sort-header-position-before .sbb-sort-header-arrow {
+  margin: -0.0625rem -0.25rem -0.0625rem -0.0625rem;
+}
+.sbb-sort-header-arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.sbb-sort-header-arrow svg :where(path:nth-child(2)) {
+  transform-origin: center;
+}
+.sbb-sort-header-arrow.no-transition {
+  transition: opacity 0ms, translate 0ms !important;
+}
+.sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
+  opacity: 1;
+}
+.sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.desc-to-hint, .sbb-sort-header-arrow.asc-to-hint {
+  opacity: 0.54;
+}
+.sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.void, .sbb-sort-header-arrow.hint-to-desc, .sbb-sort-header-arrow.active-to-desc, .sbb-sort-header-arrow.hint-to-asc, .sbb-sort-header-arrow.active-to-asc {
+  opacity: 0;
+}
+.sbb-sort-header-arrow.hint, .sbb-sort-header-arrow.active, .sbb-sort-header-arrow.desc-to-active, .sbb-sort-header-arrow.asc-to-active {
+  translate: 0;
+}
+.sbb-sort-header-arrow.desc, .sbb-sort-header-arrow.active-to-desc {
+  translate: 0 25%;
+}
+.sbb-sort-header-arrow.asc, .sbb-sort-header-arrow.active-to-asc {
+  translate: 0 -25%;
+}
+.sbb-sort-header-arrow.desc-to-hint {
+  --sbb-sort-header-animation-name: move-desc-to-hint;
+  translate: 0;
+}
+.sbb-sort-header-arrow.hint-to-desc {
+  --sbb-sort-header-animation-name: move-hint-to-desc;
+  translate: 0 25%;
+}
+.sbb-sort-header-arrow.asc-to-hint {
+  --sbb-sort-header-animation-name: move-asc-to-hint;
+  translate: 0;
+}
+.sbb-sort-header-arrow.hint-to-asc {
+  --sbb-sort-header-animation-name: move-hint-to-asc;
+  translate: 0 -25%;
+}
+
+.sbb-sort-indicator {
+  transition: scale var(--sbb-table-sort-header-animation-duration) var(--sbb-table-sort-header-animation-easing);
+}
+.sbb-sort-indicator.asc, .sbb-sort-indicator.active-asc {
+  scale: 1 -1;
+}
+.sbb-sort-indicator.desc, .sbb-sort-indicator.active-desc {
+  scale: 1 1;
+}
+.sbb-sort-indicator.no-transition {
+  transition: none !important;
+}
+
+@keyframes move-desc-to-hint {
+  from {
+    translate: 0 25%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes move-hint-to-desc {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 0 25%;
+  }
+}
+@keyframes move-asc-to-hint {
+  from {
+    translate: 0 -25%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes move-hint-to-asc {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: 0 -25%;
+  }
+}
 sbb-tab-nav-bar .sbb-tab-amount {
   margin: 0;
   color: var(--sbb-tab-label-amount-color);

package/table/_table.global.scss

@@ -56,6 +56,12 @@ $theme: 'standard' !default;
       ),
       $theme
     )};
+  --sbb-table-sort-header-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sbb-table-sort-header-color: var(--sbb-color-2);
+  --sbb-table-sort-header-hover-color: light-dark(
+    var(--sbb-color-primary125),
+    var(--sbb-color-primary85)
+  );
 }
 
 @mixin rules {
@@ -68,6 +74,10 @@ $theme: 'standard' !default;
       --sbb-disable-animation-duration,
       var(--sbb-animation-duration-6x)
     );
+    --sbb-table-sort-header-animation-duration: var(
+      --sbb-disable-animation-duration,
+      var(--sbb-animation-duration-6x)
+    );
 
     border-spacing: 0;
     caption-side: bottom;
@@ -172,6 +182,8 @@ $theme: 'standard' !default;
     --sbb-table-color: var(--sbb-color-1-negative);
     --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
     --sbb-table-caption-color: var(--sbb-color-cement);
+    --sbb-table-sort-header-color: var(--sbb-color-2-negative);
+    --sbb-table-sort-header-hover-color: var(--sbb-color-primary85);
   }
 
   .sbb-table--striped {
@@ -337,4 +349,221 @@ $theme: 'standard' !default;
   .sbb-table-align-right {
     text-align: right;
   }
+
+  // Sort header classes
+  .sbb-sort-header {
+    position: relative;
+
+    // Usually we could rely on the arrow showing up to be focus indication, but if a header is
+    // active, the arrow will always be shown so the user has no way of telling the difference.
+    &:is(:focus-visible, .cdk-keyboard-focused, .cdk-program-focused),
+    &:has(.sbb-sort-header-container:focus-visible) {
+      --sbb-focus-outline-offset: calc(-1 * var(--sbb-focus-outline-width));
+
+      @include sbb.focus-outline;
+    }
+
+    &:not(.sbb-sort-header-disabled) {
+      cursor: pointer;
+    }
+
+    &:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
+      color: var(--sbb-table-sort-header-hover-color);
+    }
+  }
+
+  .sbb-sort-header-sorted {
+    color: var(--sbb-table-sort-header-color);
+  }
+
+  .sbb-sort-header-container {
+    display: flex;
+    letter-spacing: normal;
+    text-align: left;
+    height: 100%;
+
+    // Needs to be reset since we don't want an outline around the inner
+    // div which is focusable. We have our own alternate focus styling.
+    outline: 0;
+
+    .sbb-sort-header-disabled & {
+      cursor: default;
+    }
+
+    .sbb-table-align-center & {
+      text-align: center;
+    }
+  }
+
+  .sbb-sort-header-content {
+    flex-shrink: 1;
+    flex-grow: 1;
+  }
+
+  .sbb-sort-header-position-before {
+    flex-direction: row-reverse;
+  }
+
+  .sbb-sort-header-arrow {
+    height: var(--sbb-size-icon-ui-small);
+    width: var(--sbb-size-icon-ui-small);
+    min-width: var(--sbb-size-icon-ui-small);
+    position: relative;
+
+    // Start off at 0 since the arrow may become visible while parent are animating.
+    // This will be overwritten when the arrow animations kick in. See #11819.
+    opacity: 0;
+    animation: var(--sbb-sort-header-animation-name) var(--sbb-table-sort-header-animation-duration)
+      var(--sbb-table-sort-header-animation-easing);
+    transition: {
+      property: opacity, translate;
+      duration: var(--sbb-table-sort-header-animation-duration);
+      timing-function: var(--sbb-table-sort-header-animation-easing);
+    }
+
+    margin: #{sbb.px-to-rem-build(-1)} #{sbb.px-to-rem-build(-8)} #{sbb.px-to-rem-build(-1)}
+      #{sbb.px-to-rem-build(-4)};
+
+    .sbb-sort-header-position-before & {
+      margin: #{sbb.px-to-rem-build(-1)} #{sbb.px-to-rem-build(-4)} #{sbb.px-to-rem-build(-1)}
+        #{sbb.px-to-rem-build(-1)};
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+
+      :where(path:nth-child(2)) {
+        transform-origin: center;
+      }
+    }
+
+    &.no-transition {
+      transition:
+        opacity 0ms,
+        translate 0ms !important;
+    }
+
+    &.active,
+    &.desc-to-active,
+    &.asc-to-active {
+      opacity: 1;
+    }
+
+    &.hint,
+    &.desc-to-hint,
+    &.asc-to-hint {
+      opacity: 0.54;
+    }
+
+    &.desc,
+    &.asc,
+    &.void,
+    &.hint-to-desc,
+    &.active-to-desc,
+    &.hint-to-asc,
+    &.active-to-asc {
+      opacity: 0;
+    }
+
+    &.hint,
+    &.active,
+    &.desc-to-active,
+    &.asc-to-active {
+      translate: 0;
+    }
+
+    &.desc,
+    &.active-to-desc {
+      translate: 0 25%;
+    }
+
+    &.asc,
+    &.active-to-asc {
+      translate: 0 -25%;
+    }
+
+    &.desc-to-hint {
+      --sbb-sort-header-animation-name: move-desc-to-hint;
+
+      translate: 0;
+    }
+
+    &.hint-to-desc {
+      --sbb-sort-header-animation-name: move-hint-to-desc;
+
+      translate: 0 25%;
+    }
+
+    &.asc-to-hint {
+      --sbb-sort-header-animation-name: move-asc-to-hint;
+
+      translate: 0;
+    }
+
+    &.hint-to-asc {
+      --sbb-sort-header-animation-name: move-hint-to-asc;
+
+      translate: 0 -25%;
+    }
+  }
+
+  .sbb-sort-indicator {
+    transition: scale var(--sbb-table-sort-header-animation-duration)
+      var(--sbb-table-sort-header-animation-easing);
+
+    &.asc,
+    &.active-asc {
+      scale: 1 -1;
+    }
+
+    &.desc,
+    &.active-desc {
+      scale: 1 1;
+    }
+
+    &.no-transition {
+      transition: none !important;
+    }
+  }
+
+  @keyframes move-desc-to-hint {
+    from {
+      translate: 0 25%;
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes move-hint-to-desc {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: 0 25%;
+    }
+  }
+
+  @keyframes move-asc-to-hint {
+    from {
+      translate: 0 -25%;
+    }
+
+    to {
+      translate: 0 0;
+    }
+  }
+
+  @keyframes move-hint-to-asc {
+    from {
+      translate: 0 0;
+    }
+
+    to {
+      translate: 0 -25%;
+    }
+  }
 }