@solid-design-system/components 6.25.2 → 6.26.0

package/dist/custom-elements.json

@@ -4405,6 +4405,10 @@
               "description": "The border width of the checkbox.",
               "name": "--sd-checkbox-border-width"
             },
+            {
+              "description": "The background color of the checkbox when invalid.",
+              "name": "--sd-checkbox--invalid-color-background"
+            },
             {
               "description": "The color border for form controls.",
               "name": "--sd-form-control-color-border"
@@ -5172,6 +5176,10 @@
             {
               "description": "The border width for the tags for multiple options combobox.",
               "name": "--sd-combobox__tag-border-width"
+            },
+            {
+              "description": "The icons color for slots, chevron and search icons.",
+              "name": "--sd-form-control-color-icon-fill"
             }
           ],
           "cssParts": [
@@ -6406,6 +6414,10 @@
               "description": "The background color for read-only form controls.",
               "name": "--sd-form-control--read-only-color-background"
             },
+            {
+              "description": "The color for form control icons.",
+              "name": "--sd-form-control-color-icon-fill"
+            },
             {
               "description": "The default text color for date items.",
               "name": "--sd-datepicker__date-item--default-color-text"
@@ -9839,7 +9851,7 @@
           "type": {
             "text": "IconLibrary"
           },
-          "default": "{ name: 'sd-multi-theming', resolver: (name, element) => { const theme = getTheme(element); if (!theme) return ''; const path = name.split('/'); const finalPath = `${theme}/${name}`; if (path[0] === 'content' || path[0] === 'system') { name = finalPath; } return `https://celum-icons.fe.union-investment.de/${name}.svg`; }, mutator: svg => { const recoloredElements = { currentColorFills: [] as unknown as NodeListOf<SVGElement>, currentColorStrokes: [] as unknown as NodeListOf<SVGElement>, greenFills: [] as unknown as NodeListOf<SVGElement>, greenStrokes: [] as unknown as NodeListOf<SVGElement> }; const currentColors = ['#00358e', '#002d67', '#005ca9', '#051530']; const greenColor = ['#2d9d00', '#f35e01']; recoloredElements['currentColorFills'] = svg.querySelectorAll( currentColors.map(color => `[fill=\"${color}\" i]`).join(', ') ); recoloredElements['currentColorStrokes'] = svg.querySelectorAll( currentColors.map(color => `[stroke=\"${color}\" i]`).join(', ') ); recoloredElements['greenFills'] = svg.querySelectorAll(greenColor.map(color => `[fill=\"${color}\" i]`).join(', ')); recoloredElements['greenStrokes'] = svg.querySelectorAll( greenColor.map(color => `[stroke=\"${color}\" i]`).join(', ') ); recoloredElements.currentColorFills.forEach(filledElement => { filledElement.setAttribute('fill', 'currentColor'); }); recoloredElements.currentColorStrokes.forEach(strokedElement => { strokedElement.setAttribute('stroke', 'currentColor'); }); recoloredElements.greenFills.forEach(filledElement => { filledElement.setAttribute('fill', 'rgb(var(--sd-color-icon-fill-accent, 45 157 0))'); }); recoloredElements.greenStrokes.forEach(strokedElement => { strokedElement.setAttribute('stroke', 'rgb(var(--sd-color-icon-fill-accent, 45 157 0))'); }); return svg; } }"
+          "default": "{ name: 'sd-multi-theming', resolver: (name, element) => { const theme = getTheme(element); if (!theme) return ''; const path = name.split('/'); const finalPath = `${theme}/${name}`; if (path[0] === 'content' || path[0] === 'system') { name = finalPath; } return `https://celum-icons.fe.union-investment.de/${name}.svg`; }, mutator: svg => { const recoloredElements = { currentColorFills: [] as unknown as NodeListOf<SVGElement>, currentColorStrokes: [] as unknown as NodeListOf<SVGElement>, greenFills: [] as unknown as NodeListOf<SVGElement>, greenStrokes: [] as unknown as NodeListOf<SVGElement> }; const currentColors = ['#00358e', '#002d67', '#005ca9', '#005AAA', '#051530']; const greenColor = ['#2d9d00', '#f35e01']; recoloredElements['currentColorFills'] = svg.querySelectorAll( currentColors.map(color => `[fill=\"${color}\" i]`).join(', ') ); recoloredElements['currentColorStrokes'] = svg.querySelectorAll( currentColors.map(color => `[stroke=\"${color}\" i]`).join(', ') ); recoloredElements['greenFills'] = svg.querySelectorAll(greenColor.map(color => `[fill=\"${color}\" i]`).join(', ')); recoloredElements['greenStrokes'] = svg.querySelectorAll( greenColor.map(color => `[stroke=\"${color}\" i]`).join(', ') ); recoloredElements.currentColorFills.forEach(filledElement => { filledElement.setAttribute('fill', 'currentColor'); }); recoloredElements.currentColorStrokes.forEach(strokedElement => { strokedElement.setAttribute('stroke', 'currentColor'); }); recoloredElements.greenFills.forEach(filledElement => { filledElement.setAttribute('fill', 'rgb(var(--sd-color-icon-fill-accent, 45 157 0))'); }); recoloredElements.greenStrokes.forEach(strokedElement => { strokedElement.setAttribute('stroke', 'rgb(var(--sd-color-icon-fill-accent, 45 157 0))'); }); return svg; } }"
         }
       ],
       "exports": [
@@ -10343,6 +10355,10 @@
             {
               "description": "The background color read-only for form controls.",
               "name": "--sd-form-control--read-only-color-background"
+            },
+            {
+              "description": "The color for form control icons.",
+              "name": "--sd-form-control-color-icon-fill"
             }
           ],
           "cssParts": [
@@ -12792,6 +12808,10 @@
               "description": "The navigation-item text color.",
               "name": "--sd-navigation-item-color-text"
             },
+            {
+              "description": "The default navigation-items text color.",
+              "name": "--sd-navigation-item--default-color-text"
+            },
             {
               "description": "The navigation-item border radius on hover and active state.",
               "name": "--sd-navigable-border-radius"
@@ -17881,6 +17901,10 @@
             {
               "description": "The background color for form controls on hover.",
               "name": "--sd-form-control--hover-color-background"
+            },
+            {
+              "description": "The color for form control icons.",
+              "name": "--sd-form-control-color-icon-fill"
             }
           ],
           "cssParts": [
@@ -21052,6 +21076,30 @@
               "description": "The text color for disabled tags.",
               "name": "--sd-tag--disabled-color-text"
             },
+            {
+              "description": "The padding inline for large tags.",
+              "name": "--sd-tag--size-lg-padding-inline"
+            },
+            {
+              "description": "The padding inline for small tags.",
+              "name": "--sd-tag--size-sm-padding-inline"
+            },
+            {
+              "description": "The padding right for large removable tags.",
+              "name": "--sd-tag--removable--size-lg-padding-right"
+            },
+            {
+              "description": "The padding left for large removable tags.",
+              "name": "--sd-tag--removable--size-lg-padding-left"
+            },
+            {
+              "description": "The padding right for small removable tags.",
+              "name": "--sd-tag--removable--size-sm-padding-right"
+            },
+            {
+              "description": "The padding left for small removable tags.",
+              "name": "--sd-tag--removable--size-sm-padding-left"
+            },
             {
               "description": "This custom property is deprecated. Use `--sd-color-border-neutral-500` instead.",
               "name": "--sd-tag--disabled-color-border"
@@ -21768,6 +21816,10 @@
             {
               "description": "The default background color for primary‑100 teaser media.",
               "name": "--sd-teaser-media--primary-100-color-background"
+            },
+            {
+              "description": "The default color for the icon in the toggle button.",
+              "name": "--sd-teaser-media-color-icon-fill"
             }
           ],
           "cssParts": [
@@ -23669,7 +23721,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.25.2",
+    "version": "6.26.0",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"

package/dist/solid-components.js

@@ -4,209 +4,209 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTeaser
-} from "./chunks/chunk.OBALQKII.js";
+} from "./chunks/chunk.MIDB4P4Z.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.CXB2XQIJ.js";
+} from "./chunks/chunk.HFD4GVQH.js";
 import {
   SdTextarea
-} from "./chunks/chunk.WRL2CLHO.js";
+} from "./chunks/chunk.EWBPFI7O.js";
 import {
   SdThemeListener
-} from "./chunks/chunk.Q3TX3XDZ.js";
+} from "./chunks/chunk.2QLV3FGQ.js";
 import {
   SdVideo
-} from "./chunks/chunk.SS4RVAQK.js";
+} from "./chunks/chunk.6LUXWBVQ.js";
 import {
   SdSkeleton
-} from "./chunks/chunk.DSXCGC7F.js";
+} from "./chunks/chunk.HFUPD442.js";
 import {
   SdSpinner
-} from "./chunks/chunk.DPRGWJBB.js";
+} from "./chunks/chunk.FO2XDPBY.js";
 import {
   SdStep
-} from "./chunks/chunk.7OSWIAWL.js";
+} from "./chunks/chunk.NQD4454U.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.2LCN3EP3.js";
+} from "./chunks/chunk.ISDCFN2T.js";
 import {
   SdSwitch
-} from "./chunks/chunk.BDECPBQB.js";
+} from "./chunks/chunk.KNNHUZRK.js";
 import {
   SdTab
-} from "./chunks/chunk.CONHZGP3.js";
+} from "./chunks/chunk.5SP53TRC.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.KGMKDHPL.js";
+} from "./chunks/chunk.3YRBYYHB.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.O62TPIKI.js";
+} from "./chunks/chunk.7DSVL7JH.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.7WNFL5FK.js";
+} from "./chunks/chunk.GURHKBOS.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.6FKWEL2P.js";
+} from "./chunks/chunk.HSMX4JWE.js";
 import {
   SdRadio
-} from "./chunks/chunk.SSN63OPD.js";
+} from "./chunks/chunk.LVUKQ7ZS.js";
 import {
   SdRange
-} from "./chunks/chunk.LF6XZLLV.js";
+} from "./chunks/chunk.WALY6H2S.js";
 import {
   SdTooltip
-} from "./chunks/chunk.LYLG2GGT.js";
+} from "./chunks/chunk.DPOFFN22.js";
 import "./chunks/chunk.D3YSIVTB.js";
 import {
   SdRangeTick
-} from "./chunks/chunk.ZABFFXVL.js";
+} from "./chunks/chunk.DFSINDVF.js";
 import {
   SdScrollable
-} from "./chunks/chunk.Y4GT33KS.js";
+} from "./chunks/chunk.43WIFSAV.js";
 import {
   SdSelect
-} from "./chunks/chunk.NGP3FNYQ.js";
+} from "./chunks/chunk.2GY5X74S.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.NJWOXBXH.js";
+} from "./chunks/chunk.QH4PJIEK.js";
 import {
   SdNotification
-} from "./chunks/chunk.ROBHIBYF.js";
+} from "./chunks/chunk.ZCK2AJ6F.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.MAGZXXCQ.js";
+} from "./chunks/chunk.ON7JW7DZ.js";
 import {
   SdOption
-} from "./chunks/chunk.42QMVCF2.js";
+} from "./chunks/chunk.LIHFBMY3.js";
 import {
   SdProgressBar
-} from "./chunks/chunk.TCJNT4Z2.js";
+} from "./chunks/chunk.PAGXROMQ.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.NUATC7YR.js";
+} from "./chunks/chunk.GIYK2K7S.js";
 import {
   SdInclude
-} from "./chunks/chunk.Z4K24YPV.js";
+} from "./chunks/chunk.3AZV733X.js";
 import {
   SdInput
-} from "./chunks/chunk.W2OVNUIG.js";
+} from "./chunks/chunk.6VONS4GH.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.RALBWDZA.js";
+} from "./chunks/chunk.2JVBNRAE.js";
 import {
   SdMenu
-} from "./chunks/chunk.WYWF3NDY.js";
+} from "./chunks/chunk.67RQILIX.js";
 import {
   SdMenuItem
-} from "./chunks/chunk.QNAJI254.js";
+} from "./chunks/chunk.FZW355YU.js";
 import "./chunks/chunk.KEJFWGZI.js";
 import {
   SdHeader
-} from "./chunks/chunk.MFSPWDSN.js";
+} from "./chunks/chunk.QWPTKRZY.js";
 import {
   SdDatepicker
-} from "./chunks/chunk.W37W2WV2.js";
+} from "./chunks/chunk.32PMIHHH.js";
 import "./chunks/chunk.A4LR62QO.js";
 import "./chunks/chunk.TJ2FFWLY.js";
 import {
   SdDialog
-} from "./chunks/chunk.LY44WLUT.js";
+} from "./chunks/chunk.4QQTPWQK.js";
 import {
   SdDivider
-} from "./chunks/chunk.RTO4AFXP.js";
+} from "./chunks/chunk.WC6QJGPY.js";
 import {
   SdExpandable
-} from "./chunks/chunk.QYHWWFR7.js";
+} from "./chunks/chunk.22QJOKRT.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.LUVWXMHC.js";
+} from "./chunks/chunk.LMAZLSWN.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.3R2MGQD7.js";
+} from "./chunks/chunk.ATPMJXDV.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.GAPA3B6D.js";
+} from "./chunks/chunk.3UAYIX4K.js";
 import {
   SdCombobox
-} from "./chunks/chunk.6XRNKOVL.js";
+} from "./chunks/chunk.Z4VNO3XB.js";
 import {
   SdTag
-} from "./chunks/chunk.WASUU25S.js";
+} from "./chunks/chunk.P7WF3BP4.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdBadge
-} from "./chunks/chunk.UC5NJVTI.js";
+} from "./chunks/chunk.U4ES752F.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.U6Z6FLHL.js";
+} from "./chunks/chunk.LFY6FLC7.js";
 import {
   SdBreadcrumb
-} from "./chunks/chunk.VYHVQBWG.js";
+} from "./chunks/chunk.H6AYJU2Z.js";
 import {
   SdDropdown
-} from "./chunks/chunk.EZLG7OFP.js";
+} from "./chunks/chunk.NF6TENBG.js";
 import {
   SdPopup
-} from "./chunks/chunk.MX3Y5PYJ.js";
+} from "./chunks/chunk.E32D3Z6I.js";
 import {
   SdBreadcrumbItem
-} from "./chunks/chunk.HUGSMCI3.js";
+} from "./chunks/chunk.FDOJX6W4.js";
 import {
   SdLink
-} from "./chunks/chunk.JNDGEH2A.js";
-import "./chunks/chunk.YAE4Z6EM.js";
+} from "./chunks/chunk.YVNA2ZV6.js";
+import "./chunks/chunk.76H4PKGT.js";
 import {
   SdCarousel
-} from "./chunks/chunk.6RFB3BLZ.js";
+} from "./chunks/chunk.RIMF3V3U.js";
 import "./chunks/chunk.W2YDXTG5.js";
 import "./chunks/chunk.6RE6UZ72.js";
 import "./chunks/chunk.UVI5HHLF.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.RKB7VPEM.js";
+} from "./chunks/chunk.6QITMMHT.js";
 import "./chunks/chunk.F4VGSDIW.js";
-import {
-  SdAnimation
-} from "./chunks/chunk.AIVM5PGS.js";
-import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.LXGWGKQQ.js";
+} from "./chunks/chunk.TVVA3SEO.js";
 import {
   SdAccordion
-} from "./chunks/chunk.3MTJJW4E.js";
+} from "./chunks/chunk.RJD5JWEE.js";
+import {
+  SdAnimation
+} from "./chunks/chunk.3JGLYKUT.js";
+import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.N7GYSZBG.js";
+} from "./chunks/chunk.EQKXEQYI.js";
 import {
   SdDrawer
-} from "./chunks/chunk.4RT6KOEQ.js";
+} from "./chunks/chunk.VMOVHC54.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.JOKPIFMD.js";
+} from "./chunks/chunk.XAFXRA3O.js";
 import {
   SdLoader
-} from "./chunks/chunk.BRWPDA7J.js";
+} from "./chunks/chunk.4CYE55LF.js";
 import "./chunks/chunk.C3WIBDGG.js";
 import "./chunks/chunk.IVMQWO2L.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdIcon
-} from "./chunks/chunk.RIKVLSV3.js";
+} from "./chunks/chunk.FTLHBRJ7.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.CGVEBTVR.js";
+} from "./chunks/chunk.6HICCGIO.js";
 import "./chunks/chunk.ENZOJSYQ.js";
 import "./chunks/chunk.6SPABX2F.js";
-import "./chunks/chunk.344DLODX.js";
+import "./chunks/chunk.5FLDWYHF.js";
 import "./chunks/chunk.4TPOL3LB.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
@@ -216,7 +216,7 @@ import {
 import "./chunks/chunk.BT6SAX2H.js";
 import "./chunks/chunk.X4IYFUX6.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.QSF3ZD6P.js";
+import "./chunks/chunk.PGR6OZIM.js";
 import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";

package/dist/utilities/autocomplete-config.js

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

package/dist/utilities/icon-library.js

@@ -2,10 +2,10 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.CGVEBTVR.js";
+} from "../chunks/chunk.6HICCGIO.js";
 import "../chunks/chunk.ENZOJSYQ.js";
 import "../chunks/chunk.6SPABX2F.js";
-import "../chunks/chunk.344DLODX.js";
+import "../chunks/chunk.5FLDWYHF.js";
 import "../chunks/chunk.4TPOL3LB.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

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

@@ -592,7 +592,7 @@
     },
     {
       "name": "sd-checkbox",
-      "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the checkbox loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the checkbox gains focus.\n- **sd-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\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 checkbox's label.\n\n### **CSS Properties:**\n - **--sd-checkbox-border-width** - The border width of the checkbox. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sd-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
+      "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the checkbox loses focus.\n- **sd-change** - Emitted when the checked state changes.\n- **sd-focus** - Emitted when the checkbox gains focus.\n- **sd-input** - Emitted when the checkbox receives input.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns true when valid and false when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows a validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\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 checkbox's label.\n\n### **CSS Properties:**\n - **--sd-checkbox-border-width** - The border width of the checkbox. _(default: undefined)_\n- **--sd-checkbox--invalid-color-background** - The background color of the checkbox when invalid. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sd-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sd-icon>` element.\n- **label** - The container that wraps the checkbox's label.",
       "attributes": [
         {
           "name": "title",
@@ -706,7 +706,7 @@
     },
     {
       "name": "sd-combobox",
-      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\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 listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color for default and readonly form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-combobox__tag-border-width** - The border width for the tags for multiple options combobox. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-search** - Emitted when the search button is activated.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\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 listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control-color-border** - The border color for default and readonly form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-combobox__tag-border-width** - The border width for the tags for multiple options combobox. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icons color for slots, chevron and search icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
       "attributes": [
         {
           "name": "name",
@@ -854,7 +854,7 @@
     },
     {
       "name": "sd-datepicker",
-      "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\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 default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Properties:**\n - **--sd-form-control-color-text** - The text color for the datepicker. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the datepicker. _(default: undefined)_\n- **--sd-form-control-color-border** - The default border color for the datepicker. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for the input when it is invalid. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-text** - The default text color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-background** - The background color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-text** - The text color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-border** - The default border color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-text** - The text color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-background** - The background color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-text** - The text color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--current-font-weight** - The font weight for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-background** - The background color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-background** - The background color for selected date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--range-color-background** - The background color for date items that are within the selected range. _(default: undefined)_\n- **--sd-datepicker__date-item--current-color-text** - The text color for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-text** - The text color for selected date items in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
+      "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\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 default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Properties:**\n - **--sd-form-control-color-text** - The text color for the datepicker. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the datepicker. _(default: undefined)_\n- **--sd-form-control-color-border** - The default border color for the datepicker. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The text color for the floating label when the input is filled. _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for the input when it is invalid. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the datepicker. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the datepicker. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color for read-only form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-text** - The default text color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-background** - The background color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--default-color-text** - The text color for date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--default-color-border** - The default border color for date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-text** - The text color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-background** - The background color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--hover--prev-next-color-text** - The text color for date items in hover state when they are previous/next month days. _(default: undefined)_\n- **--sd-datepicker__date-item--current-font-weight** - The font weight for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected-color-background** - The background color for selected date items. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-background** - The background color for selected date items in hover state. _(default: undefined)_\n- **--sd-datepicker__date-item--range-color-background** - The background color for date items that are within the selected range. _(default: undefined)_\n- **--sd-datepicker__date-item--current-color-text** - The text color for the current date item. _(default: undefined)_\n- **--sd-datepicker__date-item--selected--hover-color-text** - The text color for selected date items in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
       "attributes": [
         {
           "name": "locale",
@@ -1416,7 +1416,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 Properties:**\n - **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The floating label text color when active. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icon color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color read-only for form controls. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **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.",
+      "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 Properties:**\n - **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control--filled__floating-label-color-text** - The floating label text color when active. _(default: undefined)_\n- **--sd-form-control-color-border** - The color border for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The icon color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for form controls. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control--read-only-color-background** - The background color read-only for form controls. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **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",
@@ -1864,7 +1864,7 @@
     },
     {
       "name": "sd-navigation-item",
-      "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\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 navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--sd-navigation-item-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigable-border-radius** - The navigation-item border radius on hover and active state. _(default: undefined)_\n- **--sd-navigable-font-size** - The navigation-item font size. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius** - The navigation-item current indicator border radius value. _(default: undefined)_\n- **--sd-navigable__current-indicator-height** - The horizontal navigation-item current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-width** - The vertical navigation-item current indicator width. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The navigation-item default font weight. _(default: undefined)_\n- **--sd-navigation-item--current-color-text** - This custom property is deprecated. Use `--sd-navigation-item-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
+      "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\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 navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--sd-navigation-item-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigation-item--default-color-text** - The default navigation-items text color. _(default: undefined)_\n- **--sd-navigable-border-radius** - The navigation-item border radius on hover and active state. _(default: undefined)_\n- **--sd-navigable-font-size** - The navigation-item font size. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius** - The navigation-item current indicator border radius value. _(default: undefined)_\n- **--sd-navigable__current-indicator-height** - The horizontal navigation-item current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-width** - The vertical navigation-item current indicator width. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The navigation-item default font weight. _(default: undefined)_\n- **--sd-navigation-item--current-color-text** - This custom property is deprecated. Use `--sd-navigation-item-color-text` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
       "attributes": [
         {
           "name": "vertical",
@@ -2644,7 +2644,7 @@
     },
     {
       "name": "sd-select",
-      "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\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 listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the select's menu opens.\n- **sd-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the select's menu closes.\n- **sd-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\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 listbox options. Must be `<sd-option>` elements. You can use `<sd-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **tooltip** - An optional tooltip that helps describe the input. Use this slot with the `sd-tooltip` component.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n- **--sd-form-control--invalid-color-background** - The background color for form controls in invalid state. _(default: undefined)_\n- **--sd-form-control-color-text** - The text color for form controls. _(default: undefined)_\n- **--sd-form-control-border-radius** - The border radius for the select's input. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-left-radius** - The border radius for the bottom left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-bottom-right-radius** - The border radius for the bottom right corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-left-radius** - The border radius for the top left corner of the listbox. _(default: undefined)_\n- **--sd-form-control__listbox-border-top-right-radius** - The border radius for the top right corner of the listbox. _(default: undefined)_\n- **--sd-form-control--hover-color-background** - The background color for form controls on hover. _(default: undefined)_\n- **--sd-form-control-color-icon-fill** - The color for form control icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the combobox, clear icon, and expand button.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__removable-indicator** - The tag's remove button.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
       "attributes": [
         {
           "name": "open",
@@ -3124,7 +3124,7 @@
     },
     {
       "name": "sd-tag",
-      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for tags. _(default: undefined)_\n- **--sd-tag--disabled-color-text** - The text color for disabled tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n- **--sd-tag-font-weight** - This custom property is deprecated. Use `--sd-choice-control-font-weight` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\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 tag's content.\n- **icon-left** - A prefix icon or similar element.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\n - **--sd-tag--default-color-text** - The default text color for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-background** - The default color background for tags in their default state. _(default: undefined)_\n- **--sd-tag--default-color-border** - The default color border for tags in their default state. _(default: undefined)_\n- **--sd-tag--default--hover-color-background** - The background color for tags in default state on hover. _(default: undefined)_\n- **--sd-tag--selected--default-color-background** - The default background color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-text** - The default text color for selected tags. _(default: undefined)_\n- **--sd-tag--selected--default-color-border** - The border color for selected tags in default state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-background** - The background color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-border** - The border color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected--hover-color-text** - The text color for selected tags in hover state. _(default: undefined)_\n- **--sd-tag--selected-border-width** - The border width for selected tags. _(default: undefined)_\n- **--sd-tag-border-radius** - The border radius for tags. _(default: undefined)_\n- **--sd-tag--size-lg-font-size** - The font size for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-font-size** - The font size for small tags. _(default: undefined)_\n- **--sd-choice-control-font-weight** - The font weight for tags. _(default: undefined)_\n- **--sd-tag--disabled-color-text** - The text color for disabled tags. _(default: undefined)_\n- **--sd-tag--size-lg-padding-inline** - The padding inline for large tags. _(default: undefined)_\n- **--sd-tag--size-sm-padding-inline** - The padding inline for small tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-right** - The padding right for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-lg-padding-left** - The padding left for large removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-right** - The padding right for small removable tags. _(default: undefined)_\n- **--sd-tag--removable--size-sm-padding-left** - The padding left for small removable tags. _(default: undefined)_\n- **--sd-tag--disabled-color-border** - This custom property is deprecated. Use `--sd-color-border-neutral-500` instead. _(default: undefined)_\n- **--sd-tag-font-weight** - This custom property is deprecated. Use `--sd-choice-control-font-weight` instead. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n- **icon-left** - The container that wraps the left icon area.",
       "attributes": [
         {
           "name": "size",
@@ -3240,7 +3240,7 @@
     },
     {
       "name": "sd-teaser-media",
-      "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--white--hover-color-background** - The background color for white teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--white-color-background** - The default background color for white teaser media. _(default: undefined)_\n- **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
+      "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **expandable** - An optional expandable slot, <strong>not</strong> shown on small devices.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--sd-teaser-media--white--hover-color-background** - The background color for white teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--white-color-background** - The default background color for white teaser media. _(default: undefined)_\n- **--sd-teaser-media--neutral-100--hover-color-background** - The background color for neutral‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--neutral-100-color-background** - The default background color for neutral‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media--primary-100--hover-color-background** - The background color for primary‑100 teaser media in hover state. _(default: undefined)_\n- **--sd-teaser-media--primary-100-color-background** - The default background color for primary‑100 teaser media. _(default: undefined)_\n- **--sd-teaser-media-color-icon-fill** - The default color for the icon in the toggle button. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **expandable** - The container that wraps the expandable.\n- **main** - The container that wraps the main content.\n- **toggle** - The button that toggles the expandable content.",
       "attributes": [
         {
           "name": "variant",