@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776128807 → 5.0.0-next-dev.1776241211
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 +6114 -5911
- package/development/autocomplete/autocomplete-base-element.d.ts +6 -0
- package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
- package/development/autocomplete/autocomplete-base-element.js +1 -1
- package/development/autocomplete/autocomplete.component.js +1 -1
- package/development/autocomplete-base-element-qUzJFqLU.js +678 -0
- package/development/autocomplete.js +1 -1
- package/development/autocomplete.pure.js +1 -1
- package/development/datepicker/common/datepicker-button.d.ts +6 -0
- package/development/datepicker/common/datepicker-button.d.ts.map +1 -1
- package/development/datepicker/common/datepicker-button.js +1 -1
- package/development/datepicker/datepicker/datepicker.component.d.ts +3 -0
- package/development/datepicker/datepicker/datepicker.component.d.ts.map +1 -1
- package/development/datepicker/datepicker/datepicker.component.js +1 -1
- package/development/datepicker-button-BI5R118p.js +166 -0
- package/development/datepicker.component-AKlc7SAO.js +214 -0
- package/development/datepicker.js +2 -2
- package/development/datepicker.pure.js +2 -2
- package/development/form-field/form-field-clear/form-field-clear.component.d.ts +3 -0
- package/development/form-field/form-field-clear/form-field-clear.component.d.ts.map +1 -1
- package/development/form-field/form-field-clear/form-field-clear.component.js +4 -1
- package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts +3 -0
- package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.d.ts.map +1 -1
- package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js +1 -1
- package/development/{timetable-form-swap-button.component-BGziVzB8.js → timetable-form-swap-button.component-_EUhzoww.js} +4 -1
- package/development/timetable-form.js +1 -1
- package/development/timetable-form.pure.js +1 -1
- 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 +1 -0
- 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-DscH6K3b.js +164 -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/autocomplete-base-element-B5n-eCMO.js +0 -672
- package/development/datepicker-button-CIvIHG8k.js +0 -160
- package/development/datepicker.component-BEiMYEc-.js +0 -211
- package/development/toggle-option.component-BWT4kEZo.js +0 -165
- package/development/toggle.component-DjLnSv3R.js +0 -249
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.0.0-next-dev.
|
|
3
|
+
"version": "5.0.0-next-dev.1776241211",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/00b318a01f55cf85d083f15e96f1320c425db7a5"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1885,6 +1885,22 @@ slot[name=error]::slotted(*) {
|
|
|
1885
1885
|
--sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
|
|
1886
1886
|
--sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
|
|
1887
1887
|
--sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
|
|
1888
|
+
--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
1889
|
+
--sbb-toggle-height: var(--sbb-size-element-m);
|
|
1890
|
+
--sbb-toggle-background-color: var(--sbb-background-color-4);
|
|
1891
|
+
--sbb-toggle-background-inset: 0.125rem;
|
|
1892
|
+
--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
|
|
1893
|
+
--sbb-toggle-font-size: var(--sbb-text-font-size-m);
|
|
1894
|
+
--sbb-toggle-grid-template-columns: auto auto;
|
|
1895
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
|
|
1896
|
+
--sbb-toggle-selected-option-border-style: solid;
|
|
1897
|
+
--sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
|
|
1898
|
+
--sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
|
|
1899
|
+
--sbb-toggle-option-color: var(--sbb-color-anthracite);
|
|
1900
|
+
--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1901
|
+
--sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
|
|
1902
|
+
--sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
|
|
1903
|
+
--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
|
|
1888
1904
|
--sbb-tooltip-animation-easing: ease-out;
|
|
1889
1905
|
--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
|
|
1890
1906
|
--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
|
|
@@ -1961,6 +1977,8 @@ slot[name=error]::slotted(*) {
|
|
|
1961
1977
|
--sbb-tag-text-color: ButtonText;
|
|
1962
1978
|
--sbb-tag-border-color: CanvasText;
|
|
1963
1979
|
--sbb-tag-border-width: var(--sbb-border-width-2x);
|
|
1980
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
|
|
1981
|
+
--sbb-toggle-selected-option-border-color: Highlight;
|
|
1964
1982
|
}
|
|
1965
1983
|
}
|
|
1966
1984
|
:root {
|
|
@@ -2456,6 +2474,11 @@ sbb-tab-nav-bar .sbb-tab-amount {
|
|
|
2456
2474
|
place-self: stretch;
|
|
2457
2475
|
}
|
|
2458
2476
|
|
|
2477
|
+
sbb-toggle:has(:focus-visible) {
|
|
2478
|
+
outline-offset: var(--sbb-focus-outline-offset);
|
|
2479
|
+
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2459
2482
|
.sbb-dark {
|
|
2460
2483
|
color-scheme: dark;
|
|
2461
2484
|
}
|
|
@@ -2631,11 +2654,6 @@ sbb-form-field .sbb-select-trigger {
|
|
|
2631
2654
|
top: 0;
|
|
2632
2655
|
}
|
|
2633
2656
|
|
|
2634
|
-
sbb-toggle:has(:focus-visible) {
|
|
2635
|
-
outline-offset: var(--sbb-focus-outline-offset);
|
|
2636
|
-
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2637
|
-
}
|
|
2638
|
-
|
|
2639
2657
|
.sbb-overlay-outlet {
|
|
2640
2658
|
position: fixed;
|
|
2641
2659
|
inset: 0;
|
package/standard-theme.css
CHANGED
|
@@ -1885,6 +1885,22 @@ slot[name=error]::slotted(*) {
|
|
|
1885
1885
|
--sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
|
|
1886
1886
|
--sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
|
|
1887
1887
|
--sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
|
|
1888
|
+
--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
1889
|
+
--sbb-toggle-height: var(--sbb-size-element-m);
|
|
1890
|
+
--sbb-toggle-background-color: var(--sbb-background-color-4);
|
|
1891
|
+
--sbb-toggle-background-inset: 0.125rem;
|
|
1892
|
+
--sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
|
|
1893
|
+
--sbb-toggle-font-size: var(--sbb-text-font-size-m);
|
|
1894
|
+
--sbb-toggle-grid-template-columns: auto auto;
|
|
1895
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
|
|
1896
|
+
--sbb-toggle-selected-option-border-style: solid;
|
|
1897
|
+
--sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
|
|
1898
|
+
--sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
|
|
1899
|
+
--sbb-toggle-option-color: var(--sbb-color-anthracite);
|
|
1900
|
+
--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
|
|
1901
|
+
--sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
|
|
1902
|
+
--sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
|
|
1903
|
+
--sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
|
|
1888
1904
|
--sbb-tooltip-animation-easing: ease-out;
|
|
1889
1905
|
--sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
|
|
1890
1906
|
--sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
|
|
@@ -1961,6 +1977,8 @@ slot[name=error]::slotted(*) {
|
|
|
1961
1977
|
--sbb-tag-text-color: ButtonText;
|
|
1962
1978
|
--sbb-tag-border-color: CanvasText;
|
|
1963
1979
|
--sbb-tag-border-width: var(--sbb-border-width-2x);
|
|
1980
|
+
--sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
|
|
1981
|
+
--sbb-toggle-selected-option-border-color: Highlight;
|
|
1964
1982
|
}
|
|
1965
1983
|
}
|
|
1966
1984
|
:root {
|
|
@@ -2456,6 +2474,11 @@ sbb-tab-nav-bar .sbb-tab-amount {
|
|
|
2456
2474
|
place-self: stretch;
|
|
2457
2475
|
}
|
|
2458
2476
|
|
|
2477
|
+
sbb-toggle:has(:focus-visible) {
|
|
2478
|
+
outline-offset: var(--sbb-focus-outline-offset);
|
|
2479
|
+
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2459
2482
|
.sbb-dark {
|
|
2460
2483
|
color-scheme: dark;
|
|
2461
2484
|
}
|
|
@@ -2631,11 +2654,6 @@ sbb-form-field .sbb-select-trigger {
|
|
|
2631
2654
|
top: 0;
|
|
2632
2655
|
}
|
|
2633
2656
|
|
|
2634
|
-
sbb-toggle:has(:focus-visible) {
|
|
2635
|
-
outline-offset: var(--sbb-focus-outline-offset);
|
|
2636
|
-
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
2637
|
-
}
|
|
2638
|
-
|
|
2639
2657
|
.sbb-overlay-outlet {
|
|
2640
2658
|
position: fixed;
|
|
2641
2659
|
inset: 0;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../toggle.component-
|
|
1
|
+
import { t as e } from "../../toggle.component-CVbRdQDM.js";
|
|
2
2
|
export { e as SbbToggleElement };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../../toggle-option.component-
|
|
1
|
+
import { t as e } from "../../toggle-option.component-BiyjKQB1.js";
|
|
2
2
|
export { e as SbbToggleOptionElement };
|
|
@@ -5,7 +5,7 @@ import { SbbDisabledMixin as a, SbbElement as o, boxSizingStyles as s, forceType
|
|
|
5
5
|
import { SbbIconNameMixin as l } from "./icon.pure.js";
|
|
6
6
|
import { ResizeController as u } from "@lit-labs/observers/resize-controller.js";
|
|
7
7
|
//#region src/elements/toggle/toggle-option/toggle-option.scss?inline
|
|
8
|
-
var d = ":host{--sbb-toggle-option-
|
|
8
|
+
var d = ":host{display:flex;justify-content:center;align-items:center;gap:var(--sbb-toggle-option-gap);height:var(--sbb-toggle-height);padding-inline:var(--sbb-toggle-padding-inline);color:var(--sbb-toggle-option-color);cursor:var(--sbb-toggle-option-cursor, var(--sbb-cursor-pointer));overflow:hidden;font-size:var(--sbb-toggle-option-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:700;outline:none!important}:host([checked]){--sbb-toggle-option-color: var(--sbb-color-2)}:host([disabled]){--sbb-toggle-option-cursor: unset;--sbb-toggle-option-color: var(--sbb-color-anthracite);--sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-toggle-option__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sbb-icon,::slotted(sbb-icon){min-width:var(--sbb-toggle-option-icon-min-size);min-height:var(--sbb-toggle-option-icon-min-size)}", f = (() => {
|
|
9
9
|
let f = a(l(o)), p, m = [], h = [], g, _ = [], v = [];
|
|
10
10
|
return class extends f {
|
|
11
11
|
static {
|
|
@@ -106,12 +106,10 @@ var d = ":host{--sbb-toggle-option-cursor: var(--sbb-cursor-pointer);--sbb-toggl
|
|
|
106
106
|
}
|
|
107
107
|
render() {
|
|
108
108
|
return n`
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
</span>
|
|
114
|
-
</div>
|
|
109
|
+
${this.renderIconSlot()}
|
|
110
|
+
<span class="sbb-toggle-option__label">
|
|
111
|
+
<slot></slot>
|
|
112
|
+
</span>
|
|
115
113
|
`;
|
|
116
114
|
}
|
|
117
115
|
};
|
|
@@ -3,7 +3,7 @@ import { html as n, isServer as r, unsafeCSS as i } from "lit";
|
|
|
3
3
|
import { property as a } from "lit/decorators.js";
|
|
4
4
|
import { SbbDisabledMixin as o, SbbElement as s, SbbFormAssociatedMixin as c, boxSizingStyles as l, forceType as u, interactivityChecker as d, isLean as f } from "./core.js";
|
|
5
5
|
//#region src/elements/toggle/toggle/toggle.scss?inline
|
|
6
|
-
var p = ":host{
|
|
6
|
+
var p = ":host{--_sbb-toggle-min-width: calc( var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small) );--sbb-toggle-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:grid;grid-template-columns:var(--sbb-toggle-grid-template-columns);grid-template-areas:\"start end\";align-items:center;height:var(--sbb-toggle-height);width:var(--sbb-toggle-width, fit-content);min-width:var(--_sbb-toggle-min-width);max-width:100%;border-radius:var(--sbb-toggle-border-radius);font-size:var(--sbb-toggle-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host:before{content:\"\";display:block;grid-area:start/start/end/end;margin-inline:var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);max-width:100%;height:100%;border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);transition-duration:var(--sbb-toggle-animation-duration);transition-timing-function:ease;transition-property:margin-inline-start,margin-inline-end}:host:after{content:\"\";grid-area:start/start/end/end;order:-1;background:var(--sbb-toggle-background-color);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius)}@media(forced-colors:active){:host:after{border:var(--sbb-border-width-1x) solid CanvasText}}:host([even]){--sbb-toggle-width: 100%;--sbb-toggle-grid-template-columns: 50% 50%}:host(:disabled){--sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);--sbb-toggle-selected-option-border-color: light-dark( var(--sbb-color-graphite), var(--sbb-color-smoke) );--sbb-toggle-selected-option-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style: solid;--sbb-toggle-selected-option-border-color: GrayText}}:host([size=m]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xs);--sbb-toggle-height: var(--sbb-size-element-m)}:host([size=s]){--sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);--sbb-toggle-height: var(--sbb-size-element-xxs)}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))){--sbb-disable-animation-duration: 0s}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}", m = (() => {
|
|
7
7
|
let m = o(c(s)), h = [], g, _ = [], v = [], y, b = [], x = [], S;
|
|
8
8
|
return class extends m {
|
|
9
9
|
static {
|
|
@@ -113,11 +113,11 @@ var p = ":host{display:block;width:fit-content;border-radius:var(--sbb-toggle-bo
|
|
|
113
113
|
return t instanceof Blob ? JSON.parse(await t.text()) : t;
|
|
114
114
|
}
|
|
115
115
|
updatePillPosition(e = !1) {
|
|
116
|
-
let t = this.options
|
|
117
|
-
if (t.length < 2 ||
|
|
116
|
+
let t = this.options;
|
|
117
|
+
if (t.length < 2 || t.every((e) => !e.checked) || t.every((e) => !e.clientWidth)) return;
|
|
118
118
|
this.toggleState("disable-animation-on-resizing", e);
|
|
119
|
-
let
|
|
120
|
-
|
|
119
|
+
let n = t[0], r = n.checked, i = r ? "0px" : `${n.clientWidth}px`, a = r ? `${this.clientWidth - n.clientWidth}px` : "0px";
|
|
120
|
+
a === "0px" && i === "0px" || (this.style?.setProperty("--sbb-toggle-option-left", i), this.style?.setProperty("--sbb-toggle-option-right", a), this.offsetWidth, this.internals.states.add("initialized"));
|
|
121
121
|
}
|
|
122
122
|
_updateToggle() {
|
|
123
123
|
this._valueChanged(this.value), this._updateDisabled();
|
|
@@ -144,11 +144,7 @@ var p = ":host{display:block;width:fit-content;border-radius:var(--sbb-toggle-bo
|
|
|
144
144
|
})));
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
|
-
return n`
|
|
148
|
-
<div class="sbb-toggle">
|
|
149
|
-
<slot @slotchange=${this._updateToggle}></slot>
|
|
150
|
-
</div>
|
|
151
|
-
`;
|
|
147
|
+
return n` <slot @slotchange=${this._updateToggle}></slot> `;
|
|
152
148
|
}
|
|
153
149
|
};
|
|
154
150
|
})();
|
package/toggle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { t as e } from "./toggle-option.component-
|
|
2
|
-
import { t } from "./toggle.component-
|
|
1
|
+
import { t as e } from "./toggle-option.component-BiyjKQB1.js";
|
|
2
|
+
import { t } from "./toggle.component-CVbRdQDM.js";
|
|
3
3
|
import "./toggle.pure.js";
|
|
4
4
|
t.define(), e.define();
|
|
5
5
|
//#endregion
|
package/toggle.pure.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as e } from "./toggle-option.component-
|
|
2
|
-
import { t } from "./toggle.component-
|
|
1
|
+
import { t as e } from "./toggle-option.component-BiyjKQB1.js";
|
|
2
|
+
import { t } from "./toggle.component-CVbRdQDM.js";
|
|
3
3
|
export { t as SbbToggleElement, e as SbbToggleOptionElement };
|