@sbb-esta/lyne-elements 4.0.5 → 4.1.0

package/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -6,11 +6,11 @@ import { SbbHydrationMixin as d } from "../../core/mixins.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { css as v } from "lit";
-const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em;-webkit-user-select:none;user-select:none}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{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-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{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-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
 let z = (() => {
   var r;
-  let a = [c("sbb-breadcrumb")], o, b = [], e, s = f(d(m));
-  return r = class extends s {
+  let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(d(m));
+  return r = class extends a {
     renderTemplate() {
       return n`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
@@ -20,8 +20,8 @@ let z = (() => {
     `;
     }
   }, e = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
-    l(null, o = { value: e }, a, { kind: "class", name: e.name, metadata: t }, null, b), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    l(null, o = { value: e }, s, { kind: "class", name: e.name, metadata: t }, null, b), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), r.styles = [u, h], i(e, b), e;
 })();
 export {

package/core/styles/core.scss

@@ -45,6 +45,15 @@ $theme: 'standard' !default;
   with (
   $theme: $theme
 );
+@use '../../tabs/common/tab-group-common.global' as tab-group-common with (
+  $theme: $theme
+);
+@use '../../tabs/common/tab-label-common.global' as tab-label-common with (
+  $theme: $theme
+);
+@use '../../tabs/tab-nav-bar/tab-nav-bar.global' as tab-nav-bar with (
+  $theme: $theme
+);
 @use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
   $theme: $theme
 );
@@ -66,6 +75,8 @@ $theme: 'standard' !default;
   @include radio-button-group.base;
   @include selection-action-panel.base;
   @include selection-expansion-panel.base;
+  @include tab-group-common.base;
+  @include tab-label-common.base;
   @include visual-checkbox.base;
 
   @include a11y.if-forced-colors {
@@ -169,6 +180,9 @@ $theme: 'standard' !default;
 
 @include font-face.font-declarations;
 
+// Components global styles
+@include tab-nav-bar.rules;
+
 // TODO: discuss where to add these classes
 .sbb-dark {
   color-scheme: dark;

package/core/styles/mixins/link.scss

@@ -66,7 +66,6 @@
   text-decoration-line: var(--sbb-link-text-decoration-line, underline);
   text-decoration-thickness: #{functions.px-to-rem-build(1)};
   text-underline-offset: 0.3125em; // 5px
-  user-select: none;
 
   @include a11y.if-forced-colors {
     text-decoration: underline;

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 {
@@ -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;
 }