@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": {
      "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 compo