@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776118170 → 5.0.0-next-dev.1776240735
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.
- package/core/styles/core.scss +10 -4
- package/core.css +23 -5
- package/custom-elements.json +2331 -2331
- package/development/toggle/toggle/toggle.component.d.ts.map +1 -1
- package/development/toggle/toggle/toggle.component.js +1 -1
- package/development/toggle/toggle-option/toggle-option.component.d.ts.map +1 -1
- package/development/toggle/toggle-option/toggle-option.component.js +1 -1
- package/development/toggle-option.component-D8YWH_D5.js +163 -0
- package/development/toggle.component-Dap1d4rK.js +244 -0
- package/development/toggle.js +2 -2
- package/development/toggle.pure.js +2 -2
- package/off-brand-theme.css +23 -5
- package/package.json +2 -2
- package/safety-theme.css +23 -5
- package/standard-theme.css +23 -5
- package/toggle/toggle/toggle.component.js +1 -1
- package/toggle/toggle-option/toggle-option.component.js +1 -1
- package/{toggle-option.component-BF95HWOF.js → toggle-option.component-BiyjKQB1.js} +5 -7
- package/{toggle.component-2e_7FeR4.js → toggle.component-CVbRdQDM.js} +6 -10
- package/toggle.js +2 -2
- package/toggle.pure.js +2 -2
- package/development/toggle-option.component-BWT4kEZo.js +0 -165
- package/development/toggle.component-DjLnSv3R.js +0 -249
package/core/styles/core.scss
CHANGED
|
@@ -256,6 +256,12 @@ $theme: 'standard' !default;
|
|
|
256
256
|
@use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
|
|
257
257
|
$theme: $theme
|
|
258
258
|
);
|
|
259
|
+
@use '../../toggle/toggle/toggle.global' as toggle with (
|
|
260
|
+
$theme: $theme
|
|
261
|
+
);
|
|
262
|
+
@use '../../toggle/toggle-option/toggle-option.global' as toggle-option with (
|
|
263
|
+
$theme: $theme
|
|
264
|
+
);
|
|
259
265
|
@use '../../tooltip/tooltip.global' as tooltip with (
|
|
260
266
|
$theme: $theme
|
|
261
267
|
);
|
|
@@ -343,6 +349,8 @@ $theme: 'standard' !default;
|
|
|
343
349
|
@include timetable-form-details.base;
|
|
344
350
|
@include timetable-form-field.base;
|
|
345
351
|
@include timetable-occupancy.base;
|
|
352
|
+
@include toggle.base;
|
|
353
|
+
@include toggle-option.base;
|
|
346
354
|
@include tooltip.base;
|
|
347
355
|
@include visual-checkbox.base;
|
|
348
356
|
|
|
@@ -363,6 +371,7 @@ $theme: 'standard' !default;
|
|
|
363
371
|
@include slider.base-forced-colors;
|
|
364
372
|
@include step-label.base-forced-colors;
|
|
365
373
|
@include tag.base-forced-colors;
|
|
374
|
+
@include toggle.base-forced-colors;
|
|
366
375
|
}
|
|
367
376
|
|
|
368
377
|
// Train formation
|
|
@@ -478,6 +487,7 @@ $theme: 'standard' !default;
|
|
|
478
487
|
@include sidebar-container.rules;
|
|
479
488
|
@include tab-nav-bar.rules;
|
|
480
489
|
@include teaser-product-common.rules;
|
|
490
|
+
@include toggle.rules;
|
|
481
491
|
|
|
482
492
|
// TODO: discuss where to add these classes
|
|
483
493
|
.sbb-dark {
|
|
@@ -672,10 +682,6 @@ sbb-train-formation[view='top'] sbb-train-wagon {
|
|
|
672
682
|
}
|
|
673
683
|
}
|
|
674
684
|
|
|
675
|
-
sbb-toggle:has(:focus-visible) {
|
|
676
|
-
@include a11y.focus-outline;
|
|
677
|
-
}
|
|
678
|
-
|
|
679
685
|
.sbb-overlay-outlet {
|
|
680
686
|
position: fixed;
|
|
681
687
|
inset: 0;
|
package/core.css
CHANGED
|
@@ -1781,6 +1781,22 @@ slot[name=error]::slotted(*) {
|
|
|
1781
1781
|
--sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
|
|
1782
1782
|
--sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
|
|
1783
1783
|
--sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
|
|
1784
|
+
--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
1785
|
+
--sbb-toggle-height: var(--sbb-size-element-m);
|
|
1786
|
+
--sbb-toggle-background-color: var(--sbb-background-color-4);
|
|
1787
|
+
--sbb-toggle-background-inset: 0.125rem;
|
|
1788
|
+
--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
|
|
1789
|
+
--sbb-toggle-font-size: var(--sbb-text-font-size-m);
|
|
1790
|
+
--sbb-toggle-grid-template-columns: auto auto;
|
|
1791
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
|
|
1792
|
+
--sbb-toggle-selected-option-border-style: solid;
|
|
1793
|
+
--sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
|
|
1794
|
+
--sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
|
|
1795
|
+
--sbb-toggle-option-color: var(--sbb-color-anthracite);
|
|
1796
|
+
--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1797
|
+
--sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
|
|
1798
|
+
--sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
|
|
1799
|
+
--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
|
|
1784
1800
|
--sbb-tooltip-animation-easing: ease-out;
|
|
1785
1801
|
--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
|
|
1786
1802
|
--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
|
|
@@ -1857,6 +1873,8 @@ slot[name=error]::slotted(*) {
|
|
|
1857
1873
|
--sbb-tag-text-color: ButtonText;
|
|
1858
1874
|
--sbb-tag-border-color: CanvasText;
|
|
1859
1875
|
--sbb-tag-border-width: var(--sbb-border-width-2x);
|
|
1876
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
|
|
1877
|
+
--sbb-toggle-selected-option-border-color: Highlight;
|
|
1860
1878
|
}
|
|
1861
1879
|
}
|
|
1862
1880
|
:root {
|
|
@@ -2352,6 +2370,11 @@ sbb-tab-nav-bar .sbb-tab-amount {
|
|
|
2352
2370
|
place-self: stretch;
|
|
2353
2371
|
}
|
|
2354
2372
|
|
|
2373
|
+
sbb-toggle:has(:focus-visible) {
|
|
2374
|
+
outline-offset: var(--sbb-focus-outline-offset);
|
|
2375
|
+
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2376
|
+
}
|
|
2377
|
+
|
|
2355
2378
|
.sbb-dark {
|
|
2356
2379
|
color-scheme: dark;
|
|
2357
2380
|
}
|
|
@@ -2527,11 +2550,6 @@ sbb-form-field .sbb-select-trigger {
|
|
|
2527
2550
|
top: 0;
|
|
2528
2551
|
}
|
|
2529
2552
|
|
|
2530
|
-
sbb-toggle:has(:focus-visible) {
|
|
2531
|
-
outline-offset: var(--sbb-focus-outline-offset);
|
|
2532
|
-
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2533
|
-
}
|
|
2534
|
-
|
|
2535
2553
|
.sbb-overlay-outlet {
|
|
2536
2554
|
position: fixed;
|
|
2537
2555
|
inset: 0;
|