@kdcloudjs/shoelace 1.0.31 → 1.0.32

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

@@ -2,33 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "sl-animated-image",
-      "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
-      "attributes": [
-        {
-          "name": "src",
-          "description": "The path to the image to load.",
-          "values": []
-        },
-        {
-          "name": "alt",
-          "description": "A description of the image used by assistive devices.",
-          "values": []
-        },
-        {
-          "name": "play",
-          "description": "Plays the animation. When this attribute is remove, the animation will pause.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/animated-image"
-        }
-      ]
-    },
     {
       "name": "sl-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **sl-show** - Emitted when the alert opens.\n- **sl-after-show** - Emitted after the alert opens and all animations are complete.\n- **sl-hide** - Emitted when the alert closes.\n- **sl-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's main content.\n- **icon** - An icon to show in the alert. Works best with `<sl-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon** - The container that wraps the optional icon.\n- **message** - The container that wraps the alert's main content.\n- **close-button** - The close button, an `<sl-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
@@ -72,6 +45,33 @@
         }
       ]
     },
+    {
+      "name": "sl-animated-image",
+      "description": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.\n---\n\n\n### **Events:**\n - **sl-load** - Emitted when the image loads successfully.\n- **sl-error** - Emitted when the image fails to load.\n\n### **Slots:**\n - **play-icon** - Optional play icon to use instead of the default. Works best with `<sl-icon>`.\n- **pause-icon** - Optional pause icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--control-box-size** - The size of the icon box. _(default: undefined)_\n- **--icon-size** - The size of the play/pause icons. _(default: undefined)_\n\n### **CSS Parts:**\n - **control-box** - The container that surrounds the pause/play icons and provides their background.",
+      "attributes": [
+        {
+          "name": "src",
+          "description": "The path to the image to load.",
+          "values": []
+        },
+        {
+          "name": "alt",
+          "description": "A description of the image used by assistive devices.",
+          "values": []
+        },
+        {
+          "name": "play",
+          "description": "Plays the animation. When this attribute is remove, the animation will pause.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/animated-image"
+        }
+      ]
+    },
     {
       "name": "sl-animation",
       "description": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n---\n\n\n### **Events:**\n - **sl-cancel** - Emitted when the animation is canceled.\n- **sl-finish** - Emitted when the animation finishes.\n- **sl-start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all keyframe effects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<sl-animation>` elements.",
@@ -139,47 +139,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "image",
-          "description": "The image source to use for the avatar.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A label to use to describe the avatar to assistive devices.",
-          "values": []
-        },
-        {
-          "name": "initials",
-          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-          "values": []
-        },
-        {
-          "name": "loading",
-          "description": "Indicates how the browser should load the image.",
-          "values": [{ "name": "eager" }, { "name": "lazy" }]
-        },
-        {
-          "name": "shape",
-          "description": "The shape of the avatar.",
-          "values": [
-            { "name": "circle" },
-            { "name": "square" },
-            { "name": "rounded" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/avatar"
-        }
-      ]
-    },
     {
       "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.",
@@ -214,51 +173,60 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
+        {
+          "name": "image",
+          "description": "The image source to use for the avatar.",
+          "values": []
+        },
         {
           "name": "label",
-          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+          "description": "A label to use to describe the avatar to assistive devices.",
           "values": []
+        },
+        {
+          "name": "initials",
+          "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+          "values": []
+        },
+        {
+          "name": "loading",
+          "description": "Indicates how the browser should load the image.",
+          "values": [{ "name": "eager" }, { "name": "lazy" }]
+        },
+        {
+          "name": "shape",
+          "description": "The shape of the avatar.",
+          "values": [
+            { "name": "circle" },
+            { "name": "square" },
+            { "name": "rounded" }
+          ]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/breadcrumb"
+          "url": "https://shoelace.style/components/avatar"
         }
       ]
     },
     {
-      "name": "sl-breadcrumb-item",
-      "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
+      "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.",
       "attributes": [
         {
-          "name": "href",
-          "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "Tells the browser where to open the link. Only used when `href` is set.",
-          "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
-          ]
-        },
-        {
-          "name": "rel",
-          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+          "name": "label",
+          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/breadcrumb-item"
+          "url": "https://shoelace.style/components/breadcrumb"
         }
       ]
     },
@@ -410,6 +378,38 @@
         }
       ]
     },
+    {
+      "name": "sl-breadcrumb-item",
+      "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "The `rel` attribute to use on the link. Only used when `href` is set.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/breadcrumb-item"
+        }
+      ]
+    },
     {
       "name": "sl-button-group",
       "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<sl-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -427,6 +427,17 @@
         }
       ]
     },
+    {
+      "name": "sl-card",
+      "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/card"
+        }
+      ]
+    },
     {
       "name": "sl-carousel",
       "description": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.\n---\n\n\n### **Events:**\n - **sl-slide-change** - Emitted when the active slide changes.\n\n### **Methods:**\n - **previous(behavior: _ScrollBehavior_)** - Move the carousel backward by `slides-per-move` slides.\n- **next(behavior: _ScrollBehavior_)** - Move the carousel forward by `slides-per-move` slides.\n- **goToSlide(index: _number_, behavior: _ScrollBehavior_)** - Scrolls the carousel to the slide specified by `index`.\n\n### **Slots:**\n - _default_ - The carousel's main content, one or more `<sl-carousel-item>` elements.\n- **next-icon** - Optional next icon to use instead of the default. Works best with `<sl-icon>`.\n- **previous-icon** - Optional previous icon to use instead of the default. Works best with `<sl-icon>`.\n\n### **CSS Properties:**\n - **--slide-gap** - The space between each slide. _(default: undefined)_\n- **--aspect-ratio** - The aspect ratio of each slide. _(default: 16/9)_\n- **--scroll-hint** - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The carousel's internal wrapper.\n- **scroll-container** - The scroll container that wraps the slides.\n- **pagination** - The pagination indicators wrapper.\n- **pagination-item** - The pagination indicator.\n- **pagination-item--active** - Applied when the item is active.\n- **navigation** - The navigation wrapper.\n- **navigation-button** - The navigation button.\n- **navigation-button--previous** - Applied to the previous button.\n- **navigation-button--next** - Applied to the next button.",
@@ -484,17 +495,6 @@
         }
       ]
     },
-    {
-      "name": "sl-card",
-      "description": "Cards can be used to group related subjects in a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/card"
-        }
-      ]
-    },
     {
       "name": "sl-carousel-item",
       "description": "A carousel item represent a slide within a [carousel](/components/carousel).\n---\n\n\n### **Slots:**\n - _default_ - The carousel item's content..\n\n### **CSS Properties:**\n - **--aspect-ratio** - The slide's aspect ratio. Inherited from the carousel by default. _(default: undefined)_",
@@ -507,136 +507,136 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
+        { "name": "title", "values": [] },
         {
-          "name": "span",
-          "description": "Number of cells to span (out of 24)",
-          "values": [{ "name": "ColSpanType" }]
-        },
-        {
-          "name": "offset",
-          "description": "Number of cells to offset from the left",
-          "values": [{ "name": "ColSpanType" }]
-        },
-        {
-          "name": "order",
-          "description": "Order of the column",
-          "values": [{ "name": "ColSpanType" }]
-        },
-        {
-          "name": "push",
-          "description": "Number of cells to push from the left",
-          "values": [{ "name": "ColSpanType" }]
+          "name": "name",
+          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
         },
         {
-          "name": "pull",
-          "description": "Number of cells to pull from the right",
-          "values": [{ "name": "ColSpanType" }]
+          "name": "value",
+          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
         },
         {
-          "name": "flex",
-          "description": "Flex layout style",
-          "values": [{ "name": "FlexType" }]
+          "name": "size",
+          "description": "The checkbox's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         },
         {
-          "name": "xs",
-          "description": "Responsive config for xs screens (< 576px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "disabled",
+          "description": "Disables the checkbox.",
+          "values": []
         },
         {
-          "name": "sm",
-          "description": "Responsive config for sm screens (≥ 576px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "checked",
+          "description": "Draws the checkbox in a checked state.",
+          "values": []
         },
         {
-          "name": "md",
-          "description": "Responsive config for md screens (≥ 768px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "indeterminate",
+          "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+          "values": []
         },
         {
-          "name": "lg",
-          "description": "Responsive config for lg screens (≥ 992px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
         },
         {
-          "name": "xl",
-          "description": "Responsive config for xl screens (≥ 1200px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "required",
+          "description": "Makes the checkbox a required field.",
+          "values": []
         },
         {
-          "name": "xxl",
-          "description": "Responsive config for xxl screens (≥ 1600px)",
-          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+          "name": "help-text",
+          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/col"
+          "url": "https://shoelace.style/components/checkbox"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
-        { "name": "title", "values": [] },
         {
-          "name": "name",
-          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
+          "name": "span",
+          "description": "Number of cells to span (out of 24)",
+          "values": [{ "name": "ColSpanType" }]
+        },
+        {
+          "name": "offset",
+          "description": "Number of cells to offset from the left",
+          "values": [{ "name": "ColSpanType" }]
+        },
+        {
+          "name": "order",
+          "description": "Order of the column",
+          "values": [{ "name": "ColSpanType" }]
         },
         {
-          "name": "value",
-          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
+          "name": "push",
+          "description": "Number of cells to push from the left",
+          "values": [{ "name": "ColSpanType" }]
         },
         {
-          "name": "size",
-          "description": "The checkbox's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
+          "name": "pull",
+          "description": "Number of cells to pull from the right",
+          "values": [{ "name": "ColSpanType" }]
         },
         {
-          "name": "disabled",
-          "description": "Disables the checkbox.",
-          "values": []
+          "name": "flex",
+          "description": "Flex layout style",
+          "values": [{ "name": "FlexType" }]
         },
         {
-          "name": "checked",
-          "description": "Draws the checkbox in a checked state.",
-          "values": []
+          "name": "xs",
+          "description": "Responsive config for xs screens (< 576px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
         },
         {
-          "name": "indeterminate",
-          "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-          "values": []
+          "name": "sm",
+          "description": "Responsive config for sm screens (≥ 576px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
         },
         {
-          "name": "form",
-          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-          "values": []
+          "name": "md",
+          "description": "Responsive config for md screens (≥ 768px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
         },
         {
-          "name": "required",
-          "description": "Makes the checkbox a required field.",
-          "values": []
+          "name": "lg",
+          "description": "Responsive config for lg screens (≥ 992px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
         },
         {
-          "name": "help-text",
-          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
+          "name": "xl",
+          "description": "Responsive config for xl screens (≥ 1200px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
+        },
+        {
+          "name": "xxl",
+          "description": "Responsive config for xxl screens (≥ 1600px)",
+          "values": [{ "name": "ColSpanType" }, { "name": "ColSize" }]
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/checkbox"
+          "url": "https://shoelace.style/components/col"
         }
       ]
     },
@@ -937,66 +937,66 @@
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
+        {
+          "name": "resize",
+          "description": "Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the\nbottom-right corner, and double-clicking the header will toggle fullscreen mode.",
+          "values": []
+        },
+        {
+          "name": "fullscreen",
+          "description": "Indicates whether or not the dialog is in fullscreen mode.",
+          "values": []
+        },
         {
           "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.",
+          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
           "values": []
         },
         {
-          "name": "summary",
-          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "name": "label",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Disables the details so it can't be toggled.",
+          "name": "no-header",
+          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/details"
+          "url": "https://shoelace.style/components/dialog"
         }
       ]
     },
     {
-      "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.",
+      "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.",
       "attributes": [
-        {
-          "name": "resize",
-          "description": "Indicates whether or not the dialog is resizable. When true, the user can resize the dialog by dragging the\nbottom-right corner, and double-clicking the header will toggle fullscreen mode.",
-          "values": []
-        },
-        {
-          "name": "fullscreen",
-          "description": "Indicates whether or not the dialog is in fullscreen mode.",
-          "values": []
-        },
         {
           "name": "open",
-          "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+          "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.",
           "values": []
         },
         {
-          "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
           "values": []
         },
         {
-          "name": "no-header",
-          "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+          "name": "disabled",
+          "description": "Disables the details so it can't be toggled.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/dialog"
+          "url": "https://shoelace.style/components/details"
         }
       ]
     },
@@ -1452,6 +1452,23 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "position",
+          "description": "The position of the divider as a percentage.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/image-comparer"
+        }
+      ]
+    },
     {
       "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.",
@@ -1509,23 +1526,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        {
-          "name": "position",
-          "description": "The position of the divider as a percentage.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/image-comparer"
-        }
-      ]
-    },
     {
       "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.",
@@ -2307,28 +2307,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.",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The current progress as a percentage, 0 to 100.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "A custom label for assistive devices.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/progress-ring"
-        }
-      ]
-    },
     {
       "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.",
@@ -2409,22 +2387,39 @@
       ]
     },
     {
-      "name": "sl-radio-button",
-      "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the button loses focus.\n- **sl-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
+      "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.",
       "attributes": [
         {
           "name": "value",
-          "description": "The radio's value. When selected, the radio group will receive this value.",
+          "description": "The current progress as a percentage, 0 to 100.",
           "values": []
         },
         {
-          "name": "disabled",
-          "description": "Disables the radio button.",
+          "name": "label",
+          "description": "A custom label for assistive devices.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/progress-ring"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The radio's value. When selected, the radio group will receive this value.",
           "values": []
         },
         {
           "name": "size",
-          "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
+          "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
           "values": [
             { "name": "small" },
             { "name": "medium" },
@@ -2432,30 +2427,35 @@
           ]
         },
         {
-          "name": "pill",
-          "description": "Draws a pill-style radio button with rounded edges.",
+          "name": "disabled",
+          "description": "Disables the radio.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/radio-button"
+          "url": "https://shoelace.style/components/radio"
         }
       ]
     },
     {
-      "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.",
+      "name": "sl-radio-button",
+      "description": "Radios buttons allow the user to select a single option from a group using a button-like control.\n---\n\n\n### **Events:**\n - **sl-blur** - Emitted when the button loses focus.\n- **sl-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio button.\n- **blur()** - Removes focus from the radio button.\n\n### **Slots:**\n - _default_ - The radio button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The internal `<button>` element.\n- **button--checked** - The internal button element when the radio button is checked.\n- **prefix** - The container that wraps the prefix.\n- **label** - The container that wraps the radio button's label.\n- **suffix** - The container that wraps the suffix.",
       "attributes": [
         {
           "name": "value",
           "description": "The radio's value. When selected, the radio group will receive this value.",
           "values": []
         },
+        {
+          "name": "disabled",
+          "description": "Disables the radio button.",
+          "values": []
+        },
         {
           "name": "size",
-          "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+          "description": "The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\nthis attribute can typically be omitted.",
           "values": [
             { "name": "small" },
             { "name": "medium" },
@@ -2463,15 +2463,15 @@
           ]
         },
         {
-          "name": "disabled",
-          "description": "Disables the radio.",
+          "name": "pill",
+          "description": "Draws a pill-style radio button with rounded edges.",
           "values": []
         }
       ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://shoelace.style/components/radio"
+          "url": "https://shoelace.style/components/radio-button"
         }
       ]
     },
@@ -2721,6 +2721,43 @@
         }
       ]
     },
+    {
+      "name": "sl-screen",
+      "description": "Screen is a grid layout component based on gridstack.js and Shoelace.\n---\n\n\n### **Methods:**\n - **getGridData(): __** - 获取 GridStack 实例的序列化数据\n- **getInstance(): __** - 获取 GridStack 实例的序列化数据\n\n### **CSS Parts:**\n - **base** - The grid layout content.",
+      "attributes": [
+        {
+          "name": "options",
+          "description": "The options for the GridStack instance.",
+          "values": [{ "name": "GridStackOptions" }]
+        },
+        {
+          "name": "data",
+          "description": "The initial configuration for the grid.",
+          "values": [{ "name": "GridStackNode[]" }]
+        },
+        {
+          "name": "removable",
+          "description": "Whether the items in the grid can be removed.",
+          "values": []
+        },
+        {
+          "name": "static",
+          "description": "Disables dragging and resizing of widgets.",
+          "values": []
+        },
+        {
+          "name": "selector",
+          "description": "The selector for items that can be dragged into the grid from outside.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/screen"
+        }
+      ]
+    },
     {
       "name": "sl-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the control's value changes.\n- **sl-clear** - Emitted when the control's value is cleared.\n- **sl-input** - Emitted when the control receives input.\n- **sl-focus** - Emitted when the control gains focus.\n- **sl-blur** - Emitted when the control loses focus.\n- **sl-show** - Emitted when the select's menu opens.\n- **sl-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **sl-hide** - Emitted when the select's menu closes.\n- **sl-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **sl-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **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 select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -2830,43 +2867,6 @@
         }
       ]
     },
-    {
-      "name": "sl-screen",
-      "description": "Screen is a grid layout component based on gridstack.js and Shoelace.\n---\n\n\n### **Methods:**\n - **getGridData(): __** - 获取 GridStack 实例的序列化数据\n- **getInstance(): __** - 获取 GridStack 实例的序列化数据\n\n### **CSS Parts:**\n - **base** - The grid layout content.",
-      "attributes": [
-        {
-          "name": "options",
-          "description": "The options for the GridStack instance.",
-          "values": [{ "name": "GridStackOptions" }]
-        },
-        {
-          "name": "data",
-          "description": "The initial configuration for the grid.",
-          "values": [{ "name": "GridStackNode[]" }]
-        },
-        {
-          "name": "removable",
-          "description": "Whether the items in the grid can be removed.",
-          "values": []
-        },
-        {
-          "name": "static",
-          "description": "Disables dragging and resizing of widgets.",
-          "values": []
-        },
-        {
-          "name": "selector",
-          "description": "The selector for items that can be dragged into the grid from outside.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/screen"
-        }
-      ]
-    },
     {
       "name": "sl-sender",
       "description": "Senders are used to send messages.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the sender's value changes.\n- **sl-submit** - Emitted when the sender's submit button is clicked.\n- **sl-clear** - Emitted when the sender's clear button is clicked.\n- **sl-speech-toggle** - Emitted when the sender's speech button is clicked.\n- **sl-focus** - Emitted when the sender's input area gains focus.\n- **sl-blur** - Emitted when the sender's input area loses focus.\n\n### **Methods:**\n - **focus(options: _SenderFocusOptions_)** - 聚焦输入区域，支持 cursor 选项控制光标位置。\n- 'end'（默认）：光标移到内容末尾\n- 'start'：光标移到内容开头\n- 'all'：全选内容\n- 'slot'：聚焦第一个 slot input，若不存在则等同 'end'\n- **blur()** - 移除输入区域焦点\n- **clear()** - 清空输入内容，slot 模式下同时重置 slotValues\n- **getValue(): _{ value: string; slotConfig: SlotConfigType[]; skill?: SkillType }_** - 获取当前输入值，slot 模式下返回完整的 { value, slotConfig, skill }\n- **insert(slotConfig: _SlotConfigType[]_, position: _InsertPosition_, _replaceCharacters: _string_, preventScroll: _boolean_)** - 插入文本或 slot 配置项到输入区域\nslot 模式下将 slotConfig 项渲染为 DOM 节点插入到 slot-area\n普通模式下将各项文本拼接后插入到 textarea",
@@ -2923,27 +2923,6 @@
         }
       ]
     },
-    {
-      "name": "sl-skeleton",
-      "description": "Skeletons are used to provide a visual representation of where content will eventually be drawn.\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The skeleton's indicator which is responsible for its color and animation.",
-      "attributes": [
-        {
-          "name": "effect",
-          "description": "Determines which effect the skeleton will use.",
-          "values": [
-            { "name": "pulse" },
-            { "name": "sheen" },
-            { "name": "none" }
-          ]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/skeleton"
-        }
-      ]
-    },
     {
       "name": "sl-sender-switch",
       "description": "A toggle switch button for the Sender component, supporting checked/unchecked states\nwith optional distinct content for each state.\n---\n\n\n### **Events:**\n - **sl-change** - Emitted when the switch's checked state changes. Read `el.checked` for the new state.\n\n### **Slots:**\n - _default_ - The switch's default content (always shown).\n- **icon** - The switch's icon.\n- **checked** - Content shown only when checked.\n- **unchecked** - Content shown only when unchecked.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the button element).",
@@ -2976,6 +2955,27 @@
         }
       ]
     },
+    {
+      "name": "sl-skeleton",
+      "description": "Skeletons are used to provide a visual representation of where content will eventually be drawn.\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The skeleton's indicator which is responsible for its color and animation.",
+      "attributes": [
+        {
+          "name": "effect",
+          "description": "Determines which effect the skeleton will use.",
+          "values": [
+            { "name": "pulse" },
+            { "name": "sheen" },
+            { "name": "none" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/skeleton"
+        }
+      ]
+    },
     {
       "name": "sl-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n---\n\n\n### **CSS Properties:**\n - **--track-width** - The width of the track. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the spinner's indicator. _(default: undefined)_\n- **--speed** - The time it takes for the spinner to complete one animation cycle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3182,6 +3182,97 @@
         }
       ]
     },
+    {
+      "name": "sl-table",
+      "description": "\n---\n\n\n### **Events:**\n - **change**",
+      "attributes": [
+        {
+          "name": "rowKey",
+          "values": [{ "name": "TableProps<TData>['rowKey']" }]
+        },
+        {
+          "name": "columns",
+          "values": [{ "name": "TableProps<TData>['columns']" }]
+        },
+        {
+          "name": "dataSource",
+          "values": [{ "name": "TableProps<TData>['dataSource']" }]
+        },
+        {
+          "name": "loading",
+          "values": [{ "name": "TableProps<TData>['loading']" }]
+        },
+        {
+          "name": "bordered",
+          "values": [{ "name": "TableProps<TData>['bordered']" }]
+        },
+        {
+          "name": "direction",
+          "values": [{ "name": "TableProps<TData>['direction']" }]
+        },
+        {
+          "name": "showHeader",
+          "values": [{ "name": "TableProps<TData>['showHeader']" }]
+        },
+        {
+          "name": "rowSelection",
+          "values": [{ "name": "TableRowSelection<TData>" }]
+        },
+        {
+          "name": "tableScroll",
+          "values": [{ "name": "TableProps<TData>['tableScroll']" }]
+        },
+        {
+          "name": "pagination",
+          "values": [{ "name": "TableProps<TData>['pagination']" }]
+        },
+        {
+          "name": "expandProps",
+          "values": [{ "name": "TableProps<TData>['expandProps']" }]
+        },
+        { "name": "tree", "values": [{ "name": "TableProps<TData>['tree']" }] },
+        {
+          "name": "enableColumnResizing",
+          "values": [{ "name": "TableProps<TData>['enableColumnResizing']" }]
+        },
+        {
+          "name": "slHeaderRow",
+          "values": [{ "name": "TableProps<TData>['slHeaderRow']" }]
+        },
+        {
+          "name": "slRow",
+          "values": [{ "name": "TableProps<TData>['slRow']" }]
+        },
+        {
+          "name": "slColumnResize",
+          "values": [{ "name": "TableProps<TData>['slColumnResize']" }]
+        },
+        {
+          "name": "virtualized",
+          "values": [{ "name": "TableProps<TData>['virtualized']" }]
+        },
+        {
+          "name": "rowDrag",
+          "description": "是否允许拖动调整行顺序",
+          "values": [{ "name": "TableProps<TData>['rowDrag']" }]
+        },
+        {
+          "name": "slRowReorder",
+          "description": "行拖拽排序后的回调",
+          "values": [{ "name": "TableProps<TData>['slRowReorder']" }]
+        },
+        {
+          "name": "summary",
+          "values": [{ "name": "TableProps<TData>['summary']" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://shoelace.style/components/table"
+        }
+      ]
+    },
     {
       "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.",
@@ -3380,93 +3471,6 @@
         }
       ]
     },
-    {
-      "name": "sl-table",
-      "description": "\n---\n\n\n### **Events:**\n - **change**",
-      "attributes": [
-        {
-          "name": "rowKey",
-          "values": [{ "name": "TableProps<TData>['rowKey']" }]
-        },
-        {
-          "name": "columns",
-          "values": [{ "name": "TableProps<TData>['columns']" }]
-        },
-        {
-          "name": "dataSource",
-          "values": [{ "name": "TableProps<TData>['dataSource']" }]
-        },
-        {
-          "name": "loading",
-          "values": [{ "name": "TableProps<TData>['loading']" }]
-        },
-        {
-          "name": "bordered",
-          "values": [{ "name": "TableProps<TData>['bordered']" }]
-        },
-        {
-          "name": "direction",
-          "values": [{ "name": "TableProps<TData>['direction']" }]
-        },
-        {
-          "name": "showHeader",
-          "values": [{ "name": "TableProps<TData>['showHeader']" }]
-        },
-        {
-          "name": "rowSelection",
-          "values": [{ "name": "TableRowSelection<TData>" }]
-        },
-        {
-          "name": "tableScroll",
-          "values": [{ "name": "TableProps<TData>['tableScroll']" }]
-        },
-        {
-          "name": "pagination",
-          "values": [{ "name": "TableProps<TData>['pagination']" }]
-        },
-        {
-          "name": "expandProps",
-          "values": [{ "name": "TableProps<TData>['expandProps']" }]
-        },
-        { "name": "tree", "values": [{ "name": "TableProps<TData>['tree']" }] },
-        {
-          "name": "enableColumnResizing",
-          "values": [{ "name": "TableProps<TData>['enableColumnResizing']" }]
-        },
-        {
-          "name": "slHeaderRow",
-          "values": [{ "name": "TableProps<TData>['slHeaderRow']" }]
-        },
-        {
-          "name": "slRow",
-          "values": [{ "name": "TableProps<TData>['slRow']" }]
-        },
-        {
-          "name": "slColumnResize",
-          "values": [{ "name": "TableProps<TData>['slColumnResize']" }]
-        },
-        {
-          "name": "virtualized",
-          "values": [{ "name": "TableProps<TData>['virtualized']" }]
-        },
-        {
-          "name": "rowDrag",
-          "description": "是否允许拖动调整行顺序",
-          "values": [{ "name": "TableProps<TData>['rowDrag']" }]
-        },
-        {
-          "name": "slRowReorder",
-          "description": "行拖拽排序后的回调",
-          "values": [{ "name": "TableProps<TData>['slRowReorder']" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://shoelace.style/components/table"
-        }
-      ]
-    },
     {
       "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).",