@sbb-esta/lyne-elements-dev 5.0.0-next-dev.1776959321 → 5.0.0-next-dev.1777014673

package/alert/alert/alert.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../alert.component-C42LwoGa.js";
+import { t as e } from "../../alert.component-BQsF0R1M.js";
 export { e as SbbAlertElement };

package/alert/alert-group/alert-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../alert-group.component-CAjj3FtE.js";
+import { t as e } from "../../alert-group.component-BCYOVicl.js";
 export { e as SbbAlertGroupElement };

package/{alert-group.component-CAjj3FtE.js → alert-group.component-BCYOVicl.js}

@@ -4,7 +4,7 @@ import { property as i, state as a } from "lit/decorators.js";
 import { SbbElement as o, boxSizingStyles as s, forceType as c, isEventPrevented as l } from "./core.js";
 import { html as u, unsafeStatic as d } from "lit/static-html.js";
 //#region src/elements/alert/alert-group/alert-group.scss?inline
-var f = ":host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-group-border-radius: var(--sbb-border-radius-4x);display:block}.sbb-alert-group{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not(:is(:state(empty),[state--empty]))){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", p = (() => {
+var f = ":host{display:flex;flex-direction:column;gap:var(--sbb-alert-group-gap)}:host(:focus-visible:not(:is(:state(empty),[state--empty]))){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-alert-group-border-radius)}.sbb-alert-group__title{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", p = (() => {
 	let p = o, m, h = [], g = [], _, v = [], y = [], b, x = [], S = [], C, w = [], T = [];
 	return class extends p {
 		static {
@@ -124,12 +124,10 @@ var f = ":host{--sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);--sbb-alert-gr
 		render() {
 			let e = `h${this.accessibilityTitleLevel}`;
 			return u`
-      <div class="sbb-alert-group">
-        ${this._hasAlerts ? u`<${d(e)} class="sbb-alert-group__title">
-              <slot name="accessibility-title">${this.accessibilityTitle}</slot>
-            </${d(e)}>` : n}
-        <slot @slotchange=${(e) => this._slotChanged(e)}></slot>
-      </div>
+      ${this._hasAlerts ? u`<${d(e)} class="sbb-alert-group__title">
+            <slot name="accessibility-title">${this.accessibilityTitle}</slot>
+          </${d(e)}>` : n}
+      <slot @slotchange=${(e) => this._slotChanged(e)}></slot>
     `;
 		}
 	};

package/alert.component-BQsF0R1M.js

@@ -0,0 +1,161 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbDarkModeController as o, SbbLanguageController as s, SbbOpenCloseBaseElement as c, SbbReadonlyMixin as l, boxSizingStyles as u, i18nCloseAlert as d, isLean as f, isZeroAnimationDuration as p } from "./core.js";
+import { SbbTransparentButtonElement as m } from "./button.pure.js";
+import { SbbDividerElement as h } from "./divider.pure.js";
+import { SbbIconNameMixin as g } from "./icon.pure.js";
+//#region src/elements/alert/alert/alert.scss?inline
+var _ = ":host{--sbb-alert-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );display:grid;grid-template-rows:0fr;opacity:0;border-radius:var(--sbb-alert-forced-color-border-radius);outline:var(--sbb-alert-outline)}:host(:is(:state(state-opening),[state--state-opening]):not([animation=open],[animation=all])){--sbb-disable-animation-duration: 0s}:host(:is(:state(state-closing),[state--state-closing]):not([animation=close],[animation=all])){--sbb-disable-animation-duration: 0s}:host([size=s]){--sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);--sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs)}:host([size=l]){--sbb-alert-icon-size: var(--sbb-alert-icon-size-l);--sbb-alert-title-margin-block: 0 var(--sbb-spacing-fixed-1x)}:host(:not(:is(:state(dark),[state--dark]))){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){grid-template-rows:1fr;opacity:1}:host(:is(:state(state-opening),[state--state-opening])){animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-alert-animation-duration)}:host(:is(:state(state-closing),[state--state-closing])){animation-name:close-opacity,close;animation-fill-mode:forwards;animation-duration:var(--sbb-alert-animation-duration);animation-timing-function:var(--sbb-alert-timing-function);animation-delay:0s,var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x))}.sbb-alert__transition-wrapper{overflow:hidden}.sbb-alert{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sbb-alert-gap);min-width:fit-content;padding:var(--sbb-alert-padding);overflow:hidden;color:var(--sbb-alert-color);background-color:var(--sbb-alert-background-color);border-radius:var(--sbb-alert-border-radius);font-size:var(--sbb-alert-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}@media(min-width:37.5rem){.sbb-alert{grid-template-columns:auto 1fr auto;align-items:flex-start}}.sbb-alert__icon{display:flex;align-items:start;padding-block:var(--sbb-spacing-fixed-1x);min-width:var(--sbb-alert-icon-size);--sbb-icon-svg-width: var(--sbb-alert-icon-size);--sbb-icon-svg-height: var(--sbb-alert-icon-size)}.sbb-alert__content{color-scheme:only light;order:3;grid-column:1/3}@media(min-width:37.5rem){.sbb-alert__content{order:initial;grid-column-start:initial;grid-column-end:initial}}.sbb-alert__content-slot{display:inline;margin:0;padding:0}.sbb-alert__close-button-wrapper{color-scheme:only light;display:flex;justify-content:flex-end;align-items:center;height:100%}@media(min-width:37.5rem){.sbb-alert__close-button{margin-inline-start:var(--sbb-alert-close-icon-margin)}}.sbb-alert__close-button-divider{display:var(--sbb-alert-close-button-divider-display, none);height:calc(100% - var(--sbb-spacing-fixed-1x) * 2)}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr}to{grid-template-rows:0fr}}@keyframes close-opacity{0%{opacity:1}to{opacity:0}}::slotted(sbb-title){margin-block:var(--sbb-alert-title-margin-block)}", v = (() => {
+	let v = g(l(c)), y, b = [], x = [], S, C = [], w = [];
+	return class extends v {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+			y = [a({ reflect: !0 })], S = [a({ reflect: !0 })], e(this, null, y, {
+				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
+			}, b, x), e(this, null, S, {
+				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
+			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-alert";
+		}
+		static {
+			this.elementDependencies = [m, h];
+		}
+		static {
+			this.styles = [u, i(_)];
+		}
+		static {
+			this.events = {
+				beforeopen: "beforeopen",
+				open: "open",
+				beforeclose: "beforeclose",
+				close: "close"
+			};
+		}
+		#e;
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		#t;
+		get animation() {
+			return this.#t;
+		}
+		set animation(e) {
+			this.#t = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, b, f() ? "s" : "m"), this.#t = (t(this, x), t(this, C, "all")), this._language = (t(this, w), new s(this)), this._darkModeController = new o(this, () => {
+				this._syncLinks(), this._configureTitle(), this.requestUpdate();
+			}), this.addEventListener("animationend", (e) => this._onAnimationEnd(e));
+		}
+		open() {
+			this.state = "opening", this.dispatchBeforeOpenEvent() && this._isZeroAnimationDuration() && this._handleOpening();
+		}
+		close() {
+			this.state === "opened" && this.dispatchBeforeCloseEvent() && (this.state = "closing", this._isZeroAnimationDuration() && this._handleClosing());
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this.open();
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("size") && this._configureTitle();
+		}
+		_isZeroAnimationDuration() {
+			return p(this, "--sbb-alert-animation-duration");
+		}
+		_onAnimationEnd(e) {
+			this.state === "opening" && e.animationName === "open-opacity" ? this._handleOpening() : this.state === "closing" && e.animationName === "close" && this._handleClosing();
+		}
+		_handleOpening() {
+			this.state = "opened", this.dispatchOpenEvent();
+		}
+		_handleClosing() {
+			this.state = "closed", this.dispatchCloseEvent(), setTimeout(() => this.remove());
+		}
+		_handleSlotchange() {
+			this._syncLinks();
+			let e = Array.from(this.children).find((e) => e.localName === "sbb-title");
+			e && (e.slot = "title");
+		}
+		_syncLinks() {
+			Array.from(this.querySelectorAll?.("sbb-link") ?? []).forEach((e) => {
+				customElements.upgrade(e), e.negative = this._isLightMode();
+			});
+		}
+		_configureTitle() {
+			let e = this.querySelector?.("sbb-title");
+			e && (customElements.upgrade(e), e.negative = this._isLightMode(), e.visualLevel = this.size === "l" ? "3" : "5");
+		}
+		_isLightMode() {
+			return !this._darkModeController.matches();
+		}
+		renderIconName() {
+			return super.renderIconName() || "info";
+		}
+		render() {
+			return n`
+      <!-- wrapper needed to properly support fade in animation -->
+      <div class="sbb-alert__transition-wrapper">
+        <div class="sbb-alert">
+          <span class="sbb-alert__icon"> ${this.renderIconSlot()} </span>
+          <span class="sbb-alert__content">
+            <slot name="title" @slotchange=${this._configureTitle}></slot>
+            <p class="sbb-alert__content-slot">
+              <slot @slotchange=${this._handleSlotchange}></slot>
+            </p>
+          </span>
+          ${this.readOnly ? r : n`<span class="sbb-alert__close-button-wrapper">
+                <sbb-divider
+                  orientation="vertical"
+                  ?negative=${this._isLightMode()}
+                  class="sbb-alert__close-button-divider"
+                ></sbb-divider>
+                <sbb-transparent-button
+                  ?negative=${this._isLightMode()}
+                  size=${this.size === "l" ? "m" : this.size}
+                  icon-name="cross-small"
+                  @click=${() => this.close()}
+                  aria-label=${d[this._language.current]}
+                  class="sbb-alert__close-button"
+                ></sbb-transparent-button>
+              </span>`}
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { v as t };

package/alert.js

@@ -1,5 +1,5 @@
-import { t as e } from "./alert-group.component-CAjj3FtE.js";
-import { t } from "./alert.component-C42LwoGa.js";
+import { t as e } from "./alert-group.component-BCYOVicl.js";
+import { t } from "./alert.component-BQsF0R1M.js";
 import "./alert.pure.js";
 t.define(), e.define();
 //#endregion

package/alert.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./alert-group.component-CAjj3FtE.js";
-import { t } from "./alert.component-C42LwoGa.js";
+import { t as e } from "./alert-group.component-BCYOVicl.js";
+import { t } from "./alert.component-BQsF0R1M.js";
 export { t as SbbAlertElement, e as SbbAlertGroupElement };

package/core/styles/core.scss

@@ -39,6 +39,12 @@ $theme: 'standard' !default;
 @use '../../card/card/card.global' as card with (
   $theme: $theme
 );
+@use '../../alert/alert/alert.global' as alert with (
+  $theme: $theme
+);
+@use '../../alert/alert-group/alert-group.global' as alert-group with (
+  $theme: $theme
+);
 @use '../../chip-label/chip-label.global' as chip-label with (
   $theme: $theme
 );
@@ -291,6 +297,8 @@ $theme: 'standard' !default;
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.base;
 
+  @include alert.base;
+  @include alert-group.base;
   @include breadcrumb.base;
   @include breadcrumb-group.base;
   @include button.base;
@@ -377,6 +385,7 @@ $theme: 'standard' !default;
   @include a11y.if-forced-colors {
     @include sbb-css-tokens.forced-colors;
 
+    @include alert.base-forced-colors;
     @include breadcrumb.base-forced-colors;
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
@@ -446,6 +455,7 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: small) {
     @include sbb-css-tokens.breakpoint-small;
 
+    @include alert.base-breakpoint-small;
     @include dialog.base-breakpoint-small;
     @include footer.base-breakpoint-small;
     @include notification.base-breakpoint-small;
@@ -454,6 +464,7 @@ $theme: 'standard' !default;
   @include mediaqueries.mq($from: large) {
     @include sbb-css-tokens.breakpoint-large;
 
+    @include alert.base-breakpoint-large;
     @include button.base-breakpoint-large;
     @include chip-group.base-breakpoint-large;
     @include dialog.base-breakpoint-large;

package/core.css

@@ -1163,6 +1163,20 @@ slot[name=error]::slotted(*) {
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
+  --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
+  --sbb-alert-border-radius: var(--sbb-border-radius-4x);
+  --sbb-alert-color: var(--sbb-color-aluminium);
+  --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
+  --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-timing-function: ease-in;
+  --sbb-alert-icon-size: 1.25rem;
+  --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
+  --sbb-alert-title-margin-block: 0;
+  --sbb-alert-font-size: var(--sbb-text-font-size-s);
+  --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
+  --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
   --sbb-breadcrumb-color: var(--sbb-color-granite);
   --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
@@ -1868,6 +1882,8 @@ slot[name=error]::slotted(*) {
     --sbb-focus-outline-color-default: Highlight;
     --sbb-focus-outline-color-dark: Highlight;
     --sbb-focus-outline-width: var(--sbb-border-width-2x);
+    --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
+    --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
     --sbb-breadcrumb-color: ButtonText;
     --sbb-breadcrumb-color-active: Highlight;
     --sbb-card-border-color: CanvasText;
@@ -1957,6 +1973,7 @@ slot[name=error]::slotted(*) {
     --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
     --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
+    --sbb-alert-close-button-divider-display: block;
     --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-12x);
     --sbb-footer-clock-width: 7rem;
     --sbb-notification-icon-align-self: flex-start;
@@ -1998,6 +2015,8 @@ slot[name=error]::slotted(*) {
     --sbb-size-element-s: var(--sbb-size-element-s-large);
     --sbb-size-element-m: var(--sbb-size-element-m-large);
     --sbb-size-element-l: var(--sbb-size-element-l-large);
+    --sbb-alert-icon-size: 1.75rem;
+    --sbb-alert-icon-size-l: 2.125rem;
     --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
     --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
     --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);