@solid-design-system/components 4.0.9 → 4.0.10

package/dist/chunks/{chunk.BJIZPRT4.js → chunk.4SBQOWLU.js}

@@ -54,6 +54,7 @@ var SdCheckboxGroup = class extends SolidElement {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : hasLabelSlot;
     const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
+    const hasTooltip = this.hasSlotController.test("tooltip");
     return html`<fieldset part="form-control" class="${cx(
       "border-0 p-0 m-0",
       {
@@ -62,7 +63,7 @@ var SdCheckboxGroup = class extends SolidElement {
         md: "text-base",
         lg: "text-base"
       }[this.size]
-    )}" role="group" aria-labelledby="label"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+    )}" role="group" aria-labelledby="label">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${hasTooltip ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       {
         vertical: "flex flex-col",
         horizontal: "flex flex-row"

package/dist/chunks/{chunk.L32THKSR.js → chunk.5FOKRIWL.js}

@@ -328,11 +328,13 @@ var SdInput = class extends SolidElement {
       helpText: this.hasSlotController.test("help-text"),
       description: this.hasSlotController.test("description"),
       left: this.hasSlotController.test("left"),
-      right: this.hasSlotController.test("right")
+      right: this.hasSlotController.test("right"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
+    const hasTooltip = !!slots["tooltip"];
     const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const borderColor = {
@@ -352,7 +354,7 @@ var SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none")}"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="relative w-full"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
+    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="relative w-full"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-all",
       // Vertical Padding
       this.size === "lg" ? "py-2" : "py-1",

package/dist/chunks/{chunk.UTSM3BM3.js → chunk.D3I3AZEX.js}

@@ -244,6 +244,7 @@ var SdRadioGroup = class extends SolidElement {
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasTooltipSlot = this.hasSlotController.test("tooltip");
     const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
     return html`<fieldset part="form-control" class="${cx(
       "border-0 p-0 m-0 flex flex-col",
@@ -253,7 +254,11 @@ var SdRadioGroup = class extends SolidElement {
         md: "text-base",
         lg: "text-base"
       }[this.size]
-    )}" role="radiogroup" aria-describedby="invalid-message"><div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${cx("p-0 leading-normal text-black text-left", !hasLabel && "hidden", this.boldLabel && "font-bold")}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></legend><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+    )}" role="radiogroup" aria-describedby="invalid-message">${hasLabelSlot || hasTooltipSlot ? html`<div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${cx(
+      "p-0 leading-normal text-black text-left",
+      !hasLabel && "hidden",
+      this.boldLabel && "font-bold"
+    )}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></legend>${hasTooltipSlot ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       "flex",
       {
         vertical: "flex-col",

package/dist/chunks/{chunk.Y7254YJM.js → chunk.RSPK767T.js}

@@ -166,10 +166,12 @@ var SdTextarea = class extends SolidElement {
   render() {
     const slots = {
       label: this.hasSlotController.test("label"),
-      helpText: this.hasSlotController.test("help-text")
+      helpText: this.hasSlotController.test("help-text"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
+    const hasTooltip = !!slots["tooltip"];
     const textareaState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const iconSizeMarginLeft = {
@@ -177,7 +179,7 @@ var SdTextarea = class extends SolidElement {
       md: "text-lg ml-2",
       lg: "text-xl ml-2"
     }[this.size];
-    return html`<div part="form-control" class="flex flex-col h-full text-left"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
+    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default",
       {
         disabled: "border-neutral-500",

package/dist/chunks/{chunk.XQNY7RZD.js → chunk.USMGTQQG.js}

@@ -571,11 +571,13 @@ var SdSelect = class extends SolidElement {
       label: this.hasSlotController.test("label"),
       clearIcon: this.hasSlotController.test("clear-icon"),
       expandIcon: this.hasSlotController.test("expand-icon"),
-      helpText: this.hasSlotController.test("help-text")
+      helpText: this.hasSlotController.test("help-text"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.disabled;
+    const hasTooltip = !!slots["tooltip"];
     const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const cursorStyles = this.disabled ? "cursor-not-allowed" : "cursor-pointer";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -589,7 +591,7 @@ var SdSelect = class extends SolidElement {
       cursorStyles,
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
-    )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span><div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
+    )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default",
       this.hasHover && "bg-neutral-200",
       {

package/dist/components/checkbox-group/checkbox-group.js

@@ -1,6 +1,6 @@
 import {
   SdCheckboxGroup
-} from "../../chunks/chunk.BJIZPRT4.js";
+} from "../../chunks/chunk.4SBQOWLU.js";
 import "../../chunks/chunk.X2PI2F35.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";

package/dist/components/input/input.js

@@ -1,6 +1,6 @@
 import {
   SdInput
-} from "../../chunks/chunk.L32THKSR.js";
+} from "../../chunks/chunk.5FOKRIWL.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2PI2F35.js";

package/dist/components/radio-group/radio-group.js

@@ -1,6 +1,6 @@
 import {
   SdRadioGroup
-} from "../../chunks/chunk.UTSM3BM3.js";
+} from "../../chunks/chunk.D3I3AZEX.js";
 import "../../chunks/chunk.A625ONY2.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.H5BDO4H5.js";

package/dist/components/select/select.js

@@ -1,6 +1,6 @@
 import {
   SdSelect
-} from "../../chunks/chunk.XQNY7RZD.js";
+} from "../../chunks/chunk.USMGTQQG.js";
 import "../../chunks/chunk.KH4M6HPE.js";
 import "../../chunks/chunk.VTUCPGYW.js";
 import "../../chunks/chunk.GI7VDIWX.js";

package/dist/components/textarea/textarea.js

@@ -1,6 +1,6 @@
 import {
   SdTextarea
-} from "../../chunks/chunk.Y7254YJM.js";
+} from "../../chunks/chunk.RSPK767T.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2OQMWGY.js";

package/dist/custom-elements.json

@@ -16708,7 +16708,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.0.9",
+    "version": "4.0.10",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -10,7 +10,7 @@ import {
 } from "./chunks/chunk.674S2Z6M.js";
 import {
   SdTextarea
-} from "./chunks/chunk.Y7254YJM.js";
+} from "./chunks/chunk.RSPK767T.js";
 import {
   SdTooltip
 } from "./chunks/chunk.K3JCC7KV.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunks/chunk.2FXKQI26.js";
 import {
   SdSelect
-} from "./chunks/chunk.XQNY7RZD.js";
+} from "./chunks/chunk.USMGTQQG.js";
 import {
   SdStep
 } from "./chunks/chunk.DU3O42BH.js";
@@ -52,7 +52,7 @@ import {
 } from "./chunks/chunk.OR7JTZLE.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.UTSM3BM3.js";
+} from "./chunks/chunk.D3I3AZEX.js";
 import {
   SdRadio
 } from "./chunks/chunk.A625ONY2.js";
@@ -64,7 +64,7 @@ import {
 } from "./chunks/chunk.JZB2D4IZ.js";
 import {
   SdInput
-} from "./chunks/chunk.L32THKSR.js";
+} from "./chunks/chunk.5FOKRIWL.js";
 import {
   SdLink
 } from "./chunks/chunk.OBWOMZNU.js";
@@ -94,7 +94,7 @@ import {
 } from "./chunks/chunk.A5S7GZJI.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.BJIZPRT4.js";
+} from "./chunks/chunk.4SBQOWLU.js";
 import {
   SdCombobox
 } from "./chunks/chunk.4MHQ63NW.js";

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

@@ -2638,6 +2638,102 @@
         }
       ]
     },
+    {
+      "name": "sd-tooltip",
+      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "Sets the size of the default trigger icon.",
+          "values": [{ "name": "lg" }, { "name": "sm" }]
+        },
+        {
+          "name": "content",
+          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+          "values": [
+            { "name": "top" },
+            { "name": "top-start" },
+            { "name": "top-end" },
+            { "name": "bottom" },
+            { "name": "bottom-start" },
+            { "name": "bottom-end" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tooltip so it won't show when triggered.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+          "values": []
+        },
+        {
+          "name": "trigger",
+          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+          "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+          "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-tooltip--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-video",
+      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
+      "attributes": [
+        {
+          "name": "playing",
+          "description": "Set to `true` to hide the play icon.",
+          "values": []
+        },
+        {
+          "name": "isBelowBreakpoint",
+          "description": "Reactive property to trigger breakpoint re-renders.",
+          "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-video--docs"
+        }
+      ]
+    },
     {
       "name": "sd-textarea",
       "description": "Textareas collect data from the user and allow 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\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 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.",
@@ -2784,102 +2880,6 @@
           "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-textarea--docs"
         }
       ]
-    },
-    {
-      "name": "sd-tooltip",
-      "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "Sets the size of the default trigger icon.",
-          "values": [{ "name": "lg" }, { "name": "sm" }]
-        },
-        {
-          "name": "content",
-          "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-          "values": []
-        },
-        {
-          "name": "placement",
-          "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-          "values": [
-            { "name": "top" },
-            { "name": "top-start" },
-            { "name": "top-end" },
-            { "name": "bottom" },
-            { "name": "bottom-start" },
-            { "name": "bottom-end" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the tooltip so it won't show when triggered.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-          "values": []
-        },
-        {
-          "name": "trigger",
-          "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-          "values": []
-        },
-        {
-          "name": "hoist",
-          "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-          "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-tooltip--docs"
-        }
-      ]
-    },
-    {
-      "name": "sd-video",
-      "description": "Used to wrap external video elements (e. g. from Moving Image or bare <video>-Tags) and provide some basic styling for Union Investment.\n---\n\n\n### **Events:**\n - **sd-play** - Event emitted when clicking the `play-icon`. Listen for this event and use it to play the wrapped video.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n\n### **Slots:**\n - _default_ - The default slot used to pass a video player element.\n- **play-icon** - The video's play icon.\n- **poster** - Specifies an image to be shown before initial play of the wrapped video. Acts like the `poster` attribute on the native video tag.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **play-button** - The `<button>` element wrapper around the play-icon slot (full screen to field all click events).\n- **play-button-bg** - The `<div>` element wrapper around the play-button that defines the circular background.",
-      "attributes": [
-        {
-          "name": "playing",
-          "description": "Set to `true` to hide the play icon.",
-          "values": []
-        },
-        {
-          "name": "isBelowBreakpoint",
-          "description": "Reactive property to trigger breakpoint re-renders.",
-          "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-video--docs"
-        }
-      ]
     }
   ]
 }