@solid-design-system/components 5.17.1 → 5.17.3

package/dist/solid-components.js

@@ -1,198 +1,198 @@
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTextarea
-} from "./chunks/chunk.5L52M55A.js";
+} from "./chunks/chunk.35JOBQN4.js";
 import {
   SdTooltip
-} from "./chunks/chunk.KHS7FSFX.js";
+} from "./chunks/chunk.MEJBDCOK.js";
 import {
   SdVideo
-} from "./chunks/chunk.KMU4KABG.js";
+} from "./chunks/chunk.B3QSQ6K7.js";
 import {
   setupAutocomplete
 } from "./chunks/chunk.6DKXZWRN.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.22DM7THN.js";
+} from "./chunks/chunk.PCW75LUJ.js";
 import {
   SdSwitch
-} from "./chunks/chunk.246LUIGB.js";
+} from "./chunks/chunk.6LF3BYIY.js";
 import {
   SdTab
-} from "./chunks/chunk.A5GKQZGQ.js";
+} from "./chunks/chunk.HTE3DLUD.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.YBAAPYHP.js";
+} from "./chunks/chunk.LWQJ57CH.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.WUB4VSXU.js";
+} from "./chunks/chunk.Y7FP242S.js";
 import {
   SdTeaser
-} from "./chunks/chunk.JUZY76ML.js";
+} from "./chunks/chunk.45D7TZY2.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.NYOWE72U.js";
+} from "./chunks/chunk.VELQG4FG.js";
 import {
   SdRange
-} from "./chunks/chunk.VUTMPKYK.js";
+} from "./chunks/chunk.7UTDD55I.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.6OGLZOU3.js";
+} from "./chunks/chunk.CJ7IHVFY.js";
 import {
   SdScrollable
-} from "./chunks/chunk.AWVURKQ3.js";
+} from "./chunks/chunk.K6PSDQZI.js";
 import {
   SdSelect
-} from "./chunks/chunk.HTEXYS4A.js";
+} from "./chunks/chunk.D2O3R3AC.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.QP27BG3Y.js";
+} from "./chunks/chunk.OSB344JT.js";
 import {
   SdSpinner
-} from "./chunks/chunk.J2MPIUT5.js";
+} from "./chunks/chunk.5ELWG4EZ.js";
 import {
   SdStep
-} from "./chunks/chunk.VDSIXERI.js";
+} from "./chunks/chunk.UIJDENWT.js";
 import {
   SdNotification
-} from "./chunks/chunk.WRP3NGPP.js";
+} from "./chunks/chunk.EGKZTSJA.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.FPIRMH7R.js";
+} from "./chunks/chunk.EZZAAWNK.js";
 import {
   SdOption
-} from "./chunks/chunk.IKDVBWFR.js";
+} from "./chunks/chunk.23MU4JA7.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.ZAQS4XFO.js";
+} from "./chunks/chunk.CURHDJV6.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.AAK5STGD.js";
+} from "./chunks/chunk.OV64576E.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.SJZCQ5SU.js";
+} from "./chunks/chunk.SNMM5N5T.js";
 import {
   SdRadio
-} from "./chunks/chunk.63D5DO3S.js";
+} from "./chunks/chunk.PUZMRDRJ.js";
 import {
   SdInput
-} from "./chunks/chunk.DOGMVREV.js";
+} from "./chunks/chunk.FUCATISJ.js";
 import {
   SdLink
-} from "./chunks/chunk.AZ5YCFXX.js";
+} from "./chunks/chunk.6AKV5ZRR.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.ZUL25WD4.js";
+} from "./chunks/chunk.22JGWQHD.js";
 import {
   SdMenu
-} from "./chunks/chunk.QPBHKXL6.js";
+} from "./chunks/chunk.FWUEEHWY.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.URTB3C7J.js";
+} from "./chunks/chunk.4JRGV2NE.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.AUMWRORX.js";
+} from "./chunks/chunk.2YP3NW54.js";
 import {
   SdInclude
-} from "./chunks/chunk.4D5SPJ27.js";
+} from "./chunks/chunk.X6JCFJHB.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.TJKIQ2ZR.js";
+} from "./chunks/chunk.H2XMCGBK.js";
 import "./chunks/chunk.CDM2I6O2.js";
 import {
   SdDialog
-} from "./chunks/chunk.TD5EDBVC.js";
+} from "./chunks/chunk.2SPLNABG.js";
 import {
   SdDivider
-} from "./chunks/chunk.OWYDTY46.js";
+} from "./chunks/chunk.YRMXXHY5.js";
 import {
   SdDropdown
-} from "./chunks/chunk.QPBJEOPN.js";
+} from "./chunks/chunk.3EBQKONT.js";
 import {
   SdExpandable
-} from "./chunks/chunk.4VSYGWIQ.js";
+} from "./chunks/chunk.CVZH2VLL.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.Q4HWX7FF.js";
+} from "./chunks/chunk.Q5Z4C6HX.js";
 import {
   SdHeader
-} from "./chunks/chunk.E4O3LVAZ.js";
+} from "./chunks/chunk.FRJAG3MQ.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.ZBDFCFOP.js";
+} from "./chunks/chunk.76BN4PS7.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.U5L4ZATG.js";
+} from "./chunks/chunk.KFBDKQWY.js";
 import {
   SdCombobox
-} from "./chunks/chunk.OH3W4PGL.js";
+} from "./chunks/chunk.6RK24NSS.js";
 import {
   SdTag
-} from "./chunks/chunk.W6RMEFFR.js";
+} from "./chunks/chunk.WGE2DGAT.js";
 import {
   SdPopup
-} from "./chunks/chunk.2EN4CJ2E.js";
+} from "./chunks/chunk.JTJV2AFL.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.3CUXBZXY.js";
-import {
-  SdBreadcrumb
-} from "./chunks/chunk.TMJN75ST.js";
+} from "./chunks/chunk.ZYCUZKFW.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.P2JBJQH6.js";
+} from "./chunks/chunk.5XO674YZ.js";
+import {
+  SdBreadcrumb
+} from "./chunks/chunk.CQ67F2XR.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.YGHO5R3O.js";
-import "./chunks/chunk.S253T7LE.js";
+} from "./chunks/chunk.TJSVPPLH.js";
+import "./chunks/chunk.KUFA6W6P.js";
 import {
   SdCarousel
-} from "./chunks/chunk.XRKSJCLQ.js";
+} from "./chunks/chunk.TJ25B2BK.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.FWDG6KMC.js";
+} from "./chunks/chunk.OTS2TILR.js";
 import "./chunks/chunk.F4VGSDIW.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.6KCL3YWT.js";
+} from "./chunks/chunk.VJRTQGCU.js";
 import {
   SdAccordion
-} from "./chunks/chunk.MCUIYSD6.js";
+} from "./chunks/chunk.KS2U7CKH.js";
 import {
   SdAnimation
-} from "./chunks/chunk.QTQEKSJS.js";
+} from "./chunks/chunk.IITIHE4Z.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.WTG2WY6X.js";
+} from "./chunks/chunk.EX2IEIQK.js";
 import {
   SdDrawer
-} from "./chunks/chunk.ATKLZZWE.js";
+} from "./chunks/chunk.SA3RNF6V.js";
 import "./chunks/chunk.SF6AUNJF.js";
 import "./chunks/chunk.EDMG7C5H.js";
 import "./chunks/chunk.UMIKFOMI.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdButton
-} from "./chunks/chunk.NBHVDDUK.js";
+} from "./chunks/chunk.EBA2FO3J.js";
 import {
   SdLoader
-} from "./chunks/chunk.QVNC3EJB.js";
+} from "./chunks/chunk.VW5P7PCS.js";
 import "./chunks/chunk.XCQC3F3H.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.PKG3F2KC.js";
+} from "./chunks/chunk.VVVV5UPF.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
@@ -208,7 +208,7 @@ import {
 import "./chunks/chunk.ID6DABAJ.js";
 import "./chunks/chunk.3S7EW72P.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.RZLBIMEH.js";
+import "./chunks/chunk.H7UEA2NY.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/autocomplete-config.js

@@ -1,8 +1,8 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.2EN4CJ2E.js";
-import "../chunks/chunk.RZLBIMEH.js";
+import "../chunks/chunk.JTJV2AFL.js";
+import "../chunks/chunk.H7UEA2NY.js";
 import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -1383,7 +1383,7 @@
     },
     {
       "name": "sd-input",
-      "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
+      "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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- **form-control-floating-label** - The floating label 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- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
       "attributes": [
         {
           "name": "type",
@@ -1517,6 +1517,11 @@
           "description": "Makes the input a required field.",
           "values": []
         },
+        {
+          "name": "floating-label",
+          "description": "Enables the floating label behavior for the input.",
+          "values": []
+        },
         {
           "name": "pattern",
           "description": "A regular expression pattern to validate input against.",

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.17.1",
+  "version": "5.17.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3284,7 +3284,7 @@
         },
         {
           "name": "sd-input",
-          "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
+          "description": "Inputs collect data from the user.\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-clear** - Emitted when the clear button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\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- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the input.\n- **right** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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- **form-control-floating-label** - The floating label 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- **input** - The internal `<input>` control.\n- **left** - The container that wraps the left.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **right** - The container that wraps the right.\n- **invalid-icon** - The invalid icon.\n- **valid-icon** - The valid icon.\n- **invalid-message** - The invalid message.",
           "doc-url": "",
           "attributes": [
             {
@@ -3402,6 +3402,11 @@
               "description": "Makes the input a required field.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "floating-label",
+              "description": "Enables the floating label behavior for the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "pattern",
               "description": "A regular expression pattern to validate input against.",
@@ -3636,6 +3641,11 @@
                 "description": "Makes the input a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "floatingLabel",
+                "description": "Enables the floating label behavior for the input.",
+                "type": "boolean"
+              },
               {
                 "name": "pattern",
                 "description": "A regular expression pattern to validate input against.",

package/dist-versioned/chunks/{chunk.ZUL25WD4.js → chunk.22JGWQHD.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -107,7 +107,7 @@ __decorateClass([
   property({ reflect: true })
 ], SdMapMarker.prototype, "label", 2);
 SdMapMarker = __decorateClass([
-  customElement("sd-5-17-1-map-marker")
+  customElement("sd-5-17-3-map-marker")
 ], SdMapMarker);
 
 export {

package/dist-versioned/chunks/{chunk.IKDVBWFR.js → chunk.23MU4JA7.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
     )}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
       "relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
       this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white border-neutral-800"
-    )}">${this.selected ? html`<sd-5-17-1-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-17-1-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
+    )}">${this.selected ? html`<sd-5-17-3-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-5-17-3-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
   }
 };
 /**
@@ -140,7 +140,7 @@ __decorateClass([
   watch("value")
 ], SdOption.prototype, "handleValueChange", 1);
 SdOption = __decorateClass([
-  customElement("sd-5-17-1-option")
+  customElement("sd-5-17-3-option")
 ], SdOption);
 
 export {

package/dist-versioned/chunks/{chunk.TD5EDBVC.js → chunk.2SPLNABG.js}

@@ -27,7 +27,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   animateTo,
   stopAnimations
@@ -183,7 +183,7 @@ var SdDialog = class extends SolidElement {
     )}"><div part="overlay" class="fixed inset-0 bg-primary-800 opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
       "flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
       this.open && "flex opacity-100"
-    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-5-17-1-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-5-17-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-17-1-icon></sd-5-17-1-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
+    )}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-5-17-3-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-5-17-3-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-17-3-icon></sd-5-17-3-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
   }
 };
 SdDialog.styles = [
@@ -212,7 +212,7 @@ __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SdDialog.prototype, "handleOpenChange", 1);
 SdDialog = __decorateClass([
-  customElement("sd-5-17-1-dialog")
+  customElement("sd-5-17-3-dialog")
 ], SdDialog);
 setDefaultAnimation("dialog.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.AUMWRORX.js → chunk.2YP3NW54.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -53,7 +53,7 @@ var SdNavigationItem = class extends SolidElement {
       }
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = node;
-        return element.tagName.toLowerCase() === "sd-5-17-1-icon";
+        return element.tagName.toLowerCase() === "sd-5-17-3-icon";
       }
       return false;
     });
@@ -143,19 +143,19 @@ var SdNavigationItem = class extends SolidElement {
       slots["description"] && "pt-3",
       !slots["description"] && !this.separated && horizontalPadding,
       this.calculatePaddingX
-    )}">${this.divider && this.vertical ? html`<sd-5-17-1-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-5-17-1-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-5-17-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+    )}">${this.divider && this.vertical ? html`<sd-5-17-3-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-5-17-3-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-5-17-3-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
       "h-6 w-6 ml-2 transition-all",
       isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-    )}"></sd-5-17-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
+    )}"></sd-5-17-3-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
       "inline-block text-sm text-left font-normal text-black pb-3",
       isAccordion || this.separated ? "grow" : "w-full",
       this.calculatePaddingX
     )}"></slot>` : ""}</div></${tag}>`;
     if (this.separated) {
-      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-5-17-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
+      return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-5-17-3-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
         "m-4 h-6 w-6 transition-all",
         isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
-      )}"></sd-5-17-1-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
+      )}"></sd-5-17-3-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
     }
     if (isAccordion) {
       return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
@@ -216,7 +216,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "separated", 2);
 SdNavigationItem = __decorateClass([
-  customElement("sd-5-17-1-navigation-item")
+  customElement("sd-5-17-3-navigation-item")
 ], SdNavigationItem);
 
 export {

package/dist-versioned/chunks/{chunk.5L52M55A.js → chunk.35JOBQN4.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.RZLBIMEH.js";
+} from "./chunk.H7UEA2NY.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -208,7 +208,7 @@ var SdTextarea = class extends SolidElement {
       this.readonly ? "bg-neutral-100" : "bg-white",
       textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}"><textarea part="textarea" id="input" class="${cx(
-      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-17-1-icon]:pe-8",
+      "ps-4 flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none group-has-[sd-5-17-3-icon]:pe-8",
       {
         sm: "py-1",
         md: "py-1",
@@ -216,7 +216,7 @@ var SdTextarea = class extends SolidElement {
       }[this.size],
       this.disabled && "cursor-not-allowed",
       textSize
-    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-17-1-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-17-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-17-1-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-1-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    )}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-5-17-3-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-5-17-3-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-5-17-3-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-17-3-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -330,7 +330,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdTextarea.prototype, "handleValueChange", 1);
 SdTextarea = __decorateClass([
-  customElement("sd-5-17-1-textarea")
+  customElement("sd-5-17-3-textarea")
 ], SdTextarea);
 
 export {