{
  "components": {
    "accordion": {
      "default": {
        "title": {
          "value": "Accordion",
          "type": "text"
        },
        "description": {
          "value": "Accordion is a group of syn-details to show a brief summary and expand to show additional content.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disable attribute to prevent the details from expanding.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a detail’s size. The size attribute should not be mixed within an accordion",
          "type": "text"
        }
      },
      "grouping": {
        "title": {
          "value": "Grouping Details",
          "type": "text"
        },
        "description": {
          "value": "Set the `close-others` property to true to ensure only one detail is open at a time.",
          "type": "text"
        }
      },
      "contained": {
        "title": {
          "value": "Contained",
          "type": "text"
        },
        "description": {
          "value": "To give content more structure, you can use the property contained.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the detail has been focused by the keyboard interaction.",
          "type": "text"
        }
      }
    },
    "alert": {
      "default": {
        "description": {
          "value": "Alerts are used to display important messages inline or as toast notifications.",
          "type": "text"
        },
        "title": {
          "value": "Alert",
          "type": "text"
        }
      },
      "variants": {
        "title": {
          "value": "Variants",
          "type": "text"
        },
        "description": {
          "value": "Set the variant attribute to change the alert’s variant.",
          "type": "text"
        }
      },
      "closable": {
        "title": {
          "value": "Closable",
          "type": "text"
        },
        "description": {
          "value": "Add the closable attribute to show a close button that will hide the alert.",
          "type": "text"
        }
      },
      "without-icons": {
        "title": {
          "value": "Without Icons",
          "type": "text"
        },
        "description": {
          "value": "Icons are optional. Simply omit the icon slot if you don’t want them.",
          "type": "text"
        }
      },
      "duration": {
        "title": {
          "value": "Duration",
          "type": "text"
        },
        "description": {
          "value": "Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don’t require acknowledgement.",
          "type": "text"
        }
      },
      "toast-notifications": {
        "title": {
          "value": "Toast Notifications",
          "type": "text"
        },
        "description": {
          "value": "To display an alert as a toast notification, or “toast”, create the alert and call its toast() method. This will move the alert out of its position in the DOM and into the toast stack where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call toast() again later on.\n\nYou should always use the closable attribute so users can dismiss the notification. It’s also common to set a reasonable duration when the notification doesn’t require acknowledgement.",
          "type": "text"
        }
      },
      "creating-toasts-imperatively": {
        "title": {
          "value": "Creating Toasts Imperatively",
          "type": "text"
        },
        "description": {
          "value": "For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the toast() method as shown in the example below.",
          "type": "text"
        }
      },
      "toast-stack": {
        "title": {
          "value": "The Toast Stack",
          "type": "text"
        },
        "description": {
          "value": "The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.\n\nBy default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting .syn-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change an alert’s size.",
          "type": "text"
        }
      }
    },
    "animated-image": {
      "description": {
        "value": "A component for displaying animated GIFs and WEBPs that play and pause on interaction.",
        "type": "text"
      },
      "title": {
        "value": "Animated Image",
        "type": "text"
      }
    },
    "animation": {
      "description": {
        "value": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.",
        "type": "text"
      },
      "title": {
        "value": "Animation",
        "type": "text"
      }
    },
    "avatar": {
      "description": {
        "value": "Avatars are used to represent a person or object.",
        "type": "text"
      },
      "title": {
        "value": "Avatar",
        "type": "text"
      }
    },
    "badge": {
      "default": {
        "description": {
          "value": "Badges are used to draw attention and display statuses or counts.",
          "type": "text"
        },
        "title": {
          "value": "Badge",
          "type": "text"
        }
      },
      "variants": {
        "title": {
          "value": "Variants",
          "type": "text"
        },
        "description": {
          "value": "Set the variant attribute to change the badge’s variant.",
          "type": "text"
        }
      },
      "withButton": {
        "title": {
          "value": "With Buttons",
          "type": "text"
        },
        "description": {
          "value": "One of the most common use cases for badges is attaching them to buttons. \n\nDEV: To make this easier, badges will be automatically positioned at the top-right when they’re a child of a button.",
          "type": "text"
        }
      },
      "menu": {
        "title": {
          "value": "With Menu Items",
          "type": "text"
        },
        "description": {
          "value": "When including badges in menu items, use the suffix slot to make sure they’re aligned correctly.",
          "type": "text"
        }
      },
      "withEmptyContent": {
        "title": {
          "value": "With empty content",
          "type": "text"
        },
        "description": {
          "value": "Badges can be used without content to just show an status indicator.",
          "type": "text"
        }
      }
    },
    "breadcrumb-item": {
      "default": {
        "description": {
          "value": "Breadcrumb Items are used inside breadcrumbs to represent different links.",
          "type": "text"
        },
        "title": {
          "value": "Breadcrumb Item",
          "type": "text"
        }
      }
    },
    "breadcrumb": {
      "default": {
        "description": {
          "value": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.",
          "type": "text"
        },
        "title": {
          "value": "Breadcrumb",
          "type": "text"
        }
      },
      "links": {
        "title": {
          "value": "Breadcrumb Links",
          "type": "text"
        },
        "description": {
          "value": "By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you’ll need to add event listeners to handle clicks.\n\nFor websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding page — no event listeners required.",
          "type": "text"
        }
      },
      "prefix": {
        "title": {
          "value": "Prefixes",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix slot to add content before any breadcrumb item.",
          "type": "text"
        }
      },
      "suffix": {
        "title": {
          "value": "Suffixes",
          "type": "text"
        },
        "description": {
          "value": "Use the suffix slot to add content after any breadcrumb item.",
          "type": "text"
        }
      },
      "menu": {
        "title": {
          "value": "With Dropdowns",
          "type": "text"
        },
        "description": {
          "value": "Dropdown menus can be placed in a prefix or suffix slot to provide additional options.",
          "type": "text"
        }
      }
    },
    "button": {
      "default": {
        "description": {
          "value": "Buttons represent actions that are available to the user.",
          "type": "text"
        },
        "title": {
          "value": "Button",
          "type": "text"
        }
      },
      "variant": {
        "title": {
          "value": "Variants",
          "type": "text"
        },
        "description": {
          "value": "Use the variant attribute to set the button’s variant. Variants can be Filled, Outline and Text Buttons. Use the outline attribute to draw outlined buttons with transparent backgrounds. Use the text variant to create text buttons that share the same size as regular buttons but don’t have backgrounds or borders.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a button’s size.",
          "type": "text"
        }
      },
      "link": {
        "title": {
          "value": "Link Buttons",
          "type": "text"
        },
        "description": {
          "value": "It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.",
          "type": "text"
        }
      },
      "width": {
        "title": {
          "value": "Setting a Custom Width",
          "type": "text"
        },
        "description": {
          "value": "As expected, buttons can be given a custom width by setting the width attribute. This is useful for making buttons span the full width of their container on smaller screens.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and Suffix Icons.",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add icons.",
          "type": "text"
        }
      },
      "caret": {
        "title": {
          "value": "Caret",
          "type": "text"
        },
        "description": {
          "value": "Use the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.",
          "type": "text"
        }
      },
      "loading": {
        "title": {
          "value": "Loading",
          "type": "text"
        },
        "description": {
          "value": "Use the loading attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a button.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Button has been focused by the keyboard interaction and that the button component is ready for use.",
          "type": "text"
        }
      },
      "icon-only": {
        "title": {
          "value": "Icon-only",
          "type": "text"
        },
        "description": {
          "value": "Insert just a single icon to use the same button style.",
          "type": "text"
        }
      }
    },
    "button-group": {
      "default": {
        "description": {
          "value": "Button groups can be used to group related buttons into sections.",
          "type": "text"
        },
        "title": {
          "value": "Button Group",
          "type": "text"
        }
      },
      "size": {
        "description": {
          "value": "All button sizes are supported. The size of the button-group will be used to determine the size of the buttons.",
          "type": "text"
        },
        "title": {
          "value": "Button Sizes",
          "type": "text"
        }
      },
      "variant": {
        "description": {
          "value": "Use the variant attribute to set the button’s variant. Variants can be Filled, Outline. There is no Text variant.",
          "type": "text"
        },
        "title": {
          "value": "Variants",
          "type": "text"
        }
      },
      "dropdowns-in-button-groups": {
        "description": {
          "value": " Dropdowns can be placed inside button groups as long as the trigger is an <syn-button> element. ",
          "type": "text"
        },
        "title": {
          "value": " Dropdowns in Button Groups ",
          "type": "text"
        }
      },
      "split-buttons": {
        "description": {
          "value": "Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.",
          "type": "text"
        },
        "title": {
          "value": "Split Buttons",
          "type": "text"
        }
      },
      "tooltips": {
        "description": {
          "value": "Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.",
          "type": "text"
        },
        "title": {
          "value": "Tooltips in Button Groups",
          "type": "text"
        }
      },
      "toolbar": {
        "description": {
          "value": "Create interactive toolbars with button groups.",
          "type": "text"
        },
        "title": {
          "value": "Toolbar Example",
          "type": "text"
        }
      }
    },
    "card": {
      "default": {
        "description": {
          "value": "Cards can be used to group related subjects in a container.",
          "type": "text"
        },
        "title": {
          "value": "Card",
          "type": "text"
        }
      },
      "basic-card": {
        "description": {
          "value": "Basic cards aren’t very exciting, but they can display any content you want them to.",
          "type": "text"
        },
        "title": {
          "value": "Basic Card",
          "type": "text"
        }
      },
      "with-header": {
        "description": {
          "value": "Headers can be used to display titles and more.",
          "type": "text"
        },
        "title": {
          "value": "Card with Header",
          "type": "text"
        }
      },
      "with-footer": {
        "description": {
          "value": "Footers can be used to display actions, summaries, or other relevant content.",
          "type": "text"
        },
        "title": {
          "value": "Card with Footer",
          "type": "text"
        }
      },
      "images": {
        "description": {
          "value": "Cards accept an image slot. The image is displayed atop the card and stretches to fit.",
          "type": "text"
        },
        "title": {
          "value": "Images",
          "type": "text"
        }
      },
      "sharp": {
        "title": {
          "value": "Sharp Card",
          "type": "text"
        },
        "description": {
          "value": "Use the sharp variant attribute for the Card to Use a different style.",
          "type": "text"
        }
      },
      "shadow": {
        "title": {
          "value": "Card with shadow",
          "type": "text"
        },
        "description": {
          "value": "Use the shadow attribute to add a shadow.",
          "type": "text"
        }
      }
    },
    "carousel-item": {
      "description": {
        "value": "A carousel item represent a slide within a carousel.",
        "type": "text"
      },
      "title": {
        "value": "Carousel Item",
        "type": "text"
      }
    },
    "carousel": {
      "title": {
        "value": "Carousel",
        "type": "text"
      },
      "description": {
        "value": "Carousels display an arbitrary number of content slides along a horizontal or vertical axis.",
        "type": "text"
      }
    },
    "chart": {
      "default": {
        "title": {
          "value": "Chart",
          "type": "text"
        },
        "description": {
          "value": "The default story demonstrates a basic line chart configuration. The chart is configured via the `config` property, which accepts an object that maps directly to the ECharts option configuration.",
          "type": "text"
        }
      },
      "config": {
        "title": {
          "value": "Config",
          "type": "text"
        },
        "description": {
          "value": "The `config` property is the main way to configure the chart. It accepts an object that maps 1:1 to the ECharts option configuration. Assigning a new object to this property will update the chart with the new configuration.",
          "type": "text"
        }
      },
      "palette": {
        "title": {
          "value": "Palette",
          "type": "text"
        },
        "description": {
          "value": "Use the `palette` attribute to apply a Synergy design token color palette to chart series. `categorical` (12 distinct colors for comparing unrelated data series), `sequential-01`–`sequential-07` (10-step single-hue ramps), and `sequential-status-critical/error/info/success/warning` (10-step status ramps). If `option.color` is explicitly set, it takes precedence over the `palette` attribute.",
          "type": "text"
        }
      },
      "get-instance": {
        "title": {
          "value": "Get Instance",
          "type": "text"
        },
        "description": {
          "value": "Use `getInstance()` to access the underlying ECharts instance directly and work with its full native API. This is useful when the `config` property alone is not sufficient — for example to listen to ECharts events, trigger actions, or call `setOption()` with custom merge behavior. This example attaches a click listener via the native ECharts API. Click any data point to see the event payload logged to the browser console.",
          "type": "text"
        }
      },
      "multiple-charts": {
        "title": {
          "value": "Multiple Charts",
          "type": "text"
        },
        "description": {
          "value": "You can use multiple charts in one `<syn-chart>` instance, each with its own configuration. The palette colors or the default colors can be overridden per series item using the `color` property directly on the series object — allowing fine-grained control over individual chart series colors.\n\n**Important:** The `color` property does **not** support CSS variables (e.g. `var(--syn-sequential-05-80)`). This is a limitation of ECharts itself: ECharts renders via the Canvas API, which does not resolve CSS custom properties. To use Synergy design tokens as colors, read the computed hex value first using `getComputedStyle(document.documentElement).getPropertyValue('--your-token').trim()` and pass the resolved value instead.",
          "type": "text"
        }
      }
    },
    "checkbox": {
      "default": {
        "title": {
          "value": "Checkbox",
          "type": "text"
        },
        "description": {
          "value": "Checkboxes allow the user to toggle an option on or off.",
          "type": "text"
        }
      },
      "checked": {
        "title": {
          "value": "Checked",
          "type": "text"
        },
        "description": {
          "value": "Use the checked attribute to activate the checkbox.",
          "type": "text"
        }
      },
      "indeterminate": {
        "title": {
          "value": "Indeterminate",
          "type": "text"
        },
        "description": {
          "value": "Use the indeterminate attribute to make the checkbox indeterminate.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Checkbox has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable the checkbox.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only checkbox.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a checkbox’s size.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.",
          "type": "text"
        }
      },
      "validity": {
        "title": {
          "value": "Custom Validity",
          "type": "text"
        },
        "description": {
          "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a checkbox with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      }
    },
    "color-picker": {
      "title": {
        "value": "Color Picker",
        "type": "text"
      },
      "description": {
        "value": "Color pickers allow the user to select a color.",
        "type": "text"
      }
    },
    "copy-button": {
      "title": {
        "value": "Copy Button",
        "type": "text"
      },
      "description": {
        "value": "Copies data to the clipboard when the user clicks the button.",
        "type": "text"
      }
    },
    "details": {
      "default": {
        "title": {
          "value": "Details",
          "type": "text"
        },
        "description": {
          "value": "Details show a brief summary and expand to show additional content. If you want to group the details, we recommend that you use the syn-accordion component.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disable attribute to prevent the details from expanding.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a detail’s size.",
          "type": "text"
        }
      },
      "open": {
        "title": {
          "value": "Open",
          "type": "text"
        },
        "description": {
          "value": "Details show a brief summary and expand to show additional content.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the detail has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "contained": {
        "title": {
          "value": "Contained",
          "type": "text"
        },
        "description": {
          "value": "To give content more structure, you can use the property contained.",
          "type": "text"
        }
      },
      "icon": {
        "title": {
          "value": "Prefix Icons",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix Icon to prepend an icon to the details.",
          "type": "text"
        }
      }
    },
    "dialog": {
      "default": {
        "description": {
          "value": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.",
          "type": "text"
        },
        "title": {
          "value": "Dialog",
          "type": "text"
        }
      },
      "custom-width": {
        "title": {
          "value": "Custom Width",
          "type": "text"
        },
        "description": {
          "value": "Use the --width custom property to set the dialog’s width.",
          "type": "text"
        }
      },
      "scrolling": {
        "title": {
          "value": "Scrolling",
          "type": "text"
        },
        "description": {
          "value": "By design, a dialog’s height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.",
          "type": "text"
        }
      },
      "header-actions": {
        "title": {
          "value": "Header Actions",
          "type": "text"
        },
        "description": {
          "value": "The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.",
          "type": "text"
        }
      },
      "prevent-closing": {
        "title": {
          "value": "Preventing the Dialog from Closing",
          "type": "text"
        },
        "description": {
          "value": "By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the dialog open in such cases, you can cancel the syn-request-close event. When canceled, the dialog will remain open and pulse briefly to draw the user’s attention to it.\n\nYou can use event.detail.source to determine what triggered the request to close. This example prevents the dialog from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Customizing Initial Focus",
          "type": "text"
        },
        "description": {
          "value": "By default, the dialog’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the dialog. If you want a different element to have focus, add the autofocus attribute to it as shown below.",
          "type": "text"
        }
      }
    },
    "divider": {
      "default": {
        "description": {
          "value": "Dividers are used to visually separate or group elements.",
          "type": "text"
        },
        "title": {
          "value": "Divider",
          "type": "text"
        }
      },
      "width": {
        "title": {
          "value": "Width",
          "type": "text"
        },
        "description": {
          "value": "Use the --width custom property to change the width of the divider.",
          "type": "text"
        }
      },
      "color": {
        "title": {
          "value": "Color",
          "type": "text"
        },
        "description": {
          "value": "Use the --color custom property to change the color of the divider.",
          "type": "text"
        }
      },
      "spacing": {
        "title": {
          "value": "Spacing",
          "type": "text"
        },
        "description": {
          "value": "Use the --spacing custom property to change the amount of space between the divider and it’s neighboring elements.",
          "type": "text"
        }
      },
      "vertical": {
        "title": {
          "value": "Vertical",
          "type": "text"
        },
        "description": {
          "value": "Add the vertical attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.",
          "type": "text"
        }
      }
    },
    "drawer": {
      "default": {
        "description": {
          "value": "Drawers slide in from a container to expose additional options and information.",
          "type": "text"
        },
        "title": {
          "value": "Drawer",
          "type": "text"
        }
      },
      "start": {
        "title": {
          "value": "Slide in From Start",
          "type": "text"
        },
        "description": {
          "value": "By default, drawers slide in from the end. To make the drawer slide in from the start, set the placement attribute to start.",
          "type": "text"
        }
      },
      "top": {
        "title": {
          "value": "Slide in From Top",
          "type": "text"
        },
        "description": {
          "value": "To make the drawer slide in from the top, set the placement attribute to top.",
          "type": "text"
        }
      },
      "bottom": {
        "title": {
          "value": "Slide in From Bottom",
          "type": "text"
        },
        "description": {
          "value": "To make the drawer slide in from the bottom, set the placement attribute to bottom.",
          "type": "text"
        }
      },
      "contained": {
        "title": {
          "value": "Contained to an Element",
          "type": "text"
        },
        "description": {
          "value": "By default, drawers slide out of their containing block, which is usually the viewport. To make a drawer slide out of a parent element, add the contained attribute to the drawer and apply position: relative to its parent.\n\nUnlike normal drawers, contained drawers are not modal. This means they do not show an overlay, they do not trap focus, and they are not dismissible with Escape. This is intentional to allow users to interact with elements outside of the drawer.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Custom Size",
          "type": "text"
        },
        "description": {
          "value": "Use the --size custom property to set the drawer’s size. This will be applied to the drawer’s width or height depending on its placement.",
          "type": "text"
        }
      },
      "scrolling": {
        "title": {
          "value": "Scrolling",
          "type": "text"
        },
        "description": {
          "value": "By design, a drawer’s height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.",
          "type": "text"
        }
      },
      "action": {
        "title": {
          "value": "Header Actions",
          "type": "text"
        },
        "description": {
          "value": "The header shows a functional close button by default. You can use the header-actions slot to add additional icon buttons if needed.",
          "type": "text"
        }
      },
      "closing": {
        "title": {
          "value": "Preventing the Drawer from Closing",
          "type": "text"
        },
        "description": {
          "value": "By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the Escape key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.\n\nTo keep the drawer open in such cases, you can cancel the syn-request-close event. When canceled, the drawer will remain open and pulse briefly to draw the user’s attention to it.\n\nYou can use event.detail.source to determine what triggered the request to close. This example prevents the drawer from closing when the overlay is clicked, but allows the close button or Escape to dismiss it.",
          "type": "text"
        }
      },
      "fokus": {
        "title": {
          "value": "Customizing Initial Focus",
          "type": "text"
        },
        "description": {
          "value": "By default, the drawer’s panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the autofocus attribute to it as shown below.",
          "type": "text"
        }
      }
    },
    "dropdown": {
      "default": {
        "description": {
          "value": "Dropdowns expose additional content that “drops down” in a panel.Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.\n\nDropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker). The API gives you complete control over showing, hiding, and positioning the panel.",
          "type": "text"
        },
        "title": {
          "value": "Dropdown",
          "type": "text"
        }
      },
      "selected": {
        "title": {
          "value": "Getting the Selected Item",
          "type": "text"
        },
        "description": {
          "value": "When dropdowns are used with menus, you can listen for the syn-select event to determine which menu item was selected. The menu item element will be exposed in event.detail.item. You can set value props to make it easier to identify commands. DEV: Alternatively, you can listen for the click event on individual menu items. Note that, using this approach, disabled menu items will still emit a click event.",
          "type": "text"
        }
      },
      "placement": {
        "title": {
          "value": "Placement",
          "type": "text"
        },
        "description": {
          "value": "The preferred placement of the dropdown can be set with the placement attribute. Note that the actual position may vary to ensure the panel remains in the viewport.",
          "type": "text"
        }
      },
      "distance": {
        "title": {
          "value": "Distance",
          "type": "text"
        },
        "description": {
          "value": "The distance from the panel to the trigger can be customized using the distance attribute. This value is specified in pixels.",
          "type": "text"
        }
      },
      "skidding": {
        "title": {
          "value": "Skidding",
          "type": "text"
        },
        "description": {
          "value": "The offset of the panel along the trigger can be customized using the skidding attribute. This value is specified in pixels.",
          "type": "text"
        }
      },
      "submenu": {
        "title": {
          "value": "Submenus",
          "type": "text"
        },
        "description": {
          "value": "To create a submenu, nest an <syn-menu slot=\"submenu\"> element in a menu item.",
          "type": "text"
        },
        "warning": {
          "value": "As a UX best practice, avoid using more than one level of submenus when possible.",
          "type": "text"
        }
      }
    },
    "file": {
      "default": {
        "title": {
          "value": "File",
          "type": "text"
        },
        "description": {
          "value": "File control is a component with which a user can select a local file. It shows the value of the selected file.",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the file selector an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "multiple": {
        "title": {
          "value": "Multiple",
          "type": "text"
        },
        "description": {
          "value": "Use the multiple attribute to allow the selection of multiple files.\n\nFigma only: Override the button/droparea and value text directly, to indicate that multiple files are selected (“file” -> “files”)",
          "type": "text"
        }
      },
      "hide-value": {
        "title": {
          "value": "Hide Value",
          "type": "text"
        },
        "description": {
          "value": "There might be situations, where you don’t want to show the selected value (e. g. when something is automatically uploading).",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a file input.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Readonly",
          "type": "text"
        },
        "description": {
          "value": "Use the readonly attribute to set a file input to a readonly state.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change the component's size.",
          "type": "text"
        }
      },
      "droparea": {
        "title": {
          "value": "Droparea",
          "type": "text"
        },
        "description": {
          "value": "Use the droparea attribute to switch to a full-width button with a drop area.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Dropzone has been focused by the keyboard interaction and that the syn-file component is ready for use.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the syn-file is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
          "type": "text"
        }
      },
      "directory": {
        "title": {
          "value": "Directory",
          "type": "text"
        },
        "description": {
          "value": "The webkitdirectory setting allows users to select entire directories instead of individual files. When a directory is chosen, all files inside (including those in sub-directories) are selected. Although this feature is not part of the official HTML specification, it is widely supported across major browsers.",
          "type": "text"
        }
      }
    },
    "format-bytes": {
      "description": {
        "value": "Formats a number as a human readable bytes value.",
        "type": "text"
      },
      "title": {
        "value": "Format Bytes",
        "type": "text"
      }
    },
    "format-date": {
      "description": {
        "value": "Formats a date/time using the specified locale and options.",
        "type": "text"
      },
      "title": {
        "value": "Format Date",
        "type": "text"
      }
    },
    "format-number": {
      "description": {
        "value": "Formats a number using the specified locale and options.",
        "type": "text"
      },
      "title": {
        "value": "Format Number",
        "type": "text"
      }
    },
    "prio-nav": {
      "default": {
        "description": {
          "value": "Priority navigation is supported as product navigation if required. This navigation layout provides a high level of findability and support so that users know where they are at all times and can ensure that they can easily reach their goals.\n\nNote: Please note that the priority navigation does not have a child menu navigation, if you want to have a child navigation, combine the priority navigation and the side navigation",
          "type": "text"
        },
        "title": {
          "value": "Priority Navigation",
          "type": "text"
        }
      },
      "priority-menu": {
        "description": {
          "value": "If there is not enough space, elements will move into a dropdown. If there is only space for  one item, it will display the priority menu only.",
          "type": "text"
        },
        "title": {
          "value": "Priority Menu",
          "type": "text"
        }
      }
    },
    "icon-button": {
      "default": {
        "description": {
          "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\nFor a full list of icons that come bundled with Synergy, refer to the Assets.\n\n**Note:** To make the icon-button work in development, have a look at the icon documentation for how to set up the assets package.",
          "type": "text"
        },
        "title": {
          "value": "Icon Button",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a icon-button size.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable the icon button.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the icon-button has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "color": {
        "title": {
          "value": "Color",
          "type": "text"
        },
        "description": {
          "value": "The Icon button can have two color variants, Primary or Neutral Color.",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Accessibility Label",
          "type": "text"
        },
        "description": {
          "value": "A description that gets read by assistive devices. For optimal accessibility, you have to include a label that describes what the icon button does.",
          "type": "text"
        }
      },
      "link": {
        "title": {
          "value": "Link Buttons",
          "type": "text"
        },
        "description": {
          "value": "It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.",
          "type": "text"
        }
      }
    },
    "icon": {
      "default": {
        "description": {
          "value": "Icons are symbols that can be used to represent various options within an application.",
          "type": "text"
        },
        "title": {
          "value": "Icon",
          "type": "text"
        }
      }
    },
    "include": {
      "description": {
        "value": "Includes give you the power to embed external HTML files into the page.",
        "type": "text"
      },
      "title": {
        "value": "Include",
        "type": "text"
      }
    },
    "input": {
      "default": {
        "description": {
          "value": "Inputs collect data from the user.",
          "type": "text"
        },
        "title": {
          "value": "Input",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the input an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "help-text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "placeholder": {
        "title": {
          "value": "Placeholder",
          "type": "text"
        },
        "description": {
          "value": "Use the placeholder attribute to add a placeholder.",
          "type": "text"
        }
      },
      "clearable": {
        "title": {
          "value": "Clearable",
          "type": "text"
        },
        "description": {
          "value": "Add the clearable attribute to add a clear button when the input has content.",
          "type": "text"
        }
      },
      "password-toggle": {
        "title": {
          "value": "Toggle Password",
          "type": "text"
        },
        "description": {
          "value": "Add the password-toggle attribute to add a toggle button that will show the password when activated.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only Inputs",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only input.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable an input.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change an input's size.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix Suffix Text and Icons",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add text and icons.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus attribute provides feedback to the users, informing them that the input component is ready for use.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
          "type": "text"
        }
      },
      "stepper": {
        "title": {
          "value": "Stepper",
          "type": "text"
        },
        "description": {
          "value": "The Stepper (Input type number) attribute has additional step buttons at the right side for incrementing and decrementing values. It is ideal for situations where users need to adjust quantities or settings within a range.",
          "type": "text"
        }
      },
      "stepper-input-handling": {
        "title": {
          "value": "Stepper Input Handling",
          "type": "text"
        },
        "description": {
          "value": "The `numeric-strategy` property defines how numeric input is handled during user interaction. It lets you select between the browsers native control and Synergy’s enhanced number-input logic.\n\nnative: Uses the browser’s built-in number control. Values are not auto-clamped, and stepping/validation can vary across browsers.\n\nmodern: Provides a more intuitive and predictable behavior by automatically clamping values to the nearest min/max value, including those bounds when stepping, and ignoring the step attribute during validation.",
          "type": "text"
        }
      },
      "types": {
        "title": {
          "value": "Input Types",
          "type": "text"
        },
        "description": {
          "value": "The type attribute controls the type of input the browser renders.",
          "type": "text"
        }
      },
      "label-position": {
        "title": {
          "value": "Customizing Label Position",
          "type": "text"
        },
        "description": {
          "value": "Use to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.",
          "type": "text"
        }
      }
    },
    "link": {
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a Link.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Link has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "prefix-suffix-icons": {
        "title": {
          "value": "Prefix and Suffix Icons.",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add icons.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Size",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change the Link size.",
          "type": "text"
        }
      },
      "inline": {
        "title": {
          "value": "Inline",
          "type": "text"
        },
        "description": {
          "value": "If a link is placed within body text, it only breaks if variant without icon is used. If an icon is needed, a line break applies, and the body text is placed above and below the link.",
          "type": "text"
        }
      },
      "quiet": {
        "title": {
          "value": "Quiet",
          "type": "text"
        },
        "description": {
          "value": "Use the Quiet attribute to have a low emphasis variant of a Link. This can be used if the link should not attract too much attention.",
          "type": "text"
        }
      }
    },
    "link-list": {
      "horizontal": {
        "title": {
          "value": "Horizontal",
          "type": "text"
        },
        "description": {
          "value": "Use the horizontal attribute to indicate that it is used as a horizontal link list.",
          "type": "text"
        }
      },
      "multiline": {
        "title": {
          "value": "Multiline",
          "type": "text"
        },
        "description": {
          "value": "The horizontal link list automatically wraps into a new line if there is not enough space available.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Size",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change the link list size.",
          "type": "text"
        }
      }
    },
    "menu-item": {
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Menu Item has been focused by the keyboard interaction from the user.",
          "type": "text"
        }
      },
      "default": {
        "description": {
          "value": "Menu items provide options for the user to pick from in a menu.",
          "type": "text"
        },
        "title": {
          "value": "Menu Item",
          "type": "text"
        }
      },
      "prefixsuffix": {
        "title": {
          "value": "Prefix and Suffix",
          "type": "text"
        },
        "description": {
          "value": "Add content to the start and end of menu items using the prefix and suffix slots.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable an option and prevent it from being selected.",
          "type": "text"
        }
      },
      "loading": {
        "title": {
          "value": "Loading",
          "type": "text"
        },
        "description": {
          "value": "Use the loading attribute to indicate that a menu item is busy. Like a disabled menu item, clicks will be suppressed until the loading state is removed.",
          "type": "text"
        }
      },
      "checkbox": {
        "title": {
          "value": "Checkbox Menu Items",
          "type": "text"
        },
        "description": {
          "value": "Set the type attribute to checkbox to create a menu item that will toggle on and off when selected. You can use the checked attribute to set the initial state.\n\nCheckbox menu items are visually indistinguishable from regular menu items. Their ability to be toggled is primarily inferred from context, much like you’d find in the menu of a native app.",
          "type": "text"
        }
      },
      "selection": {
        "title": {
          "value": "Value & Selection",
          "type": "text"
        },
        "description": {
          "value": "The value attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the syn-select event will be emitted and a reference to the item will be available at event.detail.item. You can use this reference to access the selected item’s value, its checked state, and more.",
          "type": "text"
        }
      }
    },
    "menu-label": {
      "default": {
        "description": {
          "value": "Menu labels are used to describe a group of menu items.",
          "type": "text"
        },
        "title": {
          "value": "Menu Label",
          "type": "text"
        }
      }
    },
    "menu": {
      "default": {
        "description": {
          "value": "Menus provide a list of options for the user to choose from.\n\nYou can use menu items, menu labels, and dividers to compose a menu. Menus support keyboard interactions, including type-to-select an option.",
          "type": "text"
        },
        "title": {
          "value": "Menu",
          "type": "text"
        },
        "info": {
          "value": "Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you’re building navigation, use <nav> and <a> elements instead.\n(Figma: syn-side-nav or syn-prio-nav)",
          "type": "text"
        },
        "warning": {
          "value": "Deviation between dev and design, For implementation reasons design nests the dropdown inside the menu, development the other way round",
          "type": "text"
        }
      },
      "dropdown": {
        "title": {
          "value": "In Dropdowns",
          "type": "text"
        },
        "description": {
          "value": "Menus work really well when used inside dropdowns.",
          "type": "text"
        }
      },
      "submenu": {
        "title": {
          "value": "Submenus",
          "type": "text"
        },
        "description": {
          "value": "To create a submenu, nest an <syn-menu slot=\"submenu\"> in any menu item.",
          "type": "text"
        },
        "warning": {
          "value": "As a UX best practice, avoid using more than one level of submenus when possible.",
          "type": "text"
        }
      }
    },
    "mutation-observer": {
      "description": {
        "value": "The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.",
        "type": "text"
      },
      "title": {
        "value": "Mutation Observer",
        "type": "text"
      }
    },
    "option": {
      "default": {
        "description": {
          "value": "Options define the selectable items within various form controls such as select.",
          "type": "text"
        },
        "title": {
          "value": "Option",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable an option and prevent it from being selected.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and Suffix",
          "type": "text"
        },
        "description": {
          "value": "Add icons to the start and end of menu items using the prefix and suffix slots.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "*Sizes",
          "type": "text"
        },
        "description": {
          "value": "Figma only: Use the size attribute to change a option size. The size of all options should follow the parents's size attribute. In development the size will be automatically set by the parent element size.",
          "type": "text"
        }
      }
    },
    "pagination": {
      "default": {
        "description": {
          "value": "The default pagination offers the most comprehensive controls and is optimized for tables, lists, and complex data views. It is intended for use cases where users need to adjust both the number of displayed rows and the active page. The navigation controls allow switching between pages as well as jumping directly to the first or last page.",
          "type": "text"
        },
        "title": {
          "value": "Pagination",
          "type": "text"
        }
      },
      "with-divider": {
        "description": {
          "value": "An optional divider can be shown to provide visual separation depending on the layout needs.",
          "type": "text"
        },
        "title": {
          "value": "With Divider",
          "type": "text"
        }
      },
      "disabled": {
        "description": {
          "value": "Use the disabled attribute to disable all interactive elements like syn-select, syn-input, and the previous and next syn-icon-buttons. This can be useful if you want to prevent the user from entering something again immediately after an entry before the first entry has been processed.",
          "type": "text"
        },
        "title": {
          "value": "Disabled",
          "type": "text"
        }
      },
      "compact": {
        "description": {
          "value": "The compact variant focuses on essential pagination controls and fits tight layouts or mobile environments. Use this variant when space is limited or page size stays fixed.",
          "type": "text"
        },
        "title": {
          "value": "Compact Pagination",
          "type": "text"
        }
      },
      "sizes": {
        "description": {
          "value": "Use the size attribute to change the pagination size.",
          "type": "text"
        },
        "title": {
          "value": "Sizes",
          "type": "text"
        }
      }
    },
    "popup": {
      "default": {
        "description": {
          "value": "Popup is a utility that lets you declaratively anchor “popup” containers to another element.\nThis component’s name is inspired by `<popup>`. It uses Floating UI under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.\n\nPopup doesn’t provide any styles — just positioning! The popup’s preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.",
          "type": "text"
        },
        "title": {
          "value": "Popup",
          "type": "text"
        },
        "warning": {
          "value": "Popup is a low-level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of <syn-popup> will involve building other components. It should rarely, if ever, occur directly in your HTML.\n\nFor all Figma Designers, please refer for this component in Storybook.",
          "type": "text"
        },
        "info": {
          "value": "A popup’s anchor should not be styled with display: contents since the coordinates will not be eligible for calculation. However, if the anchor is a <slot> element, popup will use the first assigned element as the anchor. This behavior allows other components to pass anchors through more easily via composition.",
          "type": "text"
        }
      }
    },
    "progress-bar": {
      "default": {
        "description": {
          "value": "Progress bars are used to show the status of an ongoing operation.",
          "type": "text"
        },
        "title": {
          "value": "Progress Bar",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.",
          "type": "text"
        }
      },
      "custom-height": {
        "title": {
          "value": "Custom Height",
          "type": "text"
        },
        "description": {
          "value": "Use the --height custom property to set the progress bar’s height.",
          "type": "text"
        }
      },
      "showing-values": {
        "title": {
          "value": "Showing Values",
          "type": "text"
        },
        "description": {
          "value": "Use the default slot to show a value.",
          "type": "text"
        }
      },
      "indeterminate": {
        "title": {
          "value": "Indeterminate",
          "type": "text"
        },
        "description": {
          "value": "The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.",
          "type": "text"
        }
      }
    },
    "progress-ring": {
      "default": {
        "description": {
          "value": "Progress rings are used to show the progress of a determinate operation in a circular fashion.",
          "type": "text"
        },
        "title": {
          "value": "Progress Ring",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Size",
          "type": "text"
        },
        "description": {
          "value": "Use the --size custom property to set the diameter of the progress ring.",
          "type": "text"
        }
      },
      "track-indicator-width": {
        "title": {
          "value": "Track and Indicator Width",
          "type": "text"
        },
        "description": {
          "value": "Use the --track-width and --indicator-width custom properties to set the width of the progress ring’s track and indicator.",
          "type": "text"
        }
      },
      "color": {
        "titel": {
          "value": "Colors",
          "type": "text"
        },
        "description": {
          "value": "To change the color, use the --track-color and --indicator-color custom properties.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to label the progress ring and tell assistive devices how to announce it.",
          "type": "text"
        }
      },
      "show-values": {
        "title": {
          "value": "Showing Values",
          "type": "text"
        },
        "description": {
          "value": "Use the default slot to show a label inside the progress ring. To display the value correctly, you should keep to a minimum width of 85 pixels.",
          "type": "text"
        }
      }
    },
    "qr-code": {
      "description": {
        "value": "Generates a QR code and renders it using the Canvas API.",
        "type": "text"
      },
      "title": {
        "value": "QR Code",
        "type": "text"
      }
    },
    "radio-button": {
      "description": {
        "value": "Radios buttons allow the user to select a single option from a group using a button-like control.",
        "type": "text"
      },
      "title": {
        "value": "Radio Button",
        "type": "text"
      }
    },
    "radio-group": {
      "default": {
        "description": {
          "value": "Radio groups are used to group multiple radios or radio buttons so they function as a single form control.",
          "type": "text"
        },
        "title": {
          "value": "Radio Group",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the radio-group an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabling Options",
          "type": "text"
        },
        "description": {
          "value": "Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to a radio to draw it in a readonly state.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizing Options",
          "type": "text"
        },
        "description": {
          "value": "The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.",
          "type": "text"
        }
      },
      "required": {
        "title": {
          "value": "Validation",
          "type": "text"
        },
        "description": {
          "value": "Setting the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.",
          "type": "text"
        }
      },
      "setCustomValidity": {
        "title": {
          "value": "Custom Validity",
          "type": "text"
        },
        "description": {
          "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that one of the radio buttons has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.",
          "type": "text"
        }
      },
      "checked": {
        "title": {
          "value": "Checked",
          "type": "text"
        },
        "description": {
          "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
          "type": "text"
        }
      }
    },
    "range": {
      "default": {
        "title": {
          "value": "Range",
          "type": "text"
        },
        "description": {
          "value": "Ranges allow the user to select values within a given range using a thumb.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the range an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Range has been focused by the keyboard interaction or active click from the user.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to a range to draw it in a readonly state.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a range’s size.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the input is invalid. As range validation is not supported by the browser, you will need to implement your own validation logic.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a range.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and Suffix",
          "type": "text"
        },
        "description": {
          "value": "Add any element to the start and end of range items using the prefix and suffix slots.",
          "type": "text"
        }
      },
      "custom-track-colors": {
        "description": {
          "value": "You can customize the active and inactive portions of the track using the --track-color-active and --track-color-inactive custom properties.",
          "type": "text"
        },
        "title": {
          "value": "Custom Track Colors",
          "type": "text"
        }
      },
      "custom-track-offset": {
        "title": {
          "value": "Custom Track Offset",
          "type": "text"
        },
        "description": {
          "value": "You can customize the initial offset of the active track using the --track-active-offset custom property.",
          "type": "text"
        }
      },
      "multi-knob": {
        "title": {
          "value": "Multi thumb",
          "type": "text"
        },
        "description": {
          "value": "You can add multiple range-thumbs to your range.",
          "type": "text"
        }
      },
      "multi-knob-restrict-movement": {
        "title": {
          "value": "Multi thumb with restricted movement",
          "type": "text"
        },
        "description": {
          "value": "Set the restrict-movement attribute to true to prevent the thumbs from overlapping.",
          "type": "text"
        }
      },
      "tooltip-placement": {
        "title": {
          "value": "Tooltip Placement",
          "type": "text"
        },
        "description": {
          "value": "By default, the tooltip is shown on top. Set tooltip-placement to bottom to show it below the range.",
          "type": "text"
        }
      },
      "tooltip-disabled": {
        "title": {
          "value": "Disable the Tooltip",
          "type": "text"
        },
        "description": {
          "value": "To disable the tooltip, set tooltip-placement to none.",
          "type": "text"
        }
      },
      "tooltip-formatter": {
        "title": {
          "value": "Custom Tooltip Formatter",
          "type": "text"
        },
        "description": {
          "value": "You can change the tooltip’s content by setting the tooltipFormatter property to a function that accepts the range’s value as an argument.",
          "type": "text"
        }
      }
    },
    "range-tick": {
      "default": {
        "title": {
          "value": "Ticks",
          "type": "text"
        },
        "description": {
          "value": "Use the ticks slot to insert ticks or groups with ticks to improve positioning.",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the default slot to give the tick a label.",
          "type": "text"
        }
      },
      "grouping": {
        "title": {
          "value": "Grouping",
          "type": "text"
        },
        "description": {
          "value": "Grouping multiple ticks can be used as a scale. This can be used for uneven distributions as well.",
          "type": "text"
        }
      },
      "subdivision": {
        "title": {
          "value": "Subdivision Ticks",
          "type": "text"
        },
        "description": {
          "value": "It is possible to divide the space between major ticks for finer scale readings.",
          "type": "text"
        }
      }
    },
    "rating": {
      "description": {
        "value": "Ratings give users a way to quickly view and provide feedback.",
        "type": "text"
      },
      "title": {
        "value": "Rating",
        "type": "text"
      }
    },
    "relative-time": {
      "description": {
        "value": "Outputs a localized time phrase relative to the current date and time.",
        "type": "text"
      },
      "title": {
        "value": "Relative Time",
        "type": "text"
      }
    },
    "resize-observer": {
      "description": {
        "value": "The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.",
        "type": "text"
      },
      "title": {
        "value": "Resize Observer",
        "type": "text"
      }
    },
    "select": {
      "default": {
        "title": {
          "value": "Select",
          "type": "text"
        },
        "description": {
          "value": "Selects allow you to choose items from a menu of predefined options.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the select an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "clearable": {
        "title": {
          "value": "Clearable",
          "type": "text"
        },
        "description": {
          "value": "Use the clearable attribute to make the control clearable. The clear button only appears when an option is selected.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a select.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to a select to draw it in a readonly state.",
          "type": "text"
        }
      },
      "multiple": {
        "title": {
          "value": "Multiple",
          "type": "text"
        },
        "description": {
          "value": "To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values.",
          "type": "text"
        }
      },
      "initialvalue": {
        "title": {
          "value": "Setting Initial Values",
          "type": "text"
        },
        "description": {
          "value": "Use the value attribute to set the initial selection.\n\nWhen using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, <syn-option> values cannot contain spaces. If you’re accessing the value property through Javascript, it will be an array.",
          "type": "text"
        }
      },
      "group": {
        "title": {
          "value": "Grouping Options",
          "type": "text"
        },
        "description": {
          "value": "Use <syn-optgroup> to group listbox items visually.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a select’s size. Note that size does not apply to listbox options.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and Suffix Icons",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add text and icons.",
          "type": "text"
        }
      },
      "gettag": {
        "title": {
          "value": "Custom Tags",
          "type": "text"
        },
        "description": {
          "value": "When multiple options can be selected, you can provide custom tags by passing a function to the getTag property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getTag() function will be called for each option. The first argument is an <syn-option> element and the second argument is the tag’s index (its position in the tag list).\n\nRemember that custom tags are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.",
          "type": "text"
        }
      },
      "placeholder": {
        "title": {
          "value": "Placeholder",
          "type": "text"
        },
        "description": {
          "value": "Use the placeholder attribute to add a placeholder.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Select has been focused by the keyboard interaction or active click from the user..",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the Select is invalid. For example, if the entry of text is mandatory and nothing has been entered.",
          "type": "text"
        }
      }
    },
    "skeleton": {
      "title": {
        "value": "Skeleton",
        "type": "text"
      },
      "description": {
        "value": "Skeletons are used to provide a visual representation of where content will eventually be drawn.",
        "type": "text"
      }
    },
    "spinner": {
      "default": {
        "title": {
          "value": "Spinner",
          "type": "text"
        },
        "description": {
          "value": "Spinners are used to show the progress of an indeterminate operation.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Size",
          "type": "text"
        },
        "description": {
          "value": "Spinners are sized based on the current font size. To change their size, set the font-size property on the spinner itself or on a parent element as shown below.",
          "type": "text"
        }
      },
      "track-width": {
        "title": {
          "value": "Track Width",
          "type": "text"
        },
        "description": {
          "value": "The width of the spinner’s track can be changed by setting the --track-width custom property.",
          "type": "text"
        }
      },
      "color": {
        "title": {
          "value": "Color",
          "type": "text"
        },
        "description": {
          "value": "The spinner’s colors can be changed by setting the --indicator-color and --track-color custom properties.",
          "type": "text"
        }
      }
    },
    "split-panel": {
      "title": {
        "value": "Split Panel",
        "type": "text"
      },
      "description": {
        "value": "Split panels display two adjacent panels, allowing the user to reposition them.",
        "type": "text"
      }
    },
    "switch": {
      "default": {
        "description": {
          "value": "Switches allow the user to toggle an option on or off.",
          "type": "text"
        },
        "title": {
          "value": "Switch",
          "type": "text"
        }
      },
      "checked": {
        "description": {
          "value": "Use the checked attribute to activate the switch.",
          "type": "text"
        },
        "title": {
          "value": "Checked",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable the switch.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only switch.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a switch’s size.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the Switch is invalid.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      }
    },
    "tab-group": {
      "default": {
        "description": {
          "value": "Tab groups organize content into a container that shows one section at a time. Tab groups make use of tabs and tab panels. Each tab must be slotted into the nav slot and its panel must refer to a tab panel of the same name.",
          "type": "text"
        },
        "title": {
          "value": "Tab Group",
          "type": "text"
        }
      },
      "start": {
        "title": {
          "value": "Tabs on Start",
          "type": "text"
        },
        "description": {
          "value": "Tabs can be shown on the starting side by setting placement to start.",
          "type": "text"
        }
      },
      "end": {
        "title": {
          "value": "Tabs on End",
          "type": "text"
        },
        "description": {
          "value": "Tabs can be shown on the ending side by setting placement to end.",
          "type": "text"
        }
      },
      "closable": {
        "title": {
          "value": "Closable Tabs",
          "type": "text"
        },
        "description": {
          "value": "Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.",
          "type": "text"
        }
      },
      "scrolling": {
        "title": {
          "value": "Scrolling Tabs",
          "type": "text"
        },
        "description": {
          "value": "When there are more tabs than horizontal space allows, the nav will be scrollable.",
          "type": "text"
        }
      },
      "manuel": {
        "title": {
          "value": "Manual Activation",
          "type": "text"
        },
        "description": {
          "value": "When focused, keyboard users can press Left or Right to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation=\"manual\" which will require the user to press Space or Enter before showing the tab panel (manual activation).",
          "type": "text"
        }
      },
      "hierachy": {
        "title": {
          "value": "Visual Hierarchy",
          "type": "text"
        },
        "description": {
          "value": "To structure the Page, you can use different tab styles.",
          "type": "text"
        }
      },
      "icon": {
        "title": {
          "value": "Icons",
          "type": "text"
        },
        "description": {
          "value": "It is also possible to a Add icon to the Tabs.",
          "type": "text"
        }
      }
    },
    "tab-panel": {
      "default": {
        "description": {
          "value": "Tab panels are used inside tab groups to display tabbed content.",
          "type": "text"
        },
        "title": {
          "value": "Tab Panel",
          "type": "text"
        }
      }
    },
    "tab": {
      "default": {
        "description": {
          "value": "Tabs are used inside tab groups to represent and activate tab panels.",
          "type": "text"
        },
        "title": {
          "value": "Tab",
          "type": "text"
        }
      }
    },
    "tag": {
      "default": {
        "description": {
          "value": "Tags are used as labels to organize things or to indicate a selection.",
          "type": "text"
        },
        "title": {
          "value": "Tag",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a tab’s size.",
          "type": "text"
        }
      },
      "removable": {
        "title": {
          "value": "Removable",
          "type": "text"
        },
        "description": {
          "value": "Use the removable attribute to add a remove button to the tag.",
          "type": "text"
        }
      }
    },
    "tag-group": {
      "default": {
        "description": {
          "value": "A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels. It arranges tags in flexible rows and supports different sizes and layouts. Tags can be removable, icon based, or purely textual.",
          "type": "text"
        },
        "title": {
          "value": "Tag-Group",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the tag-group an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a tag group’s size.",
          "type": "text"
        }
      },
      "label-alignment": {
        "title": {
          "value": "Label Alignment",
          "type": "text"
        },
        "description": {
          "value": "Use the label-position attribute to change the position of the label. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.",
          "type": "text"
        }
      }
    },
    "textarea": {
      "default": {
        "title": {
          "value": "Textarea",
          "type": "text"
        },
        "description": {
          "value": "Textareas collect data from the user and allow multiple lines of text.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "rows": {
        "title": {
          "value": "Rows",
          "type": "text"
        },
        "description": {
          "value": "Use the rows attribute to change the number of text rows that get shown.",
          "type": "text"
        }
      },
      "placeholder": {
        "title": {
          "value": "Placeholders",
          "type": "text"
        },
        "description": {
          "value": "Use the placeholder attribute to add a placeholder.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only Textareas",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only textarea.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a textarea.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a textarea’s size.",
          "type": "text"
        }
      },
      "resize": {
        "title": {
          "value": "Prevent Resizing",
          "type": "text"
        },
        "description": {
          "value": "By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.",
          "type": "text"
        }
      },
      "resize-auto": {
        "title": {
          "value": "Expand with Content",
          "type": "text"
        },
        "description": {
          "value": "Textareas will automatically resize to expand to fit their content when resize is set to auto.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Textarea has been focused by the keyboard interaction and that the Textarea component is ready for use.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
          "type": "text"
        }
      }
    },
    "tooltip": {
      "default": {
        "description": {
          "value": "Tooltips display additional information based on a specific action.\n\nA tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.\n\nTooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.",
          "type": "text"
        },
        "title": {
          "value": "Tooltip",
          "type": "text"
        }
      },
      "placement": {
        "title": {
          "value": "Placement",
          "type": "text"
        },
        "description": {
          "value": "Use the placement attribute to set the preferred placement of the tooltip.",
          "type": "text"
        }
      },
      "onclick": {
        "title": {
          "value": "Click Trigger",
          "type": "text"
        },
        "description": {
          "value": "Set the trigger attribute to click to toggle the tooltip on click instead of hover.",
          "type": "text"
        }
      },
      "manuel": {
        "title": {
          "value": "Manual Trigger",
          "type": "text"
        },
        "description": {
          "value": "Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.",
          "type": "text"
        }
      },
      "removingarrows": {
        "title": {
          "value": "Removing Arrows",
          "type": "text"
        },
        "description": {
          "value": "You can control the size of tooltip arrows by overriding the --syn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.",
          "type": "text"
        }
      },
      "htmltooltip": {
        "title": {
          "value": "HTML in Tooltips",
          "type": "text"
        },
        "description": {
          "value": "Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.",
          "type": "text"
        }
      },
      "maxwith": {
        "title": {
          "value": "Setting a Maximum Width",
          "type": "text"
        },
        "description": {
          "value": "Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.",
          "type": "text"
        }
      },
      "hoisting": {
        "title": {
          "value": "Hoisting",
          "type": "text"
        },
        "description": {
          "value": "Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. The hoist attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter.",
          "type": "text"
        }
      }
    },
    "tree-item": {
      "title": {
        "value": "Tree Item",
        "type": "text"
      },
      "description": {
        "value": "A tree item serves as a hierarchical node that lives inside a tree.",
        "type": "text"
      }
    },
    "tree": {
      "title": {
        "value": "Tree",
        "type": "text"
      },
      "description": {
        "value": "Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.",
        "type": "text"
      }
    },
    "visually-hidden": {
      "title": {
        "value": "Visually Hidden",
        "type": "text"
      },
      "description": {
        "value": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
        "type": "text"
      }
    },
    "radio": {
      "default": {
        "title": {
          "value": "Radio",
          "type": "text"
        },
        "description": {
          "value": "Radios allow the user to select a single option from a group. \\nRadios are designed to be used with radio groups.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a radio.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only radio.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Add the size attribute to the Radio Group to change the radios’ size.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.",
          "type": "text"
        }
      },
      "initialValue": {
        "title": {
          "value": "Initial Value",
          "type": "text"
        },
        "description": {
          "value": "To set the initial value and checked state, use the value attribute on the radio element.",
          "type": "text"
        }
      }
    },
    "optiongroup": {
      "default": {
        "title": {
          "value": "Option Group",
          "type": "text"
        },
        "description": {
          "value": "Use <syn-optgroup> to group listbox items visually.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute in the <syn-optgroup> to disable the Section and prevent it from being selected.",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and suffix",
          "type": "text"
        },
        "description": {
          "value": "Add icons to the start and end of menu items using the prefix and suffix slots.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "*Sizes",
          "type": "text"
        },
        "description": {
          "value": "Figma only: Use the size attribute to change a optgroup size. The size of all optgroups should follow the parent's size attribute. In development the size will be automatically set by the parent element size.",
          "type": "text"
        }
      }
    },
    "styles": {
      "body": {
        "title": {
          "value": "Body and UI text",
          "type": "text"
        },
        "description": {
          "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values.\nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\n\nIt is also possible to format the text bold or semibold for certain text passages and UI elements such as label.",
          "type": "text"
        }
      },
      "headings": {
        "title": {
          "value": "Headings",
          "type": "text"
        },
        "description": {
          "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\n- building page hierarchy,\n- helping users scan large chunks of text,\n- providing a title to a page or piece of content,\n-as subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
          "type": "text"
        }
      },
      "weight": {
        "title": {
          "value": "Font-Weights",
          "type": "text"
        },
        "description": {
          "value": "Supported font weights",
          "type": "text"
        }
      },
      "link": {
        "title": {
          "value": "Link",
          "type": "text"
        },
        "description": {
          "value": "Links can be used to display a link to other pages.",
          "type": "text"
        }
      },
      "link-list": {
        "description": {
          "value": "Links can be grouped horizontally or vertically.",
          "type": "text"
        },
        "title": {
          "value": "Link list",
          "type": "text"
        }
      }
    },
    "nav-item": {
      "default": {
        "title": {
          "value": "Navigation Item",
          "type": "text"
        },
        "description": {
          "value": "The navigation item is used to trigger page switches.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to change the content of a navigation item.",
          "type": "text"
        }
      },
      "current": {
        "title": {
          "value": "Current",
          "type": "text"
        },
        "description": {
          "value": "The current attribute provides the user feedback about which of the navigation elements is currently selected.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that the Navigation Item has been focused by the keyboard interaction or active click from the user.",
          "type": "text"
        }
      },
      "nav-horizontal": {
        "title": {
          "value": "Horizontal Navigation",
          "type": "text"
        },
        "description": {
          "value": "Use the horizontal attribute to indicate that an element is used in a horizontal navigation. (The example shows it in combination with the current attribute, to indicate the difference.)",
          "type": "text"
        }
      },
      "prefix-suffix": {
        "title": {
          "value": "Prefix and suffix Slot",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add e. g. icons or tags. If available the prefix slot will be shown in the rail navigation.",
          "type": "text"
        }
      },
      "children": {
        "title": {
          "value": "Children closed / open (vertical only)",
          "type": "text"
        },
        "description": {
          "value": "Use the *children attribute to indicate that a chevron should be shown. In development this will be handled automatically as soon as an element has children.\n\nNote:\nSince there should be no double use of functionality, a link cannot be mixed with an accordion behavior. The accordion always has priority, which means that if the href attribute is used at the same time as children, the link functionality is ignored and only the accordion behavior is provided.",
          "type": "text"
        }
      },
      "divider": {
        "title": {
          "value": "Divider",
          "type": "text"
        },
        "description": {
          "value": "Use the divider attribute to add a border at the top. This should be used for first level elements in vertical navigations.",
          "type": "text"
        }
      },
      "indentation": {
        "title": {
          "value": "Indentation",
          "type": "text"
        },
        "description": {
          "value": "Vertical navigation elements can be indented to indicate deeper navigation levels.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a navigation-item.",
          "type": "text"
        }
      }
    },
    "header": {
      "default": {
        "title": {
          "value": "Header",
          "type": "text"
        },
        "description": {
          "value": "The header is used to indicate the name of the app, provide important actions in a toolbar and a navigation.",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Label",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to change the app name.",
          "type": "text"
        }
      },
      "logo": {
        "title": {
          "value": "Logo",
          "type": "text"
        },
        "description": {
          "value": "Use the logo slot to change the app logo. Usually this is only needed in whitelabel solutions, when the SICK branding explicitly has to be hidden.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that a link in the logo has been focused by the keyboard interaction and that the link is ready to be navigated to.",
          "type": "text"
        }
      },
      "options": {
        "title": {
          "value": "Meta Navigation",
          "type": "text"
        },
        "description": {
          "value": "Use the Meta Navigation slot to add additional functionalities to your application. Please be aware of the guidelines regarding the order of icons in the toolbar.\nImportant: The Options Menu doesn’t handle any responsive behaviour, e. g. if there is not enough space for all items in different screen sizes. You have to make sure yourself, that your app works correctly and e. g. move elements into the footer of the side navigation or inside a “more” button in the Options Menu.",
          "type": "text"
        }
      },
      "options-with-dividers": {
        "title": {
          "value": "Meta Navigation with dividers",
          "type": "text"
        },
        "description": {
          "value": "If you need different icon groups or a separator between them, add a `<syn-divider>` between them.",
          "type": "text"
        }
      },
      "navigation": {
        "title": {
          "value": "Top Navigation",
          "type": "text"
        },
        "description": {
          "value": "Use the top navigation slot to add syn-navigation and horizontal syn-navigation-items.",
          "type": "text"
        }
      },
      "burger-menu": {
        "title": {
          "value": "Burger Menu",
          "type": "text"
        },
        "description": {
          "value": "Use the Burger Menu as trigger to open and close the Navigation. In the open state, the icon changes to a cancel icon. This will be hidden, if you use a rail navigation.",
          "type": "text"
        }
      },
      "sticky": {
        "title": {
          "value": "Sticky Header with Shadow",
          "type": "text"
        },
        "description": {
          "value": "Use the sticky attribute to add a shadow when the header is fixed at the top and other content scrolls behind it.",
          "type": "text"
        }
      }
    },
    "side-nav": {
      "default": {
        "title": {
          "value": "Side Navigation",
          "type": "text"
        },
        "description": {
          "value": "Side navigation lets the user navigate through the entire content of a product. It supports single or nested navigation levels.",
          "type": "text"
        }
      },
      "rail": {
        "title": {
          "value": "Rail",
          "type": "text"
        },
        "description": {
          "value": "Set the variant attribute to rail to only show a small navigation stripe at the left side using only the prefix-icons of the navigation items. This will open on hover on the rail navigation, therefore the header doesn't have an burger-menu-icon.\nOn touch devices the navigation opens on click and shows an overlay to be closable.\n\nNote: The Rail is only an option if all Navigation Items on the first level have an Icon. If this is not the case you should use a burger navigation.",
          "type": "text"
        }
      },
      "sticky": {
        "title": {
          "value": "Sticky",
          "type": "text"
        },
        "description": {
          "value": "Use the sticky variant when you need a persistent, toggleable side navigation that alternates between a compact “rail” (icon‐only) state and a full‐width state. \n\nNote: This pattern is only possible for flat navigation structures (no nesting) where every first‐level item has an icon.",
          "type": "text"
        }
      },
      "footer": {
        "title": {
          "value": "Footer",
          "type": "text"
        },
        "description": {
          "value": "The Side navigation can have an optional bottom navigation \"slot\" to split up the navigation entries.\n\nPlease avoid having to many navigation entries (at the bottom) as it can massively influence the user experience.",
          "type": "text"
        }
      },
      "fixed": {
        "title": {
          "value": "Fixed Content",
          "type": "text"
        },
        "description": {
          "value": "Per default, the side navigation shows an overlay. This should always be the case, if the content of the app is not shrinking. This makes especially sense for applications, where you navigate to a place and stay there for a longer time.",
          "type": "text"
        }
      },
      "shrinking": {
        "title": {
          "value": "Shrinking Content",
          "type": "text"
        },
        "description": {
          "value": "For specific cases it might make sense to have the navigation open while still being able to interact with the app. This especially makes sense for cases where you switch a lot between areas to interact with an app.\n\nYou can decide yourself depending on your app and screen size, when it makes sense to omit the overlay and shrink the content.\n\nThis should never be used in combination with a Rail navigation, as this would lead to too much friction on hover.",
          "type": "text"
        }
      },
      "indentation": {
        "title": {
          "value": "Indentation",
          "type": "text"
        },
        "description": {
          "value": "The different levels of navigation can be organized using the indention. The current status of a page shows the user directly which page they are browsing.",
          "type": "text"
        }
      }
    },
    "table": {
      "default": {
        "title": {
          "value": "Table-cell",
          "type": "text"
        },
        "description": {
          "value": "The syn-table-cell component offers basic styling for table cells. A table can be created by combining several cell components into columns and rows.\n\n DEV: Instead of a component we have multiple classes, to apply the table styling. More complex tables, such as applying the shadow styling and adding scrolling behavior, require additional CSS and JavaScript Code. See the table templates for examples.",
          "type": "text"
        }
      },
      "header": {
        "title": {
          "value": "Header",
          "type": "text"
        },
        "description": {
          "value": "Use the cell header attribute to help the user identify the top of the table. Table header can be used as column header and row Header, but not at the same time.",
          "type": "text"
        }
      },
      "alternating": {
        "title": {
          "value": "Alternating",
          "type": "text"
        },
        "description": {
          "value": "The alternating attribute helps the user to visually separate the rows, even when scrolling horizontally, and helps to compare the data.",
          "type": "text"
        }
      },
      "border": {
        "title": {
          "value": "Border",
          "type": "text"
        },
        "description": {
          "value": "Use the border attribute to define different borders in a cell. Borders can also be combined.",
          "type": "text"
        }
      },
      "scroll": {
        "title": {
          "value": "Scrolling Behaviour",
          "type": "text"
        },
        "description": {
          "value": "If the table contains a scrolling behavior the table cell gets a shadow.",
          "type": "text"
        }
      }
    },
    "combobox": {
      "default": {
        "title": {
          "value": "Combobox",
          "type": "text"
        },
        "description": {
          "value": "The combobox suggests items based on the user input.",
          "type": "text"
        }
      },
      "label": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the combobox an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\nThe help-text attribute should not be used to display error messages. To handle validation and error messaging, use syn-validate for proper error management.",
          "type": "text"
        }
      },
      "placeholder": {
        "title": {
          "value": "Placeholder",
          "type": "text"
        },
        "description": {
          "value": "Use the placeholder attribute to add a placeholder.",
          "type": "text"
        }
      },
      "focus": {
        "title": {
          "value": "Focus / Active",
          "type": "text"
        },
        "description": {
          "value": "The focus attribute provides feedback to the users, informing them that the combobox component is ready for use.",
          "type": "text"
        }
      },
      "simple": {
        "title": {
          "value": "Simple suggests",
          "type": "text"
        },
        "description": {
          "value": "A simple suggestions list shows the user a filtered list.",
          "type": "text"
        }
      },
      "highlight": {
        "title": {
          "value": "Highlight Query",
          "type": "text"
        },
        "description": {
          "value": "The filtered options shown in the list can be customized by passing a function to the getOption property. Your function can return a string of HTML, a Lit Template, or an HTMLElement. The getOption() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.\n\nRemember that the options are rendered in a shadow root. To style them, you can use the style attribute in your template or you can add your own parts and target them with the ::part() selector.\n\n **Note:** Be sure you trust the content you are outputting! Passing unsanitized user input to getOption() can result in XSS vulnerabilities.",
          "type": "text"
        }
      },
      "grouping": {
        "title": {
          "value": "Grouping Query",
          "type": "text"
        },
        "description": {
          "value": "Use <syn-optgroup> to group <syn-option>`s visually.",
          "type": "text"
        }
      },
      "container-height": {
        "title": {
          "value": "Suggestion Container Height",
          "type": "text"
        },
        "description": {
          "value": "The height of the filtered options list can be customized by setting the `max-height` on the `listbox` part of the combobox.",
          "type": "text"
        }
      },
      "clearable": {
        "title": {
          "value": "Clearable",
          "type": "text"
        },
        "description": {
          "value": "Add the clearable attribute to add a clear button when the combobox has content.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute to disable a combobox.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Read-only",
          "type": "text"
        },
        "description": {
          "value": "Add the readonly attribute to draw a read-only combobox.",
          "type": "text"
        }
      },
      "multiple": {
        "title": {
          "value": "Multiple",
          "type": "text"
        },
        "description": {
          "value": "To allow multiple options to be selected, use the multiple attribute. It’s a good practice to use clearable when this option is enabled. To set multiple values at once, set value to a space-delimited list of values. \n\nUse the max-options-visible attribute to define the maximum number of selected options that will be visible. After the maximum, \"+n\" will be shown to indicate the number of additional items that are selected.",
          "type": "text"
        }
      },
      "initial-values": {
        "title": {
          "value": "Setting initial values",
          "type": "text"
        },
        "description": {
          "value": "Use the value attribute to set the initial selection.\n\nWhen using multiple, the value attribute uses space-delimited values to select more than one option. Because of this, <syn-option> values cannot contain spaces. If you’re accessing the value property through Javascript, it will be an array.",
          "type": "text"
        }
      },
      "restrict-options": {
        "title": {
          "value": "Restrict options",
          "type": "text"
        },
        "description": {
          "value": "This restricts the combobox to only allow selections from the available options. Users cannot enter custom values that are not in the list.",
          "type": "text"
        }
      },
      "no-results": {
        "title": {
          "value": "No results found",
          "type": "text"
        },
        "description": {
          "value": "A “No results found” message is displayed, when the search term doesn’t match the options.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "Use the size attribute to change a combobox size.",
          "type": "text"
        }
      },
      "invalid": {
        "title": {
          "value": "Invalid",
          "type": "text"
        },
        "description": {
          "value": "The invalid status is used to warn the user that the combobox is invalid. For example, if the entry is mandatory.",
          "type": "text"
        }
      },
      "preffix-sufffix": {
        "title": {
          "value": "Prefix Suffix Text and Icons",
          "type": "text"
        },
        "description": {
          "value": "Use the prefix and suffix slots to add text and icons.",
          "type": "text"
        }
      },
      "async-options": {
        "title": {
          "value": "Async Options",
          "type": "text"
        },
        "description": {
          "value": "It is possible to add options dynamically to the combobox e.g. if the option values need to be fetched asynchronously from a remote server or API.",
          "type": "text"
        }
      },
      "custom-filter": {
        "title": {
          "value": "Custom filter",
          "type": "text"
        },
        "description": {
          "value": "A custom filter can be applied by passing a filter function to the `filter` property. This filter() function will be called for each option. The first argument is an <syn-option> element and the second argument is the query string.",
          "type": "text"
        }
      }
    },
    "validate": {
      "default": {
        "title": {
          "value": "Validate",
          "type": "text"
        },
        "description": {
          "value": "Validate offers options for convenient error handling in form elements.",
          "type": "text"
        }
      },
      "tooltip": {
        "title": {
          "value": "Tooltip variant",
          "type": "text"
        },
        "description": {
          "value": "When the tooltip variant is chosen, validation errors are displayed in a `<syn-tooltip>` component that has its center at the invalid element. The native tooltip is suppressed.",
          "type": "text"
        }
      },
      "inline": {
        "title": {
          "value": "Inline variant",
          "type": "text"
        },
        "description": {
          "value": "Set the variant attribute to `inline` to show the invalid message below the selected element.",
          "type": "text"
        },
        "note": {
          "value": "Per default, syn-validate uses the browser’s built-in validation. This shows only one error at a time and is optimized for accessbility.\nWhen using the inline variant, you have to ensure accessibility on your side and have to have in mind it most likely will lead to layout shifts.",
          "type": "text"
        }
      },
      "hide-icon": {
        "title": {
          "value": "Hide Icon",
          "type": "text"
        },
        "description": {
          "value": "Use hide-icon to hide the icon in inline style. This is especially useful when showing more than one error at a time.",
          "type": "text"
        }
      },
      "size": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "In development use the size attribute of the form element e.g. syn-input to set the size of the inline syn-validate automatically.",
          "type": "text"
        }
      },
      "live": {
        "title": {
          "value": "Live",
          "type": "text"
        },
        "description": {
          "value": "Use the live value for the on attribute to validate on every input change (e. g. typing a character or checking a checkbox.) instead of form submit. This will automatically bind to the input and blur events.",
          "type": "text"
        },
        "note": {
          "value": "Please ensure, that you really need live validation for your use case as this can have implications on accessibility.",
          "type": "text"
        }
      },
      "custom-validation": {
        "title": {
          "value": "Custom Validation",
          "type": "text"
        },
        "description": {
          "value": "Use the custom-validation-message attribute to use whichever error you need as text, overriding the default browser errors.",
          "type": "text"
        },
        "note": {
          "value": "By using the custom-validation-message attribute, you can override the default browser error messages with custom text. However, please note that applying this attribute disables the browser’s native validation functionality. This means the standard error messages will not be displayed until the custom-validation attribute is removed, at which point the native functionality will be restored.",
          "type": "text"
        }
      },
      "custom-form-field": {
        "title": {
          "value": "Custom Form Field",
          "type": "text"
        },
        "description": {
          "value": "Wrap the element around any other form field, that follows browser standards to use all features.",
          "type": "text"
        }
      },
      "custom-event-names": {
        "title": {
          "value": "Binding To Custom Event Names",
          "type": "text"
        },
        "description": {
          "value": "Use the `on` attribute to listen for one or many custom events. This may be useful if you want to validate on keypress or custom events that may be fired by third party web-components.",
          "type": "text"
        },
        "note": {
          "value": "You can provide one or multiple events in the `on` property. Please use a whitespace separated list of DOM event names. `<syn-validate>` will make sure to automatically use Synergies custom events. This means `<syn-validate on=\"change click\">` will bind to the `syn-change` and `click` events for a `<syn-input>` __or__ `change` and `click` events for a regular `<input>` element.",
          "type": "text"
        }
      },
      "eager": {
        "title": {
          "value": "Eager validation",
          "type": "text"
        },
        "description": {
          "value": "Use the eager attribute to validate the field when the component is mounted. This may be used to prefill validation messages, e.g. during page loads. Please be aware that when mixed with a `variant` of `native`, this will display the error of the last eager element in your `<form>` only!",
          "type": "text"
        }
      }
    }
  },
  "assets": {
    "sick-logo": {
      "description": {
        "value": "The logo represents the company and forms the core of the brand identity. Therefore, the logo has a very special meaning in communication: It is always in a prominent position and retains its absolute independence in all applications. The logo is always used as original graphic. It may not be changed or translated.",
        "type": "text"
      },
      "title": {
        "value": "SICK Logo",
        "type": "text"
      }
    },
    "material-icons": {
      "description": {
        "value": "Icons are small standard symbols that are primarily used in screen design. Due to their intended use, the icons must be recognizable min size of 16 x 16 pixels.\n\nIf you need to create a new icon, you have to follow the Material Icons Guide. Please also inform the Synergy design system team, so we can include this icon to prevent duplicates.",
        "type": "text"
      },
      "title": {
        "value": "Material Icons",
        "type": "text"
      }
    },
    "system-icons": {
      "description": {
        "value": "The system-icons contain only a small subset of icons that are used internally by Synergy components.\nEach icon wraps the original icon in an own component.\nThe names are aligned with dev and could deviate from Material Icons.",
        "type": "text"
      },
      "title": {
        "value": "System Icons",
        "type": "text"
      }
    }
  },
  "tokens": {
    "border-radius": {
      "description": {
        "value": "Border radius tokens are used to give sharp edges a more subtle, rounded effect. In general, rounding in SICK user interfaces should be avoided and only used in carefully considered cases. The following points provide some guidance for when and how rounding may be appropriate.\n\nPurpose and usage:\n\nThe use of rounding in UI design should primarily serve a functional purpose, enhancing user experience and visual hierarchy.\nRounding should be applied judiciously, considering both aesthetic appeal and usability.\nRounding should only be applied to selected components where it enhances clarity, visual distinction, or interaction affordance.\nAvoid excessive rounding, which can compromise clarity and readability.\nRounding Tokens:\n\n4px: Suitable for compact elements typically nested within another element (e.g. tags within select component).\n8px: Ideal for container elements like cards, aiding in visually distinguishing multiple containers from one another.\nFull roundings: Reserved for status elements like badges, offering a distinct visual cue to draw attention.\n\nFor any questions or uncertainties, feel free to reach out to the team for clarification and support.",
        "type": "text"
      },
      "title": {
        "value": "Border radius",
        "type": "text"
      }
    },
    "border-width": {
      "description": {
        "value": "The border is primarily used to outline the frame of a component or to structure content. The border color varies depending on the component and context, but the width stays constant.",
        "type": "text"
      },
      "title": {
        "value": "Border width",
        "type": "text"
      }
    },
    "color": {
      "description": {
        "value": "Color tokens help maintain consistent use of color throughout our products.",
        "type": "text"
      },
      "title": {
        "value": "Color Tokens",
        "type": "text"
      },
      "light": {
        "description": {
          "value": "Our light theme is the default theme for all applications",
          "type": "text"
        },
        "title": {
          "value": "Colors / light",
          "type": "text"
        }
      },
      "dark": {
        "description": {
          "value": "Use the dark theme as a low-light UI that displays mostly dark surfaces.",
          "type": "text"
        },
        "title": {
          "value": "Colors / dark",
          "type": "text"
        }
      },
      "semantic": {
        "description": {
          "value": "Semantic color information for general or specific components.",
          "type": "text"
        },
        "title": {
          "value": "Semantic colors",
          "type": "text"
        },
        "text": {
          "description": {
            "value": "Primary color used for text within the application",
            "type": "text"
          },
          "title": {
            "value": "Text colors",
            "type": "text"
          }
        },
        "link": {
          "description": {
            "value": "Default color used for links within the application",
            "type": "text"
          },
          "title": {
            "value": "Link colors",
            "type": "text"
          }
        }
      }
    },
    "chart-colors": {
      "description": {
        "value": "Chart color tokens are organized into palettes designed for different data visualization needs. Colors must be applied consistently to ensure accessibility and visual coherence across themes.",
        "type": "text"
      },
      "title": {
        "value": "Chart Colors",
        "type": "text"
      },
      "categorical": {
        "title": {
          "value": "Categorical Palette",
          "type": "text"
        },
        "description": {
          "value": "The Categorical Palette is used to visually distinguish discrete data categories in charts such as bar, line, or pie charts. To ensure consistency and recognition across applications, colors must be applied in a fixed sequence and should not be rearranged.\n\nAccessibility note:\n\nFor accessibility, the colors in this palette meet the minimum contrast ratio of 3:1 only when used on the chart-background token.\n\nUsing these colors on other background colors may result in insufficient contrast. Following these guidelines ensures that charts remain both visually effective and inclusive across themes.",
          "type": "text"
        }
      },
      "sequential": {
        "title": {
          "value": "Sequential Palettes",
          "type": "text"
        },
        "description": {
          "value": "Sequential color palettes use a single color that progress from light to dark. They are ideal for visualizing ordered data that increases or decreases in magnitude, making it easy to see relative intensity or quantity at a glance.\n\nSequential palettes are particularly effective for showing continuous ranges, for example:\n- Low to high values\n- Small to large populations\n- Light to heavy usage or intensity\n- Early to late time spans\n\nUnlike categorical or diverging palettes, sequential palettes emphasize a smooth progression within one direction rather than contrasting two ends. This makes them well-suited for heatmaps, choropleth maps, distribution charts, and any visual where \"more vs. less\" is the key message.\n\nAccessibility note:\n\nBecause sequential palettes rely on gradual changes in luminance and saturation, adjacent steps can be hard to distinguish—especially at the very light or very dark ends, and for users with colour vision deficiencies. In other words, some shades don't meet the 3:1 minimum contrast ratio.\n\nTo address this:\n- Don't rely on color alone to convey meaning. Add a second cue (e.g., labels, icons, line styles) so the message is still clear if colours aren't easily distinguishable.\n- Highlight important thresholds or ranges with extra guidance, such as data labels or short annotations, contour lines, gridlines, or shaded bands to mark ranges, or subtle patterns or thin outlines on areas/bars.",
          "type": "text"
        }
      },
      "sequential-status": {
        "title": {
          "value": "Sequential Status Palettes",
          "type": "text"
        },
        "description": {
          "value": "Status sequential palettes use lighter to darker versions of a single status color (such as success, warning, error, info, or critical). They help show how strong or severe a status is, not just which status it belongs to. Lighter shades represent low impact or early stages, while darker shades show higher impact or urgency.\n\nThese palettes are useful when a status changes in intensity over time or across data points—for example in heatmaps, timelines, or charts that compare different levels of risk or confidence.\n\nAccessibility note:\n\nBecause sequential palettes rely on gradual changes in luminance and saturation, adjacent steps can be hard to distinguish—especially at the very light or very dark ends, and for users with colour vision deficiencies. In other words, some shades don't meet the 3:1 minimum contrast ratio.\n\nTo address this:\n- Don't rely on colour alone to convey meaning. Add a second cue (e.g., labels, icons, line styles) so the message is still clear if colours aren't easily distinguishable.\n- Highlight important thresholds or ranges with extra guidance, such as data labels or short annotations, contour lines, gridlines, or shaded bands to mark ranges, or subtle patterns or thin outlines on areas/bars.",
          "type": "text"
        }
      }
    },
    "shadow": {
      "description": {
        "value": "Shadow and elevation tokens are used to give elements the appearance of being raised off the page.",
        "type": "text"
      },
      "title": {
        "value": "Shadow and elevation",
        "type": "text"
      }
    },
    "spacing": {
      "description": {
        "value": "Spacing tokens are used to provide consistent spacing between content in your app.",
        "type": "text"
      },
      "title": {
        "value": "Spacing",
        "type": "text"
      }
    },
    "transition": {
      "description": {
        "value": "Transition tokens are used to provide consistent transitions throughout our applications.",
        "type": "text"
      },
      "title": {
        "value": "Transition Tokens",
        "type": "text"
      }
    },
    "typography": {
      "description": {
        "value": "Typography tokens are used to define typographic style of headings, body text, and UI components. They are used to maintain a consistent set of font styles throughout your app.",
        "type": "text"
      },
      "title": {
        "value": "Typography",
        "type": "text"
      },
      "text-styles": {
        "description": {
          "value": "The Synergy text styles are made up of two categories to cover the range of different needs in designs: Headings and Body / UI text.\n\nUnless explicitly mentioned otherwise in a component, Synergy recommends using sentence case capitalization throughout your applications.",
          "type": "text"
        },
        "title": {
          "value": "Text styles",
          "type": "text"
        },
        "headings": {
          "description": {
            "value": "Heading styles come in a range of sizes, and can be used in a range of contexts, such as:\nbuilding page hierarchy,\nhelping users scan large chunks of text,\nproviding a title to a page or piece of content,\nas subheadings or eyebrow headings, where there is still only one H1 tag per page (as per Accessibility requirements).\n\nOur heading styles are consistently bold, to better address the visual hierarchy.",
            "type": "text"
          },
          "title": {
            "value": "Headings",
            "type": "text"
          }
        },
        "body": {
          "description": {
            "value": "Body text is used for long-form content where a paragraph or multiple lines of text are required. Body text styles are optimized for reading as a large chunk of information through line height and paragraph spacing. Inline links sit within body text styles and inherit the same font values. \nUI text is text used in UI components and uses the same text stylings.\n\nThe default font size is medium (16 px). Synergy supports three additional font sizes for body copy.\nIt is also possible to format the text bold for certain text passages.",
            "type": "text"
          },
          "title": {
            "value": "Body and UI text",
            "type": "text"
          },
          "xsmall-title": {
            "value": "x-small",
            "type": "text"
          },
          "small-title": {
            "value": "small",
            "type": "text"
          },
          "medium-title": {
            "value": "medium",
            "type": "text"
          },
          "large-title": {
            "value": "large",
            "type": "text"
          }
        }
      },
      "font-family": {
        "description": {
          "value": "Synergy uses the open source typeface Open Sans for all elements, but system fonts can also be used.",
          "type": "text"
        },
        "title": {
          "value": "Font family",
          "type": "text"
        }
      }
    },
    "z-index": {
      "description": {
        "value": "Z-indexes are used to stack components in a logical manner.",
        "type": "text"
      },
      "title": {
        "value": "Z-Index Tokens",
        "type": "text"
      }
    },
    "opacity": {
      "description": {
        "value": "Opacity tokens apply transparency to an element.",
        "type": "text"
      },
      "title": {
        "value": "Opacity",
        "type": "text"
      }
    }
  },
  "frameworks": {
    "angular": {
      "description": {
        "value": "Tips for using Essential in your Angular app.",
        "type": "text"
      },
      "title": {
        "value": "Angular",
        "type": "text"
      }
    },
    "react": {
      "description": {
        "value": "Tips for using Essential in your React app.",
        "type": "text"
      },
      "title": {
        "value": "React",
        "type": "text"
      }
    },
    "vue-2": {
      "description": {
        "value": "Tips for using Essential in your Vue 2 app.",
        "type": "text"
      },
      "title": {
        "value": "Vue (version 2)",
        "type": "text"
      }
    },
    "vue": {
      "description": {
        "value": "Tips for using Essential in your Vue 3 app.",
        "type": "text"
      },
      "title": {
        "value": "Vue",
        "type": "text"
      }
    }
  },
  "getting-started": {
    "customizing": {
      "description": {
        "value": "Learn how to customize Essential through parts and custom properties.",
        "type": "text"
      },
      "title": {
        "value": "Customizing",
        "type": "text"
      }
    },
    "form-controls": {
      "description": {
        "value": "Some things to note about Essential and forms.",
        "type": "text"
      },
      "title": {
        "value": "Form Controls",
        "type": "text"
      }
    },
    "installation": {
      "description": {
        "value": "Choose the installation method that works best for you.",
        "type": "text"
      },
      "title": {
        "value": "Installation",
        "type": "text"
      }
    },
    "localization": {
      "description": {
        "value": "Discover how to localize Essential with minimal effort.",
        "type": "text"
      },
      "title": {
        "value": "Localization",
        "type": "text"
      }
    },
    "themes": {
      "description": {
        "value": "Everything you need to know about theming Essential.",
        "type": "text"
      },
      "title": {
        "value": "Themes",
        "type": "text"
      }
    },
    "usage": {
      "description": {
        "value": "Learn more about using custom elements.",
        "type": "text"
      },
      "title": {
        "value": "Usage",
        "type": "text"
      }
    }
  },
  "resources": {
    "accessibility": {
      "description": {
        "value": "Essential recognizes the need for all users to have undeterred access to the websites and applications that are created with it.",
        "type": "text"
      },
      "title": {
        "value": "Accessibility Commitment",
        "type": "text"
      }
    },
    "changelog": {
      "description": {
        "value": "Changes to each version of the project are documented here.",
        "type": "text"
      },
      "title": {
        "value": "Changelog",
        "type": "text"
      }
    },
    "community": {
      "description": {
        "value": "Essential has a growing community of designers and developers that are building amazing things with web components.",
        "type": "text"
      },
      "title": {
        "value": "Community",
        "type": "text"
      }
    },
    "contributing": {
      "description": {
        "value": "Essential is an open source project, meaning everyone can use it and contribute to its development.",
        "type": "text"
      },
      "title": {
        "value": "Contributing",
        "type": "text"
      }
    }
  },
  "tutorials": {
    "integrating-with-laravel": {
      "description": {
        "value": "This page explains how to integrate Essential with a Laravel app.",
        "type": "text"
      },
      "title": {
        "value": "Integrating with Laravel",
        "type": "text"
      }
    },
    "integrating-with-nextjs": {
      "description": {
        "value": "This page explains how to integrate Essential with a NextJS app.",
        "type": "text"
      },
      "title": {
        "value": "Integrating with NextJS",
        "type": "text"
      }
    },
    "integrating-with-rails": {
      "description": {
        "value": "This page explains how to integrate Essential with a Rails app.",
        "type": "text"
      },
      "title": {
        "value": "Integrating with Rails",
        "type": "text"
      }
    }
  },
  "templates": {
    "application-shell": {
      "default": {
        "title": {
          "value": "Application Shell",
          "type": "text"
        },
        "description": {
          "value": "The App Shell is the basic structure for building applications. \n\nIt provides consistent layout examples that include different combinations of header, navigation, and a flexible content area.",
          "type": "text"
        }
      },
      "side-navigation": {
        "title": {
          "value": "Side Navigation",
          "type": "text"
        },
        "description": {
          "value": "The side navigation opens when the user clicks on the burger menu. As the side navigation opens, a transparent mask fades in and the navigation overlaps the content area. To close the navigation, the user must either click on the close icon or anywhere on the content area to the right of the side navigation.",
          "type": "text"
        }
      },
      "side-navigation-shrinking": {
        "title": {
          "value": "Side Navigation Shrinking Content",
          "type": "text"
        },
        "description": {
          "value": "The side navigation opens when the user clicks on the burger menu. As the side navigation opens, the content area shrinks. To close the navigation, the user must click on the close icon.",
          "type": "text"
        }
      },
      "rail-navigation-desktop": {
        "title": {
          "value": "Rail Navigation (Desktop)",
          "type": "text"
        },
        "description": {
          "value": "The navigation opens when the user hovers over it. As the navigation opens, it overlaps the content area. To close the navigation, the user simply hovers outside of it.",
          "type": "text"
        }
      },
      "rail-navigation-mobile": {
        "title": {
          "value": "Rail Navigation (Mobile)",
          "type": "text"
        },
        "description": {
          "value": "The navigation opens when the user touches it. As the side navigation opens, a transparent mask fades in and the navigation overlaps the content area. To close the navigation, the user must touch anywhere on the content area to the right of the side navigation.",
          "type": "text"
        }
      },
      "sticky-navigation-desktop": {
        "title": {
          "value": "Sticky Navigation (Desktop)",
          "type": "text"
        },
        "description": {
          "value": "General Behaviour\n\nThe navigation maintains its compact width until the user clicks the “show sidebar” icon at the bottom. When the navigation expands, it shifts the content area. To reduce the navigation's width, the user simply clicks “Hide sidebar” again.",
          "type": "text"
        }
      },
      "sticky-navigation-mobile": {
        "title": {
          "value": "Sticky Navigation (Mobile)",
          "type": "text"
        },
        "description": {
          "value": "General Behaviour\n\nThe navigation maintains its compact width until the user clicks the “show sidebar” icon at the bottom. When the navigation expands, it shifts the content area. To reduce the navigation's width, the user simply clicks “Hide sidebar” again.",
          "type": "text"
        }
      },
      "top-navigation": {
        "title": {
          "value": "Top Navigation",
          "type": "text"
        },
        "description": {
          "value": "The top navigation can be combined with a light grey background.\n\nThis variant is suitable, for example, in combination with cards to achieve a dashboard look and feel.",
          "type": "text"
        }
      },
      "alternative-background": {
        "title": {
          "value": "Alternative Background",
          "type": "text"
        },
        "description": {
          "value": "Additionally the top navigation can be combined with an alternative background.",
          "type": "text"
        }
      }
    },
    "contact-form": {
      "default": {
        "title": {
          "value": "Forms",
          "type": "text"
        },
        "description": {
          "value": "Forms usually contain form components such as checkboxes, selects, input fields, radio buttons, toggle switches and more. \nClear and simple forms help prevent user confusion and incorrect data submission. \n\nForms should be designed in columns as this improves scanability. One-column layout is preferred, but use two or more column layouts when there are too many components to fit in an area of the page.\n\nForms can be simple or complex, and may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation.",
          "type": "text"
        }
      }
    },
    "loading-screen": {
      "default": {
        "title": {
          "value": "Loading Screen",
          "type": "text"
        },
        "description": {
          "value": "The loading screen is displayed while content is being loaded or processed. It provides visual feedback to the user, indicating that the system is working and preventing confusion or frustration during wait times.",
          "type": "text"
        }
      },
      "light-mode": {
        "title": {
          "value": "Light Mode",
          "type": "text"
        },
        "description": {
          "value": "The loading screen can be displayed in light mode, which is the default theme for all applications.",
          "type": "text"
        }
      },
      "dark-mode": {
        "title": {
          "value": "Dark Mode",
          "type": "text"
        },
        "description": {
          "value": "The loading screen can be displayed in dark mode, which is suitable for low-light environments or user preferences.",
          "type": "text"
        }
      }
    },
    "table": {
      "default": {
        "title": {
          "value": "Table",
          "type": "text"
        },
        "description": {
          "value": "These examples demonstrate the usage of the syn-table-cell component in various contexts. The examples are intended solely for illustrating how syn-table-cell can be used to style tables.",
          "type": "text"
        }
      }
    },
    "tooltip": {
      "default": {
        "title": {
          "value": "Tooltips",
          "type": "text"
        },
        "description": {
          "value": "These examples demonstrate the usage of the `<syn-tooltip>` component in various contexts.",
          "type": "text"
        }
      },
      "single-instance": {
        "title": {
          "value": "Single Instance",
          "type": "text"
        },
        "description": {
          "value": "This example demonstrates the usage of a single instance of the `<syn-tooltip>` component. Tooltips are shared across multiple elements, allowing for more efficient management and consistent behavior.",
          "type": "text"
        }
      }
    },
    "localization": {
      "default": {
        "title": {
          "value": "Translations",
          "type": "text"
        },
        "description": {
          "value": "Components can be localized by importing the appropriate translation file and setting the desired `lang` attribute and/or dir attribute on the `<html>` element. Please note the default language is English (en) and the default text direction is left-to-right (ltr).",
          "type": "text"
        }
      },
      "dynamicallySetLocalizations": {
        "title": {
          "value": "Dynamically Set Localizations",
          "type": "text"
        },
        "description": {
          "value": "This example shows how to dynamically set localizations for Synergy components. This can be useful if you want to allow users to change the language of your application on the fly.",
          "type": "text"
        }
      }
    },
    "footer": {
      "default": {
        "title": {
          "value": "Footer",
          "type": "text"
        },
        "description": {
          "value": "The footer is the area located at the bottom of the application window, below the content area.\n\nThe footer may contain one or more links pointing to legal information items as well as a copyright symbol and current year. The standard links can include things like:\n- Imprint (e.g. https://www.sick.com/imprint)\n- Terms and conditions (e.g. https://www.sick.com/tac)\n- Terms of use (e.g. https://www.sick.com/terms-of-use)\n- Data protection (e.g. https://www.sick.com/dataprotection)\n\nIf a footer is not required or desired, ensure that all legally required links are placed elsewhere in your application, depending on legal requirements.\n\nFor example, you can: add an info icon (or similar element) to your header and display the necessary information in a dropdown menu. Alternatively, create a dedicated navigation entry to house the required legal links.\n\nThe footer links can be placed on any background color. If you need a more compact version of the footer, adjust the top and bottom margins from spacing.large (24px) to spacing.medium (16px).",
          "type": "text"
        }
      }
    },
    "link-list": {
      "default": {
        "title": {
          "value": "Link list",
          "type": "text"
        },
        "description": {
          "value": "These examples demonstrate the usage of syn-link in simple grouping contexts: Horizontal and Vertical alignment.",
          "type": "text"
        }
      }
    },
    "tag-group": {
      "default": {
        "title": {
          "value": "Tag",
          "type": "text"
        },
        "description": {
          "value": "These examples demonstrate the usage of the syn-tag-group component in combination with filters. The examples are intended solely for illustrating how syn-tag-group can be used with different label alignments (horizontally and vertically).",
          "type": "text"
        }
      }
    },
    "breadcrumb": {
      "default": {
        "title": {
          "value": "Breadcrumb",
          "type": "text"
        },
        "description": {
          "value": "These examples demonstrate the use of syn-breadcrumb in desktop and mobile views. \n\nOn desktop, if there's room, always show the full breadcrumb trail.\n\nIf the viewport has not enough space for all breadcrumb items, it is possible to display a truncated version of the breadcrumb and move the items between Home and the parent page into a dropdown menu. \n\nAlternatively, an even shorter version can display only the name/link of the parent page and the prefix icon with the back arrow to navigate one level up.\n\nFor more information on breadcrumbs, visit Nielsen Norman Group: https://www.nngroup.com/articles/breadcrumbs/",
          "type": "text"
        }
      }
    }
  }
}