@db-ux/core-components 3.0.5 → 3.0.7

package/build/components/accordion/accordion.scss

@@ -21,7 +21,7 @@ The spacings are not part of the styling of the accordion items themselves.
 
 	&[data-variant="divider"],
 	&:not([data-variant]) {
-		@include accordion-subsequent-item-selector() {
+		@include accordion-subsequent-item-selector {
 			// One space each before and after the divider results in a double spacing
 			margin-block-start: calc(2 * #{variables.$db-spacing-fixed-sm});
 
@@ -35,7 +35,7 @@ The spacings are not part of the styling of the accordion items themselves.
 	}
 
 	&[data-variant="card"] {
-		@include accordion-subsequent-item-selector() {
+		@include accordion-subsequent-item-selector {
 			margin-block-start: variables.$db-spacing-fixed-sm;
 		}
 

package/build/components/badge/badge.scss

@@ -46,7 +46,6 @@
 	@extend %component-border;
 	@extend %db-overwrite-font-size-2xs;
 	@extend %default-button;
-
 	@include tag-components.get-tag-colors("badge");
 
 	border-radius: variables.$db-border-radius-full;

package/build/components/button/button.scss

@@ -1,5 +1,4 @@
 @charset "utf-8";
-
 @use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
@@ -23,7 +22,7 @@
 
 	// Square icon only buttons
 	&[data-no-text="true"] {
-		@include icons.is-icon-text-replace();
+		@include icons.is-icon-text-replace;
 
 		padding: 0;
 		inline-size: variables.$db-sizing-md;

package/build/components/card/card.scss

@@ -29,8 +29,7 @@
 	--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-1-pressed};
 
 	@extend %default-card;
-
-	@include component.get-data-spacing();
+	@include component.get-data-spacing;
 
 	display: flex;
 	flex-direction: column;

package/build/components/checkbox/checkbox.scss

@@ -27,7 +27,7 @@
 @mixin get-validity-color-check($key: "valid") {
 	$variant: successful;
 
-	@if ($key != "valid") {
+	@if $key != "valid" {
 		$variant: critical;
 	}
 
@@ -76,11 +76,10 @@
 
 .db-checkbox {
 	@extend %helper-message;
-
-	@include form-components.set-default-check-element();
+	@include form-components.set-default-check-element;
 
 	&:not(:has(input:disabled)) {
-		@include form-components.get-state();
+		@include form-components.get-state;
 		@include form-components.get-state("active");
 	}
 
@@ -124,7 +123,6 @@
 
 		&:indeterminate {
 			@extend %center-icon;
-
 			@include icons.set-icon("minus");
 		}
 

package/build/components/divider/divider.scss

@@ -21,7 +21,7 @@
 	&:not([data-variant="vertical"]) {
 		block-size: variables.$db-border-width-3xs;
 
-		@include helpers.divider();
+		@include helpers.divider;
 
 		&[data-width="full"] {
 			inline-size: 100%;

package/build/components/drawer/drawer.scss

@@ -102,6 +102,7 @@ $spacings: (
 			--db-drawer-content-padding-inline,
 			#{map.get($spacing, "inline")}
 		);
+
 		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
 		overflow-y: auto;
 		overflow-block: auto;
@@ -110,7 +111,7 @@ $spacings: (
 
 %spacing-drawer {
 	@each $name, $spacing in $spacings {
-		@if ($name == "medium") {
+		@if $name == "medium" {
 			@include get-spacing($spacing);
 		}
 

package/build/components/header/header.scss

@@ -220,6 +220,7 @@
 
 .db-header-drawer {
 	--db-drawer-content-padding-inline: 0;
+
 	// 1px for box shadow of header
 	--db-drawer-header-padding-block-end: calc(
 		1px + #{variables.$db-spacing-fixed-xs}

package/build/components/icon/icon.scss

@@ -1,7 +1,7 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 
 .db-icon {
-	@include icons.is-icon-text-replace();
+	@include icons.is-icon-text-replace;
 
 	/* Safari hack */
 	@supports (-webkit-hyphens: none) {

package/build/components/infotext/infotext.scss

@@ -11,8 +11,8 @@
 
 	display: flex;
 
-	@include icons.has-no-icon() {
-		@include icons.to-filled-icon();
+	@include icons.has-no-icon {
+		@include icons.to-filled-icon;
 		@include icons.set-icon("information_circle");
 	}
 

package/build/components/link/link.scss

@@ -1,5 +1,4 @@
 @charset "utf-8";
-
 @use "@db-ux/core-foundations/build/styles/fonts";
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/animation";

package/build/components/navigation-item/navigation-item.scss

@@ -81,8 +81,7 @@
 	--db-has-before: 0;
 
 	@extend %db-overwrite-font-size-md;
-
-	@include icon-passing.icon-passing();
+	@include icon-passing.icon-passing;
 
 	display: inline-flex;
 	position: relative;
@@ -118,7 +117,7 @@
 
 	.db-navigation-item-expand-button {
 		@include screen-sizes.screen("md", "max") {
-			@include sub-navi-handler-mobile();
+			@include sub-navi-handler-mobile;
 		}
 
 		&:is(button),
@@ -171,6 +170,7 @@
 	inline-size: 100%;
 	position: fixed;
 	overflow: hidden auto;
+
 	// additional #{$db-spacing-fixed-3xs} for border
 	inset-block: calc(
 			#{component.$min-mobile-header-height} +
@@ -194,7 +194,7 @@
 	visibility: hidden;
 
 	@include screen-sizes.screen("md", "max") {
-		@include sub-navigation-mobile();
+		@include sub-navigation-mobile;
 	}
 
 	@include screen-sizes.screen("md") {
@@ -230,6 +230,7 @@
 			position: absolute;
 			inset-inline-start: 0;
 			inline-size: 100%;
+
 			// #{$db-spacing-fixed--3xs} for shadows
 			block-size: calc(
 				#{variables.$db-spacing-fixed-3xs} +
@@ -267,6 +268,7 @@
 
 				&::before {
 					inset-block: auto 0;
+
 					// inline-size: calc(var(--db-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
 					transform: translateX(100%) scaleX(-1);
 				}
@@ -291,6 +293,7 @@
 				content: "";
 				position: absolute;
 				padding: variables.$db-spacing-fixed-xs;
+
 				// #{$db-spacing-fixed-3xs} for box shadow
 				inset-block-start: #{variables.$db-spacing-fixed-3xs};
 				inset-inline-end: calc(-1 * #{variables.$db-spacing-fixed-xs});

package/build/components/notification/notification.scss

@@ -123,7 +123,7 @@
 	img {
 		--db-icon-margin-end: 0;
 
-		@include icons.to-filled-icon();
+		@include icons.to-filled-icon;
 
 		grid-area: icon;
 	}
@@ -203,7 +203,6 @@
 	@each $name in colors.$variant-colors {
 		&[data-semantic="#{$name}"] {
 			@extend %db-#{$name}-variables;
-
 			@include icons.variant-icons($name);
 
 			&::before {

package/build/components/page/page.scss

@@ -29,7 +29,7 @@
 	}
 
 	&[data-variant="fixed"] {
-		@include header-footer-style();
+		@include header-footer-style;
 
 		block-size: 100%;
 		min-block-size: 100%;
@@ -38,7 +38,7 @@
 
 		/* workaround for angular */
 		> :is(db-header, dbheader, dbfooter, db-footer) {
-			@include header-footer-style();
+			@include header-footer-style;
 		}
 
 		> .db-main {

package/build/components/popover/popover.scss

@@ -17,8 +17,7 @@
 	> article {
 		@extend %popover-center;
 		@extend %default-popover;
-
-		@include component.get-data-spacing();
+		@include component.get-data-spacing;
 
 		&[data-open="true"] {
 			@extend %show-popover;

package/build/components/radio/radio.scss

@@ -28,15 +28,15 @@
 }
 
 .db-radio {
-	@include form-components.set-default-check-element();
+	@include form-components.set-default-check-element;
 
 	&:not(:has(input:checked, input:disabled)) {
-		@include form-components.get-state();
+		@include form-components.get-state;
 		@include form-components.get-state("active");
 	}
 
 	@include form-components.get-validity(radio) {
-		@include get-radio-validity-colors();
+		@include get-radio-validity-colors;
 	}
 
 	@include form-components.get-validity(radio, "invalid") {

package/build/components/section/section.scss

@@ -9,7 +9,6 @@ $small-section-padding-inline: max(
 	),
 	#{variables.$db-spacing-fixed-md}
 );
-
 $medium-section-padding-inline: max(
 	calc(
 		#{variables.$db-spacing-fixed-md} +
@@ -17,7 +16,6 @@ $medium-section-padding-inline: max(
 	),
 	#{variables.$db-spacing-fixed-md}
 );
-
 $large-section-padding-inline: max(
 	calc(
 		#{variables.$db-spacing-fixed-md} +

package/build/components/select/select.scss

@@ -10,10 +10,10 @@
 .db-select {
 	--db-form-component-padding-inline-end: #{select-components.$select-icon-padding};
 	--db-form-component-min-inline-size: #{variables.$db-sizing-xl};
+
 	// shared from form-components
 	@extend %select-icon;
 	@extend %select-placeholder;
-
 	@include form-components.set-default-form-component(select);
 
 	// increased inline size for elements with icons

package/build/components/switch/switch.scss

@@ -8,13 +8,10 @@
 // We need some fixed padding here to avoid layout shifts
 /* stylelint-disable-next-line db-ux/use-spacings */
 $switch-fixed-padding: helpers.px-to-rem(2);
-
 $switch-inactive-thumb-size: calc(
 	#{form-components.$font-size-height} - #{$switch-fixed-padding} * 2
 );
-
 $switch-active-thumb-size: calc(#{form-components.$font-size-height});
-
 $checked-active-transition-size: calc(
 	#{form-components.$font-size-height} - #{$switch-fixed-padding} * 2
 );
@@ -38,10 +35,10 @@ $checked-active-transition-size: calc(
 .db-switch {
 	user-select: none;
 
-	@include form-components.set-default-check-element();
+	@include form-components.set-default-check-element;
 
 	&:not(:has(input:disabled)) {
-		@include form-components.get-state();
+		@include form-components.get-state;
 
 		@include form-components.get-state("active") {
 			@extend %active-transition;

package/build/components/tab-item/tab-item.scss

@@ -81,7 +81,7 @@ $with-icon-padding-calc: calc(
 		}
 
 		&:is([data-no-text], [data-no-text="true"]) {
-			@include icons.is-icon-text-replace();
+			@include icons.is-icon-text-replace;
 
 			padding: 0;
 			inline-size: calc(

package/build/components/tabs/tabs.scss

@@ -338,20 +338,20 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 		 * Scroll left / right buttons
 		 */
 		.tabs-scroll-left {
-			@include angular-button-workaround() {
+			@include angular-button-workaround {
 				inset-inline-start: 0;
 			}
 		}
 
 		.tabs-scroll-right {
-			@include angular-button-workaround() {
+			@include angular-button-workaround {
 				inset-inline-end: 0;
 			}
 		}
 
 		.tabs-scroll-left,
 		.tabs-scroll-right {
-			@include angular-button-workaround() {
+			@include angular-button-workaround {
 				position: absolute;
 				z-index: $db-tabs-z-index-button;
 				inset-block: variables.$db-spacing-fixed-xs;

package/build/components/tag/tag.scss

@@ -14,13 +14,13 @@
 	&[data-no-text="true"] {
 		--icon-margin-after: 0;
 
-		@include icons.is-icon-text-replace();
+		@include icons.is-icon-text-replace;
 
 		padding: 0;
 		gap: 0;
 
 		label {
-			@include icons.is-icon-text-replace();
+			@include icons.is-icon-text-replace;
 		}
 	}
 
@@ -64,15 +64,14 @@
 	&:not(:has(#{tag-components.$interactive-selectors})),
 	&:has(.db-tab-remove-button) {
 		@extend %component-border;
-
-		@include tag-components.get-tag-colors();
+		@include tag-components.get-tag-colors;
 	}
 
 	&:has(#{tag-components.$interactive-selectors}) {
 		--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
 
 		@include icon-passing.icon-passing(variables.$db-spacing-fixed-2xs);
-		@include tag-components.get-tag-colors-interactive();
+		@include tag-components.get-tag-colors-interactive;
 	}
 
 	button:nth-of-type(2),

package/build/components/textarea/textarea.scss

@@ -63,16 +63,14 @@
 		&:has(textarea:is(:focus-within, :not(:placeholder-shown))) {
 			&::before {
 				@extend %default-transition;
-
-				@include get-scrolling-workaround();
+				@include get-scrolling-workaround;
 
 				background-color: colors.$db-adaptive-bg-basic-level-1-default;
 			}
 
 			&::after {
 				@extend %form-component-border;
-
-				@include get-scrolling-workaround();
+				@include get-scrolling-workaround;
 
 				background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
 				z-index: 1;

package/build/styles/absolute.scss

@@ -1,5 +1,4 @@
 /* This is a predefined beginner friendly bundle with absolute asset paths (/assets/xxx) */
 
 @use "@db-ux/core-foundations/build/styles/absolute.assets-paths";
-
 @forward "./relative";

package/build/styles/dialog-init.scss

@@ -5,7 +5,6 @@ $backdrop-color-strong: color(
 	from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
 		#{variables.$db-opacity-lg}
 );
-
 $backdrop-color-weak: color(
 	from #{colors.$db-adaptive-on-bg-basic-emphasis-100-default} srgb r g b /
 		#{variables.$db-opacity-sm}

package/build/styles/internal/_component.scss

@@ -6,7 +6,6 @@
 $min-mobile-header-height: calc(
 	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
-
 $component-border: variables.$db-border-width-3xs solid
 	colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 
@@ -52,7 +51,6 @@ $responsive-spacings: (
 	"small": variables.$db-spacing-responsive-sm,
 	"none": 0
 );
-
 $default-spacings: (
 	"default": variables.$db-spacing-fixed-sm,
 	"large": variables.$db-spacing-fixed-lg,
@@ -63,7 +61,7 @@ $default-spacings: (
 
 @mixin get-data-spacing($type: padding, $spacings: $default-spacings) {
 	@each $name, $spacing in $spacings {
-		@if ($name == "default") {
+		@if $name == "default" {
 			&:not([data-spacing]) {
 				#{$type}: $spacing;
 			}

package/build/styles/internal/_db-puls.scss

@@ -42,11 +42,10 @@
 
 %db-puls-auto {
 	@extend %db-puls;
-
-	@include set-db-puls-vertical();
+	@include set-db-puls-vertical;
 
 	@include screen-sizes.screen("md") {
-		@include set-db-puls-horizontal();
+		@include set-db-puls-horizontal;
 	}
 }
 

package/build/styles/internal/_form-components.scss

@@ -7,22 +7,19 @@
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "component";
-
 @forward "../visually-hidden";
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
 $valid-read-only-form-fields: input, textarea;
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
 $valid-field-sizing-form-fields: input, textarea;
-
 $dropdown-icon-transition: transform variables.$db-transition-straight-emotional;
 $dropdown-icon-transform: rotate(-180deg);
-
 $font-size-height: var(--db-icon-font-size);
 $icon-size-sm: var(--db-base-body-icon-font-size-sm);
 $label-size-height-xs: var(--db-base-body-icon-font-size-xs);
 $label-size-height-2xs: var(--db-base-body-icon-font-size-2xs);
-
 $floating-label-size-calc: calc(
 	#{variables.$db-spacing-fixed-3xs} + #{variables.$db-spacing-fixed-2xs} +
 		#{$label-size-height-2xs}
@@ -32,19 +29,15 @@ $floating-label-size-calc: calc(
 $floating-label-padding-block-start: calc(
 	var(--db-type-body-font-size-2xs) + #{variables.$db-spacing-fixed-3xs}
 );
-
 $icon-inline-block-start: calc(
 	(#{variables.$db-spacing-fixed-xs} + #{$label-size-height-xs}) *
 		var(--db-label-visible-above, 1) + #{variables.$db-sizing-md} / 2
 );
-
 $input-types:
 	"button", "checkbox", "color", "date", "datetime-local", "email", "file",
 	"hidden", "image", "month", "number", "password", "radio", "range", "reset",
 	"search", "submit", "tel", "text", "time", "url", "week";
-
 $check-border-size: min(#{variables.$db-border-width-2xs}, 2px);
-
 $db-min-inline-size: var(
 	--db-form-component-min-inline-size,
 	#{variables.$db-sizing-lg}
@@ -119,7 +112,7 @@ $db-min-inline-size: var(
 		#{$selector} {
 			@extend %db-overwrite-font-size-sm;
 
-			@if ($selector == textarea) {
+			@if $selector == textarea {
 				padding-block-start: $floating-label-size-calc;
 				/* stylelint-disable-next-line at-rule-empty-line-before */
 			} @else {
@@ -148,7 +141,7 @@ $db-min-inline-size: var(
 				font-family: var(--db-font-family-sans);
 				font-style: italic;
 
-				@if ($selector == select or $selector == summary) {
+				@if $selector == select or $selector == summary {
 					/* stylelint-disable-next-line db-ux/use-spacings */
 					padding-block-start: var(--db-base-body-icon-font-size-2xs);
 				}
@@ -165,7 +158,7 @@ $db-min-inline-size: var(
 @mixin get-validity-message($key: "valid") {
 	> db-infotext > .db-infotext,
 	> .db-infotext {
-		@if ($key == "valid") {
+		@if $key == "valid" {
 			&[data-semantic="successful"] {
 				display: flex;
 			}
@@ -185,11 +178,11 @@ $db-min-inline-size: var(
 @mixin get-validity-color($selector, $key: "valid") {
 	$variant: "successful";
 
-	@if ($key != "valid") {
+	@if $key != "valid" {
 		$variant: "critical";
 	}
 
-	@if ($selector != textarea) {
+	@if $selector != textarea {
 		@extend %db-#{$variant}-variables;
 		/* stylelint-disable-next-line at-rule-empty-line-before */
 	} @else {
@@ -238,7 +231,7 @@ $input-valid-types:
 @function get-validations($selector, $key) {
 	$validations: ":required";
 
-	@if ($selector == input) {
+	@if $selector == input {
 		/* We use all client side form-validation for input here */
 		// https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
 		$validations: ":required, [minlength], [maxlength], [pattern]";
@@ -247,7 +240,7 @@ $input-valid-types:
 			$validations: $validations + ", [type=#{$type}]";
 		}
 		/* stylelint-disable-next-line at-rule-empty-line-before */
-	} @else if($selector == textarea) {
+	} @else if $selector == textarea {
 		/* We use all client side form-validation for textarea here */
 		$validations: ":required, [minlength], [maxlength]";
 	}
@@ -260,11 +253,11 @@ $input-valid-types:
 @mixin get-validity($selector, $key: "valid") {
 	$user: "";
 
-	@if ($selector == check or $selector == switch) {
+	@if $selector == check or $selector == switch {
 		$user: "user-";
 	}
 
-	@if ($selector == check or $selector == radio or $selector == switch) {
+	@if $selector == check or $selector == radio or $selector == switch {
 		$selector: input;
 
 		&:has(
@@ -274,7 +267,7 @@ $input-valid-types:
 		}
 		/* stylelint-disable-next-line at-rule-empty-line-before */
 	} @else {
-		@if ($selector == summary) {
+		@if $selector == summary {
 			$selector: select;
 		}
 
@@ -316,6 +309,7 @@ $input-valid-types:
 	/* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
 	& {
 		--db-form-has-before: 0;
+
 		// we use absolute icons
 		position: relative;
 		display: flex;
@@ -454,7 +448,7 @@ $input-valid-types:
 		inset-inline-end: variables.$db-spacing-fixed-sm;
 	}
 
-	@if ($selector == input or $selector == select or $selector == summary) {
+	@if $selector == input or $selector == select or $selector == summary {
 		#{$selector} {
 			block-size: variables.$db-sizing-md;
 			text-overflow: ellipsis;
@@ -465,7 +459,7 @@ $input-valid-types:
 @mixin get-validity-color-check-label-color($state, $key: "valid") {
 	$variant: successful;
 
-	@if ($key != "valid") {
+	@if $key != "valid" {
 		$variant: critical;
 	}
 
@@ -482,7 +476,7 @@ $input-valid-types:
 @mixin get-state($state: "hover") {
 	$variant: "hovered";
 
-	@if ($state != "hover") {
+	@if $state != "hover" {
 		$variant: "pressed";
 	}
 

package/build/styles/internal/_popover-component.scss

@@ -200,28 +200,28 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	&[data-corrected-placement^="bottom"] {
 		--db-popover-translate-y: -25%;
 
-		@include get-popover-show();
+		@include get-popover-show;
 	}
 
 	&[data-placement^="top"]:not([data-corrected-placement]),
 	&[data-corrected-placement^="top"] {
 		--db-popover-translate-y: 25%;
 
-		@include get-popover-show();
+		@include get-popover-show;
 	}
 
 	&[data-placement^="right"]:not([data-corrected-placement]),
 	&[data-corrected-placement^="right"] {
 		--db-popover-translate-x: -25%;
 
-		@include get-popover-show();
+		@include get-popover-show;
 	}
 
 	&[data-placement^="left"]:not([data-corrected-placement]),
 	&[data-corrected-placement^="left"] {
 		--db-popover-translate-x: 25%;
 
-		@include get-popover-show();
+		@include get-popover-show;
 	}
 }
 
@@ -234,6 +234,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	box-shadow: variables.$db-elevation-md;
 	visibility: hidden;
 	z-index: 1337;
+
 	// revert this if popover is included in button
 	white-space: normal;
 	max-inline-size: min(

package/build/styles/internal/_select-components.scss

@@ -14,7 +14,6 @@ $has-before-padding: calc(
 	var(--db-form-has-before) *
 		(#{form-components.$icon-size-sm} + #{variables.$db-spacing-fixed-sm})
 );
-
 $select-icon-padding: calc(
 	#{form-components.$font-size-height} + #{variables.$db-spacing-fixed-sm} +
 		#{variables.$db-spacing-fixed-xs}
@@ -34,6 +33,7 @@ $select-icon-padding: calc(
 
 		position: absolute;
 		pointer-events: none;
+
 		// we use the top of the element, the size of the label+label-margin-bottom and the font-size of the select/2
 		// for functional we have some rounding issues for rem, so we need 1px less
 		transform: translateY(var(--label-block-start-half));

package/build/styles/internal/_stack-components.scss

@@ -92,8 +92,8 @@ $stack-gaps: (
 		flex-wrap: wrap;
 	}
 
-	@include get-stack-alignments();
-	@include get-stack-justify-contents();
+	@include get-stack-alignments;
+	@include get-stack-justify-contents;
 
 	@each $name, $gap in $stack-gaps {
 		&[data-gap="#{$name}"] {

package/build/styles/internal/_tag-components.scss

@@ -31,7 +31,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 }
 
 %set-interactive-weak {
-	@include get-weak();
+	@include get-weak;
 
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
@@ -50,19 +50,19 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 	&[data-semantic="adaptive"] {
 		&:not([data-emphasis]),
 		&[data-emphasis="weak"] {
-			@if ($htmlTag == "badge") {
+			@if $htmlTag == "badge" {
 				$border-color: 70;
 				$background-color: 3;
 
 				@include get-weak("adaptive", $border-color, $background-color);
 				/* stylelint-disable-next-line at-rule-empty-line-before */
 			} @else {
-				@include get-weak();
+				@include get-weak;
 			}
 		}
 
 		&[data-emphasis="strong"] {
-			@include get-strong();
+			@include get-strong;
 
 			.db-tab-remove-button {
 				@extend %set-interactive-strong;
@@ -95,7 +95,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 }
 
 %set-interactive-strong {
-	@include get-strong();
+	@include get-strong;
 
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-vibrant-hovered;
@@ -133,7 +133,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 	&:not([data-emphasis]),
 	&[data-emphasis="weak"] {
 		// buttons and links
-		@include get-interactive-selectors() {
+		@include get-interactive-selectors {
 			@extend %set-interactive-weak;
 		}
 
@@ -149,7 +149,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		label:has(input[type="radio"]:checked) {
 			&,
 			&:is(:hover, :focus, :active) {
-				@include get-strong();
+				@include get-strong;
 			}
 		}
 	}
@@ -158,7 +158,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		@extend %set-interactive-strong;
 
 		// buttons and links
-		@include get-interactive-selectors() {
+		@include get-interactive-selectors {
 			@extend %set-interactive-strong;
 		}
 
@@ -167,7 +167,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		}
 
 		label:has(input[type="radio"]:checked) {
-			@include get-strong();
+			@include get-strong;
 		}
 
 		&:has(input):not(:has(input:checked)) {

package/build/styles/rollup.scss

@@ -1,5 +1,4 @@
 /* This is a predefined beginner friendly bundle for rollup apps */
 
 @use "@db-ux/core-foundations/build/styles/rollup.assets-paths";
-
 @forward "./relative";

package/build/styles/webpack.scss

@@ -1,5 +1,4 @@
 /* This is a predefined beginner friendly bundle for webpack apps */
 
 @use "@db-ux/core-foundations/build/styles/webpack.assets-paths";
-
 @forward "./relative";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-components",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "type": "module",
   "description": "",
   "repository": {
@@ -42,7 +42,7 @@
     "start": "nodemon --watch src --watch scripts --watch scripts --ext js,tsx,ts,scss,json --exec \"npm run build\""
   },
   "dependencies": {
-    "@db-ux/core-foundations": "3.0.5"
+    "@db-ux/core-foundations": "3.0.7"
   },
   "devDependencies": {
     "@builder.io/eslint-plugin-mitosis": "0.0.17",