Deploy preview for PR 16 🛫

Author: HerrTopi

pr-preview/pr-16/docs/v11_6/markdown-and-sources-data.json

@@ -43,16 +43,16 @@
 - [CheckboxGroup](https://instructure.design/markdowns/CheckboxGroup.md): Groups multiple Checkbox components with shared name and value management. Supports vertical or horizontal layouts, toggle variants, and group-level disabled/readonly states. Handles validation messages and maintains consistent state across all checkboxes.
 - [ColorContrast](https://instructure.design/markdowns/ColorContrast.md): WCAG 2.1 compliance tool that calculates and displays contrast ratios between two colors. Validates against normal text (4.5:1), large text (3:1), and graphics (3:1) standards. Provides pass/fail indicators and supports AA/AAA validation levels.
 - [ColorIndicator](https://instructure.design/markdowns/ColorIndicator.md): Displays color swatches with checkerboard background for transparency visualization. Supports circle and rectangle shapes, various color formats (hex, RGB, HSL, HWB), and can be used within buttons for color selection interfaces.
-- [ColorPicker](https://instructure.design/markdowns/ColorPicker.md): Versatile color selection component with hex input validation and optional popover color mixer. Supports controlled/uncontrolled operation, contrast checking, alpha transparency, and custom popover content. Includes comprehensive error messaging and accessibility features.
 - [ColorMixer](https://instructure.design/markdowns/ColorMixer.md): Interactive color selection component with RGBA input fields, color sliders, and visual palette. Supports alpha transparency, keyboard navigation for accessibility, and can be disabled. Provides real-time color feedback and value changes.
+- [ColorPicker](https://instructure.design/markdowns/ColorPicker.md): Versatile color selection component with hex input validation and optional popover color mixer. Supports controlled/uncontrolled operation, contrast checking, alpha transparency, and custom popover content. Includes comprehensive error messaging and accessibility features.
 - [ColorPreset](https://instructure.design/markdowns/ColorPreset.md): Color selection from predefined palettes with support for adding/removing colors. Includes visual color indicators, screen reader labels, and optional color mixer integration for custom color creation. Handles color management and selection callbacks.
 - [DateInput](https://instructure.design/markdowns/DateInput.md): A date input component with a calendar picker (uses Moment.js). Supports disabled dates, validation, and formatted display. Note: Being deprecated in favor of DateInput2 for better UX and accessibility.
 - [DateInput2](https://instructure.design/markdowns/DateInput2.md): An improved date input with easier configuration, better accessibility, and a year picker. Supports custom date parsing, timezone handling, validation, and disabled dates. Recommended over the original DateInput.
 - [DateTimeInput](https://instructure.design/markdowns/DateTimeInput.md): Combines DateInput and TimeSelect for entering date-time values. Supports localization, validation, disabled dates, and layout options (stacked or columns). Includes reset functionality and context-aware formatting.
 - [DrawerLayout](https://instructure.design/markdowns/DrawerLayout.md): A responsive layout component with a collapsible tray and content area. Tray can be placed at start or end and switches to overlay on small screens. Supports nested layouts and accessibility features.
 - [Drilldown](https://instructure.design/markdowns/Drilldown.md): A hierarchical navigation component for tree structures. Supports pages, groups, selectable options, and in-place editing. Replaces flyout menus and TreeBrowser for better responsiveness and accessibility.
-- [InPlaceEdit](https://instructure.design/markdowns/InPlaceEdit.md): Enables inline editing of content with smooth transitions between view and edit modes. Provides controlled component pattern for mode management, custom renderers for viewer/editor components, and support for various layouts and read-only states.
 - [Editable](https://instructure.design/markdowns/Editable.md): Enables in-place editing of content. Manages state and transitions between view and edit modes. Provides render props for custom UI implementation. Used by InPlaceEdit.
+- [InPlaceEdit](https://instructure.design/markdowns/InPlaceEdit.md): Enables inline editing of content with smooth transitions between view and edit modes. Provides controlled component pattern for mode management, custom renderers for viewer/editor components, and support for various layouts and read-only states.
 - [FileDrop](https://instructure.design/markdowns/FileDrop.md): A drag-and-drop file upload component with browse functionality. Supports file type validation via MIME types/extensions, multiple file uploads, and visual feedback for accepted/rejected files. Includes accessibility features and customizable rendering for labels and error messages.
 - [Flex](https://instructure.design/markdowns/Flex.md): A flexbox-based layout component for creating responsive multi-column designs. Supports directional layouts, gap control, item sizing (grow/shrink), alignment, and overflow handling. Includes visual debugging tools and common layout patterns like header-button combinations.
 - [FormField](https://instructure.design/markdowns/FormField.md): A foundational component for building form inputs with consistent styling and layout. Supports stacked and inline layouts, validation messages, and accessibility features. Typically used internally by other form components rather than directly.
@@ -86,8 +86,8 @@
 - [SimpleSelect](https://instructure.design/markdowns/SimpleSelect.md): Simplified Select component mimicking native `<select>` behavior. Supports uncontrolled/controlled usage, option groups, and icons. Less configurable than Select but easier to implement.
 - [SourceCodeEditor](https://instructure.design/markdowns/SourceCodeEditor.md): Wrapper around CodeMirror with syntax highlighting, line numbers, folding, indentation, search, and RTL support. Recommended upgrade from deprecated CodeEditor component.
 - [Spinner](https://instructure.design/markdowns/Spinner.md): Loading indicator with four sizes, inverse variant for dark backgrounds, configurable delay, and screen reader support via renderTitle prop.
-- [Tabs](https://instructure.design/markdowns/Tabs.md): Accessible tabbed navigation component with support for secondary variants, overflow handling, size control, dynamic content, and tab persistence. Supports disabled tabs and controlled/uncontrolled usage patterns.
 - [Table](https://instructure.design/markdowns/Table.md): A versatile table component supporting multiple layouts (auto, fixed, stacked), column customization, sorting, selection, pagination, and responsive behavior. Includes accessibility features and supports custom components for advanced use cases.
+- [Tabs](https://instructure.design/markdowns/Tabs.md): Accessible tabbed navigation component with support for secondary variants, overflow handling, size control, dynamic content, and tab persistence. Supports disabled tabs and controlled/uncontrolled usage patterns.
 - [Tag](https://instructure.design/markdowns/Tag.md): Compact component for representing categories or groups, featuring dismissible functionality, multiple sizes, inline variants, and accessibility support. Ideal for form elements and filtering interfaces.
 - [Text](https://instructure.design/markdowns/Text.md): Comprehensive text styling component with semantic variants, color options, font properties, line heights, text transformation, and wrapping controls. Replaces deprecated legacy values with semantic alternatives.
 - [TextArea](https://instructure.design/markdowns/TextArea.md): Resizable textarea input with height constraints, validation messages, disabled states, and inline display options. Supports controlled/uncontrolled usage and includes accessibility guidelines.

pr-preview/pr-16/docs/v11_7/markdown-and-sources-data.json

@@ -43,16 +43,16 @@
 - [CheckboxGroup](./CheckboxGroup.md): Groups multiple Checkbox components with shared name and value management. Supports vertical or horizontal layouts, toggle variants, and group-level disabled/readonly states. Handles validation messages and maintains consistent state across all checkboxes.
 - [ColorContrast](./ColorContrast.md): WCAG 2.1 compliance tool that calculates and displays contrast ratios between two colors. Validates against normal text (4.5:1), large text (3:1), and graphics (3:1) standards. Provides pass/fail indicators and supports AA/AAA validation levels.
 - [ColorIndicator](./ColorIndicator.md): Displays color swatches with checkerboard background for transparency visualization. Supports circle and rectangle shapes, various color formats (hex, RGB, HSL, HWB), and can be used within buttons for color selection interfaces.
-- [ColorPicker](./ColorPicker.md): Versatile color selection component with hex input validation and optional popover color mixer. Supports controlled/uncontrolled operation, contrast checking, alpha transparency, and custom popover content. Includes comprehensive error messaging and accessibility features.
 - [ColorMixer](./ColorMixer.md): Interactive color selection component with RGBA input fields, color sliders, and visual palette. Supports alpha transparency, keyboard navigation for accessibility, and can be disabled. Provides real-time color feedback and value changes.
+- [ColorPicker](./ColorPicker.md): Versatile color selection component with hex input validation and optional popover color mixer. Supports controlled/uncontrolled operation, contrast checking, alpha transparency, and custom popover content. Includes comprehensive error messaging and accessibility features.
 - [ColorPreset](./ColorPreset.md): Color selection from predefined palettes with support for adding/removing colors. Includes visual color indicators, screen reader labels, and optional color mixer integration for custom color creation. Handles color management and selection callbacks.
 - [DateInput](./DateInput.md): A date input component with a calendar picker (uses Moment.js). Supports disabled dates, validation, and formatted display. Note: Being deprecated in favor of DateInput2 for better UX and accessibility.
 - [DateInput2](./DateInput2.md): An improved date input with easier configuration, better accessibility, and a year picker. Supports custom date parsing, timezone handling, validation, and disabled dates. Recommended over the original DateInput.
 - [DateTimeInput](./DateTimeInput.md): Combines DateInput and TimeSelect for entering date-time values. Supports localization, validation, disabled dates, and layout options (stacked or columns). Includes reset functionality and context-aware formatting.
 - [DrawerLayout](./DrawerLayout.md): A responsive layout component with a collapsible tray and content area. Tray can be placed at start or end and switches to overlay on small screens. Supports nested layouts and accessibility features.
 - [Drilldown](./Drilldown.md): A hierarchical navigation component for tree structures. Supports pages, groups, selectable options, and in-place editing. Replaces flyout menus and TreeBrowser for better responsiveness and accessibility.
-- [InPlaceEdit](./InPlaceEdit.md): Enables inline editing of content with smooth transitions between view and edit modes. Provides controlled component pattern for mode management, custom renderers for viewer/editor components, and support for various layouts and read-only states.
 - [Editable](./Editable.md): Enables in-place editing of content. Manages state and transitions between view and edit modes. Provides render props for custom UI implementation. Used by InPlaceEdit.
+- [InPlaceEdit](./InPlaceEdit.md): Enables inline editing of content with smooth transitions between view and edit modes. Provides controlled component pattern for mode management, custom renderers for viewer/editor components, and support for various layouts and read-only states.
 - [FileDrop](./FileDrop.md): A drag-and-drop file upload component with browse functionality. Supports file type validation via MIME types/extensions, multiple file uploads, and visual feedback for accepted/rejected files. Includes accessibility features and customizable rendering for labels and error messages.
 - [Flex](./Flex.md): A flexbox-based layout component for creating responsive multi-column designs. Supports directional layouts, gap control, item sizing (grow/shrink), alignment, and overflow handling. Includes visual debugging tools and common layout patterns like header-button combinations.
 - [FormField](./FormField.md): A foundational component for building form inputs with consistent styling and layout. Supports stacked and inline layouts, validation messages, and accessibility features. Typically used internally by other form components rather than directly.
@@ -86,8 +86,8 @@
 - [SimpleSelect](./SimpleSelect.md): Simplified Select component mimicking native `<select>` behavior. Supports uncontrolled/controlled usage, option groups, and icons. Less configurable than Select but easier to implement.
 - [SourceCodeEditor](./SourceCodeEditor.md): Wrapper around CodeMirror with syntax highlighting, line numbers, folding, indentation, search, and RTL support. Recommended upgrade from deprecated CodeEditor component.
 - [Spinner](./Spinner.md): Loading indicator with four sizes, inverse variant for dark backgrounds, configurable delay, and screen reader support via renderTitle prop.
-- [Tabs](./Tabs.md): Accessible tabbed navigation component with support for secondary variants, overflow handling, size control, dynamic content, and tab persistence. Supports disabled tabs and controlled/uncontrolled usage patterns.
 - [Table](./Table.md): A versatile table component supporting multiple layouts (auto, fixed, stacked), column customization, sorting, selection, pagination, and responsive behavior. Includes accessibility features and supports custom components for advanced use cases.
+- [Tabs](./Tabs.md): Accessible tabbed navigation component with support for secondary variants, overflow handling, size control, dynamic content, and tab persistence. Supports disabled tabs and controlled/uncontrolled usage patterns.
 - [Tag](./Tag.md): Compact component for representing categories or groups, featuring dismissible functionality, multiple sizes, inline variants, and accessibility support. Ideal for form elements and filtering interfaces.
 - [Text](./Text.md): Comprehensive text styling component with semantic variants, color options, font properties, line heights, text transformation, and wrapping controls. Replaces deprecated legacy values with semantic alternatives.
 - [TextArea](./TextArea.md): Resizable textarea input with height constraints, validation messages, disabled states, and inline display options. Supports controlled/uncontrolled usage and includes accessibility guidelines.