763 refactor preview collapsable/collapsed

docs/30-components/abbr.mdx

@@ -24,8 +24,7 @@ Standard-Abkürzung mit optionalem Label:
 <AbbrPreview
 	visibleProperties={['_label', '_slot']}
 	initialProps={{ _label: "zum Beispiel", _slot: "z. B." }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## Barrierefreiheit
@@ -70,7 +69,7 @@ Die Komponente eignet sich zur Kennzeichnung von Abkürzungen innerhalb von Flie
 
 ### Playground
 
-<AbbrPreview codeCollapsable />
+<AbbrPreview />
 
 ### Funktionalitäten (mit Code)
 
@@ -81,8 +80,7 @@ Abkürzung als reines Text-Element ohne zusätzliche Erklärung:
 <AbbrPreview
 	visibleProperties={['_slot']}
 	initialProps={{ _slot: "z. B." }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Abkürzung mit Label
@@ -92,8 +90,7 @@ Abkürzung mit ausgeschriebener Erklärung über das `_label`-Attribut:
 <AbbrPreview
 	visibleProperties={['_label', '_slot']}
 	initialProps={{ _label: "zum Beispiel", _slot: "z. B." }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## API

docs/30-components/accordion.mdx

@@ -21,7 +21,7 @@ import BetaDocsBanner from '@site/src/components/BetaDocsBanner';
 
 Darstellung der Komponente ohne optional gesetzte Felder. Code kann eingeblendet werden.
 
-<AccordionMultiplePreview codeCollapsable visibleProperties={[]} />
+<AccordionMultiplePreview visibleProperties={[]} />
 
 ## Barrierefreiheit
 
@@ -128,7 +128,6 @@ Wenn ein Inhalt voraussichtlich direkt benötigt wird oder dies fachlich sinnvol
 			'Das Frühjahr bringt den Übergang vom Winter zum Sommer. Die Temperaturen steigen langsam, die Tage werden länger, und die Natur erwacht aus dem Winterschlaf: Pflanzen beginnen zu blühen, Bäume treiben neue Knospen, und viele Tierarten aktivieren ihre Fortpflanzungszyklen. Typisch sind wechselhaftes Wetter mit warmen sonnigen Phasen und kühleren Regentagen.',
 		_label: 'Der Frühling',
 	}}
-	codeCollapsable
 />
 
 ### Funktionalitäten (mit Code)
@@ -145,7 +144,6 @@ Die sichtbare Überschrift wird über `_label` gesetzt. Der Inhaltsbereich wird
 			'Der Sommer ist die wärmste Jahreszeit mit längsten Tagen und kürzesten Nächten. Die Sonne steht höher am Himmel, was zu intensiverer Einstrahlung führt. Temperaturen erreichen ihre Höchstwerte, Niederschläge treten oft als kurze Gewitter statt als langanhaltender Regen auf. Es ist die Hauptsaison für Vegetation und landwirtschaftliches Wachstum.',
 		_label: 'Der Sommer',
 	}}
-	codeCollapsable
 />
 
 #### Überschriftenstruktur
@@ -160,7 +158,6 @@ Die Überschriftenebene wird über `_level` gesteuert.
 		_slot:
 			'Im Herbst nimmt die Tageslänge deutlich ab, die Temperaturen fallen allmählich. Laubbäume verlieren ihr grünes Blattwerk durch die verkürzte Photosyntheseperiode, was zu charakteristischen Braun- und Gelbtönen führt. Die Erntezeit für viele Kulturpflanzen liegt in dieser Jahreszeit. Nebel und spätere Sonnenaufgänge werden häufiger.',
 	}}
-	codeCollapsable
 />
 
 #### Zustandssteuerung
@@ -175,7 +172,6 @@ Das initiale Öffnen erfolgt über `_open`. Für den nicht interaktiven Zustand
 		_slot:
 			'Die kalte Jahreszeit mit den kürzesten Tagen und längsten Nächten. Die niedrige Sonnenposition sorgt für geringe Einstrahlungsintensität. Temperaturen fallen unter den Gefrierpunkt, was in vielen Regionen Schnee und Eis ermöglicht. Pflanzen ruhen, viele Tiere halten Winterruhe oder migrieren. Die natürliche Lichtverfügbarkeit ist am geringsten.',
 	}}
-	codeCollapsable
 />
 
 #### Event-Anbindung

docs/30-components/alert.mdx

@@ -25,8 +25,7 @@ Standard-Alert mit Typ, Variante und Inhalt:
 <AlertPreview
 	visibleProperties={['_label', '_type', '_variant', '_hasCloser', '_slot']}
 	initialProps={{ _label: 'Hinweis', _type: 'info', _variant: 'msg' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## Barrierefreiheit
@@ -63,7 +62,7 @@ Standard-Alert mit Typ, Variante und Inhalt:
 
 ### Playground
 
-<AlertPreview codeCollapsable />
+<AlertPreview />
 
 ### Funktionalitäten (mit Code)
 
@@ -74,8 +73,7 @@ Der Typ des Alert wird über das Attribut `_type` festgelegt und bestimmt die se
 <AlertPreview
 	visibleProperties={['_type']}
 	initialProps={{ _label: 'Hinweis', _type: 'info' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 | Typ       | Bedeutung                                          |
@@ -93,8 +91,7 @@ Der Typ des Alert wird über das Attribut `_type` festgelegt und bestimmt die se
 <AlertPreview
 	visibleProperties={['_variant']}
 	initialProps={{ _label: 'Hinweis', _type: 'info', _variant: 'msg' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 | Variante | Beschreibung                                                                        |
@@ -109,8 +106,7 @@ Die Überschrift wird über `_label` festgelegt, die semantische Ebene über `_l
 <AlertPreview
 	visibleProperties={['_label', '_level']}
 	initialProps={{ _label: 'Überschrift', _type: 'info', _level: 3 }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Inhalt des Alert
@@ -120,8 +116,7 @@ Der Inhalt des Alert wird als Slot-Inhalt übergeben und kann beliebigen HTML-Co
 <AlertPreview
 	visibleProperties={['_slot']}
 	initialProps={{ _label: 'Hinweis', _type: 'info' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Schließen-Funktion
@@ -131,8 +126,7 @@ Mit dem Attribut `_has-closer` wird ein Schließen-Button eingeblendet.
 <AlertPreview
 	visibleProperties={['_hasCloser']}
 	initialProps={{ _label: 'Schließbarer Alert', _type: 'info', _hasCloser: true }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Screenreader-Benachrichtigungen (`_alert`)
@@ -142,8 +136,7 @@ Das Attribut `_alert` aktiviert `role="alert"` bzw. `aria-live="assertive"`, sod
 <AlertPreview
 	visibleProperties={['_alert']}
 	initialProps={{ _label: 'Statusmeldung', _type: 'info', _alert: true }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Events

docs/30-components/avatar.mdx

@@ -24,7 +24,6 @@ Darstellung der Komponente in der Standard-Ansicht. Code kann eingeblendet werde
 <AvatarPreview
 	visibleProperties={[]}
 	initialProps={{ _label: 'Max Mustermann' }}
-	codeCollapsable
 />
 
 ## Barrierefreiheit
@@ -65,7 +64,6 @@ Testen Sie die verschiedenen Eigenschaften der Avatar-Komponente:
 <AvatarPreview
 	visibleProperties={['_label', '_src', '_color']}
 	initialProps={{ _label: 'Max Mustermann', _color: '#5A5FEE' }}
-	codeCollapsable
 />
 
 ### Funktionalitäten
@@ -77,8 +75,7 @@ Darstellung der Komponente ohne Bild – es werden automatisch die Initialen aus
 <AvatarPreview
 	visibleProperties={['_label']}
 	initialProps={{ _label: 'Anna Schmidt' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Avatar mit Bild
@@ -91,8 +88,7 @@ Darstellung eines Avatar-Bildes über das Attribut `_src`:
 		_label: 'Bei dem gleich gezeigten Bild handelt es sich um einen Standard-Avatar aus Font Awesome', 
 		_src: 'https://gravatar.com/avatar/12345?d=mp&s=256' 
 	}}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Farbige Initialen
@@ -102,8 +98,7 @@ Verwendung des Attributs `_color` zur farblichen Unterscheidung von Benutzern. D
 <AvatarPreview
 	visibleProperties={['_color']}
 	initialProps={{ _label: 'Peter Meyer', _color: '#FF6B6B' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Avatar mit separaten Farben
@@ -116,8 +111,7 @@ Präzise Kontrolle über Hintergrund- und Vordergrundfarbe:
 		_label: 'Julia Wolf',
 		_color: { backgroundColor: '#4ECDC4', foregroundColor: '#FFFFFF' }
 	}}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## API

docs/30-components/badge.mdx

@@ -23,8 +23,7 @@ Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon:
 <BadgePreview
 	visibleProperties={[]}
 	initialProps={{ _label: 'Badge', _color: '#0c8703', _icons: 'kolicon-check' }}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## Barrierefreiheit
@@ -65,7 +64,6 @@ Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon:
 
 <BadgePreview
 	visibleProperties={['_label', '_color', '_icons', '_smartButton']}
-	codeCollapsable
 />
 
 ### Funktionalitäten (mit Code)
@@ -77,7 +75,6 @@ Das Label ist erforderlich und definiert den Text, der im Badge angezeigt wird.
 <BadgePreview
 	visibleProperties={['_label']}
 	initialProps={{ _label: 'Beispieltext', _color: '#0c8703' }}
-	codeCollapsable
 />
 
 | Property | Beschreibung |
@@ -91,7 +88,6 @@ Die Hintergrundfarbe wird über das Attribut `_color` definiert. Die Textfarbe w
 <BadgePreview
 	visibleProperties={['_color']}
 	initialProps={{ _label: 'Helles Badge', _color: '#b7e4b4' }}
-	codeCollapsable
 />
 
 | Property | Beschreibung | Default |
@@ -105,7 +101,6 @@ Icons können als String (Klassenname) oder als komplexes Icon-Objekt mit horizo
 <BadgePreview
 	visibleProperties={['_icons']}
 	initialProps={{ _label: 'Mit Icon', _color: '#0c8703', _icons: 'kolicon-house' }}
-	codeCollapsable
 />
 
 | Property | Beschreibung |
@@ -119,7 +114,6 @@ Das Badge kann mit einem Smart-Button verknüpft werden, der eine Aktion auslös
 <BadgePreview
 	visibleProperties={['_smartButton']}
 	initialProps={{ _label: 'Mit Button', _color: '#0c8703' }}
-	codeCollapsable
 />
 
 | Property | Beschreibung |

docs/30-components/breadcrumb.mdx

@@ -22,7 +22,6 @@ import BetaDocsBanner from '@site/src/components/BetaDocsBanner';
 Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren Links:
 
 <BreadcrumbPreview
-	codeCollapsable
 	visibleProperties={[]}
 	initialProps={{}}
 />
@@ -72,9 +71,7 @@ Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren
 
 ### Playground
 
-<BreadcrumbPreview
-	codeCollapsable
-/>
+<BreadcrumbPreview />
 
 ### Funktionalitäten (mit Code)
 
@@ -83,8 +80,7 @@ Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren
 Die Breadcrumb-Navigation wird über das Attribut `_links` als Array von Link-Objekten konfiguriert. Das letzte Element wird automatisch als aktuelle Seite (ohne Link) behandelt.
 
 <BreadcrumbPreview
-  codeCollapsable
-  codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 **Link-Eigenschaften:**
@@ -103,7 +99,6 @@ Icons können optional zu jedem Element hinzugefügt werden. Eine häufige Verwe
 <BreadcrumbPreview
 	visibleProperties={['_label', '_links']}
 	initialProps={{}}
-	codeCollapsable
 />
 
 ### Events

docs/30-components/button-link.mdx

@@ -23,8 +23,7 @@ Ein Button, der wie ein Link aussieht und sich wie ein Link verhält:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Schalter sieht wie ein Link aus' }}
 	visibleProperties={[]}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ## Barrierefreiheit
@@ -66,7 +65,7 @@ Die ButtonLink-Komponente eignet sich für Fälle, in denen der semantische Aufb
 
 ### Playground
 
-<ButtonLinkPreview codeCollapsable />
+<ButtonLinkPreview />
 
 ### Funktionalitäten (mit Code)
 
@@ -77,8 +76,7 @@ Ein einfacher ButtonLink mit grundlegenden Eigenschaften:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Funktioniert wie ein Button' }}
 	visibleProperties={['_label']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Mit Icons
@@ -88,8 +86,7 @@ ButtonLink mit Icons vor und/oder nach dem Label:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Mit Icon', _icons: 'fa-solid fa-heart' }}
 	visibleProperties={['_label', '_icons']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Mit verstecktem Label
@@ -99,8 +96,7 @@ Das Label wird versteckt und nur als Tooltip angezeigt:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Tooltip', _hideLabel: true }}
 	visibleProperties={['_hideLabel']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Deaktiviert
@@ -110,8 +106,7 @@ Ein deaktivierter ButtonLink reagiert nicht auf Interaktionen:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Deaktiviert', _disabled: true }}
 	visibleProperties={['_disabled']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### Mit Tastaturkürzel
@@ -121,8 +116,7 @@ Ein visueller Hinweis auf ein verfügbares Tastaturkürzel:
 <ButtonLinkPreview
 	initialProps={{ _label: 'Mit Shortkey', _shortKey: 's' }}
 	visibleProperties={['_shortKey']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 #### ARIA-Attribute
@@ -136,8 +130,7 @@ ButtonLink mit ARIA-Attributen für erweiterte Semantik:
 		_ariaControls: 'menu-content',
 	}}
 	visibleProperties={['_ariaControls', '_ariaExpanded', '_ariaSelected']}
-	codeCollapsable
-	codeCollapsed
+	sourceCodeDetailsCollapsed
 />
 
 ### Events