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

package/_index.scss

@@ -1,5 +1,6 @@
 // This file is auto-generated by scripts/generate-scss-api.ts
 @forward './core/styles';
+@forward './action-group/action-group.global' as action-group-*;
 @forward './alert/alert.global' as alert-*;
 @forward './badge/badge.global' as badge-*;
 @forward './breadcrumb/breadcrumb.global' as breadcrumb-*;

package/action-group/_action-group.global.scss

@@ -0,0 +1,7 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-action-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
+}

package/action-group/action-group.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../action-group.component-Dg11Ug4A.js";
+import { t as e } from "../action-group.component-DBfkhMYG.js";
 export { e as SbbActionGroupElement };

package/action-group.component-DBfkhMYG.js

@@ -0,0 +1,16 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n } from "./core.js";
+//#region src/elements/action-group/action-group.scss?inline
+var r = ":host{display:flex;align-items:center;justify-content:start;gap:var(--sbb-action-group-gap)}:host(.sbb-orientation-vertical-full-width){flex-direction:column;align-items:stretch}:host(:where(.sbb-orientation-vertical,.sbb-orientation-horizontal-from-small,.sbb-orientation-horizontal-from-large,.sbb-orientation-horizontal-from-ultra)){align-items:start}@media(min-width:37.5rem){:host(.sbb-orientation-horizontal-from-small){align-items:center}}@media(min-width:64rem){:host(.sbb-orientation-horizontal-from-large){align-items:center}}@media(min-width:90rem){:host(.sbb-orientation-horizontal-from-ultra){align-items:center}}", i = class extends n {
+	static {
+		this.elementName = "sbb-action-group";
+	}
+	static {
+		this.styles = [t(r)];
+	}
+	render() {
+		return e`<slot></slot>`;
+	}
+};
+//#endregion
+export { i as t };

package/action-group.js

@@ -1,4 +1,4 @@
-import { t as e } from "./action-group.component-Dg11Ug4A.js";
+import { t as e } from "./action-group.component-DBfkhMYG.js";
 import "./action-group.pure.js";
 //#region src/elements/action-group.ts
 e.define();

package/action-group.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./action-group.component-Dg11Ug4A.js";
+import { t as e } from "./action-group.component-DBfkhMYG.js";
 export { e as SbbActionGroupElement };

package/core/styles/_theme.scss

@@ -7,6 +7,9 @@ $theme: 'standard' !default;
 @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
 );
@@ -212,6 +215,7 @@ $theme: 'standard' !default;
 
   // start-auto-generated-scss-module-root
   @include sbb-css-tokens.base;
+  @include action-group.base;
   @include alert.base;
   @include breadcrumb.base;
   @include button.base;

package/core/styles/features/layout.scss

@@ -1,4 +1,5 @@
 @use '../mixins/layout';
+@use '../mixins/mediaqueries';
 
 .sbb-grid,
 .sbb-page-spacing {
@@ -18,3 +19,29 @@
 .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;
+  }
+}