@solid-design-system/components 1.3.13 → 1.5.0

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

@@ -1,6 +1,72 @@
 {
   "version": 1.1,
   "tags": [
+    {
+      "name": "sd-accordion-group",
+      "description": "Short summary of the component's intended use.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "close-others",
+          "description": "Closes other accordions.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-accordion",
+      "description": "Accordion shows a brief summary and expands to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-brandshape",
+      "description": "The Brandshape highlights a piece of content.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content inside the brandshape.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The brandshape's theme variant.",
+          "values": [
+            {
+              "name": "neutral-100"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "shapes",
+          "description": "Defines which shapes of the brandshape should be displayed.",
+          "values": [
+            {
+              "name": "('top'"
+            },
+            {
+              "name": "middle"
+            },
+            {
+              "name": "'bottom')[]"
+            }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "sd-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\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 - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
@@ -173,6 +239,30 @@
       ],
       "references": []
     },
+    {
+      "name": "sd-divider",
+      "description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "orientation",
+          "description": "Determines the orientation of the divider.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "inverted",
+          "description": "This inverts the divider.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "sd-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.",
@@ -330,7 +420,110 @@
       "references": []
     },
     {
-      "name": "sd-1-3-13-button",
+      "name": "sd-teaser",
+      "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **main** - The container that wraps the main content.",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            {
+              "name": "white"
+            },
+            {
+              "name": "white border-neutral-300"
+            },
+            {
+              "name": "neutral-100"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-100"
+            }
+          ]
+        },
+        {
+          "name": "breakpoint",
+          "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+          "values": []
+        },
+        {
+          "name": "inset",
+          "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-5-0-accordion-group",
+      "description": "Short summary of the component's intended use.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The default slot where `<sd-accordion>` elements are placed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "close-others",
+          "description": "Closes other accordions.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-5-0-accordion",
+      "description": "Accordion shows a brief summary and expands to show additional content.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-show** - Emitted when the accordion opens.\n- **sd-after-show** - Emitted after the accordion opens and all animations are complete.\n- **sd-hide** - Emitted when the accordion closes.\n- **sd-after-hide** - Emitted after the accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The accordion main content.\n- **summary** - The accordion summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<sd-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The accordion content.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.",
+          "values": []
+        },
+        {
+          "name": "summary",
+          "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-5-0-brandshape",
+      "description": "The Brandshape highlights a piece of content.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The content inside the brandshape.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - Middle content wrapper.\n- **shape-top** - Top shape.\n- **shape-middle** - Middle shape.\n- **shape-bottom** - Bottom shape.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The brandshape's theme variant.",
+          "values": [
+            {
+              "name": "neutral-100"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "white"
+            }
+          ]
+        },
+        {
+          "name": "shapes",
+          "description": "Defines which shapes of the brandshape should be displayed.",
+          "values": [
+            {
+              "name": "('top'"
+            },
+            {
+              "name": "middle"
+            },
+            {
+              "name": "'bottom')[]"
+            }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-5-0-button",
       "description": "Buttons represent actions that are available to the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the button loses focus.\n- **sd-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\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 - _default_ - The button's label.\n- **icon-left** - A prefix icon or similar element.\n- **icon-right** - A suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The button's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -502,7 +695,31 @@
       "references": []
     },
     {
-      "name": "sd-1-3-13-icon",
+      "name": "sd-1-5-0-divider",
+      "description": "Dividers are used to visually separate or group elements.\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "orientation",
+          "description": "Determines the orientation of the divider.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "inverted",
+          "description": "This inverts the divider.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "sd-1-5-0-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the icon has loaded.\n- **sd-error** - Emitted when the icon fails to load due to an error.",
       "attributes": [
         {
@@ -544,7 +761,7 @@
       "references": []
     },
     {
-      "name": "sd-1-3-13-include",
+      "name": "sd-1-5-0-include",
       "description": "Includes give you the power to embed external HTML files into the page.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-load** - Emitted when the included file is loaded.\n- **sd-error** - Emitted when the included file fails to load due to an error.",
       "attributes": [
         {
@@ -576,7 +793,7 @@
       "references": []
     },
     {
-      "name": "sd-1-3-13-link",
+      "name": "sd-1-5-0-link",
       "description": "A link component.\n\n\n---\n\n\n\n\n### **Events:**\n - **sd-blur** - Emitted when the link loses focus.\n- **sd-focus** - Emitted when the link gains focus.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n\n### **Slots:**\n - _default_ - The default slot.\n- **icon-left** - The icon to display on the left side of the link.\n- **icon-right** - The icon to display on the right side of the link.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **icon-left** - The container that wraps the left icon area.\n- **label** - The link's label.\n- **icon-right** - The container that wraps the right icon area.",
       "attributes": [
         {
@@ -636,7 +853,7 @@
       "references": []
     },
     {
-      "name": "sd-1-3-13-spinner",
+      "name": "sd-1-5-0-spinner",
       "description": "Spinners are used to show the progress of an indeterminate operation.\n\n\n---\n\n\n",
       "attributes": [
         {
@@ -656,6 +873,43 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "sd-1-5-0-teaser",
+      "description": "Teasers group information into flexible containers so users can browse a collection of related items and actions.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - An optional main content slot.\n- **media** - An optional media slot.\n- **meta** - An optional meta slot.\n- **headline** - headline slot.\n\n### **CSS Properties:**\n - **--distribution-media** - The distribution ratio of the media. _(default: undefined)_\n- **--distribution-content** - The distribution ratio of the content. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **media** - The container that wraps the media.\n- **content** - The container that wraps the content.\n- **meta** -  The container that wraps the meta.\n- **headline** - The container that wraps the headline.\n- **main** - The container that wraps the main content.",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            {
+              "name": "white"
+            },
+            {
+              "name": "white border-neutral-300"
+            },
+            {
+              "name": "neutral-100"
+            },
+            {
+              "name": "primary"
+            },
+            {
+              "name": "primary-100"
+            }
+          ]
+        },
+        {
+          "name": "breakpoint",
+          "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+          "values": []
+        },
+        {
+          "name": "inset",
+          "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+          "values": []
+        }
+      ],
+      "references": []
     }
   ]
 }