@synergy-design-system/tokens/src/figma-tokens/_docs.json

Design tokens for Synergy, the SICK Design System

{
  "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": {
      "axes-default": {
        "title": {
          "value": "Axes",
          "type": "text"
        },
        "description": {
          "value": "The chart’s axes define the visual structure of the data and can be customized to match different visualization needs. Both the horizontal and vertical axes support flexible configuration options, allowing you to control how reference lines and labels are displayed.\n\nYou can choose to show only horizontal grid lines, only vertical grid lines, or both, depending on the level of visual guidance you want to provide. ",
          "type": "text"
        }
      },
      "axes-split-lines-hidden": {
        "title": {
          "value": "Hidden Axes Split Lines",
          "type": "text"
        },
        "description": {
          "value": "The default is, that both axes lines as well as the split lines are hidden.",
          "type": "text"
        }
      },
      "axes-split-lines-visible": {
        "title": {
          "value": "Visible Axes Split Lines",
          "type": "text"
        },
        "description": {
          "value": "If you want to display both axes lines and split lines, use the handle method `axesShowSplitLines()`.",
          "type": "text"
        }
      },
      "axes-horizontal-split-lines": {
        "title": {
          "value": "Horizontal Split Lines Only",
          "type": "text"
        },
        "description": {
          "value": "To show only horizontal split lines, use the handle method `axesShowYSplitLines()`.",
          "type": "text"
        }
      },
      "axes-vertical-split-lines": {
        "title": {
          "value": "Vertical Split Lines Only",
          "type": "text"
        },
        "description": {
          "value": "To show only vertical split lines, use the handle method `axesShowXSplitLines()`.",
          "type": "text"
        }
      },
      "axes-labels-hidden": {
        "title": {
          "value": "Hidden Axis Labels",
          "type": "text"
        },
        "description": {
          "value": "If you want to hide the axis labels, use the handle method `axesHideLabels()`.",
          "type": "text"
        }
      },
      "axes-lines-visible-labels-hidden": {
        "title": {
          "value": "Visible Axes Lines with Hidden Values",
          "type": "text"
        },
        "description": {
          "value": "To show axes split lines but hide axis labels, combine `axesShowSplitLines()` and `axesHideLabels()`.",
          "type": "text"
        }
      },
      "axes-labels-with-icons": {
        "title": {
          "value": "Axes Labels with Icons",
          "type": "text"
        },
        "description": {
          "value": "To add icons to axis labels, use the handle methods `axesAddXLabelIcons()` and `axesAddYLabelIcons()`.",
          "type": "text"
        }
      },
      "legend-default": {
        "title": {
          "value": "Legend",
          "type": "text"
        },
        "description": {
          "value": "The legend provides a clear overview of all data series displayed in the chart. Each item reflects the series’ label, color, and visual style, ensuring users can quickly understand how values are grouped and represented. \n\nDepending on the selected chart type, the legend adapts its appearance. Line charts display a small line preview showing the stroke style, while bar charts use a solid color swatch that matches the bar fill. This makes it easy to distinguish series at a glance, regardless of the visualization style.",
          "type": "text"
        }
      },
      "legend-top": {
        "title": {
          "value": "Legend on Top",
          "type": "text"
        },
        "description": {
          "value": "The default position of the legend is top. The legend can be positioned at the top of the chart by using the handle method `legendShow()` or `legendShow({ position: 'top' })`.",
          "type": "text"
        }
      },
      "legend-left": {
        "title": {
          "value": "Legend on Left",
          "type": "text"
        },
        "description": {
          "value": "The legend can be positioned at the left of the chart by using the handle method `legendShow({ position: 'left' })`.",
          "type": "text"
        }
      },
      "legend-right": {
        "title": {
          "value": "Legend on Right",
          "type": "text"
        },
        "description": {
          "value": "The legend can be positioned at the right of the chart by using the handle method `legendShow({ position: 'right' })`.",
          "type": "text"
        }
      },
      "legend-bottom": {
        "title": {
          "value": "Legend on Bottom",
          "type": "text"
        },
        "description": {
          "value": "The legend can be positioned at the bottom of the chart by using the handle method `legendShow({ position: 'bottom' })`.",
          "type": "text"
        }
      },
      "legend-non-interactive": {
        "title": {
          "value": "Non-interactive Legend",
          "type": "text"
        },
        "description": {
          "value": "By default, the legend is interactive. Users can click on a legend item to toggle the visibility of the corresponding series in the chart. To make the legend non-interactive, use the *selectedMode: false* option.",
          "type": "text"
        }
      },
      "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"
        }
      },
      "line-chart-default": {
        "title": {
          "value": "Line Chart",
          "type": "text"
        },
        "description": {
          "value": "Line charts offer a clear way to visualize trends, changes and directional movements over time or across categories. By connecting individual data points, they highlight patterns such as growth, decline or stability at a glance, making them ideal for dashboards, KPI overviews and lightweight data summaries. \n\nThe component provides flexible styling options that adapt to different visual needs, from straight linear segments to smooth curved lines. Combined with optional symbols, line charts can be tailored to emphasize exactly the level of detail or simplicity required in your layout.",
          "type": "text"
        }
      },
      "line-chart-preset": {
        "title": {
          "value": "Line Chart Preset",
          "type": "text"
        },
        "description": {
          "value": "The line chart can be configured with the `seriesLine` preset function.",
          "type": "text"
        }
      },
      "line-series-hidden-lines": {
        "title": {
          "value": "Hidden Line Series",
          "type": "text"
        },
        "description": {
          "value": "The lines of line series can be hidden. When hidden, only the symbols remain, which is useful for minimal or simplified data displays.",
          "type": "text"
        }
      },
      "line-series-styles": {
        "title": {
          "value": "Line Series Styles",
          "type": "text"
        },
        "description": {
          "value": "The line series supports a variety of styles, including line width and line type (solid, dashed, dotted). When combining multiple line charts, ensure there’s sufficient visual differentiation, for example, by using distinct line styles.",
          "type": "text"
        }
      },
      "line-series-symbols": {
        "title": {
          "value": "Line Series Symbols",
          "type": "text"
        },
        "description": {
          "value": "The line series supports a variety of symbols.",
          "type": "text"
        }
      },
      "line-series-curved": {
        "title": {
          "value": "Curved Line Series",
          "type": "text"
        },
        "description": {
          "value": "The line series supports curved lines. Use the `smooth` property to enable smooth curves for the line series.",
          "type": "text"
        }
      },
      "line-series-widths-symbol-sizes": {
        "title": {
          "value": "Line Series Widths",
          "type": "text"
        },
        "description": {
          "value": "The line widths and symbol sizes can be adjusted to the needs.",
          "type": "text"
        }
      },
      "line-series-custom-colors": {
        "title": {
          "value": "Line Series Custom Colors",
          "type": "text"
        },
        "description": {
          "value": "The colors of the lines and symbols can be customized.",
          "type": "text"
        }
      },
      "line-series-tooltip": {
        "title": {
          "value": "Line Series Tooltip",
          "type": "text"
        },
        "description": {
          "value": "The tooltip provides contextual information when users hover or focus on data points within a chart. It displays values, labels without obstructing the view of the visualization. Use the `tooltipShow` preset to enable the tooltip.",
          "type": "text"
        }
      },
      "line-chart-positive-and-negative-values": {
        "title": {
          "value": "Line Chart with Positive and Negative Values",
          "type": "text"
        },
        "description": {
          "value": "Line charts can display both positive and negative values.",
          "type": "text"
        }
      },
      "zooming-default": {
        "title": {
          "value": "Zooming and Panning",
          "type": "text"
        },
        "description": {
          "value": "Zooming and panning allow users to focus on specific areas of a chart, especially when dealing with large datasets or dense series. The `dataZoom` option provides two types of zooming: integrated zooming and slider zooming. Integrated zooming enables direct interaction within the plotting area, while slider zooming allows users to define a specific data zoom level using handles and a selection bar.",
          "type": "text"
        }
      },
      "integrated-zooming": {
        "title": {
          "value": "Integrated Zooming",
          "type": "text"
        },
        "description": {
          "value": "When having large data sets or dense series where users need to inspect local trends without leaving the chart context, the `dataZoom` option with `type: 'inside'` can be used. It enables direct interaction inside the plotting area: \n\n- mouse drag to pan\n\n- mouse wheel to zoom\n\n There are possibilities to customize the zooming behavior, for example, to restrict zooming to a specific axis, to set minimum and maximum zoom levels or to add an additional key for zooming. For more information have a look at the [ECharts documentation](https://echarts.apache.org/en/option.html#dataZoom-inside)",
          "type": "text"
        }
      },
      "slider-zooming": {
        "title": {
          "value": "Slider Zooming",
          "type": "text"
        },
        "description": {
          "value": "The data zoom slider (the `dataZoom` option with `type: 'inside'`) allows users to define a specific data zoom level within a chart by dragging the left and right handles or moving the entire selection bar. It's commonly used in dashboards and analytics tools to filter, zoom, or focus on a subset of data without losing context of the full dataset. The component consists of three interactive elements: \n\n- Left handle: Defines the start of the selected zoom\n\n- Right handle: Defines the end of the selected zoom\n\n- Selection bar (center): Moves the entire zoom without changing its width\n\nThe slider can be customized in terms of position, size and appearance. For more information have a look at the [ECharts documentation](https://echarts.apache.org/en/option.html#dataZoom-slider)",
          "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"
        }
      }
    },
    "checkbox-group": {
      "default": {
        "title": {
          "value": "Checkbox Group",
          "type": "text"
        },
        "description": {
          "value": "Checkbox groups are used to visually group multiple checkboxes.",
          "type": "text"
        }
      },
      "vertical-layout": {
        "title": {
          "value": "Vertical layout",
          "type": "text"
        },
        "description": {
          "value": "Use a vertical layout to display the checkboxes in a column.",
          "type": "text"
        }
      },
      "horizontal-layout": {
        "title": {
          "value": "Horizontal layout",
          "type": "text"
        },
        "description": {
          "value": "Use a horizontal layout to display the checkboxes in a row.",
          "type": "text"
        }
      },
      "labels": {
        "title": {
          "value": "Labels",
          "type": "text"
        },
        "description": {
          "value": "Use the label attribute to give the checkbox-group an accessible label. For labels that contain HTML, use the label slot instead.",
          "type": "text"
        }
      },
      "checked": {
        "title": {
          "value": "Checked",
          "type": "text"
        },
        "description": {
          "value": "Use the checked attribute on the corresponding syn-checkbox elements to set the checked state.",
          "type": "text"
        }
      },
      "help-text": {
        "title": {
          "value": "Help Text",
          "type": "text"
        },
        "description": {
          "value": "Add descriptive help text to a checkbox-group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.\n\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",
          "type": "text"
        },
        "description": {
          "value": "The focus event gives the user feedback that one of the Checkboxes has been focused by the keyboard interaction.",
          "type": "text"
        }
      },
      "disabled": {
        "title": {
          "value": "Disabled",
          "type": "text"
        },
        "description": {
          "value": "Use the disabled attribute on the corresponding syn-checkbox elements to set the disabled state.",
          "type": "text"
        }
      },
      "readonly": {
        "title": {
          "value": "Readonly",
          "type": "text"
        },
        "description": {
          "value": "Checkboxes can be displayed in a read-only state by applying the readonly attribute to the selected checkbox inside the checkbox group.",
          "type": "text"
        }
      },
      "sizes": {
        "title": {
          "value": "Sizes",
          "type": "text"
        },
        "description": {
          "value": "The size of checkboxes will be determined by the checkbox group’s size attribute.",
          "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"
        }
      }
    },
    "