@sbb-esta/lyne-elements-dev 5.13.1-dev.1794294068 → 5.13.1-dev.1794308738
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/autocomplete.pure.js +5 -8
- package/button/_button.global.scss +62 -8
- package/button.pure.js +2 -2
- package/core.js +13 -13
- package/custom-elements.json +142 -50
- package/datepicker.pure.js +1 -1
- package/development/autocomplete/autocomplete/autocomplete-base-element.d.ts +5 -2
- package/development/autocomplete/autocomplete/autocomplete.component.d.ts +2 -3
- package/development/autocomplete/autocomplete-button/autocomplete-button.component.d.ts +3 -1
- package/development/autocomplete/autocomplete-row/autocomplete-row.component.d.ts +4 -0
- package/development/autocomplete.pure.js +74 -24
- package/development/button.pure.js +2 -2
- package/development/core/controllers/language-controller.d.ts +4 -1
- package/development/core/i18n/i18n.d.ts +2 -0
- package/development/core/overlay/overlay-trigger-attributes.d.ts +2 -0
- package/development/core.js +20 -5
- package/development/datepicker.pure.js +1 -1
- package/lean-off-brand-theme.css +68 -8
- package/lean-safety-theme.css +68 -8
- package/lean-theme.css +68 -8
- package/off-brand-theme.css +68 -8
- package/package.json +2 -2
- package/safety-theme.css +68 -8
- package/standard-theme.css +68 -8
package/lean-safety-theme.css
CHANGED
|
@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2597
2597
|
--_hover-offset: 0.0625rem;
|
|
2598
2598
|
--_padding-block: var(--sbb-button-padding-block-min);
|
|
2599
2599
|
--_padding-inline: var(--sbb-button-padding-inline);
|
|
2600
|
-
--_border:
|
|
2601
|
-
|
|
2600
|
+
--_border: var(
|
|
2601
|
+
--sbb-button-border-override,
|
|
2602
|
+
calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
|
|
2603
|
+
var(--_border-color)
|
|
2604
|
+
);
|
|
2602
2605
|
--_animation-loading-delay: var(
|
|
2603
2606
|
--sbb-disable-animation-duration,
|
|
2604
2607
|
var(--sbb-button-loading-delay)
|
|
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2609
2612
|
var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
|
|
2610
2613
|
--_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
|
|
2611
2614
|
var(--_animation-loading-delay) alternate infinite linear;
|
|
2615
|
+
--_animation-loading-fade: sbb-button-loading-fade
|
|
2616
|
+
var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
|
|
2612
2617
|
}
|
|
2613
2618
|
@media (forced-colors: active) {
|
|
2614
2619
|
:is(.sbb-button,
|
|
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2920
2925
|
calc(100% - var(--sbb-button-min-height) / 2)
|
|
2921
2926
|
)
|
|
2922
2927
|
50%,
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2928
|
+
color-mix(
|
|
2929
|
+
in srgb,
|
|
2930
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2931
|
+
transparent
|
|
2932
|
+
)
|
|
2933
|
+
0deg,
|
|
2934
|
+
color-mix(
|
|
2935
|
+
in srgb,
|
|
2936
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2937
|
+
transparent
|
|
2938
|
+
)
|
|
2939
|
+
300deg,
|
|
2940
|
+
color-mix(
|
|
2941
|
+
in srgb,
|
|
2942
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
|
|
2943
|
+
calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2944
|
+
transparent
|
|
2945
|
+
)
|
|
2946
|
+
360deg
|
|
2926
2947
|
),
|
|
2927
2948
|
var(--_background-color);
|
|
2928
2949
|
--_loading-outline-offset: calc(
|
|
2929
2950
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2930
2951
|
);
|
|
2931
|
-
--_border: none;
|
|
2932
2952
|
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2933
2953
|
--_padding-block: calc(
|
|
2934
2954
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2936
2956
|
--_padding-inline: calc(
|
|
2937
2957
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2938
2958
|
);
|
|
2939
|
-
--_animation:
|
|
2959
|
+
--_animation:
|
|
2960
|
+
var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2940
2961
|
--_forced-colors-adjust: none;
|
|
2941
2962
|
}
|
|
2963
|
+
@media (forced-colors: active) {
|
|
2964
|
+
:is(.sbb-button,
|
|
2965
|
+
.sbb-button-s,
|
|
2966
|
+
.sbb-button-m,
|
|
2967
|
+
.sbb-button-l,
|
|
2968
|
+
.sbb-secondary-button,
|
|
2969
|
+
.sbb-secondary-button-s,
|
|
2970
|
+
.sbb-secondary-button-m,
|
|
2971
|
+
.sbb-secondary-button-l,
|
|
2972
|
+
.sbb-accent-button,
|
|
2973
|
+
.sbb-accent-button-s,
|
|
2974
|
+
.sbb-accent-button-m,
|
|
2975
|
+
.sbb-accent-button-l,
|
|
2976
|
+
.sbb-transparent-button,
|
|
2977
|
+
.sbb-transparent-button-s,
|
|
2978
|
+
.sbb-transparent-button-m,
|
|
2979
|
+
.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
2980
|
+
--sbb-button-border-override: none;
|
|
2981
|
+
}
|
|
2982
|
+
}
|
|
2942
2983
|
:is(.sbb-button,
|
|
2943
2984
|
.sbb-button-s,
|
|
2944
2985
|
.sbb-button-m,
|
|
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3117
3158
|
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
|
|
3118
3159
|
--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
|
|
3119
3160
|
}
|
|
3161
|
+
:is(.sbb-secondary-button,
|
|
3162
|
+
.sbb-secondary-button-s,
|
|
3163
|
+
.sbb-secondary-button-m,
|
|
3164
|
+
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
3165
|
+
--sbb-button-border-override: none transparent;
|
|
3166
|
+
}
|
|
3120
3167
|
|
|
3121
3168
|
:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
|
|
3122
3169
|
--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
|
|
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3192
3239
|
--sbb-button-color-loading-border: var(--sbb-color-granite);
|
|
3193
3240
|
}
|
|
3194
3241
|
|
|
3242
|
+
@keyframes sbb-button-loading-fade {
|
|
3243
|
+
from {
|
|
3244
|
+
--sbb-button-loading-opacity: 0;
|
|
3245
|
+
}
|
|
3246
|
+
to {
|
|
3247
|
+
--sbb-button-loading-opacity: 1;
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3195
3250
|
@keyframes sbb-button-rotate {
|
|
3196
3251
|
from {
|
|
3197
3252
|
--sbb-button-loading-angle: -90deg;
|
|
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3210
3265
|
}
|
|
3211
3266
|
@property --sbb-button-loading-angle {
|
|
3212
3267
|
syntax: "<angle>";
|
|
3213
|
-
initial-value:
|
|
3268
|
+
initial-value: -90deg;
|
|
3269
|
+
inherits: false;
|
|
3270
|
+
}
|
|
3271
|
+
@property --sbb-button-loading-opacity {
|
|
3272
|
+
syntax: "<number>";
|
|
3273
|
+
initial-value: 1;
|
|
3214
3274
|
inherits: false;
|
|
3215
3275
|
}
|
|
3216
3276
|
@property --sbb-button-loading-offset {
|
package/lean-theme.css
CHANGED
|
@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2597
2597
|
--_hover-offset: 0.0625rem;
|
|
2598
2598
|
--_padding-block: var(--sbb-button-padding-block-min);
|
|
2599
2599
|
--_padding-inline: var(--sbb-button-padding-inline);
|
|
2600
|
-
--_border:
|
|
2601
|
-
|
|
2600
|
+
--_border: var(
|
|
2601
|
+
--sbb-button-border-override,
|
|
2602
|
+
calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
|
|
2603
|
+
var(--_border-color)
|
|
2604
|
+
);
|
|
2602
2605
|
--_animation-loading-delay: var(
|
|
2603
2606
|
--sbb-disable-animation-duration,
|
|
2604
2607
|
var(--sbb-button-loading-delay)
|
|
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2609
2612
|
var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
|
|
2610
2613
|
--_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
|
|
2611
2614
|
var(--_animation-loading-delay) alternate infinite linear;
|
|
2615
|
+
--_animation-loading-fade: sbb-button-loading-fade
|
|
2616
|
+
var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
|
|
2612
2617
|
}
|
|
2613
2618
|
@media (forced-colors: active) {
|
|
2614
2619
|
:is(.sbb-button,
|
|
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2920
2925
|
calc(100% - var(--sbb-button-min-height) / 2)
|
|
2921
2926
|
)
|
|
2922
2927
|
50%,
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2928
|
+
color-mix(
|
|
2929
|
+
in srgb,
|
|
2930
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2931
|
+
transparent
|
|
2932
|
+
)
|
|
2933
|
+
0deg,
|
|
2934
|
+
color-mix(
|
|
2935
|
+
in srgb,
|
|
2936
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2937
|
+
transparent
|
|
2938
|
+
)
|
|
2939
|
+
300deg,
|
|
2940
|
+
color-mix(
|
|
2941
|
+
in srgb,
|
|
2942
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
|
|
2943
|
+
calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2944
|
+
transparent
|
|
2945
|
+
)
|
|
2946
|
+
360deg
|
|
2926
2947
|
),
|
|
2927
2948
|
var(--_background-color);
|
|
2928
2949
|
--_loading-outline-offset: calc(
|
|
2929
2950
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2930
2951
|
);
|
|
2931
|
-
--_border: none;
|
|
2932
2952
|
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2933
2953
|
--_padding-block: calc(
|
|
2934
2954
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2936
2956
|
--_padding-inline: calc(
|
|
2937
2957
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2938
2958
|
);
|
|
2939
|
-
--_animation:
|
|
2959
|
+
--_animation:
|
|
2960
|
+
var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2940
2961
|
--_forced-colors-adjust: none;
|
|
2941
2962
|
}
|
|
2963
|
+
@media (forced-colors: active) {
|
|
2964
|
+
:is(.sbb-button,
|
|
2965
|
+
.sbb-button-s,
|
|
2966
|
+
.sbb-button-m,
|
|
2967
|
+
.sbb-button-l,
|
|
2968
|
+
.sbb-secondary-button,
|
|
2969
|
+
.sbb-secondary-button-s,
|
|
2970
|
+
.sbb-secondary-button-m,
|
|
2971
|
+
.sbb-secondary-button-l,
|
|
2972
|
+
.sbb-accent-button,
|
|
2973
|
+
.sbb-accent-button-s,
|
|
2974
|
+
.sbb-accent-button-m,
|
|
2975
|
+
.sbb-accent-button-l,
|
|
2976
|
+
.sbb-transparent-button,
|
|
2977
|
+
.sbb-transparent-button-s,
|
|
2978
|
+
.sbb-transparent-button-m,
|
|
2979
|
+
.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
2980
|
+
--sbb-button-border-override: none;
|
|
2981
|
+
}
|
|
2982
|
+
}
|
|
2942
2983
|
:is(.sbb-button,
|
|
2943
2984
|
.sbb-button-s,
|
|
2944
2985
|
.sbb-button-m,
|
|
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3117
3158
|
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
|
|
3118
3159
|
--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
|
|
3119
3160
|
}
|
|
3161
|
+
:is(.sbb-secondary-button,
|
|
3162
|
+
.sbb-secondary-button-s,
|
|
3163
|
+
.sbb-secondary-button-m,
|
|
3164
|
+
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
3165
|
+
--sbb-button-border-override: none transparent;
|
|
3166
|
+
}
|
|
3120
3167
|
|
|
3121
3168
|
:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
|
|
3122
3169
|
--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
|
|
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3192
3239
|
--sbb-button-color-loading-border: var(--sbb-color-granite);
|
|
3193
3240
|
}
|
|
3194
3241
|
|
|
3242
|
+
@keyframes sbb-button-loading-fade {
|
|
3243
|
+
from {
|
|
3244
|
+
--sbb-button-loading-opacity: 0;
|
|
3245
|
+
}
|
|
3246
|
+
to {
|
|
3247
|
+
--sbb-button-loading-opacity: 1;
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3195
3250
|
@keyframes sbb-button-rotate {
|
|
3196
3251
|
from {
|
|
3197
3252
|
--sbb-button-loading-angle: -90deg;
|
|
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3210
3265
|
}
|
|
3211
3266
|
@property --sbb-button-loading-angle {
|
|
3212
3267
|
syntax: "<angle>";
|
|
3213
|
-
initial-value:
|
|
3268
|
+
initial-value: -90deg;
|
|
3269
|
+
inherits: false;
|
|
3270
|
+
}
|
|
3271
|
+
@property --sbb-button-loading-opacity {
|
|
3272
|
+
syntax: "<number>";
|
|
3273
|
+
initial-value: 1;
|
|
3214
3274
|
inherits: false;
|
|
3215
3275
|
}
|
|
3216
3276
|
@property --sbb-button-loading-offset {
|
package/off-brand-theme.css
CHANGED
|
@@ -2577,8 +2577,11 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2577
2577
|
--_hover-offset: 0.0625rem;
|
|
2578
2578
|
--_padding-block: var(--sbb-button-padding-block-min);
|
|
2579
2579
|
--_padding-inline: var(--sbb-button-padding-inline);
|
|
2580
|
-
--_border:
|
|
2581
|
-
|
|
2580
|
+
--_border: var(
|
|
2581
|
+
--sbb-button-border-override,
|
|
2582
|
+
calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
|
|
2583
|
+
var(--_border-color)
|
|
2584
|
+
);
|
|
2582
2585
|
--_animation-loading-delay: var(
|
|
2583
2586
|
--sbb-disable-animation-duration,
|
|
2584
2587
|
var(--sbb-button-loading-delay)
|
|
@@ -2589,6 +2592,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2589
2592
|
var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
|
|
2590
2593
|
--_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
|
|
2591
2594
|
var(--_animation-loading-delay) alternate infinite linear;
|
|
2595
|
+
--_animation-loading-fade: sbb-button-loading-fade
|
|
2596
|
+
var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
|
|
2592
2597
|
}
|
|
2593
2598
|
@media (forced-colors: active) {
|
|
2594
2599
|
:is(.sbb-button,
|
|
@@ -2900,15 +2905,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2900
2905
|
calc(100% - var(--sbb-button-min-height) / 2)
|
|
2901
2906
|
)
|
|
2902
2907
|
50%,
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2908
|
+
color-mix(
|
|
2909
|
+
in srgb,
|
|
2910
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2911
|
+
transparent
|
|
2912
|
+
)
|
|
2913
|
+
0deg,
|
|
2914
|
+
color-mix(
|
|
2915
|
+
in srgb,
|
|
2916
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2917
|
+
transparent
|
|
2918
|
+
)
|
|
2919
|
+
300deg,
|
|
2920
|
+
color-mix(
|
|
2921
|
+
in srgb,
|
|
2922
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
|
|
2923
|
+
calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2924
|
+
transparent
|
|
2925
|
+
)
|
|
2926
|
+
360deg
|
|
2906
2927
|
),
|
|
2907
2928
|
var(--_background-color);
|
|
2908
2929
|
--_loading-outline-offset: calc(
|
|
2909
2930
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2910
2931
|
);
|
|
2911
|
-
--_border: none;
|
|
2912
2932
|
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2913
2933
|
--_padding-block: calc(
|
|
2914
2934
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
@@ -2916,9 +2936,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2916
2936
|
--_padding-inline: calc(
|
|
2917
2937
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2918
2938
|
);
|
|
2919
|
-
--_animation:
|
|
2939
|
+
--_animation:
|
|
2940
|
+
var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2920
2941
|
--_forced-colors-adjust: none;
|
|
2921
2942
|
}
|
|
2943
|
+
@media (forced-colors: active) {
|
|
2944
|
+
:is(.sbb-button,
|
|
2945
|
+
.sbb-button-s,
|
|
2946
|
+
.sbb-button-m,
|
|
2947
|
+
.sbb-button-l,
|
|
2948
|
+
.sbb-secondary-button,
|
|
2949
|
+
.sbb-secondary-button-s,
|
|
2950
|
+
.sbb-secondary-button-m,
|
|
2951
|
+
.sbb-secondary-button-l,
|
|
2952
|
+
.sbb-accent-button,
|
|
2953
|
+
.sbb-accent-button-s,
|
|
2954
|
+
.sbb-accent-button-m,
|
|
2955
|
+
.sbb-accent-button-l,
|
|
2956
|
+
.sbb-transparent-button,
|
|
2957
|
+
.sbb-transparent-button-s,
|
|
2958
|
+
.sbb-transparent-button-m,
|
|
2959
|
+
.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
2960
|
+
--sbb-button-border-override: none;
|
|
2961
|
+
}
|
|
2962
|
+
}
|
|
2922
2963
|
:is(.sbb-button,
|
|
2923
2964
|
.sbb-button-s,
|
|
2924
2965
|
.sbb-button-m,
|
|
@@ -3097,6 +3138,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3097
3138
|
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
|
|
3098
3139
|
--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
|
|
3099
3140
|
}
|
|
3141
|
+
:is(.sbb-secondary-button,
|
|
3142
|
+
.sbb-secondary-button-s,
|
|
3143
|
+
.sbb-secondary-button-m,
|
|
3144
|
+
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
3145
|
+
--sbb-button-border-override: none transparent;
|
|
3146
|
+
}
|
|
3100
3147
|
|
|
3101
3148
|
:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
|
|
3102
3149
|
--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
|
|
@@ -3172,6 +3219,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3172
3219
|
--sbb-button-color-loading-border: var(--sbb-color-granite);
|
|
3173
3220
|
}
|
|
3174
3221
|
|
|
3222
|
+
@keyframes sbb-button-loading-fade {
|
|
3223
|
+
from {
|
|
3224
|
+
--sbb-button-loading-opacity: 0;
|
|
3225
|
+
}
|
|
3226
|
+
to {
|
|
3227
|
+
--sbb-button-loading-opacity: 1;
|
|
3228
|
+
}
|
|
3229
|
+
}
|
|
3175
3230
|
@keyframes sbb-button-rotate {
|
|
3176
3231
|
from {
|
|
3177
3232
|
--sbb-button-loading-angle: -90deg;
|
|
@@ -3190,7 +3245,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3190
3245
|
}
|
|
3191
3246
|
@property --sbb-button-loading-angle {
|
|
3192
3247
|
syntax: "<angle>";
|
|
3193
|
-
initial-value:
|
|
3248
|
+
initial-value: -90deg;
|
|
3249
|
+
inherits: false;
|
|
3250
|
+
}
|
|
3251
|
+
@property --sbb-button-loading-opacity {
|
|
3252
|
+
syntax: "<number>";
|
|
3253
|
+
initial-value: 1;
|
|
3194
3254
|
inherits: false;
|
|
3195
3255
|
}
|
|
3196
3256
|
@property --sbb-button-loading-offset {
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.13.1-dev.
|
|
3
|
+
"version": "5.13.1-dev.1794308738",
|
|
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/a960515b6164e71bdb1a3fb4ad25f69038fe7925"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2597
2597
|
--_hover-offset: 0.0625rem;
|
|
2598
2598
|
--_padding-block: var(--sbb-button-padding-block-min);
|
|
2599
2599
|
--_padding-inline: var(--sbb-button-padding-inline);
|
|
2600
|
-
--_border:
|
|
2601
|
-
|
|
2600
|
+
--_border: var(
|
|
2601
|
+
--sbb-button-border-override,
|
|
2602
|
+
calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
|
|
2603
|
+
var(--_border-color)
|
|
2604
|
+
);
|
|
2602
2605
|
--_animation-loading-delay: var(
|
|
2603
2606
|
--sbb-disable-animation-duration,
|
|
2604
2607
|
var(--sbb-button-loading-delay)
|
|
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2609
2612
|
var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
|
|
2610
2613
|
--_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
|
|
2611
2614
|
var(--_animation-loading-delay) alternate infinite linear;
|
|
2615
|
+
--_animation-loading-fade: sbb-button-loading-fade
|
|
2616
|
+
var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
|
|
2612
2617
|
}
|
|
2613
2618
|
@media (forced-colors: active) {
|
|
2614
2619
|
:is(.sbb-button,
|
|
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2920
2925
|
calc(100% - var(--sbb-button-min-height) / 2)
|
|
2921
2926
|
)
|
|
2922
2927
|
50%,
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2928
|
+
color-mix(
|
|
2929
|
+
in srgb,
|
|
2930
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2931
|
+
transparent
|
|
2932
|
+
)
|
|
2933
|
+
0deg,
|
|
2934
|
+
color-mix(
|
|
2935
|
+
in srgb,
|
|
2936
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2937
|
+
transparent
|
|
2938
|
+
)
|
|
2939
|
+
300deg,
|
|
2940
|
+
color-mix(
|
|
2941
|
+
in srgb,
|
|
2942
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
|
|
2943
|
+
calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2944
|
+
transparent
|
|
2945
|
+
)
|
|
2946
|
+
360deg
|
|
2926
2947
|
),
|
|
2927
2948
|
var(--_background-color);
|
|
2928
2949
|
--_loading-outline-offset: calc(
|
|
2929
2950
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2930
2951
|
);
|
|
2931
|
-
--_border: none;
|
|
2932
2952
|
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2933
2953
|
--_padding-block: calc(
|
|
2934
2954
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2936
2956
|
--_padding-inline: calc(
|
|
2937
2957
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2938
2958
|
);
|
|
2939
|
-
--_animation:
|
|
2959
|
+
--_animation:
|
|
2960
|
+
var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2940
2961
|
--_forced-colors-adjust: none;
|
|
2941
2962
|
}
|
|
2963
|
+
@media (forced-colors: active) {
|
|
2964
|
+
:is(.sbb-button,
|
|
2965
|
+
.sbb-button-s,
|
|
2966
|
+
.sbb-button-m,
|
|
2967
|
+
.sbb-button-l,
|
|
2968
|
+
.sbb-secondary-button,
|
|
2969
|
+
.sbb-secondary-button-s,
|
|
2970
|
+
.sbb-secondary-button-m,
|
|
2971
|
+
.sbb-secondary-button-l,
|
|
2972
|
+
.sbb-accent-button,
|
|
2973
|
+
.sbb-accent-button-s,
|
|
2974
|
+
.sbb-accent-button-m,
|
|
2975
|
+
.sbb-accent-button-l,
|
|
2976
|
+
.sbb-transparent-button,
|
|
2977
|
+
.sbb-transparent-button-s,
|
|
2978
|
+
.sbb-transparent-button-m,
|
|
2979
|
+
.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
2980
|
+
--sbb-button-border-override: none;
|
|
2981
|
+
}
|
|
2982
|
+
}
|
|
2942
2983
|
:is(.sbb-button,
|
|
2943
2984
|
.sbb-button-s,
|
|
2944
2985
|
.sbb-button-m,
|
|
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3117
3158
|
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
|
|
3118
3159
|
--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
|
|
3119
3160
|
}
|
|
3161
|
+
:is(.sbb-secondary-button,
|
|
3162
|
+
.sbb-secondary-button-s,
|
|
3163
|
+
.sbb-secondary-button-m,
|
|
3164
|
+
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
3165
|
+
--sbb-button-border-override: none transparent;
|
|
3166
|
+
}
|
|
3120
3167
|
|
|
3121
3168
|
:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
|
|
3122
3169
|
--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
|
|
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3192
3239
|
--sbb-button-color-loading-border: var(--sbb-color-granite);
|
|
3193
3240
|
}
|
|
3194
3241
|
|
|
3242
|
+
@keyframes sbb-button-loading-fade {
|
|
3243
|
+
from {
|
|
3244
|
+
--sbb-button-loading-opacity: 0;
|
|
3245
|
+
}
|
|
3246
|
+
to {
|
|
3247
|
+
--sbb-button-loading-opacity: 1;
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3195
3250
|
@keyframes sbb-button-rotate {
|
|
3196
3251
|
from {
|
|
3197
3252
|
--sbb-button-loading-angle: -90deg;
|
|
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3210
3265
|
}
|
|
3211
3266
|
@property --sbb-button-loading-angle {
|
|
3212
3267
|
syntax: "<angle>";
|
|
3213
|
-
initial-value:
|
|
3268
|
+
initial-value: -90deg;
|
|
3269
|
+
inherits: false;
|
|
3270
|
+
}
|
|
3271
|
+
@property --sbb-button-loading-opacity {
|
|
3272
|
+
syntax: "<number>";
|
|
3273
|
+
initial-value: 1;
|
|
3214
3274
|
inherits: false;
|
|
3215
3275
|
}
|
|
3216
3276
|
@property --sbb-button-loading-offset {
|
package/standard-theme.css
CHANGED
|
@@ -2597,8 +2597,11 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2597
2597
|
--_hover-offset: 0.0625rem;
|
|
2598
2598
|
--_padding-block: var(--sbb-button-padding-block-min);
|
|
2599
2599
|
--_padding-inline: var(--sbb-button-padding-inline);
|
|
2600
|
-
--_border:
|
|
2601
|
-
|
|
2600
|
+
--_border: var(
|
|
2601
|
+
--sbb-button-border-override,
|
|
2602
|
+
calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
|
|
2603
|
+
var(--_border-color)
|
|
2604
|
+
);
|
|
2602
2605
|
--_animation-loading-delay: var(
|
|
2603
2606
|
--sbb-disable-animation-duration,
|
|
2604
2607
|
var(--sbb-button-loading-delay)
|
|
@@ -2609,6 +2612,8 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2609
2612
|
var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
|
|
2610
2613
|
--_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
|
|
2611
2614
|
var(--_animation-loading-delay) alternate infinite linear;
|
|
2615
|
+
--_animation-loading-fade: sbb-button-loading-fade
|
|
2616
|
+
var(--sbb-disable-animation-duration, var(--sbb-button-loading-delay)) ease-in forwards;
|
|
2612
2617
|
}
|
|
2613
2618
|
@media (forced-colors: active) {
|
|
2614
2619
|
:is(.sbb-button,
|
|
@@ -2920,15 +2925,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2920
2925
|
calc(100% - var(--sbb-button-min-height) / 2)
|
|
2921
2926
|
)
|
|
2922
2927
|
50%,
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2928
|
+
color-mix(
|
|
2929
|
+
in srgb,
|
|
2930
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2931
|
+
transparent
|
|
2932
|
+
)
|
|
2933
|
+
0deg,
|
|
2934
|
+
color-mix(
|
|
2935
|
+
in srgb,
|
|
2936
|
+
var(--sbb-button-color-loading-border) calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2937
|
+
transparent
|
|
2938
|
+
)
|
|
2939
|
+
300deg,
|
|
2940
|
+
color-mix(
|
|
2941
|
+
in srgb,
|
|
2942
|
+
var(--sbb-button-color-loading-snake-color, var(--sbb-button-color-active-text))
|
|
2943
|
+
calc(var(--sbb-button-loading-opacity) * 100%),
|
|
2944
|
+
transparent
|
|
2945
|
+
)
|
|
2946
|
+
360deg
|
|
2926
2947
|
),
|
|
2927
2948
|
var(--_background-color);
|
|
2928
2949
|
--_loading-outline-offset: calc(
|
|
2929
2950
|
var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
|
|
2930
2951
|
);
|
|
2931
|
-
--_border: none;
|
|
2932
2952
|
--_border-action: var(--sbb-button-loading-border-width) dotted transparent;
|
|
2933
2953
|
--_padding-block: calc(
|
|
2934
2954
|
var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
|
|
@@ -2936,9 +2956,30 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
2936
2956
|
--_padding-inline: calc(
|
|
2937
2957
|
var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
|
|
2938
2958
|
);
|
|
2939
|
-
--_animation:
|
|
2959
|
+
--_animation:
|
|
2960
|
+
var(--_animation-loading-fade), var(--_animation-loading-rotate), var(--_animation-loading-move);
|
|
2940
2961
|
--_forced-colors-adjust: none;
|
|
2941
2962
|
}
|
|
2963
|
+
@media (forced-colors: active) {
|
|
2964
|
+
:is(.sbb-button,
|
|
2965
|
+
.sbb-button-s,
|
|
2966
|
+
.sbb-button-m,
|
|
2967
|
+
.sbb-button-l,
|
|
2968
|
+
.sbb-secondary-button,
|
|
2969
|
+
.sbb-secondary-button-s,
|
|
2970
|
+
.sbb-secondary-button-m,
|
|
2971
|
+
.sbb-secondary-button-l,
|
|
2972
|
+
.sbb-accent-button,
|
|
2973
|
+
.sbb-accent-button-s,
|
|
2974
|
+
.sbb-accent-button-m,
|
|
2975
|
+
.sbb-accent-button-l,
|
|
2976
|
+
.sbb-transparent-button,
|
|
2977
|
+
.sbb-transparent-button-s,
|
|
2978
|
+
.sbb-transparent-button-m,
|
|
2979
|
+
.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
2980
|
+
--sbb-button-border-override: none;
|
|
2981
|
+
}
|
|
2982
|
+
}
|
|
2942
2983
|
:is(.sbb-button,
|
|
2943
2984
|
.sbb-button-s,
|
|
2944
2985
|
.sbb-button-m,
|
|
@@ -3117,6 +3158,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3117
3158
|
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
|
|
3118
3159
|
--sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
|
|
3119
3160
|
}
|
|
3161
|
+
:is(.sbb-secondary-button,
|
|
3162
|
+
.sbb-secondary-button-s,
|
|
3163
|
+
.sbb-secondary-button-m,
|
|
3164
|
+
.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
|
|
3165
|
+
--sbb-button-border-override: none transparent;
|
|
3166
|
+
}
|
|
3120
3167
|
|
|
3121
3168
|
:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
|
|
3122
3169
|
--sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
|
|
@@ -3192,6 +3239,14 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3192
3239
|
--sbb-button-color-loading-border: var(--sbb-color-granite);
|
|
3193
3240
|
}
|
|
3194
3241
|
|
|
3242
|
+
@keyframes sbb-button-loading-fade {
|
|
3243
|
+
from {
|
|
3244
|
+
--sbb-button-loading-opacity: 0;
|
|
3245
|
+
}
|
|
3246
|
+
to {
|
|
3247
|
+
--sbb-button-loading-opacity: 1;
|
|
3248
|
+
}
|
|
3249
|
+
}
|
|
3195
3250
|
@keyframes sbb-button-rotate {
|
|
3196
3251
|
from {
|
|
3197
3252
|
--sbb-button-loading-angle: -90deg;
|
|
@@ -3210,7 +3265,12 @@ sbb-breadcrumb-group:not(:defined) {
|
|
|
3210
3265
|
}
|
|
3211
3266
|
@property --sbb-button-loading-angle {
|
|
3212
3267
|
syntax: "<angle>";
|
|
3213
|
-
initial-value:
|
|
3268
|
+
initial-value: -90deg;
|
|
3269
|
+
inherits: false;
|
|
3270
|
+
}
|
|
3271
|
+
@property --sbb-button-loading-opacity {
|
|
3272
|
+
syntax: "<number>";
|
|
3273
|
+
initial-value: 1;
|
|
3214
3274
|
inherits: false;
|
|
3215
3275
|
}
|
|
3216
3276
|
@property --sbb-button-loading-offset {
|