@sbb-esta/lyne-elements 4.0.5 → 4.2.0

package/core.css

@@ -148,6 +148,146 @@
   flex: var(--sbb-radio-button-group-radio-button-flex);
 }
 
+:host {
+  --sbb-tab-label-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-tab-label-outline-border-radius-internal: calc(
+    var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)
+  );
+}
+
+:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {
+  --sbb-tab-label-height: var(--sbb-size-element-xs);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
+}
+
+:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
+}
+
+:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);
+}
+
+:host(sbb-tab-label),
+:host(sbb-tab-nav-bar) ::slotted(a) {
+  pointer-events: var(--sbb-tab-label-pointer-events, unset);
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-label),
+  :host(sbb-tab-nav-bar) ::slotted(a) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a),
+:host(sbb-tab-label) .sbb-tab-label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--sbb-tab-label-gap);
+  color: var(--sbb-tab-label-color);
+  margin: 0;
+  padding-inline: var(--sbb-tab-label-inline-padding);
+  min-height: var(--sbb-tab-label-height);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+  font-size: var(--sbb-tab-label-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: var(--sbb-tab-label-font-weight);
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+:host(sbb-tab-nav-bar) ::slotted(a)::after,
+:host(sbb-tab-label) .sbb-tab-label::after {
+  position: absolute;
+  content: "";
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: var(--sbb-tab-label-marker-thickness);
+  background-color: var(--sbb-tab-label-color);
+  scale: var(--sbb-tab-label-marker-scale, 0);
+  transition-duration: var(--sbb-tab-label-animation-duration);
+  transition-timing-function: var(--sbb-tab-label-animation-easing);
+  transition-property: scale, background-color;
+}
+
+:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],
+:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {
+  position: relative;
+}
+:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,
+:host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  width: var(--sbb-tab-group-width);
+  height: var(--sbb-border-width-1x);
+  background-color: var(--sbb-tab-label-line-color);
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
+:host(sbb-tab-label[disabled]) {
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-text-decoration: line-through;
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
+  :host(sbb-tab-label[disabled]) {
+    --sbb-tab-label-color: GrayText;
+    --sbb-tab-label-amount-color: GrayText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
+:host(sbb-tab-label[active]:not([disabled])) {
+  --sbb-tab-label-color: var(--sbb-color-3);
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-marker-scale: 1;
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
+  :host(sbb-tab-label[active]:not([disabled])) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),
+  :host(sbb-tab-label:hover:not([disabled])) {
+    --sbb-tab-label-marker-scale: 1;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
+:host(sbb-tab-label:active) {
+  --sbb-tab-label-color: var(--sbb-color-3);
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
+  :host(sbb-tab-label:active) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),
+:host(sbb-tab-label:focus-visible) .sbb-tab-label {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  border-radius: var(--sbb-tab-label-outline-border-radius-internal);
+}
+
 *,
 ::before,
 ::after {
@@ -1106,9 +1246,9 @@
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-style: solid;
-  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
-  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
 }
 :root.sbb-lean {
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
@@ -1194,6 +1334,25 @@
     --sbb-selection-panel-input-padding-block-m
   );
   --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
+  --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);
+  --sbb-tab-group-content-gap-default: var(--sbb-tab-group-content-gap-size-l);
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-color: var(--sbb-color-granite);
+  --sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
+  --sbb-tab-label-marker-thickness: var(--sbb-border-width-3x);
+  --sbb-tab-label-text-decoration: none;
+  --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
+  --sbb-tab-label-font-weight: bold;
+  --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
+  --sbb-tab-label-amount-color: var(--sbb-color-metal);
+  --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
+  --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
   --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
   --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
@@ -1364,6 +1523,13 @@
   font-display: swap;
   font-weight: 300;
 }
+sbb-tab-nav-bar .sbb-tab-amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+
 .sbb-dark {
   color-scheme: dark;
 }
@@ -1407,7 +1573,7 @@ html {
   border: none;
   background-color: transparent;
   padding: 0;
-  -webkit-appearance: none;
+  appearance: none;
   outline: none !important;
   overflow: var(--sbb-form-field-overflow);
   width: 100%;