@sbb-esta/lyne-elements 5.0.0-next.3 → 5.0.0

package/breadcrumb.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./breadcrumb-group.component-XPdnV6-a.js";
-import { t } from "./breadcrumb.component-Kk1U6Iju.js";
+import { t as e } from "./breadcrumb-group.component-FLbOLqwi.js";
+import { t } from "./breadcrumb.component-CC8MxtJj.js";
 export { t as SbbBreadcrumbElement, e as SbbBreadcrumbGroupElement };

package/button/_button.global.scss

@@ -0,0 +1,99 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-button-box-shadow: transparent 0 0;
+  --sbb-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-button-border-width: var(--sbb-border-width-2x);
+  --sbb-button-border-disabled-style: dashed;
+  --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-aluminium)
+  );
+  --sbb-button-gap: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-2x),
+        'lean': var(--sbb-spacing-fixed-1x),
+      ),
+      $theme
+    )};
+  --sbb-button-loading-border-width: var(--sbb-border-width-3x);
+  --sbb-button-loading-delay: 300ms;
+  --sbb-button-min-height-size-l: var(--sbb-size-element-m);
+  --sbb-button-min-height-size-m: var(--sbb-size-element-s);
+  --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
+  --sbb-button-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-button-min-height-size-m),
+        'lean': var(--sbb-button-min-height-size-s),
+      ),
+      $theme
+    )};
+  --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
+  --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
+  --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
+  --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
+  --sbb-button-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-button-padding-inline-size-m),
+        'lean': var(--sbb-button-padding-inline-size-s),
+      ),
+      $theme
+    )};
+  --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
+  --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
+  --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
+  --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
+  --sbb-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-color-text: var(--sbb-color-3);
+  --sbb-mini-button-color-default-background: transparent;
+  --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-mini-button-color-disabled-text: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-mini-button-group-background: var(--sbb-background-color-1);
+  --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
+  --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
+  --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
+  --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
+  --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
+  --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
+  --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
+  --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
+  --sbb-mini-button-group-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-min-height-m),
+        'lean': var(--sbb-mini-button-group-min-height-s),
+      ),
+      $theme
+    )};
+  --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
+  --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
+  --sbb-mini-button-group-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-mini-button-group-padding-inline-m),
+        'lean': var(--sbb-mini-button-group-padding-inline-s),
+      ),
+      $theme
+    )};
+}
+
+@mixin breakpoint-large {
+  --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);
+}

package/button/common/button-common.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../../button-common-BQdNXKwl.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../../button-common-Br6zOEgv.js";
 export { o as SbbButtonCommonElementMixin, n as buttonAccentStyle, i as buttonPrimaryStyle, t as buttonSecondaryStyle, e as buttonTransparentStyle, r as miniButtonLabelStyle, a as miniButtonStyle };

package/button/mini-button-group/mini-button-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../mini-button-group.component-DQBU0BDm.js";
+import { t as e } from "../../mini-button-group.component-C-pJ_J-1.js";
 export { e as SbbMiniButtonGroupElement };

package/button/mini-button-link/mini-button-link.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../mini-button-link.component-B8HmvVCg.js";
+import { t as e } from "../../mini-button-link.component-MBesHG--.js";
 export { e as SbbMiniButtonLinkElement };

package/button.js

@@ -3,8 +3,8 @@ import { SbbSecondaryButtonElement as t } from "./button/secondary-button/second
 import { SbbAccentButtonElement as n } from "./button/accent-button/accent-button.component.js";
 import { SbbTransparentButtonElement as r } from "./button/transparent-button/transparent-button.component.js";
 import { SbbMiniButtonElement as i } from "./button/mini-button/mini-button.component.js";
-import { t as a } from "./mini-button-link.component-B8HmvVCg.js";
-import { t as o } from "./mini-button-group.component-DQBU0BDm.js";
+import { t as a } from "./mini-button-link.component-MBesHG--.js";
+import { t as o } from "./mini-button-group.component-C-pJ_J-1.js";
 import { SbbButtonLinkElement as s } from "./button/button-link/button-link.component.js";
 import { SbbSecondaryButtonLinkElement as c } from "./button/secondary-button-link/secondary-button-link.component.js";
 import { SbbAccentButtonLinkElement as l } from "./button/accent-button-link/accent-button-link.component.js";
@@ -13,7 +13,7 @@ import { SbbButtonStaticElement as d } from "./button/button-static/button-stati
 import { SbbSecondaryButtonStaticElement as f } from "./button/secondary-button-static/secondary-button-static.component.js";
 import { SbbAccentButtonStaticElement as p } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as m } from "./button/transparent-button-static/transparent-button-static.component.js";
-import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BQdNXKwl.js";
+import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-Br6zOEgv.js";
 import "./button.pure.js";
 n.define(), l.define(), p.define(), e.define(), s.define(), d.define(), i.define(), o.define(), a.define(), t.define(), c.define(), f.define(), r.define(), u.define(), m.define();
 //#endregion

package/button.pure.js

@@ -3,8 +3,8 @@ import { SbbSecondaryButtonElement as t } from "./button/secondary-button/second
 import { SbbAccentButtonElement as n } from "./button/accent-button/accent-button.component.js";
 import { SbbTransparentButtonElement as r } from "./button/transparent-button/transparent-button.component.js";
 import { SbbMiniButtonElement as i } from "./button/mini-button/mini-button.component.js";
-import { t as a } from "./mini-button-link.component-B8HmvVCg.js";
-import { t as o } from "./mini-button-group.component-DQBU0BDm.js";
+import { t as a } from "./mini-button-link.component-MBesHG--.js";
+import { t as o } from "./mini-button-group.component-C-pJ_J-1.js";
 import { SbbButtonLinkElement as s } from "./button/button-link/button-link.component.js";
 import { SbbSecondaryButtonLinkElement as c } from "./button/secondary-button-link/secondary-button-link.component.js";
 import { SbbAccentButtonLinkElement as l } from "./button/accent-button-link/accent-button-link.component.js";
@@ -13,5 +13,5 @@ import { SbbButtonStaticElement as d } from "./button/button-static/button-stati
 import { SbbSecondaryButtonStaticElement as f } from "./button/secondary-button-static/secondary-button-static.component.js";
 import { SbbAccentButtonStaticElement as p } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as m } from "./button/transparent-button-static/transparent-button-static.component.js";
-import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-BQdNXKwl.js";
+import { a as h, i as g, n as _, o as v, r as y, s as b, t as x } from "./button-common-Br6zOEgv.js";
 export { n as SbbAccentButtonElement, l as SbbAccentButtonLinkElement, p as SbbAccentButtonStaticElement, x as SbbButtonCommonElementMixin, e as SbbButtonElement, s as SbbButtonLinkElement, d as SbbButtonStaticElement, i as SbbMiniButtonElement, o as SbbMiniButtonGroupElement, a as SbbMiniButtonLinkElement, t as SbbSecondaryButtonElement, c as SbbSecondaryButtonLinkElement, f as SbbSecondaryButtonStaticElement, r as SbbTransparentButtonElement, u as SbbTransparentButtonLinkElement, m as SbbTransparentButtonStaticElement, _ as buttonAccentStyle, y as buttonPrimaryStyle, g as buttonSecondaryStyle, h as buttonTransparentStyle, v as miniButtonLabelStyle, b as miniButtonStyle };

package/calendar/_calendar.global.scss

@@ -0,0 +1,46 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);
+  --sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);
+  --sbb-calendar-cell-padding: #{sbb.px-to-rem-build(2)};
+  --sbb-calendar-cell-border-width: var(--sbb-border-width-2x);
+  --sbb-calendar-cell-border-color-selected: var(--sbb-border-color-2);
+  --sbb-calendar-cell-disabled-height: #{sbb.px-to-rem-build(1.5)};
+  --sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
+  --sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
+  --sbb-calendar-cell-color: var(--sbb-color-2);
+  --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
+  --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
+  --sbb-calendar-cell-margin: #{sbb.px-to-rem-build(1)};
+  --sbb-calendar-cell-size: #{sbb.px-to-rem-build(44)};
+
+  // Actual full height is 73, but with margin this comes down to 71
+  --sbb-calendar-cell-year-month-width: #{sbb.px-to-rem-build(71)};
+
+  // Actual full height is 40, but with margin this comes down to 38
+  --sbb-calendar-cell-year-month-height: #{sbb.px-to-rem-build(38)};
+  --sbb-calendar-control-gap: var(--sbb-spacing-fixed-1x);
+  --sbb-calendar-control-view-change-color: var(--sbb-color-3);
+  --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
+
+  // Actual full width is 44, but with margin this comes down to 42
+  --sbb-calendar-day-size: #{sbb.px-to-rem-build(42)};
+  --sbb-calendar-day-width: var(--sbb-calendar-day-size);
+
+  // Actual full height is 48, but with margin this comes down to 46
+  --sbb-calendar-day-height: #{sbb.px-to-rem-build(46)};
+  --sbb-calendar-day-justify-content: start;
+  --sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x);
+  --sbb-calendar-day-extra-display: block;
+  --sbb-calendar-day-extra-height: #{sbb.px-to-rem-build(18)};
+}
+
+@mixin forced-colors {
+  --sbb-calendar-cell-background-color-hover: transparent;
+  --sbb-calendar-cell-background-color-active: transparent;
+}

package/calendar/calendar/calendar.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../calendar.component-oS_T4s4k.js";
-export { t as SbbCalendarElement, e as SbbMonthChangeEvent };
+import { n as e, r as t, t as n } from "../../calendar.component-RVAHcJf6.js";
+export { n as SbbCalendarElement, e as SbbDateSelectedEvent, t as SbbMonthChangeEvent };

package/calendar/calendar-day/calendar-day.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../calendar-day.component-CcZymuSD.js";
+import { t as e } from "../../calendar-day.component-DrMWf6-w.js";
 export { e as SbbCalendarDayElement };

package/calendar/calendar-month/calendar-month.component.js

@@ -53,7 +53,7 @@ var a = (() => {
 			super.connectedCallback(), this.tabIndex = -1;
 		}
 		setSelectedState(e) {
-			let t = e.multiple ? e.selected?.some((e) => this._yearValue === this.dateAdapter.getYear(e) && this._monthValue === this.dateAdapter.getMonth(e)) ?? !1 : !!e.selected && this.dateAdapter.getYear(e.selected) === this._yearValue && this.dateAdapter.getMonth(e.selected) === this._monthValue;
+			let t = e.multiple ? e.value?.some((e) => this._yearValue === this.dateAdapter.getYear(e) && this._monthValue === this.dateAdapter.getMonth(e)) ?? !1 : !!e.value && this.dateAdapter.getYear(e.value) === this._yearValue && this.dateAdapter.getMonth(e.value) === this._monthValue;
 			this.toggleState("selected", t), this.internals.ariaPressed = String(t);
 		}
 		setDisabledFilteredState(e) {

package/calendar/calendar-year/calendar-year.component.js

@@ -49,7 +49,7 @@ var a = (() => {
 			super.connectedCallback(), this.tabIndex = -1;
 		}
 		setSelectedState(e) {
-			let t = e.multiple ? e.selected?.some((e) => Number(this.value) === this.dateAdapter.getYear(e)) ?? !1 : !!e.selected && this.dateAdapter.getYear(e.selected) === Number(this.value);
+			let t = e.multiple ? e.value?.some((e) => Number(this.value) === this.dateAdapter.getYear(e)) ?? !1 : !!e.value && this.dateAdapter.getYear(e.value) === Number(this.value);
 			this.toggleState("selected", t), this.internals.ariaPressed = String(t);
 		}
 		setDisabledFilteredState(e) {

package/calendar/common/calendar-cell-base-element.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../calendar-cell-base-element-CUG1qYFb.js";
+import { t as e } from "../../calendar-cell-base-element-DHCKK3bU.js";
 export { e as SbbCalendarCellBaseElement };

package/calendar-cell-base-element-DHCKK3bU.js

@@ -0,0 +1,23 @@
+import { unsafeCSS as e } from "lit";
+import { SbbButtonLikeBaseElement as t, SbbDisabledMixin as n, SbbPropertyWatcherController as r, defaultDateAdapter as i, readConfig as a } from "./core.js";
+//#region src/elements/calendar/common/calendar-cell-base-element.scss?inline
+var o = ":host{--sbb-focus-outline-offset: .125rem;--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block;font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);background-clip:content-box;transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size: var(--sbb-text-font-size-xs);--sbb-calendar-day-height: var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color)}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color: var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor: unset}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}@media(any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media(any-hover:hover)and (forced-colors:active){:host(:not(:disabled):hover){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style: initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{display:flex;flex-direction:column;justify-content:center;height:100%;width:100%}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);width:var(--sbb-calendar-cell-year-month-width)}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{position:absolute;top:50%;left:50%;translate:-50% -50%;content:\"\";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-color);rotate:-45deg}", s = class extends n(t) {
+	static {
+		this.styles = [e(o)];
+	}
+	constructor() {
+		super(), this.dateAdapter = a().datetime?.dateAdapter ?? i, this.addController(new r(this, () => this.getParent(), {
+			dateFilter: (e) => this.setDisabledFilteredState(e),
+			min: (e) => this.setDisabledFilteredState(e),
+			max: (e) => this.setDisabledFilteredState(e),
+			value: (e) => this.setSelectedState(e)
+		}));
+	}
+	getParent() {
+		return this.getRootNode?.()?.host?.closest("sbb-calendar");
+	}
+	formResetCallback() {}
+	formStateRestoreCallback(e, t) {}
+};
+//#endregion
+export { s as t };

package/{calendar-day.component-CcZymuSD.js → calendar-day.component-DrMWf6-w.js}

@@ -3,7 +3,7 @@ import { html as n, unsafeCSS as r } from "lit";
 import { property as i, state as a } from "lit/decorators.js";
 import { SbbCalendarCellBaseElement as o } from "./calendar/common/calendar-cell-base-element.js";
 //#region src/elements/calendar/calendar-day/calendar-day.scss?inline
-var s = ":host{--sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x)}.sbb-calendar-day{flex-direction:column;justify-content:var(--sbb-calendar-cell-justify-content);height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width);padding:var(--sbb-calendar-cell-padding)}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height)}:host(:is(:state(crossed-out),[state--crossed-out])) .sbb-calendar-day__value:after{content:\"\";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);position:absolute;background-color:var(--sbb-calendar-cell-disabled-color);inset-block-start:var(--sbb-calendar-day-crossed-out-top);inset-inline-start:50%;transform:var(--sbb-calendar-day-crossed-out-translate)}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height);padding:var(--sbb-calendar-cell-padding)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}", c = (() => {
+var s = ".sbb-calendar-day{justify-content:var(--sbb-calendar-day-justify-content)}.sbb-calendar-day__value{display:flex;height:var(--sbb-calendar-day-value-height);align-items:center;justify-content:center;position:relative}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}", c = (() => {
 	let c = o, l = [], u, d;
 	return class extends c {
 		constructor() {
@@ -74,7 +74,7 @@ var s = ":host{--sbb-calendar-day-value-height: var(--sbb-spacing-fixed-6x)}.sbb
 			return this.closest?.("sbb-calendar") ?? this.getRootNode?.()?.host?.closest("sbb-calendar");
 		}
 		setSelectedState(e) {
-			let t = e.multiple ? e.selected.some((e) => this.dateAdapter.sameDate(this.value, e)) : !!e.selected && this.dateAdapter.compareDate(this.value, e.selected) === 0;
+			let t = e.multiple ? e.value.some((e) => this.dateAdapter.sameDate(this.value, e)) : !!e.value && this.dateAdapter.compareDate(this.value, e.value) === 0;
 			this.toggleState("selected", t), this.internals.ariaPressed = String(t);
 		}
 		setDisabledFilteredState(e) {