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

package/calendar/_calendar.global.scss

@@ -3,45 +3,44 @@
 $theme: 'standard' !default;
 
 @mixin base {
-  --sbb-calendar-cell-background-color: transparent;
   --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-border: var(--sbb-calendar-cell-border-width) solid
-    var(--sbb-border-color-1-inverted);
   --sbb-calendar-cell-color: var(--sbb-color-2);
   --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
-  --sbb-calendar-cell-justify-content: normal;
-  --sbb-calendar-cell-inset: #{sbb.px-to-rem-build(1)};
   --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
-  --sbb-calendar-cell-font-weight: unset;
-  --sbb-calendar-cell-year-month-width: #{sbb.px-to-rem-build(77)};
-  --sbb-calendar-cell-year-month-height: #{sbb.px-to-rem-build(44)};
-  --sbb-calendar-control-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
-  --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(44)};
+  --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-control-view-change-background: var(--sbb-background-color-1);
-  --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
-    var(--sbb-spacing-fixed-2x);
   --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-
-  // While changing views, there would be a few frames where the height of the calendar collapses to just
-  // the height of the controls and then grow back to the height of the next view.
-  // By using 0.1ms this can be avoided.
-  --sbb-calendar-table-animation-duration: 0.1ms;
-  --sbb-calendar-table-animation-shift: #{sbb.px-to-rem-build(0.1)};
-  --sbb-calendar-table-column-spaces: 12;
   --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
-  --sbb-calendar-day-width: #{sbb.px-to-rem-build(44)};
-  --sbb-calendar-day-height: #{sbb.px-to-rem-build(48)};
+
+  // 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: var(--sbb-spacing-fixed-4x);
-  --sbb-calendar-day-crossed-out-top: 33%;
-  --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
+  --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, r as t, t as n } from "../../calendar.component-DKKptbyy.js";
+import { n as e, r as t, t as n } from "../../calendar.component-BM4L9oyb.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-Caf2w9lS.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-Dq7Ap5n-.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-Caf2w9lS.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) {