@sbb-esta/lyne-elements 4.0.4 → 4.1.0

package/autocomplete/autocomplete-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete-base-element.d.ts","sourceRoot":"","sources":["../../../src/elements/autocomplete/autocomplete-base-element.ts"],"names":[],"mappings":"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"}

package/autocomplete/autocomplete-base-element.js

@@ -285,7 +285,6 @@ let qt = (() => {
     _closedPanelKeyboardInteraction(t) {
       if (!(this.state === "opening" || this.state === "opened"))
         switch (t.key) {
-          case "Enter":
           case "ArrowDown":
           case "ArrowUp":
             this.open();

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