@solid-design-system/components 6.28.0 → 7.0.0-next.1

package/dist/solid-components.js

@@ -4,202 +4,202 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTeaser
-} from "./chunks/chunk.MIDB4P4Z.js";
+} from "./chunks/chunk.TXVRZXUB.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.HFD4GVQH.js";
+} from "./chunks/chunk.QFAJOIOI.js";
 import {
   SdTextarea
-} from "./chunks/chunk.EWBPFI7O.js";
+} from "./chunks/chunk.GVV65UCW.js";
 import {
   SdThemeListener
-} from "./chunks/chunk.2QLV3FGQ.js";
+} from "./chunks/chunk.LB3F2QDN.js";
 import {
   SdVideo
-} from "./chunks/chunk.6LUXWBVQ.js";
+} from "./chunks/chunk.33BZJRJB.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.HFUPD442.js";
+} from "./chunks/chunk.I5B5QE4Q.js";
 import {
   SdSpinner
-} from "./chunks/chunk.FO2XDPBY.js";
+} from "./chunks/chunk.HNDYMCBH.js";
 import {
   SdStep
-} from "./chunks/chunk.LDEYZ5WH.js";
+} from "./chunks/chunk.EUECKG57.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.ISDCFN2T.js";
+} from "./chunks/chunk.5EDUJ62Z.js";
 import {
   SdSwitch
-} from "./chunks/chunk.KNNHUZRK.js";
+} from "./chunks/chunk.W2FPAWSD.js";
 import {
   SdTab
-} from "./chunks/chunk.5SP53TRC.js";
+} from "./chunks/chunk.LDRHLY66.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.3YRBYYHB.js";
+} from "./chunks/chunk.QELO6X62.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.7DSVL7JH.js";
+} from "./chunks/chunk.INUHEU2V.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.GURHKBOS.js";
+} from "./chunks/chunk.LFOMFT6A.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.HSMX4JWE.js";
+} from "./chunks/chunk.OMWYWBPW.js";
 import {
   SdRadio
-} from "./chunks/chunk.LVUKQ7ZS.js";
+} from "./chunks/chunk.YTITLVWX.js";
 import {
   SdRange
-} from "./chunks/chunk.WALY6H2S.js";
+} from "./chunks/chunk.UQAZ7Y4O.js";
 import {
   SdTooltip
-} from "./chunks/chunk.DPOFFN22.js";
+} from "./chunks/chunk.XQA7WCIY.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.DFSINDVF.js";
+} from "./chunks/chunk.LTNNVXKN.js";
 import {
   SdScrollable
-} from "./chunks/chunk.43WIFSAV.js";
+} from "./chunks/chunk.OGTWG7PX.js";
 import {
   SdSelect
-} from "./chunks/chunk.2GY5X74S.js";
+} from "./chunks/chunk.GESPTAQO.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.QH4PJIEK.js";
+} from "./chunks/chunk.3T4RF2D2.js";
 import {
   SdNotification
-} from "./chunks/chunk.ZCK2AJ6F.js";
+} from "./chunks/chunk.2PSP6N2B.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.ON7JW7DZ.js";
+} from "./chunks/chunk.RAT2NJIO.js";
 import {
   SdOption
-} from "./chunks/chunk.LIHFBMY3.js";
+} from "./chunks/chunk.WKBNTZYS.js";
 import {
   SdProgressBar
-} from "./chunks/chunk.PAGXROMQ.js";
+} from "./chunks/chunk.AN3L6KYA.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.GIYK2K7S.js";
+} from "./chunks/chunk.WEGQKE7P.js";
 import {
   SdInclude
-} from "./chunks/chunk.3AZV733X.js";
+} from "./chunks/chunk.LVPWOXKT.js";
 import {
   SdInput
-} from "./chunks/chunk.6VONS4GH.js";
+} from "./chunks/chunk.ENTIPHXZ.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.2JVBNRAE.js";
+} from "./chunks/chunk.L2IFANFY.js";
 import {
   SdMenu
-} from "./chunks/chunk.67RQILIX.js";
+} from "./chunks/chunk.AVB7EUPN.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.FZW355YU.js";
+} from "./chunks/chunk.5K6Y7HJU.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdHeader
-} from "./chunks/chunk.QWPTKRZY.js";
+} from "./chunks/chunk.YZ5DZPPN.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.32PMIHHH.js";
+} from "./chunks/chunk.4MGAXDM2.js";
 import "./chunks/chunk.A4LR62QO.js";
 import "./chunks/chunk.TJ2FFWLY.js";
 import {
   SdDialog
-} from "./chunks/chunk.4QQTPWQK.js";
+} from "./chunks/chunk.MU6BOIQP.js";
 import {
   SdDivider
-} from "./chunks/chunk.WC6QJGPY.js";
+} from "./chunks/chunk.NVTCRCR2.js";
 import {
   SdExpandable
-} from "./chunks/chunk.22QJOKRT.js";
+} from "./chunks/chunk.JCAECFX2.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.LMAZLSWN.js";
+} from "./chunks/chunk.KIY36UBP.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.ATPMJXDV.js";
+} from "./chunks/chunk.UAYS6YUK.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.3UAYIX4K.js";
+} from "./chunks/chunk.VMQ6E5XQ.js";
 import {
   SdCombobox
-} from "./chunks/chunk.Z4VNO3XB.js";
+} from "./chunks/chunk.SRSERHD5.js";
 import {
   SdTag
-} from "./chunks/chunk.P7WF3BP4.js";
+} from "./chunks/chunk.PH4JLH76.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.U4ES752F.js";
+} from "./chunks/chunk.2B76SHER.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.LFY6FLC7.js";
+} from "./chunks/chunk.B3GXJSVQ.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.H6AYJU2Z.js";
+} from "./chunks/chunk.DLDMILPJ.js";
 import {
   SdDropdown
-} from "./chunks/chunk.NF6TENBG.js";
+} from "./chunks/chunk.YFTT3BJS.js";
 import {
   SdPopup
-} from "./chunks/chunk.E32D3Z6I.js";
+} from "./chunks/chunk.YHQDUFIA.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.FDOJX6W4.js";
+} from "./chunks/chunk.KTAV32B3.js";
 import {
   SdLink
-} from "./chunks/chunk.YVNA2ZV6.js";
-import "./chunks/chunk.76H4PKGT.js";
+} from "./chunks/chunk.MKQMOE4O.js";
+import "./chunks/chunk.K6EQX5H6.js";
 import {
   SdCarousel
-} from "./chunks/chunk.RIMF3V3U.js";
+} from "./chunks/chunk.DZT4P3QO.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.6RE6UZ72.js";
 import "./chunks/chunk.UVI5HHLF.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.6QITMMHT.js";
+} from "./chunks/chunk.SBBWYGUE.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.TVVA3SEO.js";
+} from "./chunks/chunk.UCQEVTLR.js";
 import {
   SdAccordion
-} from "./chunks/chunk.RJD5JWEE.js";
+} from "./chunks/chunk.7MA7NTM5.js";
 import {
   SdAnimation
-} from "./chunks/chunk.3JGLYKUT.js";
+} from "./chunks/chunk.AI65BHXH.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.EQKXEQYI.js";
+} from "./chunks/chunk.2QG5VVWH.js";
 import {
   SdDrawer
-} from "./chunks/chunk.VMOVHC54.js";
+} from "./chunks/chunk.MGLNCJH4.js";
 import "./chunks/chunk.SF6AUNJF.js";
 import "./chunks/chunk.EDMG7C5H.js";
 import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.XAFXRA3O.js";
+} from "./chunks/chunk.4BAU2OM4.js";
 import {
   SdLoader
-} from "./chunks/chunk.4CYE55LF.js";
+} from "./chunks/chunk.J4MQWCIP.js";
 import "./chunks/chunk.C3WIBDGG.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.TA4UQZUE.js";
+} from "./chunks/chunk.GWNXDEYS.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -216,7 +216,7 @@ import {
 import "./chunks/chunk.BT6SAX2H.js";
 import "./chunks/chunk.X4IYFUX6.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.PGR6OZIM.js";
+import "./chunks/chunk.LB37DTSJ.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.EAJ3CM6N.js";
-import "../chunks/chunk.E32D3Z6I.js";
-import "../chunks/chunk.PGR6OZIM.js";
+import "../chunks/chunk.YHQDUFIA.js";
+import "../chunks/chunk.LB37DTSJ.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/vscode.html-custom-data.json

@@ -479,6 +479,33 @@
         }
       ]
     },
+    {
+      "name": "sd-button-group",
+      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - One or more `<sd-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-button-group--docs"
+        }
+      ]
+    },
     {
       "name": "sd-carousel",
       "description": "Used to display an arbitrary number of content slides along a horizontal axis.\n---\n\n\n### **Events:**\n - **sd-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **pause()** - Pause the autoplay.\n- **resume()** - Resume the autoplay\n- **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sd-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sd-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-start** - Optional start icon to use instead of the default. Works best with `<sd-icon>`.\n- **autoplay-pause** - Optional pause icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n- **--sd-carousel__pager-dot-border-width** - The border width of the pager dots in the carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-background** - The background for the pager dots in the inverted carousel when active. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted--hovered-background** - The background for the pager dots in the inverted carousel when hovered. _(default: undefined)_\n- **--sd-carousel__pager-dot--inverted-border** - The border color for the pager dots in the inverted carousel. _(default: undefined)_\n- **--sd-carousel__pager-dot-background** - The background for the pager dots when active. _(default: undefined)_\n- **--sd-carousel--active-color-border** - The border color for the active pagination item. _(default: undefined)_\n- **--sd-carousel--active--inverted-color-border** - The border color for the active pagination item in inverted carousel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **controls** - A wrapper for the navigation and autoplay controller buttons.\n- **pagination-dot** - The pagination indicator in dot format.\n- **pagination-number** - The pagination indicator in number format.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.\n- **autoplay-controls** - A wrapper for pause/start button.",
@@ -541,33 +568,6 @@
         }
       ]
     },
-    {
-      "name": "sd-button-group",
-      "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - One or more `<sd-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-button-group--docs"
-        }
-      ]
-    },
     {
       "name": "sd-carousel-item",
       "description": "Used within `sd-carousel` to represent a slide.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The carousel item's content.",
@@ -3238,6 +3238,46 @@
         }
       ]
     },
+    {
+      "name": "sd-teaser-media",
+      "description": "Used as a flexible container with image that groups related items and links them to further content.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--white--hover-color-background** - The background color for white teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--white-color-background** - The default background color for white teaser media. _(default: undefined)_\n- **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media-color-icon-fill** - The default color for the icon in the toggle button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "Variant of the teaser",
+          "values": [
+            { "name": "" },
+            { "name": "white" },
+            { "name": "neutral-100" },
+            { "name": "primary" },
+            { "name": "primary-100" },
+            { "name": "gradient-light" },
+            { "name": "gradient-dark" }
+          ]
+        },
+        {
+          "name": "open",
+          "description": "Controls whether the expandable content is visible",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-teaser-media--docs"
+        }
+      ]
+    },
     {
       "name": "sd-textarea",
       "description": "Used to allow users to input and edit multiple lines of text.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The floating label text color. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **border** - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.\n- **textarea** - The internal `<textarea>` control.",
@@ -3397,46 +3437,6 @@
         }
       ]
     },
-    {
-      "name": "sd-teaser-media",
-      "description": "Used as a flexible container with image that groups related items and links them to further content.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--white--hover-color-background** - The background color for white teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--white-color-background** - The default background color for white teaser media. _(default: undefined)_\n- **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media-color-icon-fill** - The default color for the icon in the toggle button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "Variant of the teaser",
-          "values": [
-            { "name": "" },
-            { "name": "white" },
-            { "name": "neutral-100" },
-            { "name": "primary" },
-            { "name": "primary-100" },
-            { "name": "gradient-light" },
-            { "name": "gradient-dark" }
-          ]
-        },
-        {
-          "name": "open",
-          "description": "Controls whether the expandable content is visible",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-teaser-media--docs"
-        }
-      ]
-    },
     {
       "name": "sd-theme-listener",
       "description": "Theme listener is a utility that listens to theme changes and triggers an event.\n---\n\n\n### **Events:**\n - **sd-theme-change** - Emitted when the sd-theme changes.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",