Documentation

From the selected Figma component, generate a complete specification document in Markdown. Include:
- An overview of the component's purpose.
- A table of all its properties, variants, and their possible values.
- A list of all design tokens used.
- Accessibility notes, including required ARIA roles and keyboard navigation.

Based on the selected component, create a "Dos and Don'ts" guide for its usage. Provide visual examples or descriptions for each point to ensure clarity.

For the selected component, describe all its interactive states (hover, focus, active, disabled) and any animations or transitions involved.

Analyze all the color styles in this Figma file and generate a documentation page for our color system. Group the colors by function (e.g., primary, secondary, accent, feedback) and provide swatches and token names for each.

Generate a Markdown document that outlines the typography scale used in this Figma file. For each text style, include the font family, size, weight, line height, and its intended use (e.g., H1, body, caption).

Based on the layouts in this Figma file, create a guide for our spacing system. Identify the common spacing values and create a visual reference for how they are used in grids and between components.

I've made updates to the selected component. Compare it to the previous version and generate a changelog entry that summarizes the changes.

I've updated the selected component in Figma. Please find the corresponding documentation file in this project and update it to reflect the new properties and variants.