@solid-design-system/components 6.0.0-next.1 → 6.0.0-next.2

package/dist/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "6.0.0-next.1",
+  "version": "6.0.0-next.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "sd-accordion",
-          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
+          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -706,11 +706,6 @@
               "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" }
-            },
             {
               "name": "dir",
               "description": "The element's directionality.",
@@ -742,11 +737,6 @@
                 "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"
-              },
               {
                 "name": "dir",
                 "description": "The element's directionality.",
@@ -763,7 +753,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 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.",
+          "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- **--sd-button--size-md-font-size** - The medium button text font size. _(default: undefined)_\n- **--sd-button--size-lg-font-size** - The large button text font size. _(default: undefined)_\n- **--sd-button--size-md-border-radius** - The medium button border radius. _(default: undefined)_\n- **--sd-button--size-lg-border-radius** - The large button border radius. _(default: undefined)_\n- **--sd-button--size-md-padding-block** - The medium button vertical padding value. _(default: undefined)_\n- **--sd-button--size-lg-padding-block** - The large button vertical padding value. _(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": [
             {
@@ -1943,6 +1933,378 @@
             ]
           }
         },
+        {
+          "name": "sd-datepicker",
+          "description": "Used to enter or select a date or a range of dates using a calendar view.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the date selection changes.\n- **sd-range-select** - Emitted when the date range selection changes.\n- **sd-select** - Emitted when the date selection changes.\n- **sd-datepicker-close** - Emitted when the datepicker is closed.\n- **sd-focus** - Emitted when the datepicker is focused.\n- **sd-blur** - Emitted when the datepicker is blurred.\n- **sd-month-change** - Emitted when the month is changed.\n- **sd-month-year** - Emitted when the year is changed.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **label** - The label for the date input.\n- **help-text** - The help text, displayed below the input.\n- **tooltip** - The tooltip icon and content.\n\n### **CSS Parts:**\n - **datepicker** - The component's base wrapper.\n- **header** - The header containing the month/year and navigation buttons.\n- **prev-year-button** - The button to go to the previous year.\n- **prev-month-button** - The button to go to the previous month.\n- **month-label** - The month and year label.\n- **next-month-button** - The button to go to the next month.\n- **next-year-button** - The button to go to the next year.\n- **grid** - The calendar grid container.\n- **weekday** - Each weekday label in the calendar header.\n- **day** - Each day button in the calendar grid.\n- **form-control** - The form control wrapper around the input.\n- **form-control-label** - The label for the input.\n- **form-control-input** - The input element.\n- **border** - The border around the input.\n- **invalid-icon** - The icon shown when the input is invalid.\n- **valid-icon** - The icon shown when the input is valid.\n- **form-control-help-text** - The help text, displayed below the input.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "locale",
+              "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+              "value": { "type": "string", "default": "'en-US'" }
+            },
+            {
+              "name": "value",
+              "description": "Selected date in local ISO format (YYYY-MM-DD) when not in range mode.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "range",
+              "description": "Enables date range selection when true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "rangeStart",
+              "description": "Range start date in local ISO format (YYYY-MM-DD).",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "rangeEnd",
+              "description": "Range end date in local ISO format (YYYY-MM-DD).",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "allowSameDayRange",
+              "description": "Allows selecting the same start and end date when true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min",
+              "description": "Minimum selectable date in local ISO format (YYYY-MM-DD).",
+              "value": {
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "max",
+              "description": "Maximum selectable date in local ISO format (YYYY-MM-DD).",
+              "value": {
+                "type": "string | number | Date | undefined",
+                "default": "undefined"
+              }
+            },
+            {
+              "name": "firstDayOfWeek",
+              "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+              "value": { "type": "number | null", "default": "null" }
+            },
+            {
+              "name": "disabled-weekends",
+              "description": "When true, weekends (Saturday/Sunday) are disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled-dates",
+              "description": "List of disabled dates as local ISO strings. Accepts array or CSV/JSON string.",
+              "value": { "type": "string[] | string", "default": "[]" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the input and calendar visuals.",
+              "value": { "type": "'lg' | 'md' | 'sm'", "default": "'lg'" }
+            },
+            {
+              "name": "alignment",
+              "description": "Horizontal alignment of the flyout relative to the input.",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "label",
+              "description": "Text label for the input. Can be overridden with slot=\"label\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the control entirely when true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "style-on-valid",
+              "description": "When true, applies success styling for valid selections.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the input read-only (non-editable) when true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "label", "description": "The label for the date input." },
+            {
+              "name": "help-text",
+              "description": "The help text, displayed below the input."
+            },
+            {
+              "name": "tooltip",
+              "description": "The tooltip icon and content."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-change",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-range-select",
+              "description": "Emitted when the date range selection changes."
+            },
+            {
+              "name": "sd-select",
+              "description": "Emitted when the date selection changes."
+            },
+            {
+              "name": "sd-datepicker-close",
+              "description": "Emitted when the datepicker is closed."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the datepicker is focused."
+            },
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the datepicker is blurred."
+            },
+            {
+              "name": "sd-month-change",
+              "description": "Emitted when the month is changed."
+            },
+            {
+              "name": "sd-month-year",
+              "description": "Emitted when the year is changed."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "localize",
+                "description": "Localize controller used to fetch localized terms/labels."
+              },
+              {
+                "name": "locale",
+                "description": "Used for formatting and announcements (e.g., 'en-US', 'de-DE').",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "Selected date in local ISO format (YYYY-MM-DD) when not in range mode.",
+                "type": "string | null"
+              },
+              {
+                "name": "range",
+                "description": "Enables date range selection when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "rangeStart",
+                "description": "Range start date in local ISO format (YYYY-MM-DD).",
+                "type": "string | null"
+              },
+              {
+                "name": "rangeEnd",
+                "description": "Range end date in local ISO format (YYYY-MM-DD).",
+                "type": "string | null"
+              },
+              {
+                "name": "allowSameDayRange",
+                "description": "Allows selecting the same start and end date when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "Minimum selectable date in local ISO format (YYYY-MM-DD).",
+                "type": "string | number | Date | undefined"
+              },
+              {
+                "name": "max",
+                "description": "Maximum selectable date in local ISO format (YYYY-MM-DD).",
+                "type": "string | number | Date | undefined"
+              },
+              {
+                "name": "firstDayOfWeek",
+                "description": "First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).",
+                "type": "number | null"
+              },
+              {
+                "name": "disabledWeekends",
+                "description": "When true, weekends (Saturday/Sunday) are disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabledDates",
+                "description": "List of disabled dates as local ISO strings. Accepts array or CSV/JSON string.",
+                "type": "string[] | string"
+              },
+              {
+                "name": "isDateDisabled",
+                "description": "Custom predicate that can disable specific dates at runtime.",
+                "type": "((d: Date) => boolean) | null"
+              },
+              {
+                "name": "size",
+                "description": "Size of the input and calendar visuals.",
+                "type": "'lg' | 'md' | 'sm'"
+              },
+              {
+                "name": "alignment",
+                "description": "Horizontal alignment of the flyout relative to the input.",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "label",
+                "description": "Text label for the input. Can be overridden with slot=\"label\".",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "Help text shown below the input. Can be overridden with slot=\"help-text\".",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the control entirely when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Makes the control non-interactive visually (like disabled) without disabling it functionally.",
+                "type": "boolean"
+              },
+              {
+                "name": "styleOnValid",
+                "description": "When true, applies success styling for valid selections.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the input read-only (non-editable) when true.",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "Preferred placement of the flyout relative to the input (top|bottom).",
+                "type": "'top' | 'bottom'"
+              },
+              { "name": "placeholder", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name of the datepicker, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.",
+                "type": "string"
+              },
+              {
+                "name": "hasFocus",
+                "description": "True when the input or calendar has focus.",
+                "type": "boolean"
+              },
+              {
+                "name": "showValidStyle",
+                "description": "Whether to show the valid styling state.",
+                "type": "boolean"
+              },
+              {
+                "name": "showInvalidStyle",
+                "description": "Whether to show the invalid styling state.",
+                "type": "boolean"
+              },
+              {
+                "name": "currentPlacement",
+                "description": "Actual placement currently used by the flyout."
+              },
+              { "name": "validity" },
+              { "name": "validationMessage" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-change",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-range-select",
+                "description": "Emitted when the date range selection changes."
+              },
+              {
+                "name": "sd-select",
+                "description": "Emitted when the date selection changes."
+              },
+              {
+                "name": "sd-datepicker-close",
+                "description": "Emitted when the datepicker is closed."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the datepicker is focused."
+              },
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the datepicker is blurred."
+              },
+              {
+                "name": "sd-month-change",
+                "description": "Emitted when the month is changed."
+              },
+              {
+                "name": "sd-month-year",
+                "description": "Emitted when the year is changed."
+              }
+            ]
+          }
+        },
         {
           "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- **--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.",
@@ -2811,7 +3173,6 @@
                 "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.",
@@ -3724,7 +4085,7 @@
         },
         {
           "name": "sd-menu-item",
-          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\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 menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
+          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Methods:**\n - **getTextLabel(): _string_** - Returns a text label based on the contents of the menu item's default slot.\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 menu item's label.\n- **icon-indent** - Used to prepend an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The offset of the submenu from the parent menu item. _(default: undefined)_\n- **--sd-navigable-border-radius** - The menu-item border radius on hover. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **checked-icon** - The icon shown when the menu item is checked.\n- **icon-indent** - The icon shown when the menu item has an indent.\n- **label** - The menu item's label.\n- **submenu-icon** - The icon shown when the menu item has a submenu.",
           "doc-url": "",
           "attributes": [
             {
@@ -3816,7 +4177,7 @@
         },
         {
           "name": "sd-navigation-item",
-          "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
+          "description": "Flexible button / link component that can be used to quickly build navigations. Takes one of 3 forms: link (overrides all other if 'href' is provided), button (default), or accordion (if 'children' slot defined).\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are hidden.\n- **sd-hide** - Emitted when the navigation item has has children, no href, and is clicked while HTML details are shown.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **description** - *Vertical only: Slot used to provide a description for the navigation item.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--sd-navigation--current-color-text** - The navigation-item text color when current state. _(default: undefined)_\n- **--sd-navigation-color-text** - The navigation-item text color. _(default: undefined)_\n- **--sd-navigable-border-radius** - The navigation-item border radius on hover and active state. _(default: undefined)_\n- **--sd-navigable-font-size** - The navigation-item font size. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius** - The navigation-item current indicator border radius value. _(default: undefined)_\n- **--sd-navigable__current-indicator-height** - The horizontal navigation-item current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-width** - The vertical navigation-item current indicator width. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **chevron** - The container that wraps the chevron.\n- **description** - The component's description area below its main content.\n- **divider** - The component's optional top divider.",
           "doc-url": "",
           "attributes": [
             {
@@ -4570,7 +4931,7 @@
         },
         {
           "name": "sd-quickfact",
-          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
+          "description": "Accordion shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\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 - **icon** - Optional icon to show in the header. Works best with `<sd-icon>`.\n- _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Properties:**\n - **--sd-accordion-border-width** - The accordion border width. _(default: undefined)_\n- **--sd-accordion-color-background** - The accordion background color. _(default: undefined)_\n- **--sd-accordion-color-text** - The accordion color text. _(default: undefined)_\n- **--sd-accordion-padding-block** - The accordion vertical padding value. _(default: undefined)_\n- **--sd-accordion__chevron-color-text** - The accordion chevron color. _(default: undefined)_\n- **--sd-accordion__indicator-color** - The accordion indicator color. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the icon.\n- **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **summary-border** - The container that wraps the currently active accordions border.\n- **content** - The container that wraps the accordion content slot.\n- **content__slot** - The accordion content slot.",
           "doc-url": "",
           "attributes": [
             {
@@ -6317,7 +6678,7 @@
         },
         {
           "name": "sd-tab",
-          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\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 tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
+          "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus to the tab.\n- **blur()** - Removes focus from the tab.\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 tab's label.\n- **left** - Optional element (eg. icon) positioned to the left of the label.\n\n### **CSS Properties:**\n - **--sd-navigable-border-radius:** - The tab border radius on hover. _(default: undefined)_\n- **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **active-tab-indicator** - The active tab indicator.\n- **hover-bottom-border** - The bottom border that appears when the tab is hovered.",
           "doc-url": "",
           "attributes": [
             {
@@ -6411,7 +6772,7 @@
         },
         {
           "name": "sd-tab-group",
-          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\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_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+          "description": "Tab groups organize content into a container that shows one section at a time.\n---\n\n\n### **Events:**\n - **sd-tab-show** - Emitted when a tab is shown.\n- **sd-tab-hide** - Emitted when a tab is hidden.\n\n### **Methods:**\n - **show(panel: _string_)** - Shows the specified tab panel.\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_ - Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.\n- **nav** - Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.\n\n### **CSS Properties:**\n - **--sd-navigable__current-indicator-height:** - The tab current indicator height. _(default: undefined)_\n- **--sd-navigable__current-indicator-border-radius:** - The tab current indicator border radius value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **nav** - The tab group's navigation container where tabs are slotted in.\n- **scroll-container** - The container that wraps the tabs and active-tab-indicator.\n- **tabs** - The container that wraps the tabs.\n- **separation** - The line that separates tabs from panels.\n- **body** - The tab group's body where tab panels are slotted in.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
           "doc-url": "",
           "attributes": [
             {

package/dist-versioned/chunks/{chunk.I7OXSYXU.js → chunk.2ER4MXZC.js}

@@ -13,7 +13,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -130,7 +130,8 @@ var SdSwitch = class extends SolidElement {
  */
 SdSwitch.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host([required]) #label::after{content:' *'}:host([disabled][checked]) #control{border-color:var(--sd-color-background-neutral-500,var(--sd-color-neutral-500))}:host(:not([disabled])) #input:not([aria-invalid=true])~#control #thumb{background-color:var(--sd-color-icon-fill-neutral-800,var(--sd-color-neutral-800))}:host([checked]) [part=thumb]{background-color:var(--sd-color-icon-fill-white,var(--sd-color-white))}:host([disabled]:not([checked])) [part=thumb]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host([required]) #label::after{content:' *'}:host([disabled][checked]) #control{border-color:var(--sd-color-background-neutral-500,var(--sd-color-neutral-500))}:host(:not([disabled]):not([checked])) #input:not([aria-invalid=true])~#control #thumb{background-color:var(--sd-color-icon-fill-neutral-800,var(--sd-color-neutral-800))}:host([checked]) [part=thumb]{background-color:var(--sd-color-icon-fill-white,var(--sd-color-white))}:host([disabled]:not([checked])) [part=thumb]{background-color:var(--sd-color-icon-fill-neutral-500,var(--sd-color-neutral-500))}`
 ];
 __decorateClass([
   query("input")
@@ -172,7 +173,7 @@ __decorateClass([
   watch(["checked"], { waitUntilFirstUpdate: true })
 ], SdSwitch.prototype, "handleStateChange", 1);
 SdSwitch = __decorateClass([
-  customElement("sd-6-0-0-next-1-switch")
+  customElement("sd-6-0-0-next-2-switch")
 ], SdSwitch);
 
 export {

package/dist-versioned/chunks/{chunk.G6T2S742.js → chunk.3BVNSUFD.js}

@@ -7,7 +7,7 @@ import {
 import {
   SolidElement,
   customElement
-} from "./chunk.USLIZWTB.js";
+} from "./chunk.RY4KWEME.js";
 import {
   __decorateClass
 } from "./chunk.S3NI7NKU.js";
@@ -146,7 +146,8 @@ var SdAnimation = class extends SolidElement {
 };
 SdAnimation.styles = [
   ...SolidElement.styles,
-  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */:host{display:contents}`
+  css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+:host{display:contents}`
 ];
 __decorateClass([
   queryAsync("slot")
@@ -208,7 +209,7 @@ __decorateClass([
   watch("playbackRate")
 ], SdAnimation.prototype, "handlePlaybackRateChange", 1);
 SdAnimation = __decorateClass([
-  customElement("sd-6-0-0-next-1-animation")
+  customElement("sd-6-0-0-next-2-animation")
 ], SdAnimation);
 
 export {

package/dist-versioned/chunks/{chunk.7VEM2IPR.js → chunk.3S7EW72P.js}

@@ -14,6 +14,12 @@ var translation = {
   comboboxDefaultPlaceholder: "Please search and select",
   copy: "Copy",
   currentValue: "Current value",
+  datePicker: "Date picker",
+  datePickerInfo: "Use arrow keys to navigate, Enter to select. Page Up/Down changes month. Shift+Page Up/Down changes year",
+  datePickerRange: "Date range picker",
+  datePlaceholder: "Select date",
+  dateRangePlaceholder: "Select date range",
+  endDateSelected: "End date selected",
   expandNavigationItem: "Expand navigation item",
   goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,
   hidePassword: "Hide password",
@@ -21,7 +27,9 @@ var translation = {
   maximum: "Maximum",
   minimum: "Minimum",
   mute: "Mute",
+  nextMonth: "Next month",
   nextSlide: "Next slide",
+  nextYear: "Next year",
   noResults: "No results found",
   notifications: "Notifications",
   numOptionsSelected: (num) => {
@@ -35,7 +43,9 @@ var translation = {
   playAudio: "Play Audio",
   playbackSpeed: "Playback Speed",
   playVideo: "Play Video",
+  previousMonth: "Previous month",
   previousSlide: "Previous slide",
+  previousYear: "Previous year",
   progress: "Progress",
   remove: "Remove",
   removed: (name) => `${name} removed`,
@@ -44,14 +54,17 @@ var translation = {
   scrollToEnd: "Scroll to end",
   scrollToStart: "Scroll to start",
   search: "Search",
-  seekBar: "Seek bar",
   seconds: (time) => `${time} seconds`,
+  seekBar: "Seek bar",
   selectAColorFromTheScreen: "Select a color from the screen",
   selectDefaultPlaceholder: "Please select",
+  selected: "Selected",
+  selectionCleared: "Selection cleared",
   showLess: "Show less",
   showMore: "Show more",
   showPassword: "Show password",
   slideNum: (num) => `Slide ${num}`,
+  startDateSelected: "Start date selected",
   tagsSelected: "Options selected",
   toggleColorFormat: "Toggle color format",
   transcriptIsOpen: "Transcript is open",