@sbb-esta/lyne-elements-dev 5.7.0-dev.1788783153 → 5.8.0-dev.1788796432
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/alert.pure.js +1 -1
- package/badge/_badge.global.scss +1 -1
- package/breadcrumb.pure.js +1 -1
- package/button.pure.js +2 -2
- package/calendar.pure.js +2 -2
- package/card.pure.js +1 -1
- package/checkbox-panel.pure.js +1 -1
- package/checkbox.pure.js +1 -1
- package/chip-label.pure.js +1 -1
- package/chip.pure.js +1 -1
- package/core/styles/_theme.scss +9 -1
- package/core/styles/features/image.scss +1 -1
- package/core/styles/lean-off-brand-theme.scss +2 -1
- package/core/styles/mixins/_lists.scss +2 -2
- package/core/styles/mixins/_typo.scss +3 -3
- package/core/styles/off-brand-theme.scss +2 -1
- package/datepicker.pure.js +1 -1
- package/development/alert.pure.js +1 -1
- package/development/breadcrumb.pure.js +1 -1
- package/development/button.pure.js +2 -2
- package/development/calendar.pure.js +2 -2
- package/development/card.pure.js +1 -1
- package/development/checkbox-panel.pure.js +1 -1
- package/development/checkbox.pure.js +1 -1
- package/development/chip-label.pure.js +1 -1
- package/development/chip.pure.js +1 -1
- package/development/datepicker.pure.js +1 -1
- package/development/download.pure.js +1 -1
- package/development/expansion-panel.pure.js +1 -1
- package/development/file-selector.pure.js +2 -2
- package/development/footer.pure.js +1 -1
- package/development/form-field.pure.js +3 -3
- package/development/header.pure.js +2 -2
- package/development/link.pure.js +1 -1
- package/development/menu.pure.js +1 -1
- package/development/message.pure.js +1 -1
- package/development/mini-calendar.pure.js +1 -1
- package/development/navigation.pure.js +4 -4
- package/development/notification.pure.js +1 -1
- package/development/option.pure.js +3 -3
- package/development/paginator.pure.js +2 -2
- package/development/radio-button-panel.pure.js +1 -1
- package/development/radio-button.pure.js +1 -1
- package/development/status.pure.js +1 -1
- package/development/stepper.pure.js +1 -1
- package/development/tabs.pure.js +1 -1
- package/development/tag.pure.js +1 -1
- package/development/teaser-panel.pure.js +1 -1
- package/development/teaser-product.pure.js +1 -1
- package/development/teaser.pure.js +1 -1
- package/development/timetable-occupancy.pure.js +1 -1
- package/development/title.pure.js +1 -1
- package/development/toast.pure.js +1 -1
- package/development/toggle-check.pure.js +1 -1
- package/development/toggle.pure.js +2 -2
- package/development/tooltip.pure.js +1 -1
- package/development/train.pure.js +3 -3
- package/download.pure.js +1 -1
- package/expansion-panel.pure.js +1 -1
- package/file-selector.pure.js +2 -2
- package/footer.pure.js +1 -1
- package/form-field/_form-field.global.scss +1 -1
- package/form-field.pure.js +3 -3
- package/header/_header.global.scss +2 -2
- package/header.pure.js +2 -2
- package/lean-off-brand-theme.css +16 -34
- package/lean-safety-theme.css +18 -16
- package/lean-theme.css +18 -16
- package/link.pure.js +1 -1
- package/menu.pure.js +1 -1
- package/message.pure.js +1 -1
- package/mini-calendar.pure.js +1 -1
- package/navigation/_navigation.global.scss +2 -2
- package/navigation.pure.js +4 -4
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +16 -34
- package/option.pure.js +3 -3
- package/package.json +2 -2
- package/paginator.pure.js +2 -2
- package/radio-button-panel.pure.js +1 -1
- package/radio-button.pure.js +1 -1
- package/safety-theme.css +18 -16
- package/standard-theme.css +18 -16
- package/status.pure.js +1 -1
- package/stepper.pure.js +1 -1
- package/table/_table.global.scss +4 -4
- package/tabs.pure.js +1 -1
- package/tag.pure.js +1 -1
- package/teaser-panel.pure.js +1 -1
- package/teaser-product.pure.js +1 -1
- package/teaser.pure.js +1 -1
- package/timetable-occupancy.pure.js +1 -1
- package/title.pure.js +1 -1
- package/toast.pure.js +1 -1
- package/toggle-check.pure.js +1 -1
- package/toggle.pure.js +2 -2
- package/tooltip.pure.js +1 -1
- package/train.pure.js +3 -3
package/safety-theme.css
CHANGED
|
@@ -124,11 +124,13 @@ summary {
|
|
|
124
124
|
font-family: var(--sbb-typo-font-family);
|
|
125
125
|
font-weight: normal;
|
|
126
126
|
line-height: var(--sbb-typo-line-height-text);
|
|
127
|
-
letter-spacing: var(--sbb-
|
|
127
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
128
128
|
font-size: var(--sbb-text-font-size);
|
|
129
129
|
color-scheme: light dark;
|
|
130
130
|
color: var(--sbb-font-color-default);
|
|
131
131
|
background-color: var(--sbb-background-color-1);
|
|
132
|
+
--sbb-letter-spacing-heading: var(--sbb-typo-letter-spacing-heading);
|
|
133
|
+
--sbb-letter-spacing-text: var(--sbb-typo-letter-spacing-text);
|
|
132
134
|
--sbb-animation-duration-1x: 0.04s;
|
|
133
135
|
--sbb-animation-duration-2x: 0.08s;
|
|
134
136
|
--sbb-animation-duration-3x: 0.12s;
|
|
@@ -1495,7 +1497,7 @@ summary {
|
|
|
1495
1497
|
--sbb-navigation-action-color: var(--sbb-color-4-negative);
|
|
1496
1498
|
--sbb-navigation-action-icon-display: none;
|
|
1497
1499
|
--sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
|
|
1498
|
-
--sbb-navigation-action-letter-spacing: var(--sbb-
|
|
1500
|
+
--sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
|
|
1499
1501
|
--sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
|
|
1500
1502
|
--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
|
|
1501
1503
|
--sbb-navigation-grid-column: 1 / -1;
|
|
@@ -1527,7 +1529,7 @@ summary {
|
|
|
1527
1529
|
--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
|
|
1528
1530
|
--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
|
|
1529
1531
|
--sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
|
|
1530
|
-
--sbb-navigation-marker-letter-spacing: var(--sbb-
|
|
1532
|
+
--sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
|
|
1531
1533
|
--sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
|
|
1532
1534
|
--sbb-navigation-section-column: 1 / -1;
|
|
1533
1535
|
--sbb-navigation-section-position: fixed;
|
|
@@ -2250,7 +2252,7 @@ img {
|
|
|
2250
2252
|
min-width: var(--sbb-spacing-fixed-4x);
|
|
2251
2253
|
max-height: var(--sbb-spacing-fixed-4x);
|
|
2252
2254
|
line-height: var(--sbb-typo-line-height-text);
|
|
2253
|
-
letter-spacing: var(--sbb-
|
|
2255
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2254
2256
|
font-size: var(--sbb-text-font-size-xxs);
|
|
2255
2257
|
font-weight: bold;
|
|
2256
2258
|
outline: var(--sbb-border-width-1x) solid transparent;
|
|
@@ -2338,7 +2340,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
2338
2340
|
opacity: 1;
|
|
2339
2341
|
background-color: transparent;
|
|
2340
2342
|
font-size: var(--sbb-form-field-input-text-size) !important;
|
|
2341
|
-
letter-spacing: var(--sbb-
|
|
2343
|
+
letter-spacing: var(--sbb-letter-spacing-text) !important;
|
|
2342
2344
|
font-family: var(--sbb-typo-font-family) !important;
|
|
2343
2345
|
line-height: var(--sbb-typo-line-height-text) !important;
|
|
2344
2346
|
}
|
|
@@ -2501,11 +2503,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
|
2501
2503
|
align-items: baseline;
|
|
2502
2504
|
color: var(--sbb-color-1);
|
|
2503
2505
|
font-size: var(--sbb-text-font-size-xs);
|
|
2504
|
-
letter-spacing: var(--sbb-
|
|
2506
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2505
2507
|
}
|
|
2506
2508
|
.sbb-header-info strong + * {
|
|
2507
2509
|
font-size: var(--sbb-text-font-size-xxs);
|
|
2508
|
-
letter-spacing: var(--sbb-
|
|
2510
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2509
2511
|
color: var(--sbb-color-granite);
|
|
2510
2512
|
color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2511
2513
|
}
|
|
@@ -2590,7 +2592,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2590
2592
|
}
|
|
2591
2593
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
|
|
2592
2594
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
2593
|
-
letter-spacing: var(--sbb-
|
|
2595
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2594
2596
|
font-weight: bold;
|
|
2595
2597
|
background-color: var(--sbb-table-background-color);
|
|
2596
2598
|
border-block-end: var(--sbb-table-border);
|
|
@@ -2600,7 +2602,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2600
2602
|
}
|
|
2601
2603
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
|
|
2602
2604
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
2603
|
-
letter-spacing: var(--sbb-
|
|
2605
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2604
2606
|
background-color: var(--sbb-table-background-color);
|
|
2605
2607
|
border-block-end: var(--sbb-table-border);
|
|
2606
2608
|
border-inline-end: var(--sbb-table-border);
|
|
@@ -2628,7 +2630,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2628
2630
|
var(--sbb-color-cement)
|
|
2629
2631
|
);
|
|
2630
2632
|
font-size: var(--sbb-text-font-size-xs);
|
|
2631
|
-
letter-spacing: var(--sbb-
|
|
2633
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2632
2634
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
2633
2635
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
2634
2636
|
text-align: left;
|
|
@@ -2727,7 +2729,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
|
|
|
2727
2729
|
var(--sbb-color-cement)
|
|
2728
2730
|
);
|
|
2729
2731
|
font-size: var(--sbb-text-font-size-xs);
|
|
2730
|
-
letter-spacing: var(--sbb-
|
|
2732
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2731
2733
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
2732
2734
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
2733
2735
|
text-align: left;
|
|
@@ -3007,7 +3009,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3007
3009
|
color: var(--sbb-color-granite);
|
|
3008
3010
|
color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3009
3011
|
line-height: var(--sbb-typo-line-height-text);
|
|
3010
|
-
letter-spacing: var(--sbb-
|
|
3012
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3011
3013
|
font-size: var(--sbb-text-font-size-xs);
|
|
3012
3014
|
}
|
|
3013
3015
|
|
|
@@ -3217,7 +3219,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3217
3219
|
|
|
3218
3220
|
.sbb-list:where(dl) {
|
|
3219
3221
|
line-height: var(--sbb-typo-line-height-text);
|
|
3220
|
-
letter-spacing: var(--sbb-
|
|
3222
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3221
3223
|
font-size: var(--sbb-text-font-size-s);
|
|
3222
3224
|
margin: 0;
|
|
3223
3225
|
padding: 0;
|
|
@@ -3290,7 +3292,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3290
3292
|
border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
|
|
3291
3293
|
border-radius: 50%;
|
|
3292
3294
|
line-height: var(--sbb-typo-line-height-text);
|
|
3293
|
-
letter-spacing: var(--sbb-
|
|
3295
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3294
3296
|
font-size: var(--sbb-text-font-size-xxs);
|
|
3295
3297
|
font-weight: bold;
|
|
3296
3298
|
}
|
|
@@ -3528,7 +3530,7 @@ sup {
|
|
|
3528
3530
|
font-family: var(--sbb-typo-font-family);
|
|
3529
3531
|
font-weight: normal;
|
|
3530
3532
|
line-height: var(--sbb-typo-line-height-text);
|
|
3531
|
-
letter-spacing: var(--sbb-
|
|
3533
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3532
3534
|
font-size: var(--sbb-text-font-size);
|
|
3533
3535
|
}
|
|
3534
3536
|
|
|
@@ -3562,7 +3564,7 @@ sup {
|
|
|
3562
3564
|
|
|
3563
3565
|
.sbb-legend {
|
|
3564
3566
|
line-height: var(--sbb-typo-line-height-text);
|
|
3565
|
-
letter-spacing: var(--sbb-
|
|
3567
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3566
3568
|
font-size: var(--sbb-text-font-size-xs);
|
|
3567
3569
|
padding: 0;
|
|
3568
3570
|
color: var(--sbb-color-granite);
|
package/standard-theme.css
CHANGED
|
@@ -124,11 +124,13 @@ summary {
|
|
|
124
124
|
font-family: var(--sbb-typo-font-family);
|
|
125
125
|
font-weight: normal;
|
|
126
126
|
line-height: var(--sbb-typo-line-height-text);
|
|
127
|
-
letter-spacing: var(--sbb-
|
|
127
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
128
128
|
font-size: var(--sbb-text-font-size);
|
|
129
129
|
color-scheme: light dark;
|
|
130
130
|
color: var(--sbb-font-color-default);
|
|
131
131
|
background-color: var(--sbb-background-color-1);
|
|
132
|
+
--sbb-letter-spacing-heading: var(--sbb-typo-letter-spacing-heading);
|
|
133
|
+
--sbb-letter-spacing-text: var(--sbb-typo-letter-spacing-text);
|
|
132
134
|
--sbb-animation-duration-1x: 0.04s;
|
|
133
135
|
--sbb-animation-duration-2x: 0.08s;
|
|
134
136
|
--sbb-animation-duration-3x: 0.12s;
|
|
@@ -1495,7 +1497,7 @@ summary {
|
|
|
1495
1497
|
--sbb-navigation-action-color: var(--sbb-color-4-negative);
|
|
1496
1498
|
--sbb-navigation-action-icon-display: none;
|
|
1497
1499
|
--sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
|
|
1498
|
-
--sbb-navigation-action-letter-spacing: var(--sbb-
|
|
1500
|
+
--sbb-navigation-action-letter-spacing: var(--sbb-letter-spacing-heading);
|
|
1499
1501
|
--sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
|
|
1500
1502
|
--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
|
|
1501
1503
|
--sbb-navigation-grid-column: 1 / -1;
|
|
@@ -1527,7 +1529,7 @@ summary {
|
|
|
1527
1529
|
--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
|
|
1528
1530
|
--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
|
|
1529
1531
|
--sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
|
|
1530
|
-
--sbb-navigation-marker-letter-spacing: var(--sbb-
|
|
1532
|
+
--sbb-navigation-marker-letter-spacing: var(--sbb-letter-spacing-heading);
|
|
1531
1533
|
--sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
|
|
1532
1534
|
--sbb-navigation-section-column: 1 / -1;
|
|
1533
1535
|
--sbb-navigation-section-position: fixed;
|
|
@@ -2250,7 +2252,7 @@ img {
|
|
|
2250
2252
|
min-width: var(--sbb-spacing-fixed-4x);
|
|
2251
2253
|
max-height: var(--sbb-spacing-fixed-4x);
|
|
2252
2254
|
line-height: var(--sbb-typo-line-height-text);
|
|
2253
|
-
letter-spacing: var(--sbb-
|
|
2255
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2254
2256
|
font-size: var(--sbb-text-font-size-xxs);
|
|
2255
2257
|
font-weight: bold;
|
|
2256
2258
|
outline: var(--sbb-border-width-1x) solid transparent;
|
|
@@ -2338,7 +2340,7 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
2338
2340
|
opacity: 1;
|
|
2339
2341
|
background-color: transparent;
|
|
2340
2342
|
font-size: var(--sbb-form-field-input-text-size) !important;
|
|
2341
|
-
letter-spacing: var(--sbb-
|
|
2343
|
+
letter-spacing: var(--sbb-letter-spacing-text) !important;
|
|
2342
2344
|
font-family: var(--sbb-typo-font-family) !important;
|
|
2343
2345
|
line-height: var(--sbb-typo-line-height-text) !important;
|
|
2344
2346
|
}
|
|
@@ -2501,11 +2503,11 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
|
|
|
2501
2503
|
align-items: baseline;
|
|
2502
2504
|
color: var(--sbb-color-1);
|
|
2503
2505
|
font-size: var(--sbb-text-font-size-xs);
|
|
2504
|
-
letter-spacing: var(--sbb-
|
|
2506
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2505
2507
|
}
|
|
2506
2508
|
.sbb-header-info strong + * {
|
|
2507
2509
|
font-size: var(--sbb-text-font-size-xxs);
|
|
2508
|
-
letter-spacing: var(--sbb-
|
|
2510
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2509
2511
|
color: var(--sbb-color-granite);
|
|
2510
2512
|
color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
2511
2513
|
}
|
|
@@ -2590,7 +2592,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2590
2592
|
}
|
|
2591
2593
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) th {
|
|
2592
2594
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
2593
|
-
letter-spacing: var(--sbb-
|
|
2595
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2594
2596
|
font-weight: bold;
|
|
2595
2597
|
background-color: var(--sbb-table-background-color);
|
|
2596
2598
|
border-block-end: var(--sbb-table-border);
|
|
@@ -2600,7 +2602,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2600
2602
|
}
|
|
2601
2603
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) td {
|
|
2602
2604
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
2603
|
-
letter-spacing: var(--sbb-
|
|
2605
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2604
2606
|
background-color: var(--sbb-table-background-color);
|
|
2605
2607
|
border-block-end: var(--sbb-table-border);
|
|
2606
2608
|
border-inline-end: var(--sbb-table-border);
|
|
@@ -2628,7 +2630,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2628
2630
|
var(--sbb-color-cement)
|
|
2629
2631
|
);
|
|
2630
2632
|
font-size: var(--sbb-text-font-size-xs);
|
|
2631
|
-
letter-spacing: var(--sbb-
|
|
2633
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2632
2634
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
2633
2635
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
2634
2636
|
text-align: left;
|
|
@@ -2727,7 +2729,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
|
|
|
2727
2729
|
var(--sbb-color-cement)
|
|
2728
2730
|
);
|
|
2729
2731
|
font-size: var(--sbb-text-font-size-xs);
|
|
2730
|
-
letter-spacing: var(--sbb-
|
|
2732
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
2731
2733
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
2732
2734
|
margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
|
|
2733
2735
|
text-align: left;
|
|
@@ -3007,7 +3009,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3007
3009
|
color: var(--sbb-color-granite);
|
|
3008
3010
|
color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3009
3011
|
line-height: var(--sbb-typo-line-height-text);
|
|
3010
|
-
letter-spacing: var(--sbb-
|
|
3012
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3011
3013
|
font-size: var(--sbb-text-font-size-xs);
|
|
3012
3014
|
}
|
|
3013
3015
|
|
|
@@ -3217,7 +3219,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3217
3219
|
|
|
3218
3220
|
.sbb-list:where(dl) {
|
|
3219
3221
|
line-height: var(--sbb-typo-line-height-text);
|
|
3220
|
-
letter-spacing: var(--sbb-
|
|
3222
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3221
3223
|
font-size: var(--sbb-text-font-size-s);
|
|
3222
3224
|
margin: 0;
|
|
3223
3225
|
padding: 0;
|
|
@@ -3290,7 +3292,7 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3290
3292
|
border: var(--sbb-border-width-1x) solid light-dark(var(--sbb-color-cement), var(--sbb-color-smoke));
|
|
3291
3293
|
border-radius: 50%;
|
|
3292
3294
|
line-height: var(--sbb-typo-line-height-text);
|
|
3293
|
-
letter-spacing: var(--sbb-
|
|
3295
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3294
3296
|
font-size: var(--sbb-text-font-size-xxs);
|
|
3295
3297
|
font-weight: bold;
|
|
3296
3298
|
}
|
|
@@ -3528,7 +3530,7 @@ sup {
|
|
|
3528
3530
|
font-family: var(--sbb-typo-font-family);
|
|
3529
3531
|
font-weight: normal;
|
|
3530
3532
|
line-height: var(--sbb-typo-line-height-text);
|
|
3531
|
-
letter-spacing: var(--sbb-
|
|
3533
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3532
3534
|
font-size: var(--sbb-text-font-size);
|
|
3533
3535
|
}
|
|
3534
3536
|
|
|
@@ -3562,7 +3564,7 @@ sup {
|
|
|
3562
3564
|
|
|
3563
3565
|
.sbb-legend {
|
|
3564
3566
|
line-height: var(--sbb-typo-line-height-text);
|
|
3565
|
-
letter-spacing: var(--sbb-
|
|
3567
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
3566
3568
|
font-size: var(--sbb-text-font-size-xs);
|
|
3567
3569
|
padding: 0;
|
|
3568
3570
|
color: var(--sbb-color-granite);
|
package/status.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a}from"./core.js";import{SbbIconNameMixin as o}from"./icon.pure.js";var s=`:host{--sbb-status-text-color:var(--sbb-status-color);gap:var(--sbb-status-gap);color:var(--sbb-status-text-color);font-size:var(--sbb-status-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex}:host([type=error]){--sbb-status-color:var(--sbb-color-error)}:host([type=success]){--sbb-status-color:var(--sbb-color-success)}:host([type=warning]){--sbb-status-color:var(--sbb-color-2)}:host([type=pending]){--sbb-status-color:var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color:var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color:var(--sbb-color-5);--sbb-status-text-color:var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color:var(--sbb-color-pink)}:host(:is(:state(slotted-title),[state--slotted-title])){--sbb-status-gap:var(--sbb-spacing-responsive-xxxs);--_sbb-status-title-font-size:var(--sbb-heading-font-size-5);--_sbb-status-title-line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-status-title-color)}.sbb-status__icon{color:var(--sbb-status-color);flex-shrink:0;margin-block-start:calc((var(--_sbb-status-title-font-size,var(--sbb-status-font-size)) * var(--_sbb-status-title-line-height,var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2);display:flex}.sbb-status__content-slot{margin:0;padding:0;display:inline}::slotted(sbb-title){margin-block:0}
|
|
2
2
|
`;let c=(()=>{let c=o(a),l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[i({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-status`}static{this.styles=[r(s)]}#e;get type(){return this.#e}set type(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}renderIconName(){return super.renderIconName()||this._statusTypes.get(this.type)}render(){return n`
|
|
3
3
|
<span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
|
|
4
4
|
<span class="sbb-status__content">
|
package/stepper.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDisabledMixin as r,SbbElement as i,SbbMediaMatcherController as a,SbbMediaQueryBreakpointLargeAndAbove as o,SbbMediaQueryBreakpointSmallAndAbove as s,SbbMediaQueryBreakpointUltraAndAbove as c,SbbMediaQueryBreakpointZeroAndAbove as l,SbbPropertyWatcherController as u,appendAriaElements as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,removeAriaElements as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{ResizeController as _}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as v,__runInitializers as y}from"tslib";import{IntersectionController as b}from"@lit-labs/observers/intersection-controller.js";import{property as x}from"lit/decorators.js";var S=`:host{--sbb-step-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));gap:var(--sbb-step-label-gap);min-width:0;max-width:fit-content;cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDisabledMixin as r,SbbElement as i,SbbMediaMatcherController as a,SbbMediaQueryBreakpointLargeAndAbove as o,SbbMediaQueryBreakpointSmallAndAbove as s,SbbMediaQueryBreakpointUltraAndAbove as c,SbbMediaQueryBreakpointZeroAndAbove as l,SbbPropertyWatcherController as u,appendAriaElements as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,removeAriaElements as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{ResizeController as _}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as v,__runInitializers as y}from"tslib";import{IntersectionController as b}from"@lit-labs/observers/intersection-controller.js";import{property as x}from"lit/decorators.js";var S=`:host{--sbb-step-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));gap:var(--sbb-step-label-gap);min-width:0;max-width:fit-content;cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;position:relative}:host:before{font-size:var(--sbb-step-label-number-font-size);font-weight:var(--sbb-step-label-font-weight-selected,normal);top:50%;left:50%;z-index:1;translate:-50% -50%;translate:-50% calc(-50% + var(--sbb-step-label-translate-y-content-hover,0px));transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);line-height:1;position:absolute;inset-block-start:calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:var(--sbb-color-3);--sbb-step-label-font-weight-selected:bold}@media (forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:Highlight!important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap:var(--sbb-step-label-gap-s);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-s);--sbb-step-label-font-size:var(--sbb-step-label-font-size-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-step-label-gap:var(--sbb-step-label-gap-m);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-m);--sbb-step-label-font-size:var(--sbb-step-label-font-size-m)}:host(:disabled){--sbb-step-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite));--sbb-step-label-prefix-border-style:dashed}@media (forced-colors:active){:host(:disabled){--sbb-step-label-color:GrayText!important}}@media (any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor:var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color:var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover:-.0625rem;--sbb-step-label-prefix-size-grow-hover:calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label__prefix{width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";inset:calc(var(--sbb-step-label-prefix-size-grow-hover,0px));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset;position:absolute}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover,0);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}
|
|
2
2
|
`,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this._internalDisable||this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this._internalDisable=!1,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&!this.disabled&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){this._internalDisable=!0;try{super.disabled=e}finally{this._internalDisable=!1}}render(){return e`
|
|
3
3
|
<span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
|
|
4
4
|
<span class="sbb-step-label__text"><slot></slot></span>
|
package/table/_table.global.scss
CHANGED
|
@@ -77,7 +77,7 @@ $theme: 'standard' !default;
|
|
|
77
77
|
|
|
78
78
|
th {
|
|
79
79
|
font-size: var(--sbb-table-header-cell-font-size);
|
|
80
|
-
letter-spacing: var(--sbb-
|
|
80
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
81
81
|
font-weight: bold;
|
|
82
82
|
background-color: var(--sbb-table-background-color);
|
|
83
83
|
border-block-end: var(--sbb-table-border);
|
|
@@ -88,7 +88,7 @@ $theme: 'standard' !default;
|
|
|
88
88
|
|
|
89
89
|
td {
|
|
90
90
|
font-size: var(--sbb-table-data-cell-font-size);
|
|
91
|
-
letter-spacing: var(--sbb-
|
|
91
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
92
92
|
background-color: var(--sbb-table-background-color);
|
|
93
93
|
border-block-end: var(--sbb-table-border);
|
|
94
94
|
border-inline-end: var(--sbb-table-border);
|
|
@@ -130,7 +130,7 @@ $theme: 'standard' !default;
|
|
|
130
130
|
);
|
|
131
131
|
|
|
132
132
|
font-size: var(--sbb-text-font-size-xs);
|
|
133
|
-
letter-spacing: var(--sbb-
|
|
133
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
134
134
|
|
|
135
135
|
// Defaults are needed for cases where the caption is used outside a table
|
|
136
136
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -252,7 +252,7 @@ $theme: 'standard' !default;
|
|
|
252
252
|
);
|
|
253
253
|
|
|
254
254
|
font-size: var(--sbb-text-font-size-xs);
|
|
255
|
-
letter-spacing: var(--sbb-
|
|
255
|
+
letter-spacing: var(--sbb-letter-spacing-text);
|
|
256
256
|
|
|
257
257
|
// Defaults are needed for cases where the caption is used outside a table
|
|
258
258
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
package/tabs.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{ref as o}from"lit/directives/ref.js";import{SbbDisabledMixin as s,SbbElement as c,SbbNamedSlotListMixin as l,SbbPropertyWatcherController as u,forceType as d,getNextElementIndex as f,hostScrollbarStyles as p,isArrowKeyPressed as m,omitEmptyConverter as h,ɵstateController as g}from"./core.js";import{html as _,unsafeStatic as v}from"lit/static-html.js";import{SbbIconNameMixin as y}from"./icon.pure.js";var b=`:host{flex-direction:column;display:flex}:host(:not([size])){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-default)}:host([size=s]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-s)}:host([size=l]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-l)}:host([size=xl]){--sbb-tab-group-content-gap:var(--sbb-tab-group-content-gap-size-xl)}.sbb-tab-group,.sbb-tab-nav-bar{flex-wrap:wrap;display:flex}
|
|
2
|
-
`,x=`:host{--sbb-tab-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-tab-label-outline-border-radius-internal:calc(var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset))}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height:var(--sbb-size-element-xs);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size:var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events,unset)}@media (forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-
|
|
2
|
+
`,x=`:host{--sbb-tab-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-tab-label-outline-border-radius-internal:calc(var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset))}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height:var(--sbb-size-element-xs);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size:var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height:var(--sbb-size-element-m);--sbb-tab-label-inline-padding:var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size:var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events,unset)}@media (forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration);margin:0;display:flex;position:relative}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{content:"";height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale,0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color;position:absolute;inset-block-end:0;inset-inline:0}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{content:"";width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color);position:absolute;inset-block-end:0;inset-inline-start:0}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor:unset;--sbb-tab-label-pointer-events:none;--sbb-tab-label-text-decoration:line-through}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color:GrayText;--sbb-tab-label-amount-color:GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color:var(--sbb-color-3);--sbb-tab-label-cursor:unset;--sbb-tab-label-pointer-events:none;--sbb-tab-label-marker-scale:1}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}@media (any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale:1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color:var(--sbb-color-3)}@media (forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color:ButtonText;--sbb-tab-label-amount-color:ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}
|
|
3
3
|
`;const S=i(b),C=i(x);var w=`:host{--sbb-tab-group-animation-duration:0s;gap:var(--sbb-tab-group-content-gap)}:host(:is(:state(initialized),[state--initialized])){--sbb-tab-group-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}.sbb-tab-group-content{height:var(--sbb-tab-content-height);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}:host([fixed-height]) ::slotted(sbb-tab){height:100%;overflow:auto}
|
|
4
4
|
`,T=class extends Event{get activeIndex(){return this._activeIndex}get activeTabLabel(){return this._activeTabLabel}get activeTab(){return this._activeTab}get previousIndex(){return this._previousIndex}get previousTabLabel(){return this._previousTabLabel}get previousTab(){return this._previousTab}constructor({activeIndex:e,activeTabLabel:t,activeTab:n,previousIndex:r,previousTabLabel:i,previousTab:a}){super(`tabchange`,{bubbles:!0,composed:!0}),this._activeIndex=e,this._activeTabLabel=t,this._activeTab=n,this._previousIndex=r,this._previousTabLabel=i,this._previousTab=a}};let E=(()=>{let s=c,l,u=[],p=[],h,_=[],v=[],y,b=[],x=[];return class extends s{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(s[Symbol.metadata]??null):void 0;l=[a({reflect:!0})],h=[d(),a({attribute:`initial-selected-index`,type:Number})],y=[d(),a({attribute:`fixed-height`,type:Boolean,reflect:!0})],e(this,null,l,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},u,p),e(this,null,h,{kind:`accessor`,name:`initialSelectedIndex`,static:!1,private:!1,access:{has:e=>`initialSelectedIndex`in e,get:e=>e.initialSelectedIndex,set:(e,t)=>{e.initialSelectedIndex=t}},metadata:t},_,v),e(this,null,y,{kind:`accessor`,name:`fixedHeight`,static:!1,private:!1,access:{has:e=>`fixedHeight`in e,get:e=>e.fixedHeight,set:(e,t)=>{e.fixedHeight=t}},metadata:t},b,x),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tab-group`}static{this.styles=[S,i(w)]}static{this.events={tabchange:`tabchange`}}#e;get size(){return this.#e}set size(e){this.#e=e}#t;get initialSelectedIndex(){return this.#t}set initialSelectedIndex(e){this.#t=e}#n;get fixedHeight(){return this.#n}set fixedHeight(e){this.#n=e}get labels(){return Array.from(this.children??[]).filter(e=>/^sbb-tab-label$/u.test(e.localName))}get tabs(){return Array.from(this.children??[]).filter(e=>/^sbb-tab$/u.test(e.localName))}constructor(){super(),this._tabGroupResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onTabGroupElementResize()}),this.#e=t(this,u,null),this.#t=(t(this,p),t(this,_,0)),this.#n=(t(this,v),t(this,b,!1)),t(this,x),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}firstUpdated(e){super.firstUpdated(e),this.labels.forEach(e=>e.linkToTab()),this._initSelection(),Promise.resolve().then(()=>this.internals.states.add(`initialized`)),this._tabGroupResizeObserver.observe(this._tabGroupElement)}disableTab(e){this.labels[e]&&(this.labels[e].disabled=!0)}enableTab(e){this.labels[e]&&(this.labels[e].disabled=!1)}activateTab(e){this.labels[e]?.activate()}_enabledTabs(){return this.labels.filter(e=>(customElements.upgrade(e),!e.disabled))}_onContentSlotChange(){this._contentSlotChangeDebounceId&&clearTimeout(this._contentSlotChangeDebounceId),this._contentSlotChangeDebounceId=setTimeout(()=>{this.labels.forEach(e=>e.linkToTab()),this.labels.find(e=>e.active)?.activate()},150)}_onLabelSlotChange(){this.labels.forEach(e=>e.linkToTab()),this._ensureActiveTab()}_ensureActiveTab(){this.matches?.(`:is(:state(initialized),[state--initialized])`)&&!this.labels.some(e=>e.active)&&this._initSelection()}_initSelection(){let e=this.labels[this.initialSelectedIndex];if(e&&(customElements.upgrade(e),this.initialSelectedIndex>=0&&this.initialSelectedIndex<this.labels.length&&!e.disabled)){e.activate();return}this._enabledTabs()[0]?.activate()}_onTabGroupElementResize(){let e=this.labels;e.forEach(t=>{g(t)?.toggle(`has-divider`,t===e[0]||t.offsetLeft===e[0].offsetLeft)}),this.style.setProperty(`--sbb-tab-group-width`,`${this._tabGroupElement.clientWidth}px`)}_handleKeyDown(e){let t=this._enabledTabs();if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=t.findIndex(e=>e.active),r=f(e,n,t.length);t[r]?.activate(),t[r]?.focus(),e.preventDefault()}}setTabContentHeight(e){this.style.setProperty(`--sbb-tab-content-height`,`${e}px`)}render(){return r`
|
|
5
5
|
<div
|
package/tag.pure.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbButtonLikeBaseElement as o,SbbDisabledMixin as s,SbbDisabledTabIndexActionMixin as c,SbbElement as l,SbbNamedSlotListMixin as u,SbbPropertyWatcherController as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,omitEmptyConverter as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{display:block}.sbb-tag-group__list{gap:var(--sbb-spacing-fixed-3x);flex-wrap:wrap;display:flex}.sbb-tag-group__list>:is(li,span){max-width:100%;display:flex}
|
|
2
2
|
`;let v=(()=>{let o=s(u(l)),c=[],d,h=[],g=[],v,y=[],b=[],x,S=[],C=[],w;return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;d=[f(),a({attribute:`accessibility-label`})],v=[f(),a({type:Boolean})],x=[a({reflect:!0})],w=[a()],e(this,null,d,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},h,g),e(this,null,v,{kind:`accessor`,name:`multiple`,static:!1,private:!1,access:{has:e=>`multiple`in e,get:e=>e.multiple,set:(e,t)=>{e.multiple=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},S,C),e(this,null,w,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,c),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag-group`}static{this.styles=[i(_)]}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}#t;get multiple(){return this.#t}set multiple(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set value(e){if(r||!this.hasUpdated){this._value=e;return}this._applyValueToTags(e)}get value(){return r||!this.hasUpdated?this._value:this.multiple?this.tags.filter(e=>e.checked).map(e=>e.value):this.tags.find(e=>e.checked)?.value??null}get tags(){return Array.from(this.querySelectorAll?.(`sbb-tag`)??[],e=>(customElements.upgrade(e),e))}constructor(){super(),this.listChildLocalNames=(t(this,c),[`sbb-tag`,`div`]),this.#e=t(this,h,``),this.#t=(t(this,g),t(this,y,!1)),this.#n=(t(this,b),t(this,S,null)),this._value=(t(this,C),null),this.addEventListener?.(`keydown`,e=>this._handleArrowKeyDown(e))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&!this.hasUpdated&&this._value&&this._applyValueToTags(this.value),e.has(`disabled`)&&this.tags.forEach(e=>e.requestUpdate?.(`disabled`)),(e.has(`listChildren`)||e.has(`multiple`))&&(this.multiple?e.has(`multiple`)&&this._enabledTags().forEach(e=>e.tabIndex=0):(this.tags.filter(e=>e.checked).slice(1).forEach(e=>e.checked=!1),this.updateExclusiveTabIndex())),(e.has(`accessibilityLabel`)||e.has(`multiple`))&&(this.multiple?(this.internals.role=this.accessibilityLabel?null:`group`,this.internals.ariaLabel=null):(this.internals.role=`radiogroup`,this.internals.ariaLabel=this.accessibilityLabel))}_enabledTags(){return this.tags.filter(e=>!e.disabled)}updateExclusiveTabIndex(){let e=this._enabledTags(),t=e.find(e=>e.checked)??e[0];e.forEach(e=>e.tabIndex=e===t?0:-1)}_handleArrowKeyDown(e){if(this.multiple||!m(e))return;e.preventDefault();let t=this._enabledTags(),n=t.indexOf(e.target);if(n===-1)return;let r=t[p(e,n,t.length)];t.forEach(e=>e.tabIndex=e===r?0:-1),r.focus()}_applyValueToTags(e){let t=this.tags;if(e===null)t.forEach(e=>e.checked=!1);else if(this.multiple){if(!Array.isArray(e)&&t.every(t=>t.value!==e))try{e=JSON.parse(e)}catch{}let n=Array.isArray(e)?e:[e];t.forEach(e=>e.checked=n.includes(e.value))}else Array.isArray(e)||t.forEach(t=>t.checked=t.value===e)}render(){return n`
|
|
3
3
|
${this.renderList({class:`sbb-tag-group__list`,ariaLabel:this.multiple?this.accessibilityLabel:void 0})}
|
|
4
|
-
`}}})();var y=`:host{--sbb-tag-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));max-width:100%;display:inline-block;outline:none!important}:host([size=s]){--sbb-tag-height:var(--sbb-tag-height-s);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-s)}:host([size=m]){--sbb-tag-height:var(--sbb-tag-height-m);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-m)}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color:var(--sbb-border-color-3);--sbb-tag-border-width:var(--sbb-border-width-2x)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-width:var(--sbb-border-width-4x);--sbb-tag-border-color:Highlight!important}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-tag-amount-color:var(--sbb-tag-text-color);--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-cement),var(--sbb-color-smoke));--sbb-tag-border-style:dashed;--sbb-tag-cursor:unset;--sbb-tag-pointer-events:none}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:GrayText;--sbb-tag-amount-color:GrayText;--sbb-tag-border-color:GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color:light-dark(var(--sbb-color-metal),var(--sbb-color-cement));--sbb-tag-border-style:dashed}@media (any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-inset:calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift:translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color:Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-iron),var(--sbb-color-storm));--sbb-tag-border-width:var(--sbb-border-width-2x);--sbb-tag-text-color:var(--sbb-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color:Highlight;--sbb-tag-text-color:ButtonText}}.sbb-tag{height:var(--sbb-tag-height);max-width:100%;font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-
|
|
4
|
+
`}}})();var y=`:host{--sbb-tag-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));max-width:100%;display:inline-block;outline:none!important}:host([size=s]){--sbb-tag-height:var(--sbb-tag-height-s);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-s)}:host([size=m]){--sbb-tag-height:var(--sbb-tag-height-m);--sbb-tag-padding-inline:var(--sbb-tag-padding-inline-m)}:host(:is(:state(checked),[state--checked])){--sbb-tag-border-color:var(--sbb-border-color-3);--sbb-tag-border-width:var(--sbb-border-width-2x)}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-tag-border-width:var(--sbb-border-width-4x);--sbb-tag-border-color:Highlight!important}}:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-aluminium));--sbb-tag-amount-color:var(--sbb-tag-text-color);--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-cement),var(--sbb-color-smoke));--sbb-tag-border-style:dashed;--sbb-tag-cursor:unset;--sbb-tag-pointer-events:none}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-tag-text-color:GrayText;--sbb-tag-amount-color:GrayText;--sbb-tag-border-color:GrayText}}:host(:is(:state(checked),[state--checked]):is(:disabled,[disabled-interactive])){--sbb-tag-border-color:light-dark(var(--sbb-color-metal),var(--sbb-color-cement));--sbb-tag-border-style:dashed}@media (any-hover:hover){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-inset:calc(var(--sbb-border-width-2x) * -1);--sbb-tag-content-shift:translateY(calc(var(--sbb-border-width-1x) * -1))}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:disabled,[disabled-interactive],:active,:is(:state(active),[state--active]))){--sbb-tag-border-color:Highlight}}:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-background-color:var(--sbb-background-color-3);--sbb-tag-border-color:light-dark(var(--sbb-color-iron),var(--sbb-color-storm));--sbb-tag-border-width:var(--sbb-border-width-2x);--sbb-tag-text-color:var(--sbb-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active])):not(:disabled,[disabled-interactive])){--sbb-tag-border-color:Highlight;--sbb-tag-text-color:ButtonText}}.sbb-tag{height:var(--sbb-tag-height);max-width:100%;font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);align-items:center;gap:var(--sbb-tag-gap);padding-inline:var(--sbb-tag-padding-inline);cursor:var(--sbb-tag-cursor,var(--sbb-cursor-pointer));border-radius:var(--sbb-tag-border-radius);color:var(--sbb-tag-text-color);transition:color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);-webkit-tap-highlight-color:transparent;user-select:none;pointer-events:var(--sbb-tag-pointer-events,unset);display:flex;position:relative}.sbb-tag:before{content:"";inset:var(--sbb-tag-inset,0);background-color:var(--sbb-tag-background-color);border:var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);border-radius:var(--sbb-tag-border-radius);transition-duration:var(--sbb-tag-animation-duration);transition-timing-function:var(--sbb-tag-animation-easing);transition-property:inset,background-color,border-color,box-shadow;position:absolute}:host(:focus-visible) .sbb-tag:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-tag__icon{height:calc(var(--sbb-typo-line-height-text) * 1em);flex-shrink:0;align-items:center;display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tag__icon{display:none}.sbb-tag__text{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.sbb-tag__amount{color:var(--sbb-tag-amount-color)}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tag__amount{display:none}.sbb-tag--shift{transition:transform var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);transform:var(--sbb-tag-content-shift,0);will-change:transform}
|
|
5
5
|
`;let b=(()=>{let r=g(c(o)),s,l=[],u=[],p,m=[],_=[],v,b=[],x=[],S,C=[],w=[];return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;s=[a()],p=[f(),a({reflect:!0,converter:h})],v=[f(),a({reflect:!1,type:Boolean})],S=[a({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},l,u),e(this,null,p,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},m,_),e(this,null,v,{kind:`accessor`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:t},b,x),e(this,null,S,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},C,w),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tag`}static{this.styles=[i(y)]}static{this.events={input:`input`,didChange:`didChange`,change:`change`}}#e;get value(){return this.#e}set value(e){this.#e=e}#t;get amount(){return this.#t}set amount(e){this.#t=e}#n;get checked(){return this.#n}set checked(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}constructor(){super(),this.#e=t(this,l,null),this.#t=(t(this,u),t(this,m,``)),this.#n=(t(this,_),t(this,b,!1)),this.#r=(t(this,x),t(this,C,null)),this._checkedChangedByUser=(t(this,w),!1),this.addEventListener?.(`click`,()=>this._handleClick()),this.addController(new d(this,()=>this._tagGroup(),{multiple:e=>this._updateAriaRole(e),size:e=>{this.size=e.size}})),this._updateCheckedState()}_updateCheckedState(){this.toggleState(`checked`,this.checked),this.updateFormValue(),this._updateAriaRole()}_tagGroup(){return this.closest?.(`sbb-tag-group`)??null}_updateAriaRole(e=this._tagGroup()){e&&!e.multiple?(this.internals.role=`radio`,this.internals.ariaChecked=`${this.checked}`,this.internals.ariaPressed=null):(this.internals.role=`button`,this.internals.ariaChecked=null,this.internals.ariaPressed=`${this.checked}`)}isDisabledExternally(){return this._tagGroup()?.disabled??!1}_handleClick(){if(this.disabled)return;let e=this._tagGroup();e&&!e.multiple&&this.checked||(this._setCheckedFromUser(!this.checked),this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})))}_setCheckedFromUser(e){this.checked!==e&&(this._checkedChangedByUser=!0,this.checked=e)}_dispatchChangeEvents(){this.dispatchEvent(new Event(`change`,{bubbles:!0})),this.dispatchEvent(new Event(`didChange`,{bubbles:!0}))}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`checked`&&this._updateCheckedState()}willUpdate(e){super.willUpdate(e);let t=this._checkedChangedByUser;if(e.has(`checked`)){let e=this._tagGroup();e&&!e.multiple&&(this.checked?e.tags.forEach(e=>{e.tabIndex=e===this?0:-1,e!==this&&(t?e._setCheckedFromUser(!1):e.checked=!1)}):e.tags.some(e=>e.checked)||e.updateExclusiveTabIndex())}}updated(e){super.updated(e),e.has(`checked`)&&(this._checkedChangedByUser&&=(this._dispatchChangeEvents(),!1))}formResetCallback(){this.checked=this.hasAttribute(`checked`)}formStateRestoreCallback(e,t){e&&(this.checked=e===`true`)}updateFormValue(){this.checked?super.updateFormValue():this.internals.setFormValue(null)}formState(){return`${this.checked}`}renderTemplate(){return n`
|
|
6
6
|
<span class="sbb-tag__icon sbb-tag--shift"> ${this.renderIconSlot()} </span>
|
|
7
7
|
<span class="sbb-tag__text sbb-tag--shift">
|
package/teaser-panel.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{unsafeCSS as e}from"lit";import{html as t}from"lit/static-html.js";import{SbbElement as n}from"./core.js";var r=`:host{--sbb-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-panel-height:calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));width:100%;height:100%;min-height:var(--_sbb-panel-height);font-size:var(--sbb-panel-font-size);font-weight:var(--sbb-panel-font-weight);line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-
|
|
1
|
+
import{unsafeCSS as e}from"lit";import{html as t}from"lit/static-html.js";import{SbbElement as n}from"./core.js";var r=`:host{--sbb-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-panel-height:calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));width:100%;height:100%;min-height:var(--_sbb-panel-height);font-size:var(--sbb-panel-font-size);font-weight:var(--sbb-panel-font-weight);line-height:var(--sbb-panel-line-height);letter-spacing:var(--sbb-letter-spacing-heading);color:var(--sbb-panel-color);hyphens:auto;display:block;position:relative;inset:0}@media (any-hover:hover){:host(:hover){--sbb-panel-background-color:var(--sbb-panel-background-color-hover)}}.sbb-teaser-panel{justify-content:center;gap:var(--sbb-panel-gap);width:var(--sbb-panel-width);height:var(--_sbb-panel-height);padding-block:var(--sbb-panel-triangle-height);padding-inline:var(--sbb-panel-padding-inline);clip-path:polygon(0 0, 100% var(--sbb-panel-triangle-height), 100% calc(100% - var(--sbb-panel-triangle-height)), 0% 100%);background-color:var(--sbb-panel-background-color);transition:background var(--sbb-panel-animation-duration) var(--sbb-panel-animation-easing);flex-direction:column;display:flex;position:absolute;top:50%;translate:0 -50%}
|
|
2
2
|
`,i=class extends n{static{this.elementName=`sbb-teaser-panel`}static{this.styles=[e(r)]}render(){return t`
|
|
3
3
|
<span class="sbb-teaser-panel">
|
|
4
4
|
<slot></slot>
|
package/teaser-product.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbActionBaseElement as a,SbbLinkBaseElement as o,SbbNegativeMixin as s,screenReaderOnlyStyles as c}from"./core.js";import{html as l}from"lit/static-html.js";var u=`:host{--sbb-teaser-product-background:var(--sbb-teaser-product-background-color);display:block}@media (width>=64rem){:host{--sbb-teaser-product-content-min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing));--sbb-teaser-product-background:linear-gradient(var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end))}}:host([negative]){--sbb-teaser-product-background-color:var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color:var(--sbb-color-4-negative);--sbb-teaser-product-footer-color:var(--sbb-color-4-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-title-color:var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction:to left}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))){--sbb-teaser-product-footer-padding-block-start:0}.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;overflow:hidden}@media (width>=64rem){.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius);position:absolute;inset:0}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){width:100%;height:100%;display:flex}@media (forced-colors:active){.sbb-teaser-product__root:after{content:"";pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius);display:block;position:absolute;inset:0}}.sbb-action-base{text-decoration:none;display:block;position:relative}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block);padding-inline:var(--sbb-teaser-product-container-padding-inline)}@media (width>=64rem){.sbb-teaser-product__container{column-gap:var(--sbb-spacing-responsive-xxl);border-radius:var(--sbb-teaser-product-border-radius);grid:"content."1fr"footnote."/1fr 1fr;display:grid;position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:".content"".footnote"}}.sbb-teaser-product__content{color:var(--sbb-teaser-product-content-color);min-height:var(--sbb-teaser-product-content-min-height,0);align-self:center;align-content:var(--sbb-teaser-product-content-align-content,normal);grid-area:content;margin:0}.sbb-teaser-product__footnote{padding-block:var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);color:var(--sbb-teaser-product-footer-color);font-size:var(--sbb-teaser-product-footer-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbActionBaseElement as a,SbbLinkBaseElement as o,SbbNegativeMixin as s,screenReaderOnlyStyles as c}from"./core.js";import{html as l}from"lit/static-html.js";var u=`:host{--sbb-teaser-product-background:var(--sbb-teaser-product-background-color);display:block}@media (width>=64rem){:host{--sbb-teaser-product-content-min-height:calc(var(--sbb-teaser-product-min-height) - 2 * var(--sbb-teaser-product-container-spacing));--sbb-teaser-product-background:linear-gradient(var(--sbb-teaser-product-background-gradient-direction), var(--sbb-teaser-product-background-color) var(--sbb-teaser-product-background-gradient-start), transparent var(--sbb-teaser-product-background-gradient-end))}}:host([negative]){--sbb-teaser-product-background-color:var(--sbb-background-color-1-negative);--sbb-teaser-product-content-color:var(--sbb-color-4-negative);--sbb-teaser-product-footer-color:var(--sbb-color-4-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-title-color:var(--sbb-color-3-negative)}:host([image-alignment=before]){--sbb-teaser-product-background-gradient-direction:to left}:host(:not(:is(:state(slotted-footnote),[state--slotted-footnote]))){--sbb-teaser-product-footer-padding-block-start:0}.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius) 0 0;overflow:hidden}@media (width>=64rem){.sbb-teaser-product__image-container{border-radius:var(--sbb-teaser-product-border-radius);position:absolute;inset:0}}::slotted(p.sbb-teaser-product--spacing){margin:0}::slotted(sbb-title.sbb-teaser-product--spacing){margin-block-start:0}::slotted(:is(sbb-action-group,:is(:state(action),[state--action])).sbb-teaser-product--spacing){margin-block-start:var(--sbb-spacing-responsive-xxs)}::slotted([slot=image]){width:100%;height:100%;display:flex}@media (forced-colors:active){.sbb-teaser-product__root:after{content:"";pointer-events:none;border:var(--sbb-border-width-2x) solid CanvasText;border-radius:var(--sbb-teaser-product-border-radius);display:block;position:absolute;inset:0}}.sbb-action-base{text-decoration:none;display:block;position:relative}.sbb-teaser-product__container{background:var(--sbb-teaser-product-background);border-radius:0 0 var(--sbb-teaser-product-border-radius) var(--sbb-teaser-product-border-radius);padding-block:var(--sbb-teaser-product-container-padding-block);padding-inline:var(--sbb-teaser-product-container-padding-inline)}@media (width>=64rem){.sbb-teaser-product__container{column-gap:var(--sbb-spacing-responsive-xxl);border-radius:var(--sbb-teaser-product-border-radius);grid:"content."1fr"footnote."/1fr 1fr;display:grid;position:relative}:host([image-alignment=before]) .sbb-teaser-product__container{grid-template-areas:".content"".footnote"}}.sbb-teaser-product__content{color:var(--sbb-teaser-product-content-color);min-height:var(--sbb-teaser-product-content-min-height,0);align-self:center;align-content:var(--sbb-teaser-product-content-align-content,normal);grid-area:content;margin:0}.sbb-teaser-product__footnote{padding-block:var(--sbb-teaser-product-footer-padding-block-start) var(--sbb-teaser-product-footer-padding-block-end);color:var(--sbb-teaser-product-footer-color);font-size:var(--sbb-teaser-product-footer-font-size);letter-spacing:var(--sbb-letter-spacing-text);min-height:var(--sbb-teaser-product-footer-min-height,0);grid-area:footnote}
|
|
2
2
|
`;const d=a=>(()=>{let o=s(a),c,l=[],d=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;c=[i({attribute:`image-alignment`,reflect:!0})],e(this,null,c,{kind:`accessor`,name:`imageAlignment`,static:!1,private:!1,access:{has:e=>`imageAlignment`in e,get:e=>e.imageAlignment,set:(e,t)=>{e.imageAlignment=t}},metadata:t},l,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[r(u)]}#e=t(this,l,`after`);get imageAlignment(){return this.#e}set imageAlignment(e){this.#e=e}renderTemplate(){return n`
|
|
3
3
|
<div class="sbb-teaser-product__root">
|
|
4
4
|
<div class="sbb-teaser-product__image-container"><slot name="image"></slot></div>
|
package/teaser.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbActionBaseElement as a,SbbLinkBaseElement as o,screenReaderOnlyStyles as s}from"./core.js";import{html as c}from"lit/static-html.js";var l=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block}:host([size=l]){--sbb-teaser-gap:var(--sbb-teaser-gap-l);--sbb-teaser-title-gap:var(--sbb-teaser-title-gap-l);--sbb-teaser-button-gap:var(--sbb-teaser-button-gap-l);--sbb-teaser-font-size:var(--sbb-teaser-font-size-l)}:host(:is([alignment=after],[alignment=before])){--sbb-teaser-align-items:start}:host(:is([alignment=before],[alignment=before-centered])){--sbb-teaser-flex-direction:row-reverse}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-teaser-gap-below)}.sbb-teaser__wrapper{display:flex;position:relative}.sbb-teaser__wrapper:before{content:"";user-select:none;width:0;height:0}@media (forced-colors:active){.sbb-teaser__wrapper:after{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);width:100%;max-width:100%;display:flex}.sbb-teaser__content{gap:var(--sbb-teaser-button-gap);flex-direction:column;width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbActionBaseElement as a,SbbLinkBaseElement as o,screenReaderOnlyStyles as s}from"./core.js";import{html as c}from"lit/static-html.js";var l=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block}:host([size=l]){--sbb-teaser-gap:var(--sbb-teaser-gap-l);--sbb-teaser-title-gap:var(--sbb-teaser-title-gap-l);--sbb-teaser-button-gap:var(--sbb-teaser-button-gap-l);--sbb-teaser-font-size:var(--sbb-teaser-font-size-l)}:host(:is([alignment=after],[alignment=before])){--sbb-teaser-align-items:start}:host(:is([alignment=before],[alignment=before-centered])){--sbb-teaser-flex-direction:row-reverse}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-teaser-gap-below)}.sbb-teaser__wrapper{display:flex;position:relative}.sbb-teaser__wrapper:before{content:"";user-select:none;width:0;height:0}@media (forced-colors:active){.sbb-teaser__wrapper:after{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);width:100%;max-width:100%;display:flex}.sbb-teaser__content{gap:var(--sbb-teaser-button-gap);flex-direction:column;width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-letter-spacing-text);max-width:100%;overflow:hidden}:host(:is(:state(slotted-action),[state--slotted-action])) slot[name=action]{display:block}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;max-width:100%;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0 var(--sbb-teaser-title-gap)}
|
|
2
2
|
`;const u=a=>(()=>{let o=a,s,c=[],u=[],d,f=[],p=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[i({reflect:!0})],d=[i({reflect:!0})],e(this,null,s,{kind:`accessor`,name:`alignment`,static:!1,private:!1,access:{has:e=>`alignment`in e,get:e=>e.alignment,set:(e,t)=>{e.alignment=t}},metadata:t},c,u),e(this,null,d,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},f,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[r(l)]}#e=t(this,c,`after-centered`);get alignment(){return this.#e}set alignment(e){this.#e=e}#t=(t(this,u),t(this,f,null));get size(){return this.#t}set size(e){this.#t=e}willUpdate(e){super.willUpdate(e),e.has(`size`)&&this._configureTitle()}_handleSlotchange(){let e=!1,t=!1;for(let n of this.children)n.localName===`sbb-chip-label`&&!e?(n.slot||=`chip`,n.slot===`chip`&&(e=!0)):n.localName===`sbb-title`&&!t?(n.slot||=`title`,n.slot===`title`&&(t=!0)):/^sbb-(secondary-|accent-|transparent-)?button(-static|-link)?$/.test(n.localName)&&(n.slot||=`action`)}_configureChip(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-chip-label`);t&&(customElements.upgrade(t),t.color=`charcoal`,t.size=`xxs`)}_configureTitle(){let e=this.shadowRoot?.querySelector(`slot[name="title"]`)?.assignedElements().find(e=>e.localName===`sbb-title`);e&&(customElements.upgrade(e),e.visualLevel=this.size===`l`?`2`:`5`)}renderTemplate(){return n`
|
|
3
3
|
<span class="sbb-teaser__container">
|
|
4
4
|
<span class="sbb-teaser__image-wrapper">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbElement as o,SbbLanguageController as s,SbbNegativeMixin as c,i18nClass as l,listResetStyles as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTimetableOccupancyIconElement as f}from"./timetable-occupancy-icon.pure.js";var p=`:host{--sbb-icon-svg-width:.890625rem;--sbb-icon-svg-height:v0.75rem;display:inline-block}@media (width>=64rem){:host{--sbb-icon-svg-width:1.1875rem;--sbb-icon-svg-height:v1rem}}:host([negative]){--sbb-timetable-occupancy-color:var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{align-items:center;gap:var(--sbb-timetable-occupancy-list-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item{align-items:center;gap:var(--sbb-timetable-occupancy-item-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbElement as o,SbbLanguageController as s,SbbNegativeMixin as c,i18nClass as l,listResetStyles as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTimetableOccupancyIconElement as f}from"./timetable-occupancy-icon.pure.js";var p=`:host{--sbb-icon-svg-width:.890625rem;--sbb-icon-svg-height:v0.75rem;display:inline-block}@media (width>=64rem){:host{--sbb-icon-svg-width:1.1875rem;--sbb-icon-svg-height:v1rem}}:host([negative]){--sbb-timetable-occupancy-color:var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{align-items:center;gap:var(--sbb-timetable-occupancy-list-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item{align-items:center;gap:var(--sbb-timetable-occupancy-item-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:1}.sbb-timetable-occupancy__list-item-icon{display:flex}
|
|
2
2
|
`;let m=(()=>{let m=c(o),h,g=[],_=[],v,y=[],b=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this.#t=(t(this,_),t(this,y,null)),this._language=(t(this,b),new s(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a({attribute:`first-class-occupancy`})],v=[a({attribute:`second-class-occupancy`})],e(this,null,h,{kind:`accessor`,name:`firstClassOccupancy`,static:!1,private:!1,access:{has:e=>`firstClassOccupancy`in e,get:e=>e.firstClassOccupancy,set:(e,t)=>{e.firstClassOccupancy=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`secondClassOccupancy`,static:!1,private:!1,access:{has:e=>`secondClassOccupancy`in e,get:e=>e.secondClassOccupancy,set:(e,t)=>{e.secondClassOccupancy=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-timetable-occupancy`}static{this.elementDependencies=[f]}static{this.styles=[u,d,i(p)]}#e;get firstClassOccupancy(){return this.#e}set firstClassOccupancy(e){this.#e=e}#t;get secondClassOccupancy(){return this.#t}set secondClassOccupancy(e){this.#t=e}render(){return n` ${(this.firstClassOccupancy||this.secondClassOccupancy)&&n`
|
|
3
3
|
<ul
|
|
4
4
|
class="sbb-timetable-occupancy__list"
|
package/title.pure.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbElement as a,SbbNegativeMixin as o}from"./core.js";var s=`:host{letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbElement as a,SbbNegativeMixin as o}from"./core.js";var s=`:host{letter-spacing:var(--sbb-letter-spacing-heading);font-weight:700;line-height:var(--sbb-typo-line-height-heading);color:var(--sbb-title-color);font-size:var(--sbb-heading-font-size-1);display:block}:host([id]){scroll-margin-block-start:var(--sbb-spacing-fixed-10x)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"])){font-size:var(--sbb-heading-font-size-2)}:host(:where([level="3"]:not([visual-level]),[visual-level="3"])){font-size:var(--sbb-heading-font-size-3)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"])){font-size:var(--sbb-heading-font-size-4)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"])){font-size:var(--sbb-heading-font-size-5)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"])){font-size:var(--sbb-heading-font-size-6);line-height:var(--sbb-typo-line-height-text)}
|
|
2
2
|
`;let c=(()=>{let o=a,c,l=[],u=[],d,f=[],p=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;c=[r({reflect:!0})],d=[r({attribute:`visual-level`,reflect:!0})],e(this,null,c,{kind:`accessor`,name:`level`,static:!1,private:!1,access:{has:e=>`level`in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:t},l,u),e(this,null,d,{kind:`accessor`,name:`visualLevel`,static:!1,private:!1,access:{has:e=>`visualLevel`in e,get:e=>e.visualLevel,set:(e,t)=>{e.visualLevel=t}},metadata:t},f,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.role=`heading`}static{this.styles=[n(s)]}#e=t(this,l,`1`);get level(){return this.#e}set level(e){this.#e=e}#t=(t(this,u),t(this,f,null));get visualLevel(){return this.#t}set visualLevel(e){this.#t=e}willUpdate(e){super.willUpdate(e),e.has(`level`)&&(this.internals.ariaLevel=this.level)}render(){return i`<slot></slot>`}constructor(){super(...arguments),t(this,p)}}})();var l=`:host{margin-block:var(--sbb-title-margin-block,0);margin-block:var(--sbb-heading-margin-block-1)}:host([negative]){--sbb-title-color:var(--sbb-color-3-negative)}:host(:where([level="2"]:not([visual-level]),[visual-level="2"])){margin-block:var(--sbb-heading-margin-block-2)}:host(:where([level="3"]:not([visual-level]),[visual-level="3"])){margin-block:var(--sbb-heading-margin-block-3)}:host(:where([level="4"]:not([visual-level]),[visual-level="4"])){margin-block:var(--sbb-heading-margin-block-4)}:host(:where([level="5"]:not([visual-level]),[visual-level="5"])){margin-block:var(--sbb-heading-margin-block-5)}:host(:where([level="6"]:not([visual-level]),[visual-level="6"])){margin-block:var(--sbb-heading-margin-block-6)}
|
|
3
3
|
`;let u=(()=>{let i=o(c),a,s=[],u=[];return class extends i{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;a=[r({attribute:`visual-level`,reflect:!0})],e(this,null,a,{kind:`accessor`,name:`visualLevel`,static:!1,private:!1,access:{has:e=>`visualLevel`in e,get:e=>e.visualLevel,set:(e,t)=>{e.visualLevel=t}},metadata:t},s,u),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-title`}static{this.styles=[n(l)]}#e=t(this,s,null);get visualLevel(){return this.#e}set visualLevel(e){this.#e=e}constructor(){super(...arguments),t(this,u)}}})();export{c as SbbTitleBase,u as SbbTitleElement};
|
package/toast.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbTransparentButtonElement as o}from"./button.pure.js";import{SbbDarkModeController as s,SbbLanguageController as c,SbbOpenCloseBaseElement as l,SbbReadonlyMixin as u,forceType as d,i18nCloseAlert as f,isZeroAnimationDuration as p,popoverResetStyles as m}from"./core.js";import{SbbDividerElement as h}from"./divider.pure.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-toast-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-toast-container-display:flex;display:block}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-start}:host([position=top-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-start}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color:var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;display:var(--sbb-toast-container-display,none);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position);inset:0}.sbb-toast{z-index:var(--sbb-toast-z-index,var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);color:var(--sbb-toast-text-color);background-color:var(--sbb-toast-background-color);display:flex}:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast-wrapper{align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);display:flex}slot:not([name=icon]),.sbb-toast__close{color-scheme:light only}.sbb-toast__content{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbTransparentButtonElement as o}from"./button.pure.js";import{SbbDarkModeController as s,SbbLanguageController as c,SbbOpenCloseBaseElement as l,SbbReadonlyMixin as u,forceType as d,i18nCloseAlert as f,isZeroAnimationDuration as p,popoverResetStyles as m}from"./core.js";import{SbbDividerElement as h}from"./divider.pure.js";import{SbbIconNameMixin as g}from"./icon.pure.js";var _=`:host{--sbb-toast-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);display:none}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-toast-container-display:flex;display:block}:host([position=bottom-left]),:host([position=bottom-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-end}:host([position=bottom-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-end}:host([position=bottom-right]),:host([position=bottom-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-end}:host([position=top-left]),:host([position=top-start]){--sbb-toast-horizontal-position:flex-start;--sbb-toast-vertical-position:flex-start}:host([position=top-center]){--sbb-toast-horizontal-position:center;--sbb-toast-vertical-position:flex-start}:host([position=top-right]),:host([position=top-end]){--sbb-toast-horizontal-position:flex-end;--sbb-toast-vertical-position:flex-start}:host(:is(:state(dark),[state--dark])){--sbb-focus-outline-color:var(--sbb-focus-outline-color-default)}.sbb-toast__overlay-container{position:var(--sbb-toast-container-position);pointer-events:none;display:var(--sbb-toast-container-display,none);justify-content:var(--sbb-toast-horizontal-position);align-items:var(--sbb-toast-vertical-position);inset:0}.sbb-toast{z-index:var(--sbb-toast-z-index,var(--sbb-overlay-default-z-index));pointer-events:auto;margin:var(--sbb-toast-margin);border-radius:var(--sbb-toast-border-radius);max-width:var(--sbb-toast-max-width);color:var(--sbb-toast-text-color);background-color:var(--sbb-toast-background-color);display:flex}:host(:is(:state(state-opening),[state--state-opening])) .sbb-toast{animation-name:open;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-toast{animation-name:close;animation-duration:var(--sbb-toast-animation-duration);animation-timing-function:var(--sbb-toast-animation-timing-function)}.sbb-toast-wrapper{align-items:center;gap:var(--sbb-toast-gap);padding-block:var(--sbb-toast-padding-block);padding-inline:var(--sbb-toast-padding-inline);display:flex}slot:not([name=icon]),.sbb-toast__close{color-scheme:light only}.sbb-toast__content{font-weight:700;font-size:var(--sbb-heading-font-size-6);letter-spacing:var(--sbb-letter-spacing-heading);flex:1 1 0}.sbb-toast__close{align-items:center;display:flex}.sbb-toast__close-divider{padding-block:var(--sbb-toast-padding-block)}.sbb-toast__close-button{margin-inline:var(--sbb-spacing-responsive-xxxs)}@keyframes open{0%{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}to{visibility:visible;opacity:1;translate:0}}@keyframes close{0%{visibility:visible;opacity:1;translate:0}to{visibility:hidden;opacity:0;translate:0 var(--sbb-spacing-fixed-2x)}}
|
|
2
2
|
`;const v=new Set;let y=(()=>{let y=g(u(l)),b,x=[],S=[],C,w=[],T=[],E,D=[],O=[];return class extends y{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;b=[d(),a({type:Number})],C=[a({reflect:!0})],E=[a()],e(this,null,b,{kind:`accessor`,name:`timeout`,static:!1,private:!1,access:{has:e=>`timeout`in e,get:e=>e.timeout,set:(e,t)=>{e.timeout=t}},metadata:t},x,S),e(this,null,C,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:t},w,T),e(this,null,E,{kind:`accessor`,name:`politeness`,static:!1,private:!1,access:{has:e=>`politeness`in e,get:e=>e.politeness,set:(e,t)=>{e.politeness=t}},metadata:t},D,O),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toast`}static{this.elementDependencies=[o,h]}static{this.styles=[m,i(_)]}#e;get timeout(){return this.#e}set timeout(e){this.#e=e}#t;get position(){return this.#t}set position(e){this.#t=e}#n;get politeness(){return this.#n}set politeness(e){this.#n=e}constructor(){super(),this.#e=t(this,x,0),this.#t=(t(this,S),t(this,w,`bottom-center`)),this.#n=(t(this,T),t(this,D,`polite`)),this._closeTimeout=t(this,O),this._language=new c(this),this._darkModeController=new s(this,()=>{this._syncSlottedElements(),this.requestUpdate()}),this.addEventListener?.(`click`,e=>this._onClick(e))}connectedCallback(){this.popover=`manual`,super.connectedCallback(),v.add(this)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._closeTimeout),v.delete(this)}willUpdate(e){super.willUpdate(e),e.has(`politeness`)&&(this.internals.ariaLive=this.politeness)}open(){this.state!==`opened`&&this.state!==`opening`&&this.dispatchBeforeOpenEvent()&&(this._closeOtherToasts(),this.showPopover?.(),this.state=`opening`,this._isZeroAnimationDuration()&&this._handleOpening())}close(){this.state!==`closed`&&this.state!==`closing`&&this.dispatchBeforeCloseEvent()&&(clearTimeout(this._closeTimeout),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this.dispatchCloseEvent()}_handleOpening(){if(this.state=`opened`,this.dispatchOpenEvent(),this.timeout){let e=globalThis,t=e[e.Zone?.__symbol__?.(`setTimeout`)]??e.setTimeout;this._closeTimeout=t(()=>this.close(),this.timeout)}}_onClick(e){e.composedPath().some((e,t,n)=>e instanceof HTMLElement&&t<n.indexOf(this)&&e.hasAttribute(`sbb-toast-close`)&&!e.hasAttribute(`disabled`))&&this.close()}_isZeroAnimationDuration(){return p(this,`--sbb-toast-animation-duration`)}_onContentSlotChange(e){let t=e.target.assignedNodes();if(t.some(e=>e.nodeType===Node.TEXT_NODE)){let e=document.createElement(`span`);this.prepend(e),e.append(...t)}this._syncSlottedElements()}_syncSlottedElements(){this.querySelectorAll(`sbb-transparent-button, sbb-transparent-button-link`).forEach(e=>{e.negative=this._isLightMode()}),this.querySelectorAll(`sbb-link, sbb-link-button, sbb-link-static`).forEach(e=>{e.negative=this._isLightMode()})}_onToastAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_closeOtherToasts(){v.forEach(e=>{(e.state===`opened`||e.state===`opening`)&&e.close()})}_isLightMode(){return!this._darkModeController.matches()}render(){return n`
|
|
3
3
|
<div class="sbb-toast__overlay-container">
|
|
4
4
|
<div class="sbb-toast" @animationend=${this._onToastAnimationEnd}>
|
package/toggle-check.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedCheckboxMixin as o}from"./core.js";import{SbbIconNameMixin as s}from"./icon.pure.js";var c=`:host{--sbb-toggle-check-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--_sbb-toggle-check-overall-height:var(--sbb-toggle-check-circle-diameter);--_sbb-toggle-check-width:calc(2 * var(--sbb-toggle-check-height));display:inline-block;outline:none!important}:host([size=xs]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-s)}:host([size=m]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-m);--_sbb-toggle-check-overall-height:calc(1em * var(--sbb-typo-line-height-text))}:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-background-color:var(--sbb-toggle-check-checked-color);--sbb-toggle-check-circle-background-color:var(--sbb-background-color-1-negative-inverted);--sbb-toggle-check-circle-border-color:var(--sbb-toggle-check-background-color);--_sbb-toggle-check-circle-translate:calc(100% - 2 * (100% - .5 * var(--_sbb-toggle-check-width))) -50%;--_sbb-toggle-check-icon-opacity:1}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-icon-color:Highlight;--sbb-toggle-check-background-color:Highlight}}:host(:disabled){--sbb-toggle-check-background-color:var(--sbb-background-color-4);--sbb-toggle-check-circle-background-color:var(--sbb-background-color-3);--sbb-toggle-check-circle-border-color:var(--sbb-border-color-5);--sbb-toggle-check-circle-border-style:dashed;--sbb-toggle-check-icon-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-toggle-check-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-toggle-check-icon-color:GrayText;--sbb-toggle-check-background-color:GrayText;--sbb-toggle-check-circle-border-style:solid}}:host([label-position=before]){--_sbb-toggle-check-flex-direction:row}.sbb-toggle-check{color:var(--sbb-toggle-check-color);user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--sbb-toggle-check-cursor);border-radius:calc(var(--sbb-toggle-check-border-radius) - var(--sbb-focus-outline-offset));display:flex;position:relative}.sbb-toggle-check:before{content:"";user-select:none;width:0;height:0}:host(:focus-visible) .sbb-toggle-check{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-toggle-check__container{flex-direction:var(--_sbb-toggle-check-flex-direction,row-reverse);gap:var(--sbb-toggle-check-gap);width:100%;font-size:var(--sbb-toggle-check-font-size);letter-spacing:var(--sbb-
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedCheckboxMixin as o}from"./core.js";import{SbbIconNameMixin as s}from"./icon.pure.js";var c=`:host{--sbb-toggle-check-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));--_sbb-toggle-check-overall-height:var(--sbb-toggle-check-circle-diameter);--_sbb-toggle-check-width:calc(2 * var(--sbb-toggle-check-height));display:inline-block;outline:none!important}:host([size=xs]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-s)}:host([size=m]){--sbb-toggle-check-font-size:var(--sbb-text-font-size-m);--_sbb-toggle-check-overall-height:calc(1em * var(--sbb-typo-line-height-text))}:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-background-color:var(--sbb-toggle-check-checked-color);--sbb-toggle-check-circle-background-color:var(--sbb-background-color-1-negative-inverted);--sbb-toggle-check-circle-border-color:var(--sbb-toggle-check-background-color);--_sbb-toggle-check-circle-translate:calc(100% - 2 * (100% - .5 * var(--_sbb-toggle-check-width))) -50%;--_sbb-toggle-check-icon-opacity:1}@media (forced-colors:active){:host(:is(:state(checked),[state--checked])){--sbb-toggle-check-icon-color:Highlight;--sbb-toggle-check-background-color:Highlight}}:host(:disabled){--sbb-toggle-check-background-color:var(--sbb-background-color-4);--sbb-toggle-check-circle-background-color:var(--sbb-background-color-3);--sbb-toggle-check-circle-border-color:var(--sbb-border-color-5);--sbb-toggle-check-circle-border-style:dashed;--sbb-toggle-check-icon-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm));--sbb-toggle-check-cursor:var(--sbb-cursor-default)}@media (forced-colors:active){:host(:disabled){--sbb-toggle-check-icon-color:GrayText;--sbb-toggle-check-background-color:GrayText;--sbb-toggle-check-circle-border-style:solid}}:host([label-position=before]){--_sbb-toggle-check-flex-direction:row}.sbb-toggle-check{color:var(--sbb-toggle-check-color);user-select:none;-webkit-tap-highlight-color:transparent;cursor:var(--sbb-toggle-check-cursor);border-radius:calc(var(--sbb-toggle-check-border-radius) - var(--sbb-focus-outline-offset));display:flex;position:relative}.sbb-toggle-check:before{content:"";user-select:none;width:0;height:0}:host(:focus-visible) .sbb-toggle-check{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-toggle-check__container{flex-direction:var(--_sbb-toggle-check-flex-direction,row-reverse);gap:var(--sbb-toggle-check-gap);width:100%;font-size:var(--sbb-toggle-check-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);align-items:start;display:flex}.sbb-toggle-check__label{flex-grow:1;padding-block-start:calc((var(--sbb-toggle-check-circle-diameter) - var(--sbb-typo-line-height-text) * 1em) / 2)}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-toggle-check__label{display:none}.sbb-toggle-check__track{min-width:var(--_sbb-toggle-check-width);height:var(--sbb-toggle-check-height);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-toggle-check-background-color);margin-block:calc((var(--_sbb-toggle-check-overall-height) - var(--sbb-toggle-check-height)) / 2);display:inline-block;position:relative}.sbb-toggle-check__circle{width:var(--sbb-toggle-check-circle-diameter);height:var(--sbb-toggle-check-circle-diameter);border:var(--sbb-toggle-check-border-width) var(--sbb-toggle-check-circle-border-style) var(--sbb-toggle-check-circle-border-color);background-color:var(--sbb-toggle-check-circle-background-color);color:var(--sbb-toggle-check-icon-color);will-change:translate;translate:0 -50%;translate:var(--_sbb-toggle-check-circle-translate,0 -50%);transition:translate ease var(--sbb-toggle-check-animation-duration);box-shadow:var(--sbb-toggle-check-shadow);border-radius:50%;position:absolute;top:50%}.sbb-toggle-check__icon{width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);opacity:var(--_sbb-toggle-check-icon-opacity,0);transition:opacity ease var(--sbb-toggle-check-animation-duration);position:absolute;top:50%;left:50%;translate:-50% -50%}
|
|
2
2
|
`;let l=(()=>{let l=s(o(a)),u,d=[],f=[],p,m=[],h=[],g,_=[],v=[];return class extends l{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;u=[i()],p=[i({reflect:!0})],g=[i({attribute:`label-position`,reflect:!0})],e(this,null,u,{kind:`accessor`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,get:e=>e.value,set:(e,t)=>{e.value=t}},metadata:t},d,f),e(this,null,p,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},m,h),e(this,null,g,{kind:`accessor`,name:`labelPosition`,static:!1,private:!1,access:{has:e=>`labelPosition`in e,get:e=>e.labelPosition,set:(e,t)=>{e.labelPosition=t}},metadata:t},_,v),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toggle-check`}static{this.styles=[r(c)]}#e=t(this,d,null);get value(){return this.#e}set value(e){this.#e=e}#t=(t(this,f),t(this,m,null));get size(){return this.#t}set size(e){this.#t=e}#n=(t(this,h),t(this,_,`after`));get labelPosition(){return this.#n}set labelPosition(e){this.#n=e}requestUpdate(e,t,n){super.requestUpdate(e,t,n),e===`checked`&&(this.internals.ariaChecked=`${this.checked}`,this.toggleState(`checked`,this.checked))}renderIconName(){return super.renderIconName()||`tick-small`}render(){return n`
|
|
3
3
|
<span class="sbb-toggle-check">
|
|
4
4
|
<span class="sbb-toggle-check__container">
|