@synergy-design-system/components 2.31.0-numeric.1 → 2.31.0-numeric.3

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

@@ -25,7 +25,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/accordion"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs"
         }
       ]
     },
@@ -63,24 +63,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/alert"
-        }
-      ]
-    },
-    {
-      "name": "syn-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 `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "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://synergy.style/components/breadcrumb"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs"
         }
       ]
     },
@@ -103,7 +86,24 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/badge"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-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 `<syn-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "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://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs"
         }
       ]
     },
@@ -135,7 +135,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/breadcrumb-item"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs"
         }
       ]
     },
@@ -264,7 +264,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/button"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs"
         }
       ]
     },
@@ -281,7 +281,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/button-group"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs"
         }
       ]
     },
@@ -298,7 +298,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/card"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs"
         }
       ]
     },
@@ -360,13 +360,13 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/checkbox"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs"
         }
       ]
     },
     {
       "name": "syn-combobox",
-      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the combobox's menu opens.\n- **syn-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the combobox's menu closes.\n- **syn-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.\n- **label** - The combobox'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 combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, 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 the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the combobox's menu opens.\n- **syn-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the combobox's menu closes.\n- **syn-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **syn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **syn-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a syn-error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `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 `<syn-option>` elements. You can use `<syn-optgroup>`'s to group items visually.\n- **label** - The combobox'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 combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, 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 the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.\n- **popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.",
       "attributes": [
         {
           "name": "name",
@@ -454,7 +454,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/combobox"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs"
         }
       ]
     },
@@ -491,7 +491,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/details"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs"
         }
       ]
     },
@@ -518,7 +518,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/dialog"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs"
         }
       ]
     },
@@ -535,7 +535,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/divider"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs"
         }
       ]
     },
@@ -577,7 +577,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/drawer"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs"
         }
       ]
     },
@@ -647,7 +647,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/dropdown"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs"
         }
       ]
     },
@@ -738,7 +738,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/file"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs"
         }
       ]
     },
@@ -764,7 +764,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/header"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs"
         }
       ]
     },
@@ -796,7 +796,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/icon"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs"
         }
       ]
     },
@@ -872,7 +872,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/icon-button"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs"
         }
       ]
     },
@@ -1061,9 +1061,19 @@
             { "name": "url" }
           ]
         },
+        {
+          "name": "min-fraction-digits",
+          "description": "The minimal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number`.",
+          "values": []
+        },
+        {
+          "name": "max-fraction-digits",
+          "description": "The maximal amount of fraction digits to use for numeric values.\nUsed to format the number when the input type is `number`.",
+          "values": []
+        },
         {
           "name": "numeric-strategy",
-          "description": "Defines the strategy for handling numbers in the numeric input.\nThis is used to determine how the input behaves when the user interacts with it.\n\nIncludes the following configuration options:\n\n- **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n- **noStepAlign**: If true, the input will not align the value to the step attribute.\n- **noStepValidation**: If true, the input will not validate the value against the step attribute.\n\nYou may provide this as one of the following values:\n\n- 'native': Uses the native browser implementation.\n- 'modern': Uses a more intuitive implementation:\n  - Values are clamped to the nearest min or max value.\n  - Stepping is inclusive to the provided min and max values.\n  - Provided stepping is no longer used in validation.\n- An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!",
+          "description": "Defines the strategy for handling numbers in the numeric input.\nThis is used to determine how the input behaves when the user interacts with it.\n\nIncludes the following configuration options:\n\n- **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n- **noStepAlign**: If true, the input will not align the value to the step attribute.\n- **noStepValidation**: If true, the input will not validate the value against the step attribute.\n\nYou may provide this as one of the following values:\n\n- 'native': Uses the native browser implementation.\n- 'modern': Uses a more intuitive implementation:\n  - Values are clamped to the nearest min or max value.\n  - Stepping is inclusive to the provided min and max values.\n  - Provided stepping is no longer used in validation.\n  - Advanced number formatting is enabled.\n- An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!",
           "values": [
             { "name": "native" },
             { "name": "modern" },
@@ -1074,7 +1084,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/input"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs"
         }
       ]
     },
@@ -1085,7 +1095,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/menu"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs"
         }
       ]
     },
@@ -1122,7 +1132,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/menu-item"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs"
         }
       ]
     },
@@ -1133,13 +1143,13 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/menu-label"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs"
         }
       ]
     },
     {
       "name": "syn-nav-item",
-      "description": "Flexible button / link component that can be used to quickly build navigations.\nTakes one of 3 forms:\n- button (default),\n- link (overrides button if a 'href' is provided),\n- or accordion (overrides all other if 'children' slot is defined).\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.\n- **syn-hide** - Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.\n- **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **blur()** - Removes focus from the button.\n- **click()** - Simulates a click on the nav-items button, link or summary.\n- **focus(options: _FocusOptions_)** - Sets focus on the nav-item\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--indentation** - Numeric value, indicating the level the item is placed at. _(default: undefined)_\n- **--indentation-stepping** - The amount of pixels each level will indent. _(default: undefined)_\n- **--display-children** - Display property of the children. Defaults to \"contents\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **children** - The wrapper that holds the children\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **current-indicator** - The indicator used when current is set to true\n- **chevron** - The container that wraps the chevron.\n- **details** - The details element rendered when there are children available\n- **divider** - The components optional top divider.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
+      "description": "Flexible button / link component that can be used to quickly build navigations.\n---\n\n\n### **Events:**\n - **syn-show** - Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.\n- **syn-hide** - Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.\n- **syn-blur** - Emitted when the button loses focus.\n- **syn-focus** - Emitted when the button gains focus.\n\n### **Methods:**\n - **blur()** - Removes focus from the button.\n- **click()** - Simulates a click on the nav-items button, link or summary.\n- **focus(options: _FocusOptions_)** - Sets focus on the nav-item\n\n### **Slots:**\n - _default_ - The navigation item's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **children** - Slot used to provide nested child navigation elements. If provided, details and summary elements will be used. A chevron will be shown on the right side regardless of the chevron property.\n\n### **CSS Properties:**\n - **--indentation** - Numeric value, indicating the level the item is placed at. _(default: undefined)_\n- **--indentation-stepping** - The amount of pixels each level will indent. _(default: undefined)_\n- **--display-children** - Display property of the children. Defaults to \"contents\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper including children.\n- **children** - The wrapper that holds the children\n- **content-wrapper** - The component's content wrapper.\n- **content** - The component's content excluding children.\n- **current-indicator** - The indicator used when current is set to true\n- **chevron** - The container that wraps the chevron.\n- **details** - The details element rendered when there are children available\n- **divider** - The components optional top divider.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
       "attributes": [
         {
           "name": "href",
@@ -1191,7 +1201,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/nav-item"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs"
         }
       ]
     },
@@ -1213,7 +1223,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/optgroup"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-optgroup--docs"
         }
       ]
     },
@@ -1235,7 +1245,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/option"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs"
         }
       ]
     },
@@ -1384,7 +1394,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/popup"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs"
         }
       ]
     },
@@ -1395,7 +1405,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/prio-nav"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs"
         }
       ]
     },
@@ -1422,7 +1432,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/progress-bar"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs"
         }
       ]
     },
@@ -1444,7 +1454,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/progress-ring"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs"
         }
       ]
     },
@@ -1475,7 +1485,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/radio"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs"
         }
       ]
     },
@@ -1511,7 +1521,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/radio-button"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs"
         }
       ]
     },
@@ -1562,7 +1572,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/radio-group"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs"
         }
       ]
     },
@@ -1642,7 +1652,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/range"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs"
         }
       ]
     },
@@ -1659,7 +1669,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/range-tick"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs"
         }
       ]
     },
@@ -1676,13 +1686,13 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/resize-observer"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs"
         }
       ]
     },
     {
       "name": "syn-select",
-      "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **syn-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 `<syn-option>` elements. You can use `<syn-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.",
+      "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **syn-change** - Emitted when the control's value changes.\n- **syn-clear** - Emitted when the control's value is cleared.\n- **syn-input** - Emitted when the control receives input.\n- **syn-focus** - Emitted when the control gains focus.\n- **syn-blur** - Emitted when the control loses focus.\n- **syn-show** - Emitted when the select's menu opens.\n- **syn-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **syn-hide** - Emitted when the select's menu closes.\n- **syn-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **syn-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 `<syn-option>` elements. You can use `<syn-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.\n- **popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.",
       "attributes": [
         {
           "name": "delimiter",
@@ -1780,7 +1790,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/select"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs"
         }
       ]
     },
@@ -1807,7 +1817,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/side-nav"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs"
         }
       ]
     },
@@ -1818,39 +1828,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/spinner"
-        }
-      ]
-    },
-    {
-      "name": "syn-tab",
-      "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **syn-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
-      "attributes": [
-        {
-          "name": "panel",
-          "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
-          "values": []
-        },
-        {
-          "name": "active",
-          "description": "Draws the tab in an active state.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Makes the tab closable and shows a close button.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the tab and prevents selection.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/tab"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs"
         }
       ]
     },
@@ -1907,7 +1885,39 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/switch"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-tab",
+      "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **syn-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **close-button** - The close button, an `<syn-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Draws the tab in an active state.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Makes the tab closable and shows a close button.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the tab and prevents selection.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs"
         }
       ]
     },
@@ -1949,7 +1959,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/tab-group"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs"
         }
       ]
     },
@@ -1971,7 +1981,33 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/tab-panel"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs"
+        }
+      ]
+    },
+    {
+      "name": "syn-tag",
+      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-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 `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The tag's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "removable",
+          "description": "Makes the tag removable and shows a remove button.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs"
         }
       ]
     },
@@ -2121,7 +2157,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/textarea"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs"
         }
       ]
     },
@@ -2187,33 +2223,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/tooltip"
-        }
-      ]
-    },
-    {
-      "name": "syn-tag",
-      "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **syn-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 `<syn-icon-button>`.\n- **remove-button__base** - The remove button's exported `base` part.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The tag's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "removable",
-          "description": "Makes the tag removable and shows a remove button.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://synergy.style/components/tag"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs"
         }
       ]
     },
@@ -2250,7 +2260,7 @@
       "references": [
         {
           "name": "Documentation",
-          "url": "https://synergy.style/components/validate"
+          "url": "https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs"
         }
       ]
     }

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "name": "@synergy-design-system/components",
-  "version": "2.31.0-numeric.1",
+  "version": "2.31.0-numeric.3",
   "description": "",
   "repository": {
     "type": "git",

package/dist/chunks/chunk.2YBP4WEH.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/card/card.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { property } from 'lit/decorators.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './card.styles.js';\nimport customStyles from './card.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Cards can be used to group related subjects in a container.\n * @documentation https://synergy.style/components/card\n * @status stable\n * @since 2.0\n *\n * @slot - The card's main content.\n * @slot header - An optional header for the card.\n * @slot footer - An optional footer for the card.\n * @slot image - An optional image to render at the start of the card.\n *\n * @csspart base - The component's base wrapper.\n * @csspart image - The container that wraps the card's image.\n * @csspart header - The container that wraps the card's header.\n * @csspart body - The container that wraps the card's main content.\n * @csspart footer - The container that wraps the card's footer.\n *\n * @cssproperty --border-color - The card's border color, including borders that occur inside the card.\n * @cssproperty --border-radius - The border radius for the card's edges.\n * @cssproperty --border-width - The width of the card's borders.\n * @cssproperty --padding - The padding to use for the card's sections.\n */\nexport default class SynCard extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');\n\n  /** Draws the card with sharp edges. Can be used e.g. when nesting multiple syn-cards to create hierarchy. */\n  @property({ type: Boolean, reflect: true }) sharp = false;\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--sharp': this.sharp,\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--has-image': this.hasSlotController.test('image'),\n          'card--has-header': this.hasSlotController.test('header')\n        })}\n      >\n        <slot name=\"image\" part=\"image\" class=\"card__image\"></slot>\n        <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n        <slot part=\"body\" class=\"card__body\"></slot>\n        <slot name=\"footer\" part=\"footer\" class=\"card__footer\"></slot>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AA6BrB,IAAqB,UAArB,cAAqC,eAAe;AAAA,EAApD;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,UAAU,OAAO;AAGhD,iBAAQ;AAAA;AAAA,EAEpD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,eAAe,KAAK;AAAA,MACpB,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACxD,mBAAmB,KAAK,kBAAkB,KAAK,OAAO;AAAA,MACtD,oBAAoB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC1D,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQR;AACF;AA3BqB,QACZ,SAAyB,CAAC,0BAAiB,qBAAQ,0BAAY;AAK1B;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,QAMyB;",
-  "names": []
-}