@orangesk/orange-design-system 2.1.0 → 3.0.0

package/build/search-index.json

@@ -37,7 +37,7 @@
   },
   {
     "href": "/components/button",
-    "content": "import React from \"react\"; export const buttonVariants = [\"default\", \"primary\", \"fill\", \"ghost\"]; Button Buttons are interactive elements used for navigation, form submission, and triggering actions. They can render as either <button> or <a> elements depending on their purpose. Basic Usage Default Button Element Types The ` component can render as either <a> or <button> elements. Use the appropriate element based on function: - <a> - for navigation (linking to pages or sections) - <button> - for actions (form submission, controlling UI, etc.) Button Element Anchor Element Spacing and Layout Buttons include built-in right and bottom margins for proper spacing in horizontal and vertical flows. For complex button layouts that may wrap to multiple lines, use the Buttons component. <p>Buttons flow naturally with text and maintain proper spacing.</p> Button 1 Button 2 <p>This paragraph maintains proper spacing from the buttons above.</p> Single button Use Buttons component for wrapping <p> {\"When buttons might break into multiple lines, wrap them using the\"}{\" \"} <a href=\"/components/buttons\">Buttons component</a> {\" for better vertical\"} {\"spacing.\"} </p> Variants Buttons support different visual variants to convey hierarchy and meaning. {buttonVariants.map((variant) => { const variantName = variant.charAt(0).toUpperCase() + variant.slice(1); return ( <h3 className=\"bold\">{variantName}</h3> {variantName} {variantName} active {variantName} disabled </React.Fragment> ); })} </React.Fragment> Sizes Buttons are available in three sizes: small, default (medium), and large. Small Default Large Square Buttons Square buttons maintain equal width and height regardless of content. They are primarily used for icon-only buttons. {\"A\"} A {\"A\"} <br /> {\"Overflow\"} Overflow {\"Overflow\"} Icon Buttons Use IconButton for buttons that include icons alongside or instead of text. Icon Only For icon-only buttons, use the isSquare prop and provide accessible text as children (rendered as visually hidden). {\"Settings\"} {\"Settings\"} {\"Settings\"} <br /> {\"Settings\"} {\"Settings\"} {\"Settings\"} Icon with Text Icons can be positioned to the left (default) or right of button text using the iconPosition prop. {\"Add Item\"} {\"Add Item\"} {\"Add Item\"} <br /> {\"Select Option\"} {\"Select Option\"} {\"Select Option\"} <br /> {\"Next\"} {\"Next\"} {\"Next\"} Accessibility Semantic Elements Choose the correct HTML element based on function: - <a> - for navigation (takes users to a different page or section) - <button> - for actions (form submission, UI controls, etc.) - <button type=\"submit\"> - for form submission buttons Color Contrast Note: Buttons do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. While Technique G145 suggests increasing font size to meet contrast requirements, a business decision has been made to maintain current aesthetics. Disabled States Avoid using disabled buttons, especially for form submissions. Disabled buttons are not keyboard focusable and cannot be announced by screen readers. Instead: - Use aria-disabled=\"true\" to maintain focusability - Allow form submission and provide clear validation feedback - Help users understand what needs to be fixed Icon Accessibility When using icon-only buttons, ensure accessible text is provided through: - Descriptive text as children (rendered as visually hidden for IconButton) - aria-label attribute on the button element - alt attribute on the icon (if applicable) Additional Resources - When Is A Button Not A Button? - Anchors, Buttons, And Accessibility API React Props Button | Prop | Type | Default | Description | | --------------- | --------------------------------- | ----------- | ------------------------------------------- | | type | \"primary\" \\| \"fill\" \\| \"ghost\" | \"default\" | Button variant style | | size | \"small\" \\| \"large\" | - | Button size (default is medium) | | isSquare | boolean | - | Make button square (equal width and height) | | isActive | boolean | - | Apply active state styling | | isDisabled | boolean | - | Disable the button | | htmlType | \"button\" \\| \"submit\" \\| \"reset\" | \"button\" | HTML button type attribute | | href | string | - | If provided, renders as anchor element | | preserveWidth | boolean | - | Preserve button width when content changes | | className | string | - | Additional CSS classes | | elemRef | Ref | - | Forwarded ref for the button/anchor element | | children | React.ReactNode | - | Button content | The component also accepts all standard HTML button or anchor attributes depending on whether href is provided. IconButton | Prop | Type | Default | Description | | --------------- | -------------------- | -------- | --------------------------------------------------------- | | iconName | string | - | Required. Name of the icon to display | | iconPosition | \"left\" \\| \"right\" | \"left\" | Position of icon relative to text | | iconClassName | string | - | Additional CSS classes for the icon | | size | \"small\" \\| \"large\" | - | Button and icon size | | isSquare | boolean | - | Make button square (children rendered as visually hidden) | | children | React.ReactNode` | - | Button text content | Component Aliases For convenience, the following aliases are available:"
+    "content": "import React from \"react\"; export const buttonVariants = [\"default\", \"primary\", \"fill\", \"ghost\"]; Button Buttons are interactive elements used for navigation, form submission, and triggering actions. They can render as either <button> or <a> elements depending on their purpose. Basic Usage Default Button Element Types The ` component can render as either <a> or <button> elements. Use the appropriate element based on function: - <a> - for navigation (linking to pages or sections) - <button> - for actions (form submission, controlling UI, etc.) Button Element Anchor Element Spacing and Layout Buttons include built-in right and bottom margins for proper spacing in horizontal and vertical flows. For complex button layouts that may wrap to multiple lines, use the Buttons component. <p>Buttons flow naturally with text and maintain proper spacing.</p> Button 1 Button 2 <p>This paragraph maintains proper spacing from the buttons above.</p> Single button Use Buttons component for wrapping <p> {\"When buttons might break into multiple lines, wrap them using the\"}{\" \"} <a href=\"/components/buttons\">Buttons component</a> {\" for better vertical\"} {\"spacing.\"} </p> Variants Buttons support different visual variants to convey hierarchy and meaning. {buttonVariants.map((variant) => { const variantName = variant.charAt(0).toUpperCase() + variant.slice(1); return ( <h3 className=\"bold\">{variantName}</h3> {variantName} {variantName} active {variantName} disabled </React.Fragment> ); })} </React.Fragment> Sizes Buttons are available in three sizes: small, default (medium), and large. Small Default Large Square Buttons Square buttons maintain equal width and height regardless of content. They are primarily used for icon-only buttons. {\"A\"} A {\"A\"} <br /> {\"Overflow\"} Overflow {\"Overflow\"} Icon Buttons Use IconButton for buttons that include icons alongside or instead of text. Icon Only For icon-only buttons, use the isSquare prop and provide accessible text as children (rendered as visually hidden). {\"Settings\"} {\"Settings\"} {\"Settings\"} <br /> {\"Settings\"} {\"Settings\"} {\"Settings\"} Icon with Text Icons can be positioned to the left (default) or right of button text using the iconPosition prop. {\"Add Item\"} {\"Add Item\"} {\"Add Item\"} <br /> {\"Select Option\"} {\"Select Option\"} {\"Select Option\"} <br /> {\"Next\"} {\"Next\"} {\"Next\"} Accessibility Semantic Elements Choose the correct HTML element based on function: - <a> - for navigation (takes users to a different page or section) - <button> - for actions (form submission, UI controls, etc.) - <button type=\"submit\"> - for form submission buttons Color Contrast Note: Buttons do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. While Technique G145 suggests increasing font size to meet contrast requirements, a business decision has been made to maintain current aesthetics. Disabled States Avoid using disabled buttons, especially for form submissions. Disabled buttons are not keyboard focusable and cannot be announced by screen readers. Instead: - Use aria-disabled=\"true\" to maintain focusability - Allow form submission and provide clear validation feedback - Help users understand what needs to be fixed Icon Accessibility When using icon-only buttons, ensure accessible text is provided through: - Descriptive text as children (rendered as visually hidden for IconButton) - aria-label attribute on the button element - alt attribute on the icon (if applicable) Additional Resources - When Is A Button Not A Button? - Anchors, Buttons, And Accessibility API React Props Button | Prop | Type | Default | Description | | --------------- | --------------------------------- | ----------- | ------------------------------------------- | | type | \"primary\" \\| \"fill\" \\| \"ghost\" | \"default\" | Button variant style | | size | \"small\" \\| \"large\" | - | Button size (default is medium) | | isSquare | boolean | - | Make button square (equal width and height) | | isActive | boolean | - | Apply active state styling | | isDisabled | boolean | - | Disable the button | | htmlType | \"button\" \\| \"submit\" \\| \"reset\" | \"button\" | HTML button type attribute | | href | string | - | If provided, renders as anchor element | | preserveWidth | boolean | - | Preserve button width when content changes | | className | string | - | Additional CSS classes | | elemRef | Ref | - | Forwarded ref for the button/anchor element | | children | React.ReactNode | - | Button content | The component also accepts all standard HTML button or anchor attributes depending on whether href is provided. IconButton | Prop | Type | Default | Description | | --------------- | -------------------- | -------- | --------------------------------------------------------- | | iconName | string | - | Required. Name of the icon to display | | iconPosition | \"left\" \\| \"right\" | \"left\" | Position of icon relative to text | | iconClassName | string | - | Additional CSS classes for the icon | | size | \"small\" \\| \"large\" | - | Button size. Icon is 16px for small, 24px otherwise | | isSquare | boolean | - | Make button square (children rendered as visually hidden) | | children | React.ReactNode` | - | Button text content | Component Aliases For convenience, the following aliases are available:"
   },
   {
     "href": "/components/buttons",
@@ -45,11 +45,11 @@
   },
   {
     "href": "/components/card",
-    "content": "export const GrayPreview = (props) => ( ); export const DefaultSection = ({ title = \"Section\", content = \"Content\", ...props }) => ( <h3 className=\"bold\">{title}</h3> <p>{content}</p> ); Card A card serves as an entry point to more detailed information. Cards can contain rich content such as photos, text, links, lists, and tables. Cards should be used on non-primary backgrounds (such as background-secondary or other colored backgrounds) to stand out from the page content. Basic Example <h2 className=\"bold\">Card with one section</h2> <p>Content can be whatever you choose it to be</p> Background Colors You can customize the background color of cards and sections using the color prop: - On individual CardSection components (preferred) - for specific section styling - On the entire Card component - to set a default color for all sections The default card color is background-primary (white), and sections inherit their parent card's color unless overridden. Available Colors - Background colors: background-primary, background-secondary, background-contrast, background-accent, background-accent1-blog, background-accent2-blog - Fill colors: fill-subtle, fill-accent1, fill-accent2, fill-accent3, fill-accent4, fill-accent5 <h4 className=\"bold\">Secondary Background</h4> <p>Using background-secondary color</p> <h4 className=\"bold\">Accent Fill</h4> <p>Using fill-accent2 color</p> <h4 className=\"bold\">Subtle Fill</h4> <p>Using fill-subtle color</p> <h2 className=\"h4 bold\">Contrast section</h2> {[1, 2].map((i) => ( ))} <h2 className=\"h4 bold\">Contrast card</h2> {[1, 2, 3].map((i) => ( ))} Borders By default, cards have a subtle border. You can remove this border using the noBorder prop. This is useful when you want the card to seamlessly blend with its background or when using cards in certain layout compositions. <h3 className=\"bold\">Default Card</h3> <p>This card has the default border styling</p> <h3 className=\"bold\">No Border Card</h3> <p>This card has no border using the noBorder prop</p> Flexible Height In flex layouts, card sections can expand to fill available space using the isFilling prop. This is useful when you need cards of equal height in a grid layout. <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">I fill for you</h2> <h2 className=\"bold\">I don't fill good</h2> <p>Someone turned my fillings off</p> <h2 className=\"bold\">Tall helper card</h2> <p> {This card is here just to stretch the vertical space and force the other cards to fill their remaining space.} </p> <p> {Ipsum consequat esse eu ullamco deserunt veniam exercitation officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum. Enim excepteur adipisicing esse id est. Deserunt adipisicing excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor exercitation. Laborum labore amet do ullamco excepteur anim tempor pariatur pariatur.} </p> Product Header Use CardProductHeader to create cards that showcase products or services with images. The header displays product information alongside a visual element. The CardProductHeader component supports a space=\"small\" prop for more compact layouts when needed. }> <p className=\"bold text-accent\">Recommended</p> <p className=\"h4 mb-none bold text-nowrap d-inline-flex align-items-center\"> {\"Premium Plan\"} {\"\\u00A0\\u00A0\"} 5G </p> <p className=\"h2 text-accent mb-none\">200 GB</p> <p>Get 200 GB at full speed, then 20 Mbit/s</p> <p className=\"h2 mb-none\"> {\"46.13 \"} <span className=\"large bold\">€/month</span> </p> <p className=\"text-secondary\">24-month contract</p> {\"Check Availability\"} Learn More }> <p className=\"bold text-accent\">Popular</p> <p className=\"h4 mb-none bold text-nowrap\">Premium Internet</p> <p className=\"h2 text-accent mb-none\">500 Mbit/s</p> <p className=\"mb-none\">100 Mbit/s upload</p> <p>High-speed internet for your home or office</p> <p className=\"h2 mb-none\"> {\"39.99 \"} <span className=\"large bold\">€/month</span> </p> <p className=\"text-secondary\">12-month contract</p> {\"Check Availability\"} Learn More Custom Headers For custom header styling beyond product cards, use CardSection with the color prop to create header-like sections: <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> Dividers Use the Divider component between card sections to create visual separation. Dividers can be used with or without icons. <h2 className=\"bold\">Section with Dividers</h2> <p>First section content</p> <h3 className=\"bold\">Second Section</h3> <p>Content separated by a divider</p> <h3 className=\"bold\">Third Section</h3> <p>Content separated by a divider with icon</p> Images in Cards Images can be placed either inside card sections or directly in the card to fill its full width. export const PlaceholderImage = ({ title, ...props }) => ( ); <h3 className=\"bold\">Image Inside Section</h3> <p>Image is contained within the section padding</p> <h3 className=\"bold\">Full Width Image</h3> <p>Image fills the entire card width without padding</p> Advanced Examples Cards with Icons and Mixed Colors {\"New\"} <h3 className=\"bold\">Large Plan</h3> <p>Call, text, and use data conveniently with credit.</p> Check Availability Learn More {\"Featured\"} <h3 className=\"bold\">Premium Plan</h3> <p>Enhanced service with additional benefits and features.</p> Check Availability Learn More Compact Sections Use the space=\"small\" prop on CardSection for more compact layouts. {\"Compact header with small spacing\"} <h3 className=\"bold\">Main content</h3> <p>Regular content below the compact header section.</p> Accessibility The Card component is purely presentational and carries no semantic meaning. When using cards: - Use proper heading hierarchy within CardSection components - Ensure sufficient color contrast when using custom background colors - Include appropriate alt text for images in product headers - Consider keyboard navigation if cards contain interactive elements API React Props Card | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | \"background-primary\" | Custom background color | | noBorder | boolean | - | Remove the default border | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Card content (CardSection components) | CardSection | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | - | Custom background color for this section | | isFilling | boolean | - | Fill available space using flexbox | | space | \"small\" | - | Use small spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Section content | CardProductHeader | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ----------------------------------- | | image | React.ReactNode | - | Image element or content to display | | space | \"small\" | - | Use small spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Header content/text |"
+    "content": "export const GrayPreview = (props) => ( ); export const DefaultSection = ({ title = \"Section\", content = \"Content\", ...props }) => ( <h3 className=\"bold\">{title}</h3> <p>{content}</p> ); Card A card serves as an entry point to more detailed information. Cards can contain rich content such as photos, text, links, lists, and tables. Cards should be used on non-primary backgrounds (such as background-secondary or other colored backgrounds) to stand out from the page content. Basic Example <h2 className=\"bold\">Card with one section</h2> <p>Content can be whatever you choose it to be</p> Background Colors You can customize the background color of cards and sections using the color prop: - On individual CardSection components (preferred) - for specific section styling - On the entire Card component - to set a default color for all sections The default card color is background-primary (white), and sections inherit their parent card's color unless overridden. Available Colors - Background colors: background-primary, background-secondary, background-contrast, background-accent, background-accent1-blog, background-accent2-blog - Fill colors: fill-subtle, fill-accent1, fill-accent2, fill-accent3, fill-accent4, fill-accent5 <h4 className=\"bold\">Secondary Background</h4> <p>Using background-secondary color</p> <h4 className=\"bold\">Accent Fill</h4> <p>Using fill-accent2 color</p> <h4 className=\"bold\">Subtle Fill</h4> <p>Using fill-subtle color</p> <h2 className=\"h4 bold\">Contrast section</h2> {[1, 2].map((i) => ( ))} <h2 className=\"h4 bold\">Contrast card</h2> {[1, 2, 3].map((i) => ( ))} Borders By default, cards have a subtle border. You can remove this border using the noBorder prop. This is useful when you want the card to seamlessly blend with its background or when using cards in certain layout compositions. <h3 className=\"bold\">Default Card</h3> <p>This card has the default border styling</p> <h3 className=\"bold\">No Border Card</h3> <p>This card has no border using the noBorder prop</p> Flexible Height In flex layouts, card sections can expand to fill available space using the isFilling prop. This is useful when you need cards of equal height in a grid layout. <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">Filling good</h2> <p>Adjusting by filling the space</p> <h2 className=\"bold\">I fill for you</h2> <h2 className=\"bold\">I don't fill good</h2> <p>Someone turned my fillings off</p> <h2 className=\"bold\">Tall helper card</h2> <p> {This card is here just to stretch the vertical space and force the other cards to fill their remaining space.} </p> <p> {Ipsum consequat esse eu ullamco deserunt veniam exercitation officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum. Enim excepteur adipisicing esse id est. Deserunt adipisicing excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor exercitation. Laborum labore amet do ullamco excepteur anim tempor pariatur pariatur.} </p> Product Header Use CardProductHeader to create cards that showcase products or services with images. The header displays product information alongside a visual element. The CardProductHeader component supports a space=\"small\" prop for more compact layouts when needed. }> <p className=\"bold text-accent\">Label text</p> <p className=\"h4 mb-none bold text-nowrap d-inline-flex align-items-center\"> {\"Product name\"} {\"\\u00A0\\u00A0\"} Label </p> <p className=\"h2 text-accent mb-none\">USP</p> <p className=\"mb\"> {\"V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s\"} </p> <span> {\"Spolu za \"} <s>35 €/mes</s> {\"\\u00A0\"} {\"Look here for more information\"} </span> <p className=\"h2 mb-xsmall\"> {\"30.13 \"} <span className=\"large\">€/month</span> </p> <p className=\"caption bold mb-xsmall\">Cena za 1 linku</p> <p className=\"caption text-secondary\">Viazanosť 24 mesiacov</p> {\"Button\"} {\"Button\"} {\"Benefity\"} {\"Všetky\"} <span className=\"caption--small bold\">Benefit 1</span> <span className=\"caption--small bold\">Benefit 2</span> <span className=\"caption--small bold\">Benefit 3</span> <p className=\"h4 mb-none bold text-nowrap d-inline-flex align-items-center\"> {\"Product name\"} {\"\\u00A0\\u00A0\"} Label </p> <p className=\"h2 text-accent mb-none\">USP</p> <p className=\"mb\"> {\"V paušále získate 200 GB plnou rýchlosťou, potom 20 Mbit/s\"} </p> <span> {\"Spolu za \"} <s>35 €/mes</s> {\"\\u00A0\"} {\"Look here for more information\"} </span> <p className=\"h2 mb-xsmall\"> {\"30.13 \"} <span className=\"large\">€/month</span> </p> <p className=\"caption bold mb-xsmall\">Cena za 1 linku</p> <p className=\"caption text-secondary\">Viazanosť 24 mesiacov</p> {\"Button\"} {\"Button\"} {\"Benefity\"} {\"Všetky\"} <span className=\"caption--small bold\">Benefit 1</span> <span className=\"caption--small bold\">Benefit 2</span> <span className=\"caption--small bold\">Benefit 3</span> <p className=\"h4 mb-none bold text-nowrap d-inline-flex align-items-center\"> {\"Product name\"} {\"\\u00A0\\u00A0\"} Label </p> <p className=\"h2 mb-none\">USP</p> <span> {\"Spolu za \"} <s>35 €/mes</s> {\"\\u00A0\"} {\"Look here for more information\"} </span> <p className=\"h2 mb-xsmall\"> {\"30.13 \"} <span className=\"large\">€/month</span> </p> <p className=\"caption bold mb-xsmall\">Cena za 1 linku</p> <p className=\"caption text-secondary\">Viazanosť 24 mesiacov</p> {\"Button\"} {\"Button\"} <p> {Tento text popisuje funkciu produktu, jeho výhody a technické parametre.} </p> Custom Headers For custom header styling beyond product cards, use CardSection with the color prop to create header-like sections: <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> <h3 className=\"bold\">Main Content</h3> <p>Regular content below the header section.</p> Dividers Use the Divider component between card sections to create visual separation. Dividers can be used with or without icons. <h2 className=\"bold\">Section with Dividers</h2> <p>First section content</p> <h3 className=\"bold\">Second Section</h3> <p>Content separated by a divider</p> <h3 className=\"bold\">Third Section</h3> <p>Content separated by a divider with icon</p> Images in Cards Images can be placed either inside card sections or directly in the card to fill its full width. export const PlaceholderImage = ({ title, ...props }) => ( ); <h3 className=\"bold\">Image Inside Section</h3> <p>Image is contained within the section padding</p> <h3 className=\"bold\">Full Width Image</h3> <p>Image fills the entire card width without padding</p> Advanced Examples Cards with Icons and Mixed Colors {\"New\"} <h3 className=\"bold\">Large Plan</h3> <p>Call, text, and use data conveniently with credit.</p> Check Availability Learn More {\"Featured\"} <h3 className=\"bold\">Premium Plan</h3> <p>Enhanced service with additional benefits and features.</p> Check Availability Learn More Compact Sections Use space=\"small\" for compact layouts or space=\"large\" for extra breathing room. Large spacing stays 30px on mobile and expands to 60px from lg up. {\"Compact header with small spacing\"} <h3 className=\"bold\">Main content</h3> <p>Regular content below the compact header section.</p> <h3 className=\"bold\">Large spacing</h3> <p> {Section padding stays 30px on mobile and increases to 60px on large screens.} </p> Accessibility The Card component is purely presentational and carries no semantic meaning. When using cards: - Use proper heading hierarchy within CardSection components - Ensure sufficient color contrast when using custom background colors - Include appropriate alt text for images in product headers - Consider keyboard navigation if cards contain interactive elements API React Props Card | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | \"background-primary\" | Custom background color | | noBorder | boolean | - | Remove the default border | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Card content (CardSection components) | CardSection | Prop | Type | Default | Description | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- | | color | \"background-primary\" \\| \"background-secondary\" \\| \"background-contrast\" \\| \"background-accent\" \\| \"background-accent1-blog\" \\| \"background-accent2-blog\" \\| \"fill-subtle\" \\| \"fill-accent1\" \\| \"fill-accent2\" \\| \"fill-accent3\" \\| \"fill-accent4\" \\| \"fill-accent5\" | - | Custom background color for this section | | isFilling | boolean | - | Fill available space using flexbox | | space | \"small\" \\| \"large\" | - | Use small or responsive large spacing variant (60px from lg) | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Section content | CardProductHeader | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ----------------------------------- | | image | React.ReactNode | - | Image element or content to display | | space | \"small\" | - | Use small spacing variant | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Header content/text |"
   },
   {
     "href": "/components/carousel",
-    "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden before initialization using data-swiper-options attribute. The attribute accepts a JSON string representing a Swiper.js options object Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example: Re-initialize after dynamic DOM updates When your rendering flow updates carousel markup (for example Livewire tab/content updates), use the generic ODS module lifecycle helpers. For hidden tabs, Carousel now auto-synchronizes layout when the tab panel becomes visible."
+    "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden in React using the swiperOptions prop (data-swiper-options outside React). The prop accepts a Swiper.js options object. Responsive slide spacing Use swiperOptions and set Swiper spaceBetween directly when slide spacing should follow Grid column gap. If you want Carousel spacing to visually match Grid gutters, use these values: - Grid small -> spaceBetween: 10 - Grid default -> spaceBetween: 20 - Grid large -> spaceBetween: 20 on mobile, 40 from md up - Grid xlarge -> spaceBetween: 20 on mobile, 60 from md up Examples: - {\"spaceBetween\":0} -> no space between slides - {\"spaceBetween\":10} -> Grid small - {\"spaceBetween\":20} -> Grid default - {\"spaceBetween\":20,\"breakpoints\":{\"768\":{\"spaceBetween\":40}}} -> Grid large - {\"spaceBetween\":10,\"breakpoints\":{\"768\":{\"spaceBetween\":40},\"1240\":{\"spaceBetween\":60}}} -> custom responsive spacing Spacing is applied through Swiper spaceBetween, so carousel overflow math and auto-disable logic stay in sync. If you set slidesPerView directly and want same value on large screens too, also override the default Carousel 1240 breakpoint. Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example: Re-initialize after dynamic DOM updates When your rendering flow updates carousel markup (for example Livewire tab/content updates), use the generic ODS module lifecycle helpers. For hidden tabs, Carousel now auto-synchronizes layout when the tab panel becomes visible."
   },
   {
     "href": "/components/carousel-hero",
@@ -185,7 +185,7 @@
   },
   {
     "href": "/components/link",
-    "content": "Link Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element. Basic Usage <a href=\"/\" className=\"link\"> {\"Standalone link\"} </a> <p> {\"Links in text \"} <a href=\"/\" className=\"\"> {\"inherit font weight\"} </a> </p> <p> {\"Links in text that are \"} <a href=\"/\" className=\"\"> {way too long and need to wrap at the end of the line so it will not break the paragraph of text} </a> </p> Link Class Behavior Default Link styling is automatically applied to all <a> elements except those with specific classes: .btn, .listcontrol, .tab-listtab, .stepbarlink, .osk-breadcrumbslink, .skip-link, .dropdownitem, .carousel-promotionsslide, and elements within .osk-footer, .mm-header or .megamenu-header. To force Link styling on these elements, use the .link class. <div className=\"megamenu-header\"> <a href=\"/\" className=\"\"> {\"Link in megamenu (no styling)\"} </a> <br /> Link with class .link in megamenu </div> Icon Integration With Icons Links can include icons positioned to the left or right of the text. <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> <br /> <br /> <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> Modifiers Underline on Hover Only (.underline-hover) For cases like article thumbnails or card headings where you want links to appear without underline by default but show underline on hover. This is useful for maintaining clean visual hierarchy in card layouts while preserving hover feedback. <div> <h3 className=\"bold\"> <a href=\"/\" className=\"underline-hover\"> {\"Article Title Without Underline\"} </a> </h3> <p> {This pattern is commonly used in card components where headings wrap links.} </p> </div> No Accent on Hover (.no-accent) By default, links display an orange accent color on hover. Use the .no-accent modifier to disable the accent color while keeping the underline decoration. This is useful when links are displayed on dark backgrounds where the orange accent color would have insufficient contrast. <div> <a href=\"/\" className=\"link\"> {\"Regular link with orange accent\"} </a> <a href=\"/\" className=\"link no-accent\"> {\"Link without accent color on hover\"} </a> </div> Element Types Render as Button When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a button element. Perform click action Use Cases 1. Navigation Links - Primary navigation: Main menu items, breadcrumbs - Secondary navigation: Footer links, sidebar navigation - Inline navigation: Links within content text 2. Action Links - Modal triggers: Opening dialogs, popups, or overlays - Form submissions: Submit buttons styled as links - Toggle actions: Show/hide content, expand/collapse sections 3. External Links - Social media: Links to external platforms - Documentation: Links to help pages, guides - Partner sites: Affiliate or partner website links 4. Download Links - File downloads: PDFs, documents, media files - Software downloads: Applications, tools, utilities 5. Email Links - Contact information: Email addresses with mailto: protocol - Support links: Direct email to support teams 6. Phone Links - Contact numbers: Phone numbers with tel: protocol - Support hotlines: Direct calling to support 7. Back/Forward Navigation - Breadcrumb navigation: Previous page links - Wizard steps: Next/previous step navigation - Pagination: Page navigation controls 8. Contextual Links - Related content: \"See also\" links - Reference links: Citations, sources, footnotes - Cross-references: Links to related sections 9. Call-to-Action Links - Primary CTAs: \"Get Started\", \"Learn More\", \"Sign Up\" - Secondary CTAs: \"Cancel\", \"Back\", \"Skip\" 10. Accessibility Links - Skip links: Jump to main content - Accessibility help: Screen reader support links Accessibility Color Contrast Orange links on white background do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. Focus States All links have visible focus states with proper contrast and outline styling. Screen Reader Support - Links are properly announced to screen readers - Icon-only links should include descriptive text - External links should indicate they open in new windows Keyboard Navigation - All links are keyboard accessible - Focus order follows logical document flow - Focus indicators are clearly visible API React Props | Name | Type | Default | Description | | ------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------------- | | href | string | - | Destination address. | | tag | \"a\" \\| \"button\" | \"a\" | Rendered HTML element. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Link content. | | isUnderline | boolean | false | Whether the link should be underlined. | | isNormal | boolean | false | Whether the link should have normal font weight. | | noAccent | boolean | false | When true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds). |"
+    "content": "Link Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element. Basic Usage <a href=\"/\" className=\"link\"> {\"Standalone link\"} </a> <p> {\"Links in text \"} <a href=\"/\" className=\"\"> {\"inherit font weight\"} </a> </p> <p> {\"Links in text that are \"} <a href=\"/\" className=\"\"> {way too long and need to wrap at the end of the line so it will not break the paragraph of text} </a> </p> Link Class Behavior Default Link styling is automatically applied to all <a> elements except those with specific classes: .btn, .listcontrol, .tab-listtab, .stepbarlink, .osk-breadcrumbslink, .skip-link, .dropdownitem, .carousel-promotionsslide, and elements within .osk-footer, .mm-header or .megamenu-header. To force Link styling on these elements, use the .link class. <div className=\"megamenu-header\"> <a href=\"/\" className=\"\"> {\"Link in megamenu (no styling)\"} </a> <br /> Link with class .link in megamenu </div> Icon Integration With Icons Links can include icons positioned to the left or right of the text. <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> <br /> <br /> <a href=\"/\"> {\"Back\"} </a> <br /> <a href=\"/\"> {\"Next\"} </a> Modifiers Use modifiers to change default link state. Combine them as needed. | Class | Effect | | ------------------ | ---------------------------------------------------------------------- | | .text-accent | Orange by default. On hover, link switches back to default text color. | | .no-underline | Removes underline in default state. | | .underline-hover | Removes underline in default state and restores it on hover. | | .no-accent | Disables orange hover color and keeps inherited text color. | Common Combinations The most common variants can be expressed with these class combinations: | Classes | Default | Hover | | -------------------------------- | -------------------------------- | -------------------------------- | | .link | Default text color, underlined | Accent color, underlined | | .link.text-accent | Accent color, underlined | Default text color, underlined | | .link.no-underline | Default text color, no underline | Accent color, no underline | | .link.text-accent.no-underline | Accent color, no underline | Default text color, no underline | | .underline-hover | Default text color, no underline | Accent color, underlined | | .text-accent.underline-hover | Accent color, no underline | Default text color, underlined | text-accent changes default color only. Underline behavior still comes from the underline-related classes. <div> <p> <a href=\"/\" className=\"link\"> {\"Default underlined link\"} </a> </p> <p> <a href=\"/\" className=\"link text-accent\"> {\"Accent underlined link\"} </a> </p> <p> <a href=\"/\" className=\"link no-underline\"> {\"Default non-underlined link\"} </a> </p> <p> <a href=\"/\" className=\"link text-accent no-underline\"> {\"Accent non-underlined link\"} </a> </p> <p> <a href=\"/\" className=\"underline-hover\"> {\"Underline on hover only\"} </a> </p> <p> {\"Inline text with \"} <a href=\"/\" className=\"text-accent underline-hover\"> {\"accent link\"} </a> {\" inside paragraph.\"} </p> </div> Element Types Render as Button When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a button element. Perform click action Use Cases 1. Navigation Links - Primary navigation: Main menu items, breadcrumbs - Secondary navigation: Footer links, sidebar navigation - Inline navigation: Links within content text 2. Action Links - Modal triggers: Opening dialogs, popups, or overlays - Form submissions: Submit buttons styled as links - Toggle actions: Show/hide content, expand/collapse sections 3. External Links - Social media: Links to external platforms - Documentation: Links to help pages, guides - Partner sites: Affiliate or partner website links 4. Download Links - File downloads: PDFs, documents, media files - Software downloads: Applications, tools, utilities 5. Email Links - Contact information: Email addresses with mailto: protocol - Support links: Direct email to support teams 6. Phone Links - Contact numbers: Phone numbers with tel: protocol - Support hotlines: Direct calling to support 7. Back/Forward Navigation - Breadcrumb navigation: Previous page links - Wizard steps: Next/previous step navigation - Pagination: Page navigation controls 8. Contextual Links - Related content: \"See also\" links - Reference links: Citations, sources, footnotes - Cross-references: Links to related sections 9. Call-to-Action Links - Primary CTAs: \"Get Started\", \"Learn More\", \"Sign Up\" - Secondary CTAs: \"Cancel\", \"Back\", \"Skip\" 10. Accessibility Links - Skip links: Jump to main content - Accessibility help: Screen reader support links Accessibility Color Contrast Orange links on white background do not meet Success Criterion 1.4.3: Contrast (Minimum) due to insufficient contrast between white and orange brand colors. Focus States All links have visible focus states with proper contrast and outline styling. Screen Reader Support - Links are properly announced to screen readers - Icon-only links should include descriptive text - External links should indicate they open in new windows Keyboard Navigation - All links are keyboard accessible - Focus order follows logical document flow - Focus indicators are clearly visible API React Props | Name | Type | Default | Description | | ------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------------- | | href | string | - | Destination address. | | tag | \"a\" \\| \"button\" | \"a\" | Rendered HTML element. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Link content. | | isUnderline | boolean | false | Whether the link should be underlined. | | isNormal | boolean | false | Whether the link should have normal font weight. | | noAccent | boolean | false | When true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds). |"
   },
   {
     "href": "/components/list",
@@ -261,7 +261,7 @@
   },
   {
     "href": "/components/tag",
-    "content": "Tag Figma groups Tag into three showcases: Tag Interactive, Tag Action Button, and Tag Read Only. transparent is standalone color variant. Tag Interactive Buttons use onClick. Links use href. Button <div> {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} </div> Link <div> {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} </div> Tag Action Button Use actionButton for removable labels. <div> } > {\"Label\"} } > {\"Label\"} } > {\"Label\"} } > {\"Label\"} </div> Tag Read Only Sizes {\"Label\"} {\"Label\"} {\"Label\"} Brand colors {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} Semantic colors Info Warning Success Orange Accessibility - Use plain text tags only for non-interactive metadata - Use onClick when tag behaves like button - Use href when tag performs navigation - Always provide visible text that explains tag meaning - Always provide ariaLabel on TagButton - Check contrast when color communicates status API React Props | Name | Type | Default | Description | | -------------- | ------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | color | TagColor | - | Tag color. Options: \"black\", \"orange\", \"yellow\", \"green\", \"blue\", \"success\", \"info\", \"warning\", \"danger\", \"transparent\". | | size | \"small\" \\| \"large\" | - | Tag size. Omit prop for default medium size. | | isDisabled | boolean | false | Disables button state and adds aria-disabled for link, read-only, and action-button variants. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Visible tag label. | | actionButton | React.ReactElement | - | Action button rendered next to label, typically for remove or dismiss flows. | | onClick | React.MouseEventHandler | - | Makes tag render as <button>. | | href | string | - | Makes tag render as <a>. |"
+    "content": "Tag Figma groups Tag into three showcases: Tag Interactive, Tag Action Button, and Tag Read Only. transparent is standalone color variant. Tag Interactive Buttons use onClick. Links use href. Button <div> {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} </div> Link <div> {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} </div> Tag Action Button Use actionButton for removable labels. <div> } > {\"Label\"} } > {\"Label\"} } > {\"Label\"} } > {\"Label\"} </div> Tag Read Only Read-only tags, including colorful variants below, are informative only. They do not imply click behavior. If tag must support action or navigation, use interactive tag with onClick or href. Sizes {\"Label\"} {\"Label\"} {\"Label\"} Brand colors {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} {\"Label\"} Semantic colors Info Warning Success Orange Accessibility - Use plain text tags only for non-interactive metadata - Use colorful read-only tags for status or categorization only, not for click targets - Use onClick when tag behaves like button - Use href when tag performs navigation - If tag must be interactive, use interactive tag instead of relying on color to suggest action - Always provide visible text that explains tag meaning - Always provide ariaLabel on TagButton - Check contrast when color communicates status API React Props | Name | Type | Default | Description | | -------------- | ------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | color | TagColor | - | Tag color. Options: \"black\", \"orange\", \"yellow\", \"green\", \"blue\", \"success\", \"info\", \"warning\", \"danger\", \"transparent\". | | size | \"small\" \\| \"large\" | - | Tag size. Omit prop for default medium size. | | isDisabled | boolean | false | Disables button state and adds aria-disabled for link, read-only, and action-button variants. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Visible tag label. | | actionButton | React.ReactElement | - | Action button rendered next to label, typically for remove or dismiss flows. | | onClick | React.MouseEventHandler | - | Makes tag render as <button>. | | href | string | - | Makes tag render as <a>. |"
   },
   {
     "href": "/components/testimonial",
@@ -269,7 +269,11 @@
   },
   {
     "href": "/components/tile",
-    "content": "Tile Tile grid {Array.from({ length: 7 }).map((, index) => ( <h3 className=\"h5 bold\"> Default label </h3> ))} Tile row {Array.from({ length: 4 }).map((, index) => ( Default label ))} Action variant {Array.from({ length: 3 }).map((_, index) => ( Default label ))} API React Props | Name | Type | Default | Description | | ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | | variant | \"compact\" \\| \"action\" | - | Compact reduces spacing, uses row layout on mobile and stacks from sm up. Action adds row layout and chevron. | | hAlign | \"center\" | - | Horizontal alignment of tile content. | | vAlign | \"center\" \\| \"end\" \\| \"space-between\" | - | Vertical alignment of tile content. | | children | React.ReactNode | - | Tile content. | | className | string | - | Additional CSS classes. |"
+    "content": "Tile Tile grid {Array.from({ length: 7 }).map((, index) => ( <h3 className=\"h5 bold\"> Default label </h3> ))} Tile row {Array.from({ length: 4 }).map((, index) => ( Default label ))} Action variant {Array.from({ length: 3 }).map((_, index) => ( Default label ))} Icon sizing in tiles When a tile contains a direct child Icon or Pictogram without a size prop, the tile applies its default responsive sizing automatically. If you set the size prop explicitly on that Icon or Pictogram, it overrides the tile sizing rules. - Omit the size prop on a direct child Icon or Pictogram to use the tile defaults. - Set the size prop on a direct child Icon or Pictogram to override the tile sizing. <span>Tile-controlled icon sizing</span> <span>Explicit pictogram size override</span> API React Props | Name | Type | Default | Description | | ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | | variant | \"compact\" \\| \"action\" | - | Compact reduces spacing, uses row layout on mobile and stacks from sm up. Action adds row layout and chevron. | | hAlign | \"center\" | - | Horizontal alignment of tile content. | | vAlign | \"center\" \\| \"end\" \\| \"space-between\" | - | Vertical alignment of tile content. | | children | React.ReactNode | - | Tile content. | | className | string | - | Additional CSS classes. | Content rules - Direct child Icon and Pictogram elements without the size prop use tile-managed sizing. - Direct child Icon and Pictogram elements with the size prop keep their explicit size."
+  },
+  {
+    "href": "/components/timeline",
+    "content": "export const items = [ { title: \"Lorem ipsum dolor\", description: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.\", }, { label: \"Space for date\", title: \"Lorem ipsum dolor\", description: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.\", }, { title: \"Lorem ipsum dolor\", description: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.\", }, { label: \"Space for date\", title: \"Lorem ipsum dolor\", description: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.\", }, ]; Timeline Timeline displays ordered steps, milestones, or phases with optional one-line metadata above each title. Use it for chronological content where sequence matters and each item needs a clear heading and supporting description. Note: The label prop is optional metadata above title. It should stay a single line of short text, for example a date or short phase name. Accessibility Timeline uses semantic ordered list markup (<ol> / <li>) and renders item titles as headings. API React Props Timeline | Prop | Type | Default | Description | | ----------- | ---------------------------------------------- | ------- | ---------------------------------------------- | | items | TimelineItem[] | - | Required. Timeline items | | start | number | 1 | Starting number for ordered list | | titleTag | \"h1\" \\| \"h2\" \\| \"h3\" \\| \"h4\" \\| \"h5\" \\| \"h6\" | \"h3\" | Heading tag used for item titles | | className | string | - | Additional CSS classes | | ...other | React.OlHTMLAttributes | - | Additional props passed to root <ol> element | TimelineItem | Prop | Type | Default | Description | | ------------- | ----------------- | ------- | ---------------------------------------------------------------------- | | title | React.ReactNode | - | Required. Timeline item title | | description | React.ReactNode | - | Required. Timeline item description or rich content | | label | React.ReactNode | - | Optional one-line metadata above title. Keep it short and single-line. |"
   },
   {
     "href": "/components/tooltip",