@solid-design-system/components 4.6.8 → 4.6.10

package/dist/custom-elements.json

@@ -1167,7 +1167,9 @@
           "status": "stable",
           "since": "3.19.0",
           "dependencies": [
-            "sd-icon"
+            "sd-icon",
+            "sd-button",
+            "sd-drawer"
           ],
           "tagName": "sd-audio",
           "customElement": true
@@ -3913,15 +3915,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sd-icon': SdIcon, 'sd-popup': SdPopup, 'sd-tag': SdTag }"
-            },
             {
               "kind": "field",
               "name": "popup",
@@ -4640,7 +4633,8 @@
           "since": "3.23.0",
           "dependencies": [
             "sd-icon",
-            "sd-popup"
+            "sd-popup",
+            "sd-tag"
           ],
           "tagName": "sd-combobox",
           "customElement": true
@@ -6005,6 +5999,14 @@
               "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
               "fieldName": "stayOpenOnSelect"
             },
+            {
+              "name": "containingElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+              "fieldName": "containingElement"
+            },
             {
               "name": "distance",
               "type": {
@@ -9508,7 +9510,8 @@
           "status": "stable",
           "since": "1.15.0",
           "dependencies": [
-            "sd-divider"
+            "sd-divider",
+            "sd-icon"
           ],
           "tagName": "sd-navigation-item",
           "customElement": true
@@ -9821,7 +9824,8 @@
           "status": "stable",
           "since": "1.22.0",
           "dependencies": [
-            "sd-button"
+            "sd-button",
+            "sd-icon"
           ],
           "animations": [
             {
@@ -11177,7 +11181,8 @@
           "status": "stable",
           "since": "3.12.0",
           "dependencies": [
-            "sd-icon"
+            "sd-icon",
+            "sd-accordion"
           ],
           "tagName": "sd-quickfact",
           "customElement": true,
@@ -12486,6 +12491,9 @@
           "documentation": "https://solid.union-investment.com/[storybook-link]/scrollable",
           "status": "stable",
           "since": "1.0",
+          "dependencies": [
+            "sd-icon"
+          ],
           "tagName": "sd-scrollable",
           "customElement": true
         }
@@ -12608,15 +12616,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'sd-icon': SdIcon, 'sd-popup': SdPopup, 'sd-tag': SdTag }"
-            },
             {
               "kind": "field",
               "name": "localize",
@@ -14866,6 +14865,9 @@
           "documentation": "https://solid.union-investment.com/[storybook-link]/tab-group",
           "status": "stable",
           "since": "2.6.0",
+          "dependencies": [
+            "sd-tab"
+          ],
           "tagName": "sd-tab-group",
           "customElement": true
         }
@@ -15376,6 +15378,9 @@
           "documentation": "https://solid.union-investment.com/[storybook-link]/tag",
           "status": "stable",
           "since": "1.10",
+          "dependencies": [
+            "sd-icon"
+          ],
           "tagName": "sd-tag",
           "customElement": true
         }
@@ -16577,6 +16582,9 @@
           "summary": "Textareas collect data from the user and allow multiple lines of text.",
           "status": "stable",
           "since": "1.31.0",
+          "dependencies": [
+            "sd-icon"
+          ],
           "tagName": "sd-textarea",
           "customElement": true
         }
@@ -16922,7 +16930,8 @@
           "status": "stable",
           "since": "1.23.0",
           "dependencies": [
-            "sd-popup"
+            "sd-popup",
+            "sd-icon"
           ],
           "animations": [
             {
@@ -17159,7 +17168,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.6.8",
+    "version": "4.6.10",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/internal/deep-active-element.d.ts

@@ -0,0 +1 @@
+export declare function getDeepActiveElement(element?: Element | null): HTMLElement | null;

package/dist/internal/deep-active-element.js

@@ -0,0 +1,9 @@
+export function getDeepActiveElement(element = document.activeElement) {
+    if (element?.shadowRoot) {
+        const shadowActiveElement = element.shadowRoot.activeElement;
+        if (shadowActiveElement) {
+            return getDeepActiveElement(shadowActiveElement);
+        }
+    }
+    return element;
+}

package/dist/solid-components.js

@@ -13,22 +13,22 @@ import {
 } from "./chunks/chunk.CKKINYND.js";
 import {
   SdTextarea
-} from "./chunks/chunk.ISZXPWVC.js";
+} from "./chunks/chunk.A4FCES75.js";
 import {
   SdTooltip
-} from "./chunks/chunk.TGTE644Y.js";
+} from "./chunks/chunk.64DOW5GT.js";
 import {
   SdVideo
-} from "./chunks/chunk.J67NOH2J.js";
+} from "./chunks/chunk.DHGILA5W.js";
 import {
   SdScrollable
-} from "./chunks/chunk.3PS24RCT.js";
+} from "./chunks/chunk.6W262L3F.js";
 import {
   SdSelect
-} from "./chunks/chunk.WZWSOE2S.js";
+} from "./chunks/chunk.TPRFXGPO.js";
 import {
   SdStep
-} from "./chunks/chunk.IBTGZ65I.js";
+} from "./chunks/chunk.JVH7QA7V.js";
 import {
   SdStepGroup
 } from "./chunks/chunk.SWZ7YNPJ.js";
@@ -37,37 +37,40 @@ import {
 } from "./chunks/chunk.OJPVJA2S.js";
 import {
   SdTab
-} from "./chunks/chunk.LGYGD6SX.js";
+} from "./chunks/chunk.5NUL7XZO.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.PMZLGJKG.js";
+} from "./chunks/chunk.IFVMGJPH.js";
 import {
   SdNotification
-} from "./chunks/chunk.6WU4LF5Z.js";
+} from "./chunks/chunk.ZDKRIMUK.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.DIVJNSSG.js";
+} from "./chunks/chunk.7GIAGNCP.js";
 import {
   SdOption
-} from "./chunks/chunk.ILPAMBSC.js";
+} from "./chunks/chunk.ZEC66JCL.js";
+import {
+  SdPopup
+} from "./chunks/chunk.CTZX4JSW.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.PTZRO2RN.js";
+} from "./chunks/chunk.JH33Y6NI.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.I2AG6P7E.js";
+} from "./chunks/chunk.MWFRUUKN.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.PQNIAIWQ.js";
+} from "./chunks/chunk.TYYOT3JJ.js";
 import {
   SdRadio
-} from "./chunks/chunk.VSY4EUFN.js";
+} from "./chunks/chunk.BALWGQRW.js";
 import {
   SdInclude
 } from "./chunks/chunk.TZPIUQJ5.js";
 import {
   SdInput
-} from "./chunks/chunk.O3TREWCC.js";
+} from "./chunks/chunk.QWW7D2EF.js";
 import {
   SdLink
 } from "./chunks/chunk.JEZFJKCR.js";
@@ -76,13 +79,13 @@ import {
 } from "./chunks/chunk.YKFNELUH.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.ZGKB7QGK.js";
+} from "./chunks/chunk.KXI7DQT7.js";
 import {
   SdDropdown
-} from "./chunks/chunk.ML4MIKYQ.js";
+} from "./chunks/chunk.6KFGIUGJ.js";
 import {
   SdExpandable
-} from "./chunks/chunk.R24LPR7A.js";
+} from "./chunks/chunk.4FJAHWKR.js";
 import {
   SdFlipcard
 } from "./chunks/chunk.UHYIMTVH.js";
@@ -94,29 +97,26 @@ import {
 } from "./chunks/chunk.6VCNAVH4.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.WCLY7RG6.js";
+} from "./chunks/chunk.LY4LB7WU.js";
 import {
   SdCombobox
-} from "./chunks/chunk.V5TII4MB.js";
+} from "./chunks/chunk.XHFS2AN7.js";
 import {
   SdTag
-} from "./chunks/chunk.EJMQUF44.js";
-import {
-  SdPopup
-} from "./chunks/chunk.CTZX4JSW.js";
+} from "./chunks/chunk.CJL7IBJC.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.ZKKB55C5.js";
+} from "./chunks/chunk.IOAEHG5C.js";
 import {
   SdDivider
 } from "./chunks/chunk.EZKDJFKX.js";
 import {
   SdDrawer
-} from "./chunks/chunk.TDFVAXJF.js";
-import "./chunks/chunk.VBQLCQSN.js";
+} from "./chunks/chunk.G2S4374K.js";
+import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
@@ -125,17 +125,10 @@ import {
 import {
   SdBrandshape
 } from "./chunks/chunk.AOWIHO7B.js";
-import {
-  SdButton
-} from "./chunks/chunk.X54F4QNG.js";
-import {
-  SdSpinner
-} from "./chunks/chunk.LA5LTAEA.js";
-import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.HP5TMUCE.js";
 import {
   SdCarousel
-} from "./chunks/chunk.WFNCHKPE.js";
+} from "./chunks/chunk.OXCJX3LE.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import "./chunks/chunk.2LMWBUBT.js";
 import "./chunks/chunk.NOWCQZBS.js";
@@ -147,8 +140,25 @@ import {
 } from "./chunks/chunk.Q7SDLREI.js";
 import {
   SdAccordion
-} from "./chunks/chunk.T4ZCLZI2.js";
+} from "./chunks/chunk.35D7BDRG.js";
 import "./chunks/chunk.N4LHE3QK.js";
+import "./chunks/chunk.EY4JPJJQ.js";
+import "./chunks/chunk.B4BZKR24.js";
+import {
+  SdAnimation
+} from "./chunks/chunk.7T42VK6H.js";
+import "./chunks/chunk.TJOP7HQP.js";
+import {
+  SdAudio
+} from "./chunks/chunk.BO6G26AO.js";
+import {
+  SdButton
+} from "./chunks/chunk.ZE3C43AX.js";
+import {
+  SdSpinner
+} from "./chunks/chunk.LA5LTAEA.js";
+import "./chunks/chunk.KVKRZJS7.js";
+import "./chunks/chunk.YEZS5ZR2.js";
 import {
   SdIcon
 } from "./chunks/chunk.PS2S6VDP.js";
@@ -161,22 +171,12 @@ import "./chunks/chunk.RPB53XXV.js";
 import "./chunks/chunk.7VPFFNHR.js";
 import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.XS4QJO4N.js";
-import "./chunks/chunk.EY4JPJJQ.js";
-import "./chunks/chunk.B4BZKR24.js";
-import {
-  SdAnimation
-} from "./chunks/chunk.OX2URSR7.js";
-import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.TJOP7HQP.js";
-import {
-  SdAudio
-} from "./chunks/chunk.VMVFMQ3Q.js";
-import "./chunks/chunk.YEZS5ZR2.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.G4WRYNRZ.js";
 import "./chunks/chunk.L4ICI7XS.js";
+import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.TXYWAHFM.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

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

@@ -910,6 +910,11 @@
           "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
           "values": []
         },
+        {
+          "name": "containingElement",
+          "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+          "values": [{ "name": "HTMLElement" }]
+        },
         {
           "name": "distance",
           "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "4.6.8",
+  "version": "4.6.10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2146,6 +2146,11 @@
               "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "containingElement",
+              "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+              "value": { "type": "HTMLElement | undefined" }
+            },
             {
               "name": "distance",
               "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",

package/dist-versioned/_components/menu/menu.js

@@ -32,7 +32,7 @@ let SdMenu = class SdMenu extends SolidElement {
         if (item.type === 'checkbox') {
             item.checked = !item.checked;
         }
-        this.emit('sd-4-6-8-select', { detail: { item } });
+        this.emit('sd-4-6-10-select', { detail: { item } });
     }
     handleKeyDown(event) {
         if (event.key === 'Enter') {

package/dist-versioned/_components/menu/menu.styles.js

@@ -11,7 +11,7 @@ export default css `
     overscroll-behavior: none;
   }
 
-  ::slotted(sd-4-6-8-divider) {
+  ::slotted(sd-4-6-10-divider) {
     --spacing: var(--sd-spacing-x-small);
   }
 `;

package/dist-versioned/_components/menu-item/menu-item.js

@@ -74,7 +74,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <sd-4-6-8-icon name="check" library="system" aria-hidden="true"></sd-4-6-8-icon>
+          <sd-4-6-10-icon name="check" library="system" aria-hidden="true"></sd-4-6-10-icon>
         </span>
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
@@ -84,7 +84,7 @@ let SdMenuItem = class SdMenuItem extends SolidElement {
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
 
         <span class="menu-item__chevron">
-          <sd-4-6-8-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-8-icon>
+          <sd-4-6-10-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-6-10-icon>
         </span>
       </div>
     `;

package/dist-versioned/chunks/{chunk.T4ZCLZI2.js → chunk.35D7BDRG.js}

@@ -10,12 +10,12 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -142,7 +142,7 @@ var SdAccordion = class extends SolidElement {
     )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
       "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
       this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-8-icon library="system" name="chevron-down"></sd-4-6-8-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-8-icon library="system" name="chevron-down"></sd-4-6-8-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
+    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-4-6-10-icon library="system" name="chevron-down"></sd-4-6-10-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-4-6-10-icon library="system" name="chevron-down"></sd-4-6-10-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
   }
 };
 SdAccordion.styles = [
@@ -168,7 +168,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdAccordion.prototype, "handleOpenChange", 1);
 SdAccordion = __decorateClass([
-  customElement("sd-4-6-8-accordion")
+  customElement("sd-4-6-10-accordion")
 ], SdAccordion);
 setDefaultAnimation("accordion.show", {
   keyframes: [

package/dist-versioned/chunks/chunk.3ORZT34X.js

@@ -98,7 +98,7 @@ __decorateClass([
   state()
 ], SdTeaser.prototype, "_orientation", 2);
 SdTeaser = __decorateClass([
-  customElement("sd-4-6-8-teaser")
+  customElement("sd-4-6-10-teaser")
 ], SdTeaser);
 
 export {

package/dist-versioned/chunks/{chunk.R24LPR7A.js → chunk.4FJAHWKR.js}

@@ -1,12 +1,12 @@
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -72,7 +72,7 @@ var SdExpandable = class extends SolidElement {
       "sd-interactive sd-interactive--reset",
       this.inverted && "sd-interactive--inverted",
       !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-8-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-8-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-8-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-8-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
+    )}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-10-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-10-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-10-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-10-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
   }
   firstUpdated() {
     this.cloneContentToLightDOM();
@@ -109,7 +109,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdExpandable.prototype, "onOpenChange", 1);
 SdExpandable = __decorateClass([
-  customElement("sd-4-6-8-expandable")
+  customElement("sd-4-6-10-expandable")
 ], SdExpandable);
 
 export {

package/dist-versioned/chunks/{chunk.LGYGD6SX.js → chunk.5NUL7XZO.js}

@@ -1,9 +1,9 @@
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   HasSlotController
 } from "./chunk.YEZS5ZR2.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
   constructor() {
     super(...arguments);
     this.attrId = ++id;
-    this.componentId = `sd-4-6-8-tab-${this.attrId}`;
+    this.componentId = `sd-4-6-10-tab-${this.attrId}`;
     this.hasSlotController = new HasSlotController(this, "left");
     this.variant = "default";
     this.active = false;
@@ -102,7 +102,7 @@ __decorateClass([
   watch(["disabled", "visually-disabled"])
 ], SdTab.prototype, "handleDisabledChange", 1);
 SdTab = __decorateClass([
-  customElement("sd-4-6-8-tab")
+  customElement("sd-4-6-10-tab")
 ], SdTab);
 
 export {

package/dist-versioned/chunks/{chunk.TGTE644Y.js → chunk.64DOW5GT.js}

@@ -10,12 +10,12 @@ import {
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
-import {
-  watch
-} from "./chunk.X2OQMWGY.js";
 import {
   LocalizeController
 } from "./chunk.YKM42GKF.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
 import {
   SolidElement,
   customElement
@@ -192,15 +192,15 @@ var SdTooltip = class extends SolidElement {
   render() {
     const isStart = this.placement.endsWith("-start");
     const isEnd = this.placement.endsWith("-end");
-    return html`<sd-4-6-8-popup part="base" exportparts="
+    return html`<sd-4-6-10-popup part="base" exportparts="
           popup:base__popup,
           arrow:base__arrow
-        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button aria-describedby="tooltip" class="flex sd-interactive rounded-full" ?disabled="${this.disabled}"><sd-4-6-8-icon library="system" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-6-8-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-6-8-popup>`;
+        " class="${cx(this.open && "tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{ start: 2, end: -2, default: 0 }[isStart ? "start" : isEnd ? "end" : "default"] * (this.size === "sm" ? -1 : 1)}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" class="${cx(this.size === "lg" ? "text-xl" : "text-base")}"><button aria-describedby="tooltip" class="flex sd-interactive rounded-full" ?disabled="${this.disabled}"><sd-4-6-10-icon library="system" name="info-circle" label="Tooltip" class="${cx(this.disabled && "sd-interactive--disabled")}"></sd-4-6-10-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open ? "polite" : "off"}">${this.content}</slot></sd-4-6-10-popup>`;
   }
 };
 SdTooltip.styles = [
   ...SolidElement.styles,
-  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-6-8-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-6-8-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-8-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-8-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-6-8-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
+  css`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-4-6-10-popup{--arrow-color:rgb(var(--sd-color-primary,0 53 142)/1);--arrow-size:10px}sd-4-6-10-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-10-popup::part(arrow){--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-10-popup[placement^=top]::part(popup){transform-origin:bottom}sd-4-6-10-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){max-height:var(--auto-size-available-height)!important;max-width:var(--auto-size-available-width)!important;overflow:auto}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -209,7 +209,7 @@ __decorateClass([
   query("#tooltip")
 ], SdTooltip.prototype, "body", 2);
 __decorateClass([
-  query("sd-4-6-8-popup")
+  query("sd-4-6-10-popup")
 ], SdTooltip.prototype, "popup", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -242,7 +242,7 @@ __decorateClass([
   watch("disabled")
 ], SdTooltip.prototype, "handleDisabledChange", 1);
 SdTooltip = __decorateClass([
-  customElement("sd-4-6-8-tooltip")
+  customElement("sd-4-6-10-tooltip")
 ], SdTooltip);
 setDefaultAnimation("tooltip.show", {
   keyframes: [

package/dist-versioned/chunks/chunk.6DKXZWRN.js

@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
     var _a, _b;
     const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
     ul == null ? void 0 : ul.setAttribute("part", "listbox");
-    const popup = document.createElement("sd-4-6-8-popup");
+    const popup = document.createElement("sd-4-6-10-popup");
     popup.appendChild(ul);
     (_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
     popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
@@ -22,7 +22,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
       popup.anchor = sdInput;
       popup.sync = "width";
     }
-    const styles = css`sd-4-6-8-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-8-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-8-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-8-popup li{list-style-type:""}sd-4-6-8-popup li mark{background-color:transparent;font-weight:700}sd-4-6-8-popup li:not(:has(sd-4-6-8-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-8-popup li:not(:has(sd-4-6-8-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-8-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
+    const styles = css`sd-4-6-10-popup::part(popup){border-bottom-left-radius:var(--sd-border-radius-default,.25rem);border-bottom-right-radius:var(--sd-border-radius-default,.25rem);border-width:0 2px 2px;overflow-y:scroll;z-index:var(--sd-z-index-dropdown,900);--tw-border-opacity:1;border-color:rgb(var(--sd-color-primary,0 53 142)/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(var(--sd-color-white,255 255 255)/var(--tw-bg-opacity,1));padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-2,.5rem);--tw-shadow:var(--sd-shadow,0px 1px 3px 0px rgba(81,81,81,.75));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-4-6-10-popup li{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}sd-4-6-10-popup li:hover:not([disabled]){--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-100,246 246 246)/var(--tw-bg-opacity,1))}sd-4-6-10-popup li{list-style-type:""}sd-4-6-10-popup li mark{background-color:transparent;font-weight:700}sd-4-6-10-popup li:not(:has(sd-4-6-10-option)){cursor:pointer;font-size:var(--sd-font-size-base,1rem);padding:var(--sd-spacing-3,.75rem) var(--sd-spacing-4,1rem);--tw-text-opacity:1;color:rgb(var(--sd-color-black,24 24 24)/var(--tw-text-opacity,1))}sd-4-6-10-popup li:not(:has(sd-4-6-10-option)):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}sd-4-6-10-popup li[aria-selected=true]{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-neutral-200,233 233 233)/var(--tw-bg-opacity,1))}`;
     const styleSheet = new CSSStyleSheet();
     styleSheet.replaceSync(styles);
     sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
@@ -35,13 +35,13 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
   }
   input.addEventListener("open", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-8-popup")) == null ? void 0 : _b.setAttribute("active", "true");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-10-popup")) == null ? void 0 : _b.setAttribute("active", "true");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
   });
   input.addEventListener("close", () => {
     var _a, _b, _c, _d, _e, _f;
-    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-8-popup")) == null ? void 0 : _b.removeAttribute("active");
+    (_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-4-6-10-popup")) == null ? void 0 : _b.removeAttribute("active");
     (_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
     (_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
   });