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

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

Bumps the stylelint group with 2 updates: [stylelint-config-recommended-scss](https://github.com/stylelint-scss/stylelint-config-recommended-scss) and [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard).


Updates `stylelint-config-recommended-scss` from 15.0.1 to 16.0.0
- [Release notes](https://github.com/stylelint-scss/stylelint-config-recommended-scss/releases)
- [Changelog](https://github.com/stylelint-scss/stylelint-config-recommended-scss/blob/master/CHANGELOG.md)
- [Commits](stylelint-scss/stylelint-config-recommended-scss@v15.0.1...v16.0.0)

Updates `stylelint-config-standard` from 38.0.0 to 39.0.0
- [Release notes](https://github.com/stylelint/stylelint-config-standard/releases)
- [Changelog](https://github.com/stylelint/stylelint-config-standard/blob/main/CHANGELOG.md)
- [Commits](stylelint/stylelint-config-standard@38.0.0...39.0.0)

---
updated-dependencies:
- dependency-name: stylelint-config-recommended-scss
  dependency-version: 16.0.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: stylelint
- dependency-name: stylelint-config-standard
  dependency-version: 39.0.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: stylelint
...

Signed-off-by: dependabot[bot] <[email protected]>

* refactor: not mixing recommended and standard

* docs: added stylelint config differences

* refactor: stylinelint auto-fixes

* chore(markdownlint): fix findings

* refactor: stylelint feedback

* refactor: import-notation stylelint feedback

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Maximilian Franzke <[email protected]>

Author: dependabot[bot]

.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-lock.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",

package.json

@@ -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/accordion/accordion.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/badge/badge.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/button/button.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/card/card.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/checkbox/checkbox.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%;