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

package/calendar.js

@@ -1,11 +1,11 @@
-import { t as e } from "./calendar-day.component-CcZymuSD.js";
+import { t as e } from "./calendar-day.component-DrMWf6-w.js";
 import { SbbCalendarMonthElement as t } from "./calendar/calendar-month/calendar-month.component.js";
 import { SbbCalendarYearElement as n } from "./calendar/calendar-year/calendar-year.component.js";
 import { SbbCalendarWeekdayElement as r } from "./calendar/calendar-weekday/calendar-weekday.component.js";
 import { SbbCalendarWeeknumberElement as i } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { n as a, t as o } from "./calendar.component-oS_T4s4k.js";
-import { t as s } from "./calendar-cell-base-element-CUG1qYFb.js";
+import { n as a, r as o, t as s } from "./calendar.component-RVAHcJf6.js";
+import { t as c } from "./calendar-cell-base-element-DHCKK3bU.js";
 import "./calendar.pure.js";
-o.define(), e.define(), t.define(), n.define(), r.define(), i.define();
+s.define(), e.define(), t.define(), n.define(), r.define(), i.define();
 //#endregion
-export { s as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent };
+export { c as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, s as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbDateSelectedEvent, o as SbbMonthChangeEvent };

package/calendar.pure.js

@@ -1,8 +1,8 @@
-import { t as e } from "./calendar-day.component-CcZymuSD.js";
+import { t as e } from "./calendar-day.component-DrMWf6-w.js";
 import { SbbCalendarMonthElement as t } from "./calendar/calendar-month/calendar-month.component.js";
 import { SbbCalendarYearElement as n } from "./calendar/calendar-year/calendar-year.component.js";
 import { SbbCalendarWeekdayElement as r } from "./calendar/calendar-weekday/calendar-weekday.component.js";
 import { SbbCalendarWeeknumberElement as i } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { n as a, t as o } from "./calendar.component-oS_T4s4k.js";
-import { t as s } from "./calendar-cell-base-element-CUG1qYFb.js";
-export { s as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent };
+import { n as a, r as o, t as s } from "./calendar.component-RVAHcJf6.js";
+import { t as c } from "./calendar-cell-base-element-DHCKK3bU.js";
+export { c as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, s as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbDateSelectedEvent, o as SbbMonthChangeEvent };

package/{core/styles/mixins/card.scss → card/_card.global.scss}

@@ -1,33 +1,28 @@
-@use '../core/functions';
-@use '../core/mediaqueries';
-@use './a11y';
-@use './buttons';
-@use './typo';
-
-// -----------------------------------------------------------------------------
-// Card: Mixins & CSS custom properties
-// -----------------------------------------------------------------------------
-@mixin card-variables--global($theme: 'standard') {
-  @include card-variables--white;
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin variables--global {
+  @include variables--white;
 
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-style: solid;
-  --sbb-card-padding-inline-default: #{functions.theme-pattern-select(
+  --sbb-card-padding-inline-default: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-responsive-s),
         'lean': var(--sbb-spacing-responsive-xxs),
       ),
       $theme
     )};
-  --sbb-card-padding-block-default: #{functions.theme-pattern-select(
+  --sbb-card-padding-block-default: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-responsive-xxxs),
         'lean': var(--sbb-spacing-fixed-3x),
       ),
       $theme
     )};
-  --sbb-card-with-badge-padding-block-default: #{functions.theme-pattern-select(
+  --sbb-card-with-badge-padding-block-default: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs),
         'lean': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x),
@@ -36,37 +31,37 @@
     )};
 }
 
-@mixin card-variables--global-forced-colors {
+@mixin variables--global-forced-colors {
   --sbb-card-border-color: CanvasText;
   --sbb-card-border-width: var(--sbb-border-width-2x);
 }
 
-@mixin card-variables($theme: 'standard') {
-  @include card-variables--global($theme);
+@mixin variables {
+  @include variables--global;
 
-  @include a11y.if-forced-colors {
-    @include card-variables--global-forced-colors;
+  @media (forced-colors: active) {
+    @include variables--global-forced-colors;
   }
 }
 
-@mixin card-variables--white {
+@mixin variables--white {
   --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-color: transparent;
 }
 
-@mixin card-variables--milk {
+@mixin variables--milk {
   --sbb-card-background-color: var(--sbb-background-color-3);
   --sbb-card-border-color: transparent;
 }
 
-@mixin card-variables--transparent-bordered {
+@mixin variables--transparent-bordered {
   --sbb-card-background-color: transparent;
   --sbb-card-border-color: var(--sbb-border-color-4-inverted);
   --sbb-card-border-width: var(--sbb-border-width-1x);
   --sbb-focus-outline-color: inherit;
 }
 
-@mixin card-variables--transparent-bordered-dashed {
+@mixin variables--transparent-bordered-dashed {
   --sbb-card-background-color: transparent;
   --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));
   --sbb-card-border-width: var(--sbb-border-width-1x);
@@ -74,81 +69,80 @@
   --sbb-focus-outline-color: inherit;
 }
 
-@mixin card-variables--active {
+@mixin variables--active {
   --sbb-card-border-color: var(--sbb-border-color-3);
   --sbb-card-border-width: var(--sbb-border-width-2x);
   --sbb-card-border-style: solid;
 
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     --sbb-card-border-color: Highlight;
   }
 }
 
-// Card sizing
-@mixin card-variables--spacing-default {
+@mixin variables--spacing-default {
   --sbb-card-padding-block: var(--sbb-card-padding-block-default);
   --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);
   --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);
 }
 
-@mixin card-variables--spacing-3x-xxs {
+@mixin variables--spacing-3x-xxs {
   --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin card-variables--spacing-xxxs-xxs {
+@mixin variables--spacing-xxxs-xxs {
   --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
     var(--sbb-spacing-responsive-xxxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin card-variables--spacing-xxxs-s {
+@mixin variables--spacing-xxxs-s {
   --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x)
     var(--sbb-spacing-responsive-xxxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
 }
 
-@mixin card-variables--spacing-4x-xxs {
+@mixin variables--spacing-4x-xxs {
   --sbb-card-padding-block: var(--sbb-spacing-fixed-4x);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin card-variables--spacing-xxs {
+@mixin variables--spacing-xxs {
   --sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
 }
 
-@mixin card-variables--spacing-s {
+@mixin variables--spacing-s {
   --sbb-card-padding-block: var(--sbb-spacing-responsive-s);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
 }
 
-@mixin card-variables--spacing-l {
+@mixin variables--spacing-l {
   --sbb-card-padding-block: var(--sbb-spacing-responsive-l);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-l);
 }
 
-@mixin card-variables--button {
-  @include a11y.if-forced-colors {
+@mixin variables--button {
+  @media (forced-colors: active) {
     --sbb-card-color: ButtonText;
   }
 }
 
-@mixin card-variables--link {
-  @include a11y.if-forced-colors {
+@mixin variables--link {
+  @media (forced-colors: active) {
     --sbb-card-color: LinkText;
     --sbb-card-border-color: CanvasText;
   }
 }
 
-@mixin card {
+@mixin element-rules {
   // As the card has always a white/milk background, we have to fix the focus outline color
   // to default color for cases where the card is used in a negative context.
   --sbb-focus-outline-color: light-dark(
@@ -181,25 +175,53 @@
     pointer-events: none;
   }
 
-  @include a11y.if-forced-colors {
+  @media (forced-colors: active) {
     // Propagate card text color to title text color to ensure correct color in forced colors mode
     --sbb-title-color: var(--sbb-card-color);
   }
 }
 
-@mixin card--hover {
-  @include mediaqueries.hover-mq($hover: true) {
-    --sbb-card-hover-shift: #{functions.px-to-rem-build(-2)};
+@mixin state--hover {
+  @include sbb.hover-mq($hover: true) {
+    --sbb-card-hover-shift: #{sbb.px-to-rem-build(-2)};
 
     box-shadow: var(--sbb-box-shadow-level-9-hard);
 
-    @include a11y.if-forced-colors {
+    @media (forced-colors: active) {
       --sbb-card-border-color: Highlight;
     }
   }
 }
 
-@mixin card--wrapper {
+@mixin wrapper {
   display: block;
   height: 100%;
 }
+
+@mixin base {
+  @include variables--global;
+
+  --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-card-badge-color: var(--sbb-color-2-inverted);
+  --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
+  --sbb-card-badge-border-color: transparent;
+  --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
+  --sbb-card-badge-border-width: var(--sbb-border-width-1x);
+  --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
+  --sbb-card-badge-skew: skew(16deg, 0deg);
+}
+
+@mixin forced-colors {
+  @include variables--global-forced-colors;
+
+  --sbb-card-badge-border-display: block;
+  --sbb-card-badge-inline-border-display: none;
+}
+
+@mixin rules {
+  // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
+  // This style enables accessing focusable elements inside an sbb-card.
+  sbb-card .sbb-action {
+    pointer-events: all;
+  }
+}

package/card/card/card.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card.component-WUQRK9jT.js";
+import { t as e } from "../../card.component-Bwuv9ur1.js";
 export { e as SbbCardElement };

package/card/card-badge/card-badge.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card-badge.component-BLAK_y8x.js";
+import { t as e } from "../../card-badge.component-B-uJVrxT.js";
 export { e as SbbCardBadgeElement };

package/card/common/card-action-common.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card-action-common-BNdGcJl-.js";
+import { t as e } from "../../card-action-common-DRSSDHqY.js";
 export { e as SbbCardActionCommonElementMixin };

package/card.js

@@ -1,8 +1,8 @@
-import { t as e } from "./card-badge.component-BLAK_y8x.js";
+import { t as e } from "./card-badge.component-B-uJVrxT.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-WUQRK9jT.js";
-import { t as i } from "./card-action-common-BNdGcJl-.js";
+import { t as r } from "./card.component-Bwuv9ur1.js";
+import { t as i } from "./card-action-common-DRSSDHqY.js";
 import "./card.pure.js";
 r.define(), e.define(), t.define(), n.define();
 //#endregion

package/card.pure.js

@@ -1,6 +1,6 @@
-import { t as e } from "./card-badge.component-BLAK_y8x.js";
+import { t as e } from "./card-badge.component-B-uJVrxT.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-WUQRK9jT.js";
-import { t as i } from "./card-action-common-BNdGcJl-.js";
+import { t as r } from "./card.component-Bwuv9ur1.js";
+import { t as i } from "./card-action-common-DRSSDHqY.js";
 export { i as SbbCardActionCommonElementMixin, e as SbbCardBadgeElement, t as SbbCardButtonElement, r as SbbCardElement, n as SbbCardLinkElement };

package/carousel/_carousel.global.scss

@@ -0,0 +1,11 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-carousel-background-color: var(--sbb-background-color-1);
+  --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);
+}

package/carousel/carousel/carousel.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel.component-9oMMOyWo.js";
+import { t as e } from "../../carousel.component-B6XqR3Bc.js";
 export { e as SbbCarouselElement };

package/carousel/carousel-item/carousel-item.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel-item.component-DyZAdXL_.js";
-export { e as SbbCarouselItemElement };
+import { n as e, t } from "../../carousel-item.component-DRfpza-9.js";
+export { t as SbbCarouselItemElement, e as SbbCarouselItemShowEvent };

package/carousel/carousel-list/carousel-list.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel-list.component-Ai0uJWB7.js";
+import { t as e } from "../../carousel-list.component-DAPO_Oce.js";
 export { e as SbbCarouselListElement };

package/{carousel-item.component-DyZAdXL_.js → carousel-item.component-DRfpza-9.js}

@@ -1,7 +1,17 @@
 import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n } from "./core.js";
 //#region src/elements/carousel/carousel-item/carousel-item.scss?inline
-var r = ":host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}", i = class extends n {
+var r = ":host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}", i = class extends Event {
+	get index() {
+		return this._index;
+	}
+	constructor(e, { index: t }) {
+		super(e, {
+			bubbles: !0,
+			composed: !0
+		}), this._index = t;
+	}
+}, a = class extends n {
 	static {
 		this.elementName = "sbb-carousel-item";
 	}
@@ -22,4 +32,4 @@ var r = ":host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-
 	}
 };
 //#endregion
-export { i as t };
+export { i as n, a as t };

package/{carousel-list.component-Ai0uJWB7.js → carousel-list.component-DAPO_Oce.js}

@@ -2,13 +2,14 @@ import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n, SbbLanguageController as r, i18nCarouselItemAriaLabel as i, isArrowKeyPressed as a } from "./core.js";
 import { ResizeController as o } from "@lit-labs/observers/resize-controller.js";
 import { IntersectionController as s } from "@lit-labs/observers/intersection-controller.js";
+import { SbbCarouselItemShowEvent as c } from "./carousel/carousel-item/carousel-item.component.js";
 //#region src/elements/carousel/carousel-list/carousel-list.scss?inline
-var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:\"\";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}", l = class extends n {
+var l = ":host{display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:\"\";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}", u = class extends n {
 	static {
 		this.elementName = "sbb-carousel-list";
 	}
 	static {
-		this.styles = [t(c)];
+		this.styles = [t(l)];
 	}
 	constructor() {
 		super(), this._currentIndex = 0, this._language = new r(this), this._observedCarouselItems = [], this._beforeShowObserver = new s(this, {
@@ -16,11 +17,7 @@ var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);di
 			callback: (e) => {
 				e.filter((e) => e.isIntersecting && e.target !== this).forEach((e) => {
 					let t = e.target;
-					t.dispatchEvent(new CustomEvent("beforeshow", {
-						detail: { index: this._carouselItems().findIndex((e) => e === t) },
-						bubbles: !0,
-						composed: !0
-					}));
+					t.dispatchEvent(new c("beforeshow", { index: this._carouselItems().findIndex((e) => e === t) }));
 				});
 			},
 			config: {
@@ -34,11 +31,7 @@ var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);di
 				for (let t of e) {
 					if (t.target === this) continue;
 					let e = t.target;
-					t.isIntersecting ? (e.ariaHidden = null, this._currentIndex = this._carouselItems().findIndex((t) => t === e), e.dispatchEvent(new CustomEvent("show", {
-						detail: { index: this._currentIndex },
-						bubbles: !0,
-						composed: !0
-					}))) : e.ariaHidden = "true";
+					t.isIntersecting ? (e.ariaHidden = null, this._currentIndex = this._carouselItems().findIndex((t) => t === e), e.dispatchEvent(new c("show", { index: this._currentIndex }))) : e.ariaHidden = "true";
 				}
 			},
 			config: {
@@ -85,4 +78,4 @@ var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);di
 	}
 };
 //#endregion
-export { l as t };
+export { u as t };

package/{carousel.component-9oMMOyWo.js → carousel.component-B6XqR3Bc.js}

@@ -46,7 +46,7 @@ var p = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 		}
 		constructor() {
 			super(), this.#e = t(this, g, !1), this._paginator = (t(this, _), null), this._abortController = null, this._language = new o(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
-				this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
+				this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.index || (this._paginator && e.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.index), this._requestedPageIndexByPaginator = -1);
 			});
 		}
 		connectedCallback() {

package/carousel.js

@@ -1,7 +1,7 @@
-import { t as e } from "./carousel-item.component-DyZAdXL_.js";
-import { t } from "./carousel-list.component-Ai0uJWB7.js";
-import { t as n } from "./carousel.component-9oMMOyWo.js";
+import { n as e, t } from "./carousel-item.component-DRfpza-9.js";
+import { t as n } from "./carousel-list.component-DAPO_Oce.js";
+import { t as r } from "./carousel.component-B6XqR3Bc.js";
 import "./carousel.pure.js";
-n.define(), e.define(), t.define();
+r.define(), t.define(), n.define();
 //#endregion
-export { n as SbbCarouselElement, e as SbbCarouselItemElement, t as SbbCarouselListElement };
+export { r as SbbCarouselElement, t as SbbCarouselItemElement, e as SbbCarouselItemShowEvent, n as SbbCarouselListElement };

package/carousel.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./carousel-item.component-DyZAdXL_.js";
-import { t } from "./carousel-list.component-Ai0uJWB7.js";
-import { t as n } from "./carousel.component-9oMMOyWo.js";
-export { n as SbbCarouselElement, e as SbbCarouselItemElement, t as SbbCarouselListElement };
+import { n as e, t } from "./carousel-item.component-DRfpza-9.js";
+import { t as n } from "./carousel-list.component-DAPO_Oce.js";
+import { t as r } from "./carousel.component-B6XqR3Bc.js";
+export { r as SbbCarouselElement, t as SbbCarouselItemElement, e as SbbCarouselItemShowEvent, n as SbbCarouselListElement };

package/checkbox/_checkbox.global.scss

@@ -0,0 +1,29 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-checkbox-label-icon-flex-direction: row;
+  --sbb-checkbox-label-icon-justify-content: space-between;
+  --sbb-checkbox-label-icon-flex-grow: 1;
+  --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-checkbox-dimension-xs: #{sbb.px-to-rem-build(20)};
+  --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
+  --sbb-checkbox-dimension: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-checkbox-dimension-m),
+        'lean': var(--sbb-checkbox-dimension-xs),
+      ),
+      $theme
+    )};
+  --sbb-checkbox-font-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-xs),
+      ),
+      $theme
+    )};
+  --sbb-checkbox-label-color: var(--sbb-color-color-3);
+  --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+}

package/checkbox/checkbox.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../checkbox.component-ChQmCxal.js";
+import { t as e } from "../checkbox.component-DNVief0q.js";
 export { e as SbbCheckboxElement };

package/checkbox/common/checkbox-common.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../checkbox-common-BSzAnug3.js";
+import { t as e } from "../../checkbox-common-Dz5PUD9H.js";
 export { e as SbbCheckboxCommonElementMixin };

package/{checkbox-common-BSzAnug3.js → checkbox-common-Dz5PUD9H.js}

@@ -1,17 +1,14 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { unsafeCSS as n } from "lit";
 import { property as r } from "lit/decorators.js";
-import { SbbFormAssociatedCheckboxMixin as i, forceType as a } from "./core.js";
+import { SbbFormAssociatedCheckboxMixin as i, SbbPropertyWatcherController as a, forceType as o } from "./core.js";
 //#region src/elements/checkbox/common/checkbox-common.scss?inline
-var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb-text-font-size-xs);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-checkbox-font-size: var(--sbb-text-font-size-s);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-checkbox-font-size: var(--sbb-text-font-size-m);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", s = (s) => (() => {
-	let c = i(s), l, u = [], d = [];
-	return class extends c {
-		constructor() {
-			super(...arguments), this.#e = t(this, u, !1), this._group = (t(this, d), null);
-		}
+var s = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb-text-font-size-xs);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-checkbox-font-size: var(--sbb-text-font-size-s);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-checkbox-font-size: var(--sbb-text-font-size-m);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", c = (c) => (() => {
+	let l = i(c), u, d = [], f = [];
+	return class extends l {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-			l = [a(), r({ type: Boolean })], e(this, null, l, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			u = [o(), r({ type: Boolean })], e(this, null, u, {
 				kind: "accessor",
 				name: "indeterminate",
 				static: !1,
@@ -24,7 +21,7 @@ var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb
 					}
 				},
 				metadata: t
-			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -32,7 +29,7 @@ var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb
 			});
 		}
 		static {
-			this.styles = [n(o)];
+			this.styles = [n(s)];
 		}
 		#e;
 		get indeterminate() {
@@ -44,12 +41,15 @@ var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb
 		get group() {
 			return this._group;
 		}
-		connectedCallback() {
-			super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), [
+		constructor() {
+			super(), this.#e = t(this, d, !1), this._group = (t(this, f), null), this.addController(new a(this, () => this.closest("sbb-checkbox-group"), [
 				"disabled",
 				"required",
 				"size"
-			].forEach((e) => this.requestUpdate(e));
+			].reduce((e, t) => Object.assign(e, { [t]: () => this.requestUpdate(t) }), {})));
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._group = this.closest("sbb-checkbox-group");
 		}
 		willUpdate(e) {
 			super.willUpdate(e), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
@@ -66,4 +66,4 @@ var o = "@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb
 	};
 })();
 //#endregion
-export { s as t };
+export { c as t };

package/checkbox-panel/checkbox-panel.component.js

@@ -63,7 +63,7 @@ var d = (() => {
                   ?checked=${this.checked}
                   ?indeterminate=${this.indeterminate}
                   ?disabled=${this.disabled || this.formDisabled}
-                  .size=${this.size}
+                  size=${this.size || r}
                 ></sbb-visual-checkbox>
               </span>
               <span class="sbb-checkbox__label">

package/{checkbox.component-ChQmCxal.js → checkbox.component-DNVief0q.js}

@@ -1,17 +1,17 @@
-import { t as e } from "./checkbox-common-BSzAnug3.js";
+import { t as e } from "./checkbox-common-Dz5PUD9H.js";
 import { __esDecorate as t, __runInitializers as n } from "tslib";
-import { html as r, unsafeCSS as i } from "lit";
-import { property as a } from "lit/decorators.js";
-import { SbbElement as o, getOverride as s, isLean as c } from "./core.js";
+import { html as r, nothing as i, unsafeCSS as a } from "lit";
+import { property as o } from "lit/decorators.js";
+import { SbbElement as s, getOverride as c } from "./core.js";
 import { SbbIconNameMixin as l } from "./icon.pure.js";
 import { SbbVisualCheckboxElement as u } from "./visual-checkbox.pure.js";
 //#region src/elements/checkbox/checkbox.scss?inline
 var d = ":host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", f = (() => {
-	let f = l(e(o)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
+	let f = l(e(s)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
 	return class extends f {
 		static {
 			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-			p = [a()], g = [a({ reflect: !0 }), s((e, t) => e.group?.size ?? t)], y = [a({
+			p = [o()], g = [o({ reflect: !0 }), c((e, t) => e.group?.size ?? t)], y = [o({
 				attribute: "icon-placement",
 				reflect: !0
 			})], t(this, null, p, {
@@ -67,7 +67,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [i(d)];
+			this.styles = [a(d)];
 		}
 		#e = n(this, m, null);
 		get value() {
@@ -76,7 +76,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
 		set value(e) {
 			this.#e = e;
 		}
-		#t = (n(this, h), n(this, _, c() ? "xs" : "m"));
+		#t = (n(this, h), n(this, _, null));
 		get size() {
 			return this.#t;
 		}
@@ -100,7 +100,7 @@ var d = ":host{outline:none!important;display:inline-block}:host([icon-placement
                 ?checked=${this.checked}
                 ?indeterminate=${this.indeterminate}
                 ?disabled=${this.disabled || this.formDisabled}
-                .size=${this.size}
+                size=${this.size || i}
               ></sbb-visual-checkbox>
             </span>
             <span class="sbb-checkbox__label">