docs: describe scss api changes

demo/src/pages/de/category/astro/long-path/index.astro

@@ -8,21 +8,23 @@ import Breadcrumbs from "../../../../../../../src/Breadcrumbs.astro";
     <h1><span class="text-gradient">Astro</span> Breadcrumbs Examples</h1>
 
     <h2>Example 1 - Custom separator</h2>
-    <Breadcrumbs indexText={"home"} truncated={true}>
-      <!-- Add icon or text here -->
-      <svg
-        slot="separator"
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        ><polyline points="9 18 15 12 9 6"></polyline>
-      </svg>
-    </Breadcrumbs>
+    <div style="max-width: 500px; margin: 0 auto">
+      <Breadcrumbs indexText={"home"} truncated={true}>
+        <!-- Add icon or text here -->
+        <svg
+          slot="separator"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          ><polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </Breadcrumbs>
+    </div>
   </main>
 </Layout>

docs/src/content/docs/configuration/properties.mdx

@@ -182,7 +182,7 @@ If you use the optional SCSS file, make sure you set the same class name in you'
 :::
 
 :::danger
-If you use the optional CSS file, all styles will be broken. Please add your own CSS or use the SCSS styles with customized [$bem-root](/styling/scss-api/#bem-root) prop.
+If you use the optional CSS file, all styles will be broken. Please add your own CSS or use the [SCSS styles](/styling/setup-scss-config/) with customized [$bem-root](/styling/scss-api/#bem-root) prop.
 :::
 
 **Usage:**
@@ -306,6 +306,17 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 <Breadcrumbs truncated={true} />
 ```
 
+:::caution
+If you use the SCSS style file, you need to opt-in `$truncated: true` within the [SCSS Style Api](/styling/scss-api/#truncated). (This does not apply to the CSS variant.)
+:::
+
+```scss
+// astro-breadcrumbs-config.scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  $truncated: true
+);
+```
+
 **Rendered Component:**
 
 <Breadcrumbs truncated={true} />

docs/src/content/docs/configuration/slots.mdx

@@ -9,7 +9,7 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 
 **Default:** `…`
 
-[The first element] If present `indexText` is deactivated.
+Content of the `.c-breadcrumbs__truncated-button`.
 
 **Usage:**
 

docs/src/content/docs/start-here/demo.mdx

@@ -46,3 +46,4 @@ import { Breadcrumbs } from "astro-breadcrumbs";
 ## Astro-Breadcrumbs on production ready sites
 
 - [Berliner Schnauze](https://berliner-schnauze.wtf/wort/knorke/)
+- [Shaping Digital Transformation for a Sustainable Society](https://publication2023.bits-und-baeume.org/)

docs/src/content/docs/styling/scss-api.mdx

@@ -206,3 +206,21 @@ Sets the transition for the link color. If `$color-hover-link` is not set, this
   $transition-link-breadcrumbs: all 0.3s ease
 );
 ```
+
+## $truncated
+
+**Default:** `false`
+
+If `true`, truncated styles will be applied to the breadcrumbs.
+
+:::caution
+Make sure to also set `truncated` property to `true` in the [configuration](/configuration/properties/#truncated).
+:::
+
+**Usage:**
+
+```scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  $truncated: true
+);
+```

docs/src/content/docs/styling/setup-scss-config.mdx

@@ -41,16 +41,21 @@ If already present this is optional.
 
 ### 2. Create a new SCSS file
 
-Create a new SCSS file (for example styles.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of the breadcrumbs.
+Create a new SCSS file (for example astro-breadcrumbs-config.scss) in your project and import the `astro-breadcrumbs` SCSS file. You can then use the SCSS variables to customize the look of your breadcrumbs.
 
 ```scss
-@use "astro-breadcrumbs/breadcrumbs.scss" with (/// Your config here);
+// astro-breadcrumbs-config.scss
+@use "astro-breadcrumbs/breadcrumbs.scss" with (
+  /// Your config goes here
+  /// $size-font: 12px;
+  /// $color-link: rebeccapurple;
+);
 ```
 
 ### 3. Import the SCSS file in your Astro file
 
 ```astro
 ---
-import "../styles/styles.scss";
+import "../styles/astro-breadcrumbs-config.scss";
 ---
 ```