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

package/core/mixins/named-slot-list-mixin.js

@@ -1,20 +1,20 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r } from "lit";
 import { state as i } from "lit/decorators.js";
-import { screenReaderOnlyStyles as a } from "../styles/styles.js";
+import { listResetStyles as a, screenReaderOnlyStyles as o } from "../styles/styles.js";
 //#region src/elements/core/mixins/named-slot-list-mixin.ts
-var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
-	let l = c, u, d = [], f = [];
-	return class extends l {
+var s = "data-ssr-child-count", c = "li", l = (l) => (() => {
+	let u = l, d, f = [], p = [];
+	return class extends u {
 		constructor() {
-			super(...arguments), this.#e = t(this, d, []), this._handleSlotchange = (t(this, f), () => {
+			super(...arguments), this.#e = t(this, f, []), this._handleSlotchange = (t(this, p), () => {
 				let e = Array.from(this.children ?? []).filter((e) => this.listChildLocalNames.includes(e.localName));
-				e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.removeAttribute(o));
+				e.length === this.listChildren.length && this.listChildren.every((t, n) => e[n] === t) || (this.listChildren.filter((t) => !e.includes(t)).forEach((e) => e.removeAttribute("slot")), this.listChildren = e, this.removeAttribute(s));
 			});
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-			u = [i()], e(this, null, u, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+			d = [i()], e(this, null, d, {
 				kind: "accessor",
 				name: "listChildren",
 				static: !1,
@@ -27,7 +27,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 					}
 				},
 				metadata: t
-			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
+			}, f, p), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -38,7 +38,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 			this.elementDependencies = [];
 		}
 		static {
-			this.styles = [a];
+			this.styles = [a, o];
 		}
 		#e;
 		get listChildren() {
@@ -54,7 +54,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 			super.disconnectedCallback(), this.shadowRoot?.removeEventListener("slotchange", this._handleSlotchange);
 		}
 		updated(e) {
-			super.updated(e), e.has("listChildren") && this.listChildren.forEach((e, t) => e.setAttribute("slot", `${s}-${t}`));
+			super.updated(e), e.has("listChildren") && this.listChildren.forEach((e, t) => e.setAttribute("slot", `${c}-${t}`));
 		}
 		renderList(e = {}, t = {}) {
 			let i = this.listSlotEntries(t);
@@ -78,8 +78,8 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
 		}
 		listSlotEntries(e) {
-			return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(o) ?? 0) })).map((t, n) => ({
-				name: `${s}-${n}`,
+			return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(s) ?? 0) })).map((t, n) => ({
+				name: `${c}-${n}`,
 				ariaHidden: e?.localNameVisualOnly?.includes(t.localName) ?? !1
 			}));
 		}
@@ -89,4 +89,4 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 	};
 })();
 //#endregion
-export { c as SbbNamedSlotListMixin };
+export { l as SbbNamedSlotListMixin };

package/core/mixins/panel-mixin.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../panel-mixin-CcbyRemy.js";
+import { t as e } from "../../panel-mixin-CG-f0J6K.js";
 export { e as SbbPanelMixin };

package/core/mixins/selection-panel-mixin.js

@@ -9,7 +9,7 @@ var t = (t) => {
 			return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
 		}
 		constructor(...t) {
-			super(t), this._propertyWatcher = new e(this, () => this.panel, {
+			super(t), this._previousSize = null, this._propertyWatcher = new e(this, () => this.panel, {
 				checked: (e) => {
 					this.toggleState("checked", e.checked), this.onInputStateChange?.();
 				},

package/core/overlay/overlay-option-panel.js

@@ -2,14 +2,15 @@ import { getElementPosition as e } from "./position.js";
 //#region src/elements/core/overlay/overlay-option-panel.ts
 function t(t, n, r, i, a, o = "auto") {
 	if (!t || !n) return;
-	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`);
-	let s = e(r, n, i, {
+	let s = n.getBoundingClientRect();
+	a.style.setProperty("--sbb-options-panel-width", `${n.offsetWidth}px`), a.style.setProperty("--sbb-options-panel-origin-height", `${n.offsetHeight}px`), a.style.setProperty("--sbb-options-panel-origin-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-origin-position-y", `${s.top}px`);
+	let c = e(r, n, i, {
 		forceBelow: o === "below",
 		forceAbove: o === "above"
 	});
-	a.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", s.maxHeight);
-	let c = s.alignment.vertical === "above";
-	a.toggleState?.("options-panel-position-above", c), a.toggleState?.("options-panel-position-below", !c), n.setAttribute("data-options-panel-position", s.alignment.vertical);
+	a.style.setProperty("--sbb-options-panel-position-x", `${c.left}px`), a.style.setProperty("--sbb-options-panel-position-y", `${c.top}px`), a.style.setProperty("--sbb-options-panel-max-height-calculated", c.maxHeight);
+	let l = c.alignment.vertical === "above";
+	a.toggleState?.("options-panel-position-above", l), a.toggleState?.("options-panel-position-below", !l), n.setAttribute("data-options-panel-position", c.alignment.vertical);
 }
 //#endregion
 export { t as setOverlayPosition };

package/core/overlay/overlay-outside-pointer-event-listener.js

@@ -10,7 +10,7 @@ var r = class {
 			this._pointerDownEventTarget = void 0;
 			for (let e of Array.from(this._overlays).reverse()) {
 				if (n(e, t) || n(e, r)) break;
-				e.dispatchEvent(new CustomEvent("overlayOutsidePointer"));
+				e.dispatchEvent(new Event("overlayOutsidePointer"));
 			}
 		};
 	}

package/core/styles/_index.scss

@@ -1,25 +1,13 @@
-@forward './core/functions';
-@forward './core/mediaqueries';
-
+@forward './mixins/functions';
+@forward './mixins/mediaqueries';
 @forward './mixins/a11y';
 @forward './mixins/animation';
-@forward './mixins/badge';
-@forward './mixins/buttons';
-@forward './mixins/card';
+@forward './mixins/core';
 @forward './mixins/font-face';
 @forward './mixins/helpers';
-@forward './mixins/image';
-@forward './mixins/inputs';
 @forward './mixins/layout';
-@forward './mixins/link';
 @forward './mixins/lists';
-@forward './mixins/overlay';
-@forward './mixins/panel';
 @forward './mixins/pearl-chain-bullet';
-@forward './mixins/popover';
+@forward './mixins/reset';
 @forward './mixins/scrollbar';
-@forward './mixins/table';
 @forward './mixins/typo';
-
-// Internals
-@forward './mixins/dev_and_debug';

package/core/styles/_theme.scss

@@ -0,0 +1,370 @@
+$theme: 'standard' !default;
+
+@use 'sass:meta';
+@use './_index' as sbb;
+
+// start-auto-generated-scss-module-imports
+@use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss' as sbb-css-tokens with (
+  $theme: $theme
+);
+@use '../../action-group/action-group.global' as action-group with (
+  $theme: $theme
+);
+@use '../../alert/alert.global' as alert with (
+  $theme: $theme
+);
+@use '../../badge/badge.global' as badge with (
+  $theme: $theme
+);
+@use '../../breadcrumb/breadcrumb.global' as breadcrumb with (
+  $theme: $theme
+);
+@use '../../button/button.global' as button with (
+  $theme: $theme
+);
+@use '../../calendar/calendar.global' as calendar with (
+  $theme: $theme
+);
+@use '../../card/card.global' as card with (
+  $theme: $theme
+);
+@use '../../carousel/carousel.global' as carousel with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox.global' as checkbox with (
+  $theme: $theme
+);
+@use '../../chip/chip.global' as chip with (
+  $theme: $theme
+);
+@use '../../chip-label/chip-label.global' as chip-label with (
+  $theme: $theme
+);
+@use '../../clock/clock.global' as clock with (
+  $theme: $theme
+);
+@use '../../container/container.global' as container with (
+  $theme: $theme
+);
+@use '../../dialog/dialog.global' as dialog with (
+  $theme: $theme
+);
+@use '../../divider/divider.global' as divider with (
+  $theme: $theme
+);
+@use '../../expansion-panel/expansion-panel.global' as expansion-panel with (
+  $theme: $theme
+);
+@use '../../file-selector/file-selector.global' as file-selector with (
+  $theme: $theme
+);
+@use '../../flip-card/flip-card.global' as flip-card with (
+  $theme: $theme
+);
+@use '../../footer/footer.global' as footer with (
+  $theme: $theme
+);
+@use '../../form-field/form-field.global' as form-field with (
+  $theme: $theme
+);
+@use '../../header/header.global' as header with (
+  $theme: $theme
+);
+@use '../../icon-sidebar/icon-sidebar.global' as icon-sidebar with (
+  $theme: $theme
+);
+@use '../../lead-container/lead-container.global' as lead-container with (
+  $theme: $theme
+);
+@use '../../link/link.global' as link with (
+  $theme: $theme
+);
+@use '../../loading-indicator/loading-indicator.global' as loading-indicator with (
+  $theme: $theme
+);
+@use '../../loading-indicator-circle/loading-indicator-circle.global' as loading-indicator-circle
+  with (
+  $theme: $theme
+);
+@use '../../logo/logo.global' as logo with (
+  $theme: $theme
+);
+@use '../../map-container/map-container.global' as map-container with (
+  $theme: $theme
+);
+@use '../../menu/menu.global' as menu with (
+  $theme: $theme
+);
+@use '../../message/message.global' as message with (
+  $theme: $theme
+);
+@use '../../mini-calendar/mini-calendar.global' as mini-calendar with (
+  $theme: $theme
+);
+@use '../../navigation/navigation.global' as navigation with (
+  $theme: $theme
+);
+@use '../../notification/notification.global' as notification with (
+  $theme: $theme
+);
+@use '../../option/option.global' as option with (
+  $theme: $theme
+);
+@use '../../overlay/overlay.global' as overlay with (
+  $theme: $theme
+);
+@use '../../paginator/paginator.global' as paginator with (
+  $theme: $theme
+);
+@use '../mixins/panel-common.global' as panel-common with (
+  $theme: $theme
+);
+@use '../../popover/popover.global' as popover with (
+  $theme: $theme
+);
+@use '../../radio-button/radio-button.global' as radio-button with (
+  $theme: $theme
+);
+@use '../../select/select.global' as select with (
+  $theme: $theme
+);
+@use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
+  $theme: $theme
+);
+@use '../../selection-expansion-panel/selection-expansion-panel.global' as selection-expansion-panel
+  with (
+  $theme: $theme
+);
+@use '../base-elements/selection-group-base-element.global' as selection-group-base-element with (
+  $theme: $theme
+);
+@use '../../sidebar/sidebar.global' as sidebar with (
+  $theme: $theme
+);
+@use '../../signet/signet.global' as signet with (
+  $theme: $theme
+);
+@use '../../slider/slider.global' as slider with (
+  $theme: $theme
+);
+@use '../../status/status.global' as status with (
+  $theme: $theme
+);
+@use '../../stepper/stepper.global' as stepper with (
+  $theme: $theme
+);
+@use '../../table/table.global' as table with (
+  $theme: $theme
+);
+@use '../../tabs/tabs.global' as tabs with (
+  $theme: $theme
+);
+@use '../../tag/tag.global' as tag with (
+  $theme: $theme
+);
+@use '../../teaser/teaser.global' as teaser with (
+  $theme: $theme
+);
+@use '../../teaser-hero/teaser-hero.global' as teaser-hero with (
+  $theme: $theme
+);
+@use '../../teaser-panel/teaser-panel.global' as teaser-panel with (
+  $theme: $theme
+);
+@use '../../teaser-product/teaser-product.global' as teaser-product with (
+  $theme: $theme
+);
+@use '../../time-input/time-input.global' as time-input with (
+  $theme: $theme
+);
+@use '../../timetable-form/timetable-form.global' as timetable-form with (
+  $theme: $theme
+);
+@use '../../timetable-occupancy/timetable-occupancy.global' as timetable-occupancy with (
+  $theme: $theme
+);
+@use '../../title/title.global' as title with (
+  $theme: $theme
+);
+@use '../../toast/toast.global' as toast with (
+  $theme: $theme
+);
+@use '../../toggle/toggle.global' as toggle with (
+  $theme: $theme
+);
+@use '../../toggle-check/toggle-check.global' as toggle-check with (
+  $theme: $theme
+);
+@use '../../tooltip/tooltip.global' as tooltip with (
+  $theme: $theme
+);
+@use '../../train/train.global' as train with (
+  $theme: $theme
+);
+@use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
+  $theme: $theme
+);
+
+// end-auto-generated-scss-module-imports
+
+@include meta.load-css('./features/font-face');
+@include meta.load-css('./features/normalize');
+
+:root {
+  @include sbb.core-base;
+
+  // start-auto-generated-scss-module-root
+  @include sbb-css-tokens.base;
+  @include action-group.base;
+  @include alert.base;
+  @include breadcrumb.base;
+  @include button.base;
+  @include calendar.base;
+  @include card.base;
+  @include carousel.base;
+  @include checkbox.base;
+  @include chip.base;
+  @include chip-label.base;
+  @include clock.base;
+  @include container.base;
+  @include dialog.base;
+  @include divider.base;
+  @include expansion-panel.base;
+  @include file-selector.base;
+  @include flip-card.base;
+  @include footer.base;
+  @include form-field.base;
+  @include header.base;
+  @include icon-sidebar.base;
+  @include lead-container.base;
+  @include link.base;
+  @include loading-indicator.base;
+  @include loading-indicator-circle.base;
+  @include logo.base;
+  @include map-container.base;
+  @include menu.base;
+  @include message.base;
+  @include mini-calendar.base;
+  @include navigation.base;
+  @include notification.base;
+  @include option.base;
+  @include overlay.base;
+  @include paginator.base;
+  @include panel-common.base;
+  @include popover.base;
+  @include radio-button.base;
+  @include select.base;
+  @include selection-action-panel.base;
+  @include selection-expansion-panel.base;
+  @include selection-group-base-element.base;
+  @include sidebar.base;
+  @include signet.base;
+  @include slider.base;
+  @include status.base;
+  @include stepper.base;
+  @include table.base;
+  @include tabs.base;
+  @include tag.base;
+  @include teaser.base;
+  @include teaser-hero.base;
+  @include teaser-panel.base;
+  @include teaser-product.base;
+  @include time-input.base;
+  @include timetable-form.base;
+  @include timetable-occupancy.base;
+  @include title.base;
+  @include toast.base;
+  @include toggle.base;
+  @include toggle-check.base;
+  @include tooltip.base;
+  @include train.base;
+  @include visual-checkbox.base;
+  @media (forced-colors: active) {
+    @include sbb-css-tokens.forced-colors;
+    @include alert.forced-colors;
+    @include breadcrumb.forced-colors;
+    @include calendar.forced-colors;
+    @include card.forced-colors;
+    @include expansion-panel.forced-colors;
+    @include form-field.forced-colors;
+    @include header.forced-colors;
+    @include loading-indicator-circle.forced-colors;
+    @include logo.forced-colors;
+    @include radio-button.forced-colors;
+    @include signet.forced-colors;
+    @include slider.forced-colors;
+    @include stepper.forced-colors;
+    @include tag.forced-colors;
+    @include toggle.forced-colors;
+    @include toggle-check.forced-colors;
+    @include train.forced-colors;
+    @include visual-checkbox.forced-colors;
+  }
+  @include sbb.mq($from: small) {
+    @include sbb-css-tokens.breakpoint-small;
+    @include alert.breakpoint-small;
+    @include dialog.breakpoint-small;
+    @include footer.breakpoint-small;
+    @include notification.breakpoint-small;
+  }
+  @include sbb.mq($from: large) {
+    @include sbb-css-tokens.breakpoint-large;
+    @include alert.breakpoint-large;
+    @include button.breakpoint-large;
+    @include chip.breakpoint-large;
+    @include flip-card.breakpoint-large;
+    @include form-field.breakpoint-large;
+    @include header.breakpoint-large;
+    @include menu.breakpoint-large;
+    @include navigation.breakpoint-large;
+    @include teaser-panel.breakpoint-large;
+    @include teaser-product.breakpoint-large;
+    @include time-input.breakpoint-large;
+  }
+  @include sbb.mq($from: ultra) {
+    @include sbb-css-tokens.breakpoint-ultra;
+    @include lead-container.breakpoint-ultra;
+    @include map-container.breakpoint-ultra;
+    @include navigation.breakpoint-ultra;
+    @include teaser-panel.breakpoint-ultra;
+  }
+
+  // end-auto-generated-scss-module-root
+}
+
+@include sbb.core-rules;
+
+// start-auto-generated-scss-module-rules
+@include badge.rules;
+@include breadcrumb.rules;
+@include card.rules;
+@include container.rules;
+@include dialog.rules;
+@include flip-card.rules;
+@include form-field.rules;
+@include header.rules;
+@include icon-sidebar.rules;
+@include lead-container.rules;
+@include message.rules;
+@include option.rules;
+@include select.rules;
+@include sidebar.rules;
+@include table.rules;
+@include tabs.rules;
+@include teaser.rules;
+@include teaser-hero.rules;
+@include teaser-product.rules;
+@include timetable-form.rules;
+@include title.rules;
+@include toggle.rules;
+
+// end-auto-generated-scss-module-rules
+
+@include meta.load-css('./features/a11y');
+@include meta.load-css('./features/animation');
+@include meta.load-css('./features/color-scheme');
+@include meta.load-css('./features/image');
+@include meta.load-css('./features/layout');
+@include meta.load-css('./features/lists');
+@include meta.load-css('./features/scrollbar');
+@include meta.load-css('./features/typography');

package/core/styles/{a11y.scss → features/a11y.scss}

@@ -1,5 +1,5 @@
-@use './mixins/a11y';
-@use './screen-reader-only';
+@use '../mixins/a11y';
+@use '../internals/screen-reader-only';
 
 :is(.sbb-focus-outline, .sbb-focus-outline-dark):focus-visible {
   @include a11y.focus-outline;

package/core/styles/{animation.scss → features/animation.scss}

@@ -1,4 +1,4 @@
-@use './mixins/animation';
+@use '../mixins/animation';
 
 .sbb-disable-animation {
   @include animation.disable-animation;

package/core/styles/features/color-scheme.scss

@@ -0,0 +1,11 @@
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}

package/core/styles/features/font-face.scss

@@ -0,0 +1,3 @@
+@use '../mixins/font-face';
+
+@include font-face.font-declarations;

package/core/styles/{image.scss → features/image.scss}

@@ -1,15 +1,26 @@
-@use './mixins/typo';
-@use './mixins/image';
+@use '../mixins/typo';
 
 .sbb-figure {
-  @include image.figure;
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 100%;
+  grid-auto-rows: auto;
+  margin: 0;
 
   :is(img, sbb-image, .sbb-image):not(.sbb-figure-overlap-image) {
-    @include image.figure-image;
+    grid-row: 1;
+    grid-column: 1;
+    width: 100%;
   }
 
   :is(figcaption, .sbb-caption) {
-    @include image.figure-caption;
+    grid-row: 2;
+    grid-column: 1;
+    padding-block-start: var(--sbb-spacing-fixed-4x);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
+    line-height: var(--sbb-typo-line-height-text);
+    letter-spacing: var(--sbb-typo-letter-spacing-text);
+    font-size: var(--sbb-text-font-size-xs);
   }
 
   // Utility classes for placing elements over an image (eg. 'sbb-figure-overlap-start-start')
@@ -19,14 +30,25 @@
     .sbb-figure-overlap-end-start,
     .sbb-figure-overlap-end-end
   ) {
-    @include image.figure-overlap-base;
+    display: flex;
+    gap: var(--sbb-spacing-fixed-1x);
+    flex-wrap: wrap;
+    margin: var(--sbb-spacing-responsive-xxxs);
+
+    // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
+    color-scheme: only light;
+    position: relative;
+    order: 1; // Alternative to z-index
+    grid-row: 1;
+    grid-column: 1;
   }
 
   $alignments: start, end;
   @each $row-alignment in $alignments {
     @each $column-alignment in $alignments {
       .sbb-figure-overlap-#{$row-alignment}-#{$column-alignment} {
-        @include image.figure-overlap($row-alignment, $column-alignment);
+        place-self: #{$row-alignment} #{$column-alignment};
+        justify-content: #{$column-alignment};
       }
     }
   }

package/core/styles/{layout.private.scss → features/layout.private.scss}

@@ -1,11 +1,12 @@
-@use './mixins/dev_and_debug';
-@use './core/mediaqueries';
+@use '../mixins/mediaqueries';
 @use './node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
 
 .visualized-page-spacing div,
 .visualized-grid div {
-  @include dev_and_debug.development-style;
-
+  background-color: rgba(#ad00ff, 0.2);
+  border-width: var(--sbb-spacing-fixed-2x);
+  border-style: dashed solid;
+  border-color: rgba(#ad00ff, 1);
   padding: 0;
   height: 100px;
 }

package/core/styles/features/layout.scss

@@ -0,0 +1,47 @@
+@use '../mixins/layout';
+@use '../mixins/mediaqueries';
+
+.sbb-grid,
+.sbb-page-spacing {
+  @include layout.page-spacing;
+}
+
+.sbb-grid-expanded,
+.sbb-page-spacing-expanded {
+  @include layout.page-spacing-expanded;
+}
+
+.sbb-grid,
+.sbb-grid-expanded {
+  @include layout.grid-base;
+}
+
+.sbb-grid-only {
+  @include layout.grid-base;
+}
+
+.sbb-orientation-vertical,
+.sbb-orientation-horizontal-from-small,
+.sbb-orientation-horizontal-from-large,
+.sbb-orientation-horizontal-from-ultra {
+  display: flex;
+  flex-direction: column;
+}
+
+.sbb-orientation-horizontal-from-small {
+  @include mediaqueries.mq($from: small) {
+    flex-direction: row;
+  }
+}
+
+.sbb-orientation-horizontal-from-large {
+  @include mediaqueries.mq($from: large) {
+    flex-direction: row;
+  }
+}
+
+.sbb-orientation-horizontal-from-ultra {
+  @include mediaqueries.mq($from: ultra) {
+    flex-direction: row;
+  }
+}

package/core/styles/{lists.scss → features/lists.scss}

@@ -1,4 +1,4 @@
-@use './mixins/lists';
+@use '../mixins/lists';
 
 .sbb-list {
   @include lists.list;