chore(deps-dev): bump the stylelint group with 2 updates

.stylelintrc.json

@@ -1,8 +1,5 @@
 {
-	"extends": [
-		"stylelint-config-standard",
-		"stylelint-config-recommended-scss"
-	],
+	"extends": ["stylelint-config-standard-scss"],
 	"plugins": [
 		"stylelint-use-logical",
 		"@double-great/stylelint-a11y",

docs/stylelint-scss-config.md

@@ -0,0 +1,20 @@
+# Differences in between `stylelint-config-standard-scss` and `stylelint-config-recommended-scss`
+
+## Short version
+
+- `stylelint-config-recommended-scss`
+    - Minimal, “avoid bugs” preset for SCSS.
+    - Extends the core recommended rules and the SCSS plugin’s recommended rules.
+    - Turns off core rules that conflict with SCSS syntax.
+    - Little to no stylistic/opinionated formatting. Fewer warnings; great if you use Prettier.
+
+- `stylelint-config-standard-scss`
+    - Superset of recommended-scss with opinions.
+    - Adds many formatting/convention rules (mostly via `stylelint-stylistic`) for quotes, spacing, commas, hex case/length, newline placement, etc.
+    - Still disables core rules that conflict with SCSS, but enforces a consistent style and will surface more issues (mostly auto-fixable).
+
+## Practical guidance
+
+- Use recommended-scss if you want just correctness checks for SCSS and let Prettier handle formatting.
+- Use standard-scss if you want Stylelint to also enforce style conventions across SCSS.
+- Either SCSS preset avoids CSS‑Nesting‑only checks on .scss files (the “missing scoping root” issue appears when using non‑SCSS presets like `stylelint-config-standard` on SCSS).

package.json

@@ -128,8 +128,7 @@
     "rimraf": "6.0.1",
     "rxjs": "7.8.2",
     "stylelint": "16.23.1",
-    "stylelint-config-recommended-scss": "15.0.1",
-    "stylelint-config-standard": "38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-use-logical": "2.1.2",
     "tslib": "2.8.1",
     "tsx": "4.20.4",

packages/components/src/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;
 		}
 

packages/components/src/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;

packages/components/src/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;

packages/components/src/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;

packages/components/src/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");
 		}
 

packages/components/src/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%;

packages/components/src/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);
 		}
 

packages/components/src/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}

packages/components/src/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) {

packages/components/src/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");
 	}
 

packages/components/src/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";