@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776772852 → 5.0.0-next-dev.1776866482

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/{block-link-common-CDrCAdGP.js → block-link-common-CiqQc2Rs.js} +1 -1
  2. package/core/styles/core.scss +5 -0
  3. package/core/styles/mixins/helpers.scss +3 -3
  4. package/core.css +17 -0
  5. package/custom-elements.json +1763 -1763
  6. package/development/{block-link-common-CwurjMj1.js → block-link-common-B9Vx8CTp.js} +2 -2
  7. package/development/form-field/form-field/form-field.component.js +1 -1
  8. package/development/{form-field.component-BHMh3V6s.js → form-field.component-M0wf8ZR8.js} +2 -2
  9. package/development/form-field.js +1 -1
  10. package/development/form-field.pure.js +1 -1
  11. package/development/link/common/block-link-common.js +1 -1
  12. package/development/link.js +1 -1
  13. package/development/link.pure.js +1 -1
  14. package/development/slider/slider.component.js +1 -1
  15. package/development/{slider.component-ZBdkbZei.js → slider.component-CXrGIpkh.js} +2 -2
  16. package/development/slider.js +1 -1
  17. package/development/slider.pure.js +1 -1
  18. package/development/step-label.component-BTXuaONx.js +126 -0
  19. package/development/stepper/step-label/step-label.component.js +1 -1
  20. package/development/stepper.js +1 -1
  21. package/development/stepper.pure.js +1 -1
  22. package/development/teaser-panel/teaser-panel.component.js +1 -1
  23. package/development/{teaser-panel.component-Dhka2dPT.js → teaser-panel.component-CjSrfJYG.js} +2 -2
  24. package/development/teaser-panel.js +1 -1
  25. package/development/teaser-panel.pure.js +1 -1
  26. package/development/toggle-check/toggle-check.component.js +1 -1
  27. package/development/toggle-check.component-LYr7DJj1.js +156 -0
  28. package/development/toggle-check.js +1 -1
  29. package/development/toggle-check.pure.js +1 -1
  30. package/form-field/form-field/form-field.component.js +1 -1
  31. package/{form-field.component-D8qiPCgJ.js → form-field.component-DbV7fMoe.js} +1 -1
  32. package/form-field.js +1 -1
  33. package/form-field.pure.js +1 -1
  34. package/link/common/block-link-common.js +1 -1
  35. package/link.js +1 -1
  36. package/link.pure.js +1 -1
  37. package/off-brand-theme.css +17 -0
  38. package/package.json +2 -2
  39. package/safety-theme.css +17 -0
  40. package/slider/slider.component.js +1 -1
  41. package/{slider.component-B3V7sjSF.js → slider.component-DfMkuXac.js} +1 -1
  42. package/slider.js +1 -1
  43. package/slider.pure.js +1 -1
  44. package/standard-theme.css +17 -0
  45. package/step-label.component-CbtQ7MvH.js +77 -0
  46. package/stepper/step-label/step-label.component.js +1 -1
  47. package/stepper.js +1 -1
  48. package/stepper.pure.js +1 -1
  49. package/teaser-panel/teaser-panel.component.js +1 -1
  50. package/{teaser-panel.component-zejDYKkU.js → teaser-panel.component-C4auDYCc.js} +1 -1
  51. package/teaser-panel.js +1 -1
  52. package/teaser-panel.pure.js +1 -1
  53. package/toggle-check/toggle-check.component.js +1 -1
  54. package/toggle-check.component-WVQ4NM-R.js +116 -0
  55. package/toggle-check.js +1 -1
  56. package/toggle-check.pure.js +1 -1
  57. package/development/step-label.component-B7M9Yqyz.js +0 -126
  58. package/development/toggle-check.component-BPcuOvOu.js +0 -156
  59. package/step-label.component-BXg13qOD.js +0 -77
  60. package/toggle-check.component-CnZBajpA.js +0 -116
package/{block-link-common-CDrCAdGP.js → block-link-common-CiqQc2Rs.js} RENAMED
@@ -5,7 +5,7 @@ import { property as a } from "lit/decorators.js";
5
5
  import { isLean as o } from "./core.js";
6
6
  import { SbbIconNameMixin as s } from "./icon.pure.js";
7
7
  //#region src/elements/link/common/block-link.scss?inline
8
- var c = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-block-link-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;transform:translateY(-50%)}", l = (l) => (() => {
8
+ var c = ":host{--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-graphite));--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-metal));--sbb-link-color-normal: var(--sbb-color-granite);--sbb-link-color-normal: light-dark(var(--sbb-color-granite), var(--sbb-color-white));--sbb-link-color-hover: var(--sbb-color-primary125);--sbb-link-color-hover: light-dark(var(--sbb-color-primary125), var(--sbb-color-cloud));--sbb-link-color-active: var(--sbb-color-primary150);--sbb-link-color-active: light-dark(var(--sbb-color-primary150), var(--sbb-color-silver));display:block}:host([negative]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-link-color-normal: var(--sbb-color-1-negative);--sbb-link-color-hover: var(--sbb-color-4-negative);--sbb-link-color-active: var(--sbb-color-silver)}:host(.sbb-active){--sbb-link-color-normal: var(--sbb-color-black);--sbb-link-color-normal: light-dark(var(--sbb-color-black), var(--sbb-color-cement));--sbb-link-text-decoration-line: underline}:host(.sbb-active[negative]){--sbb-link-color-normal: var(--sbb-color-cement);--sbb-link-text-decoration-line: underline}:host([size=xs]){--sbb-block-link-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-block-link-font-size: var(--sbb-text-font-size-s)}:host([size=m]){--sbb-block-link-font-size: var(--sbb-text-font-size-m)}.sbb-action-base{gap:var(--sbb-block-link-gap);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-block-link-font-size)}.sbb-link__icon{position:relative;height:calc(var(--sbb-typo-line-height-text) * 1em);width:var(--sbb-block-link-icon-size);flex:0 0 auto;align-self:start}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-link__icon{display:none}:host([icon-placement=end]) .sbb-link__icon{order:2}.sbb-link__icon ::slotted([slot=icon]),.sbb-link__icon sbb-icon{position:absolute;top:50%;translate:0 -50%}", l = (l) => (() => {
9
9
  let u = e(s(l)), d, f = [], p = [], m, h = [], g = [];
10
10
  return class extends u {
11
11
  static {
package/core/styles/core.scss CHANGED
@@ -259,6 +259,9 @@ $theme: 'standard' !default;
259
259
  @use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
260
260
  $theme: $theme
261
261
  );
262
+ @use '../../toggle-check/toggle-check.global' as toggle-check with (
263
+ $theme: $theme
264
+ );
262
265
  @use '../../toggle/toggle/toggle.global' as toggle with (
263
266
  $theme: $theme
264
267
  );
@@ -353,6 +356,7 @@ $theme: 'standard' !default;
353
356
  @include timetable-form-details.base;
354
357
  @include timetable-form-field.base;
355
358
  @include timetable-occupancy.base;
359
+ @include toggle-check.base;
356
360
  @include toggle.base;
357
361
  @include toggle-option.base;
358
362
  @include tooltip.base;
@@ -375,6 +379,7 @@ $theme: 'standard' !default;
375
379
  @include slider.base-forced-colors;
376
380
  @include step-label.base-forced-colors;
377
381
  @include tag.base-forced-colors;
382
+ @include toggle-check.base-forced-colors;
378
383
  @include toggle.base-forced-colors;
379
384
  }
380
385
 
package/core/styles/mixins/helpers.scss CHANGED
@@ -8,19 +8,19 @@
8
8
  position: absolute;
9
9
  top: 50%;
10
10
  left: 50%;
11
- transform: translate(-50%, -50%);
11
+ translate: -50% -50%;
12
12
  }
13
13
 
14
14
  @mixin absolute-center-x {
15
15
  position: absolute;
16
16
  left: 50%;
17
- transform: translateX(-50%);
17
+ translate: -50% 0;
18
18
  }
19
19
 
20
20
  @mixin absolute-center-y {
21
21
  position: absolute;
22
22
  top: 50%;
23
- transform: translateY(-50%);
23
+ translate: 0 -50%;
24
24
  }
25
25
 
26
26
  // This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element.
package/core.css CHANGED
@@ -1793,6 +1793,21 @@ slot[name=error]::slotted(*) {
1793
1793
  --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
1794
1794
  --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
1795
1795
  --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
1796
+ --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
1797
+ --sbb-toggle-check-color: var(--sbb-color-2);
1798
+ --sbb-toggle-check-checked-color: var(--sbb-color-primary);
1799
+ --sbb-toggle-check-background-color: var(--sbb-background-color-4);
1800
+ --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
1801
+ --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
1802
+ --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
1803
+ --sbb-toggle-check-circle-border-style: solid;
1804
+ --sbb-toggle-check-circle-diameter: 1.75rem;
1805
+ --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
1806
+ --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
1807
+ --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
1808
+ --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
1809
+ --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
1810
+ --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
1796
1811
  --sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
1797
1812
  --sbb-toggle-height: var(--sbb-size-element-m);
1798
1813
  --sbb-toggle-background-color: var(--sbb-background-color-4);
@@ -1885,6 +1900,8 @@ slot[name=error]::slotted(*) {
1885
1900
  --sbb-tag-text-color: ButtonText;
1886
1901
  --sbb-tag-border-color: CanvasText;
1887
1902
  --sbb-tag-border-width: var(--sbb-border-width-2x);
1903
+ --sbb-toggle-check-background-color: CanvasText;
1904
+ --sbb-toggle-check-circle-background-color: Canvas;
1888
1905
  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
1889
1906
  --sbb-toggle-selected-option-border-color: Highlight;
1890
1907
  }