@solid-design-system/components 1.3.13 → 1.4.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@solid-design-system/components",
-  "version": "1.3.13",
+  "version": "1.4.0",
   "description-markup": "markdown",
   "framework-config": {
     "enable-when": {
@@ -13,6 +13,203 @@
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "sd-accordion-group",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion-group",
+          "js": {
+            "properties": [
+              {
+                "name": "closeOthers",
+                "description": "Closes other accordions.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "handleAccordionShow",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "close-others",
+              "description": "Closes other accordions.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-accordion",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion",
+          "js": {
+            "properties": [
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "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.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "handleSummaryClick",
+                "value": {}
+              },
+              {
+                "name": "handleSummaryKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleOpenChange",
+                "value": {}
+              },
+              {
+                "name": "show",
+                "description": "Shows the accordion.",
+                "value": {}
+              },
+              {
+                "name": "hide",
+                "description": "Hides the accordion",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-show",
+                "description": "Emitted when the accordion opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the accordion opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the accordion closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the accordion closes and all animations are complete."
+              }
+            ]
+          },
+          "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.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-brandshape",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/brandshape",
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The brandshape's theme variant.",
+                "value": {
+                  "type": "'neutral-100' | 'primary' | 'white'"
+                }
+              },
+              {
+                "name": "shapes",
+                "description": "Defines which shapes of the brandshape should be displayed.",
+                "value": {
+                  "type": "('top' | 'middle' | 'bottom')[]"
+                }
+              },
+              {
+                "name": "componentBreakpoint",
+                "value": {
+                  "type": "Breakpoints"
+                }
+              },
+              {
+                "name": "resizeObserver",
+                "value": {
+                  "type": "ResizeObserver"
+                }
+              },
+              {
+                "name": "getSvg",
+                "value": {}
+              },
+              {
+                "name": "largeSvg",
+                "value": {}
+              },
+              {
+                "name": "mediumSvg",
+                "value": {}
+              },
+              {
+                "name": "smallSvg",
+                "value": {}
+              },
+              {
+                "name": "setBreakpoint",
+                "value": {}
+              },
+              {
+                "name": "renderTopBrandshape",
+                "value": {}
+              },
+              {
+                "name": "renderMiddleBrandshape",
+                "value": {}
+              },
+              {
+                "name": "renderBottomBrandshape",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The brandshape's theme variant.",
+              "value": {
+                "type": "'neutral-100' | 'primary' | 'white'"
+              }
+            },
+            {
+              "name": "shapes",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "value": {
+                "type": "('top' | 'middle' | 'bottom')[]"
+              }
+            }
+          ]
+        },
         {
           "name": "sd-button",
           "description": "",
@@ -352,6 +549,46 @@
             }
           ]
         },
+        {
+          "name": "sd-divider",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/divider",
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "Determines the orientation of the divider.",
+                "value": {
+                  "type": "'horizontal' | 'vertical'"
+                }
+              },
+              {
+                "name": "inverted",
+                "description": "This inverts the divider.",
+                "value": {
+                  "type": "boolean"
+                }
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "Determines the orientation of the divider.",
+              "value": {
+                "type": "'horizontal' | 'vertical'"
+              }
+            },
+            {
+              "name": "inverted",
+              "description": "This inverts the divider.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
         {
           "name": "sd-icon",
           "description": "",
@@ -768,7 +1005,276 @@
           ]
         },
         {
-          "name": "sd-1-3-13-button",
+          "name": "sd-teaser",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/teaser",
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "value": {
+                  "type": "'white' | 'white border-neutral-300' | 'neutral-100' | 'primary' | 'primary-100'"
+                }
+              },
+              {
+                "name": "breakpoint",
+                "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+                "value": {
+                  "type": "number"
+                }
+              },
+              {
+                "name": "inset",
+                "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "_orientation",
+                "value": {
+                  "type": "'vertical' | 'horizontal'"
+                }
+              },
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "resizeObserver",
+                "value": {
+                  "type": "ResizeObserver"
+                }
+              },
+              {
+                "name": "updateOrientation",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'white' | 'white border-neutral-300' | 'neutral-100' | 'primary' | 'primary-100'"
+              }
+            },
+            {
+              "name": "breakpoint",
+              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "inset",
+              "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-4-0-accordion-group",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion-group",
+          "js": {
+            "properties": [
+              {
+                "name": "closeOthers",
+                "description": "Closes other accordions.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "handleAccordionShow",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "close-others",
+              "description": "Closes other accordions.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-4-0-accordion",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/accordion",
+          "js": {
+            "properties": [
+              {
+                "name": "localize",
+                "value": {}
+              },
+              {
+                "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.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "value": {
+                  "type": "string"
+                }
+              },
+              {
+                "name": "handleSummaryClick",
+                "value": {}
+              },
+              {
+                "name": "handleSummaryKeyDown",
+                "value": {}
+              },
+              {
+                "name": "handleOpenChange",
+                "value": {}
+              },
+              {
+                "name": "show",
+                "description": "Shows the accordion.",
+                "value": {}
+              },
+              {
+                "name": "hide",
+                "description": "Hides the accordion",
+                "value": {}
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-show",
+                "description": "Emitted when the accordion opens."
+              },
+              {
+                "name": "sd-after-show",
+                "description": "Emitted after the accordion opens and all animations are complete."
+              },
+              {
+                "name": "sd-hide",
+                "description": "Emitted when the accordion closes."
+              },
+              {
+                "name": "sd-after-hide",
+                "description": "Emitted after the accordion closes and all animations are complete."
+              }
+            ]
+          },
+          "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.",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": {
+                "type": "string"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-4-0-brandshape",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/brandshape",
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The brandshape's theme variant.",
+                "value": {
+                  "type": "'neutral-100' | 'primary' | 'white'"
+                }
+              },
+              {
+                "name": "shapes",
+                "description": "Defines which shapes of the brandshape should be displayed.",
+                "value": {
+                  "type": "('top' | 'middle' | 'bottom')[]"
+                }
+              },
+              {
+                "name": "componentBreakpoint",
+                "value": {
+                  "type": "Breakpoints"
+                }
+              },
+              {
+                "name": "resizeObserver",
+                "value": {
+                  "type": "ResizeObserver"
+                }
+              },
+              {
+                "name": "getSvg",
+                "value": {}
+              },
+              {
+                "name": "largeSvg",
+                "value": {}
+              },
+              {
+                "name": "mediumSvg",
+                "value": {}
+              },
+              {
+                "name": "smallSvg",
+                "value": {}
+              },
+              {
+                "name": "setBreakpoint",
+                "value": {}
+              },
+              {
+                "name": "renderTopBrandshape",
+                "value": {}
+              },
+              {
+                "name": "renderMiddleBrandshape",
+                "value": {}
+              },
+              {
+                "name": "renderBottomBrandshape",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "The brandshape's theme variant.",
+              "value": {
+                "type": "'neutral-100' | 'primary' | 'white'"
+              }
+            },
+            {
+              "name": "shapes",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "value": {
+                "type": "('top' | 'middle' | 'bottom')[]"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-4-0-button",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/button",
           "js": {
@@ -1107,7 +1613,47 @@
           ]
         },
         {
-          "name": "sd-1-3-13-icon",
+          "name": "sd-1-4-0-divider",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/divider",
+          "js": {
+            "properties": [
+              {
+                "name": "orientation",
+                "description": "Determines the orientation of the divider.",
+                "value": {
+                  "type": "'horizontal' | 'vertical'"
+                }
+              },
+              {
+                "name": "inverted",
+                "description": "This inverts the divider.",
+                "value": {
+                  "type": "boolean"
+                }
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "orientation",
+              "description": "Determines the orientation of the divider.",
+              "value": {
+                "type": "'horizontal' | 'vertical'"
+              }
+            },
+            {
+              "name": "inverted",
+              "description": "This inverts the divider.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "name": "sd-1-4-0-icon",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/icon",
           "js": {
@@ -1216,7 +1762,7 @@
           ]
         },
         {
-          "name": "sd-1-3-13-include",
+          "name": "sd-1-4-0-include",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/include",
           "js": {
@@ -1287,7 +1833,7 @@
           ]
         },
         {
-          "name": "sd-1-3-13-link",
+          "name": "sd-1-4-0-link",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/link",
           "js": {
@@ -1414,7 +1960,7 @@
           ]
         },
         {
-          "name": "sd-1-3-13-spinner",
+          "name": "sd-1-4-0-spinner",
           "description": "",
           "doc-url": "https://solid.union-investment.com/[storybook-link]/spinner",
           "js": {
@@ -1442,6 +1988,78 @@
               }
             }
           ]
+        },
+        {
+          "name": "sd-1-4-0-teaser",
+          "description": "",
+          "doc-url": "https://solid.union-investment.com/[storybook-link]/teaser",
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "value": {
+                  "type": "'white' | 'white border-neutral-300' | 'neutral-100' | 'primary' | 'primary-100'"
+                }
+              },
+              {
+                "name": "breakpoint",
+                "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+                "value": {
+                  "type": "number"
+                }
+              },
+              {
+                "name": "inset",
+                "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+                "value": {
+                  "type": "boolean"
+                }
+              },
+              {
+                "name": "_orientation",
+                "value": {
+                  "type": "'vertical' | 'horizontal'"
+                }
+              },
+              {
+                "name": "hasSlotController",
+                "value": {}
+              },
+              {
+                "name": "resizeObserver",
+                "value": {
+                  "type": "ResizeObserver"
+                }
+              },
+              {
+                "name": "updateOrientation",
+                "value": {}
+              }
+            ],
+            "events": []
+          },
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'white' | 'white border-neutral-300' | 'neutral-100' | 'primary' | 'primary-100'"
+              }
+            },
+            {
+              "name": "breakpoint",
+              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "value": {
+                "type": "number"
+              }
+            },
+            {
+              "name": "inset",
+              "description": "The teaser's inner padding. This is always set in `white border-neutral-300`.",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ]
         }
       ]
     }