@sbb-esta/lyne-elements-dev 5.10.0-dev.1791359253 → 5.10.0-dev.1791383702
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/styles/features/form-field.scss +19 -33
- package/development/expansion-panel.pure.js +2 -2
- package/development/form-field.pure.js +2 -2
- package/expansion-panel/_expansion-panel.global.scss +2 -2
- package/expansion-panel.pure.js +2 -2
- package/form-field/_form-field.global.scss +162 -43
- package/form-field.pure.js +2 -2
- package/lean-off-brand-theme.css +182 -83
- package/lean-safety-theme.css +182 -83
- package/lean-theme.css +182 -83
- package/off-brand-theme.css +182 -83
- package/package.json +2 -2
- package/safety-theme.css +182 -83
- package/standard-theme.css +182 -83
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
@use '../mixins/functions';
|
|
2
1
|
@use '../mixins/typo';
|
|
3
2
|
|
|
4
3
|
.sbb-input {
|
|
4
|
+
--_sbb-input-border-width: var(--sbb-form-field-border-width);
|
|
5
|
+
|
|
5
6
|
display: inline-block;
|
|
6
|
-
min-width:
|
|
7
|
-
width: min(
|
|
7
|
+
min-width: var(--sbb-form-field-min-width);
|
|
8
|
+
width: min(var(--sbb-form-field-max-width), 100%);
|
|
8
9
|
min-height: var(--sbb-form-field-min-height);
|
|
9
10
|
max-height: var(--sbb-form-field-max-height);
|
|
10
11
|
appearance: none;
|
|
@@ -19,10 +20,10 @@
|
|
|
19
20
|
// Fill color needed for Safari
|
|
20
21
|
-webkit-text-fill-color: var(--sbb-form-field-text-color);
|
|
21
22
|
opacity: 1;
|
|
22
|
-
border: var(--
|
|
23
|
+
border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style)
|
|
23
24
|
var(--sbb-form-field-border-color);
|
|
24
25
|
border-radius: var(--sbb-form-field-border-radius);
|
|
25
|
-
padding-inline: var(--sbb-form-field-padding-inline);
|
|
26
|
+
padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
|
|
26
27
|
|
|
27
28
|
// Using `!important` keeps the utility consistent with the existing form-field
|
|
28
29
|
// rules when normalize/reset styles are loaded by the consumer.
|
|
@@ -37,28 +38,22 @@
|
|
|
37
38
|
|
|
38
39
|
&:read-only,
|
|
39
40
|
&:disabled {
|
|
40
|
-
|
|
41
|
-
--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
|
|
42
|
-
|
|
43
|
-
@media (forced-colors: active) {
|
|
44
|
-
--sbb-form-field-border-color: ButtonBorder;
|
|
45
|
-
}
|
|
41
|
+
background-color: var(--sbb-form-field-background-color-disabled);
|
|
46
42
|
}
|
|
47
43
|
|
|
48
44
|
&:disabled {
|
|
49
|
-
--sbb-form-field-border-style
|
|
45
|
+
border-style: var(--sbb-form-field-border-style-disabled);
|
|
46
|
+
color: var(--sbb-form-field-text-color-disabled);
|
|
47
|
+
border-color: var(--sbb-form-field-border-color-disabled);
|
|
50
48
|
|
|
51
49
|
&::placeholder {
|
|
52
|
-
color:
|
|
53
|
-
-webkit-text-fill-color:
|
|
50
|
+
color: var(--sbb-form-field-placeholder-color-disabled);
|
|
51
|
+
-webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
|
|
54
52
|
}
|
|
53
|
+
}
|
|
55
54
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--sbb-form-field-prefix-color: GrayText !important;
|
|
59
|
-
--sbb-form-field-text-color: GrayText !important;
|
|
60
|
-
--sbb-form-field-border-color: GrayText !important;
|
|
61
|
-
}
|
|
55
|
+
&:read-only {
|
|
56
|
+
border-color: var(--sbb-form-field-border-color-readonly);
|
|
62
57
|
}
|
|
63
58
|
|
|
64
59
|
&:focus-visible {
|
|
@@ -68,22 +63,13 @@
|
|
|
68
63
|
}
|
|
69
64
|
|
|
70
65
|
&:focus {
|
|
71
|
-
--
|
|
72
|
-
--sbb-form-field-border-width: var(--sbb-border-width-2x);
|
|
66
|
+
--_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
|
|
73
67
|
|
|
74
|
-
|
|
75
|
-
--sbb-form-field-border-color: Highlight;
|
|
76
|
-
--sbb-form-field-prefix-color: Highlight;
|
|
77
|
-
}
|
|
68
|
+
border-color: var(--sbb-form-field-border-color-focus);
|
|
78
69
|
}
|
|
79
70
|
|
|
80
71
|
&:user-invalid {
|
|
81
|
-
|
|
82
|
-
--sbb-form-field-text-color
|
|
83
|
-
|
|
84
|
-
@media (forced-colors: active) {
|
|
85
|
-
--sbb-form-field-border-color: LinkText !important;
|
|
86
|
-
--sbb-form-field-text-color: LinkText !important;
|
|
87
|
-
}
|
|
72
|
+
border-color: var(--sbb-form-field-border-color-error);
|
|
73
|
+
color: var(--sbb-form-field-text-color-error);
|
|
88
74
|
}
|
|
89
75
|
}
|
|
@@ -44,7 +44,7 @@ var SbbExpansionPanelContentElement = class extends SbbElement {
|
|
|
44
44
|
|
|
45
45
|
//#endregion
|
|
46
46
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss?inline
|
|
47
|
-
var expansion_panel_header_default = ":host {\n --sbb-expansion-panel-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n
|
|
47
|
+
var expansion_panel_header_default = ":host {\n --sbb-expansion-panel-header-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n display: block;\n position: relative;\n}\n:host::after {\n content: \"\";\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(size-s),[state--size-s])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-s);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-s);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-s);\n}\n\n:host(:is(:state(size-l),[state--size-l])) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-l);\n --sbb-expansion-panel-header-padding-block: var(--sbb-expansion-panel-header-padding-block-l);\n --sbb-expansion-panel-header-padding-inline: var(--sbb-expansion-panel-header-padding-inline-l);\n}\n\n:host(:not(:is(:state(size-s),[state--size-s]), :is(:state(size-l),[state--size-l]))) {\n --sbb-expansion-panel-header-gap: var(--sbb-expansion-panel-header-gap-default);\n --sbb-expansion-panel-header-padding-block: var(\n --sbb-expansion-panel-header-padding-block-default\n );\n --sbb-expansion-panel-header-padding-inline: var(\n --sbb-expansion-panel-header-padding-inline-default\n );\n}\n\n:host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-cursor: var(--sbb-cursor-default);\n --sbb-expansion-panel-header-text-color: var(--sbb-color-granite);\n --sbb-expansion-panel-header-text-color: light-dark(\n var(--sbb-color-granite),\n var(--sbb-color-storm)\n );\n}\n@media (forced-colors: active) {\n :host(:is(:disabled, [disabled-interactive])) {\n --sbb-expansion-panel-header-text-color: GrayText;\n }\n}\n\n:host(:not([disabled], [aria-expanded=true]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-header-translate: 0 var(--sbb-expansion-panel-header-translate-y-hover, 0);\n}\n\n:host(:focus-visible) {\n outline: none;\n}\n:host(:focus-visible)::after {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-spacing-fixed-1x);\n}\n\n.sbb-expansion-panel-header {\n display: flex;\n justify-content: var(--sbb-expansion-panel-header-justify-content);\n align-items: center;\n gap: var(--sbb-expansion-panel-header-gap);\n width: 100%;\n padding: var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);\n text-align: start;\n cursor: var(--sbb-expansion-panel-header-cursor);\n color: var(--sbb-expansion-panel-header-text-color);\n font-size: var(--sbb-expansion-panel-header-font-size);\n font-weight: normal;\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n -webkit-tap-highlight-color: transparent;\n transition: translate var(--sbb-expansion-panel-header-transition-duration) var(--sbb-expansion-panel-transition-easing-function);\n translate: var(--sbb-expansion-panel-header-translate, none);\n}\n\n.sbb-expansion-panel-header__title,\n.sbb-expansion-panel-header__toggle,\n.sbb-expansion-panel-header__icon {\n display: flex;\n}\n\n.sbb-expansion-panel-header__icon {\n width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-width: var(--sbb-expansion-panel-icon-size);\n --sbb-icon-svg-height: var(--sbb-expansion-panel-icon-size);\n}\n:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon {\n display: none;\n}\n\n.sbb-expansion-panel-header__title {\n align-items: center;\n gap: var(--sbb-expansion-panel-title-gap);\n overflow: hidden;\n min-height: var(--sbb-size-icon-ui-medium);\n}\n\n.sbb-expansion-panel-header__toggle-icon {\n transition: transform var(--sbb-disable-animation-duration, var(--sbb-animation-duration-4x));\n}\n:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon {\n transform: rotate(-180deg);\n}\n";
|
|
48
48
|
|
|
49
49
|
//#endregion
|
|
50
50
|
//#region src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.component.ts
|
|
@@ -126,7 +126,7 @@ var SbbExpansionPanelHeaderElement = class extends SbbDisabledTabIndexActionMixi
|
|
|
126
126
|
|
|
127
127
|
//#endregion
|
|
128
128
|
//#region src/elements/expansion-panel/expansion-panel/expansion-panel.scss?inline
|
|
129
|
-
var expansion_panel_default = ":host {\n --sbb-expansion-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n display: block;\n background-color: var(--sbb-expansion-panel-background-color);\n border: var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);\n border-block-start-color: var(--sbb-expansion-panel-border-block-start-color);\n border-block-start-width: var(--sbb-expansion-panel-border-block-start-width);\n border-radius: var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);\n background-clip: padding-box;\n}\n\n:host([size=s]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s);\n}\n\n:host([size=l]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l);\n}\n\n:host(:not([size])) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default);\n}\n\n@media (forced-colors: active) {\n :host([disabled]) {\n --sbb-expansion-panel-border-color: GrayText;\n --sbb-expansion-panel-border-block-start-color: GrayText;\n }\n}\n\n:host([expanded]) {\n --_sbb-expansion-panel-display-expanded: grid;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])) {\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n --sbb-expansion-panel-start-end-radius: 0;\n --sbb-expansion-panel-start-start-radius: 0;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])) {\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))) {\n --sbb-expansion-panel-end-end-radius: 0;\n --sbb-expansion-panel-end-start-radius: 0;\n}\n\n:host([color=white]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-3);\n}\n\n:host([borderless]) {\n --sbb-expansion-panel-border-width: 0;\n --sbb-expansion-panel-border-color: transparent;\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n}\n@media (forced-colors: active) {\n :host([borderless]) {\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n }\n}\n\n:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x);\n}\n@media (forced-colors: active) {\n :host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n }\n}\n\n@media (forced-colors: active) {\n :host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-border-color: Highlight;\n --sbb-expansion-panel-border-block-start-color: Highlight;\n }\n}\n\n.sbb-expansion-panel__header {\n margin: 0;\n}\n\n.sbb-expansion-panel__content-wrapper {\n display: var(--_sbb-expansion-panel-display-expanded, none);\n grid-template-rows: 0fr;\n opacity: 0;\n}\n:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n animation-delay: 0s, var(--sbb-expansion-panel-animation-duration);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper {\n display: grid;\n visibility: hidden;\n animation-name: close;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n}\n\n.sbb-expansion-panel__content {\n min-height: 0;\n min-width: 0;\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n opacity: 1;\n }\n to {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n}\n";
|
|
129
|
+
var expansion_panel_default = ":host {\n --sbb-expansion-panel-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --sbb-expansion-panel-transition-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-2x)\n );\n --sbb-expansion-panel-border-color: var(--sbb-border-color-4-inverted);\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-color: var(--sbb-expansion-panel-border-color);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n display: block;\n background-color: var(--sbb-expansion-panel-background-color);\n border: var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);\n border-block-start-color: var(--sbb-expansion-panel-border-block-start-color);\n border-block-start-width: var(--sbb-expansion-panel-border-block-start-width);\n border-radius: var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);\n background-clip: padding-box;\n transition: box-shadow var(--sbb-expansion-panel-transition-duration) var(--sbb-expansion-panel-transition-easing-function);\n}\n\n:host([size=s]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-s);\n}\n\n:host([size=l]) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-l);\n}\n\n:host(:not([size])) {\n --sbb-expansion-panel-title-gap: var(--sbb-expansion-panel-title-gap-default);\n}\n\n@media (forced-colors: active) {\n :host([disabled]) {\n --sbb-expansion-panel-border-color: GrayText;\n --sbb-expansion-panel-border-block-start-color: GrayText;\n }\n}\n\n:host([expanded]) {\n --_sbb-expansion-panel-display-expanded: grid;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])) {\n --sbb-expansion-panel-start-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-start-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n --sbb-expansion-panel-start-end-radius: 0;\n --sbb-expansion-panel-start-start-radius: 0;\n}\n\n:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])) {\n --sbb-expansion-panel-end-end-radius: var(--sbb-expansion-panel-border-radius);\n --sbb-expansion-panel-end-start-radius: var(--sbb-expansion-panel-border-radius);\n}\n\n:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))) {\n --sbb-expansion-panel-end-end-radius: 0;\n --sbb-expansion-panel-end-start-radius: 0;\n}\n\n:host([color=white]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-1);\n}\n\n:host([color=milk]) {\n --sbb-expansion-panel-background-color: var(--sbb-background-color-3);\n}\n\n:host([borderless]) {\n --sbb-expansion-panel-border-width: 0;\n --sbb-expansion-panel-border-color: transparent;\n --sbb-expansion-panel-border-block-start-width: 0;\n --sbb-expansion-panel-border-block-start-color: transparent;\n}\n@media (forced-colors: active) {\n :host([borderless]) {\n --sbb-expansion-panel-border-width: var(--sbb-border-width-1x);\n --sbb-expansion-panel-border-block-start-width: var(--sbb-expansion-panel-border-width);\n }\n}\n\n:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: var(--sbb-spacing-fixed-1x);\n}\n@media (forced-colors: active) {\n :host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))) {\n --sbb-expansion-panel-border-block-start-width: 0;\n }\n}\n\n@media (forced-colors: active) {\n :host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n --sbb-expansion-panel-border-color: Highlight;\n --sbb-expansion-panel-border-block-start-color: Highlight;\n }\n}\n\n:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])) {\n box-shadow: var(--sbb-expansion-panel-box-shadow-hover);\n isolation: isolate;\n}\n\n.sbb-expansion-panel__header {\n margin: 0;\n}\n\n.sbb-expansion-panel__content-wrapper {\n display: var(--_sbb-expansion-panel-display-expanded, none);\n grid-template-rows: 0fr;\n opacity: 0;\n}\n:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper {\n grid-template-rows: 1fr;\n opacity: 1;\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper {\n animation-name: open, open-opacity;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n animation-delay: 0s, var(--sbb-expansion-panel-animation-duration);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper {\n display: grid;\n visibility: hidden;\n animation-name: close;\n animation-duration: var(--sbb-expansion-panel-animation-duration);\n animation-timing-function: var(--sbb-animation-easing);\n}\n\n.sbb-expansion-panel__content {\n min-height: 0;\n min-width: 0;\n}\n\n@keyframes open {\n from {\n grid-template-rows: 0fr;\n }\n to {\n grid-template-rows: 1fr;\n }\n}\n@keyframes open-opacity {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes close {\n from {\n grid-template-rows: 1fr;\n opacity: 1;\n }\n to {\n grid-template-rows: 0fr;\n opacity: 0;\n }\n}\n";
|
|
130
130
|
|
|
131
131
|
//#endregion
|
|
132
132
|
//#region src/elements/expansion-panel/expansion-panel/expansion-panel.component.ts
|
|
@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
|
|
|
56
56
|
|
|
57
57
|
//#endregion
|
|
58
58
|
//#region src/elements/form-field/form-field/form-field.scss?inline
|
|
59
|
-
var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: 9.375rem;\n width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-color-3-negative);\n --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n --sbb-form-field-text-color: var(--sbb-color-3-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n :host([negative]) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-size-element-xs);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n --_sbb-form-field-input-margin-block-end: -0.125rem;\n --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n --_sbb-form-field-floating-label-transform: 0.34375rem;\n --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n :host([size=s]) {\n --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n --_sbb-form-field-floating-label-transform: 0.3125rem;\n --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n }\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-size-element-m);\n --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-size-element-l);\n --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n --_sbb-form-field-input-margin-block-end: 0;\n --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n --_sbb-form-field-floating-label-transform: 0.53125rem;\n --_sbb-form-field-spacer-margin-block-end: calc(\n -1 * var(--_sbb-form-field-label-to-input-overlapping)\n );\n}\n@media (min-width: calc(64rem)) {\n :host(:is([size=m], [size=l])) {\n --_sbb-form-field-floating-label-transform: 0.65625rem;\n }\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-background-color-3);\n --sbb-form-field-border-color: var(--sbb-color-graphite);\n --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n --sbb-form-field-arrow-color: var(--sbb-color-granite);\n --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-border-color: ButtonBorder;\n }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n --sbb-form-field-border-color: var(--sbb-border-color-5);\n --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: GrayText !important;\n --sbb-form-field-prefix-color: GrayText !important;\n --sbb-form-field-text-color: GrayText !important;\n --sbb-form-field-border-color: GrayText !important;\n }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-text-color: var(--sbb-color-5);\n --sbb-form-field-label-color: var(--sbb-color-5);\n --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n --sbb-form-field-label-color: var(--sbb-color-granite);\n --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n --sbb-form-field-prefix-color: var(--sbb-color-granite);\n --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-border-color: var(--sbb-border-color-3);\n --sbb-form-field-prefix-color: var(--sbb-color-3);\n --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n :host(:is(:state(focus),[state--focus])) {\n --sbb-form-field-border-color: Highlight;\n --sbb-form-field-prefix-color: Highlight;\n }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
|
|
59
|
+
var form_field_default = "@charset \"UTF-8\";\n:host {\n --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n --sbb-form-field-select-inline-padding-end: calc(\n var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n );\n --sbb-form-field-label-size: calc(\n var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-text-line-height: calc(\n var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n );\n --sbb-form-field-margin-block-start: calc(\n (\n var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n --sbb-form-field-text-line-height\n ) +\n var(--_sbb-form-field-label-to-input-overlapping)\n ) /\n 2\n );\n --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n --sbb-focus-outline-color: light-dark(\n var(--sbb-focus-outline-color-default),\n var(--sbb-focus-outline-color-dark)\n );\n display: inline-block;\n color: var(--sbb-form-field-color);\n font-weight: normal;\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n min-width: var(--sbb-form-field-min-width);\n width: min(var(--sbb-form-field-max-width), 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-form-field-color-negative);\n --sbb-form-field-background-color: var(--sbb-form-field-background-color-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-negative);\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-negative);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-negative);\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-form-field-min-height-s);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-s);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-s);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-s);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-s);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n --sbb-form-field-min-height: var(--sbb-form-field-min-height-m);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-m);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-m);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-m);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-m);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-form-field-min-height-l);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-l);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-l);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-l);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-l);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-l);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-l);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-l);\n}\n\n:host([error-space=reserve]) {\n --sbb-form-field-hint-min-height: calc(\n var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n );\n --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-background-color: var(--sbb-form-field-background-color-disabled);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-form-field-background-color-disabled-negative);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled-negative);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled);\n --sbb-form-field-border-style: var(--sbb-form-field-border-style-disabled);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled-negative);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled-negative);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))[negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly-negative);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus);\n --sbb-form-field-border-width: var(--sbb-form-field-border-width-focus);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus-negative);\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n :host([floating-label]) {\n --sbb-select-placeholder-color: Canvas;\n }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n --sbb-form-field-label-size: 0rem;\n --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n content: \"\";\n user-select: none;\n width: 0;\n height: 0;\n}\n\n.sbb-form-field__wrapper {\n display: flex;\n flex: 1;\n gap: var(--sbb-form-field-gap);\n padding-inline: var(--sbb-form-field-padding-inline);\n border-radius: var(--sbb-form-field-border-radius);\n min-height: var(--sbb-form-field-min-height);\n max-height: var(--sbb-form-field-max-height);\n background-color: var(--sbb-form-field-background-color);\n position: relative;\n}\n.sbb-form-field__wrapper::before {\n content: \"\";\n display: block;\n position: absolute;\n inset: 0;\n border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n border-radius: var(--sbb-form-field-border-radius);\n pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n outline-offset: var(--sbb-focus-outline-offset);\n outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n border-color: transparent;\n }\n .sbb-form-field__wrapper::after {\n position: absolute;\n border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n inset-block-end: 0;\n z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n }\n :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n content: \"\";\n }\n}\n\n::slotted(*[slot=prefix]) {\n color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n display: flex;\n min-width: var(--sbb-icon-svg-width);\n margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n ::slotted(*[slot=suffix]) {\n color: var(--sbb-form-field-prefix-color);\n }\n}\n.sbb-form-field__select-input-icon {\n position: absolute;\n top: 50%;\n translate: 0 -50%;\n display: none;\n position: absolute;\n inset-inline-end: 0;\n margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n pointer-events: none;\n color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n display: inline-block;\n}\n\n.sbb-form-field__input-container {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n position: relative;\n margin-block-start: var(--sbb-form-field-margin-block-start);\n min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n display: flex;\n height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n border: 0;\n clip-path: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.sbb-form-field__label {\n display: flex;\n max-width: 100%;\n cursor: var(--sbb-cursor-default);\n position: absolute;\n inset-block-start: 0;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-label-text-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n}\n:host(:where(:is(:state(input-element-select),[state--input-element-select]), :is(:state(input-element-sbb-select),[state--input-element-sbb-select]))) .sbb-form-field__label {\n padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n transform-origin: 0 0;\n pointer-events: none;\n backface-visibility: hidden;\n will-change: transform, font-size;\n transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n transition-timing-function: var(--sbb-animation-easing);\n transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n font-size: var(--sbb-form-field-input-text-size);\n transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n z-index: 1;\n }\n}\n\n.sbb-form-field__label-ellipsis {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n display: flex;\n flex: 1;\n align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n display: flex;\n min-height: var(--sbb-form-field-hint-min-height);\n flex-direction: column;\n margin-inline-start: var(--sbb-form-field-padding-inline);\n margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
|
|
60
60
|
|
|
61
61
|
//#endregion
|
|
62
62
|
//#region src/elements/form-field/form-field/form-field.component.ts
|
|
@@ -775,7 +775,7 @@ var SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseEleme
|
|
|
775
775
|
|
|
776
776
|
//#endregion
|
|
777
777
|
//#region src/elements/form-field/hint/hint.scss?inline
|
|
778
|
-
var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-form-field-label-color: var(--sbb-color-
|
|
778
|
+
var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n}\n";
|
|
779
779
|
|
|
780
780
|
//#endregion
|
|
781
781
|
//#region src/elements/form-field/hint/hint.component.ts
|
|
@@ -5,6 +5,8 @@ $theme: 'standard' !default;
|
|
|
5
5
|
@mixin base {
|
|
6
6
|
--sbb-expansion-panel-background-color: var(--sbb-background-color-1);
|
|
7
7
|
--sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
|
|
8
|
+
--sbb-expansion-panel-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
9
|
+
--sbb-expansion-panel-transition-easing-function: var(--sbb-animation-easing);
|
|
8
10
|
|
|
9
11
|
// Vars which will be used by child components
|
|
10
12
|
--sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
|
|
@@ -58,9 +60,7 @@ $theme: 'standard' !default;
|
|
|
58
60
|
),
|
|
59
61
|
$theme
|
|
60
62
|
)};
|
|
61
|
-
--sbb-expansion-panel-header-box-shadow-hover: var(--sbb-box-shadow-level-11-soft);
|
|
62
63
|
--sbb-expansion-panel-header-translate-y-hover: #{sbb.px-to-rem-build(-2)};
|
|
63
|
-
--sbb-expansion-panel-header-transition-easing-function: var(--sbb-animation-easing);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
@mixin forced-colors {
|
package/expansion-panel.pure.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElement as r,SbbDisabledTabIndexActionMixin as i,SbbElement as a,SbbMediaMatcherController as o,SbbMediaQueryHover as s,SbbPropertyWatcherController as c,forceType as l,isZeroAnimationDuration as u,ɵstateController as d}from"./core.js";import{SbbIconNameMixin as f}from"./icon.pure.js";import{__esDecorate as p,__runInitializers as m}from"tslib";import{property as h}from"lit/decorators.js";var g=`:host{--sbb-expansion-panel-content-padding-inline-start:var(--sbb-expansion-panel-content-padding-inline);padding-block-end:var(--sbb-expansion-panel-content-padding-block-end);padding-inline:var(--sbb-expansion-panel-content-padding-inline-start) var(--sbb-expansion-panel-content-padding-inline);display:block}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-content-padding-inline:var(--sbb-expansion-panel-content-padding-inline-default)}@media (width>=37.5rem){:host(:is(:state(icon-space),[state--icon-space])){--sbb-expansion-panel-content-padding-inline-start:calc(var(--sbb-expansion-panel-content-padding-inline) + var(--sbb-expansion-panel-icon-size) + var(--sbb-expansion-panel-title-gap))}}::slotted(:is(p,sbb-title):first-child){margin-block-start:0}
|
|
2
|
-
`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{--sbb-expansion-panel-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));
|
|
2
|
+
`,_=class extends a{static{this.elementName=`sbb-expansion-panel-content`}static{this.role=`region`}static{this.styles=[n(g)]}constructor(){super(),this._previousSize=null,this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`content`}render(){return e`<slot></slot>`}},v=`:host{--sbb-expansion-panel-header-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block;position:relative}:host:after{content:"";pointer-events:none;border-radius:var(--sbb-expansion-panel-border-radius);width:100%;height:100%;position:absolute;inset:0}:host(:is(:state(size-s),[state--size-s])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-s);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-s);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-s)}:host(:is(:state(size-l),[state--size-l])){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-l);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-l);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-l)}:host(:not(:is(:state(size-s),[state--size-s]),:is(:state(size-l),[state--size-l]))){--sbb-expansion-panel-header-gap:var(--sbb-expansion-panel-header-gap-default);--sbb-expansion-panel-header-padding-block:var(--sbb-expansion-panel-header-padding-block-default);--sbb-expansion-panel-header-padding-inline:var(--sbb-expansion-panel-header-padding-inline-default)}:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-cursor:var(--sbb-cursor-default);--sbb-expansion-panel-header-text-color:light-dark(var(--sbb-color-granite),var(--sbb-color-storm))}@media (forced-colors:active){:host(:is(:disabled,[disabled-interactive])){--sbb-expansion-panel-header-text-color:GrayText}}:host(:not([disabled],[aria-expanded=true]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-header-translate:0 var(--sbb-expansion-panel-header-translate-y-hover,0)}:host(:focus-visible){outline:none}:host(:focus-visible):after{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);outline-offset:var(--sbb-spacing-fixed-1x)}.sbb-expansion-panel-header{justify-content:var(--sbb-expansion-panel-header-justify-content);align-items:center;gap:var(--sbb-expansion-panel-header-gap);width:100%;padding:var(--sbb-expansion-panel-header-padding-block) var(--sbb-expansion-panel-header-padding-inline);text-align:start;cursor:var(--sbb-expansion-panel-header-cursor);color:var(--sbb-expansion-panel-header-text-color);font-size:var(--sbb-expansion-panel-header-font-size);letter-spacing:var(--sbb-letter-spacing-text);font-weight:400;line-height:var(--sbb-typo-line-height-text);-webkit-tap-highlight-color:transparent;transition:translate var(--sbb-expansion-panel-header-transition-duration) var(--sbb-expansion-panel-transition-easing-function);translate:var(--sbb-expansion-panel-header-translate,none);display:flex}.sbb-expansion-panel-header__title,.sbb-expansion-panel-header__toggle,.sbb-expansion-panel-header__icon{display:flex}.sbb-expansion-panel-header__icon{width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-width:var(--sbb-expansion-panel-icon-size);--sbb-icon-svg-height:var(--sbb-expansion-panel-icon-size)}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-expansion-panel-header__icon{display:none}.sbb-expansion-panel-header__title{align-items:center;gap:var(--sbb-expansion-panel-title-gap);min-height:var(--sbb-size-icon-ui-medium);overflow:hidden}.sbb-expansion-panel-header__toggle-icon{transition:transform var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x))}:host([aria-expanded]:not([aria-expanded=false])) .sbb-expansion-panel-header__toggle-icon{transform:rotate(-180deg)}
|
|
3
3
|
`,y=class extends i(f(r)){static{this.elementName=`sbb-expansion-panel-header`}static{this.styles=[n(v)]}static{this.events={toggleexpanded:`toggleexpanded`}}constructor(){super(),this._mediaMatcher=new o(this,{[s]:e=>this._isHover=e}),this._isHover=this._mediaMatcher.matches(s)??!1,this._previousSize=null,this.addEventListener?.(`click`,()=>this._emitExpandedEvent()),this.addEventListener?.(`mouseenter`,()=>this._onMouseMovement(!0)),this.addEventListener?.(`mouseleave`,()=>this._onMouseMovement(!1)),this.addEventListener?.(`slottedchange`,()=>this._setIconState()),this.addController(new c(this,()=>this.closest(`sbb-expansion-panel`),{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot||=`header`}_emitExpandedEvent(){this.disabled||this.dispatchEvent(new Event(`toggleexpanded`,{bubbles:!0,composed:!0}))}_onMouseMovement(e){let t=this.closest(`sbb-expansion-panel`);(!e||t&&this._isHover)&&(d(t).toggle(`toggle-hover`,e),this.toggleState(`toggle-hover`,e))}_setIconState(){this.toggleState(`icon`,!!(this.iconName||this.matches?.(`:is(:state(icon),[state--icon])`)))}renderTemplate(){return this._setIconState(),e`
|
|
4
4
|
<span class="sbb-expansion-panel-header__title">
|
|
5
5
|
<span class="sbb-expansion-panel-header__icon"> ${this.renderIconSlot()} </span>
|
|
@@ -12,7 +12,7 @@ import{html as e,nothing as t,unsafeCSS as n}from"lit";import{SbbButtonBaseEleme
|
|
|
12
12
|
>
|
|
13
13
|
</sbb-icon>
|
|
14
14
|
</span>`}
|
|
15
|
-
`}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
|
|
15
|
+
`}},b=`:host{--sbb-expansion-panel-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-expansion-panel-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-expansion-panel-border-color:var(--sbb-border-color-4-inverted);--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-color:var(--sbb-expansion-panel-border-color);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width);--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius);background-color:var(--sbb-expansion-panel-background-color);border:var(--sbb-expansion-panel-border-width) solid var(--sbb-expansion-panel-border-color);border-block-start-color:var(--sbb-expansion-panel-border-block-start-color);border-block-start-width:var(--sbb-expansion-panel-border-block-start-width);border-radius:var(--sbb-expansion-panel-start-start-radius) var(--sbb-expansion-panel-start-end-radius) var(--sbb-expansion-panel-end-end-radius) var(--sbb-expansion-panel-end-start-radius);transition:box-shadow var(--sbb-expansion-panel-transition-duration) var(--sbb-expansion-panel-transition-easing-function);background-clip:padding-box;display:block}:host([size=s]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-s)}:host([size=l]){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-l)}:host(:not([size])){--sbb-expansion-panel-title-gap:var(--sbb-expansion-panel-title-gap-default)}@media (forced-colors:active){:host([disabled]){--sbb-expansion-panel-border-color:GrayText;--sbb-expansion-panel-border-block-start-color:GrayText}}:host([expanded]){--_sbb-expansion-panel-display-expanded:grid}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-first),[state--accordion-first])){--sbb-expansion-panel-start-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-start-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent;--sbb-expansion-panel-start-end-radius:0;--sbb-expansion-panel-start-start-radius:0}:host(:is(:state(accordion),[state--accordion]):is(:state(accordion-last),[state--accordion-last])){--sbb-expansion-panel-end-end-radius:var(--sbb-expansion-panel-border-radius);--sbb-expansion-panel-end-start-radius:var(--sbb-expansion-panel-border-radius)}:host(:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-last),[state--accordion-last]))){--sbb-expansion-panel-end-end-radius:0;--sbb-expansion-panel-end-start-radius:0}:host([color=white]){--sbb-expansion-panel-background-color:var(--sbb-background-color-1)}:host([color=milk]){--sbb-expansion-panel-background-color:var(--sbb-background-color-3)}:host([borderless]){--sbb-expansion-panel-border-width:0;--sbb-expansion-panel-border-color:transparent;--sbb-expansion-panel-border-block-start-width:0;--sbb-expansion-panel-border-block-start-color:transparent}@media (forced-colors:active){:host([borderless]){--sbb-expansion-panel-border-width:var(--sbb-border-width-1x);--sbb-expansion-panel-border-block-start-width:var(--sbb-expansion-panel-border-width)}}:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:var(--sbb-spacing-fixed-1x)}@media (forced-colors:active){:host([borderless]:is(:state(accordion),[state--accordion]):not(:is(:state(accordion-first),[state--accordion-first]))){--sbb-expansion-panel-border-block-start-width:0}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){--sbb-expansion-panel-border-color:Highlight;--sbb-expansion-panel-border-block-start-color:Highlight}}:host(:not([disabled]):is(:state(toggle-hover),[state--toggle-hover])){box-shadow:var(--sbb-expansion-panel-box-shadow-hover);isolation:isolate}.sbb-expansion-panel__header{margin:0}.sbb-expansion-panel__content-wrapper{display:var(--_sbb-expansion-panel-display-expanded,none);opacity:0;grid-template-rows:0fr}:host(:is(:state(state-opened),[state--state-opened])) .sbb-expansion-panel__content-wrapper{opacity:1;grid-template-rows:1fr}:host(:is(:state(state-opening),[state--state-opening])) .sbb-expansion-panel__content-wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s, var(--sbb-expansion-panel-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-expansion-panel__content-wrapper{visibility:hidden;animation-name:close;animation-duration:var(--sbb-expansion-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);display:grid}.sbb-expansion-panel__content{min-width:0;min-height:0}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{opacity:1;grid-template-rows:1fr}to{opacity:0;grid-template-rows:0fr}}
|
|
16
16
|
`;let x=0,S=(()=>{let r=a,i=[],o,s=[],c=[],f,g=[],_=[],v,y,S,C=[],w=[],T,E=[],D=[];return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;o=[h({attribute:`title-level`})],f=[h({reflect:!0})],v=[h({reflect:!0,type:Boolean})],y=[h({reflect:!0,type:Boolean})],S=[l(),h({reflect:!0,type:Boolean})],T=[h({reflect:!0})],p(this,null,o,{kind:`accessor`,name:`titleLevel`,static:!1,private:!1,access:{has:e=>`titleLevel`in e,get:e=>e.titleLevel,set:(e,t)=>{e.titleLevel=t}},metadata:e},s,c),p(this,null,f,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},g,_),p(this,null,v,{kind:`setter`,name:`expanded`,static:!1,private:!1,access:{has:e=>`expanded`in e,set:(e,t)=>{e.expanded=t}},metadata:e},null,i),p(this,null,y,{kind:`setter`,name:`disabled`,static:!1,private:!1,access:{has:e=>`disabled`in e,set:(e,t)=>{e.disabled=t}},metadata:e},null,i),p(this,null,S,{kind:`accessor`,name:`borderless`,static:!1,private:!1,access:{has:e=>`borderless`in e,get:e=>e.borderless,set:(e,t)=>{e.borderless=t}},metadata:e},C,w),p(this,null,T,{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:e},E,D),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-expansion-panel`}static{this.styles=[n(b)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get titleLevel(){return this.#e}set titleLevel(e){this.#e=e}#t;get color(){return this.#t}set color(e){this.#t=e}set expanded(e){this._expanded=e,this._onExpandedChange()}get expanded(){return this._expanded}set disabled(e){this._disabled=e,this._updateDisabledOnHeader(this._disabled)}get disabled(){return this._disabled}#n;get borderless(){return this.#n}set borderless(e){this.#n=e}#r;get size(){return this.#r}set size(e){this.#r=e}set _state(e){this._stateInternal&&this.internals.states.delete(`state-${this._stateInternal}`),this._stateInternal=e,this._stateInternal&&this.internals.states.add(`state-${this._stateInternal}`)}get _state(){return this._stateInternal}constructor(){super(),this.#e=(m(this,i),m(this,s,null)),this.#t=(m(this,c),m(this,g,`white`)),this._expanded=(m(this,_),!1),this._disabled=!1,this.#n=m(this,C,!1),this.#r=(m(this,w),m(this,E,null)),this._stateInternal=m(this,D),this._progressiveId=`-${++x}`,this._state=`closed`,this.addEventListener?.(`toggleexpanded`,e=>{e.target===this._headerRef&&this._toggleExpanded()})}connectedCallback(){super.connectedCallback(),this.toggleState(`accordion`,!!this.closest?.(`sbb-accordion`))}disconnectedCallback(){super.disconnectedCallback(),this.internals.states.delete(`accordion`)}_toggleExpanded(){this.expanded=!this.expanded}_onExpandedChange(){this._headerRef?.setAttribute(`aria-expanded`,String(this.expanded)),this._contentRef?.setAttribute(`aria-hidden`,String(!this.expanded)),this.expanded?this._open():this._state===`opened`&&this._close()}_open(){this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),(!this.hasUpdated||this._isZeroAnimationDuration())&&this._handleOpening()}_close(){this._state=`closing`,this.dispatchEvent(new Event(`beforeclose`)),this._isZeroAnimationDuration()&&this._handleClosing()}_isZeroAnimationDuration(){return u(this,`--sbb-expansion-panel-animation-duration`)}_handleOpening(){this._state=`opened`,this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`))}_updateDisabledOnHeader(e){this._headerRef&&(this._headerRef.disabled=e)}_handleSlotchange(){let e=Array.from(this.children??[]),t=e.find(e=>e.localName===`sbb-expansion-panel-header`),n=e.find(e=>e.localName===`sbb-expansion-panel-content`);(this._headerRef!==t||this._contentRef!==n)&&(t&&this._headerRef!==t&&(t.id||=`sbb-expansion-panel-header${this._progressiveId}`,t.setAttribute(`aria-expanded`,String(this.expanded)),t.toggleAttribute(`disabled`,this.disabled)),n&&this._contentRef!==n&&(n.id||=`sbb-expansion-panel-content${this._progressiveId}`,n.setAttribute(`aria-hidden`,String(!this.expanded))),this._headerRef=t,this._contentRef=n,this._headerRef&&this._contentRef&&(this._headerRef.setAttribute(`aria-controls`,this._contentRef.id),this._contentRef.setAttribute(`aria-labelledby`,this._headerRef.id),d(this._contentRef).toggle(`icon-space`,d(this._headerRef).has(`icon`))))}_onAnimationEnd(e){e.animationName===`open-opacity`&&this._state===`opening`?this._handleOpening():e.animationName===`close`&&this._state===`closing`&&this._handleClosing()}render(){return e`
|
|
17
17
|
<div
|
|
18
18
|
role=${this.titleLevel?`heading`:t}
|