@sbb-esta/lyne-elements-dev 5.8.0-dev.1789462648 → 5.9.0-dev.1789474051
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/_theme.scss +0 -1
- package/development/notification.pure.js +1 -1
- package/lean-off-brand-theme.css +2 -4
- package/lean-safety-theme.css +2 -4
- package/lean-theme.css +2 -4
- package/notification/_notification.global.scss +4 -9
- package/notification.pure.js +1 -1
- package/off-brand-theme.css +1 -3
- package/package.json +2 -2
- package/safety-theme.css +1 -3
- package/standard-theme.css +1 -3
package/core/styles/_theme.scss
CHANGED
|
@@ -318,7 +318,6 @@ $font-face: 'SBB' !default;
|
|
|
318
318
|
@include alert.breakpoint-small;
|
|
319
319
|
@include dialog.breakpoint-small;
|
|
320
320
|
@include footer.breakpoint-small;
|
|
321
|
-
@include notification.breakpoint-small;
|
|
322
321
|
}
|
|
323
322
|
@include sbb.mq($from: large) {
|
|
324
323
|
@include sbb-css-tokens.breakpoint-large;
|
|
@@ -8,7 +8,7 @@ import { SbbDividerElement } from "./divider.pure.js";
|
|
|
8
8
|
import { SbbIconNameMixin } from "./icon.pure.js";
|
|
9
9
|
|
|
10
10
|
//#region src/elements/notification/notification.scss?inline
|
|
11
|
-
var notification_default = ":host {\n --sbb-notification-border: var(--sbb-notification-border-width) solid\n var(--sbb-notification-type-color);\n --sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);\n --sbb-notification-background-color: light-dark(\n color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),\n color-mix(in srgb, var(--sbb-notification-type-color) 35%, white)\n );\n --sbb-notification-icon-color: var(--sbb-notification-type-color);\n --sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-radius) / 2);\n --sbb-notification-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-notification-icon-authoritative-font-size: 1em;\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n --_sbb-notification-inset-inline-start: calc(\n var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n display: block;\n font-size: var(--sbb-notification-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:where(:is(:state(slotted-title),[state--slotted-title]), :is(:state(slotted-title),[state--slotted-title])[size=m])) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])[size=s]) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([size=s]) {\n --sbb-notification-font-size: var(--sbb-text-font-size-xs);\n --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
|
|
11
|
+
var notification_default = ":host {\n --sbb-notification-border: var(--sbb-notification-border-width) solid\n var(--sbb-notification-type-color);\n --sbb-notification-background-color: color-mix(in srgb, var(--sbb-notification-type-color) 5%, white);\n --sbb-notification-background-color: light-dark(\n color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),\n color-mix(in srgb, var(--sbb-notification-type-color) 35%, white)\n );\n --sbb-notification-icon-color: var(--sbb-notification-type-color);\n --sbb-notification-border-radius-start: calc(var(--sbb-notification-base-border-radius) / 2);\n --sbb-notification-animation-duration: var(\n --sbb-disable-animation-duration,\n var(--sbb-animation-duration-4x)\n );\n --_sbb-notification-icon-authoritative-font-size: 1em;\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n --_sbb-notification-inset-inline-start: calc(\n var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)\n );\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n display: block;\n font-size: var(--sbb-notification-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:is(:state(state-opening),[state--state-opening]):not([animation=open], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(state-closing),[state--state-closing]):not([animation=close], [animation=all])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])) {\n --sbb-disable-animation-duration: 0s;\n}\n\n:host(:where(:is(:state(slotted-title),[state--slotted-title]), :is(:state(slotted-title),[state--slotted-title])[size=m])) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-5);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-heading);\n}\n\n:host(:is(:state(slotted-title),[state--slotted-title])[size=s]) {\n --_sbb-notification-icon-authoritative-font-size: var(--sbb-heading-font-size-6);\n --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([size=s]) {\n --sbb-notification-font-size: var(--sbb-text-font-size-xs);\n --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);\n --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)\n var(--sbb-spacing-responsive-xxs);\n --sbb-notification-close-button-size: var(--sbb-button-min-height-size-s);\n}\n\n:host([size=m]) {\n --sbb-notification-font-size: var(--sbb-text-font-size-s);\n --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);\n --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);\n --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)\n var(--sbb-spacing-responsive-xs);\n --sbb-notification-close-button-size: var(--sbb-button-min-height-size-m);\n}\n\n:host(:is(:not([type]), [type=info])) {\n --sbb-notification-type-color: var(--sbb-color-smoke);\n --sbb-notification-icon-color: var(--sbb-notification-color);\n --sbb-notification-divider-opacity-light: 20%;\n --sbb-notification-divider-opacity-dark: 20%;\n}\n\n:host([type=note]) {\n --sbb-notification-type-color: var(--sbb-color-sky);\n --sbb-notification-divider-opacity-light: 20%;\n --sbb-notification-divider-opacity-dark: 20%;\n}\n\n:host([type=success]) {\n --sbb-notification-type-color: var(--sbb-color-success);\n --sbb-notification-divider-opacity-light: 15%;\n --sbb-notification-divider-opacity-dark: 30%;\n}\n\n:host([type=warn]) {\n --sbb-notification-type-color: var(--sbb-color-warning);\n --sbb-notification-icon-color: var(--sbb-notification-color);\n --sbb-notification-divider-opacity-light: 25%;\n --sbb-notification-divider-opacity-dark: 40%;\n}\n\n:host([type=error]) {\n --sbb-notification-type-color: var(--sbb-color-error);\n --sbb-notification-divider-opacity-light: 10%;\n --sbb-notification-divider-opacity-dark: 25%;\n}\n\n.sbb-notification__wrapper {\n position: relative;\n inset-inline-start: var(--_sbb-notification-inset-inline-start);\n width: calc(100% - var(--_sbb-notification-inset-inline-start));\n border: var(--sbb-notification-border);\n border-radius: var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);\n opacity: 0;\n max-height: 0;\n margin: 0;\n}\n.sbb-notification__wrapper::before {\n content: \"\";\n position: absolute;\n inset: calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);\n background-color: var(--sbb-notification-type-color);\n border: var(--sbb-notification-border);\n border-radius: var(--sbb-notification-base-border-radius);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))) .sbb-notification__wrapper {\n opacity: 1;\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n margin: var(--sbb-notification-margin, 0);\n}\n:host(:is(:state(state-opening),[state--state-opening])) .sbb-notification__wrapper {\n animation-name: open;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-notification-animation-duration);\n animation-timing-function: var(--sbb-notification-timing-function);\n}\n:host(:is(:state(state-closing),[state--state-closing])) .sbb-notification__wrapper {\n animation-name: close, close-height;\n animation-fill-mode: forwards;\n animation-duration: var(--sbb-notification-animation-duration);\n animation-timing-function: var(--sbb-notification-timing-function);\n animation-delay: 0s, var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n}\n\n.sbb-notification {\n position: relative;\n display: grid;\n grid-template-columns: auto 1fr auto auto;\n align-items: center;\n padding-block: var(--sbb-notification-padding-block);\n padding-inline: var(--sbb-notification-padding-inline);\n color: var(--sbb-notification-color);\n border-radius: var(--sbb-notification-border-radius-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);\n overflow: hidden;\n background-color: var(--sbb-notification-background-color);\n}\n\n.sbb-notification__icon,\n::slotted(sbb-icon) {\n color: var(--sbb-notification-icon-color);\n align-self: flex-start;\n height: calc(1em * var(--_sbb-notification-icon-authoritative-line-height));\n --sbb-icon-svg-width: var(--sbb-notification-icon-size);\n margin-block-start: calc((var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n.sbb-notification__content {\n color-scheme: only light;\n align-self: flex-start;\n align-content: center;\n padding-inline: var(--sbb-notification-content-padding-inline);\n}\n\n.sbb-notification__text {\n display: inline;\n margin: 0;\n padding: 0;\n}\n\n.sbb-notification__divider {\n --sbb-divider-color: color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light),\n var(--sbb-notification-background-color)\n );\n --sbb-divider-color: light-dark(\n color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light),\n var(--sbb-notification-background-color)\n ),\n color-mix(\n in srgb,\n var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark),\n var(--sbb-notification-background-color)\n )\n );\n display: block;\n inset-inline-start: var(--sbb-border-width-1x);\n margin-inline-end: calc(var(--sbb-notification-close-wrapper-gap) + var(--sbb-notification-close-button-size) - var(--sbb-divider-border-width));\n height: calc(100% - var(--sbb-spacing-fixed-1x) * 2);\n}\n\n.sbb-notification__close {\n position: absolute;\n inset-inline-end: var(--sbb-notification-padding-inline);\n}\n\n@keyframes open {\n from {\n opacity: 0;\n max-height: 0;\n margin: 0;\n }\n to {\n opacity: 1;\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n margin: var(--sbb-notification-margin, 0);\n }\n}\n@keyframes close {\n from {\n opacity: 1;\n margin: var(--sbb-notification-margin, 0);\n }\n to {\n opacity: 0;\n margin: 0;\n }\n}\n@keyframes close-height {\n from {\n max-height: calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);\n }\n to {\n max-height: 0;\n }\n}\n::slotted(sbb-title) {\n margin: 0;\n font-size: var(--_sbb-notification-icon-authoritative-font-size);\n line-height: var(--_sbb-notification-icon-authoritative-line-height);\n}\n";
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
//#region src/elements/notification/notification.component.ts
|
package/lean-off-brand-theme.css
CHANGED
|
@@ -1532,15 +1532,15 @@ summary {
|
|
|
1532
1532
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1533
1533
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1534
1534
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1535
|
-
--sbb-notification-icon-align-self: center;
|
|
1536
1535
|
--sbb-notification-margin: 0;
|
|
1537
1536
|
--sbb-notification-timing-function: ease-in;
|
|
1538
1537
|
--sbb-notification-font-size: var(--sbb-text-font-size-xs);
|
|
1539
1538
|
--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
1540
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
|
|
1539
|
+
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
1541
1540
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1542
1541
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);
|
|
1543
1542
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1543
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-s);
|
|
1544
1544
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1545
1545
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1546
1546
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2057,8 +2057,6 @@ summary {
|
|
|
2057
2057
|
);
|
|
2058
2058
|
--_sbb-dialog-max-width: 90vw;
|
|
2059
2059
|
--sbb-footer-clock-width: 7rem;
|
|
2060
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2061
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
2062
2060
|
}
|
|
2063
2061
|
}
|
|
2064
2062
|
@media (min-width: calc(64rem)) {
|
package/lean-safety-theme.css
CHANGED
|
@@ -1552,15 +1552,15 @@ summary {
|
|
|
1552
1552
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1553
1553
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1554
1554
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1555
|
-
--sbb-notification-icon-align-self: center;
|
|
1556
1555
|
--sbb-notification-margin: 0;
|
|
1557
1556
|
--sbb-notification-timing-function: ease-in;
|
|
1558
1557
|
--sbb-notification-font-size: var(--sbb-text-font-size-xs);
|
|
1559
1558
|
--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
1560
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
|
|
1559
|
+
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
1561
1560
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1562
1561
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);
|
|
1563
1562
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1563
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-s);
|
|
1564
1564
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1565
1565
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1566
1566
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2077,8 +2077,6 @@ summary {
|
|
|
2077
2077
|
);
|
|
2078
2078
|
--_sbb-dialog-max-width: 90vw;
|
|
2079
2079
|
--sbb-footer-clock-width: 7rem;
|
|
2080
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2081
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
2082
2080
|
}
|
|
2083
2081
|
}
|
|
2084
2082
|
@media (min-width: calc(64rem)) {
|
package/lean-theme.css
CHANGED
|
@@ -1552,15 +1552,15 @@ summary {
|
|
|
1552
1552
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1553
1553
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1554
1554
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1555
|
-
--sbb-notification-icon-align-self: center;
|
|
1556
1555
|
--sbb-notification-margin: 0;
|
|
1557
1556
|
--sbb-notification-timing-function: ease-in;
|
|
1558
1557
|
--sbb-notification-font-size: var(--sbb-text-font-size-xs);
|
|
1559
1558
|
--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
1560
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
|
|
1559
|
+
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
1561
1560
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1562
1561
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);
|
|
1563
1562
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1563
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-s);
|
|
1564
1564
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1565
1565
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1566
1566
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2077,8 +2077,6 @@ summary {
|
|
|
2077
2077
|
);
|
|
2078
2078
|
--_sbb-dialog-max-width: 90vw;
|
|
2079
2079
|
--sbb-footer-clock-width: 7rem;
|
|
2080
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2081
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
|
|
2082
2080
|
}
|
|
2083
2081
|
}
|
|
2084
2082
|
@media (min-width: calc(64rem)) {
|
|
@@ -6,7 +6,6 @@ $theme: 'standard' !default;
|
|
|
6
6
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
7
7
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
8
8
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
9
|
-
--sbb-notification-icon-align-self: center;
|
|
10
9
|
--sbb-notification-margin: 0;
|
|
11
10
|
--sbb-notification-timing-function: ease-in;
|
|
12
11
|
--sbb-notification-font-size: #{sbb.theme-pattern-select(
|
|
@@ -26,7 +25,7 @@ $theme: 'standard' !default;
|
|
|
26
25
|
--sbb-notification-padding-inline: #{sbb.theme-pattern-select(
|
|
27
26
|
(
|
|
28
27
|
'standard': var(--sbb-spacing-responsive-xs),
|
|
29
|
-
'lean': var(--sbb-spacing-responsive-xxs)
|
|
28
|
+
'lean': var(--sbb-spacing-responsive-xxs),
|
|
30
29
|
),
|
|
31
30
|
$theme
|
|
32
31
|
)};
|
|
@@ -39,14 +38,10 @@ $theme: 'standard' !default;
|
|
|
39
38
|
$theme
|
|
40
39
|
)};
|
|
41
40
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
@mixin breakpoint-small {
|
|
45
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
46
|
-
--sbb-notification-padding-inline: #{sbb.theme-pattern-select(
|
|
41
|
+
--sbb-notification-close-button-size: #{sbb.theme-pattern-select(
|
|
47
42
|
(
|
|
48
|
-
'standard': var(--sbb-
|
|
49
|
-
'lean': var(--sbb-
|
|
43
|
+
'standard': var(--sbb-button-min-height-size-m),
|
|
44
|
+
'lean': var(--sbb-button-min-height-size-s),
|
|
50
45
|
),
|
|
51
46
|
$theme
|
|
52
47
|
)};
|
package/notification.pure.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{SbbSecondaryButtonElement as s}from"./button.pure.js";import{SbbElement as c,SbbLanguageController as l,SbbReadonlyMixin as u,i18nCloseNotification as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";import{SbbIconNameMixin as m}from"./icon.pure.js";var h=`:host{--sbb-notification-border:var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-background-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),color-mix(in srgb, var(--sbb-notification-type-color) 35%, white));--sbb-notification-icon-color:var(--sbb-notification-type-color);--sbb-notification-border-radius-start:calc(var(--sbb-notification-base-border-radius) / 2);--sbb-notification-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-notification-icon-authoritative-font-size:1em;--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text);--_sbb-notification-inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);font-size:var(--sbb-notification-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])),:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}:host(:where(:is(:state(slotted-title),[state--slotted-title]),:is(:state(slotted-title),[state--slotted-title])[size=m])){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-5);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-heading)}:host(:is(:state(slotted-title),[state--slotted-title])[size=s]){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-6);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-notification-font-size:var(--sbb-text-font-size-xs);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs)
|
|
1
|
+
import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeController as n}from"@lit-labs/observers/resize-controller.js";import{html as r,nothing as i,unsafeCSS as a}from"lit";import{property as o}from"lit/decorators.js";import{SbbSecondaryButtonElement as s}from"./button.pure.js";import{SbbElement as c,SbbLanguageController as l,SbbReadonlyMixin as u,i18nCloseNotification as d,isZeroAnimationDuration as f}from"./core.js";import{SbbDividerElement as p}from"./divider.pure.js";import{SbbIconNameMixin as m}from"./icon.pure.js";var h=`:host{--sbb-notification-border:var(--sbb-notification-border-width) solid var(--sbb-notification-type-color);--sbb-notification-background-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) 5%, white),color-mix(in srgb, var(--sbb-notification-type-color) 35%, white));--sbb-notification-icon-color:var(--sbb-notification-type-color);--sbb-notification-border-radius-start:calc(var(--sbb-notification-base-border-radius) / 2);--sbb-notification-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-notification-icon-authoritative-font-size:1em;--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text);--_sbb-notification-inset-inline-start:calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width));--sbb-focus-outline-color:var(--sbb-focus-outline-color-default);font-size:var(--sbb-notification-font-size);letter-spacing:var(--sbb-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:block}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])),:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])),:host(:is(:state(resize-disable-animation),[state--resize-disable-animation])){--sbb-disable-animation-duration:0s}:host(:where(:is(:state(slotted-title),[state--slotted-title]),:is(:state(slotted-title),[state--slotted-title])[size=m])){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-5);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-heading)}:host(:is(:state(slotted-title),[state--slotted-title])[size=s]){--_sbb-notification-icon-authoritative-font-size:var(--sbb-heading-font-size-6);--_sbb-notification-icon-authoritative-line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-notification-font-size:var(--sbb-text-font-size-xs);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xxs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs);--sbb-notification-close-button-size:var(--sbb-button-min-height-size-s)}:host([size=m]){--sbb-notification-font-size:var(--sbb-text-font-size-s);--sbb-notification-padding-block:var(--sbb-spacing-responsive-xxs);--sbb-notification-padding-inline:var(--sbb-spacing-responsive-xs);--sbb-notification-content-padding-inline:var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);--sbb-notification-close-button-size:var(--sbb-button-min-height-size-m)}:host(:is(:not([type]),[type=info])){--sbb-notification-type-color:var(--sbb-color-smoke);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=note]){--sbb-notification-type-color:var(--sbb-color-sky);--sbb-notification-divider-opacity-light:20%;--sbb-notification-divider-opacity-dark:20%}:host([type=success]){--sbb-notification-type-color:var(--sbb-color-success);--sbb-notification-divider-opacity-light:15%;--sbb-notification-divider-opacity-dark:30%}:host([type=warn]){--sbb-notification-type-color:var(--sbb-color-warning);--sbb-notification-icon-color:var(--sbb-notification-color);--sbb-notification-divider-opacity-light:25%;--sbb-notification-divider-opacity-dark:40%}:host([type=error]){--sbb-notification-type-color:var(--sbb-color-error);--sbb-notification-divider-opacity-light:10%;--sbb-notification-divider-opacity-dark:25%}.sbb-notification__wrapper{width:calc(100% - var(--_sbb-notification-inset-inline-start));border:var(--sbb-notification-border);border-radius:var(--sbb-notification-border-radius-start) var(--sbb-notification-base-border-radius) var(--sbb-notification-base-border-radius) var(--sbb-notification-border-radius-start);opacity:0;max-height:0;margin:0;position:relative;inset-inline-start:var(--_sbb-notification-inset-inline-start)}.sbb-notification__wrapper:before{content:"";inset:calc(var(--sbb-notification-border-width) * -1) var(--sbb-notification-base-border-radius) calc(var(--sbb-notification-border-width) * -1) calc(var(--sbb-notification-base-border-radius) * -1);background-color:var(--sbb-notification-type-color);border:var(--sbb-notification-border);border-radius:var(--sbb-notification-base-border-radius);position:absolute}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))) .sbb-notification__wrapper{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}:host(:is(:state(state-opening),[state--state-opening])) .sbb-notification__wrapper{animation-name:open;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function)}:host(:is(:state(state-closing),[state--state-closing])) .sbb-notification__wrapper{animation-name:close,close-height;animation-fill-mode:forwards;animation-duration:var(--sbb-notification-animation-duration);animation-timing-function:var(--sbb-notification-timing-function);animation-delay:0s, var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x))}.sbb-notification{padding-block:var(--sbb-notification-padding-block);padding-inline:var(--sbb-notification-padding-inline);color:var(--sbb-notification-color);border-radius:var(--sbb-notification-border-radius-start) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) calc(var(--sbb-notification-base-border-radius) - var(--sbb-notification-border-width)) var(--sbb-notification-border-radius-start);background-color:var(--sbb-notification-background-color);grid-template-columns:auto 1fr auto auto;align-items:center;display:grid;position:relative;overflow:hidden}.sbb-notification__icon,::slotted(sbb-icon){color:var(--sbb-notification-icon-color);height:calc(1em * var(--_sbb-notification-icon-authoritative-line-height));--sbb-icon-svg-width:var(--sbb-notification-icon-size);align-self:flex-start;margin-block-start:calc((var(--_sbb-notification-icon-authoritative-font-size) * var(--_sbb-notification-icon-authoritative-line-height) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-notification__content{color-scheme:light only;padding-inline:var(--sbb-notification-content-padding-inline);align-content:center;align-self:flex-start}.sbb-notification__text{margin:0;padding:0;display:inline}.sbb-notification__divider{--sbb-divider-color:light-dark(color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-light), var(--sbb-notification-background-color)),color-mix(in srgb, var(--sbb-notification-type-color) var(--sbb-notification-divider-opacity-dark), var(--sbb-notification-background-color)));height:calc(100% - var(--sbb-spacing-fixed-1x) * 2);margin-inline-end:calc(var(--sbb-notification-close-wrapper-gap) + var(--sbb-notification-close-button-size) - var(--sbb-divider-border-width));display:block;inset-inline-start:var(--sbb-border-width-1x)}.sbb-notification__close{position:absolute;inset-inline-end:var(--sbb-notification-padding-inline)}@keyframes open{0%{opacity:0;max-height:0;margin:0}to{opacity:1;max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2);margin:var(--sbb-notification-margin,0)}}@keyframes close{0%{opacity:1;margin:var(--sbb-notification-margin,0)}to{opacity:0;margin:0}}@keyframes close-height{0%{max-height:calc(var(--sbb-notification-height) + var(--sbb-notification-border-width) * 2)}to{max-height:0}}::slotted(sbb-title){font-size:var(--_sbb-notification-icon-authoritative-font-size);line-height:var(--_sbb-notification-icon-authoritative-line-height);margin:0}
|
|
2
2
|
`;const g=new Map([[`info`,`circle-information-small`],[`note`,`circle-information-small`],[`success`,`circle-tick-small`],[`warn`,`circle-exclamation-point-small`],[`error`,`circle-cross-small`]]);let _=(()=>{let _=m(u(c)),v,y=[],b=[],x,S=[],C=[],w,T=[],E=[];return class extends _{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(_[Symbol.metadata]??null):void 0;v=[o({reflect:!0})],x=[o({reflect:!0})],w=[o({reflect:!0})],e(this,null,v,{kind:`accessor`,name:`type`,static:!1,private:!1,access:{has:e=>`type`in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},y,b),e(this,null,x,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},S,C),e(this,null,w,{kind:`accessor`,name:`animation`,static:!1,private:!1,access:{has:e=>`animation`in e,get:e=>e.animation,set:(e,t)=>{e.animation=t}},metadata:t},T,E),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-notification`}static{this.elementDependencies=[s,p]}static{this.styles=[a(h)]}static{this.events={beforeopen:`beforeopen`,open:`open`,beforeclose:`beforeclose`,close:`close`}}#e;get type(){return this.#e}set type(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}#n;get animation(){return this.#n}set animation(e){this.#n=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=t(this,y,`info`),this.#t=(t(this,b),t(this,S,null)),this.#n=(t(this,C),t(this,T,`all`)),this._stateInternal=t(this,E),this._resizeObserverTimeout=null,this._language=new l(this),this._notificationResizeObserver=new n(this,{target:null,skipInitial:!0,callback:()=>this._onNotificationResize()}),this._state=`closed`}_open(){this._state===`closed`&&(this._state=`opening`,this.dispatchEvent(new Event(`beforeopen`)),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._state===`opened`&&this._dispatchBeforeCloseEvent()&&(this._state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_dispatchBeforeCloseEvent(){return this.dispatchEvent(new Event(`beforeclose`,{cancelable:!0}))}firstUpdated(e){super.firstUpdated(e),this._notificationElement=this.shadowRoot?.querySelector(`.sbb-notification__wrapper`),this.updateComplete.then(()=>{this._setNotificationHeight(),this._open()})}_isZeroAnimationDuration(){return f(this,`--sbb-notification-animation-duration`)}_setNotificationHeight(){if(!this._notificationElement?.scrollHeight)return;let e=`${this._notificationElement.scrollHeight}px`;this.style.setProperty(`--sbb-notification-height`,e)}_onNotificationResize(){this._state===`opened`&&(this._resizeObserverTimeout&&clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`resize-disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`resize-disable-animation`),150),setTimeout(()=>this._setNotificationHeight()))}_onNotificationAnimationEnd(e){this._state===`opening`&&e.animationName===`open`&&this._handleOpening(),this._state===`closing`&&e.animationName===`close-height`&&this._handleClosing()}_handleOpening(){this._state=`opened`,this._notificationResizeObserver.observe(this._notificationElement),this.dispatchEvent(new Event(`open`))}_handleClosing(){this._state=`closed`,this.dispatchEvent(new Event(`close`)),this._notificationResizeObserver.unobserve(this._notificationElement),setTimeout(()=>this.remove())}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-title`);e&&(e.slot=`title`)}renderIconName(){return super.renderIconName()||g.get(this.type)}render(){return r`
|
|
3
3
|
<div class="sbb-notification__wrapper" @animationend=${this._onNotificationAnimationEnd}>
|
|
4
4
|
<div class="sbb-notification">
|
package/off-brand-theme.css
CHANGED
|
@@ -1532,7 +1532,6 @@ summary {
|
|
|
1532
1532
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1533
1533
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1534
1534
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1535
|
-
--sbb-notification-icon-align-self: center;
|
|
1536
1535
|
--sbb-notification-margin: 0;
|
|
1537
1536
|
--sbb-notification-timing-function: ease-in;
|
|
1538
1537
|
--sbb-notification-font-size: var(--sbb-text-font-size-s);
|
|
@@ -1541,6 +1540,7 @@ summary {
|
|
|
1541
1540
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1542
1541
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
|
|
1543
1542
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1543
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-m);
|
|
1544
1544
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1545
1545
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1546
1546
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2057,8 +2057,6 @@ summary {
|
|
|
2057
2057
|
);
|
|
2058
2058
|
--_sbb-dialog-max-width: 90vw;
|
|
2059
2059
|
--sbb-footer-clock-width: 7rem;
|
|
2060
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2061
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
2062
2060
|
}
|
|
2063
2061
|
}
|
|
2064
2062
|
@media (min-width: calc(64rem)) {
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.9.0-dev.1789474051",
|
|
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/5173f618f9e08640749c052f9386d772a2c5e357"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1552,7 +1552,6 @@ summary {
|
|
|
1552
1552
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1553
1553
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1554
1554
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1555
|
-
--sbb-notification-icon-align-self: center;
|
|
1556
1555
|
--sbb-notification-margin: 0;
|
|
1557
1556
|
--sbb-notification-timing-function: ease-in;
|
|
1558
1557
|
--sbb-notification-font-size: var(--sbb-text-font-size-s);
|
|
@@ -1561,6 +1560,7 @@ summary {
|
|
|
1561
1560
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1562
1561
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
|
|
1563
1562
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1563
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-m);
|
|
1564
1564
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1565
1565
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1566
1566
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2077,8 +2077,6 @@ summary {
|
|
|
2077
2077
|
);
|
|
2078
2078
|
--_sbb-dialog-max-width: 90vw;
|
|
2079
2079
|
--sbb-footer-clock-width: 7rem;
|
|
2080
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2081
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
2082
2080
|
}
|
|
2083
2081
|
}
|
|
2084
2082
|
@media (min-width: calc(64rem)) {
|
package/standard-theme.css
CHANGED
|
@@ -1552,7 +1552,6 @@ summary {
|
|
|
1552
1552
|
--sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
|
|
1553
1553
|
--sbb-notification-border-width: var(--sbb-border-width-1x);
|
|
1554
1554
|
--sbb-notification-color: var(--sbb-color-2-negative-inverted);
|
|
1555
|
-
--sbb-notification-icon-align-self: center;
|
|
1556
1555
|
--sbb-notification-margin: 0;
|
|
1557
1556
|
--sbb-notification-timing-function: ease-in;
|
|
1558
1557
|
--sbb-notification-font-size: var(--sbb-text-font-size-s);
|
|
@@ -1561,6 +1560,7 @@ summary {
|
|
|
1561
1560
|
--sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
|
|
1562
1561
|
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
|
|
1563
1562
|
--sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
|
|
1563
|
+
--sbb-notification-close-button-size: var(--sbb-button-min-height-size-m);
|
|
1564
1564
|
--sbb-optgroup-label-color: var(--sbb-color-metal);
|
|
1565
1565
|
--sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1566
1566
|
--sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
|
|
@@ -2077,8 +2077,6 @@ summary {
|
|
|
2077
2077
|
);
|
|
2078
2078
|
--_sbb-dialog-max-width: 90vw;
|
|
2079
2079
|
--sbb-footer-clock-width: 7rem;
|
|
2080
|
-
--sbb-notification-icon-align-self: flex-start;
|
|
2081
|
-
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
|
|
2082
2080
|
}
|
|
2083
2081
|
}
|
|
2084
2082
|
@media (min-width: calc(64rem)) {
|