@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779891630 → 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;
+  }
+}

package/core/styles/mixins/_typo.scss

@@ -2,112 +2,108 @@
 // Typo: Title Style Mixins
 // ----------------------------------------------------------------------------------------------------
 
-@mixin title-rules {
+@mixin heading-rules {
   font-family: var(--sbb-typo-font-family);
   font-weight: bold;
   letter-spacing: var(--sbb-typo-letter-spacing-heading);
   line-height: var(--sbb-typo-line-height-heading);
 }
 
-@mixin title--level-1 {
+@mixin heading--level-1 {
   font-size: var(--sbb-heading-font-size-1);
 }
 
-@mixin title--level-1-spacing {
+@mixin heading--level-1-spacing {
   margin-block: var(--sbb-heading-margin-block-1);
 }
 
-@mixin title--level-2 {
+@mixin heading--level-2 {
   font-size: var(--sbb-heading-font-size-2);
 }
 
-@mixin title--level-2-spacing {
+@mixin heading--level-2-spacing {
   margin-block: var(--sbb-heading-margin-block-2);
 }
 
-@mixin title--level-3 {
+@mixin heading--level-3 {
   font-size: var(--sbb-heading-font-size-3);
 }
 
-@mixin title--level-3-spacing {
+@mixin heading--level-3-spacing {
   margin-block: var(--sbb-heading-margin-block-3);
 }
 
-@mixin title--level-4 {
+@mixin heading--level-4 {
   font-size: var(--sbb-heading-font-size-4);
 }
 
-@mixin title--level-4-spacing {
+@mixin heading--level-4-spacing {
   margin-block: var(--sbb-heading-margin-block-4);
 }
 
-@mixin title--level-5 {
+@mixin heading--level-5 {
   font-size: var(--sbb-heading-font-size-5);
 }
 
-@mixin title--level-5-spacing {
+@mixin heading--level-5-spacing {
   margin-block: var(--sbb-heading-margin-block-5);
 }
 
-@mixin title--level-6 {
+@mixin heading--level-6 {
   font-size: var(--sbb-heading-font-size-6);
   line-height: var(--sbb-typo-line-height-text);
 }
 
-@mixin title--level-6-spacing {
+@mixin heading--level-6-spacing {
   margin-block: var(--sbb-heading-margin-block-6);
 }
 
-@mixin title-1($exclude-spacing: false) {
-  @include title--level-1;
+@mixin heading-1($exclude-spacing: false) {
+  @include heading--level-1;
   @if not($exclude-spacing) {
-    @include title--level-1-spacing;
+    @include heading--level-1-spacing;
   }
-  @include title-rules;
+  @include heading-rules;
 }
 
-@mixin title-2($exclude-spacing: false) {
-  @include title--level-2;
+@mixin heading-2($exclude-spacing: false) {
+  @include heading--level-2;
   @if not($exclude-spacing) {
-    @include title--level-2-spacing;
+    @include heading--level-2-spacing;
   }
-  @include title-rules;
+  @include heading-rules;
 }
 
-@mixin title-3($exclude-spacing: false) {
-  @include title--level-3;
+@mixin heading-3($exclude-spacing: false) {
+  @include heading--level-3;
   @if not($exclude-spacing) {
-    @include title--level-3-spacing;
+    @include heading--level-3-spacing;
   }
-  @include title-rules;
+  @include heading-rules;
 }
 
-@mixin title-4($exclude-spacing: false) {
-  @include title--level-4;
+@mixin heading-4($exclude-spacing: false) {
+  @include heading--level-4;
   @if not($exclude-spacing) {
-    @include title--level-4-spacing;
+    @include heading--level-4-spacing;
   }
-  @include title-rules;
+  @include heading-rules;
 }
 
-@mixin title-5($exclude-spacing: false) {
-  @include title--level-5;
+@mixin heading-5($exclude-spacing: false) {
+  @include heading--level-5;
   @if not($exclude-spacing) {
-    @include title--level-5-spacing;
+    @include heading--level-5-spacing;
   }
-  @include title-rules;
+  @include heading-rules;
 }
 
-@mixin title-6($exclude-spacing: false) {
-  @include title--level-6;
+@mixin heading-6($exclude-spacing: false) {
+  @include heading--level-6;
   @if not($exclude-spacing) {
-    @include title--level-6-spacing;
+    @include heading--level-6-spacing;
   }
-  @include title-rules;
-}
-
-@mixin title--negative {
-  --sbb-title-color: var(--sbb-color-3-negative);
+  @include heading-rules;
 }
 
 // ----------------------------------------------------------------------------------------------------