@kdcloudjs/shoelace 1.0.31 → 1.0.32

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kdcloudjs/shoelace",
-  "version": "0.0.1",
+  "version": "1.0.32",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -353,6 +353,53 @@
             ]
           }
         },
+        {
+          "name": "sl-badge",
+          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The badge's theme variant.",
+              "value": {
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pulse",
+              "description": "Makes the badge pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The badge's theme variant.",
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style badge with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Makes the badge pulsate to draw attention.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-avatar",
           "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **sl-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -435,53 +482,6 @@
             ]
           }
         },
-        {
-          "name": "sl-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The badge's theme variant.",
-              "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The badge's content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The badge's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style badge with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-breadcrumb",
           "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -1068,143 +1068,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "sl-col",
-          "description": "Col component for grid layout system.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "span",
-              "description": "Number of cells to span (out of 24)",
-              "value": { "type": "ColSpanType | undefined" }
-            },
-            {
-              "name": "offset",
-              "description": "Number of cells to offset from the left",
-              "value": { "type": "ColSpanType | undefined" }
-            },
-            {
-              "name": "order",
-              "description": "Order of the column",
-              "value": { "type": "ColSpanType | undefined" }
-            },
-            {
-              "name": "push",
-              "description": "Number of cells to push from the left",
-              "value": { "type": "ColSpanType | undefined" }
-            },
-            {
-              "name": "pull",
-              "description": "Number of cells to pull from the right",
-              "value": { "type": "ColSpanType | undefined" }
-            },
-            {
-              "name": "flex",
-              "description": "Flex layout style",
-              "value": { "type": "FlexType | undefined" }
-            },
-            {
-              "name": "xs",
-              "description": "Responsive config for xs screens (< 576px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            },
-            {
-              "name": "sm",
-              "description": "Responsive config for sm screens (≥ 576px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            },
-            {
-              "name": "md",
-              "description": "Responsive config for md screens (≥ 768px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            },
-            {
-              "name": "lg",
-              "description": "Responsive config for lg screens (≥ 992px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            },
-            {
-              "name": "xl",
-              "description": "Responsive config for xl screens (≥ 1200px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            },
-            {
-              "name": "xxl",
-              "description": "Responsive config for xxl screens (≥ 1600px)",
-              "value": { "type": "ColSpanType | ColSize | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The default slot for content." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "rowContext", "type": "RowContext" },
-              {
-                "name": "span",
-                "description": "Number of cells to span (out of 24)",
-                "type": "ColSpanType | undefined"
-              },
-              {
-                "name": "offset",
-                "description": "Number of cells to offset from the left",
-                "type": "ColSpanType | undefined"
-              },
-              {
-                "name": "order",
-                "description": "Order of the column",
-                "type": "ColSpanType | undefined"
-              },
-              {
-                "name": "push",
-                "description": "Number of cells to push from the left",
-                "type": "ColSpanType | undefined"
-              },
-              {
-                "name": "pull",
-                "description": "Number of cells to pull from the right",
-                "type": "ColSpanType | undefined"
-              },
-              {
-                "name": "flex",
-                "description": "Flex layout style",
-                "type": "FlexType | undefined"
-              },
-              {
-                "name": "xs",
-                "description": "Responsive config for xs screens (< 576px)",
-                "type": "ColSpanType | ColSize | undefined"
-              },
-              {
-                "name": "sm",
-                "description": "Responsive config for sm screens (≥ 576px)",
-                "type": "ColSpanType | ColSize | undefined"
-              },
-              {
-                "name": "md",
-                "description": "Responsive config for md screens (≥ 768px)",
-                "type": "ColSpanType | ColSize | undefined"
-              },
-              {
-                "name": "lg",
-                "description": "Responsive config for lg screens (≥ 992px)",
-                "type": "ColSpanType | ColSize | undefined"
-              },
-              {
-                "name": "xl",
-                "description": "Responsive config for xl screens (≥ 1200px)",
-                "type": "ColSpanType | ColSize | undefined"
-              },
-              {
-                "name": "xxl",
-                "description": "Responsive config for xxl screens (≥ 1600px)",
-                "type": "ColSpanType | ColSize | undefined"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-checkbox",
           "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the checkbox loses focus.\n- **sl-change** - Emitted when the checked state changes.\n- **sl-focus** - Emitted when the checkbox gains focus.\n- **sl-input** - Emitted when the checkbox receives input.\n- **sl-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 checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<sl-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
@@ -1377,27 +1240,164 @@
           }
         },
         {
-          "name": "sl-color-picker",
-          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the color picker loses focus.\n- **sl-change** - Emitted when the color picker's value changes.\n- **sl-focus** - Emitted when the color picker receives focus.\n- **sl-input** - Emitted when the color picker receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "name": "sl-col",
+          "description": "Col component for grid layout system.\n---\n\n\n### **Slots:**\n - _default_ - The default slot for content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "value": { "type": "string", "default": "''" }
+              "name": "span",
+              "description": "Number of cells to span (out of 24)",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "label",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "offset",
+              "description": "Number of cells to offset from the left",
+              "value": { "type": "ColSpanType | undefined" }
             },
             {
-              "name": "format",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "value": {
-                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'",
-                "default": "'hex'"
-              }
+              "name": "order",
+              "description": "Order of the column",
+              "value": { "type": "ColSpanType | undefined" }
+            },
+            {
+              "name": "push",
+              "description": "Number of cells to push from the left",
+              "value": { "type": "ColSpanType | undefined" }
+            },
+            {
+              "name": "pull",
+              "description": "Number of cells to pull from the right",
+              "value": { "type": "ColSpanType | undefined" }
+            },
+            {
+              "name": "flex",
+              "description": "Flex layout style",
+              "value": { "type": "FlexType | undefined" }
+            },
+            {
+              "name": "xs",
+              "description": "Responsive config for xs screens (< 576px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            },
+            {
+              "name": "sm",
+              "description": "Responsive config for sm screens (≥ 576px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            },
+            {
+              "name": "md",
+              "description": "Responsive config for md screens (≥ 768px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            },
+            {
+              "name": "lg",
+              "description": "Responsive config for lg screens (≥ 992px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            },
+            {
+              "name": "xl",
+              "description": "Responsive config for xl screens (≥ 1200px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            },
+            {
+              "name": "xxl",
+              "description": "Responsive config for xxl screens (≥ 1600px)",
+              "value": { "type": "ColSpanType | ColSize | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot for content." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "rowContext", "type": "RowContext" },
+              {
+                "name": "span",
+                "description": "Number of cells to span (out of 24)",
+                "type": "ColSpanType | undefined"
+              },
+              {
+                "name": "offset",
+                "description": "Number of cells to offset from the left",
+                "type": "ColSpanType | undefined"
+              },
+              {
+                "name": "order",
+                "description": "Order of the column",
+                "type": "ColSpanType | undefined"
+              },
+              {
+                "name": "push",
+                "description": "Number of cells to push from the left",
+                "type": "ColSpanType | undefined"
+              },
+              {
+                "name": "pull",
+                "description": "Number of cells to pull from the right",
+                "type": "ColSpanType | undefined"
+              },
+              {
+                "name": "flex",
+                "description": "Flex layout style",
+                "type": "FlexType | undefined"
+              },
+              {
+                "name": "xs",
+                "description": "Responsive config for xs screens (< 576px)",
+                "type": "ColSpanType | ColSize | undefined"
+              },
+              {
+                "name": "sm",
+                "description": "Responsive config for sm screens (≥ 576px)",
+                "type": "ColSpanType | ColSize | undefined"
+              },
+              {
+                "name": "md",
+                "description": "Responsive config for md screens (≥ 768px)",
+                "type": "ColSpanType | ColSize | undefined"
+              },
+              {
+                "name": "lg",
+                "description": "Responsive config for lg screens (≥ 992px)",
+                "type": "ColSpanType | ColSize | undefined"
+              },
+              {
+                "name": "xl",
+                "description": "Responsive config for xl screens (≥ 1200px)",
+                "type": "ColSpanType | ColSize | undefined"
+              },
+              {
+                "name": "xxl",
+                "description": "Responsive config for xxl screens (≥ 1600px)",
+                "type": "ColSpanType | ColSize | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-color-picker",
+          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the color picker loses focus.\n- **sl-change** - Emitted when the color picker's value changes.\n- **sl-focus** - Emitted when the color picker receives focus.\n- **sl-input** - Emitted when the color picker receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "format",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "value": {
+                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'",
+                "default": "'hex'"
+              }
             },
             {
               "name": "inline",
@@ -2154,103 +2154,6 @@
             ]
           }
         },
-        {
-          "name": "sl-details",
-          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the details opens.\n- **sl-after-show** - Emitted after the details opens and all animations are complete.\n- **sl-hide** - Emitted when the details closes.\n- **sl-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-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- **content** - The details content.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "open",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "summary",
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the details so it can't be toggled.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The details' main content." },
-            {
-              "name": "summary",
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
-            },
-            {
-              "name": "expand-icon",
-              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`."
-            },
-            {
-              "name": "collapse-icon",
-              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-show",
-              "description": "Emitted when the details opens."
-            },
-            {
-              "name": "sl-after-show",
-              "description": "Emitted after the details opens and all animations are complete."
-            },
-            {
-              "name": "sl-hide",
-              "description": "Emitted when the details closes."
-            },
-            {
-              "name": "sl-after-hide",
-              "description": "Emitted after the details closes and all animations are complete."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "details", "type": "HTMLDetailsElement" },
-              { "name": "header", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLElement" },
-              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
-              { "name": "detailsObserver", "type": "MutationObserver" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "summary",
-                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the details so it can't be toggled.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-show",
-                "description": "Emitted when the details opens."
-              },
-              {
-                "name": "sl-after-show",
-                "description": "Emitted after the details opens and all animations are complete."
-              },
-              {
-                "name": "sl-hide",
-                "description": "Emitted when the details closes."
-              },
-              {
-                "name": "sl-after-hide",
-                "description": "Emitted after the details closes and all animations are complete."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-dialog",
           "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the dialog opens.\n- **sl-after-show** - Emitted after the dialog opens and all animations are complete.\n- **sl-hide** - Emitted when the dialog closes.\n- **sl-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **sl-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- **sl-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\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\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- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(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- **header-actions** - Optional actions to add to the header. Works best with `<sl-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
@@ -2389,17 +2292,114 @@
           }
         },
         {
-          "name": "sl-divider",
-          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+          "name": "sl-details",
+          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the details opens.\n- **sl-after-show** - Emitted after the details opens and all animations are complete.\n- **sl-hide** - Emitted when the details closes.\n- **sl-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-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- **content** - The details content.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "vertical",
-              "description": "Draws the divider in a vertical orientation.",
+              "name": "open",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the details so it can't be toggled.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
+          "slots": [
+            { "name": "", "description": "The details' main content." },
+            {
+              "name": "summary",
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+            },
+            {
+              "name": "expand-icon",
+              "description": "Optional expand icon to use instead of the default. Works best with `<sl-icon>`."
+            },
+            {
+              "name": "collapse-icon",
+              "description": "Optional collapse icon to use instead of the default. Works best with `<sl-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-show",
+              "description": "Emitted when the details opens."
+            },
+            {
+              "name": "sl-after-show",
+              "description": "Emitted after the details opens and all animations are complete."
+            },
+            {
+              "name": "sl-hide",
+              "description": "Emitted when the details closes."
+            },
+            {
+              "name": "sl-after-hide",
+              "description": "Emitted after the details closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "details", "type": "HTMLDetailsElement" },
+              { "name": "header", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLElement" },
+              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
+              { "name": "detailsObserver", "type": "MutationObserver" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the details so it can't be toggled.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-show",
+                "description": "Emitted when the details opens."
+              },
+              {
+                "name": "sl-after-show",
+                "description": "Emitted after the details opens and all animations are complete."
+              },
+              {
+                "name": "sl-hide",
+                "description": "Emitted when the details closes."
+              },
+              {
+                "name": "sl-after-hide",
+                "description": "Emitted after the details closes and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sl-divider",
+          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Draws the divider in a vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -2699,91 +2699,6 @@
             ]
           }
         },
-        {
-          "name": "sl-float-button-group",
-          "description": "Groups multiple float buttons together, with optional menu trigger.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the menu opens (menu mode only).\n- **sl-hide** - Emitted when the menu closes (menu mode only).\n\n### **Slots:**\n - _default_ - The float buttons to display.\n- **trigger-icon** - Custom icon for the trigger button.\n- **close-icon** - Custom icon shown when the menu is open.\n\n### **CSS Parts:**\n - **base** - The group's base wrapper.\n- **list** - The container for the float button items.\n- **trigger** - The trigger button (menu mode only).\n- **trigger-icon** - The trigger button's icon.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "shape",
-              "description": "The shape applied to all child float buttons.",
-              "value": { "type": "'circle' | 'square'", "default": "'circle'" }
-            },
-            {
-              "name": "trigger",
-              "description": "The trigger mode for menu. When set, shows a trigger button that toggles the menu.",
-              "value": { "type": "'click' | 'hover' | ''", "default": "''" }
-            },
-            {
-              "name": "open",
-              "description": "Whether the menu is open (controlled mode, use with trigger).",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "placement",
-              "description": "The direction the menu items expand.",
-              "value": {
-                "type": "'top' | 'right' | 'bottom' | 'left'",
-                "default": "'top'"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The float buttons to display." },
-            {
-              "name": "trigger-icon",
-              "description": "Custom icon for the trigger button."
-            },
-            {
-              "name": "close-icon",
-              "description": "Custom icon shown when the menu is open."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-show",
-              "description": "Emitted when the menu opens (menu mode only)."
-            },
-            {
-              "name": "sl-hide",
-              "description": "Emitted when the menu closes (menu mode only)."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "shape",
-                "description": "The shape applied to all child float buttons.",
-                "type": "'circle' | 'square'"
-              },
-              {
-                "name": "trigger",
-                "description": "The trigger mode for menu. When set, shows a trigger button that toggles the menu.",
-                "type": "'click' | 'hover' | ''"
-              },
-              {
-                "name": "open",
-                "description": "Whether the menu is open (controlled mode, use with trigger).",
-                "type": "boolean"
-              },
-              {
-                "name": "placement",
-                "description": "The direction the menu items expand.",
-                "type": "'top' | 'right' | 'bottom' | 'left'"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-show",
-                "description": "Emitted when the menu opens (menu mode only)."
-              },
-              {
-                "name": "sl-hide",
-                "description": "Emitted when the menu closes (menu mode only)."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-float-button",
           "description": "A floating action button that stays fixed on the page.\n---\n\n\n### **Events:**\n - **sl-click** - Emitted when the button is clicked.\n\n### **Slots:**\n - _default_ - The button's icon content.\n- **content** - Optional text content (only visible when shape is square).\n\n### **CSS Parts:**\n - **base** - The button's base wrapper.\n- **icon** - The icon container.\n- **content** - The text content container.",
@@ -2914,81 +2829,212 @@
           }
         },
         {
-          "name": "sl-format-date",
-          "description": "Formats a date/time using the specified locale and options.\n---\n",
+          "name": "sl-float-button-group",
+          "description": "Groups multiple float buttons together, with optional menu trigger.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the menu opens (menu mode only).\n- **sl-hide** - Emitted when the menu closes (menu mode only).\n\n### **Slots:**\n - _default_ - The float buttons to display.\n- **trigger-icon** - Custom icon for the trigger button.\n- **close-icon** - Custom icon shown when the menu is open.\n\n### **CSS Parts:**\n - **base** - The group's base wrapper.\n- **list** - The container for the float button items.\n- **trigger** - The trigger button (menu mode only).\n- **trigger-icon** - The trigger button's icon.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "date",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "value": { "type": "Date | string", "default": "new Date()" }
-            },
-            {
-              "name": "weekday",
-              "description": "The format for displaying the weekday.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
+              "name": "shape",
+              "description": "The shape applied to all child float buttons.",
+              "value": { "type": "'circle' | 'square'", "default": "'circle'" }
             },
             {
-              "name": "era",
-              "description": "The format for displaying the era.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
+              "name": "trigger",
+              "description": "The trigger mode for menu. When set, shows a trigger button that toggles the menu.",
+              "value": { "type": "'click' | 'hover' | ''", "default": "''" }
             },
             {
-              "name": "year",
-              "description": "The format for displaying the year.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "open",
+              "description": "Whether the menu is open (controlled mode, use with trigger).",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "month",
-              "description": "The format for displaying the month.",
+              "name": "placement",
+              "description": "The direction the menu items expand.",
               "value": {
-                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "type": "'top' | 'right' | 'bottom' | 'left'",
+                "default": "'top'"
               }
-            },
-            {
-              "name": "day",
-              "description": "The format for displaying the day.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
-            {
-              "name": "hour",
-              "description": "The format for displaying the hour.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
-            {
-              "name": "minute",
-              "description": "The format for displaying the minute.",
-              "value": { "type": "'numeric' | '2-digit'" }
-            },
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The float buttons to display." },
             {
-              "name": "second",
-              "description": "The format for displaying the second.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "trigger-icon",
+              "description": "Custom icon for the trigger button."
             },
             {
-              "name": "time-zone-name",
-              "description": "The format for displaying the time.",
-              "value": { "type": "'short' | 'long'" }
-            },
+              "name": "close-icon",
+              "description": "Custom icon shown when the menu is open."
+            }
+          ],
+          "events": [
             {
-              "name": "time-zone",
-              "description": "The time zone to express the time in.",
-              "value": { "type": "string" }
+              "name": "sl-show",
+              "description": "Emitted when the menu opens (menu mode only)."
             },
             {
-              "name": "hour-format",
-              "description": "The format for displaying the hour.",
-              "value": { "type": "'auto' | '12' | '24'", "default": "'auto'" }
+              "name": "sl-hide",
+              "description": "Emitted when the menu closes (menu mode only)."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "date",
-                "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-                "type": "Date | string"
-              },
+                "name": "shape",
+                "description": "The shape applied to all child float buttons.",
+                "type": "'circle' | 'square'"
+              },
+              {
+                "name": "trigger",
+                "description": "The trigger mode for menu. When set, shows a trigger button that toggles the menu.",
+                "type": "'click' | 'hover' | ''"
+              },
+              {
+                "name": "open",
+                "description": "Whether the menu is open (controlled mode, use with trigger).",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "The direction the menu items expand.",
+                "type": "'top' | 'right' | 'bottom' | 'left'"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-show",
+                "description": "Emitted when the menu opens (menu mode only)."
+              },
+              {
+                "name": "sl-hide",
+                "description": "Emitted when the menu closes (menu mode only)."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sl-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The number to format in bytes.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
+            },
+            {
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "value": {
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format in bytes.",
+                "type": "number"
+              },
+              {
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
+              },
+              {
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "sl-format-date",
+          "description": "Formats a date/time using the specified locale and options.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "date",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "value": { "type": "Date | string", "default": "new Date()" }
+            },
+            {
+              "name": "weekday",
+              "description": "The format for displaying the weekday.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
+            },
+            {
+              "name": "era",
+              "description": "The format for displaying the era.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
+            },
+            {
+              "name": "year",
+              "description": "The format for displaying the year.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "month",
+              "description": "The format for displaying the month.",
+              "value": {
+                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              }
+            },
+            {
+              "name": "day",
+              "description": "The format for displaying the day.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "hour",
+              "description": "The format for displaying the hour.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "minute",
+              "description": "The format for displaying the minute.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "second",
+              "description": "The format for displaying the second.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "time-zone-name",
+              "description": "The format for displaying the time.",
+              "value": { "type": "'short' | 'long'" }
+            },
+            {
+              "name": "time-zone",
+              "description": "The time zone to express the time in.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "hour-format",
+              "description": "The format for displaying the hour.",
+              "value": { "type": "'auto' | '12' | '24'", "default": "'auto'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "date",
+                "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+                "type": "Date | string"
+              },
               {
                 "name": "weekday",
                 "description": "The format for displaying the weekday.",
@@ -3048,52 +3094,6 @@
             "events": []
           }
         },
-        {
-          "name": "sl-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The number to format in bytes.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
-            },
-            {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format in bytes.",
-                "type": "number"
-              },
-              {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
-              },
-              {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-format-number",
           "description": "Formats a number using the specified locale and options.\n---\n",
@@ -3284,6 +3284,55 @@
             ]
           }
         },
+        {
+          "name": "sl-image-comparer",
+          "description": "Compare visual differences between similar photos with a sliding panel.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the position changes.\n\n### **Slots:**\n - **before** - The before image, an `<img>` or `<svg>` element.\n- **after** - The after image, an `<img>` or `<svg>` element.\n- **handle** - The icon used inside the handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the dividing line. _(default: undefined)_\n- **--handle-size** - The size of the compare handle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **before** - The container that wraps the before image.\n- **after** - The container that wraps the after image.\n- **divider** - The divider that separates the images.\n- **handle** - The handle that the user drags to expose the after image.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "position",
+              "description": "The position of the divider as a percentage.",
+              "value": { "type": "number", "default": "50" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "before",
+              "description": "The before image, an `<img>` or `<svg>` element."
+            },
+            {
+              "name": "after",
+              "description": "The after image, an `<img>` or `<svg>` element."
+            },
+            {
+              "name": "handle",
+              "description": "The icon used inside the handle."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-change",
+              "description": "Emitted when the position changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "handle", "type": "HTMLElement" },
+              {
+                "name": "position",
+                "description": "The position of the divider as a percentage.",
+                "type": "number"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-change",
+                "description": "Emitted when the position changes."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-icon-button",
           "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the icon button loses focus.\n- **sl-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3402,57 +3451,8 @@
           }
         },
         {
-          "name": "sl-image-comparer",
-          "description": "Compare visual differences between similar photos with a sliding panel.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the position changes.\n\n### **Slots:**\n - **before** - The before image, an `<img>` or `<svg>` element.\n- **after** - The after image, an `<img>` or `<svg>` element.\n- **handle** - The icon used inside the handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the dividing line. _(default: undefined)_\n- **--handle-size** - The size of the compare handle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **before** - The container that wraps the before image.\n- **after** - The container that wraps the after image.\n- **divider** - The divider that separates the images.\n- **handle** - The handle that the user drags to expose the after image.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "position",
-              "description": "The position of the divider as a percentage.",
-              "value": { "type": "number", "default": "50" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "before",
-              "description": "The before image, an `<img>` or `<svg>` element."
-            },
-            {
-              "name": "after",
-              "description": "The after image, an `<img>` or `<svg>` element."
-            },
-            {
-              "name": "handle",
-              "description": "The icon used inside the handle."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-change",
-              "description": "Emitted when the position changes."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "handle", "type": "HTMLElement" },
-              {
-                "name": "position",
-                "description": "The position of the divider as a percentage.",
-                "type": "number"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-change",
-                "description": "Emitted when the position changes."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the included file is loaded.\n- **sl-error** - Emitted when the included file fails to load due to an error.",
+          "name": "sl-include",
+          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the included file is loaded.\n- **sl-error** - Emitted when the included file fails to load due to an error.",
           "doc-url": "",
           "attributes": [
             {
@@ -4431,6 +4431,180 @@
             "events": []
           }
         },
+        {
+          "name": "sl-nav-item",
+          "description": "Nav items are the individual links or buttons within a navigation menu.\n---\n\n\n### **Events:**\n - **sl-nav-select** - Emitted when a nav item is selected.\n\n### **Slots:**\n - _default_ - The nav item's label.\n- **prefix** - Used to prepend an icon or similar element to the nav item.\n- **suffix** - Used to append an icon or similar element to the nav item.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The prefix container.\n- **label** - The nav item label.\n- **suffix** - The suffix container.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "key",
+              "description": "A stable key used by `sl-nav` to track selection.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "item-key",
+              "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "danger",
+              "description": "Matches Antd's `danger` item flag.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "title",
+              "description": "Tooltip text, primarily used when the menu is collapsed.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Draws the nav item in a disabled state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "active",
+              "description": "Draws the nav item in an active (selected) state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "target",
+              "description": "The target attribute for the anchor tag.",
+              "value": { "type": "'_blank' | '_parent' | '_self' | '_top'" }
+            },
+            {
+              "name": "download",
+              "description": "The download attribute for the anchor tag.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rel",
+              "description": "The rel attribute for the anchor tag.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "mode",
+              "description": "The mode of navigation.",
+              "value": {
+                "type": "'horizontal' | 'inline' | 'vertical'",
+                "default": "'inline'"
+              }
+            },
+            {
+              "name": "collapsed",
+              "description": "Whether the parent nav is in inline-collapsed mode.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The nav item's label." },
+            {
+              "name": "prefix",
+              "description": "Used to prepend an icon or similar element to the nav item."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append an icon or similar element to the nav item."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-nav-select",
+              "type": "{ item: SlNavItem }",
+              "description": "Emitted when a nav item is selected."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "key",
+                "description": "A stable key used by `sl-nav` to track selection.",
+                "type": "string"
+              },
+              {
+                "name": "itemKey",
+                "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Alternate label content when using Antd-style `items` configuration.",
+                "type": "unknown | undefined"
+              },
+              {
+                "name": "icon",
+                "description": "Alternate icon content when using Antd-style `items` configuration.",
+                "type": "unknown | undefined"
+              },
+              {
+                "name": "extra",
+                "description": "Extra content shown at the end of the item.",
+                "type": "unknown | undefined"
+              },
+              {
+                "name": "danger",
+                "description": "Matches Antd's `danger` item flag.",
+                "type": "boolean"
+              },
+              {
+                "name": "title",
+                "description": "Tooltip text, primarily used when the menu is collapsed.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Draws the nav item in a disabled state.",
+                "type": "boolean"
+              },
+              {
+                "name": "active",
+                "description": "Draws the nav item in an active (selected) state.",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "The target attribute for the anchor tag.",
+                "type": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              {
+                "name": "download",
+                "description": "The download attribute for the anchor tag.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "The rel attribute for the anchor tag.",
+                "type": "string"
+              },
+              {
+                "name": "mode",
+                "description": "The mode of navigation.",
+                "type": "'horizontal' | 'inline' | 'vertical'"
+              },
+              {
+                "name": "collapsed",
+                "description": "Whether the parent nav is in inline-collapsed mode.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-nav-select",
+                "type": "{ item: SlNavItem }",
+                "description": "Emitted when a nav item is selected."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-nav-submenu",
           "description": "Nav submenus are used to group related nav items in a hierarchical structure.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the submenu opens.\n- **sl-after-show** - Emitted after the submenu opens and all animations are complete.\n- **sl-hide** - Emitted when the submenu closes.\n- **sl-after-hide** - Emitted after the submenu closes and all animations are complete.\n\n### **Methods:**\n - **show(source: _'api' | 'nav' | 'user'_)** - Shows the submenu.\n- **hide(source: _'api' | 'nav' | 'user'_)** - Hides the submenu.\n\n### **Slots:**\n - _default_ - The nav items within the submenu.\n- **title** - The nav submenu's title.\n- **prefix** - Used to prepend an icon or similar element to the nav submenu.\n- **suffix** - Used to append an icon or similar element to the nav submenu.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sl-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps the title, prefix, suffix and expand/collapse icon.\n- **prefix** - The prefix container.\n- **label** - The nav submenu label.\n- **suffix** - The suffix container.\n- **expand-icon** - The container that wraps the expand/collapse icons.\n- **content** - The nav submenu content.\n- **popup** - The popup that wraps the content in horizontal mode.",
@@ -4683,212 +4857,38 @@
           }
         },
         {
-          "name": "sl-nav-item",
-          "description": "Nav items are the individual links or buttons within a navigation menu.\n---\n\n\n### **Events:**\n - **sl-nav-select** - Emitted when a nav item is selected.\n\n### **Slots:**\n - _default_ - The nav item's label.\n- **prefix** - Used to prepend an icon or similar element to the nav item.\n- **suffix** - Used to append an icon or similar element to the nav item.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The prefix container.\n- **label** - The nav item label.\n- **suffix** - The suffix container.",
+          "name": "sl-pagination",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
+            { "name": "currentPage", "value": { "type": "number" } },
             {
-              "name": "key",
-              "description": "A stable key used by `sl-nav` to track selection.",
-              "value": { "type": "string", "default": "''" }
+              "name": "pageSize",
+              "value": { "type": "number", "default": "20" }
             },
             {
-              "name": "item-key",
-              "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "pageSizeOpts",
+              "value": { "type": "array", "default": "[10, 20, 50, 100]" }
             },
             {
-              "name": "danger",
-              "description": "Matches Antd's `danger` item flag.",
+              "name": "total",
+              "value": { "type": "number", "default": "5000" }
+            },
+            {
+              "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "title",
-              "description": "Tooltip text, primarily used when the menu is collapsed.",
+              "name": "className",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "disabled",
-              "description": "Draws the nav item in a disabled state.",
+              "name": "simpleMode",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "active",
-              "description": "Draws the nav item in an active (selected) state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "href",
-              "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "target",
-              "description": "The target attribute for the anchor tag.",
-              "value": { "type": "'_blank' | '_parent' | '_self' | '_top'" }
-            },
-            {
-              "name": "download",
-              "description": "The download attribute for the anchor tag.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "rel",
-              "description": "The rel attribute for the anchor tag.",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
-            },
-            {
-              "name": "mode",
-              "description": "The mode of navigation.",
-              "value": {
-                "type": "'horizontal' | 'inline' | 'vertical'",
-                "default": "'inline'"
-              }
-            },
-            {
-              "name": "collapsed",
-              "description": "Whether the parent nav is in inline-collapsed mode.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The nav item's label." },
-            {
-              "name": "prefix",
-              "description": "Used to prepend an icon or similar element to the nav item."
-            },
-            {
-              "name": "suffix",
-              "description": "Used to append an icon or similar element to the nav item."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-nav-select",
-              "type": "{ item: SlNavItem }",
-              "description": "Emitted when a nav item is selected."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "key",
-                "description": "A stable key used by `sl-nav` to track selection.",
-                "type": "string"
-              },
-              {
-                "name": "itemKey",
-                "description": "React-safe alias for `key`.\n\nReact reserves `key` and won't forward it to custom elements, so wrapper users can pass `itemKey` instead.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "Alternate label content when using Antd-style `items` configuration.",
-                "type": "unknown | undefined"
-              },
-              {
-                "name": "icon",
-                "description": "Alternate icon content when using Antd-style `items` configuration.",
-                "type": "unknown | undefined"
-              },
-              {
-                "name": "extra",
-                "description": "Extra content shown at the end of the item.",
-                "type": "unknown | undefined"
-              },
-              {
-                "name": "danger",
-                "description": "Matches Antd's `danger` item flag.",
-                "type": "boolean"
-              },
-              {
-                "name": "title",
-                "description": "Tooltip text, primarily used when the menu is collapsed.",
-                "type": "string"
-              },
-              {
-                "name": "disabled",
-                "description": "Draws the nav item in a disabled state.",
-                "type": "boolean"
-              },
-              {
-                "name": "active",
-                "description": "Draws the nav item in an active (selected) state.",
-                "type": "boolean"
-              },
-              {
-                "name": "href",
-                "description": "The URL to link to. If set, the nav item will render as an anchor tag.",
-                "type": "string"
-              },
-              {
-                "name": "target",
-                "description": "The target attribute for the anchor tag.",
-                "type": "'_blank' | '_parent' | '_self' | '_top'"
-              },
-              {
-                "name": "download",
-                "description": "The download attribute for the anchor tag.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "rel",
-                "description": "The rel attribute for the anchor tag.",
-                "type": "string"
-              },
-              {
-                "name": "mode",
-                "description": "The mode of navigation.",
-                "type": "'horizontal' | 'inline' | 'vertical'"
-              },
-              {
-                "name": "collapsed",
-                "description": "Whether the parent nav is in inline-collapsed mode.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-nav-select",
-                "type": "{ item: SlNavItem }",
-                "description": "Emitted when a nav item is selected."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-pagination",
-          "description": "\n---\n",
-          "doc-url": "",
-          "attributes": [
-            { "name": "currentPage", "value": { "type": "number" } },
-            {
-              "name": "pageSize",
-              "value": { "type": "number", "default": "20" }
-            },
-            {
-              "name": "pageSizeOpts",
-              "value": { "type": "array", "default": "[10, 20, 50, 100]" }
-            },
-            {
-              "name": "total",
-              "value": { "type": "number", "default": "5000" }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "className",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "simpleMode",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "direction",
-              "value": { "type": "'ltr' | 'rtl'", "default": "'ltr'" }
+              "name": "direction",
+              "value": { "type": "'ltr' | 'rtl'", "default": "'ltr'" }
             },
             {
               "name": "defaultCurrentPage",
@@ -5178,44 +5178,6 @@
             ]
           }
         },
-        {
-          "name": "sl-progress-ring",
-          "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The current progress as a percentage, 0 to 100.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "label",
-              "description": "A custom label for assistive devices.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "A label to show inside the ring." }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "indicator", "type": "SVGCircleElement" },
-              { "name": "indicatorOffset", "type": "string" },
-              {
-                "name": "value",
-                "description": "The current progress as a percentage, 0 to 100.",
-                "type": "number"
-              },
-              {
-                "name": "label",
-                "description": "A custom label for assistive devices.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "sl-progress-bar",
           "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
@@ -5349,6 +5311,44 @@
             "events": []
           }
         },
+        {
+          "name": "sl-progress-ring",
+          "description": "Progress rings are used to show the progress of a determinate operation in a circular fashion.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the ring.\n\n### **CSS Properties:**\n - **--size** - The diameter of the progress ring (cannot be a percentage). _(default: undefined)_\n- **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-width** - The width of the indicator. Defaults to the track width. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--indicator-transition-duration** - The duration of the indicator's transition when the value changes. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The progress ring label.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The current progress as a percentage, 0 to 100.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "label",
+              "description": "A custom label for assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "A label to show inside the ring." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "indicator", "type": "SVGCircleElement" },
+              { "name": "indicatorOffset", "type": "string" },
+              {
+                "name": "value",
+                "description": "The current progress as a percentage, 0 to 100.",
+                "type": "number"
+              },
+              {
+                "name": "label",
+                "description": "A custom label for assistive devices.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sl-radio",
           "description": "Radios allow the user to select a single option from a group.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-focus** - Emitted when the control gains focus.\n\n### **Slots:**\n - _default_ - The radio's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The circular container that wraps the radio's checked state.\n- **control--checked** - The radio control when the radio is checked.\n- **checked-icon** - The checked icon, an `<sl-icon>` element.\n- **label** - The container that wraps the radio's label.",
@@ -7368,6 +7368,10 @@
               "value": {
                 "type": "TableProps<TData>['slRowReorder'] | undefined"
               }
+            },
+            {
+              "name": "summary",
+              "value": { "type": "TableProps<TData>['summary'] | undefined" }
             }
           ],
           "events": [{ "name": "change", "type": "CustomEvent" }],
@@ -7433,6 +7437,10 @@
                 "description": "行拖拽排序后的回调",
                 "type": "TableProps<TData>['slRowReorder'] | undefined"
               },
+              {
+                "name": "summary",
+                "type": "TableProps<TData>['summary'] | undefined"
+              },
               { "name": "rowSelectedMap", "type": "RowSelectionState" },
               { "name": "expandedMap", "type": "ExpandedState" },
               { "name": "sorting", "type": "SortingState" },
@@ -7451,6 +7459,7 @@
               { "name": "setScrollPositionClassName" },
               { "name": "generateCustomCellSlot" },
               { "name": "generateCustomRowSlot" },
+              { "name": "generateCustomTfootSlot" },
               { "name": "handleFilterDropdownChange" },
               { "name": "handlePaginationChange" }
             ],
@@ -7458,8 +7467,78 @@
           }
         },
         {
-          "name": "sl-textarea",
-          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-input** - Emitted when the control receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
+          "name": "sl-tag",
+          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sl-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<sl-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The tag's theme variant.",
+              "value": {
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
+                "default": "'neutral'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable and shows a remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tag's content." }],
+          "events": [
+            {
+              "name": "sl-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The tag's theme variant.",
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style tag with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable and shows a remove button.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sl-textarea",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the control loses focus.\n- **sl-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-input** - Emitted when the control receives input.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -7771,76 +7850,6 @@
             ]
           }
         },
-        {
-          "name": "sl-tag",
-          "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sl-remove** - Emitted when the remove button is activated.\n\n### **Slots:**\n - _default_ - The tag's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **remove-button** - The tag's remove button, an `<sl-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "description": "The tag's theme variant.",
-              "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
-                "default": "'neutral'"
-              }
-            },
-            {
-              "name": "size",
-              "description": "The tag's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "removable",
-              "description": "Makes the tag removable and shows a remove button.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The tag's content." }],
-          "events": [
-            {
-              "name": "sl-remove",
-              "description": "Emitted when the remove button is activated."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "description": "The tag's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
-              },
-              {
-                "name": "size",
-                "description": "The tag's size.",
-                "type": "'small' | 'medium' | 'large'"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style tag with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "removable",
-                "description": "Makes the tag removable and shows a remove button.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-remove",
-                "description": "Emitted when the remove button is activated."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-think",
           "description": "Think is used to display an AI model's thinking process with expandable/collapsible content.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when the think block starts expanding (before animation). Equivalent to React's `onExpand(true)`.\n- **sl-collapse** - Emitted when the think block starts collapsing (before animation). Equivalent to React's `onExpand(false)`.\n\n### **Methods:**\n - **handleExpandedChange()** - Runs AFTER the first render whenever `expanded` changes.\nEmits the appropriate event immediately (matching React's `onExpand` timing,\nwhich fires before the animation), then plays the expand/collapse animation.\n\n### **Slots:**\n - _default_ - The thinking content body.\n- **title** - Rich HTML content for the status bar title. Overrides the `title` attribute.\n- **icon** - A custom icon displayed in the status bar when not loading. Defaults to the Think icon.\n- **loading-icon** - A custom icon displayed when `loading` is true. Overrides the default spinner. This is the web-component equivalent of passing a ReactNode to the React `loading` prop.\n\n### **CSS Properties:**\n - **--sl-c-think-TitleTextBlink-color-default** - Base text color shown during the blink/shimmer animation. Equivalent to React's `colorTextBlinkDefault` (`colorTextDescription`) design token. Defaults to `var(--sl-color-neutral-600)`. _(default: undefined)_\n- **--sl-c-think-TitleTextBlink-color** - Highlight (shine) color of the blink shimmer beam. Equivalent to React's `colorTextBlink` (`colorTextBase`) design token. Defaults to `var(--sl-color-neutral-900)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (maps to React's `root` semantic DOM).\n- **status** - The clickable status bar: icon + title + chevron (maps to React's `status` semantic DOM).\n- **status-icon** - The icon container within the status bar.\n- **status-text** - The title text area within the status bar.\n- **chevron** - The expand/collapse chevron indicator.\n- **body** - The collapsible body container.\n- **content** - The content area inside the body (maps to React's `content` semantic DOM).",
@@ -7938,6 +7947,75 @@
             ]
           }
         },
+        {
+          "name": "sl-thought-chain",
+          "description": "ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.\nIt renders a vertical list of nodes, each optionally with an icon, title, description,\ncollapsible content, footer, and status indicator. Nodes are connected by a vertical line.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.\n\n### **Methods:**\n - **getExpandedKeys(): _string[]_** - Get the effective expanded keys\n- **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node\n\n### **Slots:**\n - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).\n\n### **CSS Properties:**\n - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_\n- **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_\n- **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Size of the thought chain nodes.\n- `'small'`: compact layout\n- `'middle'`: default size\n- `'large'`: spacious layout",
+              "value": { "type": "ThoughtChainSize", "default": "'middle'" }
+            },
+            {
+              "name": "line",
+              "description": "Line connector style between nodes.\n- `true` or `'solid'`: solid line (default)\n- `'dashed'`: dashed line\n- `'dotted'`: dotted line\n- `false`: no line\n\nNote: HTML attributes are always strings. Use `line=\"solid\"` / `line=\"dashed\"` / `line=\"dotted\"`.\nTo hide the line, use `line=\"none\"`. Programmatically, you can also set `el.line = false`.",
+              "value": { "type": "ThoughtChainLineStyle", "default": "true" }
+            },
+            {
+              "name": "default-expanded-keys",
+              "description": "Keys of initially expanded collapsible nodes (uncontrolled mode).\nSet as a JSON array string attribute or via JS property.",
+              "value": { "type": "string[]", "default": "[]" }
+            },
+            {
+              "name": "expanded-keys",
+              "description": "Keys of currently expanded collapsible nodes (controlled mode).\nWhen set, you must update this in response to `sl-expand` events.",
+              "value": { "type": "string[] | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default slot for `<sl-thought-chain-node>` elements (declarative usage)."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-expand",
+              "description": "Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "Size of the thought chain nodes.\n- `'small'`: compact layout\n- `'middle'`: default size\n- `'large'`: spacious layout",
+                "type": "ThoughtChainSize"
+              },
+              {
+                "name": "line",
+                "description": "Line connector style between nodes.\n- `true` or `'solid'`: solid line (default)\n- `'dashed'`: dashed line\n- `'dotted'`: dotted line\n- `false`: no line\n\nNote: HTML attributes are always strings. Use `line=\"solid\"` / `line=\"dashed\"` / `line=\"dotted\"`.\nTo hide the line, use `line=\"none\"`. Programmatically, you can also set `el.line = false`.",
+                "type": "ThoughtChainLineStyle"
+              },
+              {
+                "name": "defaultExpandedKeys",
+                "description": "Keys of initially expanded collapsible nodes (uncontrolled mode).\nSet as a JSON array string attribute or via JS property.",
+                "type": "string[]"
+              },
+              {
+                "name": "expandedKeys",
+                "description": "Keys of currently expanded collapsible nodes (controlled mode).\nWhen set, you must update this in response to `sl-expand` events.",
+                "type": "string[] | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "sl-expand",
+                "description": "Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-thought-chain-item",
           "description": "A standalone thought chain item badge/tag. Used for displaying individual\naction/tool entries outside of a full thought chain. Supports variants (solid, outlined, text),\nstatus indicators, and click/disabled states.\n\nThis is the web component equivalent of React's `ThoughtChain.Item`.\n---\n\n\n### **Events:**\n - **sl-click** - Emitted when the item is clicked (only when not disabled and has a click handler).\n\n### **Slots:**\n - _default_ - Default slot (not used, reserved).\n- **icon** - Custom icon to display.\n- **title** - The item's title. Alternatively, use the `title` attribute.\n- **description** - The item's description text. Alternatively, use the `description` attribute.\n\n### **CSS Parts:**\n - **base** - The item's base wrapper.\n- **icon** - The icon container.\n- **content** - The content wrapper containing title and description.\n- **title** - The title area.\n- **description** - The description area.",
@@ -8163,6 +8241,99 @@
             "events": []
           }
         },
+        {
+          "name": "sl-timepicker",
+          "description": "A time picker component that provides a time selection interface.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-input** - Emitted when the control's value changes.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-clear** - Emitted when the clear button is activated.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - The input's prefix, to prepend to the input.\n- **suffix** - The input's suffix, to append to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "format",
+              "value": { "type": "string", "default": "'HH:mm:ss'" }
+            },
+            { "name": "pattern", "value": { "type": "string" } }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "The input's prefix, to prepend to the input."
+            },
+            {
+              "name": "suffix",
+              "description": "The input's suffix, to append to the input."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "help-text",
+              "description": "Help text that describes the input. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "sl-change",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "sl-input",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "sl-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sl-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sl-clear",
+              "description": "Emitted when the clear button is activated."
+            },
+            {
+              "name": "sl-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "timePanel", "type": "SlTimePanel" },
+              { "name": "format", "type": "string" },
+              { "name": "pattern", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "sl-change",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "sl-input",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "sl-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sl-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sl-clear",
+                "description": "Emitted when the clear button is activated."
+              },
+              {
+                "name": "sl-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
         {
           "name": "sl-tooltip",
           "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the tooltip begins to show.\n- **sl-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **sl-hide** - Emitted when the tooltip begins to hide.\n- **sl-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\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\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 `<sl-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.",
@@ -8306,168 +8477,6 @@
             ]
           }
         },
-        {
-          "name": "sl-timepicker",
-          "description": "A time picker component that provides a time selection interface.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-input** - Emitted when the control's value changes.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-clear** - Emitted when the clear button is activated.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - The input's prefix, to prepend to the input.\n- **suffix** - The input's suffix, to append to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **help-text** - Help text that describes the input. Alternatively, you can use the `help-text` attribute.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "format",
-              "value": { "type": "string", "default": "'HH:mm:ss'" }
-            },
-            { "name": "pattern", "value": { "type": "string" } }
-          ],
-          "slots": [
-            {
-              "name": "label",
-              "description": "The input's label. Alternatively, you can use the `label` attribute."
-            },
-            {
-              "name": "prefix",
-              "description": "The input's prefix, to prepend to the input."
-            },
-            {
-              "name": "suffix",
-              "description": "The input's suffix, to append to the input."
-            },
-            {
-              "name": "clear-icon",
-              "description": "An icon to use in lieu of the default clear icon."
-            },
-            {
-              "name": "help-text",
-              "description": "Help text that describes the input. Alternatively, you can use the `help-text` attribute."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-change",
-              "description": "Emitted when the control's value changes."
-            },
-            {
-              "name": "sl-input",
-              "description": "Emitted when the control's value changes."
-            },
-            {
-              "name": "sl-focus",
-              "description": "Emitted when the control gains focus."
-            },
-            {
-              "name": "sl-blur",
-              "description": "Emitted when the control loses focus."
-            },
-            {
-              "name": "sl-clear",
-              "description": "Emitted when the clear button is activated."
-            },
-            {
-              "name": "sl-invalid",
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-            }
-          ],
-          "js": {
-            "properties": [
-              { "name": "timePanel", "type": "SlTimePanel" },
-              { "name": "format", "type": "string" },
-              { "name": "pattern", "type": "string" }
-            ],
-            "events": [
-              {
-                "name": "sl-change",
-                "description": "Emitted when the control's value changes."
-              },
-              {
-                "name": "sl-input",
-                "description": "Emitted when the control's value changes."
-              },
-              {
-                "name": "sl-focus",
-                "description": "Emitted when the control gains focus."
-              },
-              {
-                "name": "sl-blur",
-                "description": "Emitted when the control loses focus."
-              },
-              {
-                "name": "sl-clear",
-                "description": "Emitted when the clear button is activated."
-              },
-              {
-                "name": "sl-invalid",
-                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
-              }
-            ]
-          }
-        },
-        {
-          "name": "sl-thought-chain",
-          "description": "ThoughtChain visualizes and tracks an Agent's call chain of Actions and Tools.\nIt renders a vertical list of nodes, each optionally with an icon, title, description,\ncollapsible content, footer, and status indicator. Nodes are connected by a vertical line.\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`.\n\n### **Methods:**\n - **getExpandedKeys(): _string[]_** - Get the effective expanded keys\n- **handleItemExpand(key: _string_)** - Handle expand/collapse toggle from child node\n\n### **Slots:**\n - _default_ - Default slot for `<sl-thought-chain-node>` elements (declarative usage).\n\n### **CSS Properties:**\n - **--sl-thought-chain-gap** - Gap between the icon and the node body. Defaults to `var(--sl-spacing-small)`. _(default: undefined)_\n- **--sl-thought-chain-connector-color** - Color of the vertical connector line. Defaults to `var(--sl-color-neutral-300)`. _(default: undefined)_\n- **--sl-thought-chain-icon-size** - Size of the node icon. Defaults to `var(--sl-font-size-medium)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "Size of the thought chain nodes.\n- `'small'`: compact layout\n- `'middle'`: default size\n- `'large'`: spacious layout",
-              "value": { "type": "ThoughtChainSize", "default": "'middle'" }
-            },
-            {
-              "name": "line",
-              "description": "Line connector style between nodes.\n- `true` or `'solid'`: solid line (default)\n- `'dashed'`: dashed line\n- `'dotted'`: dotted line\n- `false`: no line\n\nNote: HTML attributes are always strings. Use `line=\"solid\"` / `line=\"dashed\"` / `line=\"dotted\"`.\nTo hide the line, use `line=\"none\"`. Programmatically, you can also set `el.line = false`.",
-              "value": { "type": "ThoughtChainLineStyle", "default": "true" }
-            },
-            {
-              "name": "default-expanded-keys",
-              "description": "Keys of initially expanded collapsible nodes (uncontrolled mode).\nSet as a JSON array string attribute or via JS property.",
-              "value": { "type": "string[]", "default": "[]" }
-            },
-            {
-              "name": "expanded-keys",
-              "description": "Keys of currently expanded collapsible nodes (controlled mode).\nWhen set, you must update this in response to `sl-expand` events.",
-              "value": { "type": "string[] | undefined" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Default slot for `<sl-thought-chain-node>` elements (declarative usage)."
-            }
-          ],
-          "events": [
-            {
-              "name": "sl-expand",
-              "description": "Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "Size of the thought chain nodes.\n- `'small'`: compact layout\n- `'middle'`: default size\n- `'large'`: spacious layout",
-                "type": "ThoughtChainSize"
-              },
-              {
-                "name": "line",
-                "description": "Line connector style between nodes.\n- `true` or `'solid'`: solid line (default)\n- `'dashed'`: dashed line\n- `'dotted'`: dotted line\n- `false`: no line\n\nNote: HTML attributes are always strings. Use `line=\"solid\"` / `line=\"dashed\"` / `line=\"dotted\"`.\nTo hide the line, use `line=\"none\"`. Programmatically, you can also set `el.line = false`.",
-                "type": "ThoughtChainLineStyle"
-              },
-              {
-                "name": "defaultExpandedKeys",
-                "description": "Keys of initially expanded collapsible nodes (uncontrolled mode).\nSet as a JSON array string attribute or via JS property.",
-                "type": "string[]"
-              },
-              {
-                "name": "expandedKeys",
-                "description": "Keys of currently expanded collapsible nodes (controlled mode).\nWhen set, you must update this in response to `sl-expand` events.",
-                "type": "string[] | undefined"
-              }
-            ],
-            "events": [
-              {
-                "name": "sl-expand",
-                "description": "Emitted when a collapsible node is expanded or collapsed. `event.detail` contains `{ key: string, expandedKeys: string[] }`."
-              }
-            ]
-          }
-        },
         {
           "name": "sl-tree",
           "description": "Trees allow you to display a hierarchical list of selectable [tree items](/components/tree-item). Items with children can be expanded and collapsed as desired by the user.\n---\n\n\n### **Events:**\n - **sl-selection-change** - Emitted when a tree item is selected or deselected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded. Works best with `<sl-icon>`.\n- **collapse-icon** - The icon to show when the tree item is collapsed. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--indent-size** - The size of the indentation for nested items. _(default: var(--sl-spacing-medium))_\n- **--indent-guide-color** - The color of the indentation line. _(default: var(--sl-color-neutral-200))_\n- **--indent-guide-offset** - The amount of vertical spacing to leave between the top and bottom of the indentation line's starting position. _(default: 0)_\n- **--indent-guide-style** - The style of the indentation line, e.g. solid, dotted, dashed. _(default: solid)_\n- **--indent-guide-width** - The width of the indentation line. _(default: 0)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -8520,17 +8529,6 @@
             ]
           }
         },
-        {
-          "name": "sl-visually-hidden",
-          "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n---\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The content to be visually hidden." }
-          ],
-          "events": [],
-          "js": { "properties": [], "events": [] }
-        },
         {
           "name": "sl-tree-item",
           "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **sl-expand** - Emitted when the tree item expands.\n- **sl-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **sl-collapse** - Emitted when the tree item collapses.\n- **sl-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **sl-lazy-change** - Emitted when the tree item's lazy state changes.\n- **sl-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _SlTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
@@ -8654,6 +8652,17 @@
             ]
           }
         },
+        {
+          "name": "sl-visually-hidden",
+          "description": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.\n---\n\n\n### **Slots:**\n - _default_ - The content to be visually hidden.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The content to be visually hidden." }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "sl-x-markdown",
           "description": "Render markdown content with streaming support and custom node mapping.\n---\n\n\n### **Slots:**\n - _default_ - Not used. Content is rendered from the `content` property only.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **body** - The markdown body container.\n- **paragraph** - Paragraph content.\n- **heading** - Heading elements.\n- **link** - Link elements.\n- **blockquote** - Blockquotes and chat enhanced containers.\n- **list** - List containers.\n- **list-item** - List items.\n- **table** - Table elements.\n- **table-head** - Table header section.\n- **table-body** - Table body section.\n- **table-row** - Table rows.\n- **table-cell** - Table header/data cells.\n- **code-inline** - Inline code nodes.\n- **code-block** - Code block wrapper.\n- **code-block-header** - Code block language header.\n- **code-block-body** - Code block body.\n- **tail** - Streaming tail indicator.\n- **incomplete** - Incomplete markdown placeholder nodes.",