@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779280803 → 5.0.0-next.3-dev.1779281392

package/option/option/option.global.scss

@@ -0,0 +1,51 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+// Used by `sbb-option` and `sbb-autocomplete-grid-option`
+@mixin base {
+  --sbb-option-color: var(--sbb-color-3);
+  --sbb-option-background-color: inherit;
+  --sbb-option-background-color-hover: light-dark(var(--sbb-color-milk), var(--sbb-color-midnight));
+  --sbb-option-background-color-active: var(--sbb-background-color-4);
+  --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
+  --sbb-option-disabled-background-color: var(--sbb-background-color-3);
+  --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-s),
+        'lean': var(--sbb-size-element-xxs),
+      ),
+      $theme
+    )};
+  --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-justify-content: start;
+  --sbb-option-cursor: var(--sbb-cursor-pointer);
+  --sbb-option-border-radius: var(--sbb-border-radius-4x);
+  --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-focus-outline-offset: #{sbb.theme-pattern-select(
+      (
+        'standard': inherit,
+        'lean': calc(-1 * var(--sbb-spacing-fixed-1x)),
+      ),
+      $theme
+    )};
+  --sbb-option-focus-outline-color: transparent;
+  --sbb-option-focus-outline-inset: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': 0 var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-option-font-size: var(--sbb-text-font-size-s);
+}
+
+@mixin rules {
+  // Sets ellipsis on all sbb-option child elements
+  .sbb-options-nowrap {
+    --sbb-option-text-overflow: ellipsis;
+    --sbb-option-overflow: hidden;
+    --sbb-option-white-space: nowrap;
+  }
+}

package/option/option-hint/option-hint.global.scss

@@ -0,0 +1,17 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-padding-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': 0 var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+}

package/option/option-panel-common.global.scss

@@ -0,0 +1,11 @@
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
+}

package/overlay/overlay.global.scss

@@ -0,0 +1,13 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-overlay-background-color: var(--sbb-background-color-3);
+  --sbb-overlay-display: none;
+  --sbb-overlay-height: 100%;
+  --sbb-overlay-inset: 0 auto auto 0;
+  --sbb-overlay-animation-easing: ease;
+  --sbb-overlay-pointer-events: none;
+  --sbb-overlay-container-display: none;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.0.0-next.3-dev.1779280803",
+  "version": "5.0.0-next.3-dev.1779281392",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/ecc503b69c3ddf6f684917c67b291992f94eb17b"
+    "https://github.com/sbb-design-systems/lyne-components/commit/7d7d7fd527c1aa150c1f58e6f3952afaa128a38d"
   ],
   "type": "module",
   "exports": {

package/paginator/common/paginator-common.global.scss

@@ -0,0 +1,14 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-paginator-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+}

package/paginator/compact-paginator/compact-paginator.global.scss

@@ -0,0 +1,9 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
+  --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
+  --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
+}

package/paginator/paginator/paginator.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-paginator-page-border-width: 0;
+  --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
+  --sbb-paginator-animation-easing: var(--sbb-animation-easing);
+  --sbb-paginator-font-size: var(--sbb-text-font-size-s);
+}

package/popover/popover.global.scss

@@ -0,0 +1,12 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
+  --sbb-popover-border-radius: var(--sbb-border-radius-8x);
+  --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
+  --sbb-popover-background: var(--sbb-background-color-2);
+  --sbb-popover-animation-easing: ease-out;
+}

package/radio-button/common/radio-button-common.global.scss

@@ -0,0 +1,37 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-radio-button-label-color: var(--sbb-color-3);
+  --sbb-radio-button-background-color: var(--sbb-background-color-1);
+  --sbb-radio-button-border-width: var(--sbb-border-width-1x);
+  --sbb-radio-button-border-style: solid;
+  --sbb-radio-button-border-color: var(--sbb-border-color-5);
+  --sbb-radio-button-cursor: var(--sbb-cursor-pointer);
+  --sbb-radio-button-dimension-xs: #{sbb.px-to-rem-build(20)};
+  --sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-dimension: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-radio-button-dimension-m),
+        'lean': var(--sbb-radio-button-dimension-xs),
+      ),
+      $theme
+    )};
+  --sbb-radio-button-inner-circle-dimension: #{sbb.px-to-rem-build(10)};
+  --sbb-radio-button-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-radio-button-background-color: Canvas;
+  --sbb-radio-button-border-width: var(--sbb-border-width-2x);
+  --sbb-radio-button-border-color: ButtonBorder;
+}

package/select/select.global.scss

@@ -0,0 +1,24 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-select-placeholder-fallback-color: light-dark(
+    var(--sbb-color-metal),
+    var(--sbb-color-smoke)
+  );
+}
+
+@mixin rules {
+  // We set some dimension to the selects trigger element in order that the screen reader's outline box looks more accurate.
+  .sbb-select-trigger {
+    width: 100%;
+
+    // We set the smallest possible height (zero breakpoint, size s)
+    height: var(--sbb-size-element-xs);
+
+    sbb-form-field & {
+      top: 0;
+    }
+  }
+}

package/selection-action-panel/selection-action-panel.global.scss

@@ -0,0 +1,19 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
+  --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-action-panel-action-margin-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-selection-action-panel-action-margin-inline-m),
+        'lean': var(--sbb-selection-action-panel-action-margin-inline-xs),
+      ),
+      $theme
+    )};
+  --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
+}

package/selection-expansion-panel/selection-expansion-panel.global.scss

@@ -0,0 +1,21 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
+  --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
+  --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
+  --sbb-selection-expansion-panel-content-visibility: visible;
+  --sbb-selection-expansion-panel-content-padding-block-start: var(--sbb-spacing-responsive-xxs);
+  --sbb-selection-expansion-panel-content-padding-block-end: var(
+    --sbb-selection-panel-input-padding-block-m
+  );
+  --sbb-selection-expansion-panel-content-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-selection-panel-input-padding-inline-m),
+        'lean': var(--sbb-selection-panel-input-padding-inline-xs),
+      ),
+      $theme
+    )};
+}

package/sidebar/sidebar/sidebar.global.scss

@@ -0,0 +1,19 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-sidebar-background-color: var(--sbb-background-color-1);
+  --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
+  --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
+  --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
+}
+
+@mixin rules {
+  // If there is a title, remove top spacing for the content
+  sbb-sidebar:has(sbb-sidebar-title) {
+    --_sbb-sidebar-padding-block-start: 0;
+  }
+}

package/sidebar/sidebar-close-button/sidebar-close-button.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  // If there is no close button, avoid reserving any space for the button in the sidebar title
+  sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+    position: absolute;
+  }
+}

package/sidebar/sidebar-container/sidebar-container.global.scss

@@ -0,0 +1,62 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin rules {
+  sbb-sidebar-container {
+    // Skip animation for the container, content and sidebars when a sidebar requests it
+    // (during initialization or if animation is disabled, but only during transition)
+    &:has(> sbb-sidebar:state(skip-animation)) {
+      --sbb-sidebar-container-animation-duration: 0s;
+    }
+
+    // Toggles visibility of backdrop if there is an affected sidebar inside the container.
+    &:has(
+      > sbb-sidebar:is([mode='over'], :state(mode-over-forced)):is(
+          :state(state-opening),
+          :state(state-opened)
+        )
+    ) {
+      --sbb-sidebar-container__backdrop-visibility: visible;
+      --sbb-sidebar-container-backdrop-opacity: 0.4;
+    }
+
+    // Controls the start margin of the sbb-sidebar-content.
+    // Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
+    // or if there is no sidebar with position start, then override the margin with 0.
+    // Direct child selector is mandatory to enable nested sidebars.
+    &:is(
+        :has(
+          > sbb-sidebar[position='end']:is(
+              :state(state-closing),
+              :state(state-closed),
+              [mode='over'],
+              :state(mode-over-forced)
+            )
+        ),
+        :not(:has(> sbb-sidebar[position='end']))
+      )
+      > sbb-sidebar-content {
+      --_sbb-sidebar-content-margin-inline-end: 0;
+    }
+
+    // Controls the end margin of the sbb-sidebar-content.
+    // Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
+    // or if there is no sidebar with position end, then override the margin with 0.
+    // Direct child selector is mandatory to enable nested sidebars.
+    &:is(
+        :has(
+          > sbb-sidebar:not([position='end']):is(
+              :state(state-closing),
+              :state(state-closed),
+              [mode='over'],
+              :state(mode-over-forced)
+            )
+        ),
+        :not(:has(> sbb-sidebar:not([position='end'])))
+      )
+      > sbb-sidebar-content {
+      --_sbb-sidebar-content-margin-inline-start: 0;
+    }
+  }
+}

package/signet/signet.global.scss

@@ -0,0 +1,16 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-signet-background-color: var(--sbb-color-brand);
+  --sbb-signet-panel-color: var(--sbb-color-brand);
+  --sbb-signet-icon-color: var(--sbb-color-white);
+  --sbb-signet-aspect-ratio: 2 / 1;
+}
+
+@mixin base-forced-colors {
+  --sbb-signet-background-color: ButtonText !important;
+  --sbb-signet-panel-color: ButtonText !important;
+  --sbb-signet-icon-color: Canvas !important;
+}

package/slider/slider.global.scss

@@ -0,0 +1,30 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-slider-line-height: #{sbb.px-to-rem-build(4)};
+  --sbb-slider-knob-size: #{sbb.px-to-rem-build(28)};
+  --sbb-slider-knob-size-active: #{sbb.px-to-rem-build(31)};
+  --sbb-slider-knob-border-size: #{sbb.px-to-rem-build(3)};
+  --sbb-slider-knob-border-style: solid;
+  --sbb-slider-knob-color: var(--sbb-background-color-1);
+  --sbb-slider-knob-border-color: var(--sbb-color-primary);
+  --sbb-slider-icon-color: var(--sbb-color-1);
+  --sbb-slider-selected-line-disabled-color: light-dark(
+    var(--sbb-color-smoke),
+    var(--sbb-color-cement)
+  );
+  --sbb-slider-line-color: var(--sbb-border-color-5);
+  --sbb-slider-selected-line-color: var(--sbb-color-primary);
+  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
+  --sbb-slider-width: #{sbb.px-to-rem-build(400)};
+  --sbb-slider-min-width: #{sbb.px-to-rem-build(150)};
+  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-slider-padding-block: #{sbb.px-to-rem-build(2)};
+}
+
+@mixin base-forced-colors {
+  --sbb-slider-selected-line-color: Highlight;
+  --sbb-slider-line-color: CanvasText;
+}

package/status/status.global.scss

@@ -0,0 +1,10 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-status-color: var(--sbb-color-4);
+  --sbb-status-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-status-font-size: var(--sbb-text-font-size-s);
+  --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+}

package/stepper/step-label/step-label.global.scss

@@ -0,0 +1,43 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-step-label-color: var(--sbb-color-4);
+  --sbb-step-label-prefix-border-style: solid;
+  --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-step-label-prefix-background-color: var(--sbb-background-color-1);
+  --sbb-step-label-number-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-step-label-font-size-s: var(--sbb-text-font-size-m);
+  --sbb-step-label-font-size-m: var(--sbb-text-font-size-l);
+  --sbb-step-label-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-step-label-font-size-m),
+        'lean': var(--sbb-step-label-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-step-label-gap-s: var(--sbb-spacing-fixed-3x);
+  --sbb-step-label-gap-m: var(--sbb-spacing-fixed-4x);
+  --sbb-step-label-gap: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-step-label-gap-m),
+        'lean': var(--sbb-step-label-gap-s),
+      ),
+      $theme
+    )};
+  --sbb-step-label-prefix-size-s: var(--sbb-size-element-xxxs);
+  --sbb-step-label-prefix-size-m: var(--sbb-size-element-xxs);
+  --sbb-step-label-prefix-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-step-label-prefix-size-m),
+        'lean': var(--sbb-step-label-prefix-size-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin base-forced-colors {
+  --sbb-step-label-color: ButtonText;
+  --sbb-step-label-prefix-border-color: ButtonText;
+}

package/stepper/stepper/stepper.global.scss

@@ -0,0 +1,10 @@
+@use '../../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-stepper-orientation: row;
+  --sbb-stepper-border-width: var(--sbb-border-width-1x);
+  --sbb-stepper-marker-width: var(--sbb-border-width-3x);
+  --sbb-stepper-marker-color: var(--sbb-color-3);
+}