@sbb-esta/lyne-elements-dev 5.13.2-dev.1794389866 → 5.13.2-dev.1794403198
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/development/radio-button-panel.pure.js +1 -1
- package/development/radio-button.pure.js +1 -1
- package/lean-off-brand-theme.css +33 -2
- package/lean-safety-theme.css +33 -2
- package/lean-theme.css +33 -2
- package/off-brand-theme.css +33 -2
- package/package.json +2 -2
- package/radio-button/_radio-button.global.scss +27 -2
- package/radio-button-panel.pure.js +1 -1
- package/radio-button.pure.js +1 -1
- package/safety-theme.css +33 -2
- package/standard-theme.css +33 -2
- package/visual-checkbox/_visual-checkbox.global.scss +5 -2
|
@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
|
|
|
4
4
|
import { SbbElement, SbbFormAssociatedRadioButtonMixin, SbbPanelMixin, SbbPropertyWatcherController, SbbUpdateSchedulerMixin, screenReaderOnlyStyles } from "./core.js";
|
|
5
5
|
|
|
6
6
|
// src/elements/radio-button/common/radio-button-common.scss?inline
|
|
7
|
-
var radio_button_common_default = ":host {\n --sbb-radio-button-
|
|
7
|
+
var radio_button_common_default = ":host {\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-inner-circle-color-checked);\n --sbb-radio-button-border-color: var(--sbb-radio-button-border-color-checked);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-radio-button-label-color-disabled);\n --sbb-radio-button-background-color: var(--sbb-radio-button-background-color-disabled);\n --sbb-radio-button-border-style: var(--sbb-radio-button-border-style-disabled);\n --sbb-radio-button-border-color: var(--sbb-radio-button-border-color-disabled);\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-inner-circle-color-disabled);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(\n --sbb-radio-button-inner-circle-color-checked-disabled\n );\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: block;\n cursor: var(--sbb-radio-button-cursor);\n user-select: none;\n position: relative;\n color: var(--sbb-radio-button-label-color);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-radio-button__label-slot {\n display: flex;\n align-items: flex-start;\n overflow: hidden;\n min-height: calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));\n}\n.sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n content: \"\";\n flex-shrink: 0;\n width: var(--sbb-radio-button-dimension);\n height: var(--sbb-radio-button-dimension);\n border-radius: 50%;\n margin-block-start: var(--sbb-radio-button-icon-align);\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n transition-timing-function: ease;\n transition-property: background-color, border;\n}\n@media (forced-colors: active) {\n .sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n transition: none;\n }\n}\n.sbb-radio-button__label-slot::before {\n background: var(--sbb-radio-button-inner-circle-color);\n border: var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);\n margin-inline-end: var(--sbb-radio-button-label-gap);\n}\n.sbb-radio-button__label-slot::after {\n position: absolute;\n border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);\n}\n";
|
|
8
8
|
|
|
9
9
|
// src/elements/radio-button/common/radio-button-common.ts
|
|
10
10
|
const SbbRadioButtonCommonElementMixin = (superClass) => {
|
|
@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js";
|
|
|
4
4
|
import { SbbElement, SbbFormAssociatedRadioButtonMixin, SbbPropertyWatcherController, getOverride } from "./core.js";
|
|
5
5
|
|
|
6
6
|
// src/elements/radio-button/common/radio-button-common.scss?inline
|
|
7
|
-
var radio_button_common_default = ":host {\n --sbb-radio-button-
|
|
7
|
+
var radio_button_common_default = ":host {\n --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);\n --sbb-radio-button-icon-align: calc(\n (1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2\n );\n}\n\n:host(:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-inner-circle-color-checked);\n --sbb-radio-button-border-color: var(--sbb-radio-button-border-color-checked);\n --sbb-radio-button-background-fake-border-width: calc(\n (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2\n );\n}\n\n:host(:disabled) {\n --sbb-radio-button-label-color: var(--sbb-radio-button-label-color-disabled);\n --sbb-radio-button-background-color: var(--sbb-radio-button-background-color-disabled);\n --sbb-radio-button-border-style: var(--sbb-radio-button-border-style-disabled);\n --sbb-radio-button-border-color: var(--sbb-radio-button-border-color-disabled);\n --sbb-radio-button-inner-circle-color: var(--sbb-radio-button-inner-circle-color-disabled);\n --sbb-radio-button-cursor: var(--sbb-cursor-default);\n}\n\n:host(:disabled:is(:state(checked),[state--checked])) {\n --sbb-radio-button-inner-circle-color: var(\n --sbb-radio-button-inner-circle-color-checked-disabled\n );\n}\n\n:host([size=xs]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-xs);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);\n}\n\n:host([size=s]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-s);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-s);\n}\n\n:host([size=m]) {\n --sbb-radio-button-font-size: var(--sbb-radio-button-font-size-m);\n --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);\n}\n\n.sbb-radio-button {\n font-size: var(--sbb-radio-button-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n display: block;\n cursor: var(--sbb-radio-button-cursor);\n user-select: none;\n position: relative;\n color: var(--sbb-radio-button-label-color);\n -webkit-tap-highlight-color: transparent;\n}\n\n.sbb-radio-button__label-slot {\n display: flex;\n align-items: flex-start;\n overflow: hidden;\n min-height: calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));\n}\n.sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n content: \"\";\n flex-shrink: 0;\n width: var(--sbb-radio-button-dimension);\n height: var(--sbb-radio-button-dimension);\n border-radius: 50%;\n margin-block-start: var(--sbb-radio-button-icon-align);\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n transition-timing-function: ease;\n transition-property: background-color, border;\n}\n@media (forced-colors: active) {\n .sbb-radio-button__label-slot::before, .sbb-radio-button__label-slot::after {\n transition: none;\n }\n}\n.sbb-radio-button__label-slot::before {\n background: var(--sbb-radio-button-inner-circle-color);\n border: var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);\n margin-inline-end: var(--sbb-radio-button-label-gap);\n}\n.sbb-radio-button__label-slot::after {\n position: absolute;\n border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);\n}\n";
|
|
8
8
|
|
|
9
9
|
// src/elements/radio-button/common/radio-button-common.ts
|
|
10
10
|
const SbbRadioButtonCommonElementMixin = (superClass) => {
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1785,17 +1785,37 @@ summary {
|
|
|
1785
1785
|
--sbb-popover-animation-easing: ease-out;
|
|
1786
1786
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1787
1787
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1788
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1789
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1790
|
+
var(--sbb-color-granite),
|
|
1791
|
+
var(--sbb-color-aluminium)
|
|
1792
|
+
);
|
|
1788
1793
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1794
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1795
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1796
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1797
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1798
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1799
|
+
var(--sbb-color-primary),
|
|
1800
|
+
var(--sbb-color-white)
|
|
1801
|
+
);
|
|
1802
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1789
1803
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1790
1804
|
--sbb-radio-button-border-style: solid;
|
|
1805
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1791
1806
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1807
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1808
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1792
1809
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1793
1810
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1794
1811
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1795
1812
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1796
1813
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);
|
|
1797
1814
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1798
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-xs);
|
|
1815
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1816
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1817
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1818
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-xs);
|
|
1799
1819
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1800
1820
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1801
1821
|
var(--sbb-color-metal),
|
|
@@ -2196,7 +2216,11 @@ summary {
|
|
|
2196
2216
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2197
2217
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
|
|
2198
2218
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2199
|
-
--sbb-visual-checkbox-selection-color
|
|
2219
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2220
|
+
var(--sbb-color-primary),
|
|
2221
|
+
var(--sbb-color-white)
|
|
2222
|
+
);
|
|
2223
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2200
2224
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2201
2225
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2202
2226
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2257,8 +2281,15 @@ summary {
|
|
|
2257
2281
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2258
2282
|
--sbb-logo-signet-color: Canvas !important;
|
|
2259
2283
|
--sbb-radio-button-background-color: Canvas;
|
|
2284
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2285
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2286
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2287
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2288
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2260
2289
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2261
2290
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2291
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2292
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2262
2293
|
--sbb-signet-background-color: ButtonText !important;
|
|
2263
2294
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2264
2295
|
--sbb-signet-icon-color: Canvas !important;
|
package/lean-safety-theme.css
CHANGED
|
@@ -1805,17 +1805,37 @@ summary {
|
|
|
1805
1805
|
--sbb-popover-animation-easing: ease-out;
|
|
1806
1806
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1807
1807
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1808
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1809
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1810
|
+
var(--sbb-color-granite),
|
|
1811
|
+
var(--sbb-color-aluminium)
|
|
1812
|
+
);
|
|
1808
1813
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1814
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1815
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1816
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1817
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1818
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1819
|
+
var(--sbb-color-primary),
|
|
1820
|
+
var(--sbb-color-white)
|
|
1821
|
+
);
|
|
1822
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1809
1823
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1810
1824
|
--sbb-radio-button-border-style: solid;
|
|
1825
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1811
1826
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1827
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1828
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1812
1829
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1813
1830
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1814
1831
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1815
1832
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1816
1833
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);
|
|
1817
1834
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1818
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-xs);
|
|
1835
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1836
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1837
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1838
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-xs);
|
|
1819
1839
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1820
1840
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1821
1841
|
var(--sbb-color-metal),
|
|
@@ -2216,7 +2236,11 @@ summary {
|
|
|
2216
2236
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2217
2237
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
|
|
2218
2238
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2219
|
-
--sbb-visual-checkbox-selection-color
|
|
2239
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2240
|
+
var(--sbb-color-primary),
|
|
2241
|
+
var(--sbb-color-white)
|
|
2242
|
+
);
|
|
2243
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2220
2244
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2221
2245
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2222
2246
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2277,8 +2301,15 @@ summary {
|
|
|
2277
2301
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2278
2302
|
--sbb-logo-signet-color: Canvas !important;
|
|
2279
2303
|
--sbb-radio-button-background-color: Canvas;
|
|
2304
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2305
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2306
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2307
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2308
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2280
2309
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2281
2310
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2311
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2312
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2282
2313
|
--sbb-signet-background-color: ButtonText !important;
|
|
2283
2314
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2284
2315
|
--sbb-signet-icon-color: Canvas !important;
|
package/lean-theme.css
CHANGED
|
@@ -1805,17 +1805,37 @@ summary {
|
|
|
1805
1805
|
--sbb-popover-animation-easing: ease-out;
|
|
1806
1806
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1807
1807
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1808
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1809
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1810
|
+
var(--sbb-color-granite),
|
|
1811
|
+
var(--sbb-color-aluminium)
|
|
1812
|
+
);
|
|
1808
1813
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1814
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1815
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1816
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1817
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1818
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1819
|
+
var(--sbb-color-primary),
|
|
1820
|
+
var(--sbb-color-white)
|
|
1821
|
+
);
|
|
1822
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1809
1823
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1810
1824
|
--sbb-radio-button-border-style: solid;
|
|
1825
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1811
1826
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1827
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1828
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1812
1829
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1813
1830
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1814
1831
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1815
1832
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1816
1833
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-xs);
|
|
1817
1834
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1818
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-xs);
|
|
1835
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1836
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1837
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1838
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-xs);
|
|
1819
1839
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1820
1840
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1821
1841
|
var(--sbb-color-metal),
|
|
@@ -2216,7 +2236,11 @@ summary {
|
|
|
2216
2236
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2217
2237
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-xs);
|
|
2218
2238
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2219
|
-
--sbb-visual-checkbox-selection-color
|
|
2239
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2240
|
+
var(--sbb-color-primary),
|
|
2241
|
+
var(--sbb-color-white)
|
|
2242
|
+
);
|
|
2243
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2220
2244
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2221
2245
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2222
2246
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2277,8 +2301,15 @@ summary {
|
|
|
2277
2301
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2278
2302
|
--sbb-logo-signet-color: Canvas !important;
|
|
2279
2303
|
--sbb-radio-button-background-color: Canvas;
|
|
2304
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2305
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2306
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2307
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2308
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2280
2309
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2281
2310
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2311
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2312
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2282
2313
|
--sbb-signet-background-color: ButtonText !important;
|
|
2283
2314
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2284
2315
|
--sbb-signet-icon-color: Canvas !important;
|
package/off-brand-theme.css
CHANGED
|
@@ -1785,17 +1785,37 @@ summary {
|
|
|
1785
1785
|
--sbb-popover-animation-easing: ease-out;
|
|
1786
1786
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1787
1787
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1788
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1789
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1790
|
+
var(--sbb-color-granite),
|
|
1791
|
+
var(--sbb-color-aluminium)
|
|
1792
|
+
);
|
|
1788
1793
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1794
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1795
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1796
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1797
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1798
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1799
|
+
var(--sbb-color-primary),
|
|
1800
|
+
var(--sbb-color-white)
|
|
1801
|
+
);
|
|
1802
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1789
1803
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1790
1804
|
--sbb-radio-button-border-style: solid;
|
|
1805
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1791
1806
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1807
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1808
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1792
1809
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1793
1810
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1794
1811
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1795
1812
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1796
1813
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
|
|
1797
1814
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1798
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-
|
|
1815
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1816
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1817
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1818
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-m);
|
|
1799
1819
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1800
1820
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1801
1821
|
var(--sbb-color-metal),
|
|
@@ -2196,7 +2216,11 @@ summary {
|
|
|
2196
2216
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2197
2217
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
2198
2218
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2199
|
-
--sbb-visual-checkbox-selection-color
|
|
2219
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2220
|
+
var(--sbb-color-primary),
|
|
2221
|
+
var(--sbb-color-white)
|
|
2222
|
+
);
|
|
2223
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2200
2224
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2201
2225
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2202
2226
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2257,8 +2281,15 @@ summary {
|
|
|
2257
2281
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2258
2282
|
--sbb-logo-signet-color: Canvas !important;
|
|
2259
2283
|
--sbb-radio-button-background-color: Canvas;
|
|
2284
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2285
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2286
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2287
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2288
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2260
2289
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2261
2290
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2291
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2292
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2262
2293
|
--sbb-signet-background-color: ButtonText !important;
|
|
2263
2294
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2264
2295
|
--sbb-signet-icon-color: Canvas !important;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.13.2-dev.
|
|
3
|
+
"version": "5.13.2-dev.1794403198",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/f246109280f6c2b8bdc10a4a2fdc9c8ae7f1bf59"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
|
@@ -5,10 +5,25 @@ $theme: 'standard' !default;
|
|
|
5
5
|
@mixin base {
|
|
6
6
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
7
7
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
8
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
9
|
+
var(--sbb-color-granite),
|
|
10
|
+
var(--sbb-color-aluminium)
|
|
11
|
+
);
|
|
8
12
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
13
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
14
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
15
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
16
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
17
|
+
var(--sbb-color-primary),
|
|
18
|
+
var(--sbb-color-white)
|
|
19
|
+
);
|
|
20
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
9
21
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
10
22
|
--sbb-radio-button-border-style: solid;
|
|
23
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
11
24
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
25
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
26
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
12
27
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
13
28
|
--sbb-radio-button-dimension-xs: #{sbb.px-to-rem-build(20)};
|
|
14
29
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
@@ -21,10 +36,13 @@ $theme: 'standard' !default;
|
|
|
21
36
|
$theme
|
|
22
37
|
)};
|
|
23
38
|
--sbb-radio-button-inner-circle-dimension: #{sbb.px-to-rem-build(10)};
|
|
39
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
40
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
41
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
24
42
|
--sbb-radio-button-font-size: #{sbb.theme-pattern-select(
|
|
25
43
|
(
|
|
26
|
-
'standard': var(--sbb-
|
|
27
|
-
'lean': var(--sbb-
|
|
44
|
+
'standard': var(--sbb-radio-button-font-size-m),
|
|
45
|
+
'lean': var(--sbb-radio-button-font-size-xs),
|
|
28
46
|
),
|
|
29
47
|
$theme
|
|
30
48
|
)};
|
|
@@ -32,6 +50,13 @@ $theme: 'standard' !default;
|
|
|
32
50
|
|
|
33
51
|
@mixin forced-colors {
|
|
34
52
|
--sbb-radio-button-background-color: Canvas;
|
|
53
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
54
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
55
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
56
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
57
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
35
58
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
36
59
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
60
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
61
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
37
62
|
}
|
|
@@ -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,SbbFormAssociatedRadioButtonMixin as s,SbbPanelMixin as c,SbbPropertyWatcherController as l,SbbUpdateSchedulerMixin as u,screenReaderOnlyStyles as d}from"./core.js";var f=`:host{--sbb-radio-button-
|
|
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,SbbFormAssociatedRadioButtonMixin as s,SbbPanelMixin as c,SbbPropertyWatcherController as l,SbbUpdateSchedulerMixin as u,screenReaderOnlyStyles as d}from"./core.js";var f=`:host{--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-checked);--sbb-radio-button-border-color:var(--sbb-radio-button-border-color-checked);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}:host(:disabled){--sbb-radio-button-label-color:var(--sbb-radio-button-label-color-disabled);--sbb-radio-button-background-color:var(--sbb-radio-button-background-color-disabled);--sbb-radio-button-border-style:var(--sbb-radio-button-border-style-disabled);--sbb-radio-button-border-color:var(--sbb-radio-button-border-color-disabled);--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-disabled);--sbb-radio-button-cursor:var(--sbb-cursor-default)}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-checked-disabled)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
|
|
2
2
|
`;const p=n=>(()=>{let r=s(n),o=[],c;return class extends r{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[a({attribute:`allow-empty-selection`,type:Boolean})],e(this,null,c,{kind:`setter`,name:`allowEmptySelection`,static:!1,private:!1,access:{has:e=>`allowEmptySelection`in e,set:(e,t)=>{e.allowEmptySelection=t}},metadata:t},null,o),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[i(f)]}static{this.events={change:`change`,input:`input`}}set allowEmptySelection(e){this._allowEmptySelection=!!e}get allowEmptySelection(){return this._allowEmptySelection||(this.group?.allowEmptySelection??!1)}get group(){return this._group}constructor(){super(),this._allowEmptySelection=(t(this,o),!1),this._group=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addController(new l(this,()=>this.closest(`sbb-radio-button-group`),[`disabled`,`required`,`size`].reduce((e,t)=>Object.assign(e,{[t]:()=>this.requestUpdate(t)}),{})))}connectedCallback(){super.connectedCallback(),this._group=this.closest(`sbb-radio-button-group`)}select(){this.disabled||this.formDisabled||(this.allowEmptySelection?(this.checked=!this.checked,this.emitChangeEvents()):this.checked||(this.checked=!0,this.emitChangeEvents()))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this.dispatchEvent(new Event(`ɵradiobuttonvaluechange`,{bubbles:!0}))}isDisabledExternally(){return this.group?.disabled??!1}isRequiredExternally(){return this.group?.required??!1}async _handleClick(e){e.preventDefault(),this.select(),await this.updateComplete,this.focus()}_handleKeyDown(e){e.code===`Space`&&(e.preventDefault(),this.select())}}})();let m=(()=>{let i=c(p(u(o))),s,l=[],f=[];return class extends i{constructor(){super(...arguments),this.#e=t(this,l,null),this._hasSelectionPanelElement=(t(this,f),!1)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;s=[a()],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,f),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-radio-button-panel`}static{this.styles=[d]}static{this.events={change:`change`,input:`input`}}#e;get value(){return this.#e}set value(e){this.#e=e}connectedCallback(){super.connectedCallback(),this._hasSelectionPanelElement=!!this.closest?.(`sbb-selection-expansion-panel, sbb-selection-action-panel`)}willUpdate(e){super.willUpdate(e),e.has(`checked`)&&this.toggleState(`checked`,this.checked)}updateFocusableRadios(){super.updateFocusableRadios(),Array.from(this.associatedRadioButtons??[]).filter(e=>!e.disabled&&e._hasSelectionPanelElement).forEach(e=>e.tabIndex=0)}async navigateByKeyboard(e){this._hasSelectionPanelElement?e.focus():await super.navigateByKeyboard(e)}render(){return n`
|
|
3
3
|
<div class="sbb-selection-panel">
|
|
4
4
|
<div class="sbb-selection-panel__badge">
|
package/radio-button.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,SbbFormAssociatedRadioButtonMixin as o,SbbPropertyWatcherController as s,getOverride as c}from"./core.js";var l=`:host{--sbb-radio-button-
|
|
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,SbbFormAssociatedRadioButtonMixin as o,SbbPropertyWatcherController as s,getOverride as c}from"./core.js";var l=`:host{--sbb-radio-button-background-fake-border-width:calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align:calc((1em * var(--sbb-typo-line-height-text) - var(--sbb-radio-button-dimension)) / 2)}:host(:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-checked);--sbb-radio-button-border-color:var(--sbb-radio-button-border-color-checked);--sbb-radio-button-background-fake-border-width:calc((var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2)}:host(:disabled){--sbb-radio-button-label-color:var(--sbb-radio-button-label-color-disabled);--sbb-radio-button-background-color:var(--sbb-radio-button-background-color-disabled);--sbb-radio-button-border-style:var(--sbb-radio-button-border-style-disabled);--sbb-radio-button-border-color:var(--sbb-radio-button-border-color-disabled);--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-disabled);--sbb-radio-button-cursor:var(--sbb-cursor-default)}:host(:disabled:is(:state(checked),[state--checked])){--sbb-radio-button-inner-circle-color:var(--sbb-radio-button-inner-circle-color-checked-disabled)}:host([size=xs]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-xs);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-xs)}:host([size=s]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-s);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-s)}:host([size=m]){--sbb-radio-button-font-size:var(--sbb-radio-button-font-size-m);--sbb-radio-button-dimension:var(--sbb-radio-button-dimension-m)}.sbb-radio-button{font-size:var(--sbb-radio-button-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);cursor:var(--sbb-radio-button-cursor);user-select:none;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent;display:block;position:relative}.sbb-radio-button__label-slot{min-height:calc(var(--sbb-radio-button-font-size) * var(--sbb-typo-line-height-text));align-items:flex-start;display:flex;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));border-radius:50%;flex-shrink:0;margin-block-start:var(--sbb-radio-button-icon-align);transition-property:background-color,border;transition-timing-function:ease}@media (forced-colors:active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-radio-button-label-gap)}.sbb-radio-button__label-slot:after{border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color);position:absolute}
|
|
2
2
|
`;const u=n=>(()=>{let a=o(n),c=[],u;return class extends a{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(a[Symbol.metadata]??null):void 0;u=[i({attribute:`allow-empty-selection`,type:Boolean})],e(this,null,u,{kind:`setter`,name:`allowEmptySelection`,static:!1,private:!1,access:{has:e=>`allowEmptySelection`in e,set:(e,t)=>{e.allowEmptySelection=t}},metadata:t},null,c),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.styles=[r(l)]}static{this.events={change:`change`,input:`input`}}set allowEmptySelection(e){this._allowEmptySelection=!!e}get allowEmptySelection(){return this._allowEmptySelection||(this.group?.allowEmptySelection??!1)}get group(){return this._group}constructor(){super(),this._allowEmptySelection=(t(this,c),!1),this._group=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addController(new s(this,()=>this.closest(`sbb-radio-button-group`),[`disabled`,`required`,`size`].reduce((e,t)=>Object.assign(e,{[t]:()=>this.requestUpdate(t)}),{})))}connectedCallback(){super.connectedCallback(),this._group=this.closest(`sbb-radio-button-group`)}select(){this.disabled||this.formDisabled||(this.allowEmptySelection?(this.checked=!this.checked,this.emitChangeEvents()):this.checked||(this.checked=!0,this.emitChangeEvents()))}willUpdate(e){super.willUpdate(e),e.has(`value`)&&this.dispatchEvent(new Event(`ɵradiobuttonvaluechange`,{bubbles:!0}))}isDisabledExternally(){return this.group?.disabled??!1}isRequiredExternally(){return this.group?.required??!1}async _handleClick(e){e.preventDefault(),this.select(),await this.updateComplete,this.focus()}_handleKeyDown(e){e.code===`Space`&&(e.preventDefault(),this.select())}}})();var d=`:host{display:block;outline:none!important}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-radio-button-label-gap:0}:host(:focus-visible) .sbb-radio-button{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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}
|
|
3
3
|
`;let f=(()=>{let o=u(a),s,l=[],f=[],p,m=[],h=[];return class extends o{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(o[Symbol.metadata]??null):void 0;s=[i({reflect:!0}),c((e,t)=>e.group?.size??t)],p=[i()],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},l,f),e(this,null,p,{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},m,h),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-radio-button`}static{this.styles=[r(d)]}static{this.events={change:`change`,input:`input`}}#e=t(this,l,null);get size(){return this.#e}set size(e){this.#e=e}#t=(t(this,f),t(this,m,null));get value(){return this.#t}set value(e){this.#t=e}render(){return n`
|
|
4
4
|
<div class="sbb-radio-button">
|
package/safety-theme.css
CHANGED
|
@@ -1805,17 +1805,37 @@ summary {
|
|
|
1805
1805
|
--sbb-popover-animation-easing: ease-out;
|
|
1806
1806
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1807
1807
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1808
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1809
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1810
|
+
var(--sbb-color-granite),
|
|
1811
|
+
var(--sbb-color-aluminium)
|
|
1812
|
+
);
|
|
1808
1813
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1814
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1815
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1816
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1817
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1818
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1819
|
+
var(--sbb-color-primary),
|
|
1820
|
+
var(--sbb-color-white)
|
|
1821
|
+
);
|
|
1822
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1809
1823
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1810
1824
|
--sbb-radio-button-border-style: solid;
|
|
1825
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1811
1826
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1827
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1828
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1812
1829
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1813
1830
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1814
1831
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1815
1832
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1816
1833
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
|
|
1817
1834
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1818
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-
|
|
1835
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1836
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1837
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1838
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-m);
|
|
1819
1839
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1820
1840
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1821
1841
|
var(--sbb-color-metal),
|
|
@@ -2216,7 +2236,11 @@ summary {
|
|
|
2216
2236
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2217
2237
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
2218
2238
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2219
|
-
--sbb-visual-checkbox-selection-color
|
|
2239
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2240
|
+
var(--sbb-color-primary),
|
|
2241
|
+
var(--sbb-color-white)
|
|
2242
|
+
);
|
|
2243
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2220
2244
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2221
2245
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2222
2246
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2277,8 +2301,15 @@ summary {
|
|
|
2277
2301
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2278
2302
|
--sbb-logo-signet-color: Canvas !important;
|
|
2279
2303
|
--sbb-radio-button-background-color: Canvas;
|
|
2304
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2305
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2306
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2307
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2308
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2280
2309
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2281
2310
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2311
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2312
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2282
2313
|
--sbb-signet-background-color: ButtonText !important;
|
|
2283
2314
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2284
2315
|
--sbb-signet-icon-color: Canvas !important;
|
package/standard-theme.css
CHANGED
|
@@ -1805,17 +1805,37 @@ summary {
|
|
|
1805
1805
|
--sbb-popover-animation-easing: ease-out;
|
|
1806
1806
|
--sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
|
|
1807
1807
|
--sbb-radio-button-label-color: var(--sbb-color-3);
|
|
1808
|
+
--sbb-radio-button-label-color-disabled: var(--sbb-color-granite);
|
|
1809
|
+
--sbb-radio-button-label-color-disabled: light-dark(
|
|
1810
|
+
var(--sbb-color-granite),
|
|
1811
|
+
var(--sbb-color-aluminium)
|
|
1812
|
+
);
|
|
1808
1813
|
--sbb-radio-button-background-color: var(--sbb-background-color-1);
|
|
1814
|
+
--sbb-radio-button-background-color-disabled: var(--sbb-background-color-3);
|
|
1815
|
+
--sbb-radio-button-inner-circle-color: var(--sbb-background-color-1);
|
|
1816
|
+
--sbb-radio-button-inner-circle-color-disabled: var(--sbb-background-color-3);
|
|
1817
|
+
--sbb-radio-button-inner-circle-color-checked: var(--sbb-color-primary);
|
|
1818
|
+
--sbb-radio-button-inner-circle-color-checked: light-dark(
|
|
1819
|
+
var(--sbb-color-primary),
|
|
1820
|
+
var(--sbb-color-white)
|
|
1821
|
+
);
|
|
1822
|
+
--sbb-radio-button-inner-circle-color-checked-disabled: var(--sbb-background-color-2-inverted);
|
|
1809
1823
|
--sbb-radio-button-border-width: var(--sbb-border-width-1x);
|
|
1810
1824
|
--sbb-radio-button-border-style: solid;
|
|
1825
|
+
--sbb-radio-button-border-style-disabled: dashed;
|
|
1811
1826
|
--sbb-radio-button-border-color: var(--sbb-border-color-5);
|
|
1827
|
+
--sbb-radio-button-border-color-checked: var(--sbb-border-color-5);
|
|
1828
|
+
--sbb-radio-button-border-color-disabled: var(--sbb-border-color-5);
|
|
1812
1829
|
--sbb-radio-button-cursor: var(--sbb-cursor-pointer);
|
|
1813
1830
|
--sbb-radio-button-dimension-xs: 1.25rem;
|
|
1814
1831
|
--sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
|
|
1815
1832
|
--sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
|
|
1816
1833
|
--sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
|
|
1817
1834
|
--sbb-radio-button-inner-circle-dimension: 0.625rem;
|
|
1818
|
-
--sbb-radio-button-font-size: var(--sbb-text-font-size-
|
|
1835
|
+
--sbb-radio-button-font-size-xs: var(--sbb-text-font-size-xs);
|
|
1836
|
+
--sbb-radio-button-font-size-s: var(--sbb-text-font-size-s);
|
|
1837
|
+
--sbb-radio-button-font-size-m: var(--sbb-text-font-size-m);
|
|
1838
|
+
--sbb-radio-button-font-size: var(--sbb-radio-button-font-size-m);
|
|
1819
1839
|
--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
|
|
1820
1840
|
--sbb-select-placeholder-fallback-color: light-dark(
|
|
1821
1841
|
var(--sbb-color-metal),
|
|
@@ -2216,7 +2236,11 @@ summary {
|
|
|
2216
2236
|
--sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
|
|
2217
2237
|
--sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
|
|
2218
2238
|
--sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
|
|
2219
|
-
--sbb-visual-checkbox-selection-color
|
|
2239
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
2240
|
+
var(--sbb-color-primary),
|
|
2241
|
+
var(--sbb-color-white)
|
|
2242
|
+
);
|
|
2243
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
2220
2244
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
2221
2245
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
2222
2246
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|
|
@@ -2277,8 +2301,15 @@ summary {
|
|
|
2277
2301
|
--sbb-logo-panel-color: ButtonText !important;
|
|
2278
2302
|
--sbb-logo-signet-color: Canvas !important;
|
|
2279
2303
|
--sbb-radio-button-background-color: Canvas;
|
|
2304
|
+
--sbb-radio-button-background-color-disabled: Canvas;
|
|
2305
|
+
--sbb-radio-button-inner-circle-color: Canvas;
|
|
2306
|
+
--sbb-radio-button-inner-circle-color-disabled: GrayText;
|
|
2307
|
+
--sbb-radio-button-inner-circle-color-checked: Highlight;
|
|
2308
|
+
--sbb-radio-button-border-style-disabled: solid;
|
|
2280
2309
|
--sbb-radio-button-border-width: var(--sbb-border-width-2x);
|
|
2281
2310
|
--sbb-radio-button-border-color: ButtonBorder;
|
|
2311
|
+
--sbb-radio-button-border-color-checked: Highlight;
|
|
2312
|
+
--sbb-radio-button-border-color-disabled: GrayText;
|
|
2282
2313
|
--sbb-signet-background-color: ButtonText !important;
|
|
2283
2314
|
--sbb-signet-panel-color: ButtonText !important;
|
|
2284
2315
|
--sbb-signet-icon-color: Canvas !important;
|
|
@@ -10,8 +10,11 @@ $theme: 'standard' !default;
|
|
|
10
10
|
),
|
|
11
11
|
$theme
|
|
12
12
|
)};
|
|
13
|
-
--sbb-visual-checkbox-selection-color:
|
|
14
|
-
|
|
13
|
+
--sbb-visual-checkbox-selection-color: light-dark(
|
|
14
|
+
var(--sbb-color-primary),
|
|
15
|
+
var(--sbb-color-white)
|
|
16
|
+
);
|
|
17
|
+
--sbb-visual-checkbox-selection-color-negative: var(--sbb-color-white);
|
|
15
18
|
--sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
|
|
16
19
|
--sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
|
|
17
20
|
--sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
|