@solid-design-system/components 5.13.13 → 5.13.14

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

@@ -12,7 +12,7 @@ import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.HIAKAB7R.js";
-import "../../chunks/chunk.IL7UPX5U.js";
+import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.VRFFOJAC.js";
 import "../../chunks/chunk.HQWAKJBV.js";

package/dist/components/tag/tag.js

@@ -10,7 +10,7 @@ import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.HIAKAB7R.js";
-import "../../chunks/chunk.IL7UPX5U.js";
+import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.VRFFOJAC.js";
 import "../../chunks/chunk.HQWAKJBV.js";

package/dist/components/textarea/textarea.js

@@ -1,8 +1,8 @@
 import {
   SdTextarea
-} from "../../chunks/chunk.G6IBNC3A.js";
+} from "../../chunks/chunk.HACIKBYQ.js";
 import "../../chunks/chunk.GI7VDIWX.js";
-import "../../chunks/chunk.KVKRZJS7.js";
+import "../../chunks/chunk.XCQC3F3H.js";
 import "../../chunks/chunk.IVMQWO2L.js";
 import "../../chunks/chunk.OZ6OXBJC.js";
 import "../../chunks/chunk.6JH5RYK5.js";

package/dist/components/tooltip/tooltip.js

@@ -14,7 +14,7 @@ import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.HIAKAB7R.js";
-import "../../chunks/chunk.IL7UPX5U.js";
+import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.VRFFOJAC.js";
 import "../../chunks/chunk.HQWAKJBV.js";

package/dist/components/video/video.js

@@ -11,7 +11,7 @@ import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";
 import "../../chunks/chunk.YKM42GKF.js";
 import "../../chunks/chunk.HIAKAB7R.js";
-import "../../chunks/chunk.IL7UPX5U.js";
+import "../../chunks/chunk.7VEM2IPR.js";
 import "../../chunks/chunk.X2OQMWGY.js";
 import "../../chunks/chunk.VRFFOJAC.js";
 import "../../chunks/chunk.HQWAKJBV.js";

package/dist/custom-elements.json

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

package/dist/internal/form.js

@@ -209,7 +209,7 @@ export class FormControlController {
     renderInvalidMessage() {
         return html `<div
       id="invalid-message"
-      class="text-error text-sm mt-2 text-left"
+      class="text-error text-sm mt-1 text-left"
       part="invalid-message"
       aria-live="polite"
       ?hidden=${!this.host.showInvalidStyle}

package/dist/solid-components.js

@@ -22,7 +22,7 @@ import {
 } from "./chunks/chunk.H2H7UKLB.js";
 import {
   SdTextarea
-} from "./chunks/chunk.G6IBNC3A.js";
+} from "./chunks/chunk.HACIKBYQ.js";
 import {
   SdTooltip
 } from "./chunks/chunk.GXUXYUOG.js";
@@ -34,7 +34,7 @@ import {
 } from "./chunks/chunk.7HM3D5ZB.js";
 import {
   SdSelect
-} from "./chunks/chunk.EMEGC6Q7.js";
+} from "./chunks/chunk.WWVC6AXD.js";
 import {
   SdSpinner
 } from "./chunks/chunk.GJM2UBD5.js";
@@ -46,7 +46,7 @@ import {
 } from "./chunks/chunk.X3POGM3M.js";
 import {
   SdSwitch
-} from "./chunks/chunk.ECTNQOHT.js";
+} from "./chunks/chunk.RFXTKJS4.js";
 import {
   SdOptgroup
 } from "./chunks/chunk.KUG4JFNY.js";
@@ -61,13 +61,13 @@ import {
 } from "./chunks/chunk.PJ5SMSQP.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.57HIVEJA.js";
+} from "./chunks/chunk.TYGDQCVE.js";
 import {
   SdRadio
 } from "./chunks/chunk.ENHM6QPI.js";
 import {
   SdRange
-} from "./chunks/chunk.IORKEN4C.js";
+} from "./chunks/chunk.QMFXX4AZ.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdLink
@@ -93,7 +93,7 @@ import {
 } from "./chunks/chunk.QBUQZLK4.js";
 import {
   SdInput
-} from "./chunks/chunk.AOZYVZSI.js";
+} from "./chunks/chunk.RRLHYTHG.js";
 import {
   SdDialog
 } from "./chunks/chunk.ULN3BADF.js";
@@ -114,13 +114,13 @@ import {
 } from "./chunks/chunk.HKATDXCW.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.KP2X7UDC.js";
+} from "./chunks/chunk.KTJM67BK.js";
 import {
   SdCheckboxGroup
 } from "./chunks/chunk.RBS2XRPG.js";
 import {
   SdCombobox
-} from "./chunks/chunk.BYBDNBDE.js";
+} from "./chunks/chunk.AYA2CQYC.js";
 import {
   SdTag
 } from "./chunks/chunk.XTNJGYI7.js";
@@ -175,11 +175,11 @@ import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.JGFET2UA.js";
+} from "./chunks/chunk.2ZUQDPS4.js";
 import {
   SdLoader
 } from "./chunks/chunk.ETFAVTWL.js";
-import "./chunks/chunk.KVKRZJS7.js";
+import "./chunks/chunk.XCQC3F3H.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
@@ -199,7 +199,7 @@ import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.HIAKAB7R.js";
-import "./chunks/chunk.IL7UPX5U.js";
+import "./chunks/chunk.7VEM2IPR.js";
 import "./chunks/chunk.X2OQMWGY.js";
 import "./chunks/chunk.VRFFOJAC.js";
 import "./chunks/chunk.HQWAKJBV.js";

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.IL7UPX5U.js";
+} from "../chunks/chunk.7VEM2IPR.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/utilities/form.js

@@ -1,6 +1,6 @@
 import {
   formCollections
-} from "../chunks/chunk.KVKRZJS7.js";
+} from "../chunks/chunk.XCQC3F3H.js";
 import "../chunks/chunk.S3NI7NKU.js";
 
 // src/utilities/form.ts

package/dist/utilities/localize.js

@@ -2,7 +2,7 @@ import {
   LocalizeController
 } from "../chunks/chunk.YKM42GKF.js";
 import "../chunks/chunk.HIAKAB7R.js";
-import "../chunks/chunk.IL7UPX5U.js";
+import "../chunks/chunk.7VEM2IPR.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController

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

@@ -1077,58 +1077,6 @@
         }
       ]
     },
-    {
-      "name": "sd-flipcard",
-      "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
-      "attributes": [
-        {
-          "name": "flip-direction",
-          "description": "Allows the flipcard to flip vertically or horizontally.",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        {
-          "name": "placement",
-          "description": "Determines the placement of the contents of the flipcard.",
-          "values": [{ "name": "top" }, { "name": "bottom" }]
-        },
-        {
-          "name": "front-variant",
-          "description": "Determines the variant of the front face of the flipcard.",
-          "values": [
-            { "name": "primary" },
-            { "name": "primary-100" },
-            { "name": "gradient-light" },
-            { "name": "gradient-dark" }
-          ]
-        },
-        {
-          "name": "back-variant",
-          "description": "Determines the variant of the back face of the flipcard.",
-          "values": [
-            { "name": "primary" },
-            { "name": "primary-100" },
-            { "name": "gradient-light" },
-            { "name": "gradient-dark" }
-          ]
-        },
-        {
-          "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-flipcard--docs"
-        }
-      ]
-    },
     {
       "name": "sd-header",
       "description": "Header\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
@@ -2259,6 +2207,58 @@
         }
       ]
     },
+    {
+      "name": "sd-flipcard",
+      "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
+      "attributes": [
+        {
+          "name": "flip-direction",
+          "description": "Allows the flipcard to flip vertically or horizontally.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "placement",
+          "description": "Determines the placement of the contents of the flipcard.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "front-variant",
+          "description": "Determines the variant of the front face of the flipcard.",
+          "values": [
+            { "name": "primary" },
+            { "name": "primary-100" },
+            { "name": "gradient-light" },
+            { "name": "gradient-dark" }
+          ]
+        },
+        {
+          "name": "back-variant",
+          "description": "Determines the variant of the back face of the flipcard.",
+          "values": [
+            { "name": "primary" },
+            { "name": "primary-100" },
+            { "name": "gradient-light" },
+            { "name": "gradient-dark" }
+          ]
+        },
+        {
+          "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-flipcard--docs"
+        }
+      ]
+    },
     {
       "name": "sd-range",
       "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\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-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\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 - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(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-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",

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": "5.13.13",
+  "version": "5.13.14",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2558,122 +2558,6 @@
             ]
           }
         },
-        {
-          "name": "sd-flipcard",
-          "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "flip-direction",
-              "description": "Allows the flipcard to flip vertically or horizontally.",
-              "value": {
-                "type": "'horizontal' | 'vertical'",
-                "default": "'horizontal'"
-              }
-            },
-            {
-              "name": "placement",
-              "description": "Determines the placement of the contents of the flipcard.",
-              "value": { "type": "'top' | 'bottom'", "default": "'top'" }
-            },
-            {
-              "name": "front-variant",
-              "description": "Determines the variant of the front face of the flipcard.",
-              "value": {
-                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "back-variant",
-              "description": "Determines the variant of the back face of the flipcard.",
-              "value": {
-                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "dir",
-              "description": "The element's directionality.",
-              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
-            },
-            {
-              "name": "lang",
-              "description": "The element's language.",
-              "value": { "type": "string" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "front",
-              "description": "The front face of the flipcard."
-            },
-            { "name": "back", "description": "The back face of the flipcard." },
-            {
-              "name": "media-front",
-              "description": "An optional media slot which can be as a background. Dependent from gradient variant."
-            },
-            {
-              "name": "media-back",
-              "description": "An optional media slot which can be as a background. Dependent from gradient variant."
-            }
-          ],
-          "events": [
-            {
-              "name": "sd-flip-front",
-              "description": "Emmited when the front face of the flipcard is clicked."
-            },
-            {
-              "name": "sd-flip-back",
-              "description": "Emmited when the back face of the flipcard is clicked."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "flipDirection",
-                "description": "Allows the flipcard to flip vertically or horizontally.",
-                "type": "'horizontal' | 'vertical'"
-              },
-              {
-                "name": "placement",
-                "description": "Determines the placement of the contents of the flipcard.",
-                "type": "'top' | 'bottom'"
-              },
-              {
-                "name": "frontVariant",
-                "description": "Determines the variant of the front face of the flipcard.",
-                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
-              },
-              {
-                "name": "backVariant",
-                "description": "Determines the variant of the back face of the flipcard.",
-                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
-              },
-              { "name": "activeSide", "type": "'front' | 'back'" },
-              {
-                "name": "dir",
-                "description": "The element's directionality.",
-                "type": "'ltr' | 'rtl' | 'auto'"
-              },
-              {
-                "name": "lang",
-                "description": "The element's language.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "sd-flip-front",
-                "description": "Emmited when the front face of the flipcard is clicked."
-              },
-              {
-                "name": "sd-flip-back",
-                "description": "Emmited when the back face of the flipcard is clicked."
-              }
-            ]
-          }
-        },
         {
           "name": "sd-header",
           "description": "Header\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 header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
@@ -5058,6 +4942,122 @@
             ]
           }
         },
+        {
+          "name": "sd-flipcard",
+          "description": "Flipcard allows for the addition of content/information on both \"sides\" of the card, through means of a flip animation. Used  to add dynamism and interactivity to a page.\n---\n\n\n### **Events:**\n - **sd-flip-front** - Emmited when the front face of the flipcard is clicked.\n- **sd-flip-back** - Emmited when the back face of the flipcard is clicked.\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 - **front** - The front face of the flipcard.\n- **back** - The back face of the flipcard.\n- **media-front** - An optional media slot which can be as a background. Dependent from gradient variant.\n- **media-back** - An optional media slot which can be as a background. Dependent from gradient variant.\n\n### **CSS Properties:**\n - **--name** - Description of the flipcard. _(default: undefined)_\n- **--height** - Use this property to set the height of the flipcard. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **front** - The container that wraps the front-side of the flipcard.\n- **back** - The container that wraps the back-side of the flipcard.\n- **front-button** - The button that flips the flipcard to the back.\n- **back-button** - The button that flips the flipcard to the front.\n- **front-interactive-container** - The container that wraps the front side and the flip button.\n- **back-interactive-container** - The container that wraps the back side and the flip button.\n- **front-slot-container** - The container that wraps the front slot.\n- **back-slot-container** - The container that wraps the back slot.\n- **media-front** - The container that wraps the media-front slot.\n- **media-back** - The container that wraps the media-back slot.\n- **front-secondary-gradient** - The container that wraps the secondary gradient of the front side.\n- **back-secondary-gradient** - The container that wraps the secondary gradient of the back side.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "flip-direction",
+              "description": "Allows the flipcard to flip vertically or horizontally.",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'horizontal'"
+              }
+            },
+            {
+              "name": "placement",
+              "description": "Determines the placement of the contents of the flipcard.",
+              "value": { "type": "'top' | 'bottom'", "default": "'top'" }
+            },
+            {
+              "name": "front-variant",
+              "description": "Determines the variant of the front face of the flipcard.",
+              "value": {
+                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "back-variant",
+              "description": "Determines the variant of the back face of the flipcard.",
+              "value": {
+                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "front",
+              "description": "The front face of the flipcard."
+            },
+            { "name": "back", "description": "The back face of the flipcard." },
+            {
+              "name": "media-front",
+              "description": "An optional media slot which can be as a background. Dependent from gradient variant."
+            },
+            {
+              "name": "media-back",
+              "description": "An optional media slot which can be as a background. Dependent from gradient variant."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-flip-front",
+              "description": "Emmited when the front face of the flipcard is clicked."
+            },
+            {
+              "name": "sd-flip-back",
+              "description": "Emmited when the back face of the flipcard is clicked."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "flipDirection",
+                "description": "Allows the flipcard to flip vertically or horizontally.",
+                "type": "'horizontal' | 'vertical'"
+              },
+              {
+                "name": "placement",
+                "description": "Determines the placement of the contents of the flipcard.",
+                "type": "'top' | 'bottom'"
+              },
+              {
+                "name": "frontVariant",
+                "description": "Determines the variant of the front face of the flipcard.",
+                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
+              },
+              {
+                "name": "backVariant",
+                "description": "Determines the variant of the back face of the flipcard.",
+                "type": "'primary' | 'primary-100' | 'gradient-light' | 'gradient-dark'"
+              },
+              { "name": "activeSide", "type": "'front' | 'back'" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-flip-front",
+                "description": "Emmited when the front face of the flipcard is clicked."
+              },
+              {
+                "name": "sd-flip-back",
+                "description": "Emmited when the back face of the flipcard is clicked."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-range",
           "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\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-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\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 - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(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-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",

package/dist-versioned/chunks/{chunk.JGFET2UA.js → chunk.2ZUQDPS4.js}

@@ -1,7 +1,7 @@
 import {
   FormControlController,
   validValidityState
-} from "./chunk.KVKRZJS7.js";
+} from "./chunk.XCQC3F3H.js";
 import {
   HasSlotController
 } from "./chunk.IVMQWO2L.js";
@@ -222,7 +222,7 @@ var SdButton = class extends SolidElement {
         md: "ml-2",
         lg: "ml-2"
       }[this.size]
-    )}"></slot>${this.loading ? html`<sd-5-13-13-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-13-13-loader>` : ""}</${tag}>`;
+    )}"></slot>${this.loading ? html`<sd-5-13-14-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-5-13-14-loader>` : ""}</${tag}>`;
   }
 };
 /**
@@ -230,13 +230,13 @@ var SdButton = class extends SolidElement {
  */
 SdButton.styles = [
   ...SolidElement.styles,
-  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-5-13-13-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-5-13-13-icon),sd-5-13-13-loader{font-size:calc(var(--tw-varspacing)/2)}`
+  css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto);z-index:0}::slotted(sd-5-13-14-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-5-13-14-icon),sd-5-13-14-loader{font-size:calc(var(--tw-varspacing)/2)}`
 ];
 __decorateClass([
   query("a, button")
 ], SdButton.prototype, "button", 2);
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-13-13-icon" })
+  queryAssignedElements({ selector: "sd-5-13-14-icon" })
 ], SdButton.prototype, "_iconsInDefaultSlot", 2);
 __decorateClass([
   state()
@@ -302,7 +302,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdButton.prototype, "handleDisabledChange", 1);
 SdButton = __decorateClass([
-  customElement("sd-5-13-13-button")
+  customElement("sd-5-13-14-button")
 ], SdButton);
 
 export {