@sbb-esta/lyne-elements 5.0.0-next.2 → 5.0.0

package/core/styles/{scrollbar.scss → features/scrollbar.scss}

@@ -1,4 +1,4 @@
-@use './mixins/scrollbar';
+@use '../mixins/scrollbar';
 
 :is(
   .sbb-scrollbar,

package/core/styles/features/typography.private.scss

@@ -0,0 +1,9 @@
+@use '../../../link/link.global' as link;
+
+.sbb-link {
+  @include link.element-rules;
+}
+
+.sbb-link-negative {
+  @include link.element-rules-negative;
+}

package/core/styles/{typography.scss → features/typography.scss}

@@ -1,11 +1,19 @@
-@use './mixins/typo';
+@use '../mixins/typo';
+
+sub,
+sup {
+  font-size: 60%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
 
 sub {
-  @include typo.sub;
+  bottom: -0.36em;
 }
 
 sup {
-  @include typo.sup;
+  top: -0.5em;
 }
 
 .sbb-text-xxs,
@@ -42,7 +50,7 @@ sup {
 }
 
 .sbb-text--bold {
-  @include typo.text--bold;
+  font-weight: bold;
 }
 
 .sbb-legend {

package/core/styles/internals/button-reset.scss

@@ -0,0 +1,5 @@
+@use '../mixins/reset';
+
+button {
+  @include reset.button-reset;
+}

package/core/styles/{host-scrollbar.scss → internals/host-scrollbar.scss}

@@ -1,4 +1,4 @@
-@use './mixins/scrollbar';
+@use '../mixins/scrollbar';
 
 :host {
   @include scrollbar.scrollbar-variables;

package/core/styles/internals/list-reset.scss

@@ -0,0 +1,6 @@
+@use '../mixins/reset';
+
+ul,
+ol {
+  @include reset.list-reset;
+}

package/core/styles/internals/popover-reset.scss

@@ -0,0 +1,6 @@
+@use '../mixins/reset';
+
+:host(:where([popover])),
+.sbb-popover-reset:where([popover]) {
+  @include reset.popover-reset;
+}

package/core/styles/{screen-reader-only.scss → internals/screen-reader-only.scss}

@@ -1,4 +1,4 @@
-@use './mixins/a11y';
+@use '../mixins/a11y';
 
 .sbb-screen-reader-only {
   @include a11y.screen-reader-only;

package/core/styles/lean-off-brand-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean-off-brand'
+);

package/core/styles/lean-safety-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean-safety'
+);

package/core/styles/mixins/{a11y.scss → _a11y.scss}

@@ -1,23 +1,6 @@
 // ----------------------------------------------------------------------------------------------------
 // A11y: MediaQueries & Other things
 // ----------------------------------------------------------------------------------------------------
-@mixin if-forced-colors {
-  @media (forced-colors: active) {
-    @content;
-  }
-}
-
-@mixin if-forced-colors-light {
-  @media (forced-colors: active) and (prefers-color-scheme: light) {
-    @content;
-  }
-}
-
-@mixin if-forced-colors-dark {
-  @media (forced-colors: active) and (prefers-color-scheme: dark) {
-    @content;
-  }
-}
 
 @mixin focus-outline {
   outline-offset: var(--sbb-focus-outline-offset);
@@ -36,7 +19,3 @@
   white-space: nowrap;
   width: 1px;
 }
-
-@mixin scroll-margin-block-start {
-  scroll-margin-block-start: var(--sbb-spacing-fixed-10x);
-}

package/core/styles/mixins/_core.scss

@@ -0,0 +1,69 @@
+@use './helpers';
+@use './typo';
+@use './mediaqueries';
+
+@mixin core-base {
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Cursor
+  --sbb-cursor-default: default;
+  --sbb-cursor-pointer: pointer;
+
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  --sbb-border-radius-infinity: calc(infinity * 1px);
+
+  @include typo.text;
+
+  color-scheme: light dark;
+  color: var(--sbb-font-color-default);
+  background-color: var(--sbb-background-color-1);
+}
+
+@mixin core-rules {
+  @include helpers.box-sizing;
+
+  // When the input modality is either mouse or touch,
+  // the focus outline should be hidden.
+  // We achieve this by setting the outline style to none.
+  // This is primarily to work around Safari bugs.
+  :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
+    --sbb-focus-outline-style: none;
+  }
+
+  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+  ::placeholder {
+    @include typo.placeholder;
+  }
+
+  // Hiding components until they are instantiated
+  :is(
+    sbb-autocomplete,
+    sbb-autocomplete-grid,
+    sbb-datepicker,
+    sbb-dialog,
+    sbb-menu,
+    sbb-navigation,
+    sbb-navigation-section,
+    sbb-overlay,
+    sbb-popover,
+    sbb-select,
+    sbb-skiplink-list,
+    sbb-toast,
+    sbb-tooltip
+  ):not(:defined) {
+    display: none;
+  }
+
+  img {
+    aspect-ratio: var(--sbb-image-aspect-ratio);
+    object-fit: var(--sbb-image-object-fit);
+    object-position: var(--sbb-image-object-position);
+  }
+
+  .sbb-overlay-outlet {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+  }
+}

package/core/styles/{core/functions.scss → mixins/_functions.scss}

@@ -8,14 +8,6 @@
   @return ((math.div($size, 16)) * 1rem);
 }
 
-@function theme-select($theme-values, $theme) {
-  @if map.has-key($theme-values, $theme) {
-    @return map.get($theme-values, $theme);
-  } @else {
-    @return map.get($theme-values, 'standard');
-  }
-}
-
 @function theme-pattern-select($theme-values, $theme) {
   @each $sub-theme, $value in $theme-values {
     @if string.index($theme, $sub-theme) {

package/core/styles/mixins/{helpers.scss → _helpers.scss}

@@ -24,6 +24,8 @@
 }
 
 // This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.
+// As of 19.05.2026, all usages of this mixin are currently required.
+// TODO: Find alternative
 @mixin zero-width-space {
   &::before {
     content: '\200B';
@@ -34,6 +36,7 @@
 }
 
 // Placing content before and after the container stops the margin of inner elements from overflowing
+// TODO: Check necessity
 @mixin ignore-children-margin {
   &::after,
   &::before {
@@ -45,20 +48,6 @@
   }
 }
 
-@mixin invisible-container-overlay {
-  position: absolute;
-  opacity: 0;
-  inset: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  cursor: inherit;
-
-  // Puts the element behind the parent while keeping it visible so that
-  // it allows `click` events to propagate up.
-  z-index: -1;
-}
-
 @mixin box-sizing {
   *,
   ::before,

package/core/styles/mixins/{layout.scss → _layout.scss}

@@ -1,4 +1,4 @@
-@use '../core/mediaqueries';
+@use './mediaqueries';
 
 @mixin page-spacing {
   padding-inline: var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));

package/core/styles/mixins/{lists.scss → _lists.scss}

@@ -1,16 +1,9 @@
 @use 'sass:selector';
-@use '../core/functions';
-@use '../core/mediaqueries';
 @use './a11y';
+@use './functions';
+@use './mediaqueries';
 @use './typo';
 
-@mixin list-reset {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: inherit;
-}
-
 @mixin list {
   // Support both top level usage (& is empty / falsy)
   // and applied to a selector usage.
@@ -92,8 +85,9 @@
     $selector: '&:where(dl)';
   }
   #{$selector} {
-    @include typo.text-s--regular;
-
+    line-height: var(--sbb-typo-line-height-text);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+    font-size: var(--sbb-text-font-size-s);
     margin: 0;
     padding: 0;
     display: grid;
@@ -165,7 +159,7 @@
       // If consumers override the `--sbb-icon-list-marker-icon-color` variable to set a custom color via inline style,
       // it would have higher specificity over any rule, included the forced-colors one.
       // This can be avoided forcing `background-color: CanvasText` in high-contrast mode.
-      @include a11y.if-forced-colors {
+      @media (forced-colors: active) {
         background-color: CanvasText;
       }
     }
@@ -228,8 +222,6 @@
     min-height: calc(var(--sbb-step-list-dimensions) + 2 * var(--sbb-step-list-padding-block));
 
     &::before {
-      @include typo.text-xxs--bold;
-
       content: counter(steps);
       position: absolute;
       display: flex;
@@ -243,6 +235,10 @@
       border: var(--sbb-border-width-1x) solid
         light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
       border-radius: 50%;
+      line-height: var(--sbb-typo-line-height-text);
+      letter-spacing: var(--sbb-typo-letter-spacing-text);
+      font-size: var(--sbb-text-font-size-xxs);
+      font-weight: bold;
     }
 
     + li {

package/core/styles/mixins/{pearl-chain-bullet.scss → _pearl-chain-bullet.scss}

@@ -1,5 +1,5 @@
 @use './a11y';
-@use '../core/functions';
+@use './functions';
 
 // ----------------------------------------------------------------------------------------------------
 // Bullet Mixins: Achieve the styling of a bullet
@@ -30,7 +30,7 @@
   border-color: var(--sbb-pearl-chain-bullet-color);
   border-radius: 100%;
 
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     --sbb-pearl-chain-bullet-color: CanvasText;
   }
 }
@@ -54,7 +54,7 @@
 @mixin pearl-chain-bullet-past {
   --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-past);
 
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     --sbb-pearl-chain-bullet-color: GrayText !important;
   }
 }
@@ -65,7 +65,7 @@
 
 @mixin pearl-chain-bullet-disruption {
   --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-bullet-color-disruption);
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     --sbb-pearl-chain-bullet-color: Highlight;
   }
 }
@@ -85,7 +85,7 @@
     height: var(--sbb-pearl-chain-bullet-crossed-height);
     width: var(--sbb-pearl-chain-bullet-crossed-width);
 
-    @include a11y.if-forced-colors {
+    @media (forced-colors: active) {
       background: Highlight;
     }
   }
@@ -111,7 +111,7 @@
 
   --sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);
 
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     --sbb-pearl-chain-position-color: Highlight;
   }
 

package/core/styles/mixins/_reset.scss

@@ -0,0 +1,38 @@
+@mixin button-reset {
+  appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  -webkit-tap-highlight-color: transparent;
+  color: inherit;
+}
+
+@mixin input-reset {
+  outline: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  appearance: none;
+}
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+@mixin popover-reset {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  color: inherit;
+  pointer-events: none;
+}

package/core/styles/mixins/{scrollbar.scss → _scrollbar.scss}

@@ -1,4 +1,4 @@
-@use '../core/functions';
+@use './functions';
 
 @mixin scrollbar-rules {
   &::-webkit-scrollbar {
@@ -67,6 +67,10 @@
   );
 }
 
+@mixin scrollbar-variables--color-track-invisible {
+  --sbb-scrollbar-track-color: transparent;
+}
+
 @mixin scrollbar-variables--color-positive-track-visible {
   --sbb-scrollbar-track-color: var(--sbb-background-color-4);
 }
@@ -99,6 +103,8 @@
     @include scrollbar-variables--color-negative-track-visible;
   } @else if $track-visible {
     @include scrollbar-variables--color-positive-track-visible;
+  } @else {
+    @include scrollbar-variables--color-track-invisible;
   }
 }
 

package/core/styles/mixins/_typo.scss

@@ -0,0 +1,162 @@
+// ----------------------------------------------------------------------------------------------------
+// Typo: Title Style Mixins
+// ----------------------------------------------------------------------------------------------------
+
+@mixin heading-rules {
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
+  letter-spacing: var(--sbb-typo-letter-spacing-heading);
+  line-height: var(--sbb-typo-line-height-heading);
+}
+
+@mixin heading--level-1 {
+  font-size: var(--sbb-heading-font-size-1);
+}
+
+@mixin heading--level-1-spacing {
+  margin-block: var(--sbb-heading-margin-block-1);
+}
+
+@mixin heading--level-2 {
+  font-size: var(--sbb-heading-font-size-2);
+}
+
+@mixin heading--level-2-spacing {
+  margin-block: var(--sbb-heading-margin-block-2);
+}
+
+@mixin heading--level-3 {
+  font-size: var(--sbb-heading-font-size-3);
+}
+
+@mixin heading--level-3-spacing {
+  margin-block: var(--sbb-heading-margin-block-3);
+}
+
+@mixin heading--level-4 {
+  font-size: var(--sbb-heading-font-size-4);
+}
+
+@mixin heading--level-4-spacing {
+  margin-block: var(--sbb-heading-margin-block-4);
+}
+
+@mixin heading--level-5 {
+  font-size: var(--sbb-heading-font-size-5);
+}
+
+@mixin heading--level-5-spacing {
+  margin-block: var(--sbb-heading-margin-block-5);
+}
+
+@mixin heading--level-6 {
+  font-size: var(--sbb-heading-font-size-6);
+  line-height: var(--sbb-typo-line-height-text);
+}
+
+@mixin heading--level-6-spacing {
+  margin-block: var(--sbb-heading-margin-block-6);
+}
+
+@mixin heading-1($exclude-spacing: false) {
+  @include heading--level-1;
+  @if not($exclude-spacing) {
+    @include heading--level-1-spacing;
+  }
+  @include heading-rules;
+}
+
+@mixin heading-2($exclude-spacing: false) {
+  @include heading--level-2;
+  @if not($exclude-spacing) {
+    @include heading--level-2-spacing;
+  }
+  @include heading-rules;
+}
+
+@mixin heading-3($exclude-spacing: false) {
+  @include heading--level-3;
+  @if not($exclude-spacing) {
+    @include heading--level-3-spacing;
+  }
+  @include heading-rules;
+}
+
+@mixin heading-4($exclude-spacing: false) {
+  @include heading--level-4;
+  @if not($exclude-spacing) {
+    @include heading--level-4-spacing;
+  }
+  @include heading-rules;
+}
+
+@mixin heading-5($exclude-spacing: false) {
+  @include heading--level-5;
+  @if not($exclude-spacing) {
+    @include heading--level-5-spacing;
+  }
+  @include heading-rules;
+}
+
+@mixin heading-6($exclude-spacing: false) {
+  @include heading--level-6;
+  @if not($exclude-spacing) {
+    @include heading--level-6-spacing;
+  }
+  @include heading-rules;
+}
+
+// ----------------------------------------------------------------------------------------------------
+// Typo: Text Style Mixins
+// ----------------------------------------------------------------------------------------------------
+@mixin text {
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+}
+
+@mixin text-xl {
+  --sbb-text-font-size: var(--sbb-text-font-size-xl);
+  @include text;
+}
+
+@mixin text-l {
+  --sbb-text-font-size: var(--sbb-text-font-size-l);
+  @include text;
+}
+
+@mixin text-m {
+  --sbb-text-font-size: var(--sbb-text-font-size-m);
+  @include text;
+}
+
+@mixin text-s {
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
+  @include text;
+}
+
+@mixin text-xs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+  @include text;
+}
+
+@mixin text-xxs {
+  --sbb-text-font-size: var(--sbb-text-font-size-xxs);
+  @include text;
+}
+
+@mixin placeholder {
+  color: var(--sbb-color-5);
+  -webkit-text-fill-color: var(--sbb-color-5);
+  opacity: 1;
+}
+
+@mixin legend {
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size-xs);
+  padding: 0;
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+}

package/core/styles/styles.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../styles-OHFAsnJq.js";
-export { n as hostScrollbarStyles, e as screenReaderOnlyStyles, t as scrollbarStyles };
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../styles-BwvY_TyZ.js";
+export { a as buttonResetStyles, n as hostScrollbarStyles, i as listResetStyles, t as popoverResetStyles, e as screenReaderOnlyStyles, r as scrollbarStyles };