@orangesk/orange-design-system 2.0.0-beta.47 → 2.0.0-beta.48

package/build/search-index.json

@@ -93,7 +93,7 @@
   },
   {
     "href": "/components/forms/addons",
-    "content": "Search Icon Add search icon to TextInput using searchIcon=\"transient\". For Autocomplete, use .input--search-icon through autocompleteConfig.customInputClassName. Icon is visible when element is not focused and doesn't have value. It's required to set empty placeholder. Usage with placeholder is described in the example below. Does not apply for radios and checkboxes. <br /> <br /> <br /> Search icon with placeholder When displaying search icon on TextInput with placeholder, use searchIcon=\"persistent\". For Autocomplete, set .input--search-icon-with-placeholder through autocompleteConfig.customInputClassName. Does not apply for radios and checkboxes. Usage with Autocomplete Usage with TextInput Regular input Large input Control Group Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes. Example Variants With Button Ok } control={{ type: \"text\", id: \"group-2\" }} /> Size kg</span>, Send]} control={{ type: \"text\", size: \"large\", id: \"group-3\" }} />"
+    "content": "Search Icon Add search icon to TextInput using searchIcon=\"transient\". For Autocomplete, use .input--search-icon through autocompleteConfig.customInputClassName. Icon is visible in default, focused, filled, disabled and invalid states. It's required to set empty placeholder. Usage with placeholder is described in the example below. Does not apply for radios and checkboxes. <br /> <br /> <br /> Search icon with placeholder When displaying search icon on TextInput with placeholder, use searchIcon=\"persistent\". For Autocomplete, set .input--search-icon-with-placeholder through autocompleteConfig.customInputClassName. Autocomplete with placeholder search icon includes a clear button when it has value. Does not apply for radios and checkboxes. Usage with Autocomplete Disabled autocomplete Usage with Group button Action} control={{ type: \"autocomplete\", id: \"search-group-button\", options: [\"\", \"apple\", \"apricot\", \"banana\"], autocompleteConfig: { customInputClassName: \"input--search-icon-with-placeholder\", placeholder: \"Placeholder text\", }, placeholder: \"\", }} /> Disabled group button Action } control={{ type: \"autocomplete\", id: \"search-group-button-disabled\", options: [\"\", \"apple\", \"apricot\", \"banana\"], autocompleteConfig: { customInputClassName: \"input--search-icon-with-placeholder\", placeholder: \"Placeholder text\", }, placeholder: \"\", isDisabled: true, }} /> Usage with TextInput Regular input Large input Control Group Add prefixes and suffixes to control elements. Does not apply for radios and checkboxes. Example Variants With Button Ok } control={{ type: \"text\", id: \"group-2\" }} /> Size kg</span>, Send]} control={{ type: \"text\", size: \"large\", id: \"group-3\" }} />"
   },
   {
     "href": "/components/forms/autocomplete",
@@ -261,7 +261,7 @@
   },
   {
     "href": "/components/tag",
-    "content": "Tag Tags are small, compact components used to categorize, label, or filter content. They help users quickly identify and organize information. Basic Usage Default Tag Colors Tags support various color variants to convey different meanings or match your design system. <ul className=\"list-unstyled\"> <li> default </li> <li> {\"orange\"} </li> <li> {\"black\"} </li> <li> {\"yellow\"} </li> <li> {\"green\"} </li> <li> {\"blue\"} </li> <li> {\"success\"} </li> <li> {\"danger\"} </li> <li> {\"info\"} </li> <li> {\"warning\"} </li> </ul> Transparent color variant The transparent variant is a standalone color variant and cannot be applied to other color variants. This means not all colored Tags can be made transparent. <ul className=\"list-unstyled\"> <li> {\"transparent\"} </li> </ul> Sizes Tags come in different sizes to fit various use cases. <ul className=\"list-unstyled\"> <li> {\"Small Tag\"} </li> <li> Default Tag </li> <li> {\"Large Tag\"} </li> </ul> Interactive Tags Tags can be interactive in different ways: as clickable buttons or as navigational links. Clickable Tags Link Tags Tags can function as links by providing an href prop, rendering as anchor elements for navigation. Link to Button Component {\"External Link\"} {\"Large Link Tag\"} Transparent Interactive Tags Examples with transparent color variant for both clickable and link functionality: Tags with Action Buttons Tags can include action buttons (like close/remove buttons) for more complex interactions. }> {\"Label with Action\"} }> {\"Label with Action\"} }> {\"Label with Action\"} Accessibility - Tags should have clear, descriptive text that conveys their purpose - Interactive tags (both clickable and link tags) must be keyboard accessible and provide appropriate focus states - When using color to convey meaning, ensure sufficient color contrast ratios - Action buttons within tags should have appropriate aria-labels for screen readers - Disabled tags should be properly indicated to assistive technologies - Link tags should have descriptive text or additional context for screen readers when the link purpose isn't clear from the text alone - External links should indicate they open in a new window/tab when applicable 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. | | isDisabled | boolean | false | Whether the tag is disabled. | | className | string | - | Additional CSS classes. | | children | React.ReactNode | - | Tag content. | | actionButton | React.ReactElement | - | Action button (close/remove button) within the tag. | | onClick | React.MouseEventHandler | - | Click handler (makes tag render as button). | | href | string | - | URL (makes tag render as link). |"
+    "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>. |"
   },
   {
     "href": "/components/testimonial",
@@ -269,7 +269,7 @@
   },
   {
     "href": "/components/tile",
-    "content": "Tile Tile fills container and allows us to set background image, icon or to align children. Used mostly in Carousel or Grid components. Basic Usage <h3 className=\"h5 bold\">Basic Tile</h3> <p>This is a basic tile with content.</p> With Block Actions Tiles work well with Block Actions to create clickable card-like interfaces. Use the hasBorderOnHover prop to add a border to the tile on hover. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Paušály\"} ), )} Vertical Alignment Tiles support different vertical alignment options with vAlign prop. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Faktúry a platby\"} ), )} Action Variant Tiles can use the action variant for simple interactive elements. {[\"device-tablet\", \"device-tv\", \"device-smart-phone\", \"device-tablet\"].map( (icon, index) => ( {\"Ostatné možnosti dobitia\"} ), )} Colors Tiles support various background colors using global surface and background utility classes. These colors work consistently across the design system. <h3 className=\"h5 bold\">Default</h3> <p>No background color applied</p> <h3 className=\"h5 bold\">Surface Primary</h3> <p>White surface color</p> <h3 className=\"h5 bold\">Surface Subtle</h3> <p>Subtle gray surface</p> <h3 className=\"h5 bold\">Surface Contrast</h3> <p>Dark background with white text</p> Background Images Tiles can display background images with content overlaid. Use the backgroundImage prop with variant=\"image\". <h3 className=\"bold\">Background Image</h3> <p> {Volajte doma aj v zahraničí s paušálom aj bez viazanosti presne tak, ako to potrebujete.} </p> <h3 className=\"bold\">Telefóny a zariadenia</h3> <h3 className=\"bold\">Výhodné balíčky</h3> <p> {Internet, TV a paušál dokopy vám poskytnú skvelé výhody pre celú rodinu s balíkmi Love.} </p> Content Alignment Content within tiles can be aligned using hAlign and vAlign props for flexible positioning. {\"Default \"} <br /> {\" (left)\"} Center vertical Center horizontal End <p>Space</p> <p>between</p> {\"Center center alignment\"} <p>Center</p> <p>space-between</p> With Block Actions and Overrides Complex tiles can include primary actions and override buttons for more sophisticated interactions. <h3 className=\"bold\"> {\"Block heading\"} </h3> <p>Lorem Ipsum</p> Override button Usage Tiles are versatile containers that work well in: - Product grids and carousels - Feature showcases with icons - Navigation cards - Image galleries with overlaid content - Interactive dashboards When using tiles with Block Actions, ensure that the primary action (BlockActionControl) is clearly indicated and any override actions (BlockActionOverride) don't conflict with the main interaction. API React Props | Name | Type | Default | Description | | ----------------- | -------------------------------------- | ------- | ----------------------------------------------------------------------------------- | | color | TileColor | - | Tile color. Options: \"surface-primary\", \"surface-subtle\", \"surface-contrast\". | | hAlign | \"center\" | - | Horizontal alignment of the tile content. | | vAlign | \"center\" \\| \"end\" \\| \"space-between\" | - | Vertical alignment of the tile content. | | variant | \"image\" \\| \"action\" | - | Tile variant. | | backgroundImage | React.ComponentProps<typeof Image> | - | Alt and src attributes are required. | | space | \"small\" | - | Use small spacing. | | 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 ))} 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. |"
   },
   {
     "href": "/components/tooltip",
@@ -389,7 +389,7 @@
   },
   {
     "href": "/utilities/color",
-    "content": "import Code from \"@/components/Code\"; Color Utilities Utility classes for applying colors based on our semantic design tokens. These classes automatically adapt to light and dark themes. 📖 For complete color system documentation, including theme switching and color philosophy, see our Color Palette & Theme System guide. ⚠️ Always check that your color combinations meet WCAG accessibility guidelines. Token-Based Utility Classes Our color utilities are automatically generated from semantic design tokens. Every class supports both light and dark themes through our .is-light and .is-dark system. Theme Switching Examples All color utilities work with our .is-light and .is-dark theme classes: <div className=\"is-light background-primary text-default p-4 border border-subtle rounded mb-4\"> <h4 className=\"bold\">Light Theme Section</h4> <p className=\"text-secondary\">Secondary text in light theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> <div className=\"is-dark background-primary text-default p-4 border border-subtle rounded\"> <h4 className=\"bold\">Dark Theme Section</h4> <p className=\"text-secondary\">Secondary text in dark theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> Text Color Utilities Use these classes to apply text colors: - .text-default - Default text color (black in light mode, white in dark mode) - .text-secondary - Secondary text color for less prominent content - .text-disabled - Disabled text color - .text-inverse - Inverse text color (white in light mode, black in dark mode) - .text-accent - Brand accent color (orange) - .text-information - Information/blue text - .text-positive - Success/green text - .text-warning - Warning/yellow text - .text-negative - Error/red text <p className=\"text-default\">Default text color</p> <p className=\"text-secondary\">Secondary text color</p> <p className=\"text-disabled\">Disabled text color</p> <p className=\"background-contrast text-inverse\"> {\"Inverse text color on dark background\"} </p> <p className=\"text-accent\">Accent text color</p> <p className=\"text-information\">Information text color</p> <p className=\"text-positive\">Success text color</p> <p className=\"text-warning\">Warning text color</p> <p className=\"text-negative\">Error text color</p> Icon Color Utilities Use these classes to apply colors to icons: - .icon-default - Default icon color - .icon-inverse - Inverse icon color - .icon-brand - Brand orange color - .icon-accent - Accent color variation - .icon-disabled - Disabled icon color - .icon-information - Information/blue color - .icon-positive - Success/green color - .icon-warning - Warning/yellow color - .icon-negative - Error/red color <span className=\"icon-default\"> </span> <span className=\"icon-inverse\"> </span> <span className=\"icon-brand\"> </span> <span className=\"icon-information\"> </span> <span className=\"icon-positive\"> </span> <span className=\"icon-warning\"> </span> <span className=\"icon-negative\"> </span> Background Utilities Primary Backgrounds - .background-primary - Primary background (white in light mode, dark in dark mode) - .background-secondary - Secondary background for subtle contrast - .background-contrast - High contrast background - .background-accent - Accent background for special content - .background-accent1-blog - Blog accent 1 background - .background-accent2-blog - Blog accent 2 background <p className=\"background-primary\">Primary background</p> <p className=\"background-secondary\">Secondary background</p> <p className=\"background-contrast text-inverse\">Contrast background</p> <p className=\"background-accent\">Accent background</p> <p className=\"background-accent1-blog\">Accent 1 Blog background</p> <p className=\"background-accent2-blog\">Accent 2 Blog background</p> Surface Utilities - .surface-primary - Primary surface - .surface-secondary - Brand orange surface - .surface-tertiary - Dark orange surface - .surface-subtle - Subtle surface for grouping - .surface-moderate - Moderate surface - .surface-contrast - High contrast surface - .surface-accent - Accent surface <p className=\"surface-primary\">Primary surface</p> <p className=\"surface-secondary text-inverse\">Secondary surface</p> <p className=\"surface-tertiary text-inverse\">Tertiary surface</p> <p className=\"surface-subtle\">Subtle surface</p> <p className=\"surface-moderate\">Moderate surface</p> <p className=\"surface-contrast text-inverse\">Contrast surface</p> <p className=\"surface-accent\">Accent surface</p> Fill Utilities - .fill-primary - Primary fill color - .fill-secondary - Secondary fill color (brand orange) - .fill-tertiary - Tertiary fill color (dark orange) - .fill-subtle - Subtle fill color - .fill-moderate - Moderate fill color - .fill-disabled - Disabled fill color - .fill-contrast - Contrast fill color - .fill-accent1 - Blue accent fill - .fill-accent2 - Green accent fill - .fill-accent3 - Pink accent fill - .fill-accent4 - Violet accent fill - .fill-accent5 - Yellow accent fill - .fill-information - Information background - .fill-positive - Success background - .fill-warning - Warning background - .fill-negative - Error background <p className=\"fill-primary\">Primary fill</p> <p className=\"fill-secondary text-inverse\">Secondary fill</p> <p className=\"fill-tertiary text-inverse\">Tertiary fill</p> <p className=\"fill-subtle\">Subtle fill</p> <p className=\"fill-moderate\">Moderate fill</p> <p className=\"fill-disabled\">Disabled fill</p> <p className=\"fill-contrast text-inverse\">Contrast fill</p> <p className=\"fill-accent1 text-inverse\">Blue accent fill</p> <p className=\"fill-accent2 text-inverse\">Green accent fill</p> <p className=\"fill-accent3 text-inverse\">Pink accent fill</p> <p className=\"fill-accent4 text-inverse\">Violet accent fill</p> <p className=\"fill-accent5 text-inverse\">Yellow accent fill</p> <p className=\"fill-information\">Information background</p> <p className=\"fill-positive\">Success background</p> <p className=\"fill-warning\">Warning background</p> <p className=\"fill-negative\">Error background</p> Border Utilities Use these classes to apply border colors: - .border-subtle - Subtle border - .border-strong - Strong border - .border-contrast - High contrast border - .border-accent - Brand accent border - .border-information - Information border - .border-positive - Success border - .border-warning - Warning border - .border-negative - Error border <div className=\"border border-subtle p-4 mb-small\">Subtle border</div> <div className=\"border border-strong p-4 mb-small\">Strong border</div> <div className=\"border border-contrast p-4 mb-small\">Contrast border</div> <div className=\"border border-accent p-4 mb-small\">Accent border</div> <div className=\"border border-information p-4 mb-small\"> Information border </div> <div className=\"border border-positive p-4 mb-small\">Success border</div> <div className=\"border border-warning p-4 mb-small\">Warning border</div> <div className=\"border border-negative p-4\">Error border</div> Legacy Classes (Deprecated) ⚠️ These classes are deprecated and will be removed in future versions. Please use the new token-based classes above. Legacy Text Colors These classes still work but will show deprecation warnings: .color-black → Use .text-default <p>Default text color is black</p> <p className=\"color-black\"> {\"But can be enforced with \"} <code>.color-black</code> {\" if needed. (Deprecated - use .text-default)\"} </p> .color-orange → Use .text-accent <p className=\"color-orange large bold\"> {\"Orange text (Deprecated - use .text-accent)\"} </p> .color-white → Use .text-inverse <p className=\"bg-black color-white\"> {\"White text (Deprecated - use .text-inverse)\"} </p> .color-gray → Use .text-secondary <p className=\"color-gray\">Gray text (Deprecated - use .text-secondary)</p> .color-blue → Use .icon-information <p className=\"color-blue\">Blue text (Deprecated - use .icon-information)</p> .color-danger → Use .icon-negative <p className=\"color-danger\">Danger text (Deprecated - use .icon-negative)</p> Legacy Background Colors These classes still work but will show deprecation warnings: .bg-white → Use .background-primary <p className=\"bg-white\"> {\"Default background (Deprecated - use .background-primary)\"} </p> .bg-black → Use .background-contrast <p className=\"bg-black\"> {\"Black background (Deprecated - use .background-contrast)\"} </p> .bg-orange → Use .surface-secondary <p className=\"bg-orange\"> {\"Orange background (Deprecated - use .surface-secondary)\"} </p> .bg-orange-dark → Use .surface-tertiary <p className=\"bg-orange-dark text-inverse\"> {\"Dark orange background (Deprecated - use .surface-tertiary)\"} </p> .bg-gray → Use .surface-subtle <p className=\"bg-gray\">Gray background (Deprecated - use .surface-subtle)</p> .bg-gray-lighter → Use .background-secondary <p className=\"bg-gray-lighter\"> {\"Light gray background (Deprecated - use .background-secondary)\"} </p> Accent Colors → Use .background- or .fill- <p className=\"bg-accent\"> {\"Accent background (Deprecated - use .background-accent)\"} </p> <p className=\"bg-accent1-blog\"> {\"Accent1 blog (Deprecated - use .background-accent1-blog)\"} </p> <p className=\"bg-accent2-blog\"> {\"Accent2 blog (Deprecated - use .background-accent2-blog)\"} </p> Supporting Colors → Use .fill-accent <p className=\"bg-blue\">Blue background (Deprecated - use .fill-accent1)</p> <p className=\"bg-green\">Green background (Deprecated - use .fill-accent2)</p> <p className=\"bg-pink\">Pink background (Deprecated - use .fill-accent3)</p> <p className=\"bg-violet\"> {\"Violet background (Deprecated - use .fill-accent4)\"} </p> <p className=\"bg-yellow\"> {\"Yellow background (Deprecated - use .fill-accent5)\"} </p> <p className=\"bg-red\">Red background (Deprecated - use .fill-negative)</p> Migration Guide When updating your code, use this mapping: Text Colors - .color-black → .text-default - .color-orange → .text-accent - .color-white → .text-inverse - .color-gray → .text-secondary - .color-blue → .icon-information - .color-danger → .icon-negative Background Colors - .bg-white → .background-primary - .bg-black → .background-contrast - .bg-orange → .surface-secondary - .bg-orange-dark → .surface-tertiary - .bg-gray → .surface-subtle - .bg-gray-lighter → .background-secondary - .bg-blue → .fill-accent1 - .bg-green → .fill-accent2 - .bg-pink → .fill-accent3 - .bg-violet → .fill-accent4 - .bg-yellow → .fill-accent5 - .bg-red → .fill-negative - .bg-accent → .background-accent - .bg-none → .background-none .bg-none → Use .background-none <p className=\"bg-none\">No background (Deprecated - use .background-none)</p> Special Utilities - .background-none - Removes background Best Practices 1. Use semantic names: Choose classes based on meaning rather than visual appearance 2. Consider theme compatibility: All token-based classes automatically adapt to light/dark themes 3. Test accessibility: Always verify color contrast meets WCAG guidelines 4. Migrate gradually: Legacy classes still work but show warnings to help with migration 5. Use border utilities: Apply consistent border colors using the new .border- classes 📖 For detailed guidance on theme switching, CSS variables, and color system architecture, see our Color Palette & Theme System documentation. Related Documentation - Color Palette & Theme System - Complete color system guide - Design Tokens - Token system overview - Accessibility - Color accessibility guidelines"
+    "content": "Color Utilities Utility classes for applying colors based on our semantic design tokens. These classes automatically adapt to light and dark themes. 📖 For complete color system documentation, including theme switching and color philosophy, see our Color Palette & Theme System guide. ⚠️ Always check that your color combinations meet WCAG accessibility guidelines. Token-Based Utility Classes Our color utilities are automatically generated from semantic design tokens. Every class supports both light and dark themes through our .is-light and .is-dark system. Theme Switching Examples All color utilities work with our .is-light and .is-dark theme classes: <div className=\"is-light background-primary text-default p-4 border border-subtle rounded mb-4\"> <h4 className=\"bold\">Light Theme Section</h4> <p className=\"text-secondary\">Secondary text in light theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> <div className=\"is-dark background-primary text-default p-4 border border-subtle rounded\"> <h4 className=\"bold\">Dark Theme Section</h4> <p className=\"text-secondary\">Secondary text in dark theme</p> <button className=\"surface-secondary text-inverse px-3 py-2 rounded\"> Orange Button </button> </div> Text Color Utilities Use these classes to apply text colors: - .text-default - Default text color (black in light mode, white in dark mode) - .text-secondary - Secondary text color for less prominent content - .text-disabled - Disabled text color - .text-inverse - Inverse text color (white in light mode, black in dark mode) - .text-accent - Brand accent color (orange) <p className=\"text-default\">Default text color</p> <p className=\"text-secondary\">Secondary text color</p> <p className=\"text-disabled\">Disabled text color</p> <p className=\"background-contrast text-inverse\"> {\"Inverse text color on dark background\"} </p> <p className=\"text-accent\">Accent text color</p> Icon Color Utilities Use these classes to apply colors to icons: - .icon-default - Default icon color - .icon-inverse - Inverse icon color - .icon-brand - Brand orange color - .icon-accent - Accent color variation - .icon-disabled - Disabled icon color - .icon-information - Information/blue color - .icon-positive - Success/green color - .icon-warning - Warning/yellow color - .icon-negative - Error/red color <span className=\"icon-default\"> </span> <span className=\"icon-inverse\"> </span> <span className=\"icon-brand\"> </span> <span className=\"icon-information\"> </span> <span className=\"icon-positive\"> </span> <span className=\"icon-warning\"> </span> <span className=\"icon-negative\"> </span> Background Utilities Primary Backgrounds - .background-primary - Primary background (white in light mode, dark in dark mode) - .background-secondary - Secondary background for subtle contrast - .background-contrast - High contrast background - .background-accent - Accent background for special content - .background-accent1-blog - Blog accent 1 background - .background-accent2-blog - Blog accent 2 background <p className=\"background-primary\">Primary background</p> <p className=\"background-secondary\">Secondary background</p> <p className=\"background-contrast text-inverse\">Contrast background</p> <p className=\"background-accent\">Accent background</p> <p className=\"background-accent1-blog\">Accent 1 Blog background</p> <p className=\"background-accent2-blog\">Accent 2 Blog background</p> Surface Utilities - .surface-primary - Primary surface - .surface-secondary - Brand orange surface - .surface-tertiary - Dark orange surface - .surface-subtle - Subtle surface for grouping - .surface-moderate - Moderate surface - .surface-contrast - High contrast surface - .surface-accent - Accent surface <p className=\"surface-primary\">Primary surface</p> <p className=\"surface-secondary text-inverse\">Secondary surface</p> <p className=\"surface-tertiary text-inverse\">Tertiary surface</p> <p className=\"surface-subtle\">Subtle surface</p> <p className=\"surface-moderate\">Moderate surface</p> <p className=\"surface-contrast text-inverse\">Contrast surface</p> <p className=\"surface-accent\">Accent surface</p> Fill Utilities - .fill-primary - Primary fill color - .fill-secondary - Secondary fill color (brand orange) - .fill-tertiary - Tertiary fill color (dark orange) - .fill-subtle - Subtle fill color - .fill-moderate - Moderate fill color - .fill-disabled - Disabled fill color - .fill-contrast - Contrast fill color - .fill-accent1 - Blue accent fill - .fill-accent2 - Green accent fill - .fill-accent3 - Pink accent fill - .fill-accent4 - Violet accent fill - .fill-accent5 - Yellow accent fill - .fill-information - Information background - .fill-positive - Success background - .fill-warning - Warning background - .fill-negative - Error background <p className=\"fill-primary\">Primary fill</p> <p className=\"fill-secondary text-inverse\">Secondary fill</p> <p className=\"fill-tertiary text-inverse\">Tertiary fill</p> <p className=\"fill-subtle\">Subtle fill</p> <p className=\"fill-moderate\">Moderate fill</p> <p className=\"fill-disabled\">Disabled fill</p> <p className=\"fill-contrast text-inverse\">Contrast fill</p> <p className=\"fill-accent1 text-inverse\">Blue accent fill</p> <p className=\"fill-accent2 text-inverse\">Green accent fill</p> <p className=\"fill-accent3 text-inverse\">Pink accent fill</p> <p className=\"fill-accent4 text-inverse\">Violet accent fill</p> <p className=\"fill-accent5 text-inverse\">Yellow accent fill</p> <p className=\"fill-information\">Information background</p> <p className=\"fill-positive\">Success background</p> <p className=\"fill-warning\">Warning background</p> <p className=\"fill-negative\">Error background</p> Border Utilities Use these classes to apply border colors: - .border-subtle - Subtle border - .border-strong - Strong border - .border-contrast - High contrast border - .border-accent - Brand accent border - .border-information - Information border - .border-positive - Success border - .border-warning - Warning border - .border-negative - Error border <div className=\"border border-subtle p-4 mb-small\">Subtle border</div> <div className=\"border border-strong p-4 mb-small\">Strong border</div> <div className=\"border border-contrast p-4 mb-small\">Contrast border</div> <div className=\"border border-accent p-4 mb-small\">Accent border</div> <div className=\"border border-information p-4 mb-small\"> Information border </div> <div className=\"border border-positive p-4 mb-small\">Success border</div> <div className=\"border border-warning p-4 mb-small\">Warning border</div> <div className=\"border border-negative p-4\">Error border</div> Special Utilities - .background-none - Removes background Best Practices 1. Use semantic names: Choose classes based on meaning rather than visual appearance 2. Consider theme compatibility: All token-based classes automatically adapt to light/dark themes 3. Test accessibility: Always verify color contrast meets WCAG guidelines 4. Use background-none: Remove background completely when you need transparent layout 5. Use border utilities: Apply consistent border colors using the new .border- classes 📖 For detailed guidance on theme switching, CSS variables, and color system architecture**, see our Color Palette & Theme System documentation. Related Documentation - Color Palette & Theme System - Complete color system guide - Design Tokens - Token system overview - Accessibility - Color accessibility guidelines"
   },
   {
     "href": "/utilities/flex-alignment",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.47",
+  "version": "2.0.0-beta.48",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -63,8 +63,8 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.2",
-    "html-react-parser": "6.1.0",
+    "dompurify": "^3.4.5",
+    "html-react-parser": "6.1.2",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
     "next": "16.2.6",
@@ -99,38 +99,38 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.60.3",
+    "@rollup/rollup-darwin-arm64": "^4.60.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.6.2",
-    "@types/react": "19.2.14",
+    "@types/node": "25.9.1",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
-    "@vitejs/plugin-react": "6.0.1",
-    "@vitest/browser": "^4.1.5",
-    "@vitest/browser-playwright": "^4.1.5",
-    "@vitest/coverage-v8": "^4.1.5",
-    "@vitest/ui": "^4.1.5",
+    "@vitejs/plugin-react": "6.0.2",
+    "@vitest/browser": "^4.1.7",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/ui": "^4.1.7",
     "canvas": "^3.2.3",
     "fs-extra": "^11.3.5",
     "glob": "13.0.6",
-    "html-validate": "10.16.0",
+    "html-validate": "11.2.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "29.1.1",
-    "lint-staged": "17.0.4",
-    "playwright": "^1.59.1",
+    "lint-staged": "17.0.5",
+    "playwright": "^1.60.0",
     "prettier": "^3.8.3",
-    "rollup": "^4.60.3",
+    "rollup": "^4.60.4",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.99.0",
+    "sass": "^1.100.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.7",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },

package/src/components/BlockAction/styles/style.scss

@@ -15,19 +15,21 @@
     &__indicator.is-indicating:not(.block-action__indicator--color-reset) {
       @include mixins.indicator;
 
-      .bg-white & {
+      .background-primary &,
+      .surface-primary & {
         @include mixins.indicator;
       }
 
-      .bg-black & {
+      .background-contrast &,
+      .surface-contrast & {
         @include mixins.indicator("black");
       }
 
-      .bg-orange & {
+      .surface-secondary & {
         @include mixins.indicator("orange");
       }
 
-      .bg-orange-dark & {
+      .surface-tertiary & {
         @include mixins.indicator("orange-dark");
       }
     }

package/src/components/Breadcrumbs/styles/style.scss

@@ -12,7 +12,8 @@
   .osk-breadcrumbs__item {
     @include mixins.item;
 
-    .bg-black &,
+    .background-contrast &,
+    .surface-contrast &,
     .is-dark & {
       @include mixins.item-dark;
     }

package/src/components/Carousel/Carousel.static.ts

@@ -31,6 +31,11 @@ import {
   SELECTOR_VIEWPORT,
 } from "./constants";
 
+interface ExternalControlsState {
+  isAtStart: boolean;
+  isAtEnd: boolean;
+}
+
 export const defaultConfig: SwiperOptions = {
   navigation: {
     nextEl: SELECTOR_NEXT,
@@ -94,6 +99,8 @@ export default class Carousel {
   track!: HTMLElement;
   instance!: Swiper;
   carouselId?: string;
+  private isScrollbarDragging = false;
+  private externalControlsState: ExternalControlsState | null = null;
   private resizeObserver?: ResizeObserver;
   private resizeRafId?: number;
   private boundWindowResizeHandler: () => void;
@@ -215,6 +222,13 @@ export default class Carousel {
         slideChangeTransitionEnd: () => {
           this.updateExternalControlsState();
         },
+        scrollbarDragStart: () => {
+          this.isScrollbarDragging = true;
+        },
+        scrollbarDragEnd: () => {
+          this.isScrollbarDragging = false;
+          this.updateExternalControlsState(true);
+        },
       },
     });
 
@@ -697,7 +711,7 @@ export default class Carousel {
    * Update the disabled state of external navigation controls.
    * Controls are disabled at the start/end of the carousel based on slide position.
    */
-  updateExternalControlsState() {
+  updateExternalControlsState(force = false) {
     if (!this.carouselId || !this.instance) {
       return;
     }
@@ -706,10 +720,22 @@ export default class Carousel {
       return;
     }
 
+    if (this.isScrollbarDragging && !force) {
+      return;
+    }
+
     const isDisabled = !this.instance.enabled;
     const isAtStart = isDisabled || this.instance.isBeginning;
     const isAtEnd = isDisabled || this.instance.isEnd;
 
+    this.externalControlsState = { isAtStart, isAtEnd };
+
+    this.applyExternalControlsState(this.externalControlsState);
+  }
+
+  private applyExternalControlsState(state: ExternalControlsState) {
+    const { isAtStart, isAtEnd } = state;
+
     const prevControls = document.querySelectorAll(
       `[data-carousel-controls="${this.carouselId}"][data-carousel-action="prev"]`,
     );
@@ -816,6 +842,8 @@ export default class Carousel {
       this.instance.destroy();
     }
 
+    this.isScrollbarDragging = false;
+    this.externalControlsState = null;
     this.resizeObserver?.disconnect();
     this.resizeObserver = undefined;
 

package/src/components/Carousel/tests/Carousel.static.test.jsx

@@ -283,6 +283,56 @@ describe("Carousel Static - External Controls", () => {
         expect(updateStatesSpy).toHaveBeenCalled();
       }
     });
+
+    it("should keep external controls disabled while scrollbar drag is active", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = true;
+
+      carouselInstance.updateExternalControlsState();
+
+      const nextButton = document.getElementById("next-btn");
+      expect(nextButton).toHaveAttribute("disabled", "true");
+
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+      const slideChange = swiperConfig?.on?.slideChange;
+      const scrollbarDragStart = swiperConfig?.on?.scrollbarDragStart;
+
+      scrollbarDragStart?.();
+
+      expect(nextButton).toHaveAttribute("disabled", "true");
+      expect(nextButton).toHaveAttribute("aria-disabled", "true");
+
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+
+      slideChange?.();
+
+      expect(nextButton).toHaveAttribute("disabled", "true");
+      expect(nextButton).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should sync external controls after scrollbar drag end", () => {
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = true;
+
+      carouselInstance.updateExternalControlsState();
+
+      const nextButton = document.getElementById("next-btn");
+      expect(nextButton).toHaveAttribute("disabled", "true");
+
+      const swiperConfig = Swiper.mock.calls[0]?.[1];
+      const scrollbarDragStart = swiperConfig?.on?.scrollbarDragStart;
+      const scrollbarDragEnd = swiperConfig?.on?.scrollbarDragEnd;
+
+      mockSwiperInstance.isBeginning = false;
+      mockSwiperInstance.isEnd = false;
+
+      scrollbarDragStart?.();
+      scrollbarDragEnd?.();
+
+      expect(nextButton).not.toHaveAttribute("disabled");
+      expect(nextButton).toHaveAttribute("aria-disabled", "false");
+    });
   });
 
   describe("Multiple Control Sets", () => {

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -381,7 +381,7 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
       >
         <Image src="/logo.svg" alt="logo" />
 
-        <div className={`${CLASS_ROOT}__search-container`}>
+        <div className="mb">
           <TextInput
             id="search-documentation"
             htmlType="search"
@@ -393,42 +393,29 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
             aria-label="Search documentation"
             ref={searchInputRef}
           />
-          {searchQuery && (
-            <button
-              type="button"
-              className={`${CLASS_ROOT}__search-clear`}
-              onClick={() => {
-                setSearchQuery("");
-                setSearchResults([]);
-              }}
-              aria-label="Clear search"
-            >
-              ✕
-            </button>
+
+          {searchResults.length > 0 && (
+            <div className={`${CLASS_ROOT}__search-results`}>
+              <ul className={`${CLASS_ROOT}__search-list`}>
+                {searchResults.map((result, index) => (
+                  <li key={result.id}>
+                    <Link
+                      href={result.href}
+                      className={cx(`${CLASS_ROOT}__search-result-link`, {
+                        [`${CLASS_ROOT}__search-result-link--active`]:
+                          index === activeSearchIndex,
+                      })}
+                      onClick={() => handleSelect(result.href)}
+                    >
+                      {result.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
           )}
         </div>
 
-        {searchResults.length > 0 && (
-          <div className={`${CLASS_ROOT}__search-results`}>
-            <ul className={`${CLASS_ROOT}__search-list`}>
-              {searchResults.map((result, index) => (
-                <li key={result.id}>
-                  <Link
-                    href={result.href}
-                    className={cx(`${CLASS_ROOT}__search-result-link`, {
-                      [`${CLASS_ROOT}__search-result-link--active`]:
-                        index === activeSearchIndex,
-                    })}
-                    onClick={() => handleSelect(result.href)}
-                  >
-                    {result.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-
         <nav
           className={`${CLASS_ROOT}__nav`}
           style={{ display: searchResults.length > 0 ? "none" : "block" }}

package/src/components/DocumentationSidebar/styles/style.scss

@@ -201,12 +201,6 @@
     padding-left: convert.to-rem(15px);
   }
 
-  // Search styles
-  &__search-container {
-    position: relative;
-    margin-bottom: 16px;
-  }
-
   &__search-clear {
     position: absolute;
     right: 8px;