@orangesk/orange-design-system 2.2.0 → 3.1.0

package/build/search-index.json

@@ -49,7 +49,7 @@
   },
   {
     "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",
@@ -85,7 +85,7 @@
   },
   {
     "href": "/components/feature-accordion",
-    "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. Content Guidelines - Preview images must use 4:3 aspect ratio. - Base desktop asset size is 640x480. - Provide higher-density variants using normal HTML srcset density descriptors, for example 1280x960 2x. - Main content title should be max 3 lines, roughly 84 characters. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Responsive images with srcset Use imageSrcSet to provide multiple image resolutions for different screen densities. Keep same 4:3 ratio for all variants. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via imageAlt prop - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, render preview images directly in HTML. JavaScript switches already rendered images; it no longer generates missing preview markup. API React Props FeatureAccordion | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------------- | ------------------ | ------- | ------------------------------------------------------------------ | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | imageUrl | string | - | Image URL | | imageAlt | string | - | Image alt text | | imageSrcSet | string | - | Image srcset for responsive images | | image | string \\| object | - | Responsive image object with breakpoint keys | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: image > imageSrcSet + imageUrl > imageUrl Image spec: Desktop preview box is 640x480 (4:3). Use 1280x960 2x and higher 4:3 multipliers for sharper displays. Content limit: Main item title should stay within 3 lines, about 84 characters maximum. Vanilla HTML: In non-React environments, render preview images in final HTML with data-feature-accordion-image. Do not rely on JS to create them from item data attributes. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | HTML / CSS Contract - Desktop layout switches at xl. - Desktop preview wrapper is fixed 640x480. - Accordion column fills remaining width. - Below xl, layout stacks and preview height becomes automatic. - Non-React HTML must include final preview image markup; JS only toggles visibility and active accordion state. FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
+    "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. Content Guidelines - A 4:3 asset at 640x480 is recommended for the default preview shape. - Portrait and other aspect ratios can be used when content benefits from them. - Source images work best when they are at least 640px wide. - At xl (1240px) and above, desktop preview area stays 640px wide while image keeps its own intrinsic aspect ratio. - Below xl, layout stacks and preview image fills available container width. - Large assets benefit from optional higher-density srcset variants. - Main content titles work best when kept to about 3 lines, roughly 84 characters. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Variable content lengths Use different heading and body lengths when accordion items need more or less text content. <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\" } </p> <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.\" } </p> Portrait images Portrait images are supported. Use source images that are at least 640px wide for sharp desktop rendering. <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus.\" } </p> {\"Button\"} <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Centered preview alignment Use align-self- classes on feature-accordionpreview elements, such as align-self-middle, with alignment utilities when the preview image should align differently from the default top alignment on desktop. <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Responsive images with srcset Use imageSrcSet to provide multiple image resolutions for different screen densities. Keep all variants visually consistent for same item. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via imageAlt prop - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, render preview images directly in HTML. JavaScript switches already rendered images; it no longer generates missing preview markup. API React Props FeatureAccordion | Prop | Type | Default | Description | | ------------------ | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | previewClassName | string | - | Additional CSS classes for preview area | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------- | ------------------ | ------- | -------------------------------------------------------------------- | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | imageUrl | string | - | Simple image URL | | imageAlt | string | - | Image alt text | | imageSrcSet | string | - | Image srcset for responsive images | | image | string \\| object | - | Image source, typically responsive image object with breakpoint keys | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: image > imageSrcSet + imageUrl > imageUrl Image spec: Recommended preview asset is 4:3 at 640x480, but portrait and other aspect ratios are supported. Source image should be at least 640px wide. At xl (1240px) and above, desktop preview area is 640px wide. Below xl, preview image expands to available container width. Image height always follows its intrinsic aspect ratio. Use appropriately sized assets and optional srcset variants for sharper displays. Content limit: Main item title should stay within 3 lines, about 84 characters maximum. Vanilla HTML: In non-React environments, render preview images in final HTML with data-feature-accordion-image. Do not rely on JS to create them from item data attributes. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | HTML / CSS Contract - Desktop layout switches at xl. - Desktop preview wrapper is fixed 640x480. - Accordion column fills remaining width. - Below xl, layout stacks and preview height becomes automatic. - Non-React HTML must include final preview image markup; JS only toggles visibility and active accordion state. FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
   },
   {
     "href": "/components/footer",
@@ -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",
@@ -271,6 +271,10 @@
     "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 ))} 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",
     "content": "Tooltip Tooltip describes an interactive (trigger) element with rich text. Tooltip is displayed only after explicit trigger activation (click/tap, or keyboard activation of the trigger). Tooltip is closed when user activates the trigger again, presses Esc, or clicks/taps outside of trigger and tooltip dialog. Clicking inside tooltip dialog does not close it, so users can select tooltip text. {\"This is not clear enough\"} Variants Placement {\"I will show you on the right\"} Rich content in tooltip dialog Tooltip content can be formatted using HTML, but cannot contain interactive elements (hyperlinks, buttons, ...). Interactive elements are not allowed because the tooltip dialog never receives focus and therefore would not be operable by keyboard users. <p>This is already done.</p> } > {\"This is not clear enough\"} <p> This is a tooltip that can display not only text, but also text with an image. </p> </> } > {\"Tooltip with an image\"} Trigger element In order to make triggers operable by keyboard, the trigger element must be focusable. It's OK to place tooltips on hyperlinks, buttons and other interactvie elements. Non-interactive elements must receive tabindex=\"0\" to make them focusable. Always test your custom triggers with screenreaders. Info Tooltip Look here for more information Tooltip No wrap data-tooltip-keep-with-text is for InfoTooltip component to be auto wrapped with last word in the text. Iterates through previous sibling of trigger element with attribute data-tooltip-trigger. Next, it finds all text and slice last word. Then puts previous sibling and tirgger button into span wrapper with classname text-nowrap. It will not work if sibling text is wrapped in another element. E.g. <b />. <h2 className=\"bold\">How it works?</h2> <p className=\"h5\"> {\" \"} {+ 1 tematický balík v&nbsp;cene + 1 tematický balík v&nbsp;cene} {Z ponuky 3 tematických balíkov si vyberte 1 kus, ktorý máte v cene paušálu TV Veľká.} </p> Methods Accessibility The tooltip component is implemented by the incomplete WAI-ARIA authoring practice and Heydon Pickering's tooltip component. Notes: - The tooltip trigger element uses aria-owns attribute to help NVDA speak the description text. - Tooltips with triggers of presentaion role do not announce dialog content in some screenreaders. API React Props | Name | Type | Default | Description | | --------------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | dialog | React.ReactNode | - | Tooltip dialog content. | | id | string | - | Tooltip ID. | | placement | TooltipPlacement | \"top\" | Preferred placement, if there is enough room. Options: \"auto\", \"top\", \"top-start\", \"top-end\", \"bottom\", \"bottom-start\", \"bottom-end\", \"right\", \"right-start\", \"right-end\", \"left\", \"left-start\", \"left-end\". | | renderTrigger | (props) => React.ReactNode | - | Custom trigger renderer. Passes required aria attributes and children in an object as argument. | | renderDialog | (props) => React.ReactNode | - | Custom dialog renderer. Passes required attributes in an object as argument. | | children | React.ReactNode | - | Trigger element content. | JS module reference Default Config | Property | Type | Default | Description | | ----------------------- | --------------- | ------------------ | ---------------------------------------------------------------- | | rootContainerSelector | string | \"#root-tooltips\" | Selector for the root container where tooltips will be appended. | | removeDialogOnDestroy | boolean | false | Whether to remove the dialog element from DOM on destroy. | | popperOptions | PopperOptions | See below | Popper.js configuration options. | Default Popper Options - placement: \"bottom\" - Initial placement of the tooltip - strategy: \"absolute\" - Positioning strategy - modifiers: Array of Popper.js modifiers including arrow, eventListeners, flip, and offset Methods | Method | Description | | ----------------- | ------------------------------------------------------------- | | show() | Shows the tooltip. | | hide() | Hides the tooltip. | | update() | Forces a popper update to recalculate position. | | destroy() | Removes event listeners and cleans up the tooltip instance. | | getInstance(el) | Static method to get the Tooltip instance from a DOM element. |"