@solid-design-system/components 5.15.12 → 5.16.0-next.0

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

@@ -268,7 +268,7 @@
     },
     {
       "name": "sd-breadcrumb",
-      "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
+      "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
       "attributes": [
         {
           "name": "label",
@@ -314,7 +314,12 @@
         },
         {
           "name": "current",
-          "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+          "description": "When set, the attribute `aria-current=\"page\"` will be applied.",
+          "values": []
+        },
+        {
+          "name": "isMobile",
+          "description": "When set, a chevron-left icon will be rendered.",
           "values": []
         },
         {
@@ -337,7 +342,7 @@
     },
     {
       "name": "sd-button",
-      "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
+      "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Properties:**\n - **--sd-button--primary--active-color-text** - The text color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--default-color-background** - The background color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-text** - The text color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-background** - The background color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-text** - The text color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-background** - The background color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-text** - The text color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-background** - The background color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-background** - The background color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-background** - The background color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-background** - The background color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-text** - The text color for inverted tertiary buttons in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
       "attributes": [
         {
           "name": "title",
@@ -840,7 +845,7 @@
     },
     {
       "name": "sd-dialog",
-      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dialog opens.\n- **sd-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sd-hide** - Emitted when the dialog closes.\n- **sd-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\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 dialog's main content.\n- **headline** - The dialog's headline. Alternatively, you can use the `headline` attribute.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n- **close-button** - The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+      "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dialog opens.\n- **sd-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sd-hide** - Emitted when the dialog closes.\n- **sd-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\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 dialog's main content.\n- **headline** - The dialog's headline. Alternatively, you can use the `headline` attribute.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n- **close-button** - The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the dialog panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the dialog overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
       "attributes": [
         {
           "name": "open",
@@ -909,7 +914,7 @@
     },
     {
       "name": "sd-drawer",
-      "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+      "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
       "attributes": [
         {
           "name": "open",
@@ -956,7 +961,7 @@
     },
     {
       "name": "sd-dropdown",
-      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of the dropdown panel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
       "attributes": [
         {
           "name": "open",
@@ -1131,7 +1136,7 @@
     },
     {
       "name": "sd-header",
-      "description": "Header\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
+      "description": "Header\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
       "attributes": [
         {
           "name": "fixed",
@@ -1465,7 +1470,7 @@
     },
     {
       "name": "sd-link",
-      "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
+      "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
           "name": "standalone",
@@ -1781,7 +1786,7 @@
     },
     {
       "name": "sd-notification",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of panels for toast notifications. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
       "attributes": [
         {
           "name": "variant",
@@ -2151,7 +2156,7 @@
     },
     {
       "name": "sd-radio-button",
-      "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
+      "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
       "attributes": [
         {
           "name": "size",
@@ -2864,7 +2869,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- **removable-indicator** - The tag's removability indicator.\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.",
+      "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- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\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\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.",
       "attributes": [
         {
           "name": "size",
@@ -3167,6 +3172,28 @@
         }
       ]
     },
+    {
+      "name": "sd-theme-listener",
+      "description": "Theme listener is a utility that listens to theme changes and triggers an event.\n---\n\n\n### **Events:**\n - **sd-theme-change** - Emitted when the sd-theme changes.\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.",
+      "attributes": [
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-theme-listener--docs"
+        }
+      ]
+    },
     {
       "name": "sd-tooltip",
       "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",

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.15.12",
+  "version": "5.16.0-next.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -636,7 +636,7 @@
         },
         {
           "name": "sd-breadcrumb",
-          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
+          "description": "A responsive breadcrumb navigation component used to visualize a page's location\nwithin the site's hierarchy and provide easy navigation to previous sections.\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_ - `sd-breadcrumb-item` elements to display in the breadcrumb.\n\n### **CSS Properties:**\n - **--sd-breadcrumb__separator-color** - The color of the breadcrumb separators. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **list** - The list containing the slotted elements.\n- **truncated** - The truncated wrapper.\n- **truncated-dropdown** - The truncated dropdown containing the truncated breadcrumbs.",
           "doc-url": "",
           "attributes": [
             {
@@ -703,7 +703,12 @@
             },
             {
               "name": "current",
-              "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+              "description": "When set, the attribute `aria-current=\"page\"` will be applied.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "isMobile",
+              "description": "When set, a chevron-left icon will be rendered.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -734,7 +739,12 @@
               },
               {
                 "name": "current",
-                "description": "When set, the attribute `aria-current=\"page\"` will be applied",
+                "description": "When set, the attribute `aria-current=\"page\"` will be applied.",
+                "type": "boolean"
+              },
+              {
+                "name": "isMobile",
+                "description": "When set, a chevron-left icon will be rendered.",
                 "type": "boolean"
               },
               {
@@ -753,7 +763,7 @@
         },
         {
           "name": "sd-button",
-          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
+          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Properties:**\n - **--sd-button--primary--active-color-text** - The text color for primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--default-color-background** - The background color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color for primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color for primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--active-color-text** - The text color for inverted primary buttons in active state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-background** - The background color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--default-color-text** - The text color for inverted primary buttons in default state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-background** - The background color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--primary--inverted--hover-color-text** - The text color for inverted primary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--active-color-background** - The background color for secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--hover-color-background** - The background color for secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--secondary--inverted--active-color-background** - The background color for inverted secondary buttons in active state. _(default: undefined)_\n- **--sd-button--secondary--inverted--hover-color-text** - The text color for inverted secondary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--active-color-background** - The background color for tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--hover-color-background** - The background color for tertiary buttons in hover state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--active-color-background** - The background color for inverted tertiary buttons in active state. _(default: undefined)_\n- **--sd-button--tertiary--inverted--hover-color-text** - The text color for inverted tertiary buttons in hover state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.\n- **motion-wrapper** - The container that wraps the motion animation.",
           "doc-url": "",
           "attributes": [
             {
@@ -1935,7 +1945,7 @@
         },
         {
           "name": "sd-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dialog opens.\n- **sd-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sd-hide** - Emitted when the dialog closes.\n- **sd-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\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 dialog's main content.\n- **headline** - The dialog's headline. Alternatively, you can use the `headline` attribute.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n- **close-button** - The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dialog opens.\n- **sd-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sd-hide** - Emitted when the dialog closes.\n- **sd-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\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 dialog's main content.\n- **headline** - The dialog's headline. Alternatively, you can use the `headline` attribute.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n- **close-button** - The dialog's close button. Works best with `<sd-button>` and `<sd-icon>`.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the dialog panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the dialog overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -2122,7 +2132,7 @@
         },
         {
           "name": "sd-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
+          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the drawer opens.\n- **sd-after-show** - Emitted after the drawer opens and all animations are complete.\n- **sd-hide** - Emitted when the drawer closes.\n- **sd-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **sd-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **sd-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\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 drawer's main content.\n- **header** - The drawer's header, usually a title.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the drawer. depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--sd-panel-color-border** - The border color of the drawer panel. _(default: undefined)_\n- **--sd-overlay-color-background** - The background color of the drawer overlay. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and the close-button.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<sd-button>`.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
           "doc-url": "",
           "attributes": [
             {
@@ -2269,7 +2279,7 @@
         },
         {
           "name": "sd-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the dropdown opens.\n- **sd-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **sd-hide** - Emitted when the dropdown closes.\n- **sd-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **getAccessibleTrigger(): _HTMLElement | null_** - Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element\nwithin the slotted trigger. This could be the slotted element itself, a child of the slotted element,\nor an element within the slotted elements shadow root.\n\ne.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.\n\nTo determine this, we assume the first tabbable element in the trigger slot is the \"accessible trigger.\"\n- **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\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 dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<sd-button>` element.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of the dropdown panel. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **base__popup** - The popup's exported `popup` part. Use this to target the dropdowns' popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -2676,7 +2686,7 @@
         },
         {
           "name": "sd-header",
-          "description": "Header\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
+          "description": "Header\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The header's default content.\n\n### **CSS Properties:**\n - **--sd-header-inner-width** - width of the header content _(default: undefined)_\n- **--sd-header-inner-max-width** - max-width of the header content _(default: undefined)_\n- **--sd-header-padding** - padding-left and padding-right of the header content _(default: undefined)_\n- **--sd-header-color-background** - The background color of the header. _(default: undefined)_\n\n### **CSS Parts:**\n - **main** - The container that wraps the header's content.",
           "doc-url": "",
           "attributes": [
             {
@@ -2801,6 +2811,7 @@
                 "description": "The color of the icon.\n\"current\" refers to currentColor and makes it possible to easily style the icon from outside without any CSS variables.",
                 "type": "'currentColor' | 'primary' | 'white'"
               },
+              { "name": "theme", "type": "string | undefined" },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -3358,7 +3369,7 @@
         },
         {
           "name": "sd-link",
-          "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
+          "description": "A link component.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Properties:**\n - **--sd-interactive--active-color-text** - The link's text color when active. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
           "doc-url": "",
           "attributes": [
             {
@@ -3992,7 +4003,7 @@
         },
         {
           "name": "sd-notification",
-          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
+          "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the notification opens.\n- **sd-after-show** - Emitted after the notification opens and all animations are complete.\n- **sd-hide** - Emitted when the notification closes.\n- **sd-after-hide** - Emitted after the notification closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the notification.\n- **hide()** - Hides the notification\n- **toast()** - Displays the notification as a toast notification. This will move the notification out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the notification, you can reuse it by\ncalling this method again. The returned promise will resolve after the notification is hidden.\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 sd-notification's main content.\n- **icon** - An icon to show in the sd-notification. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-panel-color-border** - The border color of panels for toast notifications. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **wrapper** - The container that wraps all the notification elements.\n- **icon** - The container that wraps the optional icon.\n- **content** - The container that wraps the notifications's main content and the close button.\n- **message** - The container that wraps the notifications's main content.\n- **duration-indicator__elapsed** - The current duration indicator.\n- **duration-indicator__total** - The total duration indicator.\n- **close-button** - The close button, an `<sd-icon-button>`.",
           "doc-url": "",
           "attributes": [
             {
@@ -4779,7 +4790,7 @@
         },
         {
           "name": "sd-radio-button",
-          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
+          "description": "Radio buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\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 radio button's label.\n- **icon** - A presentational icon.\n\n### **CSS Properties:**\n - **--sd-button--primary--default-color-background** - The background color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--default-color-text** - The text color of radio-button when checked. _(default: undefined)_\n- **--sd-button--primary--hover-color-background** - The background color of radio-button on hover when checked. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **icon** - The container that wraps the icon.\n- **label** - The container that wraps the radio button's label.",
           "doc-url": "",
           "attributes": [
             {
@@ -6530,7 +6541,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- **removable-indicator** - The tag's removability indicator.\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.",
+          "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- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Properties:**\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\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.",
           "doc-url": "",
           "attributes": [
             {
@@ -7164,6 +7175,49 @@
             ]
           }
         },
+        {
+          "name": "sd-theme-listener",
+          "description": "Theme listener is a utility that listens to theme changes and triggers an event.\n---\n\n\n### **Events:**\n - **sd-theme-change** - Emitted when the sd-theme changes.\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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-theme-change",
+              "description": "Emitted when the sd-theme changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-theme-change",
+                "description": "Emitted when the sd-theme changes."
+              }
+            ]
+          }
+        },
         {
           "name": "sd-tooltip",
           "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the tooltip begins to show.\n- **sd-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sd-hide** - Emitted when the tooltip begins to hide.\n- **sd-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **anchor** - Slot to change the default trigger icon. The default icon is an info circle.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sd-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",

package/dist-versioned/chunks/{chunk.AYDMEA3C.js → chunk.24UVKYTF.js}

@@ -18,7 +18,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   animateTo,
   shimKeyframesHeightAuto,
@@ -210,15 +210,15 @@ var SdNotification = class extends SolidElement {
         warning: "bg-warning",
         error: "bg-error"
       }[this.variant]
-    )}"><sd-5-15-12-icon name="${{
+    )}"><sd-5-16-0-next-0-icon name="${{
       info: "info-circle",
       success: "confirm-circle",
       warning: "exclamation-circle",
       error: "warning"
-    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-15-12-icon></slot><div part="content" class="${cx(
+    }[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-5-16-0-next-0-icon></slot><div part="content" class="${cx(
       "h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
       "border-solid border-[1px] border-l-0 border-neutral-400"
-    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-15-12-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-15-12-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-15-12-icon></sd-5-15-12-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
+    )}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-5-16-0-next-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-5-16-0-next-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-5-16-0-next-0-icon></sd-5-16-0-next-0-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div></div>`;
   }
 };
 /**
@@ -226,7 +226,7 @@ var SdNotification = class extends SolidElement {
  */
 SdNotification.styles = [
   ...SolidElement.styles,
-  css`:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:contents}#notification:hover #duration-indicator__elapsed{animation-play-state:paused!important}`
 ];
 __decorateClass([
   query('[part~="base"]')
@@ -262,7 +262,7 @@ __decorateClass([
   watch("duration")
 ], SdNotification.prototype, "handleDurationChange", 1);
 SdNotification = __decorateClass([
-  customElement("sd-5-15-12-notification")
+  customElement("sd-5-16-0-next-0-notification")
 ], SdNotification);
 setDefaultAnimation("notification.show", {
   keyframes: [

package/dist-versioned/chunks/{chunk.6ITI3HNP.js → chunk.262GD5RA.js}

@@ -16,7 +16,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass,
   __spreadValues
@@ -349,13 +349,13 @@ var SdInput = class extends SolidElement {
     const borderColor = {
       disabled: "border-neutral-500",
       visuallyDisabled: "border-neutral-500",
-      readonly: "border-neutral-800",
+      readonly: "form-control-color-border",
       activeInvalid: "border-error border-2",
       activeValid: "border-success border-2",
       active: "border-primary border-2",
       invalid: "border-error",
       valid: "border-success",
-      default: "border-neutral-800"
+      default: "form-control-color-border"
     }[inputState];
     const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -381,11 +381,11 @@ var SdInput = class extends SolidElement {
       inputState === "disabled" || inputState === "visuallyDisabled" ? "text-neutral-500" : "text-black"
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent",
-      this.visuallyDisabled || this.disabled ? "placeholder-neutral-500 cursor-not-allowed" : "placeholder-neutral-700",
+      this.visuallyDisabled || this.disabled ? "placeholder:text-neutral-500 cursor-not-allowed" : "placeholder:text-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
     )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-5-15-12-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-5-15-12-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-5-15-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-5-15-12-icon></slot>` : html`<slot name="hide-password-icon"><sd-5-15-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-5-15-12-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-5-15-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-5-15-12-icon>` : ""} ${this.type === "time" ? html`<sd-5-15-12-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-5-15-12-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-5-15-12-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-5-15-12-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-5-15-12-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-15-12-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-15-12-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-15-12-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-5-15-12-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-5-15-12-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-5-15-12-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-5-15-12-icon></slot></button></div>` : ""}</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}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
+    ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-5-16-0-next-0-icon class="${cx("text-neutral-700", iconSize)}" library="_internal" name="closing-round"></sd-5-16-0-next-0-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-5-16-0-next-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-5-16-0-next-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-5-16-0-next-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-5-16-0-next-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-5-16-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-5-16-0-next-0-icon>` : ""} ${this.type === "time" ? html`<sd-5-16-0-next-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-5-16-0-next-0-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-5-16-0-next-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-5-16-0-next-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-5-16-0-next-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-5-16-0-next-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-5-16-0-next-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-5-16-0-next-0-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1"><slot name="decrement-number-stepper"><sd-5-16-0-next-0-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-5-16-0-next-0-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-5-16-0-next-0-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-5-16-0-next-0-icon></slot></button></div>` : ""}</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}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 /**
@@ -393,7 +393,7 @@ var SdInput = class extends SolidElement {
  */
 SdInput.styles = [
   ...SolidElement.styles,
-  css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #label:after{content:" *"}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-5-15-12-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-5-16-0-next-0-icon{color:var(--sd-color-text-neutral-500,var(--sd-color-neutral-500))}`
 ];
 __decorateClass([
   query("#input")
@@ -523,7 +523,7 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], SdInput.prototype, "handleValueChange", 1);
 SdInput = __decorateClass([
-  customElement("sd-5-15-12-input")
+  customElement("sd-5-16-0-next-0-input")
 ], SdInput);
 
 export {

package/dist-versioned/chunks/{chunk.QDZS6M4T.js → chunk.2LW2TIND.js}

@@ -1,7 +1,7 @@
 import {
   SolidElement,
   customElement
-} from "./chunk.IRZ3M2OA.js";
+} from "./chunk.USLIZWTB.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -41,16 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
 };
 SdAccordionGroup.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}::slotted(sd-5-15-12-accordion:not(:first-of-type)){margin-top:-1px}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block}::slotted(sd-5-16-0-next-0-accordion:not(:first-of-type)){margin-top:-1px}`
 ];
 __decorateClass([
-  queryAssignedElements({ selector: "sd-5-15-12-accordion" })
+  queryAssignedElements({ selector: "sd-5-16-0-next-0-accordion" })
 ], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
 __decorateClass([
   property({ attribute: "close-others", type: Boolean, reflect: true })
 ], SdAccordionGroup.prototype, "closeOthers", 2);
 SdAccordionGroup = __decorateClass([
-  customElement("sd-5-15-12-accordion-group")
+  customElement("sd-5-16-0-next-0-accordion-group")
 ], SdAccordionGroup);
 
 export {