documenter.test.ts.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Documenter definition for alert matches the snapshot: alert 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the user clicks the action button.
**Deprecated** Replaced by \`action\`.",
      "name": "onButtonClick",
    },
    {
      "cancelable": false,
      "description": "Fired when the user clicks the close icon that is displayed
when the \`dismissible\` property is set to \`true\`.",
      "name": "onDismiss",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the alert content.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Alert",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`i18nStrings.dismissAriaLabel\` instead.
If the label is assigned via the \`i18nStrings\` property, this label will be ignored.",
      "description": "Adds an aria-label to the dismiss button.",
      "i18nTag": true,
      "name": "dismissAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a close button to the alert when set to \`true\`.
An \`onDismiss\` event is fired when a user clicks the button.",
      "name": "dismissible",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "AlertProps.I18nStrings",
        "properties": [
          {
            "name": "dismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "infoIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "successIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "AlertProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use the label properties inside \`i18nStrings\` instead.
If the label is assigned via the \`i18nStrings\` property, this label will be ignored.",
      "description": "Provides a text alternative for the icon.",
      "name": "statusIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'info'",
      "description": "Specifies the type of message you want to display.",
      "inlineType": {
        "name": "AlertProps.Type",
        "type": "union",
        "values": [
          "success",
          "error",
          "warning",
          "info",
        ],
      },
      "name": "type",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "deprecatedTag": "Use conditional rendering in your code instead of this prop.",
      "description": "Determines whether the alert is displayed.",
      "name": "visible",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Specifies an action for the alert message.
Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.",
      "isDefault": false,
      "name": "action",
    },
    {
      "deprecatedTag": "Replaced by \`action\`.",
      "description": "Displays an action button next to the message area when set.
An \`onButtonClick\` event is fired when the user clicks it.",
      "isDefault": false,
      "name": "buttonText",
    },
    {
      "description": "Primary text displayed in the element.",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Heading text.",
      "isDefault": false,
      "name": "header",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for anchor-navigation matches the snapshot: anchor-navigation 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when an active anchor link changes.
Note: This event is triggered both by the component's internal scroll-spy logic,
or when the \`activeHref\` prop is manually updated.
",
      "detailInlineType": {
        "name": "AnchorNavigationProps.Anchor",
        "properties": [
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "info",
            "optional": true,
            "type": "string",
          },
          {
            "name": "level",
            "optional": false,
            "type": "number",
          },
          {
            "name": "text",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "AnchorNavigationProps.Anchor",
      "name": "onActiveHrefChange",
    },
    {
      "cancelable": true,
      "description": "Fired when an anchor link is clicked without any modifier keys.",
      "detailInlineType": {
        "name": "AnchorNavigationProps.Anchor",
        "properties": [
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "info",
            "optional": true,
            "type": "string",
          },
          {
            "name": "level",
            "optional": false,
            "type": "number",
          },
          {
            "name": "text",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "AnchorNavigationProps.Anchor",
      "name": "onFollow",
    },
  ],
  "functions": [],
  "name": "AnchorNavigation",
  "properties": [
    {
      "description": "Specifies the active anchor href. When set, the component will operate in a
controlled manner, and internal scroll-spy will be disabled.",
      "name": "activeHref",
      "optional": true,
      "type": "string",
    },
    {
      "description": "List of anchors. Each anchor object has the following properties:
* \`text\` (string) - The text for the anchor item.
* \`href\` (string) - The \`id\` attribute of the target HTML element that the anchor refers to.
For example: \`"#section1.1"\`
* \`level\` (number) - Level of nesting of the anchor.
* \`info\` (string | undefined) - Additional information to display next to the link, for example: "New" or "Updated".

Note: The list of anchors should be sorted in the order they appear on the page.
",
      "name": "anchors",
      "optional": false,
      "type": "Array<AnchorNavigationProps.Anchor>",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component.
Use this property for identifying the header or title that labels the anchor navigation.
To use it correctly, define an ID for the element either as label, and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "0",
      "description": "Specifies the height (in pixels) to be considered as an offset when activating anchors.
This is useful when you have a fixed or sticky header that might overlap with the content as you scroll.
Defaults to 0.
",
      "name": "scrollSpyOffset",
      "optional": true,
      "type": "number",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for annotation-context matches the snapshot: annotation-context 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the user exits the current tutorial.",
      "detailInlineType": {
        "name": "TutorialPanelProps.TutorialDetail",
        "properties": [
          {
            "name": "tutorial",
            "optional": false,
            "type": "TutorialPanelProps.Tutorial",
          },
        ],
        "type": "object",
      },
      "detailType": "TutorialPanelProps.TutorialDetail",
      "name": "onExitTutorial",
    },
    {
      "cancelable": false,
      "description": "Fired when the user clicks the "Finish" button on the last step of
the tutorial.",
      "detailType": "void",
      "name": "onFinish",
    },
    {
      "cancelable": false,
      "description": "Fired when the user selects a tutorial from the list.",
      "detailInlineType": {
        "name": "TutorialPanelProps.TutorialDetail",
        "properties": [
          {
            "name": "tutorial",
            "optional": false,
            "type": "TutorialPanelProps.Tutorial",
          },
        ],
        "type": "object",
      },
      "detailType": "TutorialPanelProps.TutorialDetail",
      "name": "onStartTutorial",
    },
    {
      "cancelable": false,
      "description": "This event is fired when a user clicks the "Next" or "Previous"
button on a popover, when the user clicks on a closed hotspot icon,
or when the AnnotationOverlay determines that the current hotspot
has disappeared from the page and a different one should be
selected (e.g. when navigating between pages).
Use the \`reason\` property of the event detail to determine why
this event was fired.
",
      "detailInlineType": {
        "name": "AnnotationContextProps.StepChangeDetail",
        "properties": [
          {
            "name": "reason",
            "optional": false,
            "type": ""auto-fallback" | "next" | "open" | "previous"",
          },
          {
            "name": "step",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "AnnotationContextProps.StepChangeDetail",
      "name": "onStepChange",
    },
  ],
  "functions": [],
  "name": "AnnotationContext",
  "properties": [
    {
      "description": "The currently launched tutorial. This should be the object received
in the \`detail\` property of the \`onStartTutorial\` event.",
      "name": "currentTutorial",
      "optional": false,
      "type": "AnnotationContextProps.Tutorial | null",
    },
    {
      "description": "An object containing all the necessary localized strings required by
the component.",
      "inlineType": {
        "name": "AnnotationContextProps.I18nStrings",
        "properties": [
          {
            "name": "finishButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "labelDismissAnnotation",
            "optional": false,
            "type": "string",
          },
          {
            "name": "labelHotspot",
            "optional": false,
            "type": "(openState: boolean, stepIndex: number, totalStepCount: number) => string",
          },
          {
            "name": "nextButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "previousButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "stepCounterText",
            "optional": false,
            "type": "(stepIndex: number, totalStepCount: number) => string",
          },
          {
            "name": "taskTitle",
            "optional": false,
            "type": "(taskIndex: number, taskTitle: string) => string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": false,
      "type": "AnnotationContextProps.I18nStrings",
    },
  ],
  "regions": [
    {
      "description": "Put all page content inside this component's children. This component
will provide a context which is used by the Hotspot elements throughout
the page.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for app-layout matches the snapshot: app-layout 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the active drawer is toggled.",
      "detailInlineType": {
        "name": "AppLayoutProps.DrawerChangeDetail",
        "properties": [
          {
            "name": "activeDrawerId",
            "optional": false,
            "type": "null | string",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.DrawerChangeDetail",
      "name": "onDrawerChange",
    },
    {
      "cancelable": false,
      "description": "Fired when the navigation drawer is toggled.",
      "detailInlineType": {
        "name": "AppLayoutProps.ChangeDetail",
        "properties": [
          {
            "name": "open",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.ChangeDetail",
      "name": "onNavigationChange",
    },
    {
      "cancelable": false,
      "description": "Fired when the split panel preferences change.",
      "detailInlineType": {
        "name": "AppLayoutProps.SplitPanelPreferences",
        "properties": [
          {
            "name": "position",
            "optional": false,
            "type": ""bottom" | "side"",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.SplitPanelPreferences",
      "name": "onSplitPanelPreferencesChange",
    },
    {
      "cancelable": false,
      "description": "Fired when the split panel is resized.",
      "detailInlineType": {
        "name": "AppLayoutProps.SplitPanelResizeDetail",
        "properties": [
          {
            "name": "size",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.SplitPanelResizeDetail",
      "name": "onSplitPanelResize",
    },
    {
      "cancelable": false,
      "description": "Fired when the split panel is toggled.",
      "detailInlineType": {
        "name": "AppLayoutProps.ChangeDetail",
        "properties": [
          {
            "name": "open",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.ChangeDetail",
      "name": "onSplitPanelToggle",
    },
    {
      "cancelable": false,
      "description": "Fired when the tools drawer is toggled.",
      "detailInlineType": {
        "name": "AppLayoutProps.ChangeDetail",
        "properties": [
          {
            "name": "open",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "AppLayoutProps.ChangeDetail",
      "name": "onToolsChange",
    },
  ],
  "functions": [
    {
      "description": "Manually closes the navigation drawer if it is necessary for the current
viewport size.",
      "name": "closeNavigationIfNecessary",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Focuses the active drawer. Use this to focus the active drawer after opening it programmatically.",
      "name": "focusActiveDrawer",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Focuses the split panel if it is open.",
      "name": "focusSplitPanel",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Focuses the tools panel if it is open. Use this to focus the tools panel
after changing the content, for example when clicking on an 'info' link while
the panel is already open.",
      "name": "focusToolsClose",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Opens the tools panel if it is not already open. Note that it is preferable
to control the state by listening to \`toolsChange\` and providing \`toolsOpen\`.",
      "name": "openTools",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "AppLayout",
  "properties": [
    {
      "description": "The active drawer id. If you want to clear the active drawer, use \`null\`.",
      "name": "activeDrawerId",
      "optional": true,
      "type": "null | string",
    },
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.
* \`flowType\` -  Identifies the type of flow represented by the component.
**Note:** This API is currently experimental.",
      "inlineType": {
        "name": "AppLayoutProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "flowType",
            "optional": true,
            "type": "FlowType",
          },
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "AppLayoutProps.AnalyticsMetadata",
    },
    {
      "description": "Aria labels for the drawer operating buttons. Use this property to ensure accessibility.
* \`navigation\` (string) - Label for the landmark that wraps the navigation drawer.
* \`navigationClose\` (string) - Label for the button that closes the navigation drawer.
* \`navigationToggle\` (string) - Label for the button that opens the navigation drawer.
* \`notification\` (string) - Label for the region that contains notification messages.
* \`tools\` (string) - Label for the landmark that wraps the tools drawer.
* \`toolsClose\` (string) - Label for the button that closes the tools drawer.
* \`toolsToggle\` (string) - Label for the button that opens the tools drawer.
* \`drawers\` (string) - Label for the landmark that wraps the active drawer.
* \`drawersOverflow\` (string) - Label for the ellipsis button with any overflow drawers.
* \`drawersOverflowWithBadge\` (string) - Label for the ellipsis button with any overflow drawers, with a badge.

Example:
\`\`\`
{
  navigation: "Navigation drawer",
  navigationClose: "Close navigation drawer",
  navigationToggle: "Open navigation drawer",
  notifications: "Notifications",
  tools: "Help panel",
  toolsClose: "Close help panel",
  toolsToggle: "Open help panel",
  drawers: "Drawers",
  drawersOverflow: "Overflow drawers",
  drawersOverflowWithBadge: "Overflow drawers (Unread notifications)"
}
\`\`\`",
      "i18nTag": true,
      "inlineType": {
        "name": "AppLayoutProps.Labels",
        "properties": [
          {
            "name": "drawers",
            "optional": true,
            "type": "string",
          },
          {
            "name": "drawersOverflow",
            "optional": true,
            "type": "string",
          },
          {
            "name": "drawersOverflowWithBadge",
            "optional": true,
            "type": "string",
          },
          {
            "name": "navigation",
            "optional": true,
            "type": "string",
          },
          {
            "name": "navigationClose",
            "optional": true,
            "type": "string",
          },
          {
            "name": "navigationToggle",
            "optional": true,
            "type": "string",
          },
          {
            "name": "notifications",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tools",
            "optional": true,
            "type": "string",
          },
          {
            "name": "toolsClose",
            "optional": true,
            "type": "string",
          },
          {
            "name": "toolsToggle",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "ariaLabels",
      "optional": true,
      "type": "AppLayoutProps.Labels",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'default'",
      "description": "Determines the default behavior of the component based on some predefined page layouts.
Individual properties will always take precedence over the default coming from the content type.",
      "inlineType": {
        "name": "AppLayoutProps.ContentType",
        "type": "union",
        "values": [
          "default",
          "form",
          "table",
          "cards",
          "wizard",
          "dashboard",
        ],
      },
      "name": "contentType",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "This layout is being phased out and may miss some features.",
      "description": "Activates a backwards-compatibility mode for applications with non-fixed headers and footers.",
      "name": "disableBodyScroll",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Replaced by the \`disableOverlap\` property of the [content layout](/components/content-layout/) component.",
      "description": "Disables overlap between \`contentHeader\` and \`content\` slots.",
      "name": "disableContentHeaderOverlap",
      "optional": true,
      "type": "boolean",
      "visualRefreshTag": "",
    },
    {
      "description": "If \`true\`, disables outer paddings for the content slot.",
      "name": "disableContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Drawers property. If you set both \`drawers\` and \`tools\`, \`drawers\` will take precedence.
Each Drawer is an item in the drawers wrapper with the following properties:
* id (string) - the id of the drawer.
* content (React.ReactNode) - the content in the drawer.
* trigger (DrawerTrigger) - the button that opens and closes the active drawer.
* ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
* badge (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
* resizable (boolean) - if the drawer is resizable or not.
* defaultSize (number) - starting size of the drawer. if not set, defaults to 290.
* onResize (({ size: number }) => void) - Fired when the active drawer is resized.

#### DrawerTrigger
- \`iconName\` (IconProps.Name) - (Optional) Specifies the icon to be displayed.
- \`iconSvg\` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)

#### DrawerAriaLabels
- \`drawerName\` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
- \`closeButton\` (string) - (Optional) Label for the close button.
- \`triggerButton\` (string) - (Optional) Label for the trigger button.
- \`resizeHandle\` (string) - (Optional) Label for the resize handle.
",
      "name": "drawers",
      "optional": true,
      "type": "Array<AppLayoutProps.Drawer>",
    },
    {
      "defaultValue": "'#b #f'",
      "description": "CSS selector for the application footer.",
      "name": "footerSelector",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'#b #h'",
      "description": "CSS selector for the application header.",
      "name": "headerSelector",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the visual treatment for the breadcrumbs and notifications slots. Specifically:
* \`default\` - Does not apply any visual treatment.
* \`high-contrast\` - Applies high-contrast to both slots. Use in conjunction with \`headerVariant="high-contrast"\` in ContentLayout.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "default",
          "high-contrast",
        ],
      },
      "name": "headerVariant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Maximum main content panel width in pixels.
If set to \`Number.MAX_VALUE\`, the main content panel will occupy the full available width.
",
      "name": "maxContentWidth",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Minimum main content panel width in pixels.",
      "name": "minContentWidth",
      "optional": true,
      "type": "number",
    },
    {
      "description": "If \`true\`, the navigation drawer is not displayed at all.",
      "name": "navigationHide",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "State of the navigation drawer.",
      "name": "navigationOpen",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "280",
      "description": "Navigation drawer width in pixels.",
      "name": "navigationWidth",
      "optional": true,
      "type": "number",
    },
    {
      "description": "State of the split panel.",
      "name": "splitPanelOpen",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Controls the split panel preferences.
By default, the preference is \`{ position: 'bottom' }\`
",
      "inlineType": {
        "name": "AppLayoutProps.SplitPanelPreferences",
        "properties": [
          {
            "name": "position",
            "optional": false,
            "type": ""bottom" | "side"",
          },
        ],
        "type": "object",
      },
      "name": "splitPanelPreferences",
      "optional": true,
      "type": "AppLayoutProps.SplitPanelPreferences",
    },
    {
      "description": "The size of the split panel in pixels.",
      "name": "splitPanelSize",
      "optional": true,
      "type": "number",
    },
    {
      "description": "If true, the notification slot is rendered above the scrollable
content area so it is always visible.",
      "name": "stickyNotifications",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "If \`true\`, the tools drawer is not displayed at all.",
      "name": "toolsHide",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "State of the tools drawer.",
      "name": "toolsOpen",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "290",
      "description": "Tools drawer width in pixels.",
      "name": "toolsWidth",
      "optional": true,
      "type": "number",
    },
  ],
  "regions": [
    {
      "description": "Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the app layout.",
      "isDefault": false,
      "name": "breadcrumbs",
    },
    {
      "description": "Main content.",
      "isDefault": false,
      "name": "content",
    },
    {
      "deprecatedTag": "Replaced by the \`header\` slot of the [content layout](/components/content-layout/) component.",
      "description": "Top area of the page content.",
      "isDefault": false,
      "name": "contentHeader",
      "visualRefreshTag": "",
    },
    {
      "description": "Navigation drawer.",
      "isDefault": false,
      "name": "navigation",
    },
    {
      "description": "Displayed on top of the main content in the scrollable area.
Conceived to contain notifications (flash messages).
",
      "isDefault": false,
      "name": "notifications",
    },
    {
      "description": "Use this slot to add the [split panel component](/components/split-panel/) to the app layout.
Note: If provided, this property should be set to \`null\` or \`undefined\` if a split panel should not be rendered.
",
      "isDefault": false,
      "name": "splitPanel",
    },
    {
      "description": "Tools drawer.",
      "isDefault": false,
      "name": "tools",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for area-chart matches the snapshot: area-chart 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the values of the internal filter component changed.
This will **not** be called for any custom filter components you have defined in \`additionalFilters\`.",
      "detailInlineType": {
        "name": "CartesianChartProps.FilterChangeDetail",
        "properties": [
          {
            "name": "visibleSeries",
            "optional": false,
            "type": "ReadonlyArray<Series>",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.FilterChangeDetail<AreaChartProps.Series<T>>",
      "name": "onFilterChange",
    },
    {
      "cancelable": false,
      "description": "Called when the highlighted series has changed because of user interaction.",
      "detailInlineType": {
        "name": "CartesianChartProps.HighlightChangeDetail",
        "properties": [
          {
            "name": "highlightedSeries",
            "optional": false,
            "type": "Series | null",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.HighlightChangeDetail<AreaChartProps.Series<T>>",
      "name": "onHighlightChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button that appears when there is an error state.
Use this to enable the user to retry a failed request or provide another option for the user
to recover from the error.",
      "name": "onRecoveryClick",
    },
  ],
  "functions": [],
  "name": "AreaChart",
  "properties": [
    {
      "description": "A description of the chart that assistive technologies can use (through \`aria-describedby\`).
Provide a concise summary of the data visualized in the chart.",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets \`aria-labelledby\` on the chart itself.
If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional content that is displayed at the bottom of the detail popover.",
      "inlineType": {
        "name": "CartesianChartProps.DetailPopoverFooter",
        "parameters": [
          {
            "name": "xValue",
            "type": "T",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "detailPopoverFooter",
      "optional": true,
      "type": "CartesianChartProps.DetailPopoverFooter<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Determines the maximum width the detail popover will be limited to.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "detailPopoverSize",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed values total.",
      "inlineType": {
        "name": "AreaChartProps.TickFormatter",
        "properties": [],
        "type": "object",
      },
      "name": "detailTotalFormatter",
      "optional": true,
      "type": "AreaChartProps.TickFormatter<number>",
    },
    {
      "description": "Text that is displayed when the chart is in error state, i.e. when \`statusType\` is set to \`"error"\`.",
      "i18nTag": true,
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Enable this property to make the chart fit into the available height of the parent container.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "500",
      "description": "An optional pixel value number that fixes the height of the chart area.
If not set explicitly, the component will use a default height that is defined internally.
When used with \`fitHeight\`, this property defines the minimum height of the chart area.",
      "name": "height",
      "optional": true,
      "type": "number",
    },
    {
      "description": "When set to \`true\`, the default filtering dropdown is not displayed.
It is still possible to render additional filters with the \`additionalFilters\` slot.",
      "name": "hideFilter",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "When set to \`true\`, the legend beneath the chart is not displayed.
It is highly recommended to keep this set to \`false\`.",
      "name": "hideLegend",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The currently highlighted data series, usually through hovering over a series or the legend.
A value of \`null\` means no series is highlighted.
- If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onHighlightChange\` listener to update this property when a series should be highlighted (controlled behavior).
",
      "name": "highlightedSeries",
      "optional": true,
      "type": "AreaChartProps.Series<T> | null",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "AreaChartProps.I18nStrings",
        "properties": [
          {
            "name": "chartAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailPopoverDismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailTotalFormatter",
            "optional": true,
            "type": "AreaChartProps.TickFormatter<number>",
          },
          {
            "name": "detailTotalLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterSelectedAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "legendAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xTickFormatter",
            "optional": true,
            "type": "AreaChartProps.TickFormatter<T>",
          },
          {
            "name": "yAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "yTickFormatter",
            "optional": true,
            "type": "AreaChartProps.TickFormatter<number>",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "AreaChartProps.I18nStrings<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Optional title for the legend.",
      "name": "legendTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that is displayed when the chart is loading, i.e. when \`statusType\` is set to \`"loading"\`.",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text for the recovery button that is displayed next to the error text.",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Array that represents the source of data for the displayed chart.
Each element can represent an area series, or a threshold, and can have the following properties:
* \`title\` (string): A human-readable title for this series
* \`type\` (string): Series type (\`"area"\`, or \`"threshold"\`)
* \`data\` (Array): An array of data points, represented as objects with \`x\` and \`y\` properties. The \`x\` values must be consistent across all series
* \`color\` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color
* \`valueFormatter\` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
",
      "name": "series",
      "optional": false,
      "type": "ReadonlyArray<AreaChartProps.Series<T>>",
    },
    {
      "defaultValue": ""finished"",
      "description": "Specifies the current status of loading data.
* \`loading\`: data fetching is in progress.
* \`finished\`: data has loaded successfully.
* \`error\`: an error occurred during fetch. You should provide user an option to recover.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.
- If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onFilterChange\` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).",
      "name": "visibleSeries",
      "optional": true,
      "type": "ReadonlyArray<AreaChartProps.Series<T>>",
    },
    {
      "description": "Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.
For numerical and time-based data this is represented as an array with two values: \`[minimumValue, maximumValue]\`.
For categorical data this is represented as an array of strings that determine the categories to display.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "xDomain",
      "optional": true,
      "type": "conditional",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the x axis.",
      "inlineType": {
        "name": "ScaleType",
        "type": "union",
        "values": [
          "linear",
          "log",
          "time",
          "categorical",
        ],
      },
      "name": "xScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of an x axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "xTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<T>",
    },
    {
      "description": "The title of the x axis.",
      "name": "xTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.
The domain is defined by a tuple: \`[minimumValue, maximumValue]\`.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "yDomain",
      "optional": true,
      "type": "ReadonlyArray<number>",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the y axis.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "linear",
          "log",
        ],
      },
      "name": "yScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of a y axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "yTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<number>",
    },
    {
      "description": "The title of the y axis.",
      "name": "yTitle",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Additional filters that are added above the chart component.
Make sure to update the \`data\` property when any of your custom filters change the data to be displayed.",
      "isDefault": false,
      "name": "additionalFilters",
    },
    {
      "description": "Content that is displayed when the data passed to the component is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Content that is displayed when there is no data to display due to the built-in filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for attribute-editor matches the snapshot: attribute-editor 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when add button is clicked.",
      "name": "onAddButtonClick",
    },
    {
      "cancelable": false,
      "description": "Called when remove button is clicked.
The event \`detail\` contains the index of the corresponding item.",
      "detailInlineType": {
        "name": "AttributeEditorProps.RemoveButtonClickDetail",
        "properties": [
          {
            "name": "itemIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "AttributeEditorProps.RemoveButtonClickDetail",
      "name": "onRemoveButtonClick",
    },
  ],
  "functions": [
    {
      "description": "Focuses the 'add' button. Use this, for example, after a user removes the last row.",
      "name": "focusAddButton",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Focuses the 'remove' button for the given row index.",
      "name": "focusRemoveButton",
      "parameters": [
        {
          "name": "itemIndex",
          "type": "number",
        },
      ],
      "returnType": "void",
    },
  ],
  "name": "AttributeEditor",
  "properties": [
    {
      "description": "Specifies the text that's displayed in the add button.",
      "name": "addButtonText",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Specifies the variant to use for the add button. By default a normal button is used.
Use \`inline-link\` when using an attribute editor nested inside complex attribute editing
with expandable sections.",
      "inlineType": {
        "name": "AttributeEditorProps.AddButtonVariant",
        "type": "union",
        "values": [
          "normal",
          "inline-link",
        ],
      },
      "name": "addButtonVariant",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies a custom action trigger for each row, in place of the remove button.
Only button and button dropdown components are supported.
If you provide this, \`removeButtonText\`, \`removeButtonAriaLabel\`,
and \`onRemoveButtonClick\` will be ignored.
The trigger must be given the provided \`ref\` in order for \`focusRemoveButton\`
to work.
The function receives the following properties:
- \`item\`: The item being rendered in the current row.
- \`itemIndex\` (\`number\`): The index of the item.
- \`ref\` (\`ReactRef\`): A React ref that should be passed to the rendered button.
- \`breakpoint\` (\`Breakpoint\`): The current breakpoint, for responsive behavior.
- \`ownRow\` (\`boolean\`): Whether the button is rendered on its own row.",
      "name": "customRowActions",
      "optional": true,
      "type": "(props: AttributeEditorProps.RowActionsProps<T>) => React.ReactNode",
    },
    {
      "description": "Defines the editor configuration. Each object in the array represents one form field in the row.
If more than 6 attributes are specified, a \`gridLayout\` must be provided.
* \`label\` (ReactNode) - Text label for the form field.
* \`info\` (ReactNode) - Info link for the form field.
* \`errorText\` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.
   It renders the form field as invalid if the returned value is not \`null\` or \`undefined\`.
* \`warningText\` ((item, itemIndex) => ReactNode) - Warning message text to display as a control validation message.
   It renders the form field in a warning state if the returned value is not \`null\` or \`undefined\`.
* \`constraintText\` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.
* \`control\` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.
",
      "name": "definition",
      "optional": false,
      "type": "ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>",
    },
    {
      "description": "Determines whether the add button is disabled.",
      "name": "disableAddButton",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Optionally specifies the layout of the attributes. By default, all attributes will be
equally spaced and wrapped into multiple rows on smaller viewports.
A \`gridLayout\` is an array of breakpoint definitions. Each definition consists of:
- \`rows\` (\`number[][]\`): the rows in which to display the attributes. Each row consists of a list of numbers indicating
  the relative width of each attribute. For example, \`[[1, 1, 1, 1]]\` is a single row of four evenly-spaced attributes,
  or \`[[1, 2], [1, 1, 1]]\` splits five attributes onto two rows.
- \`breakpoint\` (\`string\`): optionally specifies that the given entry should only be used when at least that much width is available.
- \`removeButton\`: optionally configures the remove (or row action) button placement. If this is not provided, the button will be
  placed at the end of a single row, or below if multiple rows are present. The \`removeButton\` property supports contains two properties:
  - \`ownRow\` (\`boolean\`): forces the remove button onto its own row.
  - \`width\` (\`number | 'auto'\`): a number indicating the relative width (equivalent to a \`rows\` entry), or 'auto' to fit to the button width.
",
      "name": "gridLayout",
      "optional": true,
      "type": "ReadonlyArray<AttributeEditorProps.GridLayout>",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "inlineType": {
        "name": "AttributeEditorProps.I18nStrings",
        "properties": [
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "itemRemovedAriaLive",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeButtonAriaLabel",
            "optional": true,
            "type": "(item: T) => string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "AttributeEditorProps.I18nStrings<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "() => true",
      "description": "Function that determines whether an item is removable. When this function returns \`false\`, the remove
button is not rendered and the user can't remove the item.
By default, all items are removable.",
      "inlineType": {
        "name": "AttributeEditorProps.IsItemRemovableFunction",
        "parameters": [
          {
            "name": "item",
            "type": "T",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isItemRemovable",
      "optional": true,
      "type": "AttributeEditorProps.IsItemRemovableFunction<T>",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies the items that serve as the data source for all rows.
The display of a row is handled by the \`definition\` property.",
      "name": "items",
      "optional": true,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "Adds an \`aria-label\` to the remove button.",
      "name": "removeButtonAriaLabel",
      "optional": true,
      "type": "(item: T) => string",
    },
    {
      "description": "Specifies the text that's displayed in the remove button.",
      "i18nTag": true,
      "name": "removeButtonText",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Displayed below the add button. Use it for additional information related to the attribute editor.",
      "isDefault": false,
      "name": "additionalInfo",
    },
    {
      "description": "Displayed when there are no items to display.",
      "isDefault": false,
      "name": "empty",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for autosuggest matches the snapshot: autosuggest 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keydown\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyDown",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keyup\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyUp",
    },
    {
      "cancelable": false,
      "description": "Use this event to implement the asynchronous behavior for the component.
The event is called in the following situations:
* The user scrolls to the end of the list of options, if \`statusType\` is set to \`pending\`.
* The user clicks on the recovery button in the error state.
* The user types inside the input field.
* The user focuses the input field.

The detail object contains the following properties:
* \`filteringText\` - The value that you need to use to fetch options.
* \`firstPage\` - Indicates that you should fetch the first page of options that match the \`filteringText\`.
* \`samePage\` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).
",
      "detailInlineType": {
        "name": "OptionsLoadItemsDetail",
        "properties": [
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "firstPage",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "samePage",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "OptionsLoadItemsDetail",
      "name": "onLoadItems",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user selects an option in the dropdown. Don't use this event as the only way to handle user input.
Instead, use \`onSelect\` in combination with the \`onChange\` handler only as an optional convenience for the user.",
      "detailInlineType": {
        "name": "AutosuggestProps.SelectDetail",
        "properties": [
          {
            "name": "selectedOption",
            "optional": true,
            "type": "AutosuggestProps.Option",
          },
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "AutosuggestProps.SelectDetail",
      "name": "onSelect",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Selects all text in the input control.",
      "name": "select",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Autosuggest",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
      "i18nTag": true,
      "name": "clearAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies a function that generates the custom value indicator (for example, \`Use "\${value}"\`).",
      "i18nTag": true,
      "inlineType": {
        "name": "AutosuggestProps.EnteredTextLabel",
        "parameters": [
          {
            "name": "value",
            "type": "string",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "enteredTextLabel",
      "optional": true,
      "type": "AutosuggestProps.EnteredTextLabel",
    },
    {
      "description": "Provides a text alternative for the error icon in the error message.",
      "i18nTag": true,
      "name": "errorIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display when a data fetching error occurs. Make sure that you provide \`recoveryText\`.",
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.",
      "name": "filteringResultsText",
      "optional": true,
      "type": "(matchesCount: number, totalCount: number) => string",
    },
    {
      "defaultValue": "'auto'",
      "description": "Determines how filtering is applied to the list of \`options\`:
* \`auto\` - The component will automatically filter options based on user input.
* \`manual\` - You will set up \`onChange\` or \`onLoadItems\` event listeners and filter options on your side or request
them from server.

By default the component will filter the provided \`options\` based on the value of the filtering input field.
Only options that have a \`value\`, \`label\`, \`description\` or \`labelTag\` that contains the input value as a substring
are displayed in the list of options.

If you set this property to \`manual\`, this default filtering mechanism is disabled and all provided \`options\` are
displayed in the dropdown list. In that case make sure that you use the \`onChange\` or \`onLoadItems\` events in order
to set the \`options\` property to the options that are relevant for the user, given the filtering input value.

Note: Manual filtering doesn't disable match highlighting.
",
      "inlineType": {
        "name": "OptionsFilteringType",
        "type": "union",
        "values": [
          "none",
          "auto",
          "manual",
        ],
      },
      "name": "filteringType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display at the bottom of the dropdown menu after pagination has reached the end.",
      "name": "finishedText",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text to display when in the loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an array of options that are displayed to the user as a dropdown list.
The options can be grouped using \`OptionGroup\` objects.
#### Option
- \`value\` (string) - The returned value of the option when selected.
- \`label\` (string) - (Optional) Option text displayed to the user.
- \`lang\` (string) - (Optional) The language of the option, provided as a BCP 47 language tag.
- \`description\` (string) - (Optional) Further information about the option that appears below the label.
- \`disabled\` (boolean) - (Optional) Determines whether the option is disabled.
- \`labelTag\` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
- \`tags\` [string[]] - (Optional) A list of tags giving further guidance about the option.
- \`filteringTags\` [string[]] - (Optional) A list of additional tags used for automatic filtering.
- \`iconName\` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option.
- \`iconAlt\` (string) - (Optional) Specifies alternate text for a custom icon, for use with \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).

#### OptionGroup
- \`label\` (string) - Option group text displayed to the user.
- \`disabled\` (boolean) - (Optional) Determines whether the option group is disabled.
- \`options\` (Option[]) - (Optional) The options under this group.

Note: Only one level of option nesting is supported.

If you want to use the built-in filtering capabilities of this component, provide
a list of all valid options here and they will be automatically filtered based on the user's filtering input.

Alternatively, you can listen to the \`onChange\` or \`onLoadItems\` event and set new options
on your own.
",
      "inlineType": {
        "name": "AutosuggestProps.Options",
        "properties": [],
        "type": "object",
      },
      "name": "options",
      "optional": true,
      "type": "AutosuggestProps.Options",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text for the recovery button. The text is displayed next to the error text.
Use the \`onLoadItems\` event to perform a recovery action (for example, retrying the request).",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the element that is announced to screen readers
when the highlighted option changes. By default, this announces
the option's name and properties, and its selected state if
the \`selectedLabel\` property is defined.
The highlighted option is provided, and its group (if groups
are used and it differs from the group of the previously highlighted option).
For more information, see the
[accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).
",
      "inlineType": {
        "name": "AutosuggestProps.ContainingOptionAndGroupString",
        "parameters": [
          {
            "name": "option",
            "type": "AutosuggestProps.Option",
          },
          {
            "name": "group",
            "type": "AutosuggestProps.OptionGroup",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "renderHighlightedAriaLive",
      "optional": true,
      "type": "AutosuggestProps.ContainingOptionAndGroupString",
    },
    {
      "description": "Specifies the localized string that describes an option as being selected.
This is required to provide a good screen reader experience. For more information, see the
[accessibility guidelines](/components/autosuggest/?tabId=usage#accessibility-guidelines).",
      "i18nTag": true,
      "name": "selectedAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'finished'",
      "description": "Specifies the current status of loading more options.
* \`pending\` - Indicates that no request in progress, but more options may be loaded.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that pagination has finished and no more requests are expected.
* \`error\` - Indicates that an error occurred during fetch. You should use \`recoveryText\` to enable the user to recover.",
      "inlineType": {
        "name": "DropdownStatusProps.StatusType",
        "type": "union",
        "values": [
          "pending",
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text entered into the form element.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "If you have more than 500 options, enable this flag to apply a performance optimization
that makes the filtering experience smoother. We don't recommend enabling the feature if you
have less than 500 options, because the improvements to performance are offset by a
visible scrolling lag.
When you set this flag to \`true\`, it removes options that are not currently in view from the DOM.
If your test accesses such options, you need to first scroll the options container
to the correct offset, before performing any operations on them. Use the element returned
by the \`findOptionsContainer\` test utility for this.
",
      "name": "virtualScroll",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Specifies the text that's displayed when there aren't any suggestions to display.
This is displayed when \`statusType\` is set to \`finished\` or it's not set at all.",
      "isDefault": false,
      "name": "empty",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for badge matches the snapshot: badge 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Badge",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""grey"",
      "description": "Specifies the badge color.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "blue",
          "grey",
          "green",
          "red",
          "severity-critical",
          "severity-high",
          "severity-medium",
          "severity-low",
          "severity-neutral",
        ],
      },
      "name": "color",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Text displayed inside the badge.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for bar-chart matches the snapshot: bar-chart 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the values of the internal filter component changed.
This will **not** be called for any custom filter components you have defined in \`additionalFilters\`.",
      "detailInlineType": {
        "name": "CartesianChartProps.FilterChangeDetail",
        "properties": [
          {
            "name": "visibleSeries",
            "optional": false,
            "type": "ReadonlyArray<Series>",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.FilterChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onFilterChange",
    },
    {
      "cancelable": false,
      "description": "Called when the highlighted series has changed because of user interaction.",
      "detailInlineType": {
        "name": "CartesianChartProps.HighlightChangeDetail",
        "properties": [
          {
            "name": "highlightedSeries",
            "optional": false,
            "type": "Series | null",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.HighlightChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onHighlightChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button that appears when there is an error state.
Use this to enable the user to retry a failed request or provide another option for the user
to recover from the error.",
      "name": "onRecoveryClick",
    },
  ],
  "functions": [],
  "name": "BarChart",
  "properties": [
    {
      "description": "A description of the chart that assistive technologies can use (through \`aria-describedby\`).
Provide a concise summary of the data visualized in the chart.",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets \`aria-labelledby\` on the chart itself.
If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional content that is displayed at the bottom of the detail popover.",
      "inlineType": {
        "name": "CartesianChartProps.DetailPopoverFooter",
        "parameters": [
          {
            "name": "xValue",
            "type": "T",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "detailPopoverFooter",
      "optional": true,
      "type": "CartesianChartProps.DetailPopoverFooter<T>",
    },
    {
      "description": "A function that determines the details that are displayed in the popover for each series.
Use this for wrapping keys or values in external links, or to display a metric breakdown by adding an additional level of nested items.
The function is called with the parameters \`{ series, x, y }\` representing the series, the highlighted x coordinate value and its corresponding y value respectively,
and should return the following properties:
* \`key\` (ReactNode) - Name of the series.
* \`value\` (ReactNode) - Value of the series at the highlighted x coordinate.
* \`subItems\` (ReadonlyArray<{ key: ReactNode; value: ReactNode }>) - (Optional) List of nested key-value pairs.
* \`expandable\` (boolean) - (Optional) Determines whether the optional list of nested items provided via \`subItems\` is expandable. This is \`false\` by default.
",
      "inlineType": {
        "name": "MixedLineBarChartProps.DetailPopoverSeriesContent",
        "parameters": [
          {
            "name": "data",
            "type": "MixedLineBarChartProps.DetailPopoverSeriesData<T>",
          },
        ],
        "returnType": "MixedLineBarChartProps.DetailPopoverSeriesKeyValuePair",
        "type": "function",
      },
      "name": "detailPopoverSeriesContent",
      "optional": true,
      "type": "MixedLineBarChartProps.DetailPopoverSeriesContent<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Determines the maximum width the detail popover will be limited to.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "detailPopoverSize",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "When set to \`true\`, adds a visual emphasis on the zero baseline axis.
See the usage guidelines for more details.",
      "name": "emphasizeBaselineAxis",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Text that is displayed when the chart is in error state, i.e. when \`statusType\` is set to \`"error"\`.",
      "i18nTag": true,
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Enable this property to make the chart fit into the available height of the parent container.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "500",
      "description": "An optional pixel value number that fixes the height of the chart area.
If not set explicitly, the component will use a default height that is defined internally.
When used with \`fitHeight\`, this property defines the minimum height of the chart area.",
      "name": "height",
      "optional": true,
      "type": "number",
    },
    {
      "description": "When set to \`true\`, the default filtering dropdown is not displayed.
It is still possible to render additional filters with the \`additionalFilters\` slot.",
      "name": "hideFilter",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "When set to \`true\`, the legend beneath the chart is not displayed.
It is highly recommended to keep this set to \`false\`.",
      "name": "hideLegend",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The currently highlighted data series, usually through hovering over a series or the legend.
A value of \`null\` means no series is highlighted.
- If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onHighlightChange\` listener to update this property when a series should be highlighted (controlled behavior).
",
      "name": "highlightedSeries",
      "optional": true,
      "type": "MixedLineBarChartProps.ChartSeries<T> | null",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`true\`, the x and y axes are flipped, which causes any bars to be rendered horizontally instead of vertically.
This can only be used when the chart consists exclusively of bar series.",
      "name": "horizontalBars",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "CartesianChartProps.I18nStrings",
        "properties": [
          {
            "name": "chartAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailPopoverDismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterSelectedAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "legendAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<T>",
          },
          {
            "name": "yAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "yTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<number>",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "CartesianChartProps.I18nStrings<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Optional title for the legend.",
      "name": "legendTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that is displayed when the chart is loading, i.e. when \`statusType\` is set to \`"loading"\`.",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text for the recovery button that is displayed next to the error text.",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Array that represents the source of data for the displayed chart.
Each element can represent a bar series or a threshold, and can have the following properties:
* \`title\` (string): A human-readable title for this series
* \`type\` (string): Series type (\`"bar"\`, or \`"threshold"\`)
* \`data\` (Array): An array of data points, represented as objects with \`x\` and \`y\` properties
* \`color\` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color
* \`valueFormatter\` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
",
      "name": "series",
      "optional": false,
      "type": "ReadonlyArray<BarSeries<T>>",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`true\`, bars in the same data point are stacked instead of grouped next to each other.",
      "name": "stackedBars",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": ""finished"",
      "description": "Specifies the current status of loading data.
* \`loading\`: data fetching is in progress.
* \`finished\`: data has loaded successfully.
* \`error\`: an error occurred during fetch. You should provide user an option to recover.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.
- If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onFilterChange\` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).",
      "name": "visibleSeries",
      "optional": true,
      "type": "ReadonlyArray<MixedLineBarChartProps.ChartSeries<T>>",
    },
    {
      "description": "Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.
For numerical and time-based data this is represented as an array with two values: \`[minimumValue, maximumValue]\`.
For categorical data this is represented as an array of strings that determine the categories to display.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "xDomain",
      "optional": true,
      "type": "conditional",
    },
    {
      "defaultValue": ""categorical"",
      "description": "Determines the type of scale for values on the x axis.
Use \`categorical\` for bar charts.",
      "inlineType": {
        "name": "ScaleType",
        "type": "union",
        "values": [
          "linear",
          "log",
          "time",
          "categorical",
        ],
      },
      "name": "xScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of an x axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "xTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<T>",
    },
    {
      "description": "The title of the x axis.",
      "name": "xTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.
The domain is defined by a tuple: \`[minimumValue, maximumValue]\`.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "yDomain",
      "optional": true,
      "type": "ReadonlyArray<number>",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the y axis.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "linear",
          "log",
        ],
      },
      "name": "yScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of a y axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "yTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<number>",
    },
    {
      "description": "The title of the y axis.",
      "name": "yTitle",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Additional filters that are added above the chart component.
Make sure to update the \`data\` property when any of your custom filters change the data to be displayed.",
      "isDefault": false,
      "name": "additionalFilters",
    },
    {
      "description": "Content that is displayed when the data passed to the component is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Content that is displayed when there is no data to display due to the built-in filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for box matches the snapshot: box 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Box",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the text color. You can set it to the following values:
- \`inherit\` - Inherits the color from the parent element. For example, use this to style content
     in Flashbars and to style the \`empty\` and \`noMatch\` slots of the Table and Cards components.
- \`text-label\` - Specifies the text color for non-form labels. For example, use it for the key in key/value pairs.
- \`text-body-secondary\` - Specifies the color for secondary text.
- \`text-status-error\` - Specifies the color for error text and icons.
- \`text-status-success\` - Specifies the color for success text and icons.
- \`text-status-info\` - Specifies the color for info text and icon.
- \`text-status-inactive\` - Specifies the color for inactive and loading text and icons.
- \`text-status-warning\` - Specifies the color for warning text and icons.

Note: If you don't set it, the text color depends on the variant.
",
      "inlineType": {
        "name": "BoxProps.Color",
        "type": "union",
        "values": [
          "inherit",
          "text-label",
          "text-body-secondary",
          "text-status-error",
          "text-status-success",
          "text-status-info",
          "text-status-inactive",
          "text-status-warning",
        ],
      },
      "name": "color",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the display of the element. You can set it to the following values:
- \`block\` - Specifies block display.
- \`inline\` - Specifies inline display.
- \`inline-block\` - Specifies inline-block display.
- \`none\` - Hides the box.

Note: If you don't set it, the display depends on the variant.
",
      "inlineType": {
        "name": "BoxProps.Display",
        "type": "union",
        "values": [
          "block",
          "inline",
          "inline-block",
          "none",
        ],
      },
      "name": "display",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Defines the floating behavior. You can set it to \`left\` or \`right\`.",
      "inlineType": {
        "name": "BoxProps.Float",
        "type": "union",
        "values": [
          "left",
          "right",
        ],
      },
      "name": "float",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the font size and line height. If not set, the font size and line height depend on the variant.",
      "inlineType": {
        "name": "BoxProps.FontSize",
        "type": "union",
        "values": [
          "body-s",
          "body-m",
          "heading-xs",
          "heading-s",
          "heading-m",
          "heading-l",
          "heading-xl",
          "display-l",
        ],
      },
      "name": "fontSize",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the font weight. If not set, the value depends on the variant.",
      "inlineType": {
        "name": "BoxProps.FontWeight",
        "type": "union",
        "values": [
          "light",
          "normal",
          "bold",
          "heavy",
        ],
      },
      "name": "fontWeight",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "'heavy'",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds margins to the element. It can be the following:
- A single string with a size. This applies the same margin to all sides (that is, top, right, bottom, left).
- An object specifying the size of the margin per side. The object has the following format:
\`\`\`
{
  top: "size of top margin",
  right: "size of right margin",
  bottom: "size of bottom margin",
  left: "size of left margin",
  horizontal: "size of left and right margin",
  vertical: "size of top and bottom margin",
}
\`\`\`

The size can be \`n\`, \`xxxs\`, \`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`, \`xxl\`, \`xxxl\`, where \`n\` stands for none.
Sizes are automatically scaled down in compact mode.

 For example, \`margin="s"\` adds a small margin to all sides.
\`margin={{ right: "l", bottom: "s" }}\` adds a small margin to the bottom and a large margin to the right.
",
      "name": "margin",
      "optional": true,
      "type": "BoxProps.Spacing | BoxProps.SpacingSize",
    },
    {
      "description": "Adds padding to the element. It can be the following:
- A single string with a size. This applies the same padding to all sides (that is, top, right, bottom, left).
- An object specifying the size of padding per side. The object has the following format:
\`\`\`
{
  top: "size of top padding",
  right: "size of right padding",
  bottom: "size of bottom padding",
  left: "size of left padding",
  horizontal: "size of left and right padding",
  vertical: "size of top and bottom padding",
}
\`\`\`

The size can be \`n\`, \`xxxs\`, \`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`, \`xxl\`, \`xxxl\`, where \`n\` stands for none.
Sizes are automatically scaled down in compact mode.

 For example, \`padding="s"\` adds small padding to all sides.
\`padding={{ right: "l", bottom: "s" }}\` adds small padding to the bottom and large padding to the right.
",
      "name": "padding",
      "optional": true,
      "type": "BoxProps.Spacing | BoxProps.SpacingSize",
    },
    {
      "description": "Overrides the default HTML tag provided by the variant.",
      "name": "tagOverride",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Defines the text alignment within the element. You can set it to \`left\`, \`center\`, or \`right\`.",
      "inlineType": {
        "name": "BoxProps.TextAlign",
        "type": "union",
        "values": [
          "left",
          "center",
          "right",
        ],
      },
      "name": "textAlign",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""div"",
      "description": "Defines the style of element to display.
- If you set it to \`'div'\`, \`'span'\`, \`'h1'\`, \`'h2'\`, \`'h3'\`, \`'h4'\`, \`'h5'\`, \`'p'\`, \`'strong'\`, \`'small'\`, \`'code'\`, \`'pre'\`, or \`'samp'\`, the variant is also used as the HTML tag name.
- If you set it to \`awsui-key-label\`, the component will render a \`div\`,
  styled for use as a key label in key-value pairs.
- If you set it to \`awsui-gen-ai-label\`, the component will render a \`div\`,
  styled for use as a label indicating that content is produced by generative AI.
- If you set it to \`awsui-value-large\`, the component will render a \`span\`,
  styled using "Display large light" typography.

Override the HTML tag by using property \`tagOverride\`.
",
      "inlineType": {
        "name": "BoxProps.Variant",
        "type": "union",
        "values": [
          "div",
          "span",
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
          "p",
          "strong",
          "small",
          "code",
          "pre",
          "samp",
          "awsui-key-label",
          "awsui-gen-ai-label",
          "awsui-value-large",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Content of the box.",
      "displayName": "content",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for breadcrumb-group matches the snapshot: breadcrumb-group 1`] = `
{
  "events": [
    {
      "cancelable": true,
      "description": "Called when the user clicks on a breadcrumb item.",
      "detailInlineType": {
        "name": "BreadcrumbGroupProps.ClickDetail",
        "properties": [
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "item",
            "optional": false,
            "type": "T",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
          {
            "name": "text",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "BreadcrumbGroupProps.ClickDetail<T>",
      "name": "onClick",
    },
    {
      "cancelable": true,
      "description": "Called when the user clicks on a breadcrumb item with the left mouse button
without pressing modifier keys (that is, CTRL, ALT, SHIFT, META).",
      "detailInlineType": {
        "name": "BreadcrumbGroupProps.ClickDetail",
        "properties": [
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "item",
            "optional": false,
            "type": "T",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
          {
            "name": "text",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "BreadcrumbGroupProps.ClickDetail<T>",
      "name": "onFollow",
    },
  ],
  "functions": [],
  "name": "BreadcrumbGroup",
  "properties": [
    {
      "description": "Provides an \`aria-label\` to the breadcrumb group that screen readers can read (for accessibility).",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides an \`aria-label\` to the ellipsis button that screen readers can read (for accessibility).",
      "i18nTag": true,
      "name": "expandAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "An array of breadcrumb items that describes the link hierarchy for this navigation.
Each option has the following properties:
* \`text\` (string) - Specifies the title text of the breadcrumb item.
* \`href\` (string) - Specifies the URL for the link in the breadcrumb item.
You should specify the link even if you have a click handler for a breadcrumb item
to ensure that valid markup is generated.

Note: The last breadcrumb item is automatically considered the current item, and it's
not a link.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<T>",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for button matches the snapshot: button 1`] = `
{
  "events": [
    {
      "cancelable": true,
      "description": "Called when the user clicks on the button and the button is not disabled or in loading state.",
      "detailInlineType": {
        "name": "ClickDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "button",
            "optional": false,
            "type": "number",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "ClickDetail",
      "name": "onClick",
    },
    {
      "cancelable": true,
      "description": "Called when the user clicks on the button with the left mouse button without pressing
modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an \`href\` set.",
      "detailInlineType": {
        "name": "ButtonProps.FollowDetail",
        "properties": [
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": true,
            "type": "string",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "ButtonProps.FollowDetail",
      "name": "onFollow",
    },
  ],
  "functions": [
    {
      "description": "Focuses the underlying native button.",
      "name": "focus",
      "parameters": [
        {
          "name": "options",
          "type": "FocusOptions",
        },
      ],
      "returnType": "void",
    },
  ],
  "name": "Button",
  "properties": [
    {
      "description": "Adds \`aria-controls\` to the button. Use when the button controls the contents or presence of an element.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the button.",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds aria-expanded to the button element. Use when the button controls an expandable element.",
      "name": "ariaExpanded",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds \`aria-label\` to the button element. Use this to provide an accessible name for buttons
that don't have visible text, and to distinguish between multiple buttons with identical visible text.
The text will also be added to the \`title\` attribute of the button.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Renders the button as disabled and prevents clicks.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Provides a reason why the button is disabled (only when \`disabled\` is \`true\`).
If provided, the button becomes focusable.
Applicable for all button variants, except link and icon.",
      "name": "disabledReason",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.
You can specify a string value that will be suggested as the name of the downloaded file.
This property only applies when an \`href\` is provided.",
      "name": "download",
      "optional": true,
      "type": "boolean | string",
    },
    {
      "defaultValue": "false",
      "description": "Adds an external icon after the button label text.
If an href is provided, it opens the link in a new tab.",
      "name": "external",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.
 Use when a button is not the ancestor of a form element, such as when used in a modal.",
      "name": "form",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'submit'",
      "description": "The form action that is performed by a button click.",
      "inlineType": {
        "name": "ButtonProps.FormAction",
        "type": "union",
        "values": [
          "submit",
          "none",
        ],
      },
      "name": "formAction",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets the button width to be 100% of the parent container width. Button content is centered.",
      "name": "fullWidth",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Applies button styling to a link. Use this property if you need a link styled as a button (\`variant=link\`).
For example, if you have a 'help' button that links to a documentation page.",
      "name": "href",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component. The object should contain:
* \`externalIconAriaLabel\` - (optional) Specifies the aria-label for the external icon when \`external\` is set to \`true\`.",
      "i18nTag": true,
      "inlineType": {
        "name": "ButtonProps.I18nStrings",
        "properties": [
          {
            "name": "externalIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "ButtonProps.I18nStrings",
    },
    {
      "defaultValue": "'left'",
      "description": "Specifies the alignment of the icon.",
      "inlineType": {
        "name": "ButtonProps.IconAlign",
        "type": "union",
        "values": [
          "left",
          "right",
        ],
      },
      "name": "iconAlign",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.
This property is ignored if you use a predefined icon or if you set your custom icon using the \`iconSvg\` slot.",
      "name": "iconAlt",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Displays an icon next to the text. You can use the \`iconAlign\` property to position the icon.",
      "inlineType": {
        "name": "IconProps.Name",
        "type": "union",
        "values": [
          "add-plus",
          "anchor-link",
          "angle-left-double",
          "angle-left",
          "angle-right-double",
          "angle-right",
          "angle-up",
          "angle-down",
          "arrow-left",
          "arrow-right",
          "audio-full",
          "audio-half",
          "audio-off",
          "backward-10-seconds",
          "bug",
          "call",
          "calendar",
          "caret-down-filled",
          "caret-down",
          "caret-left-filled",
          "caret-right-filled",
          "caret-up-filled",
          "caret-up",
          "check",
          "contact",
          "close",
          "closed-caption",
          "closed-caption-unavailable",
          "copy",
          "command-prompt",
          "delete-marker",
          "download",
          "drag-indicator",
          "edit",
          "ellipsis",
          "envelope",
          "exit-full-screen",
          "expand",
          "external",
          "face-happy",
          "face-happy-filled",
          "face-neutral",
          "face-neutral-filled",
          "face-sad",
          "face-sad-filled",
          "file-open",
          "file",
          "filter",
          "flag",
          "folder-open",
          "folder",
          "forward-10-seconds",
          "full-screen",
          "gen-ai",
          "globe",
          "grid-view",
          "group-active",
          "group",
          "heart",
          "heart-filled",
          "insert-row",
          "key",
          "keyboard",
          "list-view",
          "location-pin",
          "lock-private",
          "map",
          "menu",
          "microphone",
          "microphone-off",
          "mini-player",
          "multiscreen",
          "notification",
          "pause",
          "play",
          "redo",
          "refresh",
          "remove",
          "resize-area",
          "script",
          "search",
          "security",
          "settings",
          "send",
          "share",
          "shrink",
          "star-filled",
          "star-half",
          "star",
          "status-in-progress",
          "status-info",
          "status-negative",
          "status-pending",
          "status-positive",
          "status-stopped",
          "status-warning",
          "subtract-minus",
          "suggestions",
          "support",
          "thumbs-down-filled",
          "thumbs-down",
          "thumbs-up-filled",
          "thumbs-up",
          "ticket",
          "transcript",
          "treeview-collapse",
          "treeview-expand",
          "undo",
          "unlocked",
          "upload-download",
          "upload",
          "user-profile-active",
          "user-profile",
          "video-off",
          "video-on",
          "video-unavailable",
          "video-camera-off",
          "video-camera-on",
          "video-camera-unavailable",
          "view-full",
          "view-horizontal",
          "view-vertical",
          "zoom-in",
          "zoom-out",
          "zoom-to-fit",
        ],
      },
      "name": "iconName",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.
",
      "name": "iconUrl",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Renders the button as being in a loading state. It takes precedence over the \`disabled\` if both are set to \`true\`.
It prevents users from clicking the button, but it can still be focused.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text that screen reader announces when the button is in a loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a \`rel\` attribute to the link. By default, the component sets the \`rel\` attribute to "noopener noreferrer" when \`target\` is \`"_blank"\`.
If the \`rel\` property is provided, it overrides the default behavior.",
      "name": "rel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies where to open the linked URL (for example, to open in a new browser window or tab use \`_blank\`).
This property only applies when an \`href\` is provided.",
      "name": "target",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'normal'",
      "description": "Determines the general styling of the button as follows:
* \`primary\` for primary buttons.
* \`normal\` for secondary buttons.
* \`link\` for tertiary buttons.
* \`icon\` to display an icon only (no text).
* \`inline-icon\` to display an icon-only (no text) button within a text context.
* \`inline-link\` to display a tertiary button with no outer padding.",
      "inlineType": {
        "name": "ButtonProps.Variant",
        "type": "union",
        "values": [
          "normal",
          "primary",
          "link",
          "icon",
          "inline-icon",
          "inline-link",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "Specifies if the \`text\` content wraps. If you set it to \`false\`, it prevents the text from wrapping.",
      "name": "wrapText",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Text displayed in the button element.",
      "displayName": "text",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Specifies the SVG of a custom icon.
Use this property if you want your custom icon to inherit colors dictated by variant or hover states.
When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element:
- has attribute \`focusable="false"\`.
- has \`viewBox="0 0 16 16"\`.

If you set the \`svg\` element as the root node of the slot, the component will automatically
- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`.
- set the stroke width based on the size of the icon.
- set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\`.
You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements.

If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.

*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software.
In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.
",
      "isDefault": false,
      "name": "iconSvg",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for button-dropdown matches the snapshot: button-dropdown 1`] = `
{
  "events": [
    {
      "cancelable": true,
      "description": "Called when the user clicks on an item, and the item is not disabled.  The event detail object contains the id of the clicked item.",
      "detailInlineType": {
        "name": "ButtonDropdownProps.ItemClickDetails",
        "properties": [
          {
            "name": "checked",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": true,
            "type": "string",
          },
          {
            "name": "id",
            "optional": false,
            "type": "string",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "ButtonDropdownProps.ItemClickDetails",
      "name": "onItemClick",
    },
    {
      "cancelable": true,
      "description": "Called when the user clicks on an item with the left mouse button without pressing
modifier keys (that is, CTRL, ALT, SHIFT, META), and the item has an \`href\` set.",
      "detailInlineType": {
        "name": "ButtonDropdownProps.ItemClickDetails",
        "properties": [
          {
            "name": "checked",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": true,
            "type": "string",
          },
          {
            "name": "id",
            "optional": false,
            "type": "string",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "ButtonDropdownProps.ItemClickDetails",
      "name": "onItemFollow",
    },
  ],
  "functions": [
    {
      "description": "Focuses the underlying native button. If a main action is defined this will focus that button.",
      "name": "focus",
      "parameters": [
        {
          "name": "options",
          "type": "FocusOptions",
        },
      ],
      "returnType": "void",
    },
    {
      "description": "Focuses the underlying native button for the dropdown.",
      "name": "focusDropdownTrigger",
      "parameters": [
        {
          "name": "options",
          "type": "FocusOptions",
        },
      ],
      "returnType": "void",
    },
  ],
  "name": "ButtonDropdown",
  "properties": [
    {
      "description": "Adds \`aria-label\` to the button dropdown trigger.
Use this to provide an accessible name for buttons that don't have visible text.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the button dropdown is disabled. Users cannot interact with the control if it's disabled.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Provides a reason why the button dropdown is disabled (only when \`disabled\` is \`true\`).
If provided, the disabled button becomes focusable.",
      "name": "disabledReason",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Controls expandability of the item groups.",
      "name": "expandableGroups",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Sets the button width to be 100% of the parent container width. Button content is centered.",
      "name": "fullWidth",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Array of objects with a number of supported types.
The following properties are supported across all types:

- \`type\` (string) - The type of the item. Can be \`action\`, \`group\`, \`checkbox\`. Defaults to \`action\` if \`items\` undefined and \`group\` otherwise.
- \`id\` (string) - allows to identify the item that the user clicked on. Mandatory for individual items, optional for categories.
- \`text\` (string) - description shown in the menu for this item. Mandatory for individual items, optional for categories.
- \`lang\` (string) - (Optional) The language of the item, provided as a BCP 47 language tag.
- \`disabled\` (boolean) - whether the item is disabled. Disabled items are not clickable, but they can be highlighted with the keyboard to make them accessible.
- \`disabledReason\` (string) - (Optional) Displays text near the \`text\` property when item is disabled. Use to provide additional context.
- \`description\` (string) - additional data that will be passed to a \`data-description\` attribute.
- \`ariaLabel\` (string) - (Optional) - ARIA label of the item element.

### action

- \`href\` (string) - (Optional) Defines the target URL of the menu item, turning it into a link.
- \`external\` (boolean) - Marks a menu item as external by adding an icon after the menu item text. The link will open in a new tab when clicked. Note that this only works when \`href\` is also provided.
- \`externalIconAriaLabel\` (string) - Adds an \`aria-label\` to the external icon.
- \`iconName\` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).
- \`iconAlt\` (string) - (Optional) Specifies alternate text for the icon when using \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) Specifies the URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).

### checkbox

When \`type\` is set to "checkbox", the values set to \`href\`, \`external\` and \`externalIconAriaLabel\` will be ignored.

- \`checked\` (boolean) - Controls the state of the checkbox item.
- \`iconName\` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).
- \`iconAlt\` (string) - (Optional) Specifies alternate text for the icon when using \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) Specifies the URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).

### group

- \`items\` (ReadonlyArray<Item>) - an array of item objects. Items will be rendered as nested menu items but only for the first nesting level, multi-nesting is not supported.
An item which belongs to nested group has the following properties: \`id\`, \`text\`, \`disabled\`, and \`description\`.

",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<ButtonDropdownProps.ItemOrGroup>",
    },
    {
      "defaultValue": "false",
      "description": "Renders the button as being in a loading state. It takes precedence over the \`disabled\` if both are set to \`true\`.
It prevents clicks.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text that screen reader announces when the button dropdown is in a loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "A standalone action that is shown prior to the dropdown trigger.
Use it with "primary" and "normal" variant only.
Main action properties:
* \`text\` (string) - Specifies the text shown in the main action.
* \`external\` (boolean) - Marks the main action as external by adding an icon after the text. The link will open in a new tab when clicked. Note that this only works when \`href\` is also provided.
* \`externalIconAriaLabel\` (string) - Adds an ARIA label to the external icon.

The main action also supports the following properties of the [button](/components/button/?tabId=api) component:
\`ariaLabel\`, \`disabled\`, \`loading\`, \`loadingText\`, \`href\`, \`target\`, \`rel\`, \`download\`, \`iconAlt\`, \`iconName\`, \`iconUrl\`, \`iconSvg\`, \`onClick\`, \`onFollow\`.
",
      "inlineType": {
        "name": "ButtonDropdownProps.MainAction",
        "properties": [
          {
            "name": "ariaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "disabled",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "disabledReason",
            "optional": true,
            "type": "string",
          },
          {
            "name": "download",
            "optional": true,
            "type": "boolean | string",
          },
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "externalIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "href",
            "optional": true,
            "type": "string",
          },
          {
            "name": "iconAlt",
            "optional": true,
            "type": "string",
          },
          {
            "name": "iconName",
            "optional": true,
            "type": "IconProps.Name",
          },
          {
            "name": "iconSvg",
            "optional": true,
            "type": "React.ReactNode",
          },
          {
            "name": "iconUrl",
            "optional": true,
            "type": "string",
          },
          {
            "name": "loading",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "loadingText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "onClick",
            "optional": true,
            "type": "CancelableEventHandler<ClickDetail>",
          },
          {
            "name": "onFollow",
            "optional": true,
            "type": "CancelableEventHandler<ButtonProps.FollowDetail>",
          },
          {
            "name": "rel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
          {
            "name": "text",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "mainAction",
      "optional": true,
      "type": "ButtonDropdownProps.MainAction",
    },
    {
      "defaultValue": "'normal'",
      "description": "Determines the general styling of the button dropdown.
* \`primary\` for primary buttons
* \`normal\` for secondary buttons
* \`icon\` for icon buttons
* \`inline-icon\` for icon buttons with no outer padding",
      "inlineType": {
        "name": "ButtonDropdownProps.Variant",
        "type": "union",
        "values": [
          "normal",
          "primary",
          "icon",
          "inline-icon",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Text displayed in the button dropdown trigger.",
      "displayName": "text",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for button-group matches the snapshot: button-group 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user uploads files. The event detail object contains the id and files from the file input item.",
      "detailInlineType": {
        "name": "InternalButtonGroupProps.FilesChangeDetails",
        "properties": [
          {
            "name": "files",
            "optional": false,
            "type": "Array<File>",
          },
          {
            "name": "id",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InternalButtonGroupProps.FilesChangeDetails",
      "name": "onFilesChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.",
      "detailInlineType": {
        "name": "InternalButtonGroupProps.ItemClickDetails",
        "properties": [
          {
            "name": "checked",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "id",
            "optional": false,
            "type": "string",
          },
          {
            "name": "pressed",
            "optional": true,
            "type": "false | true",
          },
        ],
        "type": "object",
      },
      "detailType": "InternalButtonGroupProps.ItemClickDetails",
      "name": "onItemClick",
    },
  ],
  "functions": [
    {
      "description": "Focuses button group item by id.",
      "name": "focus",
      "parameters": [
        {
          "name": "itemId",
          "type": "string",
        },
      ],
      "returnType": "void",
    },
  ],
  "name": "ButtonGroup",
  "properties": [
    {
      "description": "Adds \`aria-label\` to the button group toolbar element.
Use this to provide a unique accessible name for each button group on the page.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Use this property to determine dropdown placement strategy for all menu dropdown items.
By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).

Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "dropdownExpandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Array of objects with a number of supported types.
### icon-button

* \`id\` (string) - The unique identifier of the button, used as detail in \`onItemClick\` handler and to focus the button using \`ref.focus(id)\`.
* \`text\` (string) - The name shown as a tooltip for this button.
* \`disabled\` (optional, boolean) - The disabled state indication for this button.
* \`loading\` (optional, boolean) - The loading state indication for this button.
* \`loadingText\` (optional, string) - The loading text announced to screen readers.
* \`iconName\` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
* \`iconAlt\` (optional, string) - Specifies alternate text for the icon when using \`iconUrl\`.
* \`iconUrl\` (optional, string) - Specifies the URL of a custom icon.
* \`iconSvg\` (optional, ReactNode) - Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).
* \`popoverFeedback\` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.

### icon-toggle-button

* \`id\` (string) - The unique identifier of the button, used as detail in \`onItemClick\` handler and to focus the button using \`ref.focus(id)\`.
* \`pressed\` (boolean) - The toggle button pressed state.
* \`text\` (string) - The name shown as a tooltip for this button.
* \`disabled\` (optional, boolean) - The disabled state indication for this button.
* \`loading\` (optional, boolean) - The loading state indication for this button.
* \`loadingText\` (optional, string) - The loading text announced to screen readers.
* \`iconName\` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).
* \`iconUrl\` (optional, string) - Specifies the URL of a custom icon.
* \`iconSvg\` (optional, ReactNode) - Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).
* \`pressedIconName\` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).
* \`pressedIconUrl\` (optional, string) - Specifies the URL of a custom icon in pressed state.
* \`pressedIconSvg\` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).
* \`popoverFeedback\` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.
* \`pressedPopoverFeedback\` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to \`popoverFeedback\`.

* ### file-input

* \`id\` (string) - The unique identifier of the button, used as detail in \`onFilesChange\`.
* \`text\` (string) - The name of the menu button shown as a tooltip.
* \`accept\` (optional, string) - Specifies the native file input \`accept\` attribute to describe the allow-list of file types.
* \`multiple\` (optional, string) - Specifies the native file input \`multiple\` attribute to allow users entering more than one file.

### menu-dropdown

* \`id\` (string) - The unique identifier of the button, used as detail in \`onItemClick\`.
* \`text\` (string) - The name of the menu button shown as a tooltip.
* \`disabled\` (optional, boolean) - The disabled state indication for the menu button.
* \`loading\` (optional, boolean) - The loading state indication for the menu button.
* \`loadingText\` (optional, string) - The loading text announced to screen readers.
* \`items\` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.

### group

* \`text\` (string) - The name of the group rendered as ARIA label for this group.
* \`items\` ((ButtonGroupProps.IconButton | ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<ButtonGroupProps.ItemOrGroup>",
    },
    {
      "description": "Determines the general styling of the button dropdown.
* \`icon\` for icon buttons.",
      "inlineType": {
        "name": "ButtonGroupProps.Variant",
        "type": "union",
        "values": [
          "icon",
        ],
      },
      "name": "variant",
      "optional": false,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for calendar matches the snapshot: calendar 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing, pasting, or selecting a value).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "CalendarProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "CalendarProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "Calendar",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the calendar.",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the calendar.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the calendar.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides a reason why a particular date in the calendar is not enabled (only when \`isDateEnabled\` returns \`false\`).
If provided, the date becomes focusable.",
      "inlineType": {
        "name": "CalendarProps.DateDisabledReasonFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "dateDisabledReason",
      "optional": true,
      "type": "CalendarProps.DateDisabledReasonFunction",
    },
    {
      "defaultValue": ""day"",
      "description": "Specifies the granularity at which users will be able to select a date.
Defaults to \`day\`.",
      "inlineType": {
        "name": "CalendarProps.Granularity",
        "type": "union",
        "values": [
          "day",
          "month",
        ],
      },
      "name": "granularity",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by
the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "CalendarProps.I18nStrings",
        "properties": [
          {
            "name": "currentMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextYearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousYearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "todayAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "CalendarProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Defines whether a particular date is enabled in the calendar or not.
If you disable a date in the calendar, users can still enter this date using a keyboard.
We recommend that you also validate these constraints on the client-side and server-side
as you would for other form elements.",
      "inlineType": {
        "name": "CalendarProps.IsDateEnabledFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isDateEnabled",
      "optional": true,
      "type": "CalendarProps.IsDateEnabledFunction",
    },
    {
      "defaultValue": """",
      "description": "Specifies the locale to use to render month names and determine the starting day of the week.
If you don't provide this, the locale is determined by the page and browser locales.
Supported values and formats are listed in the
[JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).",
      "name": "locale",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`i18nStrings.nextMonthAriaLabel\` instead.",
      "description": "Specifies an \`aria-label\` for the 'next month' button.",
      "name": "nextMonthAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`i18nStrings.previousMonthAriaLabel\` instead.",
      "description": "Specifies an \`aria-label\` for the 'previous month' button.",
      "name": "previousMonthAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the starting day of the week. The values 0-6 map to Sunday-Saturday.
By default the starting day of the week is defined by the locale, but you can use this property to override it.",
      "name": "startOfWeek",
      "optional": true,
      "type": "number",
    },
    {
      "deprecatedTag": "Use \`i18nString.todayAriaLabel\` instead.",
      "description": "Used as part of the \`aria-label\` for today's date in the calendar.",
      "name": "todayAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The current input value, in YYYY-MM-DD format.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for cards matches the snapshot: cards 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when a user interaction causes a change in the list of selected items.
The event \`detail\` contains the current list of \`selectedItems\`.",
      "detailInlineType": {
        "name": "CardsProps.SelectionChangeDetail",
        "properties": [
          {
            "name": "selectedItems",
            "optional": false,
            "type": "Array<T>",
          },
        ],
        "type": "object",
      },
      "detailType": "CardsProps.SelectionChangeDetail<T>",
      "name": "onSelectionChange",
    },
  ],
  "functions": [
    {
      "description": "When the sticky header is enabled, calling this function scrolls cards's
scroll parent up to reveal the first card or row of cards.",
      "name": "scrollToTop",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Cards",
  "properties": [
    {
      "description": "Adds labels to the selection components (checkboxes and radio buttons) as follows:
* \`itemSelectionLabel\` ((SelectionState, Item) => string) - Determines the label for an item.
* \`selectionGroupLabel\` (string) - Specifies the label for the group selection control.
* \`cardsLabel\` (string) - Provides alternative text for the cards list.
                           By default the contents of the \`header\` are used.
You can use the first arguments of type \`SelectionState\` to access the current selection
state of the component (for example, the \`selectedItems\` list). The label function for individual
items also receives the corresponding  \`Item\` object. You can use the group label to
add a meaningful description to the whole selection.",
      "i18nTag": true,
      "inlineType": {
        "name": "CardsProps.AriaLabels",
        "properties": [
          {
            "name": "cardsLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "itemSelectionLabel",
            "optional": false,
            "type": "(data: CardsProps.SelectionState<T>, row: T) => string",
          },
          {
            "name": "selectionGroupLabel",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "ariaLabels",
      "optional": true,
      "type": "CardsProps.AriaLabels<T>",
    },
    {
      "description": " Defines what to display in each card. It has the following properties:
 * \`header\` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.
     Use \`fontSize="inherit"\` on [link](/components/link/) components inside card header.
 * \`sections\` (array) - Responsible for displaying the card content. Cards can have many sections in their
   body. Each entry in the array is responsible for displaying a section. An entry has the following properties:
   * \`id\`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)
  source for React rendering, and to match entries in the \`visibleSections\` property (if it's defined).
   * \`header\`: (ReactNode) - Responsible for displaying the section header.
   * \`content\`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.
   * \`width\`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in
   the same row. The default value is 100%.
 All of the above properties are optional.
",
      "inlineType": {
        "name": "CardsProps.CardDefinition",
        "properties": [
          {
            "name": "sections",
            "optional": true,
            "type": "ReadonlyArray<CardsProps.SectionDefinition<T>>",
          },
          {
            "name": "header",
            "optional": true,
            "type": "(item: T) => React.ReactNode",
          },
        ],
        "type": "object",
      },
      "name": "cardDefinition",
      "optional": false,
      "type": "CardsProps.CardDefinition<T>",
    },
    {
      "defaultValue": "[]",
      "description": "Determines the number of cards per row for any interval of container width.
It's an array whose entries are objects containing the following:
- \`cards\` (number) - Specifies the number of cards per row.
- \`minWidth\` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.
For example, with this configuration:
\`\`\`
[{
  cards: 1
}, {
  minWidth: 500,
  cards: 2
}, {
  minWidth: 800,
  cards: 3
}]
\`\`\`

the cards component displays:
* 1 card per row when the container width is below 500px.
* 2 cards per row when the container width is between 500px and 799px.
* 3 cards per row when the container width is 800px or wider.

The number of cards per row can't be greater than 20.

Default value:
\`\`\`
[{
  cards: 1
}, {
  minWidth: 768,
  cards: 2
}, {
  minWidth: 992,
  cards: 3
}, {
  minWidth: 1200,
  cards: 4
}, {
  minWidth: 1400,
  cards: 5
}, {
  minWidth: 1920,
  cards: 6
}]
\`\`\`
",
      "name": "cardsPerRow",
      "optional": true,
      "type": "ReadonlyArray<CardsProps.CardsLayout>",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Activating this property makes the entire card clickable to select it.
Don't use this property if the card has any other interactive elements.",
      "name": "entireCardClickable",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "1",
      "description": " Use this property to inform screen readers which range of cards is currently displayed.
 It specifies the index (1-based) of the first card.",
      "name": "firstIndex",
      "optional": true,
      "type": "number",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines which items are disabled. If an item is disabled, users can't select it.",
      "inlineType": {
        "name": "CardsProps.IsItemDisabled",
        "parameters": [
          {
            "name": "item",
            "type": "T",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isItemDisabled",
      "optional": true,
      "type": "CardsProps.IsItemDisabled<T>",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies the items that serve as data source for a card.
The \`cardDefinition\` property handles the display of this data.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "Renders the cards in a loading state. We recommend that you also set a \`loadingText\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text to display when in loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Use this function to announce page changes to screen reader users.
The function argument takes the following properties:
* \`firstIndex\` (number) - The provided \`firstIndex\` property which defaults to 1 when not defined.
* \`lastIndex\` (number) - The index of the last visible item of the table.
* \`totalItemsCount\` (optional, number) - The provided \`totalItemsCount\` property.",
      "name": "renderAriaLive",
      "optional": true,
      "type": "(data: CardsProps.LiveAnnouncement) => string",
    },
    {
      "description": "Specifies the list of selected items.",
      "name": "selectedItems",
      "optional": true,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "Specifies the selection mode. It can be either \`single\` or \`multi\`.",
      "inlineType": {
        "name": "CardsProps.SelectionType",
        "type": "union",
        "values": [
          "single",
          "multi",
        ],
      },
      "name": "selectionType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "If set to true, the cards header remains visible when the user scrolls down.",
      "name": "stickyHeader",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Optionally provide a vertical offset (in pixels) for the sticky header, for example if you
need to position the sticky header below other fixed position elements on the page.",
      "name": "stickyHeaderVerticalOffset",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Use this property to inform screen readers how many cards there are.
It specifies the total number of cards.
If there is an unknown total number of cards, leave this property undefined.",
      "name": "totalItemsCount",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the property inside items that uniquely identifies them.
When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)
for performance optimizations.
It's also used for connecting \`items\` and \`selectedItems\` values when they don't reference the same object.
",
      "inlineType": {
        "name": "CardsProps.TrackBy",
        "type": "union",
        "values": [
          "string",
          "(item: T) => string",
        ],
      },
      "name": "trackBy",
      "optional": true,
      "type": "CardsProps.TrackBy<T>",
    },
    {
      "defaultValue": "'container'",
      "description": "Specify a cards variant with one of the following:
* \`container\` - Use this variant to have the cards displayed as a container.
* \`full-page\` – Use this variant when cards are the entire content of a page.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "container",
          "full-page",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`full-page\` variant",
    },
    {
      "description": "Specifies an array containing the \`id\` of each visible section. If not set, all sections are displayed.
Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.

The order of \`id\`s doesn't influence the order of display of sections, which is controlled by the \`cardDefinition\` property.
",
      "name": "visibleSections",
      "optional": true,
      "type": "ReadonlyArray<string>",
    },
  ],
  "regions": [
    {
      "description": "Displayed only when the list of items is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Use this slot to add filtering controls to the component.",
      "isDefault": false,
      "name": "filter",
    },
    {
      "description": "Heading element of the table container. Use the [header component](/components/header/).",
      "isDefault": false,
      "name": "header",
    },
    {
      "description": "Use this slot to add the [pagination component](/components/pagination/) to the component.",
      "isDefault": false,
      "name": "pagination",
    },
    {
      "description": "Use this slot to add [collection preferences](/components/collection-preferences/) to the component.",
      "isDefault": false,
      "name": "preferences",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for checkbox matches the snapshot: checkbox 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called when the user changes the component state. The event \`detail\` contains the current value for the \`checked\` property.",
      "detailInlineType": {
        "name": "CheckboxProps.ChangeDetail",
        "properties": [
          {
            "name": "checked",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "indeterminate",
            "optional": false,
            "type": "false",
          },
        ],
        "type": "object",
      },
      "detailType": "CheckboxProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "name": "onFocus",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Checkbox",
  "properties": [
    {
      "description": "Adds \`aria-controls\` attribute to the component.
If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the component is selected.",
      "name": "checked",
      "optional": false,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. By default, it uses an automatically generated ID.",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies that the component is in an indeterminate state. The behavior of this property replicates
the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)
in the native control.",
      "name": "indeterminate",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value. Should be used only inside forms.
A read-only control is still focusable.
If both \`readOnly\` and \`disabled\` are set, \`disabled\` takes precedence.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.",
      "displayName": "label",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Description that appears below the label.",
      "isDefault": false,
      "name": "description",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for code-editor matches the snapshot: code-editor 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "An event handler called when the value changes.
The event \`detail\` contains the current value of the code editor content.
**Deprecated** Replaced by \`onDelayedChange\`.",
      "detailInlineType": {
        "name": "CodeEditorProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "CodeEditorProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "An event handler called when the value changes.
The event \`detail\` contains the current value of the code editor content.
A user interaction can cause multiple change events to be emitted by the Ace editor. They are batched together into a single \`onDelayedChange\` event to avoid bugs when controlling the \`value\` field.",
      "detailInlineType": {
        "name": "CodeEditorProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "CodeEditorProps.ChangeDetail",
      "name": "onDelayedChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user resizes the editor by dragging the resize icon.
The event \`detail\` contains the new height of the editor in pixels.",
      "detailInlineType": {
        "name": "CodeEditorProps.ResizeDetail",
        "properties": [
          {
            "name": "height",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "CodeEditorProps.ResizeDetail",
      "name": "onEditorContentResize",
    },
    {
      "cancelable": false,
      "description": "Called when any of the preferences change.
The event \`detail\` contains the value of all the preferences as submitted by the user.",
      "detailInlineType": {
        "name": "CodeEditorProps.Preferences",
        "properties": [
          {
            "name": "theme",
            "optional": false,
            "type": "CodeEditorProps.Theme",
          },
          {
            "name": "wrapLines",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "CodeEditorProps.Preferences",
      "name": "onPreferencesChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button in the error state.
Use this to retry loading the code editor or to provide another option for the user to recover from the error.",
      "detailType": "void",
      "name": "onRecoveryClick",
    },
    {
      "cancelable": false,
      "description": "Annotations returned from Ace syntax checker after code validation.",
      "detailInlineType": {
        "name": "CodeEditorProps.ValidateDetail",
        "properties": [
          {
            "name": "annotations",
            "optional": false,
            "type": "Array<Annotation>",
          },
        ],
        "type": "object",
      },
      "detailType": "CodeEditorProps.ValidateDetail",
      "name": "onValidate",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the code editor control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "CodeEditor",
  "properties": [
    {
      "description": "The ace object.",
      "name": "ace",
      "optional": false,
      "type": "any",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the code editor's textarea element.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the height of the code editor document.",
      "name": "editorContentHeight",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Use this property to specify a different dynamic modal root for the dialog.
The function will be called when a user clicks on the trigger button.",
      "name": "getModalRoot",
      "optional": true,
      "type": "() => Promise<HTMLElement>",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.
The object should contain, among others:
* \`loadingState\` - Specifies the text to display while the component is loading.
* \`errorState\` - Specifies the text to display if there is an error loading Ace.
* \`errorStateRecovery\`: Specifies the text for the recovery button that's displayed next to the error text.
   Use the \`recoveryClick\` event to do a recovery action (for example, retrying the request).",
      "i18nTag": true,
      "inlineType": {
        "name": "CodeEditorProps.I18nStrings",
        "properties": [
          {
            "name": "cursorPosition",
            "optional": true,
            "type": "(row: number, column: number) => string",
          },
          {
            "name": "editorGroupAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorState",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorStateRecovery",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorsTab",
            "optional": true,
            "type": "string",
          },
          {
            "name": "loadingState",
            "optional": true,
            "type": "string",
          },
          {
            "name": "paneCloseButtonAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesButtonAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalCancel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalConfirm",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalDarkThemes",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalHeader",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalLightThemes",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalTheme",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalThemeFilteringAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalThemeFilteringClearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalThemeFilteringPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesModalWrapLines",
            "optional": true,
            "type": "string",
          },
          {
            "name": "statusBarGroupAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "warningsTab",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "CodeEditorProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the programming language. You can use any of the programming languages supported by the \`ace\` object that you provide.
Alternatively, this can be used to set a language that is not supported by the default \`language\` list. Make sure you've added the highlighting support for this language to the Ace instance.
For more info on custom languages, see the [Code editor API](/components/code-editor?tabId=api) page.",
      "inlineType": {
        "name": "CodeEditorProps.Language",
        "properties": [],
        "type": "object",
      },
      "name": "language",
      "optional": false,
      "type": "CodeEditorProps.Language",
    },
    {
      "description": "Specifies a custom label language. If set, it overrides the default language label.",
      "name": "languageLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Renders the code editor in a loading state.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the component preferences.
If set to \`undefined\`, the component uses the following default value:

\`\`\`
{
  wrapLines: true,
  theme: 'dawn'
}
\`\`\`

You can use any theme provided by Ace.
",
      "name": "preferences",
      "optional": true,
      "type": "Partial<CodeEditorProps.Preferences>",
    },
    {
      "description": "Use this property when \`getModalRoot\` is used to clean up the modal root
element after a user closes the dialog. The function receives the return value
of the most recent getModalRoot call as an argument.",
      "name": "removeModalRoot",
      "optional": true,
      "type": "(rootElement: HTMLElement) => void",
    },
    {
      "description": "List of Ace themes available for selection in preferences dialog. Make sure you include at least one light and at
least one dark theme. If not set explicitly, it will render all Ace themes available for selection, except
"cloud_editor" and "cloud_editor_dark".",
      "inlineType": {
        "name": "CodeEditorProps.AvailableThemes",
        "properties": [
          {
            "name": "dark",
            "optional": false,
            "type": "ReadonlyArray<string>",
          },
          {
            "name": "light",
            "optional": false,
            "type": "ReadonlyArray<string>",
          },
        ],
        "type": "object",
      },
      "name": "themes",
      "optional": true,
      "type": "CodeEditorProps.AvailableThemes",
    },
    {
      "description": "Specifies the content that's displayed in the code editor.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for collection-preferences matches the snapshot: collection-preferences 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.",
      "name": "onCancel",
    },
    {
      "cancelable": false,
      "description": "Called when the user confirms a preference change using the confirm button in the modal footer.
The event \`detail\` contains the following:
- \`contentDensity\` (boolean) - (Optional) The current content density preference value. Available only if you specify the \`contentDensityPreference\` property.
- \`contentDisplay\` (ReadonlyArray<ContentDisplayItem>) - (Optional) The ordered list of table columns and their visibility. Available only if you specify the \`contentDisplayPreference\` property.
- \`custom\` (CustomPreferenceType) - (Optional) The selected value for your custom preference.
- \`pageSize\` (number) - (Optional) The selected page size value. Available only if you specify the \`pageSizePreference\` property.
- \`stickyColumns\` (CollectionPreferencesProps.StickyColumns) - (Optional) The current sticky columns preference value. Available only if you specify the \`stickyColumnsPreference\` property.
- \`stripedRows\` (boolean) - (Optional) The current striped rows preference value. Available only if you specify the \`stripedRowsPreference\` property.
- \`visibleContent\` (ReadonlyArray<string>) - (Optional) The list of selected content \`id\`s. Available only if you specify the \`visibleContentPreference\` property.
- \`wrapLines\` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the \`wrapLinesPreference\` property.

The values for all configured preferences are present even if the user didn't change their values.
",
      "detailInlineType": {
        "name": "CollectionPreferencesProps.Preferences",
        "properties": [
          {
            "name": "contentDensity",
            "optional": true,
            "type": ""comfortable" | "compact"",
          },
          {
            "name": "contentDisplay",
            "optional": true,
            "type": "ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>",
          },
          {
            "name": "custom",
            "optional": true,
            "type": "CollectionPreferencesProps.Preferences.CustomPreferenceType",
          },
          {
            "name": "pageSize",
            "optional": true,
            "type": "number",
          },
          {
            "name": "stickyColumns",
            "optional": true,
            "type": "CollectionPreferencesProps.StickyColumns",
          },
          {
            "name": "stripedRows",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "visibleContent",
            "optional": true,
            "type": "ReadonlyArray<string>",
          },
          {
            "name": "wrapLines",
            "optional": true,
            "type": "false | true",
          },
        ],
        "type": "object",
      },
      "detailType": "CollectionPreferencesProps.Preferences<CustomPreferenceType>",
      "name": "onConfirm",
    },
  ],
  "functions": [],
  "name": "CollectionPreferences",
  "properties": [
    {
      "description": "Label of the cancel button in the modal footer.",
      "i18nTag": true,
      "name": "cancelLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Label of the confirm button in the modal footer.",
      "i18nTag": true,
      "name": "confirmLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Configures the content density preference (Comfortable / Compact).
If you set it, the component displays this preference in the modal.

It contains the following:
- \`label\` (string) - Specifies the label for the option checkbox.
- \`description\` (string) - Specifies the text displayed below the checkbox label.

You must set the current value in the \`preferences.contentDensity\` property.",
      "i18nTag": true,
      "inlineType": {
        "name": "CollectionPreferencesProps.ContentDensityPreference",
        "properties": [
          {
            "name": "description",
            "optional": true,
            "type": "string",
          },
          {
            "name": "label",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "contentDensityPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.ContentDensityPreference",
    },
    {
      "description": "Configures the built-in content display preference for order and visibility of the table columns.
Recommended for table and not applicable for cards.

Cannot be used together with \`visibleContentPreference\`.

If you set it, the component displays this preference in the modal.

It contains the following:
- \`title\` (string) - Specifies the text displayed at the top of the preference.
- \`description\` (string) - Specifies the description displayed below the title.
- \`options\` - Specifies an array of options for reordering and visible content selection.
- \`enableColumnFiltering\` (boolean) - Adds a columns filter.
- \`liveAnnouncementDndStarted\` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an option is picked.
- \`liveAnnouncementDndDiscarded\` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.
- \`liveAnnouncementDndItemReordered\` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.
- \`liveAnnouncementDndItemCommitted\` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.
- \`dragHandleAriaDescription\` (string) - (Optional) Adds an ARIA description for the drag handle.
- \`dragHandleAriaLabel\` (string) - (Optional) Adds an ARIA label for the drag handle.

Each option contains the following:
- \`id\` (string) - Corresponds to a table column \`id\`.
- \`label\` (string) - Specifies a short description of the content.
- \`alwaysVisible\` (boolean) - (Optional) Determines whether the visibility is always on and therefore cannot be toggled. This is set to \`false\` by default.

You must provide an ordered list of the items to display in the \`preferences.contentDisplay\` property.",
      "i18nTag": true,
      "inlineType": {
        "name": "CollectionPreferencesProps.ContentDisplayPreference",
        "properties": [
          {
            "name": "description",
            "optional": true,
            "type": "string",
          },
          {
            "name": "dragHandleAriaDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "dragHandleAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "enableColumnFiltering",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "i18nStrings",
            "optional": true,
            "type": "CollectionPreferencesProps.ContentDisplayPreferenceI18nStrings",
          },
          {
            "name": "liveAnnouncementDndDiscarded",
            "optional": true,
            "type": "string",
          },
          {
            "name": "liveAnnouncementDndItemCommitted",
            "optional": true,
            "type": "(initialPosition: number, finalPosition: number, total: number) => string",
          },
          {
            "name": "liveAnnouncementDndItemReordered",
            "optional": true,
            "type": "(initialPosition: number, currentPosition: number, total: number) => string",
          },
          {
            "name": "liveAnnouncementDndStarted",
            "optional": true,
            "type": "(position: number, total: number) => string",
          },
          {
            "name": "options",
            "optional": false,
            "type": "ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>",
          },
          {
            "name": "title",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "contentDisplayPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.ContentDisplayPreference",
    },
    {
      "description": "Configures custom preferences. The function receives two parameters:
- \`customValue\` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in \`preferences.custom\`.
- \`setCustomValue\` - A function that is called to notify a state update.

It should return the content of your custom preference, for example:
\`\`\`
(customValue, setCustomValue) => (
  <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />
)
\`\`\`

When the user confirms the changes, the new value is passed in the \`detail.custom\` property of the \`onConfirm\` listener.
When the user cancels the changes, the \`customValue\` is reset to the one present in \`preferences.custom\` property.

**Display**
- If any of the built-in preferences (\`pageSizePreference\`, \`wrapLinesPreference\`, or \`visibleContentPreference\`) are displayed,
the custom content is displayed at the bottom of the left column within the modal.
- If no built-in preference is displayed, the custom content occupies the whole modal.
",
      "name": "customPreference",
      "optional": true,
      "type": "(customValue: CustomPreferenceType, setCustomValue: React.Dispatch<CustomPreferenceType>) => React.ReactNode",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the preferences trigger button is disabled.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Use this property to specify a different dynamic modal root for the dialog.
The function will be called when a user clicks on the trigger button.",
      "name": "getModalRoot",
      "optional": true,
      "type": "() => Promise<HTMLElement>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Configures the built-in "page size selection" preference.
If you set it, the component displays this preference in the modal.

It contains the following:
- \`title\` (string) - Specifies the text displayed at the top of the preference.
- \`options\` - Specifies an array of options for page size selection. Each entry contains:
  - \`value\` (number) - The value for the radio button (that is, the number of items per page).
  - \`label\` (string) - A label for the radio button (for example, "10 resources").

You must set the current value in the \`preferences.pageSize\` property.",
      "i18nTag": true,
      "inlineType": {
        "name": "CollectionPreferencesProps.PageSizePreference",
        "properties": [
          {
            "name": "options",
            "optional": false,
            "type": "ReadonlyArray<CollectionPreferencesProps.PageSizeOption>",
          },
          {
            "name": "title",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "pageSizePreference",
      "optional": true,
      "type": "CollectionPreferencesProps.PageSizePreference",
    },
    {
      "description": "Specifies the current preference values. This includes both built-in and custom preferences.
It contains the following:
- \`pageSize\` (number) - (Optional)
- \`wrapLines\` (boolean) - (Optional)
- \`contentDisplay\` (ReadonlyArray<ContentDisplayItem>) - (Optional) Specifies the list of content and their visibility. The order of the elements influences the display.
- \`visibleContent\` (ReadonlyArray<string>) - Specifies the list of visible content \`id\`s. The order of the \`id\`s does not influence the display. If the \`contentDisplay\` property is set, this property is ignored.
- \`custom\` (CustomPreferenceType) - Specifies the value for your custom preference.
",
      "inlineType": {
        "name": "CollectionPreferencesProps.Preferences",
        "properties": [
          {
            "name": "contentDensity",
            "optional": true,
            "type": ""comfortable" | "compact"",
          },
          {
            "name": "contentDisplay",
            "optional": true,
            "type": "ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>",
          },
          {
            "name": "custom",
            "optional": true,
            "type": "CollectionPreferencesProps.Preferences.CustomPreferenceType",
          },
          {
            "name": "pageSize",
            "optional": true,
            "type": "number",
          },
          {
            "name": "stickyColumns",
            "optional": true,
            "type": "CollectionPreferencesProps.StickyColumns",
          },
          {
            "name": "stripedRows",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "visibleContent",
            "optional": true,
            "type": "ReadonlyArray<string>",
          },
          {
            "name": "wrapLines",
            "optional": true,
            "type": "false | true",
          },
        ],
        "type": "object",
      },
      "name": "preferences",
      "optional": true,
      "type": "CollectionPreferencesProps.Preferences<CustomPreferenceType>",
    },
    {
      "description": "Use this property when \`getModalRoot\` is used to clean up the modal root
element after a user closes the dialog. The function receives the return value
of the most recent getModalRoot call as an argument.",
      "name": "removeModalRoot",
      "optional": true,
      "type": "(rootElement: HTMLElement) => void",
    },
    {
      "description": "Configures the sticky columns preference that can be set for both left and right columns.
If you set it, the component displays this preference in the modal.

It contains the following:
- \`label\` (string) - Specifies the label for each radio group.
- \`description\` (string) - Specifies the text displayed below each radio group label.

You must set the current value in the \`preferences.stickyColumns\` property.
",
      "inlineType": {
        "name": "CollectionPreferencesProps.StickyColumnsPreference",
        "properties": [
          {
            "name": "firstColumns",
            "optional": true,
            "type": "CollectionPreferencesProps.StickyColumnPreference",
          },
          {
            "name": "lastColumns",
            "optional": true,
            "type": "CollectionPreferencesProps.StickyColumnPreference",
          },
        ],
        "type": "object",
      },
      "name": "stickyColumnsPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.StickyColumnsPreference",
    },
    {
      "description": "Configures the built-in "striped rows" preference.
If you set it, the component displays this preference in the modal.

It contains the following:
- \`label\` (string) - Specifies the label for the option checkbox.
- \`description\` (string) - Specifies the text displayed below the checkbox label.

You must set the current value in the \`preferences.stripedRows\` property.",
      "i18nTag": true,
      "inlineType": {
        "name": "CollectionPreferencesProps.StripedRowsPreference",
        "properties": [
          {
            "name": "description",
            "optional": true,
            "type": "string",
          },
          {
            "name": "label",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "stripedRowsPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.StripedRowsPreference",
    },
    {
      "description": "Specifies the title of the preferences modal dialog. It is also used as an \`aria-label\` for the trigger button.",
      "i18nTag": true,
      "name": "title",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Configures the built-in visible sections preference for cards or visible columns for table.
Recommended for cards. For table use \`contentDisplayPreference\` instead.

Cannot be used together with \`contentDisplayPreference\`.

If you set it, the component displays this preference in the modal.

It contains the following:
- \`title\` (string) - Specifies the text displayed at the top of the preference.
- \`options\` - Specifies an array of groups of options for visible content selection.

Each group of options contains the following:
- \`label\` (string) - The text to display as a title for the options group.
- \`options\` - Specifies an array of options in the group. Each option contains the following:
  - \`id\` (string) - Corresponds to a column \`id\` for tables or to a section \`id\` for cards.
  - \`label\` (string) - Specifies a short description of the content.
  - \`editable\` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is \`true\` by default.

You must set the current list of visible content \`id\`s in the \`preferences.visibleContent\` property.

**Deprecated** in table, replaced by \`contentDisplayPreference\`.
",
      "inlineType": {
        "name": "CollectionPreferencesProps.VisibleContentPreference",
        "properties": [
          {
            "name": "options",
            "optional": false,
            "type": "ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>",
          },
          {
            "name": "title",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "visibleContentPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.VisibleContentPreference",
    },
    {
      "description": "Configures the built-in "wrap lines" preference.
If you set it, the component displays this preference in the modal.

It contains the following:
- \`label\` (string) - Specifies the label for the option checkbox.
- \`description\` (string) - Specifies the text displayed below the checkbox label.

You must set the current value in the \`preferences.wrapLines\` property.",
      "i18nTag": true,
      "inlineType": {
        "name": "CollectionPreferencesProps.WrapLinesPreference",
        "properties": [
          {
            "name": "description",
            "optional": true,
            "type": "string",
          },
          {
            "name": "label",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "wrapLinesPreference",
      "optional": true,
      "type": "CollectionPreferencesProps.WrapLinesPreference",
    },
  ],
  "regions": [
    {
      "description": "Content displayed before the preferences. Use it to display additional information relating to the preferences.",
      "isDefault": false,
      "name": "contentBefore",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for column-layout matches the snapshot: column-layout 1`] = `
{
  "events": [],
  "functions": [],
  "name": "ColumnLayout",
  "properties": [
    {
      "defaultValue": ""none"",
      "description": "Controls whether dividers are placed between rows and columns.
Note: This is not supported when used with \`minColumnWidth\`.
",
      "inlineType": {
        "name": "ColumnLayoutProps.Borders",
        "type": "union",
        "values": [
          "none",
          "vertical",
          "horizontal",
          "all",
        ],
      },
      "name": "borders",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "1",
      "description": "Specifies the number of columns in each grid row.
When \`minColumnWidth\` is not set, only up to 4 columns are supported.",
      "name": "columns",
      "optional": true,
      "type": "number",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the default gutters between columns are removed.",
      "name": "disableGutters",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Use together with \`columns\` to specify the desired minimum width for each column in pixels.
The number of columns is determined by the value of this property, the available space,
and the maximum number of columns as defined by the \`columns\` property.
",
      "name": "minColumnWidth",
      "optional": true,
      "type": "number",
    },
    {
      "defaultValue": ""default"",
      "description": "Specifies the content type. This determines the spacing of the grid.",
      "inlineType": {
        "name": "ColumnLayoutProps.Variant",
        "type": "union",
        "values": [
          "default",
          "text-grid",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "The columns to render.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for container matches the snapshot: container 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Container",
  "properties": [
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.",
      "inlineType": {
        "name": "ContainerProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "ContainerProps.AnalyticsMetadata",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the container content has padding. If \`true\`, removes the default padding from the content area.",
      "name": "disableContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the container header has padding. If \`true\`, removes the default padding from the header.",
      "name": "disableHeaderPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Enabling this property will make the container to fit into available height. If content is too short, the container
will stretch, if too long, the container will shrink and show vertical scrollbar.
Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch
all containers to the height of the longest one, to avoid extra vertical scroll areas.
",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.
You can define different positions and sizes for the media element within the container.
* \`content\` - Use this slot to render your media element. We support \`img\`, \`video\`, \`picture\`, and \`iframe\` elements.

* \`position\` - Defines the media slot's position within the container. Defaults to \`top\`.

* \`width\` - Defines the width of the media slot when positioned on the side. Corresponds to the \`width\` CSS-property.
When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.
Note: This value is considered only when \`position\` is set to \`side\`.
If no width is provided, the media slot will take a maximum of 66% of the container's width.

* \`height\` - Defines the height of the media slot when position on the top. Corresponds to the \`height\` CSS-property.
When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if \`position\` is set to \`top\`.
If no height is provided, the media slot will be displayed at its full height.

",
      "inlineType": {
        "name": "ContainerProps.Media",
        "properties": [
          {
            "name": "content",
            "optional": false,
            "type": "React.ReactNode",
          },
          {
            "name": "height",
            "optional": true,
            "type": "number | string",
          },
          {
            "name": "position",
            "optional": true,
            "type": ""side" | "top"",
          },
          {
            "name": "width",
            "optional": true,
            "type": "number | string",
          },
        ],
        "type": "object",
      },
      "name": "media",
      "optional": true,
      "type": "ContainerProps.Media",
    },
    {
      "defaultValue": ""default"",
      "description": "Specify a container variant with one of the following:
* \`default\` - Use this variant in standalone context.
* \`stacked\` - Use this variant adjacent to other stacked containers (such as a container,
              table).",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "default",
          "stacked",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`stacked\` variant",
    },
  ],
  "regions": [
    {
      "description": "Main content of the container.",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Footer of the container.",
      "isDefault": false,
      "name": "footer",
    },
    {
      "description": "Heading element of the container. Use the [header component](/components/header/).",
      "isDefault": false,
      "name": "header",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for content-layout matches the snapshot: content-layout 1`] = `
{
  "events": [],
  "functions": [],
  "name": "ContentLayout",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Set it to \`true\` if your page uses the [app layout component](/components/app-layout/) with \`disableContentPaddings=true\`.
In that case, the content layout will become sensitive to the state of drawers in app layout and leave the necessary padding to avoid visual overlap with those elements.",
      "name": "defaultPadding",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines whether the layout has an overlap between the header and content.
If true, the overlap will be removed.",
      "name": "disableOverlap",
      "optional": true,
      "type": "boolean",
      "visualRefreshTag": "",
    },
    {
      "description": "Use this property to style the background of the header.
It can be:
* a string representing the CSS \`background\` value for the header element.
* a function that receives the mode ("light" or "dark") as a parameter and returns a string.

 The header background spans across the full available width, independent of the specified \`maxContentWidth\`.
 If set, the component will not add the default background color to the header.
",
      "name": "headerBackgroundStyle",
      "optional": true,
      "type": "((mode: "dark" | "light") => string) | string",
    },
    {
      "description": "Determines the visual treatment for the header. Specifically:
* \`default\` - Does not apply any visual treatment.
* \`high-contrast\` - Applies high-contrast to the background of the header and the elements contained within it.
    If you are using the AppLayout component, set \`headerVariant="high-contrast"\` to apply the same treatment to the breadcrumbs and notifications slots.
* \`divider\` - Adds a horizontal separator between the header and the content.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "default",
          "high-contrast",
          "divider",
        ],
      },
      "name": "headerVariant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`high-contrast\` headerVariant",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Maximum width for the content.
If set, all elements of the content layout (header, content, notifications, breadcrumbs) will be center-aligned and have the desired maximum width.
If not set, all elements will occupy the full available width.",
      "name": "maxContentWidth",
      "optional": true,
      "type": "number",
    },
  ],
  "regions": [
    {
      "description": "Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the content layout:
* if your application does not use the [app layout component](/components/app-layout/), which already offers a \`breadcrumbs\` slot.
* If your page uses the [app layout component](/components/app-layout/) with \`disableContentPaddings=true\`.
Do not use in conjunction with the \`breadcrumbs\` slot in the [app layout component](/components/app-layout/).
",
      "isDefault": false,
      "name": "breadcrumbs",
    },
    {
      "description": "Use this slot to render the main content of the layout below the header.",
      "displayName": "content",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Use this slot to render the header content for the layout.",
      "isDefault": false,
      "name": "header",
    },
    {
      "description": "Use this slot to display [notifications](/components/flashbar/) to the content layout:
* If your page does not use the [app layout component](/components/app-layout/), which already offers a \`notifications\` slot.
* If your page uses the [app layout component](/components/app-layout/) with \`disableContentPaddings=true\`.
Do not use in conjunction with the \`notifications\` slot in the [app layout component](/components/app-layout/).
",
      "isDefault": false,
      "name": "notifications",
    },
    {
      "description": "Use this slot to add a secondary element inside the header. The secondary element will be displayed next to main header and occupy 25% of the available space.
Note that the secondary header will not have a high-contrast treatement, even if you set \`headerVariant\` to \`high-contrast\`.",
      "isDefault": false,
      "name": "secondaryHeader",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for copy-to-clipboard matches the snapshot: copy-to-clipboard 1`] = `
{
  "events": [],
  "functions": [],
  "name": "CopyToClipboard",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,
and to distinguish between multiple buttons with identical visible text. The text will also be added to the \`title\` attribute of the button.",
      "name": "copyButtonAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The text of the copy button (for variant="button").",
      "name": "copyButtonText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).",
      "name": "copyErrorText",
      "optional": false,
      "type": "string",
    },
    {
      "description": "The message shown when the text is copied successfully.",
      "name": "copySuccessText",
      "optional": false,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "By default, the popover is constrained to fit inside its parent
[stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
Enabling this property will allow the popover to be rendered in the root stack context using
[React Portals](https://reactjs.org/docs/portals.html).
Enable this setting if you need the popover to ignore its parent stacking context.",
      "name": "popoverRenderWithPortal",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The text content to be copied. It is displayed next to the copy button when \`variant="inline"\`, and is not shown otherwise.",
      "name": "textToCopy",
      "optional": false,
      "type": "string",
    },
    {
      "defaultValue": ""button"",
      "description": "Determines the general styling of the copy button as follows:
* \`button\` to display a standalone secondary button with an icon, and \`copyButtonText\` as text.
* \`icon\` to display a standalone icon-only (no text) button.
* \`inline\` to display an icon-only (no text) button within a text context.

Defaults to \`button\`.
",
      "inlineType": {
        "name": "CopyToClipboardProps.Variant",
        "type": "union",
        "values": [
          "button",
          "icon",
          "inline",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for date-input matches the snapshot: date-input 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
  ],
  "functions": [],
  "name": "DateInput",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The current input value, in YYYY-MM-DD format.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for date-picker matches the snapshot: date-picker 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing, pasting, or selecting a value).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "CalendarProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "CalendarProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
  ],
  "functions": [
    {
      "description": "Sets the browser focus on the UI control",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "DatePicker",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides a reason why a particular date in the calendar is not enabled (only when \`isDateEnabled\` returns \`false\`).
If provided, the date becomes focusable.",
      "inlineType": {
        "name": "CalendarProps.DateDisabledReasonFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "dateDisabledReason",
      "optional": true,
      "type": "CalendarProps.DateDisabledReasonFunction",
    },
    {
      "defaultValue": "false",
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "'day'",
      "description": "Specifies the granularity at which users will be able to select a date.
Defaults to \`day\`.",
      "inlineType": {
        "name": "CalendarProps.Granularity",
        "type": "union",
        "values": [
          "day",
          "month",
        ],
      },
      "name": "granularity",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by
the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "DatePickerProps.I18nStrings",
        "properties": [
          {
            "name": "currentMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextYearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousYearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "todayAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "DatePickerProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Defines whether a particular date is enabled in the calendar or not.
If you disable a date in the calendar, users can still enter this date using a keyboard.
We recommend that you also validate these constraints on the client-side and server-side
as you would for other form elements.",
      "inlineType": {
        "name": "CalendarProps.IsDateEnabledFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isDateEnabled",
      "optional": true,
      "type": "CalendarProps.IsDateEnabledFunction",
    },
    {
      "defaultValue": "''",
      "description": "Specifies the locale to use to render month names and determine the starting day of the week.
If you don't provide this, the locale is determined by the page and browser locales.
Supported values and formats are listed in the
[JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).",
      "name": "locale",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`i18nStrings.nextMonthAriaLabel\` instead.",
      "description": "Specifies an \`aria-label\` for the 'next month' button.",
      "name": "nextMonthAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies a function that generates the \`aria-label\` for the 'open calendar' button. The \`selectedDate\` parameter is
a human-readable localised string representing the current value of the input.
(for example, \`\`selectedDate => 'Choose Date' + (selectedDate ? \`, selected date is \${selectedDate}\` : '')\`\`)",
      "inlineType": {
        "name": "DatePickerProps.OpenCalendarAriaLabel",
        "parameters": [
          {
            "name": "selectedDate",
            "type": "null | string",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "openCalendarAriaLabel",
      "optional": true,
      "type": "DatePickerProps.OpenCalendarAriaLabel",
    },
    {
      "defaultValue": "''",
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`i18nStrings.previousMonthAriaLabel\` instead.",
      "description": "Specifies an \`aria-label\` for the 'previous month' button.",
      "name": "previousMonthAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Do not use read-only inputs outside of a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines the starting day of the week. The values 0-6 map to Sunday-Saturday.
By default the starting day of the week is defined by the locale, but you can use this property to override it.",
      "name": "startOfWeek",
      "optional": true,
      "type": "number",
    },
    {
      "deprecatedTag": "Use \`i18nString.todayAriaLabel\` instead.",
      "description": "Used as part of the \`aria-label\` for today's date in the calendar.",
      "name": "todayAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "''",
      "description": "The current input value, in YYYY-MM-DD format.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for date-range-picker matches the snapshot: date-range-picker 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when keyboard focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Fired whenever a user changes the component's value.
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "DateRangePickerProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "DateRangePickerProps.Value | null",
          },
        ],
        "type": "object",
      },
      "detailType": "DateRangePickerProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Fired when keyboard focus is set onto the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
  ],
  "functions": [
    {
      "description": "Sets the browser focus on the UI control",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "DateRangePicker",
  "properties": [
    {
      "defaultValue": "'iso'",
      "description": "Specifies the time format to use for displaying the absolute time range.
It can take the following values:
* \`iso\`: ISO 8601 format, e.g.: 2024-01-30T13:32:32+01:00 (or 2024-01-30 when \`dateOnly\` is true)
* \`long-localized\`: a more human-readable, localized format, e.g.: January 30, 2024, 13:32:32 (UTC+1) (or January 30, 2024 when \`dateOnly\` is true)

Defaults to \`iso\`.
",
      "inlineType": {
        "name": "DateRangePickerProps.AbsoluteFormat",
        "type": "union",
        "values": [
          "iso",
          "long-localized",
        ],
      },
      "name": "absoluteFormat",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an additional control displayed in the dropdown, located below the range calendar.",
      "inlineType": {
        "name": "DateRangePickerProps.AbsoluteRangeControl",
        "parameters": [
          {
            "name": "selectedRange",
            "type": "DateRangePickerProps.PendingAbsoluteValue",
          },
          {
            "name": "setSelectedRange",
            "type": "React.Dispatch<React.SetStateAction<DateRangePickerProps.PendingAbsoluteValue>>",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "customAbsoluteRangeControl",
      "optional": true,
      "type": "DateRangePickerProps.AbsoluteRangeControl",
    },
    {
      "description": "Specifies which time units to allow in the custom relative range control.",
      "name": "customRelativeRangeUnits",
      "optional": true,
      "type": "Array<DateRangePickerProps.TimeUnit>",
    },
    {
      "description": "Provides a reason why a particular date in the calendar is not enabled (only when \`isDateEnabled\` returns \`false\`).
If provided, the date becomes focusable.",
      "inlineType": {
        "name": "DateRangePickerProps.DateDisabledReasonFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "dateDisabledReason",
      "optional": true,
      "type": "DateRangePickerProps.DateDisabledReasonFunction",
    },
    {
      "defaultValue": "false",
      "description": "Hides time inputs and changes the input format to date-only, e.g. 2021-04-06.
Do not use \`dateOnly\` flag conditionally. The component does not trigger the value update
when the flag changes which means the value format can become inconsistent.

Default: \`false\`.
",
      "name": "dateOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Specifies that the component is disabled, preventing the user from
modifying the value. A disabled component cannot receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "A function that defines timezone offset from UTC in minutes for selected dates.
Use it to define time relative to the desired timezone.
The function is called for the start date and the end date and takes a UTC date
corresponding the selected value as an argument.

Has no effect when \`dateOnly\` is true.

Default: the user's current time offset as provided by the browser.
",
      "inlineType": {
        "name": "DateRangePickerProps.GetTimeOffsetFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "number",
        "type": "function",
      },
      "name": "getTimeOffset",
      "optional": true,
      "type": "DateRangePickerProps.GetTimeOffsetFunction",
    },
    {
      "description": "Specifies whether to hide the time offset in the displayed absolute time range.
Defaults to \`false\`.",
      "name": "hideTimeOffset",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "DateRangePickerProps.I18nStrings",
        "properties": [
          {
            "name": "absoluteModeTitle",
            "optional": true,
            "type": "string",
          },
          {
            "name": "applyButtonLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "ariaDescribedby",
            "optional": true,
            "type": "string",
          },
          {
            "name": "ariaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "ariaLabelledby",
            "optional": true,
            "type": "string",
          },
          {
            "name": "cancelButtonLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "clearButtonLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "customRelativeRangeDurationLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "customRelativeRangeDurationPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "customRelativeRangeOptionDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "customRelativeRangeOptionLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "customRelativeRangeUnitLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "dateTimeConstraintText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "endDateLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "endTimeLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "formatRelativeRange",
            "optional": true,
            "type": "(value: DateRangePickerProps.RelativeValue) => string",
          },
          {
            "name": "formatUnit",
            "optional": true,
            "type": "(unit: DateRangePickerProps.TimeUnit, value: number) => string",
          },
          {
            "name": "modeSelectionLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousMonthAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "relativeModeTitle",
            "optional": true,
            "type": "string",
          },
          {
            "name": "relativeRangeSelectionHeading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "renderSelectedAbsoluteRangeAriaLive",
            "optional": true,
            "type": "(startDate: string, endDate: string) => string",
          },
          {
            "name": "startDateLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "startTimeLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "todayAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "DateRangePickerProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "() => true",
      "description": "A function that defines whether a particular date should be enabled
in the calendar or not. Note that disabling a date in the calendar
still allows users to enter this date via keyboard. We therefore
recommend that you also validate these constraints client- and
server-side, in the same way as for other form elements.",
      "inlineType": {
        "name": "DateRangePickerProps.IsDateEnabledFunction",
        "parameters": [
          {
            "name": "date",
            "type": "Date",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isDateEnabled",
      "optional": true,
      "type": "DateRangePickerProps.IsDateEnabledFunction",
    },
    {
      "defaultValue": "() => ({ valid: true })",
      "description": "A function that defines whether a particular range is valid or not.
Ensure that your function checks for missing fields in the value.
",
      "inlineType": {
        "name": "DateRangePickerProps.ValidationFunction",
        "parameters": [
          {
            "name": "value",
            "type": "DateRangePickerProps.Value | null",
          },
        ],
        "returnType": "DateRangePickerProps.ValidationResult",
        "type": "function",
      },
      "name": "isValidRange",
      "optional": false,
      "type": "DateRangePickerProps.ValidationFunction",
    },
    {
      "defaultValue": "''",
      "description": "The locale to be used for rendering month names and defining the
starting date of the week. If not provided, it will be determined
from the page and browser locales. Supported values and formats
are as-per the [JavaScript Intl API specification](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation).",
      "name": "locale",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text that is rendered when the value is empty.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'default'",
      "description": "Determines the range selector mode as follows:
* \`default\` for combined absolute/relative range selector.
* \`absolute-only\` for absolute-only range selector.
* \`relative-only\` for relative-only range selector.

By default, the range selector mode is \`default\`.
",
      "inlineType": {
        "name": "DateRangePickerProps.RangeSelectorMode",
        "type": "union",
        "values": [
          "default",
          "absolute-only",
          "relative-only",
        ],
      },
      "name": "rangeSelectorMode",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Specifies that the component is read-only, preventing the user from
modifying the value. A read-only component can receive focus.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "[]",
      "description": "A list of relative time ranges that are shown as suggestions.",
      "name": "relativeOptions",
      "optional": false,
      "type": "ReadonlyArray<DateRangePickerProps.RelativeOption>",
    },
    {
      "defaultValue": "true",
      "description": "Specifies whether the component should show a button that
allows the user to clear the selected value.",
      "name": "showClearButton",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Starting day of the week. [0-6] maps to [Sunday-Saturday].
By default the starting day of the week is defined by the locale,
but you can override it using this property.",
      "name": "startOfWeek",
      "optional": true,
      "type": "number",
    },
    {
      "defaultValue": "'hh:mm:ss'",
      "description": "Specifies the format of the time input for absolute ranges.
Use to restrict the granularity of time that the user can enter.

Has no effect when \`dateOnly\` is true.
",
      "inlineType": {
        "name": "TimeInputProps.Format",
        "type": "union",
        "values": [
          "hh",
          "hh:mm",
          "hh:mm:ss",
        ],
      },
      "name": "timeInputFormat",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Use \`getTimeOffset\` instead.",
      "description": "The time offset from UTC in minutes that should be used to
display and produce values.
Has no effect when \`dateOnly\` is true.

Default: the user's current time offset as provided by the browser.
",
      "name": "timeOffset",
      "optional": true,
      "type": "number",
    },
    {
      "description": "The current date range value. Can be either an absolute time range
or a relative time range.",
      "name": "value",
      "optional": false,
      "type": "DateRangePickerProps.Value | null",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for drawer matches the snapshot: drawer 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Drawer",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "I18nStrings",
        "properties": [
          {
            "name": "loadingText",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Renders the drawer in a loading state. We recommend that you also set a \`loadingText\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Main content of the drawer.",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Header of the drawer.
It should contain the only \`h2\` used in the drawer.
",
      "isDefault": false,
      "name": "header",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for expandable-section matches the snapshot: expandable-section 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the state changes (that is, when the user expands or collapses the component).
The event \`detail\` contains the current value of the \`expanded\` property.",
      "detailInlineType": {
        "name": "ExpandableSectionProps.ChangeDetail",
        "properties": [
          {
            "name": "expanded",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "ExpandableSectionProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "ExpandableSection",
  "properties": [
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.",
      "inlineType": {
        "name": "ExpandableSectionProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "ExpandableSectionProps.AnalyticsMetadata",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled
manner even if you provide a value for this property.",
      "name": "defaultExpanded",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines whether the content section's default padding is removed. This default padding is only present for the \`container\` variant.",
      "name": "disableContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled
manner if you provide a value for this property.",
      "name": "expanded",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds \`aria-label\` to the header element.
Use to assign unique labels when there are multiple expandable sections with the same header text on one page.",
      "name": "headerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.
Behaves similar to the Header component counter.",
      "name": "headerCounter",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Supplementary text below the heading. Use with the container, default or footer variants.",
      "name": "headerDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Using this
property does not change the visual appearance of the component. Note that this only works with the \`headerText\`
slot (not with the deprecated \`header\`), and not with the navigation variant.",
      "inlineType": {
        "name": "ExpandableSectionProps.HeadingTag",
        "type": "union",
        "values": [
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
        ],
      },
      "name": "headingTagOverride",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""default"",
      "description": "The possible variants of an expandable section are as follows:
 * \`default\` - Use this variant in any context.
 * \`footer\` - Use this variant in container footers.
 * \`container\` - Use this variant in a detail page alongside other containers.
 * \`navigation\` - Use this variant in the navigation panel with anchors and custom styled content.
   It doesn't have any default styles.
* \`stacked\` - Use this variant directly adjacent to other stacked containers (such as a container, table).
* \`inline\` - Use this variant in any context where you need reduced padding around the header.",
      "inlineType": {
        "name": "ExpandableSectionProps.Variant",
        "type": "union",
        "values": [
          "default",
          "footer",
          "container",
          "navigation",
          "stacked",
          "inline",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`stacked\` variant",
    },
  ],
  "regions": [
    {
      "description": "Primary content displayed in the expandable section element.",
      "isDefault": true,
      "name": "children",
    },
    {
      "deprecatedTag": "Use \`headerText\` instead.",
      "description": "",
      "isDefault": false,
      "name": "header",
    },
    {
      "description": "Actions for the header. Use with the default or container variant.",
      "isDefault": false,
      "name": "headerActions",
    },
    {
      "description": "The area next to the heading, used to display an Info link. Use with the container variant.",
      "isDefault": false,
      "name": "headerInfo",
    },
    {
      "description": "The heading text. Use plain text. When using the container variant, you can use additional header props like \`headerDescription\` and \`headerCounter\` to display other elements in the header.",
      "isDefault": false,
      "name": "headerText",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for file-dropzone matches the snapshot: file-dropzone 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects new file(s), or removes a file.
The event \`detail\` contains the current value of the component.",
      "detailInlineType": {
        "name": "FileDropzoneProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "Array<File>",
          },
        ],
        "type": "object",
      },
      "detailType": "FileDropzoneProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "FileDropzone",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Children of the Dropzone.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for file-input matches the snapshot: file-input 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects new file(s), or removes a file.
The event \`detail\` contains the current value of the component.",
      "detailInlineType": {
        "name": "FileInputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "Array<File>",
          },
        ],
        "type": "object",
      },
      "detailType": "FileInputProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the file upload button.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "FileInput",
  "properties": [
    {
      "description": "Specifies the native file input \`accept\` attribute to describe the allow-list of file types.",
      "name": "accept",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the file input element. Use this to provide an accessible name for file inputs
that don't have visible text, and to distinguish between multiple file inputs with identical visible text.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add aria-required to the file upload control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Text displayed in the file input component. Used as the aria label if ariaLabel is not defined.",
      "name": "children",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the native file input \`multiple\` attribute to allow users entering more than one file.",
      "name": "multiple",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the currently selected file(s).
If you want to clear the selection, use empty array.",
      "name": "value",
      "optional": false,
      "type": "ReadonlyArray<File>",
    },
    {
      "description": "Variant of the file input. Defaults to "button".",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "button",
          "icon",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for file-token-group matches the snapshot: file-token-group 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": " Called when the user clicks on the dismiss button. The token won't be automatically removed.
 Make sure that you add a listener to this event to update your application state.",
      "detailInlineType": {
        "name": "FileTokenGroupProps.DismissDetail",
        "properties": [
          {
            "name": "fileIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "FileTokenGroupProps.DismissDetail",
      "name": "onDismiss",
    },
  ],
  "functions": [],
  "name": "FileTokenGroup",
  "properties": [
    {
      "description": "Specifies the direction in which tokens are aligned (\`horizontal | vertical\`).",
      "inlineType": {
        "name": "FileTokenGroupProps.Alignment",
        "type": "union",
        "values": [
          "horizontal",
          "vertical",
        ],
      },
      "name": "alignment",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the localized strings required by the component:
* \`removeFileAriaLabel\` (function): A function to render the ARIA label for file token remove button.
* \`errorIconAriaLabel\` (string): The ARIA label to be shown on the error file icon.
* \`warningIconAriaLabel\` (string): The ARIA label to be shown on the warning file icon.
* \`formatFileSize\` (function): (Optional) A function that takes file size in bytes, and produces a formatted string.
* \`formatFileLastModified\` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.",
      "inlineType": {
        "name": "FileTokenGroupProps.I18nStrings",
        "properties": [
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "formatFileLastModified",
            "optional": true,
            "type": "(date: Date) => string",
          },
          {
            "name": "formatFileSize",
            "optional": true,
            "type": "(sizeInBytes: number) => string",
          },
          {
            "name": "limitShowFewer",
            "optional": true,
            "type": "string",
          },
          {
            "name": "limitShowMore",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeFileAriaLabel",
            "optional": true,
            "type": "(fileIndex: number) => string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "FileTokenGroupProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of objects representing token items. Each token has the following properties:
- \`file\` (string) - File value.
- \`loading\` (boolean) - (Optional) Determine whether the token is loading.
- \`errorText\` (string) - (Optional) Text that displays as a validation error message.
- \`warningText\` (string) - (Optional) - Text that displays as a validation warning message.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<FileTokenGroupProps.Item>",
    },
    {
      "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.",
      "name": "limit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Adds an \`aria-label\` to the "Show fewer" button.
Use to assign unique labels when there are multiple file token groups with the same \`limitShowFewer\` label on one page.",
      "name": "limitShowFewerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the "Show more" button.
Use to assign unique labels when there are multiple file token groups with the same \`limitShowMore\` label on one page.",
      "name": "limitShowMoreAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file last modified timestamp in the token. Use \`i18nStrings.formatFileLastModified\` to customize it.",
      "name": "showFileLastModified",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file size in the token. Use \`i18nStrings.formatFileSize\` to customize it.",
      "name": "showFileSize",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file thumbnail in the token. Only supported for images.",
      "name": "showFileThumbnail",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for file-upload matches the snapshot: file-upload 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects new file(s), or removes a file.
The event \`detail\` contains the current value of the component.",
      "detailInlineType": {
        "name": "FileUploadProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "Array<File>",
          },
        ],
        "type": "object",
      },
      "detailType": "FileUploadProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the file upload button.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "FileUpload",
  "properties": [
    {
      "description": "Specifies the native file input \`accept\` attribute to describe the allow-list of file types.",
      "name": "accept",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add aria-required to the file upload control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of file errors corresponding to the files in the \`value\`.",
      "name": "fileErrors",
      "optional": true,
      "type": "ReadonlyArray<null | string>",
    },
    {
      "description": "Alignment of the file tokens. Defaults to "vertical".",
      "inlineType": {
        "name": "FileUploadProps.FileTokenAlignment",
        "type": "union",
        "values": [
          "vertical",
          "horizontal",
        ],
      },
      "name": "fileTokenAlignment",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of file warnings corresponding to the files in the \`value\`.",
      "name": "fileWarnings",
      "optional": true,
      "type": "ReadonlyArray<null | string>",
    },
    {
      "description": "An object containing all the localized strings required by the component:
* \`uploadButtonText\` (function): A function to render the text of the file upload button. It takes \`multiple\` attribute to define plurality.
* \`dropzoneText\` (function): A function to render the text shown in the dropzone. It takes \`multiple\` attribute to define plurality.
* \`removeFileAriaLabel\` (function): A function to render the ARIA label for file token remove button.
* \`limitShowFewer\` (string): The text of the show more tokens button.
* \`limitShowMore\` (string): The text of the show fewer tokens button.
* \`errorIconAriaLabel\` (string): The ARIA label to be shown on the error file icon.
* \`warningIconAriaLabel\` (string): The ARIA label to be shown on the warning file icon.
* \`formatFileSize\` (function): (Optional) A function that takes file size in bytes, and produces a formatted string.
* \`formatFileLastModified\` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.",
      "inlineType": {
        "name": "FileUploadProps.I18nStrings",
        "properties": [
          {
            "name": "dropzoneText",
            "optional": true,
            "type": "(multiple: boolean) => string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "formatFileLastModified",
            "optional": true,
            "type": "(date: Date) => string",
          },
          {
            "name": "formatFileSize",
            "optional": true,
            "type": "(sizeInBytes: number) => string",
          },
          {
            "name": "limitShowFewer",
            "optional": true,
            "type": "string",
          },
          {
            "name": "limitShowMore",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeFileAriaLabel",
            "optional": true,
            "type": "(fileIndex: number) => string",
          },
          {
            "name": "uploadButtonText",
            "optional": true,
            "type": "(multiple: boolean) => string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "FileUploadProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the native file input \`multiple\` attribute to allow users entering more than one file.",
      "name": "multiple",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file last modified timestamp in the token. Use \`i18nStrings.formatFileLastModified\` to customize it.",
      "name": "showFileLastModified",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file size in the token. Use \`i18nStrings.formatFileSize\` to customize it.",
      "name": "showFileSize",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Show file thumbnail in the token. Only supported for images.",
      "name": "showFileThumbnail",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the maximum number of displayed file tokens. If the property isn't set, all of the tokens are displayed.",
      "name": "tokenLimit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the currently selected file(s).
If you want to clear the selection, use empty array.",
      "name": "value",
      "optional": false,
      "type": "ReadonlyArray<File>",
    },
  ],
  "regions": [
    {
      "description": "Constraint text that is displayed below the control. Use this to provide additional information about file size limit, etc.",
      "isDefault": false,
      "name": "constraintText",
    },
    {
      "description": "Text that displays as a validation error message.",
      "isDefault": false,
      "name": "errorText",
    },
    {
      "description": "Text that displays as a validation warning message.",
      "isDefault": false,
      "name": "warningText",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for flashbar matches the snapshot: flashbar 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Flashbar",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component. The object should contain:
* \`ariaLabel\` - Specifies the ARIA label for the list of notifications.

If \`stackItems\` is set to \`true\`, it should also contain:

* \`notificationBarAriaLabel\` - (optional) Specifies the ARIA label for the notification bar
* \`notificationBarText\` - (optional) Specifies the text shown in the notification bar
* \`errorIconAriaLabel\` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type \`error\`.
* \`warningIconAriaLabel\` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type \`warning\`.
* \`infoIconAriaLabel\` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type \`info\`.
* \`successIconAriaLabel\` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type \`success\`.
* \`inProgressIconAriaLabel\` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type \`in-progress\` or with \`loading\` set to \`true\`.",
      "i18nTag": true,
      "inlineType": {
        "name": "FlashbarProps.I18nStrings",
        "properties": [
          {
            "name": "ariaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inProgressIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "infoIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "notificationBarAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "notificationBarText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "successIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "FlashbarProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies flash messages that appear in the same order that they are listed.
The value is an array of flash message definition objects.
A flash message object contains the following properties:
* \`header\` (ReactNode) - Specifies the heading text.
* \`content\` (ReactNode) - Specifies the primary text displayed in the flash element.
* \`type\` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: \`success, error, warning, info\`. The default is \`info\`.
* \`loading\` (boolean) - Replaces the status icon with a spinner and forces the type to \`info\`.
* \`dismissible\` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.
When a user clicks on this button the \`onDismiss\` handler is called.
* \`dismissLabel\` (string) - Specifies an \`aria-label\` for to the dismiss icon button for improved accessibility.
* \`statusIconAriaLabel\` (string) - Specifies an \`aria-label\` for to the status icon for improved accessibility.
If not provided, \`i18nStrings.{type}IconAriaLabel\` will be used as a fallback.
* \`ariaRole\` (string) - For flash messages added after page load, specifies how this message is communicated to assistive
technology. Use "status" for status updates or informational content. Use "alert" for important messages that need the
user's attention.
* \`action\` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,
our UX guidelines only allow you to add a button.
* \`buttonText\` (string) - Specifies that an action button should be displayed, with the specified text.
When a user clicks on this button the \`onButtonClick\` handler is called.
If the \`action\` property is set, this property is ignored. **Deprecated**, replaced by \`action\`.
* \`onButtonClick\` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
  using the \`action\` property. **Deprecated**, replaced by \`action\`.
* \`id\` (string) - Specifies a unique flash message identifier. This property is used in two ways:
  1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
  2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<FlashbarProps.MessageDefinition>",
    },
    {
      "description": "Specifies whether flash messages should be stacked.",
      "name": "stackItems",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for form matches the snapshot: form 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Form",
  "properties": [
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.
* \`flowType\` - Identifies the type of flow represented by the component.
* \`resourceType\` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.",
      "inlineType": {
        "name": "FormProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "flowType",
            "optional": true,
            "type": "FlowType",
          },
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
          {
            "name": "resourceType",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "FormProps.AnalyticsMetadata",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides a text alternative for the error icon in the error alert.",
      "i18nTag": true,
      "name": "errorIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""full-page"",
      "deprecatedTag": "You can safely remove this property as there is no longer any visual difference between \`full-page\` and \`embedded\` variants.",
      "description": "Specify a form variant with one of the following:
* \`full-page\` - Use this variant when the form contains the entire content of the page.
* \`embedded\` - Use this variant when the form doesn't occupy the full page.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "full-page",
          "embedded",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with \`direction="horizontal"\` and \`size="xs"\`.",
      "isDefault": false,
      "name": "actions",
    },
    {
      "description": "Specifies the main form content.",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Specifies a form-level validation message.",
      "isDefault": false,
      "name": "errorText",
    },
    {
      "description": "Specifies the form title and optional description. Use the [header component](/components/header/).",
      "isDefault": false,
      "name": "header",
    },
    {
      "description": "Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.",
      "isDefault": false,
      "name": "secondaryActions",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for form-field matches the snapshot: form-field 1`] = `
{
  "events": [],
  "functions": [],
  "name": "FormField",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The ID of the primary form control. You can use this to set the
\`for\` attribute of a label for accessibility.
If you don't set this property, the control group automatically sets
the label to the ID of an inner form control (for example, an [input](/components/input) component).
This only works well if you're using a single control in the form field.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "FormFieldProps.I18nStrings",
        "properties": [
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "warningIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "FormFieldProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the primary control should expand to 12 columns.
By default (or when this property is set to \`false\`), the primary control
occupies 9 columns. The secondary control uses the remaining 3 columns.
On smaller viewports, both components occupy 12 columns and stack on top of each other.

If this property is set to \`true\`, the primary control uses the full
12 columns. The secondary control (if present) also uses 12 columns, and the two
controls stack on top of each other.
",
      "name": "stretch",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "The primary form control (for example, input, textarea, etc.).",
      "displayName": "control",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Constraint text that's displayed below the control. Use this to provide
additional information about valid formats, etc.",
      "isDefault": false,
      "name": "constraintText",
    },
    {
      "description": "Detailed information about the form field that's displayed below the label.",
      "isDefault": false,
      "name": "description",
    },
    {
      "description": "Text that displays as a validation error message. If this is set to a
non-empty string, it will render the form field as invalid.",
      "isDefault": false,
      "name": "errorText",
    },
    {
      "description": "Use to display an 'Info' link next to the label.",
      "isDefault": false,
      "name": "info",
    },
    {
      "description": "The main label for the form field.",
      "isDefault": false,
      "name": "label",
    },
    {
      "description": "A secondary control. You can use this for custom actions and content.",
      "isDefault": false,
      "name": "secondaryControl",
    },
    {
      "description": "Text that displays as a validation warning message. If this is set to a
non-empty string, it will render the form field in a warning state.",
      "isDefault": false,
      "name": "warningText",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for grid matches the snapshot: grid 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Grid",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether horizontal and vertical gutters are hidden.",
      "name": "disableGutters",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "[]",
      "description": "An array of element definitions that specifies how the columns must be
arranged. Each element definition can have the following properties:
- \`colspan\` (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.
- \`offset\` (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.
- \`pull\` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.
- \`push\` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.

The value for the each property can be a number (which applies for all
breakpoints) or an object where the key is one of the supported breakpoints
(\`xxs\`, \`xs\`, \`s\`, \`m\`, \`l\`, \`xl\`) or \`default\`. The value of this key is a number of columns,
applied for that breakpoint and those above it. You must provide a \`default\` value for \`colspan\`.

We recommend that you don't use the \`pull\` and \`push\` properties of the element definition
for accessibility reasons.
",
      "name": "gridDefinition",
      "optional": true,
      "type": "ReadonlyArray<GridProps.ElementDefinition>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "The elements to align in the grid.
You can provide any elements here. The number of elements
should match the number of objects defined in the \`gridDefinition\`
property.
",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for header matches the snapshot: header 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Header",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies secondary text that's displayed to the right of the heading title. This is commonly used
to display resource counters in table and cards components.",
      "name": "counter",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
provided by the variant. Using this property does not change the visual appearance of the component.",
      "inlineType": {
        "name": "HeaderProps.HeadingTag",
        "type": "union",
        "values": [
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
        ],
      },
      "name": "headingTagOverride",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""h2"",
      "description": "Specifies the variant of the header:
* \`h1\` - Use this for page level headers.
* \`h2\` - Use this for container level headers.
* \`h3\` - Use this for section level headers.
* \`awsui-h1-sticky\` - Use this for sticky headers in cards and tables.",
      "inlineType": {
        "name": "HeaderProps.Variant",
        "type": "union",
        "values": [
          "h1",
          "h2",
          "h3",
          "awsui-h1-sticky",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`awsui-h1-sticky\` variant",
    },
  ],
  "regions": [
    {
      "description": "Actions for the container.",
      "isDefault": false,
      "name": "actions",
    },
    {
      "description": "The heading text. Plain text is recommended. The component renders the
HTML heading tag based on the specified \`variant\` or \`headingTagOverride\`.",
      "displayName": "title",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Supplementary text below the heading.",
      "isDefault": false,
      "name": "description",
    },
    {
      "description": "Area next to the heading to display an Info link.",
      "isDefault": false,
      "name": "info",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for help-panel matches the snapshot: help-panel 1`] = `
{
  "events": [],
  "functions": [],
  "name": "HelpPanel",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Renders the panel in a loading state. We recommend that you also set a \`loadingText\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text that's displayed when the panel is in a loading state.",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Main content of the help panel.
Use \`p, a, h3, h4, h5, span, div, ul, ol, li, code, pre, dl, dt, dd, hr, br, i, em, b, strong\` tags to format the content.
Use \`code\` for inline code or \`pre\` for code blocks.
",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Footer of the help panel.",
      "isDefault": false,
      "name": "footer",
    },
    {
      "description": "Header of the help panel.
It should contain the only \`h2\` used in the help panel.
",
      "isDefault": false,
      "name": "header",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for hotspot matches the snapshot: hotspot 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Hotspot",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""top"",
      "description": "The direction that the annotation popover should open in.
Change this property if in the default direction the annotation popover
overlaps too much with other content on the page.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "top",
          "right",
          "bottom",
          "left",
        ],
      },
      "name": "direction",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ID of this hotspot. Use this ID in your tutorial data to refer to this
hotspot's location in your application. The ID must be unique
throughout your whole application.",
      "name": "hotspotId",
      "optional": false,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""right"",
      "description": "On which side of the content the hotspot icon should be displayed.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "left",
          "right",
        ],
      },
      "name": "side",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Content that should be wrapped by the hotspot icon. Optional.
If you supply this property, the hotspot will wrap it in an element with
\`flex: 1\`, in order to give the children the maximum available space. The
hotspot icon will be placed floating next to the children. Use
this if you are wrapping e.g. an input field that should use the full
available width, or a button.

If you do not supply this property, the hotspot icon will behave as an inline
element. Use this if you want to place the hotspot icon on a label, e.g. a
checkbox's label.
",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for icon matches the snapshot: icon 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Icon",
  "properties": [
    {
      "deprecatedTag": "Use \`ariaLabel\` instead.",
      "description": "Specifies alternate text for a custom icon (using the \`url\` attribute).
This property is ignored if you use a predefined icon or if you set your custom icon using the \`svg\` slot.",
      "name": "alt",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies alternate text for the icon. We recommend that you provide this for accessibility.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the icon to be displayed.",
      "inlineType": {
        "name": "IconProps.Name",
        "type": "union",
        "values": [
          "add-plus",
          "anchor-link",
          "angle-left-double",
          "angle-left",
          "angle-right-double",
          "angle-right",
          "angle-up",
          "angle-down",
          "arrow-left",
          "arrow-right",
          "audio-full",
          "audio-half",
          "audio-off",
          "backward-10-seconds",
          "bug",
          "call",
          "calendar",
          "caret-down-filled",
          "caret-down",
          "caret-left-filled",
          "caret-right-filled",
          "caret-up-filled",
          "caret-up",
          "check",
          "contact",
          "close",
          "closed-caption",
          "closed-caption-unavailable",
          "copy",
          "command-prompt",
          "delete-marker",
          "download",
          "drag-indicator",
          "edit",
          "ellipsis",
          "envelope",
          "exit-full-screen",
          "expand",
          "external",
          "face-happy",
          "face-happy-filled",
          "face-neutral",
          "face-neutral-filled",
          "face-sad",
          "face-sad-filled",
          "file-open",
          "file",
          "filter",
          "flag",
          "folder-open",
          "folder",
          "forward-10-seconds",
          "full-screen",
          "gen-ai",
          "globe",
          "grid-view",
          "group-active",
          "group",
          "heart",
          "heart-filled",
          "insert-row",
          "key",
          "keyboard",
          "list-view",
          "location-pin",
          "lock-private",
          "map",
          "menu",
          "microphone",
          "microphone-off",
          "mini-player",
          "multiscreen",
          "notification",
          "pause",
          "play",
          "redo",
          "refresh",
          "remove",
          "resize-area",
          "script",
          "search",
          "security",
          "settings",
          "send",
          "share",
          "shrink",
          "star-filled",
          "star-half",
          "star",
          "status-in-progress",
          "status-info",
          "status-negative",
          "status-pending",
          "status-positive",
          "status-stopped",
          "status-warning",
          "subtract-minus",
          "suggestions",
          "support",
          "thumbs-down-filled",
          "thumbs-down",
          "thumbs-up-filled",
          "thumbs-up",
          "ticket",
          "transcript",
          "treeview-collapse",
          "treeview-expand",
          "undo",
          "unlocked",
          "upload-download",
          "upload",
          "user-profile-active",
          "user-profile",
          "video-off",
          "video-on",
          "video-unavailable",
          "video-camera-off",
          "video-camera-on",
          "video-camera-unavailable",
          "view-full",
          "view-horizontal",
          "view-vertical",
          "zoom-in",
          "zoom-out",
          "zoom-to-fit",
        ],
      },
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""normal"",
      "description": "Specifies the size of the icon.
If you set size to \`inherit\`, an icon size will be assigned based on the icon's inherited line height.
For icons used alongside text, ensure the icon is placed inside the acompanying text tag.
The icon will be vertically centered based on the height.
",
      "inlineType": {
        "name": "IconProps.Size",
        "type": "union",
        "values": [
          "small",
          "normal",
          "medium",
          "big",
          "large",
          "inherit",
        ],
      },
      "name": "size",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`medium\` size",
    },
    {
      "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon cannot be an SVG.
For SVG icons, use the \`svg\` slot instead.
If you set both \`url\` and \`svg\`, \`svg\` will take precedence.
",
      "name": "url",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""normal"",
      "description": "Specifies the color variant of the icon. The \`normal\` variant picks up the current color of its context.",
      "inlineType": {
        "name": "IconProps.Variant",
        "type": "union",
        "values": [
          "normal",
          "disabled",
          "error",
          "inverted",
          "link",
          "subtle",
          "success",
          "warning",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Specifies the SVG of a custom icon.
Use this property if the icon you want isn't available, and you want your custom icon to inherit colors dictated by variant or hover states.
When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element:
- has attribute \`focusable="false"\`.
- has \`viewBox="0 0 16 16"\`.

If you set the \`svg\` element as the root node of the slot, the component will automatically
- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`.
- set the stroke width based on the size of the icon.
- set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\` and ensure icon \`size\` is not set to \`inherit\`.
You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements.

If you set both \`url\` and \`svg\`, \`svg\` will take precedence.

*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software.
In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.
",
      "isDefault": false,
      "name": "svg",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for input matches the snapshot: input 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keydown\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyDown",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keyup\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyUp",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Selects all text in the input control.",
      "name": "select",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Input",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "true",
      "description": "Specifies whether to enable a browser's autocomplete functionality for this input.
In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).
To use it correctly, set the \`name\` property.
You can either provide a boolean value to set the property to "on" or "off", or specify a string value
for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
",
      "name": "autoComplete",
      "optional": true,
      "type": "boolean | string",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
      "i18nTag": true,
      "name": "clearAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a hint to the browser about the type of data a user may enter into this field.
Some devices may render a different virtual keyboard depending on this value.
This value may not be supported by all browsers or devices.",
      "inlineType": {
        "name": "InputProps.InputMode",
        "type": "union",
        "values": [
          "none",
          "text",
          "decimal",
          "numeric",
          "tel",
          "search",
          "email",
          "url",
        ],
      },
      "name": "inputMode",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the value of the \`spellcheck\` attribute on the native control.
This value controls the native browser capability to check for spelling/grammar errors.
If not set, the browser default behavior is to perform spellchecking.
For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.
Make sure it’s deactivated for fields with sensitive information to prevent
inadvertently sending data (such as user passwords) to third parties.
",
      "name": "spellcheck",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The step attribute is a number that specifies the granularity that the value
must adhere to or the keyword "any". It is valid for the numeric input types,
including the date, month, week, time, datetime-local, number and range types.",
      "inlineType": {
        "name": "InputProps.Step",
        "type": "union",
        "values": [
          "number",
          "any",
        ],
      },
      "name": "step",
      "optional": true,
      "type": "InputProps.Step",
    },
    {
      "defaultValue": "'text'",
      "description": "Specifies the type of control to render.
Inputs with a \`number\` type use the native element behavior, which might
be slightly different across browsers.",
      "inlineType": {
        "name": "InputProps.Type",
        "type": "union",
        "values": [
          "text",
          "password",
          "search",
          "number",
          "email",
          "url",
        ],
      },
      "name": "type",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text entered into the form element.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for key-value-pairs matches the snapshot: key-value-pairs 1`] = `
{
  "events": [],
  "functions": [],
  "name": "KeyValuePairs",
  "properties": [
    {
      "description": "Provides an \`aria-label\` to the Key-value pairs container.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets the \`aria-labelledby\` property on the Key-value pairs container.
If there's a visible label element that you can reference, use this instead of \`ariaLabel\`.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "1",
      "description": "Specifies the number of columns in each grid row.
Valid values are any integer between 1 and 4. It defaults to 1.",
      "name": "columns",
      "optional": true,
      "type": "number",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of either key-value pairs individual items or groups.
They could be combined.
Each item has \`type\` prop, which might be either \`group\` or \`pair\`. Defaults to \`pair\` if not specified.
Each key-value pair definition has the following properties:
  * \`type\` (string) - (Optional) Item type (pair).
  * \`label\` (string) - The key label.
  * \`info\` (React.ReactNode) - (Optional) Area next to the key to display an info link.
  * \`value\` (React.ReactNode) - The corresponding value for the key.

Each group definition has the following properties:
  * \`type\` (string) - Item type (group).
  * \`title\` (string) - (Optional) An optional title for this column.
  * \`items\` (ReadonlyArray<KeyValuePairProps.KeyValuePair>) - An array of
    key-value pair items.
",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<KeyValuePairsProps.Item>",
    },
    {
      "defaultValue": "150",
      "description": "Use to specify the desired minimum width for each column in pixels.
The number of columns is determined by the value of this property, the available space,
and the maximum number of columns as defined by the \`columns\` property.
If not set, defaults to 150.
",
      "name": "minColumnWidth",
      "optional": true,
      "type": "number",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for line-chart matches the snapshot: line-chart 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the values of the internal filter component changed.
This will **not** be called for any custom filter components you have defined in \`additionalFilters\`.",
      "detailInlineType": {
        "name": "CartesianChartProps.FilterChangeDetail",
        "properties": [
          {
            "name": "visibleSeries",
            "optional": false,
            "type": "ReadonlyArray<Series>",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.FilterChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onFilterChange",
    },
    {
      "cancelable": false,
      "description": "Called when the highlighted series has changed because of user interaction.",
      "detailInlineType": {
        "name": "CartesianChartProps.HighlightChangeDetail",
        "properties": [
          {
            "name": "highlightedSeries",
            "optional": false,
            "type": "Series | null",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.HighlightChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onHighlightChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button that appears when there is an error state.
Use this to enable the user to retry a failed request or provide another option for the user
to recover from the error.",
      "name": "onRecoveryClick",
    },
  ],
  "functions": [],
  "name": "LineChart",
  "properties": [
    {
      "description": "A description of the chart that assistive technologies can use (through \`aria-describedby\`).
Provide a concise summary of the data visualized in the chart.",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets \`aria-labelledby\` on the chart itself.
If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional content that is displayed at the bottom of the detail popover.",
      "inlineType": {
        "name": "CartesianChartProps.DetailPopoverFooter",
        "parameters": [
          {
            "name": "xValue",
            "type": "T",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "detailPopoverFooter",
      "optional": true,
      "type": "CartesianChartProps.DetailPopoverFooter<T>",
    },
    {
      "description": "A function that determines the details that are displayed in the popover for each series.
Use this for wrapping keys or values in external links, or to display a metric breakdown by adding an additional level of nested items.
The function is called with the parameters \`{ series, x, y }\` representing the series, the highlighted x coordinate value and its corresponding y value respectively,
and should return the following properties:
* \`key\` (ReactNode) - Name of the series.
* \`value\` (ReactNode) - Value of the series at the highlighted x coordinate.
* \`subItems\` (ReadonlyArray<{ key: ReactNode; value: ReactNode }>) - (Optional) List of nested key-value pairs.
* \`expandable\` (boolean) - (Optional) Determines whether the optional list of nested items provided via \`subItems\` is expandable. This is \`false\` by default.
",
      "inlineType": {
        "name": "MixedLineBarChartProps.DetailPopoverSeriesContent",
        "parameters": [
          {
            "name": "data",
            "type": "MixedLineBarChartProps.DetailPopoverSeriesData<T>",
          },
        ],
        "returnType": "MixedLineBarChartProps.DetailPopoverSeriesKeyValuePair",
        "type": "function",
      },
      "name": "detailPopoverSeriesContent",
      "optional": true,
      "type": "MixedLineBarChartProps.DetailPopoverSeriesContent<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Determines the maximum width the detail popover will be limited to.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "detailPopoverSize",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "When set to \`true\`, adds a visual emphasis on the zero baseline axis.
See the usage guidelines for more details.",
      "name": "emphasizeBaselineAxis",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Text that is displayed when the chart is in error state, i.e. when \`statusType\` is set to \`"error"\`.",
      "i18nTag": true,
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Enable this property to make the chart fit into the available height of the parent container.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "500",
      "description": "An optional pixel value number that fixes the height of the chart area.
If not set explicitly, the component will use a default height that is defined internally.
When used with \`fitHeight\`, this property defines the minimum height of the chart area.",
      "name": "height",
      "optional": true,
      "type": "number",
    },
    {
      "description": "When set to \`true\`, the default filtering dropdown is not displayed.
It is still possible to render additional filters with the \`additionalFilters\` slot.",
      "name": "hideFilter",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "When set to \`true\`, the legend beneath the chart is not displayed.
It is highly recommended to keep this set to \`false\`.",
      "name": "hideLegend",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The currently highlighted data series, usually through hovering over a series or the legend.
A value of \`null\` means no series is highlighted.
- If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onHighlightChange\` listener to update this property when a series should be highlighted (controlled behavior).
",
      "name": "highlightedSeries",
      "optional": true,
      "type": "MixedLineBarChartProps.ChartSeries<T> | null",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "CartesianChartProps.I18nStrings",
        "properties": [
          {
            "name": "chartAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailPopoverDismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterSelectedAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "legendAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<T>",
          },
          {
            "name": "yAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "yTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<number>",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "CartesianChartProps.I18nStrings<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Optional title for the legend.",
      "name": "legendTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that is displayed when the chart is loading, i.e. when \`statusType\` is set to \`"loading"\`.",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text for the recovery button that is displayed next to the error text.",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Array that represents the source of data for the displayed chart.
Each element can represent a line series or a threshold, and can have the following properties:
* \`title\` (string): A human-readable title for this series
* \`type\` (string): Series type (\`"line"\`, or \`"threshold"\`)
* \`data\` (Array): An array of data points, represented as objects with \`x\` and \`y\` properties
* \`color\` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color
* \`valueFormatter\` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
",
      "name": "series",
      "optional": false,
      "type": "ReadonlyArray<LineSeries<T>>",
    },
    {
      "defaultValue": ""finished"",
      "description": "Specifies the current status of loading data.
* \`loading\`: data fetching is in progress.
* \`finished\`: data has loaded successfully.
* \`error\`: an error occurred during fetch. You should provide user an option to recover.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.
- If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onFilterChange\` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).",
      "name": "visibleSeries",
      "optional": true,
      "type": "ReadonlyArray<MixedLineBarChartProps.ChartSeries<T>>",
    },
    {
      "description": "Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.
For numerical and time-based data this is represented as an array with two values: \`[minimumValue, maximumValue]\`.
For categorical data this is represented as an array of strings that determine the categories to display.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "xDomain",
      "optional": true,
      "type": "conditional",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the x axis.",
      "inlineType": {
        "name": "ScaleType",
        "type": "union",
        "values": [
          "linear",
          "log",
          "time",
          "categorical",
        ],
      },
      "name": "xScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of an x axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "xTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<T>",
    },
    {
      "description": "The title of the x axis.",
      "name": "xTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.
The domain is defined by a tuple: \`[minimumValue, maximumValue]\`.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "yDomain",
      "optional": true,
      "type": "ReadonlyArray<number>",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the y axis.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "linear",
          "log",
        ],
      },
      "name": "yScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of a y axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "yTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<number>",
    },
    {
      "description": "The title of the y axis.",
      "name": "yTitle",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Additional filters that are added above the chart component.
Make sure to update the \`data\` property when any of your custom filters change the data to be displayed.",
      "isDefault": false,
      "name": "additionalFilters",
    },
    {
      "description": "Content that is displayed when the data passed to the component is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Content that is displayed when there is no data to display due to the built-in filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for link matches the snapshot: link 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user clicks on the link. Do not use this handler for navigation, use the \`onFollow\` event instead.",
      "detailInlineType": {
        "name": "ClickDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "button",
            "optional": false,
            "type": "number",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "ClickDetail",
      "name": "onClick",
    },
    {
      "cancelable": true,
      "description": "Called when a link is clicked without any modifier keys. If the link has no \`href\` provided, it will be called on
all clicks.
If you want to implement client-side routing yourself, use this event and prevent default browser navigation
(by calling \`preventDefault\`).
",
      "detailInlineType": {
        "name": "LinkProps.FollowDetail",
        "properties": [
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": true,
            "type": "string",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "LinkProps.FollowDetail",
      "name": "onFollow",
    },
  ],
  "functions": [
    {
      "description": "Sets the browser focus on the anchor element.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Link",
  "properties": [
    {
      "description": "Adds an aria-label to the HTML element.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'normal'",
      "description": "Determines the text color of the link and its icon.
- \`normal\`: Use in most cases where a link is required.
- \`inverted\`: Use to style links inside Flashbars.

This property is overridden if the variant is \`info\`.
",
      "inlineType": {
        "name": "LinkProps.Color",
        "type": "union",
        "values": [
          "normal",
          "inverted",
        ],
      },
      "name": "color",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Marks the link as external by adding an icon after the text. If \`href\`
is provided, opens the link in a new tab when clicked.",
      "name": "external",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds an aria-label to the external icon.",
      "i18nTag": true,
      "name": "externalIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'body-m'",
      "description": "Determines the font size and line height.
This property is overridden if the variant is \`info\`.",
      "inlineType": {
        "name": "LinkProps.FontSize",
        "type": "union",
        "values": [
          "body-s",
          "body-m",
          "heading-xs",
          "heading-s",
          "heading-m",
          "heading-l",
          "heading-xl",
          "display-l",
          "inherit",
        ],
      },
      "name": "fontSize",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The URL that the link points to.
If an \`href\` is not provided, the component will render using a
"button" role and \`target\` will not be used.",
      "name": "href",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a \`rel\` attribute to the link. If the \`rel\` property is provided, it overrides the default behaviour.
By default, the component sets the \`rel\` attribute to "noopener noreferrer" when \`external\` is \`true\` or \`target\` is \`"_blank"\`.",
      "name": "rel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies where to open the linked URL. Set this to \`_blank\` to open the URL
in a new tab. If you set this property to \`_blank\`, the component
automatically adds \`rel="noopener noreferrer"\` to avoid performance
and security issues.
For other options see the documentation for <a> tag's
[target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
",
      "name": "target",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the visual style of the link as follows:
- \`primary\` - Displays the link text with bold styling for sufficient contrast with surrounding text.
    Use this for links where the context doesn't imply interactivity such as
    "Learn more" links and links within paragraphs.
- \`secondary\` - Does not provide any additional indicators for interactivity (except for an underline when the user hovers over or focuses the link).
    This can be used in cases where the interactivity is strongly implied by its context,
    such as in a table or a list of external links.
- \`info\` - Use for "info" links that link to content in a help panel.

The default is \`secondary\`, except inside the following components where it defaults to \`primary\`:
- Table
- Cards
- Alert
- Popover
- Help Panel (main \`content\` only)
",
      "inlineType": {
        "name": "LinkProps.Variant",
        "type": "union",
        "values": [
          "primary",
          "secondary",
          "info",
          "awsui-value-large",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "The text to render inside the link.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for live-region matches the snapshot: live-region 1`] = `
{
  "events": [],
  "functions": [],
  "name": "LiveRegion",
  "properties": [
    {
      "defaultValue": "false",
      "description": "Whether the announcements should be made using assertive aria-live.
Assertive announcements interrupt the user's action, so they should only
be used when absolutely necessary.",
      "name": "assertive",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether to visually hide the contents of the \`children\` slot.",
      "name": "hidden",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""div"",
      "description": "The tag name to use for the wrapper around the \`children\` slot.",
      "inlineType": {
        "name": "LiveRegionProps.TagName",
        "type": "union",
        "values": [
          "span",
          "div",
        ],
      },
      "name": "tagName",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Use the rendered content as the source for the announcement text. When the
text content inside this slot changes, it will be re-announced to
assistive technologies.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for mixed-line-bar-chart matches the snapshot: mixed-line-bar-chart 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the values of the internal filter component changed.
This will **not** be called for any custom filter components you have defined in \`additionalFilters\`.",
      "detailInlineType": {
        "name": "CartesianChartProps.FilterChangeDetail",
        "properties": [
          {
            "name": "visibleSeries",
            "optional": false,
            "type": "ReadonlyArray<Series>",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.FilterChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onFilterChange",
    },
    {
      "cancelable": false,
      "description": "Called when the highlighted series has changed because of user interaction.",
      "detailInlineType": {
        "name": "CartesianChartProps.HighlightChangeDetail",
        "properties": [
          {
            "name": "highlightedSeries",
            "optional": false,
            "type": "Series | null",
          },
        ],
        "type": "object",
      },
      "detailType": "CartesianChartProps.HighlightChangeDetail<MixedLineBarChartProps.ChartSeries<T>>",
      "name": "onHighlightChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button that appears when there is an error state.
Use this to enable the user to retry a failed request or provide another option for the user
to recover from the error.",
      "name": "onRecoveryClick",
    },
  ],
  "functions": [],
  "name": "MixedLineBarChart",
  "properties": [
    {
      "description": "A description of the chart that assistive technologies can use (through \`aria-describedby\`).
Provide a concise summary of the data visualized in the chart.",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ARIA label that is assigned to the chart itself. It should match the visible label on the page, e.g. in the container header.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets \`aria-labelledby\` on the chart itself.
If there is a visible label for the chart on the page, e.g. in the container header, set this property to the ID of that header element.
Do not use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional content that is displayed at the bottom of the detail popover.",
      "inlineType": {
        "name": "CartesianChartProps.DetailPopoverFooter",
        "parameters": [
          {
            "name": "xValue",
            "type": "T",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "detailPopoverFooter",
      "optional": true,
      "type": "CartesianChartProps.DetailPopoverFooter<T>",
    },
    {
      "description": "A function that determines the details that are displayed in the popover for each series.
Use this for wrapping keys or values in external links, or to display a metric breakdown by adding an additional level of nested items.
The function is called with the parameters \`{ series, x, y }\` representing the series, the highlighted x coordinate value and its corresponding y value respectively,
and should return the following properties:
* \`key\` (ReactNode) - Name of the series.
* \`value\` (ReactNode) - Value of the series at the highlighted x coordinate.
* \`subItems\` (ReadonlyArray<{ key: ReactNode; value: ReactNode }>) - (Optional) List of nested key-value pairs.
* \`expandable\` (boolean) - (Optional) Determines whether the optional list of nested items provided via \`subItems\` is expandable. This is \`false\` by default.
",
      "inlineType": {
        "name": "MixedLineBarChartProps.DetailPopoverSeriesContent",
        "parameters": [
          {
            "name": "data",
            "type": "MixedLineBarChartProps.DetailPopoverSeriesData<T>",
          },
        ],
        "returnType": "MixedLineBarChartProps.DetailPopoverSeriesKeyValuePair",
        "type": "function",
      },
      "name": "detailPopoverSeriesContent",
      "optional": true,
      "type": "MixedLineBarChartProps.DetailPopoverSeriesContent<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Determines the maximum width the detail popover will be limited to.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "detailPopoverSize",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "When set to \`true\`, adds a visual emphasis on the zero baseline axis.
See the usage guidelines for more details.",
      "name": "emphasizeBaselineAxis",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Text that is displayed when the chart is in error state, i.e. when \`statusType\` is set to \`"error"\`.",
      "i18nTag": true,
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Enable this property to make the chart fit into the available height of the parent container.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "500",
      "description": "An optional pixel value number that fixes the height of the chart area.
If not set explicitly, the component will use a default height that is defined internally.
When used with \`fitHeight\`, this property defines the minimum height of the chart area.",
      "name": "height",
      "optional": true,
      "type": "number",
    },
    {
      "description": "When set to \`true\`, the default filtering dropdown is not displayed.
It is still possible to render additional filters with the \`additionalFilters\` slot.",
      "name": "hideFilter",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "When set to \`true\`, the legend beneath the chart is not displayed.
It is highly recommended to keep this set to \`false\`.",
      "name": "hideLegend",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The currently highlighted data series, usually through hovering over a series or the legend.
A value of \`null\` means no series is highlighted.
- If you do not set this property, series are highlighted automatically when hovering over one of the triggers (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onHighlightChange\` listener to update this property when a series should be highlighted (controlled behavior).
",
      "name": "highlightedSeries",
      "optional": true,
      "type": "MixedLineBarChartProps.ChartSeries<T> | null",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`true\`, the x and y axes are flipped, which causes any bars to be rendered horizontally instead of vertically.
This can only be used when the chart consists exclusively of bar series.",
      "name": "horizontalBars",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "CartesianChartProps.I18nStrings",
        "properties": [
          {
            "name": "chartAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailPopoverDismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterSelectedAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "legendAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "xTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<T>",
          },
          {
            "name": "yAxisAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "yTickFormatter",
            "optional": true,
            "type": "CartesianChartProps.TickFormatter<number>",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "CartesianChartProps.I18nStrings<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Optional title for the legend.",
      "name": "legendTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that is displayed when the chart is loading, i.e. when \`statusType\` is set to \`"loading"\`.",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text for the recovery button that is displayed next to the error text.",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Array that represents the source of data for the displayed chart.
Each element can represent a line series, bar series, or a threshold, and can have the following properties:
* \`title\` (string): A human-readable title for this series.
* \`type\` (string): Series type (\`"line"\`, \`"bar"\`, or \`"threshold"\`).
* \`data\` (Array): For line and bar series, an array of data points, represented as objects with \`x\` and \`y\` properties.
* \`y\` (number): For threshold series, the value of the threshold.
* \`color\` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color.
* \`valueFormatter\` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
",
      "name": "series",
      "optional": false,
      "type": "ReadonlyArray<MixedLineBarChartProps.ChartSeries<T>>",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`true\`, bars in the same data point are stacked instead of grouped next to each other.",
      "name": "stackedBars",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": ""finished"",
      "description": "Specifies the current status of loading data.
* \`loading\`: data fetching is in progress.
* \`finished\`: data has loaded successfully.
* \`error\`: an error occurred during fetch. You should provide user an option to recover.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of series objects that determines which of the data series are currently displayed, i.e. not filtered out.
- If you do not set this property, series are shown and hidden automatically when using the default filter component (uncontrolled behavior).
- If you explicitly set this property, you must set an \`onFilterChange\` listener to update this property when the visible series should change, or when one of your custom filters changes the number of visible series (controlled behavior).",
      "name": "visibleSeries",
      "optional": true,
      "type": "ReadonlyArray<MixedLineBarChartProps.ChartSeries<T>>",
    },
    {
      "description": "Determines the domain of the x axis, i.e. the range of values that will be visible in the chart.
For numerical and time-based data this is represented as an array with two values: \`[minimumValue, maximumValue]\`.
For categorical data this is represented as an array of strings that determine the categories to display.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "xDomain",
      "optional": true,
      "type": "conditional",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the x axis.
Use \`categorical\` for charts with bars.",
      "inlineType": {
        "name": "ScaleType",
        "type": "union",
        "values": [
          "linear",
          "log",
          "time",
          "categorical",
        ],
      },
      "name": "xScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of an x axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "xTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<T>",
    },
    {
      "description": "The title of the x axis.",
      "name": "xTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines the domain of the y axis, i.e. the range of values that will be visible in the chart.
The domain is defined by a tuple: \`[minimumValue, maximumValue]\`.
It is recommended to set this explicitly. If not, the component will determine a domain that fits all data points.
When controlling this directly, make sure to update the value based on filtering changes.
",
      "name": "yDomain",
      "optional": true,
      "type": "ReadonlyArray<number>",
    },
    {
      "defaultValue": ""linear"",
      "description": "Determines the type of scale for values on the y axis.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "linear",
          "log",
        ],
      },
      "name": "yScaleType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Function to format the displayed label of a y axis tick.",
      "inlineType": {
        "name": "CartesianChartProps.TickFormatter",
        "parameters": [
          {
            "name": "value",
            "type": "T",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "yTickFormatter",
      "optional": true,
      "type": "CartesianChartProps.TickFormatter<number>",
    },
    {
      "description": "The title of the y axis.",
      "name": "yTitle",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Additional filters that are added above the chart component.
Make sure to update the \`data\` property when any of your custom filters change the data to be displayed.",
      "isDefault": false,
      "name": "additionalFilters",
    },
    {
      "description": "Content that is displayed when the data passed to the component is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Content that is displayed when there is no data to display due to the built-in filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for modal matches the snapshot: modal 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when a user closes the modal by using the close icon button,
clicking outside of the modal, or pressing ESC.
The event detail contains the \`reason\`, which can be any of the following:
\`['closeButton', 'overlay', 'keyboard']\`.",
      "detailInlineType": {
        "name": "ModalProps.DismissDetail",
        "properties": [
          {
            "name": "reason",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "ModalProps.DismissDetail",
      "name": "onDismiss",
    },
  ],
  "functions": [],
  "name": "Modal",
  "properties": [
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.
* \`flowType\` - Identifies the type of flow represented by the component.
* \`resourceType\` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.",
      "inlineType": {
        "name": "ModalProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "flowType",
            "optional": true,
            "type": "FlowType",
          },
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
          {
            "name": "resourceType",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "ModalProps.AnalyticsMetadata",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the close button, for accessibility.",
      "i18nTag": true,
      "name": "closeAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines whether the modal content has padding. If \`true\`, removes the default padding from the content area.",
      "name": "disableContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Use this property to specify a different dynamic modal root for the dialog.
The function will be called when a user clicks on the trigger button.",
      "name": "getModalRoot",
      "optional": true,
      "type": "() => Promise<HTMLElement>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the HTML element where the modal is rendered.
If neither \`modalRoot\` or \`getModalRoot\` properties are provided, the modal will
render to an element under \`document.body\`.",
      "name": "modalRoot",
      "optional": true,
      "type": "HTMLElement",
    },
    {
      "description": "Use this property when \`getModalRoot\` is used to clean up the modal root
element after a user closes the dialog. The function receives the return value
of the most recent getModalRoot call as an argument.",
      "name": "removeModalRoot",
      "optional": true,
      "type": "(rootElement: HTMLElement) => void",
    },
    {
      "defaultValue": ""medium"",
      "description": "Sets the width of the modal. \`max\` uses variable width up to the
largest size allowed by the design guidelines. Other sizes
(\`small\`/\`medium\`/\`large\`) have fixed widths.",
      "inlineType": {
        "name": "ModalProps.Size",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
          "max",
        ],
      },
      "name": "size",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines whether the modal is displayed on the screen. Modals are hidden by default.
Set this property to \`true\` to show them.",
      "name": "visible",
      "optional": false,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Body of the modal.",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Specifies a footer for the modal. If empty, the footer isn't displayed.",
      "isDefault": false,
      "name": "footer",
    },
    {
      "description": "Specifies a title for the modal. Although this can be empty, we suggest that you always provide a title.",
      "isDefault": false,
      "name": "header",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for multiselect matches the snapshot: multiselect 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called when the user selects or deselects an option.
The event \`detail\` contains the current \`selectedOptions\`.",
      "detailInlineType": {
        "name": "MultiselectProps.MultiselectChangeDetail",
        "properties": [
          {
            "name": "selectedOptions",
            "optional": false,
            "type": "ReadonlyArray<MultiselectProps.Option>",
          },
        ],
        "type": "object",
      },
      "detailType": "MultiselectProps.MultiselectChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is set onto the UI control.",
      "name": "onFocus",
    },
    {
      "cancelable": false,
      "description": "Use this event to implement the asynchronous behavior for the component.
The event is called in the following situations:
* The user scrolls to the end of the list of options, if \`statusType\` is set to \`pending\`.
* The user clicks on the recovery button in the error state.
* The user types inside the input field.
* The user focuses the input field.

The detail object contains the following properties:
* \`filteringText\` - The value that you need to use to fetch options.
* \`firstPage\` - Indicates that you should fetch the first page of options that match the \`filteringText\`.
* \`samePage\` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).
",
      "detailInlineType": {
        "name": "OptionsLoadItemsDetail",
        "properties": [
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "firstPage",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "samePage",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "OptionsLoadItemsDetail",
      "name": "onLoadItems",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the element without opening the dropdown or showing a visual focus indicator.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Multiselect",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the select element.
Use this if you don't have a visible label for this control.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-required\` to the native input element.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Automatically focuses the trigger when component is mounted.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID for the trigger component. It uses an automatically generated ID by default.",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an \`aria-label\` for the token deselection button.",
      "i18nTag": true,
      "inlineType": {
        "name": "MultiselectProps.DeselectAriaLabelFunction",
        "parameters": [
          {
            "name": "option",
            "type": "MultiselectProps.Option",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "deselectAriaLabel",
      "optional": true,
      "type": "MultiselectProps.DeselectAriaLabelFunction",
    },
    {
      "description": "Determines whether the whole select component is disabled.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Provides a text alternative for the error icon in the error message.",
      "i18nTag": true,
      "name": "errorIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display when a data fetching error occurs. Make sure that you provide \`recoveryText\`.",
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds an \`aria-label\` on the built-in filtering input if filtering is enabled.",
      "name": "filteringAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
      "i18nTag": true,
      "name": "filteringClearAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder to display in the filtering input if filtering is enabled.",
      "name": "filteringPlaceholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.",
      "name": "filteringResultsText",
      "optional": true,
      "type": "(matchesCount: number, totalCount: number) => string",
    },
    {
      "defaultValue": "'none'",
      "description": "Determines how filtering is applied to the list of \`options\`:
* \`auto\` - The component will automatically filter options based on user input.
* \`manual\` - You will set up \`onChange\` or \`onLoadItems\` event listeners and filter options on your side or request
them from server.

By default the component will filter the provided \`options\` based on the value of the filtering input field.
Only options that have a \`value\`, \`label\`, \`description\` or \`labelTag\` that contains the input value as a substring
are displayed in the list of options.

If you set this property to \`manual\`, this default filtering mechanism is disabled and all provided \`options\` are
displayed in the dropdown list. In that case make sure that you use the \`onChange\` or \`onLoadItems\` events in order
to set the \`options\` property to the options that are relevant for the user, given the filtering input value.

Note: Manual filtering doesn't disable match highlighting.
",
      "inlineType": {
        "name": "OptionsFilteringType",
        "type": "union",
        "values": [
          "none",
          "auto",
          "manual",
        ],
      },
      "name": "filteringType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display at the bottom of the dropdown menu after pagination has reached the end.",
      "name": "finishedText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Hides the tokens displayed underneath the component.
Only use this if the selected options are displayed elsewhere on the page.",
      "name": "hideTokens",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the localized strings required by the component.
Note that the string for \`tokenLimitShowMore\` should not contain the number of hidden tokens
because it will be added by the component automatically.",
      "inlineType": {
        "name": "MultiselectProps.I18nStrings",
        "properties": [
          {
            "name": "tokenLimitShowFewer",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenLimitShowMore",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "MultiselectProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Shows tokens inside the trigger instead of below it.",
      "name": "inlineTokens",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "true",
      "description": "Determines whether the dropdown list stays open after the user selects an item.",
      "name": "keepOpen",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text to display when in the loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Has no effect.",
      "description": "",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies an array of options that are displayed to the user as a dropdown list.
The options can be grouped using \`OptionGroup\` objects.
#### Option
- \`value\` (string) - The returned value of the option when selected.

#### OptionGroup
- \`value\` (string) - Used to locate option group in test utils.
- \`options\` (Option[]) - (Optional) The options under this group.

#### Shared Option and OptionGroup properties
- \`label\` (string) - (Optional) Option or group text displayed to the user.
- \`lang\` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.
- \`description\` (string) - (Optional) Further information about the option or group that appears below the label.
- \`disabled\` (boolean) - (Optional) Determines whether the option or group is disabled.
- \`disabledReason\` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.
- \`labelTag\` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
- \`tags\` [string[]] - (Optional) A list of tags giving further guidance about the option or group.
- \`filteringTags\` [string[]] - (Optional) A list of additional tags used for automatic filtering.
- \`iconName\` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.
- \`iconAlt\` (string) - (Optional) Specifies alternate text for a custom icon, for use with \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).

Note: Only one level of option nesting is supported.

If you want to use the built-in filtering capabilities of this component, provide
a list of all valid options here and they will be automatically filtered based on the user's filtering input.

Alternatively, you can listen to the \`onChange\` or \`onLoadItems\` event and set new options
on your own.
",
      "inlineType": {
        "name": "SelectProps.Options",
        "properties": [],
        "type": "object",
      },
      "name": "options",
      "optional": true,
      "type": "SelectProps.Options",
    },
    {
      "description": "Specifies the hint text that's displayed in the field when no option has been selected.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from both modifying the value and opening the dropdown. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text for the recovery button. The text is displayed next to the error text.
Use the \`onLoadItems\` event to perform a recovery action (for example, retrying the request).",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the element that is announced to screen readers
when the highlighted option changes. By default, this announces
the option's name and properties, and its selected state if
the \`selectedLabel\` property is defined.
The highlighted option is provided, and its group (if groups
are used and it differs from the group of the previously highlighted option).
For more information, see the
[accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).
",
      "inlineType": {
        "name": "SelectProps.ContainingOptionAndGroupString",
        "parameters": [
          {
            "name": "option",
            "type": "SelectProps.Option",
          },
          {
            "name": "group",
            "type": "SelectProps.OptionGroup",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "renderHighlightedAriaLive",
      "optional": true,
      "type": "SelectProps.ContainingOptionAndGroupString",
    },
    {
      "description": "Specifies the localized string that describes an option as being selected.
This is required to provide a good screen reader experience. For more information, see the
[accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).",
      "i18nTag": true,
      "name": "selectedAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies the currently selected options.
Provide an empty array to clear the selection.",
      "name": "selectedOptions",
      "optional": false,
      "type": "ReadonlyArray<MultiselectProps.Option>",
    },
    {
      "defaultValue": "'finished'",
      "description": "Specifies the current status of loading more options.
* \`pending\` - Indicates that no request in progress, but more options may be loaded.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that pagination has finished and no more requests are expected.
* \`error\` - Indicates that an error occurred during fetch. You should use \`recoveryText\` to enable the user to recover.",
      "inlineType": {
        "name": "DropdownStatusProps.StatusType",
        "type": "union",
        "values": [
          "pending",
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.",
      "name": "tokenLimit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Adds an aria-label to the "Show fewer" button for the token group control.
Use to assign unique labels when there are multiple token groups with the same \`tokenLimitShowFewer\` label on one page.",
      "name": "tokenLimitShowFewerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an aria-label to the "Show more" button for the token group control.
Use to assign unique labels when there are multiple token groups with the same \`tokenLimitShowMore\` label on one page.",
      "name": "tokenLimitShowMoreAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "If you have more than 500 options, enable this flag to apply a performance optimization
that makes the filtering experience smoother. We don't recommend enabling the feature if you
have less than 500 options, because the improvements to performance are offset by a
visible scrolling lag.
When you set this flag to \`true\`, it removes options that are not currently in view from the DOM.
If your test accesses such options, you need to first scroll the options container
to the correct offset, before performing any operations on them. Use the element returned
by the \`findOptionsContainer\` test utility for this.
",
      "name": "virtualScroll",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Displayed when there are no options to display.
This is only shown when \`statusType\` is set to \`finished\` or not set at all.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Displayed for \`filteringType="auto"\` when there are no matches for the filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for pagination matches the snapshot: pagination 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when a user interaction causes a pagination change. The event \`detail\` contains the new \`currentPageIndex\`.",
      "detailInlineType": {
        "name": "PaginationProps.ChangeDetail",
        "properties": [
          {
            "name": "currentPageIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "PaginationProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when the next page arrow is clicked. The event \`detail\` contains the following:
* \`requestedPageAvailable\` (boolean) - Indicates whether the requested page is available for display.
  The value can be \`false\` when the \`openEnd\` property is set to \`true\`.
* \`requestedPageIndex\` (integer) - The index of the requested page.",
      "detailInlineType": {
        "name": "PaginationProps.PageClickDetail",
        "properties": [
          {
            "name": "requestedPageAvailable",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "requestedPageIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "PaginationProps.PageClickDetail",
      "name": "onNextPageClick",
    },
    {
      "cancelable": false,
      "description": "Called when the previous page arrow is clicked. The event \`detail\` contains the following:
* \`requestedPageAvailable\` (boolean) - Always set to \`true\`.
* \`requestedPageIndex\` (integer) - The index of the requested page.",
      "detailInlineType": {
        "name": "PaginationProps.PageClickDetail",
        "properties": [
          {
            "name": "requestedPageAvailable",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "requestedPageIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "PaginationProps.PageClickDetail",
      "name": "onPreviousPageClick",
    },
  ],
  "functions": [],
  "name": "Pagination",
  "properties": [
    {
      "description": "Adds aria-labels to the pagination buttons:
* \`paginationLabel\` (string) - Label for the entire pagination group. It allows users to distinguish context
* in cases of multiple pagination components in a page.
* \`previousPageLabel\` (string) - Previous page button.
* \`pageLabel\` (number => string) - Individual page button, this function is called for every page number that's rendered.
* \`nextPageLabel\` (string) - Next page button
Example:
\`\`\`
{
  nextPageLabel: 'Next page',
  paginationLabel: 'Table pagination',
  previousPageLabel: 'Previous page',
  pageLabel: pageNumber => \`Page \${pageNumber}\`
}
\`\`\`",
      "i18nTag": true,
      "inlineType": {
        "name": "PaginationProps.Labels",
        "properties": [
          {
            "name": "nextPageLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "pageLabel",
            "optional": true,
            "type": "(pageNumber: number) => string",
          },
          {
            "name": "paginationLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousPageLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "ariaLabels",
      "optional": true,
      "type": "PaginationProps.Labels",
    },
    {
      "description": "Index of the current page. The first page has an index of 1.",
      "name": "currentPageIndex",
      "optional": false,
      "type": "number",
    },
    {
      "description": "If set to \`true\`, the pagination links will be disabled. Use it, for example, if you want to prevent the user
from changing page before items are loaded.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Sets the pagination variant. It can be either default (when setting it to \`false\`) or open ended (when setting it
to \`true\`). Default pagination navigates you through the items list. The open-end variant enables you
to lazy-load your items because it always displays three dots before the next page icon. The next page button is
never disabled. When the user clicks on it but there are no more items to show, the
\`onNextPageClick\` handler is called with \`requestedPageAvailable: false\` in the event detail.",
      "name": "openEnd",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Sets the total number of pages. Only positive integers are allowed.",
      "name": "pagesCount",
      "optional": false,
      "type": "number",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for pie-chart matches the snapshot: pie-chart 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the values of the internal filter component changes.
This isn't called for any custom filter components you've defined in \`additionalFilters\`.",
      "detailInlineType": {
        "name": "PieChartProps.FilterChangeDetail",
        "properties": [
          {
            "name": "visibleSegments",
            "optional": false,
            "type": "ReadonlyArray<T>",
          },
        ],
        "type": "object",
      },
      "detailType": "PieChartProps.FilterChangeDetail<T>",
      "name": "onFilterChange",
    },
    {
      "cancelable": false,
      "description": "Called when the highlighted segmented changes because of a user interaction.",
      "detailInlineType": {
        "name": "PieChartProps.HighlightChangeDetail",
        "properties": [
          {
            "name": "highlightedSegment",
            "optional": false,
            "type": "T | null",
          },
        ],
        "type": "object",
      },
      "detailType": "PieChartProps.HighlightChangeDetail<T>",
      "name": "onHighlightChange",
    },
    {
      "cancelable": false,
      "description": "Called when the user clicks the recovery button that appears when there is an error state.
Use this to enable the user to retry a failed request or provide another option for the user
to recover from the error.",
      "name": "onRecoveryClick",
    },
  ],
  "functions": [],
  "name": "PieChart",
  "properties": [
    {
      "description": "A description of the chart that assistive technologies can use (through \`aria-describedby\` and \`<title>\`).
Provide a concise summary of the data visualized in the chart.",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "ARIA label that's assigned to the chart. It should match the visible label on the page
(for example, in the container header). Use either \`ariaLabel\` or \`ariaLabelledby\` (you can't use both).",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets \`aria-labelledby\` on the chart. If there is a visible label for the chart on the page
(for example, in the container header), set this property to the ID of that header element.
Use either \`ariaLabel\` or \`ariaLabelledby\` (you can't use both).",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array that represents the source of data for the displayed segments.
Each element can have the following properties:
* \`title\` (string) - A human-readable title for this data point.
* \`value\` (number) - Numeric value that determines the segment size.
                       A segment with a value of zero (0) or lower (negative number) won't have a segment.
* \`color\`: (string) - (Optional) Color value for this segment that takes priority over the automatically assigned color.
                       Can be any valid CSS color identifier.

As long as your data object implements the properties above, you can also define additional properties
that are relevant to your data visualization.
The full data object will be passed down to events and properties like \`detailPopoverContent\`.
",
      "name": "data",
      "optional": false,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "A function that determines the details that are displayed in the popover when hovering over a segment.
The function is called with the data of the target segment and is expected to return an array of detail pairs.
By default, each segment displays two detail pairs: count and percentage.
Each pair has the following properties:
* \`key\` (ReactNode) - Name of the detail or metric.
* \`value\` (ReactNode) - The value of this detail for the target segment.
",
      "inlineType": {
        "name": "PieChartProps.DetailPopoverContentFunction",
        "parameters": [
          {
            "name": "segment",
            "type": "T",
          },
          {
            "name": "visibleDataSum",
            "type": "number",
          },
        ],
        "returnType": "ReadonlyArray<ChartDetailPair>",
        "type": "function",
      },
      "name": "detailPopoverContent",
      "optional": true,
      "type": "PieChartProps.DetailPopoverContentFunction<T>",
    },
    {
      "description": "Additional content that is displayed at the bottom of the detail popover.",
      "inlineType": {
        "name": "PieChartProps.DetailPopoverFooter",
        "parameters": [
          {
            "name": "segment",
            "type": "T",
          },
        ],
        "returnType": "React.ReactNode",
        "type": "function",
      },
      "name": "detailPopoverFooter",
      "optional": true,
      "type": "PieChartProps.DetailPopoverFooter<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Determines the maximum width of the popover.",
      "inlineType": {
        "name": "PopoverProps.Size",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "detailPopoverSize",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that's displayed when the chart is in error state (that is, when \`statusType\` is set to \`error\`).",
      "i18nTag": true,
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Enable this property to make the chart fit into the available height of the parent container.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Hides the label descriptions next to the chart segments when set to \`true\`.",
      "name": "hideDescriptions",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Hides the default filtering dropdown when set to \`true\`.
You can still display additional filters with the \`additionalFilters\` slot.",
      "name": "hideFilter",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Hides legend beneath the chart when set to \`true\`.
We highly recommend that you leave this unspecified or set to \`false\`.",
      "name": "hideLegend",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Hides label titles next to the chart segments when set to \`true\`.
We highly recommend that you leave this unspecified or set to \`false\`.",
      "name": "hideTitles",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the currently highlighted data segment. Highlighting is typically the result of
a user hovering over or selecting a segment in the chart or the legend.
A value of \`null\` means no segment is being highlighted.
- If you don't set this property, segments are highlighted automatically when a user hovers over or selects one of the triggers (that is, uncontrolled behavior).
- If you explicitly set this property, you must set an \`onHighlightChange\` listener to update this property when a segment should be highlighted (that is, controlled behavior).
",
      "name": "highlightedSegment",
      "optional": true,
      "type": "T | null",
    },
    {
      "description": "An object that contains all of the localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "PieChartProps.I18nStrings",
        "properties": [
          {
            "name": "chartAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailPopoverDismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailsPercentage",
            "optional": true,
            "type": "string",
          },
          {
            "name": "detailsValue",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filterSelectedAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "legendAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "segmentAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "PieChartProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional description that's displayed in the center of the chart below \`innerMetricValue\` if \`variant\` is set to \`donut\`.
This is usually the unit of the \`innerMetricValue\`.",
      "name": "innerMetricDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Additional metric number that's displayed in the center of the chart if \`variant\` is set to \`donut\`.",
      "name": "innerMetricValue",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Title for the legend.",
      "name": "legendTitle",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text that's displayed when the chart is loading (that is, when \`statusType\` is set to \`loading\`).",
      "i18nTag": true,
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Text for the recovery button that's displayed next to the error text.",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "A function that determines the description of a segment that is displayed on the chart, unless \`hideDescriptions\` is set to \`true\`.
This is an optional description that explains the segment and is displayed underneath the label.
The function is called with the data object of each segment and is expected to return the description as a string.",
      "inlineType": {
        "name": "PieChartProps.SegmentDescriptionFunction",
        "parameters": [
          {
            "name": "segment",
            "type": "T",
          },
          {
            "name": "visibleDataSum",
            "type": "number",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "segmentDescription",
      "optional": true,
      "type": "PieChartProps.SegmentDescriptionFunction<T>",
    },
    {
      "defaultValue": ""medium"",
      "description": "Specifies the size of the pie or donut chart.
When used with \`fitHeight\`, this property defines the minimum size of the chart area.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "size",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""finished"",
      "description": "Specifies the current status of loading data.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that data has loaded successfully.
* \`error\` - Indicates that an error occurred during fetch. You should provide an option to enable the user to recover.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""pie"",
      "description": "Visual variant of the pie chart. Currently supports the default \`pie\` variant and the \`donut\` variant.
The donut variant provides a slot in the center of the chart that can contain additional information.
For more information, see \`innerContent\`.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "pie",
          "donut",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of data segment objects that determines which data segments are currently visible (that is, not filtered out).
- If you don't set this property, segments are filtered automatically when using the default filtering of the component (that is, uncontrolled behavior).
- If you explicitly set this property, you must set an \`onFilterChange\` listener to update this property when the list of filtered segments changes (that is, controlled behavior).
",
      "name": "visibleSegments",
      "optional": true,
      "type": "ReadonlyArray<T>",
    },
  ],
  "regions": [
    {
      "description": "Additional filters that you can add above the chart component.
Make sure you update the \`data\` property when any of your custom filters change the data that's displayed.",
      "isDefault": false,
      "name": "additionalFilters",
    },
    {
      "description": "Content that's displayed when the data passed to the component is empty.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Content that's displayed when there is no data to display because it doesn't match the specified filter.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for popover matches the snapshot: popover 1`] = `
{
  "events": [],
  "functions": [
    {
      "description": "Sets focus on the popover's trigger.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Popover",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the dismiss button for accessibility.",
      "i18nTag": true,
      "name": "dismissAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "Determines whether the dismiss button is shown in the popover body.",
      "name": "dismissButton",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Expands the popover body to its maximum width regardless of content.
For example, use it when you need to place a column layout in the popover content.",
      "name": "fixedWidth",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies optional header text for the popover.",
      "name": "header",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'right'",
      "description": "Determines where the popover is displayed when opened, relative to the trigger.
If the popover doesn't have enough space to open in this direction, it
automatically chooses a better direction based on available space.",
      "inlineType": {
        "name": "PopoverProps.Position",
        "type": "union",
        "values": [
          "top",
          "right",
          "bottom",
          "left",
        ],
      },
      "name": "position",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "By default, the popover is constrained to fit inside its parent
[stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
Enabling this property will allow the popover to be rendered in the root stack context using
[React Portals](https://reactjs.org/docs/portals.html).
Enable this setting if you need the popover to ignore its parent stacking context, such as in side navigation.
Note: Using popover rendered with portal within a Modal is not supported.
",
      "name": "renderWithPortal",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "'medium'",
      "description": "Determines the maximum width for the popover.",
      "inlineType": {
        "name": "PopoverProps.Size",
        "type": "union",
        "values": [
          "small",
          "medium",
          "large",
        ],
      },
      "name": "size",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the text trigger button. Use this to provide an accessible name for triggers
that don't have visible text, and to distinguish between multiple triggers with identical visible text.",
      "name": "triggerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'text'",
      "description": "Specifies the type of content inside the trigger region. The following types are available:
- \`text\` - Use for triggers containing inline components, like status indicator.
- \`text-inline\` - Use for triggers containing plain text only.
- \`custom\` - Use for the [button](/components/button/) component.",
      "inlineType": {
        "name": "PopoverProps.TriggerType",
        "type": "union",
        "values": [
          "text",
          "text-inline",
          "custom",
        ],
      },
      "name": "triggerType",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "Specifies if the text trigger content should wrap. If you set it to false, it prevents the text from
wrapping and truncates it with an ellipsis.",
      "name": "wrapTriggerText",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Element that triggers the popover when selected by the user.",
      "displayName": "trigger",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Content of the popover.",
      "isDefault": false,
      "name": "content",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for progress-bar matches the snapshot: progress-bar 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user clicks the result state button.
Note: If you are using the \`flash\` variant, the result button isn't displayed.
Use the \`buttonText\` property and the \`onButtonClick\` event listener of the flashbar item instead.
",
      "name": "onResultButtonClick",
    },
  ],
  "functions": [],
  "name": "ProgressBar",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the progress bar.",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the progress bar.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the progress bar.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text for the button that's displayed when the \`status\` is set to \`error\` or \`success\`.
If \`resultButtonText\` is empty, the result button isn't displayed.
Note: If you use the \`flash\` variant, the result button isn't displayed.
Add a button using the \`action\` property of the flashbar item instead.
",
      "name": "resultButtonText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""in-progress"",
      "description": "Specifies the status of the progress bar. You can set it to one of the following:
- \`"in-progress"\` - Displays a progress bar.
- \`"success"\` or \`"error"\` - Displays a result state and replaces the progress element with a status indicator,
\`resultText\`, and a result button.
",
      "inlineType": {
        "name": "ProgressBarProps.Status",
        "type": "union",
        "values": [
          "in-progress",
          "success",
          "error",
        ],
      },
      "name": "status",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "0",
      "description": "Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.",
      "name": "value",
      "optional": true,
      "type": "number",
    },
    {
      "defaultValue": ""standalone"",
      "description": "Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:
- \`"flash"\` - Use this variatn when using the progress bar within a flash component.
             Note that the result button isn't displayed when using this variant.
             Use the \`buttonText\` property and the \`onButtonClick\` event listener of the flashbar item instead of the result button provided by the progress bar.
- \`"key-value"\` - Use this variant when using the progress bar within the key-value pairs pattern.
- \`"standalone"\` Use in all other cases. This is the default value.
",
      "inlineType": {
        "name": "ProgressBarProps.Variant",
        "type": "union",
        "values": [
          "standalone",
          "flash",
          "key-value",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Information that's displayed below the progress bar or status text.",
      "isDefault": false,
      "name": "additionalInfo",
    },
    {
      "description": "More detailed information about the operation that appears below the label.",
      "isDefault": false,
      "name": "description",
    },
    {
      "description": "Short description of the operation that appears at the top of the component.
Make sure that you always provide a label for accessibility.
",
      "isDefault": false,
      "name": "label",
    },
    {
      "description": "Content that's displayed when \`status\` is set to \`error\` or \`success\`.",
      "isDefault": false,
      "name": "resultText",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for prompt-input matches the snapshot: prompt-input 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called whenever a user clicks the action button or presses the "Enter" key.
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "PromptInputProps.ActionDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "PromptInputProps.ActionDetail",
      "name": "onAction",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keydown\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyDown",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keyup\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyUp",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus on the textarea control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "Selects all text in the textarea control.",
      "name": "select",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "PromptInput",
  "properties": [
    {
      "description": "Adds an aria-label to the action button.",
      "i18nTag": true,
      "name": "actionButtonAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.
This property is ignored if you use a predefined icon or if you set your custom icon using the \`iconSvg\` slot.",
      "name": "actionButtonIconAlt",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines what icon to display in the action button.",
      "inlineType": {
        "name": "IconProps.Name",
        "type": "union",
        "values": [
          "add-plus",
          "anchor-link",
          "angle-left-double",
          "angle-left",
          "angle-right-double",
          "angle-right",
          "angle-up",
          "angle-down",
          "arrow-left",
          "arrow-right",
          "audio-full",
          "audio-half",
          "audio-off",
          "backward-10-seconds",
          "bug",
          "call",
          "calendar",
          "caret-down-filled",
          "caret-down",
          "caret-left-filled",
          "caret-right-filled",
          "caret-up-filled",
          "caret-up",
          "check",
          "contact",
          "close",
          "closed-caption",
          "closed-caption-unavailable",
          "copy",
          "command-prompt",
          "delete-marker",
          "download",
          "drag-indicator",
          "edit",
          "ellipsis",
          "envelope",
          "exit-full-screen",
          "expand",
          "external",
          "face-happy",
          "face-happy-filled",
          "face-neutral",
          "face-neutral-filled",
          "face-sad",
          "face-sad-filled",
          "file-open",
          "file",
          "filter",
          "flag",
          "folder-open",
          "folder",
          "forward-10-seconds",
          "full-screen",
          "gen-ai",
          "globe",
          "grid-view",
          "group-active",
          "group",
          "heart",
          "heart-filled",
          "insert-row",
          "key",
          "keyboard",
          "list-view",
          "location-pin",
          "lock-private",
          "map",
          "menu",
          "microphone",
          "microphone-off",
          "mini-player",
          "multiscreen",
          "notification",
          "pause",
          "play",
          "redo",
          "refresh",
          "remove",
          "resize-area",
          "script",
          "search",
          "security",
          "settings",
          "send",
          "share",
          "shrink",
          "star-filled",
          "star-half",
          "star",
          "status-in-progress",
          "status-info",
          "status-negative",
          "status-pending",
          "status-positive",
          "status-stopped",
          "status-warning",
          "subtract-minus",
          "suggestions",
          "support",
          "thumbs-down-filled",
          "thumbs-down",
          "thumbs-up-filled",
          "thumbs-up",
          "ticket",
          "transcript",
          "treeview-collapse",
          "treeview-expand",
          "undo",
          "unlocked",
          "upload-download",
          "upload",
          "user-profile-active",
          "user-profile",
          "video-off",
          "video-on",
          "video-unavailable",
          "video-camera-off",
          "video-camera-on",
          "video-camera-unavailable",
          "view-full",
          "view-horizontal",
          "view-vertical",
          "zoom-in",
          "zoom-out",
          "zoom-to-fit",
        ],
      },
      "name": "actionButtonIconName",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
If you set both \`actionButtonIconUrl\` and \`actionButtonIconSvg\`, \`actionButtonIconSvg\` will take precedence.
",
      "name": "actionButtonIconUrl",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies whether to enable a browser's autocomplete functionality for this input.
In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).
To use it correctly, set the \`name\` property.
You can either provide a boolean value to set the property to "on" or "off", or specify a string value
for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
",
      "name": "autoComplete",
      "optional": true,
      "type": "boolean | string",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to disable the action button.",
      "name": "disableActionButton",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines whether the secondary actions area of the input has padding. If true, removes the default padding from the secondary actions area.",
      "name": "disableSecondaryActionsPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Determines whether the secondary content area of the input has padding. If true, removes the default padding from the secondary content area.",
      "name": "disableSecondaryContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the maximum number of lines of text the textarea will expand to.",
      "name": "maxRows",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the minimum number of lines of text to set the height to.",
      "name": "minRows",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the value of the \`spellcheck\` attribute on the native control.
This value controls the native browser capability to check for spelling/grammar errors.
If not set, the browser default behavior is to perform spellchecking.
For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.
Make sure it’s deactivated for fields with sensitive information to prevent
inadvertently sending data (such as user passwords) to third parties.
",
      "name": "spellcheck",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text entered into the form element.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Specifies the SVG of a custom icon.
Use this property if you want your custom icon to inherit colors dictated by variant or hover states.
When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element:
- has attribute \`focusable="false"\`.
- has \`viewBox="0 0 16 16"\`.

If you set the \`svg\` element as the root node of the slot, the component will automatically
- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`.
- set the stroke width based on the size of the icon.
- set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\`.
You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements.

If you set both \`actionButtonIconUrl\` and \`actionButtonIconSvg\`, \`iconSvg\` will take precedence.

*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software.
In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.
",
      "isDefault": false,
      "name": "actionButtonIconSvg",
    },
    {
      "description": "Use this slot to add secondary actions to the prompt input.",
      "isDefault": false,
      "name": "secondaryActions",
    },
    {
      "description": "Use this slot to add secondary content, such as file attachments, to the prompt input.",
      "isDefault": false,
      "name": "secondaryContent",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for property-filter matches the snapshot: property-filter 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the \`query\` gets changed. Filter the dataset in response to this event using the values in the \`detail\` object.",
      "detailInlineType": {
        "name": "PropertyFilterProps.Query",
        "properties": [],
        "type": "object",
      },
      "detailType": "PropertyFilterProps.Query",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Use this event to asynchronously load filteringOptions, component currently needs.  The detail object contains following properties:
* \`filteringProperty\` - The property for which you need to fetch the options.
* \`filteringOperator\` - The operator for which you need to fetch the options.
* \`filteringText\` - The value that you need to use to fetch options.
* \`firstPage\` - Indicates that you should fetch the first page of options for a \`filteringProperty\` that match the \`filteringText\`.
* \`samePage\` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).
",
      "detailInlineType": {
        "name": "PropertyFilterProps.LoadItemsDetail",
        "properties": [
          {
            "name": "filteringOperator",
            "optional": true,
            "type": "PropertyFilterProps.ComparisonOperator",
          },
          {
            "name": "filteringProperty",
            "optional": true,
            "type": "PropertyFilterProps.FilteringProperty",
          },
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "firstPage",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "samePage",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "PropertyFilterProps.LoadItemsDetail",
      "name": "onLoadItems",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the underlying input control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "PropertyFilter",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Set \`asyncProperties\` if you need to load \`filteringProperties\` asynchronously. This would cause extra \`onLoadMore\`
events to fire calling for more properties.",
      "name": "asyncProperties",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Accepts a human-readable, localized string that indicates the number of results. For example, "1 match" or "165 matches."
If the total number of results is unknown, also include an indication that there may be more results than
the number listed. For example, "25+ matches."
The count text is only displayed when \`query.tokens\` isn't empty.
When the \`countText\` or \`query\` changes, it will be announced to assistive technologies.
",
      "name": "countText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "An array of objects that contain localized, human-readable strings for the labels of custom groups within the filtering dropdown. Use group property to associate the strings with your custom group of options. Define the following values for each group:
* properties [string]: The group label in the filtering dropdown that contains the list of properties from this group. For example: Tags.
* values [string]: The group label in the filtering dropdown that contains the list of values from this group. For example: Tags values.
* group [string]: The identifier of a custom group.
",
      "name": "customGroupsText",
      "optional": true,
      "type": "Array<PropertyFilterProps.GroupText>",
    },
    {
      "defaultValue": "false",
      "description": "Set \`disableFreeTextFiltering\` only if you can’t filter the dataset using a filter that is applied to every column,
instead of a specific property. This would stop the user from creating such tokens.",
      "name": "disableFreeTextFiltering",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "If set to \`true\`, the filtering input will be disabled.
Use it, for example, if you are fetching new items upon filtering change
in order to prevent the user from changing the filtering query.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "false",
      "description": "Activates token grouping mechanism to support token nesting (up to one level).
When \`true\`, the \`query.tokens\` property is ignored and \`query.tokenGroups\` is used instead.",
      "name": "enableTokenGroups",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "The label that will be passed down to the Autosuggest \`ariaLabel\` property.
See the [Autosuggest API](/components/autosuggest/?tabId=api) page for more details.",
      "name": "filteringAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display when a data fetching error occurs. Make sure that you provide \`recoveryText\`.",
      "name": "filteringErrorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display at the bottom of the dropdown menu after pagination has reached the end.",
      "name": "filteringFinishedText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display when in the loading state.",
      "name": "filteringLoadingText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "An array of possible values of the individual \`filteringProperties\`. Each element has the following properties:
* \`propertyKey\` [string]: The key of the corresponding filtering property in the \`filteringProperties\` array.
* \`value\` [string]: The value that will be used as a suggestion when creating or modifying a filtering token.
* \`label\` [string]: Optional suggestion label to be matched instead of the value.

Filtering options that require labels can only use \`=\` and \`!=\` operators. The token value must be labelled separately, for example:
\`\`\`
const filteringProperty = {
  key: 'state',
  propertyLabel: 'State',
  operators: ['=', '!='].map(operator => ({ operator, format: getStateLabel }))
}
const filteringOptions = [
  { propertyKey: 'state', value: 'STOPPED', label: getStateLabel('STOPPED') },
  { propertyKey: 'state', value: 'STOPPING', label: getStateLabel('STOPPING') },
  { propertyKey: 'state', value: 'RUNNING', label: getStateLabel('RUNNING') },
]
\`\`\`
",
      "name": "filteringOptions",
      "optional": true,
      "type": "ReadonlyArray<PropertyFilterProps.FilteringOption>",
    },
    {
      "description": "Placeholder for the filtering input.",
      "name": "filteringPlaceholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of properties by which the data set can be filtered. Each element has the following properties:
* groupValuesLabel [string]: Localized string to display for the 'Values' group label for a specific property.
* key [string]: The identifier of this property.
* propertyLabel [string]: A human-readable string for the property.
* operators [Array]: A list of all operators supported by this property. If you omit the equals operator because your API does not support it, make sure to set \`defaultOperator\` to a supported operator from this list.
* group [string]: Optional identifier of a custom group that this filtering option is assigned to. Use to create additional groups below the default one. Make sure to also define labels for the group in the customGroupsText property. Notice that only one level of options nesting is supported.
* defaultOperator [ComparisonOperator]: Optional parameter that changes the default operator used with this filtering property. Use it only if your API does not support "equals" filtering terms with this property.
",
      "name": "filteringProperties",
      "optional": false,
      "type": "ReadonlyArray<PropertyFilterProps.FilteringProperty>",
    },
    {
      "description": "Specifies the text for the recovery button. The text is displayed next to the error text.
Use the \`onLoadItems\` event to perform a recovery action (for example, retrying the request).",
      "name": "filteringRecoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the current status of loading more options.
* \`pending\` - Indicates that no request in progress, but more options may be loaded.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that pagination has finished and no more requests are expected.
* \`error\` - Indicates that an error occurred during fetch. You should use \`recoveryText\` to enable the user to recover.",
      "inlineType": {
        "name": "DropdownStatusProps.StatusType",
        "type": "union",
        "values": [
          "pending",
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "filteringStatusType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object configuring the operators for free text filtering, which has the following properties:
* operators [Array]: A list of all operators supported for free text filtering. If you omit the contains operator because your API does not support it, make sure to set \`defaultOperator\` to a supported operator from this list.
* defaultOperator [ComparisonOperator]: An optional parameter that changes the default operator used for free text filtering. Use this parameter only if your API does not support "contains" free test filtering terms.
",
      "inlineType": {
        "name": "PropertyFilterProps.FreeTextFiltering",
        "properties": [],
        "type": "object",
      },
      "name": "freeTextFiltering",
      "optional": true,
      "type": "PropertyFilterProps.FreeTextFiltering",
    },
    {
      "defaultValue": "false",
      "description": "If hideOperations it set, the indicator of the operation (that is, \`and\` or \`or\`) and the selection of operations
(applied to the property and value token) are hidden from the user. Only use when you have a custom
filtering logic which combines tokens in different way than the default one. When used, ensure that
operations are communicated to the user in another way.
This property cannot be set when \`enableTokenGroups=true\`.
",
      "name": "hideOperations",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "PropertyFilterProps.I18nStrings",
        "properties": [
          {
            "name": "allPropertiesLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "applyActionText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "cancelActionText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "clearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "clearFiltersText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "dismissAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "editTokenHeader",
            "optional": true,
            "type": "string",
          },
          {
            "name": "enteredTextLabel",
            "optional": true,
            "type": "AutosuggestProps.EnteredTextLabel",
          },
          {
            "name": "filteringAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filteringPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "formatToken",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "groupEditAriaLabel",
            "optional": true,
            "type": "(group: PropertyFilterProps.FormattedTokenGroup) => string",
          },
          {
            "name": "groupPropertiesText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "groupValuesText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operationAndText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operationOrText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorContainsText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorDoesNotContainText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorDoesNotEqualText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorDoesNotStartWithText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorEqualsText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorGreaterOrEqualText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorGreaterText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorLessOrEqualText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorLessText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorStartsWithText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "operatorsText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "propertyText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeTokenButtonAriaLabel",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "tokenEditorAddExistingTokenAriaLabel",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "tokenEditorAddExistingTokenLabel",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "tokenEditorAddNewTokenLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenEditorAddTokenActionsAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenEditorTokenActionsAriaLabel",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "tokenEditorTokenRemoveAriaLabel",
            "optional": true,
            "type": "(token: PropertyFilterProps.FormattedToken) => string",
          },
          {
            "name": "tokenEditorTokenRemoveFromGroupLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenEditorTokenRemoveLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenLimitShowFewer",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenLimitShowMore",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tokenOperatorAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valueText",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "PropertyFilterProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Set to \`true\` while the related collection is loading (e.g. during an async filtering action).
If set to \`true\`, the live announcement of countText by assistive technologies will be paused until it changes back to \`false\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object representing the current query displayed in the property filter, which has three properties: \`operation\`, \`tokens\`, and \`tokenGroups\`.
The \`operation\` property has two valid values: "and", "or", and controls the join operation to be applied between tokens when filtering the items.
The \`tokens\` property is an array of objects that will be displayed to the user beneath the filtering input. When \`enableTokenGroups=true\`, the
\`tokenGroups\` property is used instead, which supports nested tokens.
Each token has the following properties:
* value [unknown]: The value of the token to be used as a filter. Can be null or string for default tokens, string[] for enum tokens, and anything for tokens with custom forms.
* propertyKey [string]: The key of the corresponding property in filteringProperties.
* operator ['<' | '<=' | '>' | '>=' | ':' | '!:' | '=' | '!=' | '^' | '!^']: The operator which indicates how to filter the dataset using this token.
",
      "inlineType": {
        "name": "PropertyFilterProps.Query",
        "properties": [],
        "type": "object",
      },
      "name": "query",
      "optional": false,
      "type": "PropertyFilterProps.Query",
    },
    {
      "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.",
      "name": "tokenLimit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Adds an aria-label to the "Show fewer" button for the token group control.
Use to assign unique labels when there are multiple token groups with the same \`tokenLimitShowFewer\` label on one page.",
      "name": "tokenLimitShowFewerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an aria-label to the "Show more" button for the token group control.
Use to assign unique labels when there are multiple token groups with the same \`tokenLimitShowMore\` label on one page.",
      "name": "tokenLimitShowMoreAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "If you have more than 500 \`filteringOptions\`, enable this flag to apply a performance optimization that makes
the filtering experience smoother. We don't recommend enabling the feature if you have less than 500 options,
because the improvements to performance are offset by a visible scrolling lag. When you set this flag to true,
it removes options that are not currently in view from the DOM.",
      "name": "virtualScroll",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "A slot located before the filtering input. Use it if for a Select component if your dataset supports property
filter queries only after an initial filter is applied.",
      "isDefault": false,
      "name": "customControl",
    },
    {
      "description": "A slot that replaces the standard "Clear filter" button.
When using this slot, make sure to still provide a mechanism to clear all filters.",
      "isDefault": false,
      "name": "customFilterActions",
    },
    {
      "description": "Constraint text that's displayed below the filtering input.
Use this to provide additional information about supported filters.",
      "isDefault": false,
      "name": "filteringConstraintText",
    },
    {
      "description": "Displayed when there are no options to display.
This is only shown when \`statusType\` is set to \`finished\` or not set at all.",
      "isDefault": false,
      "name": "filteringEmpty",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for radio-group matches the snapshot: radio-group 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects a different radio button. The event \`detail\` contains the current \`value\`.",
      "detailInlineType": {
        "name": "RadioGroupProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "RadioGroupProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "RadioGroup",
  "properties": [
    {
      "description": "Adds \`aria-controls\` attribute to the radio group.
If the radio group controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the group. If you are using this form element within a form field,
don't set this property because the form field component automatically sets the correct labels to make the component accessible.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-required\` to the group.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Has no effect.",
      "description": "",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an array of radio buttons to display. Each of these objects have the following properties:
- \`value\` (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.
- \`label\` (ReactNode) - Specifies a label for the radio button.
- \`description\` (ReactNode) - (Optional) Specifies descriptive text that appears below the label.
- \`disabled\` (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.
- \`controlId\` (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's \`for\` attribute to this control.
       In general it's not recommended to set this because the ID is automatically set by the radio group component.
",
      "name": "items",
      "optional": true,
      "type": "ReadonlyArray<RadioGroupProps.RadioButtonDefinition>",
    },
    {
      "description": "Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the whole group is read-only, which prevents the
user from modifying the value, but does not prevent the value from
being included in a form submission. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Sets the value of the selected radio button.
If you want to clear the selection, use \`null\`.",
      "name": "value",
      "optional": false,
      "type": "null | string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for s3-resource-selector matches the snapshot: s3-resource-selector 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the resource selection is changed. The event detail object contains resource that represents the full
path of the selected resource and \`errorText\` that may contain a validation error.",
      "detailInlineType": {
        "name": "S3ResourceSelectorProps.ChangeDetail",
        "properties": [
          {
            "name": "errorText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "resource",
            "optional": false,
            "type": "S3ResourceSelectorProps.Resource",
          },
        ],
        "type": "object",
      },
      "detailType": "S3ResourceSelectorProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Focuses the S3 URI input field",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "S3ResourceSelector",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the component.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Optionally overrides whether a bucket should be disabled for selection in the Buckets view or not.
It has higher priority than \`selectableItemsTypes\`. Example: if \`selectableItemsTypes\` has \`['buckets']\` value and
\`bucketsIsItemDisabled\` returns false for a bucket, then the bucket is disabled for selection.",
      "name": "bucketsIsItemDisabled",
      "optional": true,
      "type": "(item: S3ResourceSelectorProps.Bucket) => boolean",
    },
    {
      "defaultValue": "['Name', 'CreationDate']",
      "description": "Optionally overrides the set of visible columns in the Buckets view. Available columns: 'Name', 'CreationDate',
and 'Region'.",
      "name": "bucketsVisibleColumns",
      "optional": true,
      "type": "ReadonlyArray<string>",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies a function that returns all available buckets. The return type of the function should be a promise
that resolves to a list of objects with the following properties:
- \`Name\` (string) - Name of the bucket.
- \`CreationDate\` (string) - (Optional) Creation date of the bucket.
- \`Region\` (string) - (Optional) Region of the bucket.",
      "name": "fetchBuckets",
      "optional": false,
      "type": "() => Promise<ReadonlyArray<S3ResourceSelectorProps.Bucket>>",
    },
    {
      "description": "Specifies a function that returns available objects and object prefixes for the given \`bucketName\` and \`pathPrefix\`.
The return type of the function should be a promise that resolves to a list of objects with the following properties:
- \`Key\` (string) - Name of the object or object prefix.
- \`LastModified\` (string) - (Optional) Date when this object was last modified.
- \`Size\` (number) - (Optional) Size of the object.
- \`IsFolder\` (boolean) - (Optional)  Determines whether the entry is an object prefix (folder).",
      "name": "fetchObjects",
      "optional": false,
      "type": "(bucketName: string, pathPrefix: string) => Promise<ReadonlyArray<S3ResourceSelectorProps.Object>>",
    },
    {
      "description": "Specifies a function that returns available versions for the given \`bucketName\` and \`pathPrefix\`.
The return type of the function should be a promise that resolves to a list of versions with the following properties:
- \`VersionId\` (string) - Version ID of an object.
- \`LastModified\` (string) - (Optional) Date when this object was last modified.
- \`Size\` (number) - (Optional) Size of the object version.",
      "name": "fetchVersions",
      "optional": false,
      "type": "(bucketName: string, pathPrefix: string) => Promise<ReadonlyArray<S3ResourceSelectorProps.Version>>",
    },
    {
      "description": "Use this property to specify a different dynamic modal root for the dialog.
The function will be called when a user clicks on the trigger button.",
      "name": "getModalRoot",
      "optional": true,
      "type": "() => Promise<HTMLElement>",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "S3ResourceSelectorProps.I18nStrings",
        "properties": [
          {
            "name": "clearFilterButtonText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnBucketCreationDate",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnBucketName",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnBucketRegion",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnObjectKey",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnObjectLastModified",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnObjectSize",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnVersionID",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnVersionLastModified",
            "optional": true,
            "type": "string",
          },
          {
            "name": "columnVersionSize",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filteringCantFindMatch",
            "optional": true,
            "type": "string",
          },
          {
            "name": "filteringCounterText",
            "optional": true,
            "type": "(count: number) => string",
          },
          {
            "name": "filteringNoMatches",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextBrowseButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextInputClearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextInputPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextLoadingText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextSelectPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextUriLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextVersionSelectLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextViewButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "inContextViewButtonAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelBreadcrumbs",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelClearFilter",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelExpandBreadcrumbs",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelFiltering",
            "optional": true,
            "type": "(itemsType: string) => string",
          },
          {
            "name": "labelModalDismiss",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelNotSorted",
            "optional": true,
            "type": "SortingColumnContainingString",
          },
          {
            "name": "labelRefresh",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelSortedAscending",
            "optional": true,
            "type": "SortingColumnContainingString",
          },
          {
            "name": "labelSortedDescending",
            "optional": true,
            "type": "SortingColumnContainingString",
          },
          {
            "name": "labelsBucketsSelection",
            "optional": true,
            "type": "SelectionLabels<S3ResourceSelectorProps.Bucket>",
          },
          {
            "name": "labelsObjectsSelection",
            "optional": true,
            "type": "SelectionLabels<S3ResourceSelectorProps.Object>",
          },
          {
            "name": "labelsPagination",
            "optional": true,
            "type": "PaginationProps.Labels",
          },
          {
            "name": "labelsVersionsSelection",
            "optional": true,
            "type": "SelectionLabels<S3ResourceSelectorProps.Version>",
          },
          {
            "name": "modalBreadcrumbRootItem",
            "optional": true,
            "type": "string",
          },
          {
            "name": "modalCancelButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "modalLastUpdatedText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "modalSubmitButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "modalTitle",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionBuckets",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionBucketsLoading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionBucketsNoItems",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionBucketsSearchPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionObjects",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionObjectsLoading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionObjectsNoItems",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionObjectsSearchPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionVersions",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionVersionsLoading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionVersionsNoItems",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionVersionsSearchPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "validationBucketLength",
            "optional": true,
            "type": "string",
          },
          {
            "name": "validationBucketLowerCase",
            "optional": true,
            "type": "string",
          },
          {
            "name": "validationBucketMustComplyDns",
            "optional": true,
            "type": "string",
          },
          {
            "name": "validationBucketMustNotContain",
            "optional": true,
            "type": "string",
          },
          {
            "name": "validationPathMustBegin",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "S3ResourceSelectorProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the S3 URI input. If you're using this component within a form field,
you do not need to set this property, as the form field component will set it automatically.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "inputAriaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a placeholder to the S3 URI input.",
      "name": "inputPlaceholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Whether the S3 URI input field is in invalid state.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Optionally overrides whether an object should be disabled for selection in the Objects view or not. Similar to
\`bucketsIsItemDisabled\` this property takes precedence over the \`selectableItemsTypes\` property.",
      "name": "objectsIsItemDisabled",
      "optional": true,
      "type": "(item: S3ResourceSelectorProps.Object) => boolean",
    },
    {
      "defaultValue": "['Key', 'LastModified', 'Size']",
      "description": "Optionally overrides the set of visible columns in the Objects view. Available columns: 'Key', 'LastModified',
and 'Size'.",
      "name": "objectsVisibleColumns",
      "optional": true,
      "type": "ReadonlyArray<string>",
    },
    {
      "description": "Use this property when \`getModalRoot\` is used to clean up the modal root
element after a user closes the dialog. The function receives the return value
of the most recent getModalRoot call as an argument.",
      "name": "removeModalRoot",
      "optional": true,
      "type": "(rootElement: HTMLElement) => void",
    },
    {
      "description": "The current selected resource. Resource has the following properties:
- \`uri\` (string) - URI of the resource.
- \`versionId\` (string) - (Optional) Version ID of the selected resource.",
      "inlineType": {
        "name": "S3ResourceSelectorProps.Resource",
        "properties": [
          {
            "name": "uri",
            "optional": false,
            "type": "string",
          },
          {
            "name": "versionId",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "resource",
      "optional": false,
      "type": "S3ResourceSelectorProps.Resource",
    },
    {
      "defaultValue": "[]",
      "description": "An array of the item types that are selectable in the table view. The array may contain the following items:
'buckets', 'objects', or 'versions'. Example: ['buckets', 'objects']. By default, no items are selectable.
This property determines whether the component operates in Read mode or Write mode:
* Read mode - When 'objects' and 'versions' values are provided (folder selection should be disabled by
customizing \`objectsIsItemDisabled\` function).
* Write mode - When 'buckets' and 'objects' values are provided (file selection should be disabled by
customizing \`objectsIsItemDisabled\` function).",
      "name": "selectableItemsTypes",
      "optional": true,
      "type": "ReadonlyArray<S3ResourceSelectorProps.SelectableItems>",
    },
    {
      "description": "Optionally overrides whether a version should be disabled for selection in the Versions view or not. Similar to
\`bucketsIsItemDisabled\` this property takes precedence over the \`selectableItemsTypes\` property.",
      "name": "versionsIsItemDisabled",
      "optional": true,
      "type": "(item: S3ResourceSelectorProps.Version) => boolean",
    },
    {
      "defaultValue": "['ID', 'LastModified', 'Size']",
      "description": "Optionally overrides the set of visible columns in the Versions view. Available columns: 'ID', 'CreationDate',
and 'Size'.",
      "name": "versionsVisibleColumns",
      "optional": true,
      "type": "ReadonlyArray<string>",
    },
    {
      "description": "Href of the selected object that is applied to the View button.",
      "name": "viewHref",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Specifies additional information about component status.",
      "isDefault": false,
      "name": "alert",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for segmented-control matches the snapshot: segmented-control 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects a different segment.",
      "detailInlineType": {
        "name": "SegmentedControlProps.ChangeDetail",
        "properties": [
          {
            "name": "selectedId",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "SegmentedControlProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "SegmentedControl",
  "properties": [
    {
      "description": "Adds aria-labelledby to the component. Create a visually hidden element with an ID and set this property to that ID. If you don't want the label to be visible in narrow containers, use this property instead of \`label\`.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Defines the label of the entire segmented control. In the standard view (that is, all individual segments are visible),
this label is used as \`aria-label\` on the group of segments. In a narrow container, where this component is displayed as a select component,
the label is visible and attached to the select component, unless \`ariaLabelledBy\` is defined. Don't use \`label\` and \`ariaLabelledBy\` at the same time.",
      "name": "label",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of objects representing options. Each segment has the following properties:
- \`id\` (string) - The ID of the segment.
- \`disabled\` [boolean] - (Optional) Determines whether the segment is disabled, which prevents the user from selecting it.
- \`disabledReason\` (string) - (Optional) Displays tooltip near the segment when disabled. Use to provide additional context.
- \`iconName\` (string) - (Optional) Specifies the name of the icon, used with the [icon component](/components/icon/).
- \`iconAlt\` (string) - (Optional) Specifies alternate text for the icon when using \`iconUrl\`, or \`iconName\` without \`text\`.
           This is required when you use an icon without \`text\`.
- \`iconUrl\` (string) - (Optional) Specifies the URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).
- \`text\` (string) - (Optional) Specifies the text of the segment.
",
      "name": "options",
      "optional": true,
      "type": "ReadonlyArray<SegmentedControlProps.Option>",
    },
    {
      "description": "ID of the selected option. If you want to clear the selection, use \`null\`.",
      "name": "selectedId",
      "optional": false,
      "type": "null | string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for select matches the snapshot: select 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called when the user selects an option.
The event \`detail\` contains the current \`selectedOption\`.",
      "detailInlineType": {
        "name": "SelectProps.ChangeDetail",
        "properties": [
          {
            "name": "selectedOption",
            "optional": false,
            "type": "SelectProps.Option",
          },
        ],
        "type": "object",
      },
      "detailType": "SelectProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is set onto the UI control.",
      "name": "onFocus",
    },
    {
      "cancelable": false,
      "description": "Use this event to implement the asynchronous behavior for the component.
The event is called in the following situations:
* The user scrolls to the end of the list of options, if \`statusType\` is set to \`pending\`.
* The user clicks on the recovery button in the error state.
* The user types inside the input field.
* The user focuses the input field.

The detail object contains the following properties:
* \`filteringText\` - The value that you need to use to fetch options.
* \`firstPage\` - Indicates that you should fetch the first page of options that match the \`filteringText\`.
* \`samePage\` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).
",
      "detailInlineType": {
        "name": "OptionsLoadItemsDetail",
        "properties": [
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "firstPage",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "samePage",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "OptionsLoadItemsDetail",
      "name": "onLoadItems",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the element without opening the dropdown or showing a visual focus indicator.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Select",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the select element.
Use this if you don't have a visible label for this control.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't using \`inlineLabelText\` and isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-required\` to the native input element.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Automatically focuses the trigger when component is mounted.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID for the trigger component. It uses an automatically generated ID by default.",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines whether the whole select component is disabled.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Provides a text alternative for the error icon in the error message.",
      "i18nTag": true,
      "name": "errorIconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display when a data fetching error occurs. Make sure that you provide \`recoveryText\`.",
      "name": "errorText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and
[React Portals](https://reactjs.org/docs/portals.html).
Set this property if the dropdown would otherwise be constrained by a scrollable container,
for example inside table and split view layouts.

We recommend you use discretion, and don't enable this property unless necessary
because fixed positioning results in a slight, visible lag when scrolling complex pages.
",
      "name": "expandToViewport",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds an \`aria-label\` on the built-in filtering input if filtering is enabled.",
      "name": "filteringAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
      "i18nTag": true,
      "name": "filteringClearAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder to display in the filtering input if filtering is enabled.",
      "name": "filteringPlaceholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.",
      "name": "filteringResultsText",
      "optional": true,
      "type": "(matchesCount: number, totalCount: number) => string",
    },
    {
      "defaultValue": "'none'",
      "description": "Determines how filtering is applied to the list of \`options\`:
* \`auto\` - The component will automatically filter options based on user input.
* \`manual\` - You will set up \`onChange\` or \`onLoadItems\` event listeners and filter options on your side or request
them from server.

By default the component will filter the provided \`options\` based on the value of the filtering input field.
Only options that have a \`value\`, \`label\`, \`description\` or \`labelTag\` that contains the input value as a substring
are displayed in the list of options.

If you set this property to \`manual\`, this default filtering mechanism is disabled and all provided \`options\` are
displayed in the dropdown list. In that case make sure that you use the \`onChange\` or \`onLoadItems\` events in order
to set the \`options\` property to the options that are relevant for the user, given the filtering input value.

Note: Manual filtering doesn't disable match highlighting.
",
      "inlineType": {
        "name": "OptionsFilteringType",
        "type": "union",
        "values": [
          "none",
          "auto",
          "manual",
        ],
      },
      "name": "filteringType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the text to display at the bottom of the dropdown menu after pagination has reached the end.",
      "name": "finishedText",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds a small label inline with the input for saving vertical space in the UI.
For use with collection select filters only.",
      "name": "inlineLabelText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text to display when in the loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Has no effect.",
      "description": "",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies an array of options that are displayed to the user as a dropdown list.
The options can be grouped using \`OptionGroup\` objects.
#### Option
- \`value\` (string) - The returned value of the option when selected.

#### OptionGroup
- \`value\` (string) - Used to locate option group in test utils.
- \`options\` (Option[]) - (Optional) The options under this group.

#### Shared Option and OptionGroup properties
- \`label\` (string) - (Optional) Option or group text displayed to the user.
- \`lang\` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.
- \`description\` (string) - (Optional) Further information about the option or group that appears below the label.
- \`disabled\` (boolean) - (Optional) Determines whether the option or group is disabled.
- \`disabledReason\` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.
- \`labelTag\` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
- \`tags\` [string[]] - (Optional) A list of tags giving further guidance about the option or group.
- \`filteringTags\` [string[]] - (Optional) A list of additional tags used for automatic filtering.
- \`iconName\` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.
- \`iconAlt\` (string) - (Optional) Specifies alternate text for a custom icon, for use with \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).

Note: Only one level of option nesting is supported.

If you want to use the built-in filtering capabilities of this component, provide
a list of all valid options here and they will be automatically filtered based on the user's filtering input.

Alternatively, you can listen to the \`onChange\` or \`onLoadItems\` event and set new options
on your own.
",
      "inlineType": {
        "name": "SelectProps.Options",
        "properties": [],
        "type": "object",
      },
      "name": "options",
      "optional": true,
      "type": "SelectProps.Options",
    },
    {
      "description": "Specifies the hint text that's displayed in the field when no option has been selected.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from both modifying the value and opening the dropdown. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text for the recovery button. The text is displayed next to the error text.
Use the \`onLoadItems\` event to perform a recovery action (for example, retrying the request).",
      "i18nTag": true,
      "name": "recoveryText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the element that is announced to screen readers
when the highlighted option changes. By default, this announces
the option's name and properties, and its selected state if
the \`selectedLabel\` property is defined.
The highlighted option is provided, and its group (if groups
are used and it differs from the group of the previously highlighted option).
For more information, see the
[accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).
",
      "inlineType": {
        "name": "SelectProps.ContainingOptionAndGroupString",
        "parameters": [
          {
            "name": "option",
            "type": "SelectProps.Option",
          },
          {
            "name": "group",
            "type": "SelectProps.OptionGroup",
          },
        ],
        "returnType": "string",
        "type": "function",
      },
      "name": "renderHighlightedAriaLive",
      "optional": true,
      "type": "SelectProps.ContainingOptionAndGroupString",
    },
    {
      "description": "Specifies the localized string that describes an option as being selected.
This is required to provide a good screen reader experience. For more information, see the
[accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).",
      "i18nTag": true,
      "name": "selectedAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the currently selected option.
If you want to clear the selection, use \`null\`.",
      "name": "selectedOption",
      "optional": false,
      "type": "SelectProps.Option | null",
    },
    {
      "defaultValue": "'finished'",
      "description": "Specifies the current status of loading more options.
* \`pending\` - Indicates that no request in progress, but more options may be loaded.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that pagination has finished and no more requests are expected.
* \`error\` - Indicates that an error occurred during fetch. You should use \`recoveryText\` to enable the user to recover.",
      "inlineType": {
        "name": "DropdownStatusProps.StatusType",
        "type": "union",
        "values": [
          "pending",
          "loading",
          "finished",
          "error",
        ],
      },
      "name": "statusType",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'label'",
      "description": "Defines the variant of the trigger. You can use a simple label or the entire option (\`label | option\`)",
      "inlineType": {
        "name": "SelectProps.TriggerVariant",
        "type": "union",
        "values": [
          "label",
          "option",
        ],
      },
      "name": "triggerVariant",
      "optional": true,
      "type": "string",
    },
    {
      "description": "If you have more than 500 options, enable this flag to apply a performance optimization
that makes the filtering experience smoother. We don't recommend enabling the feature if you
have less than 500 options, because the improvements to performance are offset by a
visible scrolling lag.
When you set this flag to \`true\`, it removes options that are not currently in view from the DOM.
If your test accesses such options, you need to first scroll the options container
to the correct offset, before performing any operations on them. Use the element returned
by the \`findOptionsContainer\` test utility for this.
",
      "name": "virtualScroll",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Displayed when there are no options to display.
This is only shown when \`statusType\` is set to \`finished\` or not set at all.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Displayed for \`filteringType="auto"\` when there are no matches for the filtering.",
      "isDefault": false,
      "name": "noMatch",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for side-navigation matches the snapshot: side-navigation 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the expansion state of \`Section\` or \`ExpandablePageGroup\` items changes
as a result of a user interaction. The event \`detail\` contains an object with information about the changed item.
- \`item\` (object) - Specifies the item that was changed.
- \`expanded\` (boolean) - Specifies whether the item is expanded or not.
- \`expandableParents\` (array) - A list of parent items that have a type of \`Section\`
    or \`ExpandablePageGroup\`. Use this \`expandableParents\` array to set their expanded
    state to \`true\` if you want your data model to keep track of the current state
    of the navigation items.

Note: If the expansion is a result of the activation of a nested link
upon changing the \`activeHref\` property, this event isn't raised.
",
      "detailInlineType": {
        "name": "SideNavigationProps.ChangeDetail",
        "properties": [
          {
            "name": "expandableParents",
            "optional": false,
            "type": "ReadonlyArray<SideNavigationProps.ExpandableLinkGroup | SideNavigationProps.Section>",
          },
          {
            "name": "expanded",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "item",
            "optional": false,
            "type": "SideNavigationProps.ExpandableLinkGroup | SideNavigationProps.Section",
          },
        ],
        "type": "object",
      },
      "detailType": "SideNavigationProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": true,
      "description": "Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).
The event \`detail\` contains a definition of the clicked item.
Use this event to prevent default browser navigation (by calling \`preventDefault\` method)
and branch your own routing.
If the event is prevented the \`activeHref\` property won't be automatically set
to the href of the clicked item so you'll have to do it yourself.
",
      "detailInlineType": {
        "name": "SideNavigationProps.FollowDetail",
        "properties": [
          {
            "name": "external",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "info",
            "optional": true,
            "type": "React.ReactNode",
          },
          {
            "name": "target",
            "optional": true,
            "type": "string",
          },
          {
            "name": "text",
            "optional": true,
            "type": "string",
          },
          {
            "name": "type",
            "optional": true,
            "type": ""expandable-link-group" | "link" | "link-group" | "section-header"",
          },
        ],
        "type": "object",
      },
      "detailType": "SideNavigationProps.FollowDetail",
      "name": "onFollow",
    },
  ],
  "functions": [],
  "name": "SideNavigation",
  "properties": [
    {
      "description": "Specifies the \`href\` of the currently active link.
All items within the navigation with a matching \`href\` are highlighted.
\`Sections\` and \`Expandable Page Groups\` that contain a highlighted item
are automatically expanded, unless their definitions have the \`defaultExpanded\`
property explicitly set to \`false\`.
",
      "name": "activeHref",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Controls the header that appears at the top of the navigation component.
It contains the following:
- \`text\` (string) - Specifies the header text.
- \`href\` (string) - Specifies the \`href\` that the header links to.
- \`logo\` (object) - Specifies a logo image.
",
      "inlineType": {
        "name": "SideNavigationProps.Header",
        "properties": [
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "logo",
            "optional": true,
            "type": "SideNavigationProps.Logo",
          },
          {
            "name": "text",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "header",
      "optional": true,
      "type": "SideNavigationProps.Header",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies the items to be displayed in the navigation.
Allowed objects are: \`Link\`, \`Divider\`, \`Section\`, \`LinkGroup\` and \`ExpandableLinkGroup\`.
You can inject extra properties (for example, an ID)
in order to identify the item when it's used in an event \`detail\`
(for more information, see the events section below).

#### Link
Object that represents an anchor in the navigation.
Links are rendered as \`<a>\` tags.
- \`type\` - \`'link'\`.
- \`text\` (string) - Specifies the link text.
- \`href\` (string) - Specifies the \`href\` of the link.
- \`external\` (boolean) - Determines whether to display an external link icon next to the link.
     If set to \`true\`, an external link icon appears next to the link.
     The anchor also has the attributes \`target="_blank"\` and \`rel="noopener"\`.
     Additionally, the \`activeHref\` property won't be modified when a user chooses the link.
- \`externalIconAriaLabel\` (string) - Adds an aria-label to the external icon.
- \`info\` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
    our UX guidelines allow only to add a Badge and/or a "New" label.

#### Divider
Object that represents a horizontal divider between navigation content.
It contains \`type\`: \`'divider'\` only.

#### Section
Object that represents a section within the navigation.
- \`type\`: \`'section'\`.
- \`text\` (string) - Specifies the text to display as a title of the section.
- \`defaultExpanded\` (boolean) - Determines whether the section should be expanded by default. Default value is \`true\`.
- \`items\` (array) - Specifies the content of the section. You can use any valid item from this list.
    Although there is no technical limitation to the nesting level,
    our UX recommendation is to use only one level.

#### Section Group
Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.
You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.
- \`type\`: \`'section-group'\`.
- \`title\` (string) - Specifies the text to display as a title of the section group.
- \`items\` (array) - Specifies the content of the section header group. You can use \`Section\`, \`Link\`, \`LinkGroup\`, \`ExpandableLinkGroup\`.

#### LinkGroup
Object that represents a group of links.
- \`type\`: \`'link-group'\`.
- \`text\` (string) - Specifies the text of the group link.
- \`href\` (string) - Specifies the \`href\` of the group link.
- \`info\` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
    our UX guidelines allow only to add a Badge and/or a "New" label.
- \`items\` (array) - Specifies the content of the section. You can use any valid item from this list.
    Although there is no technical limitation to the nesting level,
    our UX recommendation is to use only one level.

#### ExpandableLinkGroup

Object that represents an expandable group of links.
- \`type\`: \`'expandable-link-group'\`.
- \`text\` (string) - Specifies the text of the group link.
- \`href\` (string) - Specifies the \`href\` of the group link.
- \`defaultExpanded\` (boolean) - Specifies whether the group should be expanded by default.
   If not explicitly set, the group is collapsed by default, unless one of the nested links is active.
- \`items\` (array) - Specifies the content of the section. You can use any valid item from this list.
    Although there is no technical limitation to the nesting level,
    our UX recommendation is to use only one level.
",
      "name": "items",
      "optional": true,
      "type": "ReadonlyArray<SideNavigationProps.Item>",
    },
  ],
  "regions": [
    {
      "description": "A slot located below the header and above the items.",
      "isDefault": false,
      "name": "itemsControl",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for slider matches the snapshot: slider 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects a value.
The event \`detail\` contains the current \`value\`.",
      "detailInlineType": {
        "name": "SliderProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "SliderProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "Slider",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an aria-description for slider labels.
Use when sliders have formatted reference values.
",
      "name": "ariaDescription",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Whether or not the slider is disabled.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Hides the colored fill line, so only the handle is visible.",
      "name": "hideFillLine",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "SliderProps.I18nStrings",
        "properties": [
          {
            "name": "valueTextRange",
            "optional": false,
            "type": "(previousValue: string, value: number, nextValue: string) => string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "SliderProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Indicates the maximum value.",
      "name": "max",
      "optional": false,
      "type": "number",
    },
    {
      "description": "Indicates the minimum value.",
      "name": "min",
      "optional": false,
      "type": "number",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value, but does not prevent the value from
being included in a form submission. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Labels shown between the minimum and maximum values.",
      "name": "referenceValues",
      "optional": true,
      "type": "ReadonlyArray<number>",
    },
    {
      "description": "How big the step size is.",
      "name": "step",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Show the tick marks along the slider line. Use with stepped sliders, except in extreme cases.",
      "name": "tickMarks",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Indicates the current value.",
      "name": "value",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Formats the values. This will format both the labels and the tooltip.",
      "name": "valueFormatter",
      "optional": true,
      "type": "(value: number) => string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for space-between matches the snapshot: space-between 1`] = `
{
  "events": [],
  "functions": [],
  "name": "SpaceBetween",
  "properties": [
    {
      "description": "Determines how the child elements will be aligned based on the [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property of the CSS Flexbox.",
      "inlineType": {
        "name": "SpaceBetweenProps.AlignItems",
        "type": "union",
        "values": [
          "center",
          "start",
          "end",
        ],
      },
      "name": "alignItems",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""vertical"",
      "description": "Defines the direction in which the content is laid out.",
      "inlineType": {
        "name": "SpaceBetweenProps.Direction",
        "type": "union",
        "values": [
          "vertical",
          "horizontal",
        ],
      },
      "name": "direction",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Defines the spacing between the individual items of the content.",
      "inlineType": {
        "name": "SpaceBetweenProps.Size",
        "type": "union",
        "values": [
          "xxxs",
          "xxs",
          "xs",
          "s",
          "m",
          "l",
          "xl",
          "xxl",
        ],
      },
      "name": "size",
      "optional": false,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Content of this component.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for spinner matches the snapshot: spinner 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Spinner",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""normal"",
      "description": "Specifies the size of the spinner.",
      "inlineType": {
        "name": "SpinnerProps.Size",
        "type": "union",
        "values": [
          "normal",
          "big",
          "large",
        ],
      },
      "name": "size",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""normal"",
      "description": "Specifies the color variant of the spinner. The \`normal\` variant picks up the current color of its context.",
      "inlineType": {
        "name": "SpinnerProps.Variant",
        "type": "union",
        "values": [
          "normal",
          "disabled",
          "inverted",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for split-panel matches the snapshot: split-panel 1`] = `
{
  "events": [],
  "functions": [],
  "name": "SplitPanel",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""collapse"",
      "description": "Determines whether the split panel collapses or hides completely when closed.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "collapse",
          "hide",
        ],
      },
      "name": "closeBehavior",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Header of the split panel.",
      "name": "header",
      "optional": false,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`true\`, the preferences button is not displayed.",
      "name": "hidePreferencesButton",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.
- \`closeButtonAriaLabel\` - The text of the panel close button aria label.
- \`openButtonAriaLabel\` - The text of the panel open button aria label.
- \`preferencesTitle\` - The text of the preferences modal header.
- \`preferencesPositionLabel\` - The text of the position preference label.
- \`preferencesPositionDescription\` - The text of the position preference description.
- \`preferencesPositionSide\` - The text of the side position preference label.
- \`preferencesPositionBottom\` - The text of the bottom position preference label.
- \`preferencesConfirm\` - The text of the preference modal confirm button.
- \`preferencesCancel\` - The text of the preference modal cancel button.
- \`resizeHandleAriaLabel\` - The label of the resize handle aria label.",
      "i18nTag": true,
      "inlineType": {
        "name": "SplitPanelProps.I18nStrings",
        "properties": [
          {
            "name": "closeButtonAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "openButtonAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesCancel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesConfirm",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesPositionBottom",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesPositionDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesPositionLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesPositionSide",
            "optional": true,
            "type": "string",
          },
          {
            "name": "preferencesTitle",
            "optional": true,
            "type": "string",
          },
          {
            "name": "resizeHandleAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "SplitPanelProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for status-indicator matches the snapshot: status-indicator 1`] = `
{
  "events": [],
  "functions": [],
  "name": "StatusIndicator",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an override for the status indicator color.",
      "inlineType": {
        "name": "StatusIndicatorProps.Color",
        "type": "union",
        "values": [
          "blue",
          "grey",
          "green",
          "red",
          "yellow",
        ],
      },
      "name": "colorOverride",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies an \`aria-label\` for the icon. If the status text alone does not fully describe the status,
use this to communicate additional context.",
      "name": "iconAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": ""success"",
      "description": "Specifies the status type.",
      "inlineType": {
        "name": "StatusIndicatorProps.Type",
        "type": "union",
        "values": [
          "error",
          "warning",
          "success",
          "info",
          "stopped",
          "pending",
          "in-progress",
          "loading",
        ],
      },
      "name": "type",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "Specifies if the text content should wrap. If you set it to false, it prevents the text from wrapping
and truncates it with an ellipsis.",
      "name": "wrapText",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "A text fragment that communicates the status.",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for steps matches the snapshot: steps 1`] = `
{
  "events": [],
  "functions": [],
  "name": "Steps",
  "properties": [
    {
      "description": "Sets the \`aria-describedby\` property on the progress steps container.",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides an \`aria-label\` to the progress steps container.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets the \`aria-labelledby\` property on the progress steps container.
If there's a visible label element that you can reference, use this instead of \`ariaLabel\`.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An array of individual steps
Each step definition has the following properties:
 * \`status\` (string) - Status of the step corresponding to a status indicator.
 * \`statusIconAriaLabel\` - (string) - (Optional) Alternative text for the status icon.
 * \`header\` (ReactNode) - Summary corresponding to the step.
 * \`details\` (ReactNode) - (Optional) Additional information corresponding to the step.
",
      "name": "steps",
      "optional": false,
      "type": "ReadonlyArray<StepsProps.Step>",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for table matches the snapshot: table 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the user resizes a table column. The event detail contains an array of column widths in pixels,
including the hidden via preferences columns. Use this event to persist the column widths.",
      "detailInlineType": {
        "name": "TableProps.ColumnWidthsChangeDetail",
        "properties": [
          {
            "name": "widths",
            "optional": false,
            "type": "ReadonlyArray<number>",
          },
        ],
        "type": "object",
      },
      "detailType": "TableProps.ColumnWidthsChangeDetail",
      "name": "onColumnWidthsChange",
    },
    {
      "cancelable": true,
      "description": "Called whenever user cancels an inline edit. Use this function to reset any
validation states, or show warning for unsaved changes.",
      "name": "onEditCancel",
    },
    {
      "cancelable": false,
      "description": "Note: This feature is provided for backwards compatibility. Its use is not recommended,
and it may be deprecated in the future.
Called when the user clicked at a table row. The event detail contains the index of the
clicked row and the row object itself. Use this event to define a row click behavior.
",
      "detailInlineType": {
        "name": "TableProps.OnRowClickDetail",
        "properties": [
          {
            "name": "item",
            "optional": false,
            "type": "T",
          },
          {
            "name": "rowIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "TableProps.OnRowClickDetail<T>",
      "name": "onRowClick",
    },
    {
      "cancelable": true,
      "description": "Note: This feature is provided for backwards compatibility. Its use is not recommended,
and it may be deprecated in the future.
Called when the user clicked at a table row with the right mouse click. The event detail
contains the index of the clicked row and the row object itself. Use this event to override
the default browser context menu behavior.
",
      "detailInlineType": {
        "name": "TableProps.OnRowContextMenuDetail",
        "properties": [
          {
            "name": "clientX",
            "optional": false,
            "type": "number",
          },
          {
            "name": "clientY",
            "optional": false,
            "type": "number",
          },
          {
            "name": "item",
            "optional": false,
            "type": "T",
          },
          {
            "name": "rowIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "TableProps.OnRowContextMenuDetail<T>",
      "name": "onRowContextMenu",
    },
    {
      "cancelable": false,
      "description": "Fired when a user interaction triggers a change in the list of selected items.
The event \`detail\` contains the current list of \`selectedItems\`.",
      "detailInlineType": {
        "name": "TableProps.SelectionChangeDetail",
        "properties": [
          {
            "name": "selectedItems",
            "optional": false,
            "type": "Array<T>",
          },
        ],
        "type": "object",
      },
      "detailType": "TableProps.SelectionChangeDetail<T>",
      "name": "onSelectionChange",
    },
    {
      "cancelable": false,
      "description": "Called when either the column to sort by or the direction of sorting changes upon user interaction.
The event detail contains the current sortingColumn and isDescending.",
      "detailInlineType": {
        "name": "TableProps.SortingState",
        "properties": [
          {
            "name": "isDescending",
            "optional": true,
            "type": "false | true",
          },
          {
            "name": "sortingColumn",
            "optional": false,
            "type": "TableProps.SortingColumn<T>",
          },
        ],
        "type": "object",
      },
      "detailType": "TableProps.SortingState<T>",
      "name": "onSortingChange",
    },
  ],
  "functions": [
    {
      "description": "Dismiss an inline edit if currently active.",
      "name": "cancelEdit",
      "parameters": [],
      "returnType": "void",
    },
    {
      "description": "When the sticky header is enabled and you call this function, the table
scroll parent scrolls to reveal the first row of the table.",
      "name": "scrollToTop",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Table",
  "properties": [
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.",
      "inlineType": {
        "name": "TableProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "flowType",
            "optional": true,
            "type": ""view-resource"",
          },
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "TableProps.AnalyticsMetadata",
    },
    {
      "description": "Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:
* \`itemSelectionLabel\` ((SelectionState, Item) => string) - Specifies the alternative text for an item.
* \`allItemsSelectionLabel\` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.
* \`selectionGroupLabel\` (string) - Specifies the alternative text for the whole selection and single-selection column header.
                                   It is prefixed to \`itemSelectionLabel\` and \`allItemsSelectionLabel\` when they are set.
You can use the first argument of type \`SelectionState\` to access the current selection
state of the component (for example, the \`selectedItems\` list). The \`itemSelectionLabel\` for individual
items also receives the corresponding  \`Item\` object. You can use the \`selectionGroupLabel\` to
add a meaningful description to the whole selection.
* \`tableLabel\` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string
                          to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.
* \`resizerRoleDescription\` (string) - Provides role description for table column resizer buttons.
* \`activateEditLabel\` (EditableColumnDefinition, Item) => string -
                     Specifies an alternative text for the edit button in editable cells.
* \`cancelEditLabel\` (EditableColumnDefinition) => string -
                     Specifies an alternative text for the cancel button in editable cells.
* \`submitEditLabel\` (EditableColumnDefinition) => string -
                     Specifies an alternative text for the submit button in editable cells.
* \`successfulEditLabel\` (EditableColumnDefinition) => string -
                     Specifies an alternative text for the success icon in editable cells. This text is also announced to screen readers.
* \`submittingEditText\` (EditableColumnDefinition) => string -
                     Specifies a text that is announced to screen readers when a cell edit operation is submitted.
* \`expandButtonLabel\` (Item) => string - Specifies an alternative text for row expand button.
* \`collapseButtonLabel\` (Item) => string - Specifies an alternative text for row collapse button.",
      "i18nTag": true,
      "inlineType": {
        "name": "TableProps.AriaLabels",
        "properties": [
          {
            "name": "activateEditLabel",
            "optional": true,
            "type": "(column: TableProps.ColumnDefinition<any>, item: T) => string",
          },
          {
            "name": "allItemsSelectionLabel",
            "optional": true,
            "type": "(data: TableProps.SelectionState<T>) => string",
          },
          {
            "name": "cancelEditLabel",
            "optional": true,
            "type": "(column: TableProps.ColumnDefinition<any>) => string",
          },
          {
            "name": "collapseButtonLabel",
            "optional": true,
            "type": "(item: T) => string",
          },
          {
            "name": "expandButtonLabel",
            "optional": true,
            "type": "(item: T) => string",
          },
          {
            "name": "itemSelectionLabel",
            "optional": true,
            "type": "(data: TableProps.SelectionState<T>, row: T) => string",
          },
          {
            "name": "resizerRoleDescription",
            "optional": true,
            "type": "string",
          },
          {
            "name": "selectionGroupLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "submitEditLabel",
            "optional": true,
            "type": "(column: TableProps.ColumnDefinition<any>) => string",
          },
          {
            "name": "submittingEditText",
            "optional": true,
            "type": "(column: TableProps.ColumnDefinition<any>) => string",
          },
          {
            "name": "successfulEditLabel",
            "optional": true,
            "type": "(column: TableProps.ColumnDefinition<any>) => string",
          },
          {
            "name": "tableLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "ariaLabels",
      "optional": true,
      "type": "TableProps.AriaLabels<T>",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The columns configuration object
* \`id\` (string) - Specifies a unique column identifier. The property is used 1) as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering,
  and 2) to match entries in the \`columnDisplay\` property, if defined.
* \`header\` (ReactNode) - Determines the display of the column header.
* \`cell\` ((item) => ReactNode) - Determines the display of a cell's content. You receive the current table row
  item as an argument.
* \`width\` (string | number) - Specifies the column width. Corresponds to the \`width\` css-property. If the width is not set,
  the browser automatically adjusts the column width based on the content. When \`resizableColumns\` property is
  set to \`true\`, additional constraints apply: 1) string values are not allowed, and 2) the last visible column always
  fills the remaining space of the table so the specified width is ignored.
* \`minWidth\` (string | number) - Specifies the minimum column width. Corresponds to the \`min-width\` css-property. When
  \`resizableColumns\` property is set to \`true\`, additional constraints apply: 1) string values are not allowed,
  and 2) the column can't resize below than the specified width (defaults to "120px"). We recommend that you set a minimum width
  of at least 176px for columns that are editable.
* \`maxWidth\` (string | number) - Specifies the maximum column width. Corresponds to the \`max-width\` css-property.
  Note that when the \`resizableColumns\` property is set to \`true\` this property is ignored.
* \`ariaLabel\` (LabelData => string) - An optional function that's called to provide an \`aria-label\` for the cell header.
  It receives the current sorting state of this column, the direction it's sorted in, and an indication of
  whether the sorting is disabled, as three Boolean values: \`sorted\`, \`descending\` and \`disabled\`.
  We recommend that you use this for sortable columns to provide more meaningful labels based on the
  current sorting direction.
* \`sortingField\` (string) - Enables default column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)
  to reorder the items. Provide the name of the property within each item that should be used for sorting by this column.
  For more complex sorting use \`sortingComparator\` instead.
* \`sortingComparator\` ((T, T) => number) - Enables custom column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)
  to reorder the items. This property accepts a custom comparator that is used to compare two items.
  The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.
  If present, the \`sortingField\` property is ignored.
* \`editConfig\` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.
  * \`editConfig.ariaLabel\` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.
  * \`editConfig.errorIconAriaLabel\` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.
  * \`editConfig.editIconAriaLabel\` (string) - Specifies an alternate text for the edit icon used in column header.
  * \`editConfig.constraintText\` (string) - Constraint text that is displayed below the edit control.
  * \`editConfig.disabledReason\` ((item) => string | undefined) - A function that determines whether inline edit for certain items is disabled, and provides a reason why.
           Return a string from the function to disable inline edit with a reason. Return \`undefined\` (or no return) from the function allow inline edit.
  * \`editConfig.validation\` ((item, value) => string) - A function that allows you to validate the value of the edit control.
           Return a string from the function to display an error message. Return \`undefined\` (or no return) from the function to indicate that the value is valid.
  * \`editConfig.editingCell\` ((item, cellContext) => ReactNode) - Determines the display of a cell's content when inline editing is active on a cell;
       You receive the current table row \`item\` and a \`cellContext\` object as arguments.
       The \`cellContext\` object contains the following properties:
    * \`cellContext.currentValue\` - State to keep track of a value in input fields while editing.
    * \`cellContext.setValue\` - Function to update \`currentValue\`. This should be called when the value in input field changes.
* \`isRowHeader\` (boolean) - Specifies that cells in this column should be used as row headers.
* \`hasDynamicContent\` (boolean) - Specifies that cells in this column may have dynamic content. The contents will then be observed to update calculated column widths.
   This may have a negative performance impact, so should be used only if necessary. It has no effect if \`resizableColumns\` is set to \`true\`.
* \`verticalAlign\` ('middle' | 'top') - Determines the alignment of the content in the table cell.",
      "name": "columnDefinitions",
      "optional": false,
      "type": "ReadonlyArray<TableProps.ColumnDefinition<T>>",
    },
    {
      "description": "Specifies an array that represents the table columns in the order in which they will be displayed, together with their visibility.
If not set, all columns are displayed and the order is dictated by the \`columnDefinitions\` property.

Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.
",
      "name": "columnDisplay",
      "optional": true,
      "type": "ReadonlyArray<TableProps.ColumnDisplayProperties>",
    },
    {
      "defaultValue": "'comfortable'",
      "description": "Toggles the content density of the table. Defaults to \`'comfortable'\`.",
      "inlineType": {
        "name": "",
        "type": "union",
        "values": [
          "comfortable",
          "compact",
        ],
      },
      "name": "contentDensity",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Use this property to activate advanced keyboard navigation and focusing behaviors.
When set to \`true\`, table cells become navigable with arrow keys, and the entire table has a single tab stop.
By default, the keyboard navigation is active for tables with expandable rows.
",
      "name": "enableKeyboardNavigation",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Use this property to define expandable table rows. The expandableRows configuration object consists of:
* \`getItemChildren\` ((Item) => Item[]) - Use it to define nested data that are shown when an item gets expanded.
* \`isItemExpandable\` ((Item) => boolean) - Use it for items that can be expanded to show nested data.
* \`expandedItems\` (Item[]) - Use it to represent the expanded state of items.
* \`onExpandableItemToggle\` (TableProps.OnExpandableItemToggle<T>) - Called when an item's expand toggle is clicked.",
      "inlineType": {
        "name": "TableProps.ExpandableRows",
        "properties": [
          {
            "name": "expandedItems",
            "optional": false,
            "type": "ReadonlyArray<T>",
          },
          {
            "name": "getItemChildren",
            "optional": false,
            "type": "(item: T) => typeOperator",
          },
          {
            "name": "isItemExpandable",
            "optional": false,
            "type": "(item: T) => boolean",
          },
          {
            "name": "onExpandableItemToggle",
            "optional": false,
            "type": "TableProps.OnExpandableItemToggle<T>",
          },
        ],
        "type": "object",
      },
      "name": "expandableRows",
      "optional": true,
      "type": "TableProps.ExpandableRows<T>",
    },
    {
      "defaultValue": "1",
      "description": " Use this property to inform screen readers which range of items is currently displayed in the table.
 It specifies the index (1-based) of the first item in the table.",
      "name": "firstIndex",
      "optional": true,
      "type": "number",
    },
    {
      "description": "A function that specifies the current status of loading more items. It is called once for the entire
table with \`item=null\` and then for each expanded item. The function result is one of the four possible states:
* \`pending\` - Indicates that no request in progress, but more options may be loaded.
* \`loading\` - Indicates that data fetching is in progress.
* \`finished\` - Indicates that loading has finished and no more requests are expected.
* \`error\` - Indicates that an error occurred during fetch.",
      "inlineType": {
        "name": "TableProps.GetLoadingStatus",
        "parameters": [
          {
            "name": "item",
            "type": "T | null",
          },
        ],
        "returnType": "TableProps.LoadingStatus",
        "type": "function",
      },
      "name": "getLoadingStatus",
      "optional": true,
      "type": "TableProps.GetLoadingStatus<T>",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Determines whether a given item is disabled. If an item is disabled, the user can't select it.",
      "inlineType": {
        "name": "TableProps.IsItemDisabled",
        "parameters": [
          {
            "name": "item",
            "type": "T",
          },
        ],
        "returnType": "boolean",
        "type": "function",
      },
      "name": "isItemDisabled",
      "optional": true,
      "type": "TableProps.IsItemDisabled<T>",
    },
    {
      "defaultValue": "[]",
      "description": "Specifies the data that's displayed in the table rows. Each item contains the data for one row. The display of a row is handled
by the \`cell\` property of each column definition in the \`columnDefinitions\` property.",
      "name": "items",
      "optional": false,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "Renders the table in a loading state. We recommend that you also set a \`loadingText\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text that's displayed when the table is in a loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Use this function to announce page changes to screen reader users.
The function argument takes the following properties:
* \`firstIndex\` (number) - The provided \`firstIndex\` property which defaults to 1 when not defined.
* \`lastIndex\` (number) - The index of the last visible item of the table.
* \`visibleItemsCount\` (number) - The number of rendered table items.
* \`totalItemsCount\` (optional, number) - The provided \`totalItemsCount\` property.
Important: in tables with expandable rows the \`firstIndex\`, \`lastIndex\`, and \`totalItemsCount\` reflect the top-level items only.",
      "name": "renderAriaLive",
      "optional": true,
      "type": "(data: TableProps.LiveAnnouncement) => string",
    },
    {
      "description": "Renders loader row content for empty row state: the loading status is "finished",
and the row is expanded but has empty children array.
The empty loader state is only supported for expandable rows. Use \`empty\` slot if
the table items array is empty.
",
      "name": "renderLoaderEmpty",
      "optional": true,
      "type": "(detail: TableProps.RenderLoaderEmptyDetail<T>) => React.ReactNode",
    },
    {
      "description": "Renders loader row content for error state.",
      "name": "renderLoaderError",
      "optional": true,
      "type": "(detail: TableProps.RenderLoaderDetail<T>) => React.ReactNode",
    },
    {
      "description": "Renders loader row content for loading state.",
      "name": "renderLoaderLoading",
      "optional": true,
      "type": "(detail: TableProps.RenderLoaderDetail<T>) => React.ReactNode",
    },
    {
      "description": "Renders loader row content for pending state.",
      "name": "renderLoaderPending",
      "optional": true,
      "type": "(detail: TableProps.RenderLoaderDetail<T>) => React.ReactNode",
    },
    {
      "description": "Specifies if columns can be resized. If set to \`true\`, users can resize the columns in the table.",
      "name": "resizableColumns",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "[]",
      "description": "List of selected items.",
      "name": "selectedItems",
      "optional": true,
      "type": "ReadonlyArray<T>",
    },
    {
      "description": "Specifies the selection type (\`'single' | 'multi'\`).",
      "inlineType": {
        "name": "TableProps.SelectionType",
        "type": "union",
        "values": [
          "single",
          "multi",
        ],
      },
      "name": "selectionType",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the definition object of the currently sorted column. Make sure you pass an object that's
present in the \`columnDefinitions\` array.",
      "inlineType": {
        "name": "TableProps.SortingColumn",
        "properties": [
          {
            "name": "sortingComparator",
            "optional": true,
            "type": "(a: T, b: T) => number",
          },
          {
            "name": "sortingField",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "sortingColumn",
      "optional": true,
      "type": "TableProps.SortingColumn<T>",
    },
    {
      "description": "Specifies whether to use a descending sort order.",
      "name": "sortingDescending",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if sorting buttons are disabled. For example, use this property
to prevent the user from sorting before items are fully loaded.",
      "name": "sortingDisabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the number of first and/or last columns that should be sticky.
If the available scrollable space is less than a certain threshold, the feature is deactivated.

Use it in conjunction with the sticky columns preference of the
[collection preferences](/components/collection-preferences/) component.

",
      "inlineType": {
        "name": "TableProps.StickyColumns",
        "properties": [
          {
            "name": "first",
            "optional": true,
            "type": "number",
          },
          {
            "name": "last",
            "optional": true,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "name": "stickyColumns",
      "optional": true,
      "type": "TableProps.StickyColumns",
    },
    {
      "description": "If set to \`true\`, the table header remains visible when the user scrolls down.
Do not use \`stickyHeader\` conditionally. Instead, keep its value constant during the component lifecycle.
",
      "name": "stickyHeader",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies a vertical offset (in pixels) for the sticky header. For example, use this if you
need to position the sticky header below other fixed position elements on the page.",
      "name": "stickyHeaderVerticalOffset",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies if table rows alternate being shaded and unshaded. If set to \`true\`, every other row will be shaded.",
      "name": "stripedRows",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies a function that will be called after user submits an inline edit.
Return a promise to keep loading state while the submit request is in progress.",
      "inlineType": {
        "name": "TableProps.SubmitEditFunction",
        "parameters": [
          {
            "name": "item",
            "type": "ItemType",
          },
          {
            "name": "column",
            "type": "TableProps.ColumnDefinition<ItemType>",
          },
          {
            "name": "newValue",
            "type": "ValueType",
          },
        ],
        "returnType": "Promise<void> | void",
        "type": "function",
      },
      "name": "submitEdit",
      "optional": true,
      "type": "TableProps.SubmitEditFunction<T>",
    },
    {
      "description": "Use this property to inform screen readers how many items there are in a table.
It specifies the total count of all items in a table.
If there is an unknown total of items in a table, leave this property undefined.",
      "name": "totalItemsCount",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies a property that uniquely identifies an individual item.
When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)
for performance optimizations.
It's also used to connect \`items\` and \`selectedItems\` or \`expandableRows.expandedItems\` values when they reference different objects.
",
      "inlineType": {
        "name": "TableProps.TrackBy",
        "type": "union",
        "values": [
          "string",
          "(item: T) => string",
        ],
      },
      "name": "trackBy",
      "optional": true,
      "type": "TableProps.TrackBy<T>",
    },
    {
      "defaultValue": "'container'",
      "description": "Specify a table variant with one of the following:
* \`container\` - Use this variant to have the table displayed within a container.
* \`borderless\` - Use this variant when the table should have no outer borders or shadow
                 (such as in a dashboard item container).
* \`embedded\` - Use this variant within a parent container (such as a modal, expandable
               section, container or split panel).
               **Deprecated**, replaced by \`borderless\` and \`container\`.
* \`stacked\` - Use this variant adjacent to other stacked containers (such as a container,
              table).
* \`full-page\` – Use this variant when the table is the entire content of a page.",
      "inlineType": {
        "name": "TableProps.Variant",
        "type": "union",
        "values": [
          "container",
          "embedded",
          "borderless",
          "stacked",
          "full-page",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`embedded\`, \`stacked\`, and \`full-page\` variants",
    },
    {
      "deprecatedTag": "Replaced by \`columnDisplay\`.",
      "description": "Specifies an array containing the \`id\`s of visible columns. If not set, all columns are displayed.
Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.

The order of ids doesn't influence the order in which columns are displayed - this is dictated by the \`columnDefinitions\` property.
",
      "name": "visibleColumns",
      "optional": true,
      "type": "ReadonlyArray<string>",
    },
    {
      "description": "Specifies if text wraps within table cells. If set to \`true\`, long text within cells may wrap onto
multiple lines instead of being truncated with an ellipsis.",
      "name": "wrapLines",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Displayed when the \`items\` property is an empty array. Use it to render an empty or no-match state.",
      "isDefault": false,
      "name": "empty",
    },
    {
      "description": "Use this slot to add filtering controls to the table.",
      "isDefault": false,
      "name": "filter",
    },
    {
      "description": "Footer of the table container.",
      "isDefault": false,
      "name": "footer",
    },
    {
      "description": "Heading element of the table container. Use the [header component](/components/header/).",
      "isDefault": false,
      "name": "header",
    },
    {
      "description": "Use this slot to add the [pagination component](/components/pagination/) to the table.",
      "isDefault": false,
      "name": "pagination",
    },
    {
      "description": "Use this slot to add [collection preferences](/components/collection-preferences/) to the table.",
      "isDefault": false,
      "name": "preferences",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for tabs matches the snapshot: tabs 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called whenever the user selects a different tab.
The event's \`detail\` contains the new \`activeTabId\`.",
      "detailInlineType": {
        "name": "TabsProps.ChangeDetail",
        "properties": [
          {
            "name": "activeTabHref",
            "optional": true,
            "type": "string",
          },
          {
            "name": "activeTabId",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "TabsProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [],
  "name": "Tabs",
  "properties": [
    {
      "description": "The \`id\` of the currently active tab.
* If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).
* If you explicitly set this property, you must set define an \`onChange\` handler to update the property when a tab header is clicked (that is, controlled behavior).",
      "name": "activeTabId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Provides an \`aria-label\` to the tab container.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Sets the \`aria-labelledby\` property on the tab container.
If there's a visible label element that you can reference, use this instead of \`ariaLabel\`.
Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Determines whether the tab content has padding. If \`true\`, removes the default padding from the tab content area.",
      "name": "disableContentPaddings",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Enabling this property makes the tab content fit to the available height.
If the tab content is too short, it will stretch. If the tab content is too long, a vertical scrollbar will be shown.",
      "name": "fitHeight",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "TabsProps.I18nStrings",
        "properties": [
          {
            "name": "scrollLeftAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "scrollRightAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tabsWithActionsAriaRoleDescription",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "TabsProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the tabs to display. Each tab object has the following properties:
- \`id\` (string) - The tab identifier. This value needs to be passed to the Tabs component as \`activeTabId\` to select this tab.
- \`label\` (ReactNode) - Tab label shown in the UI.
- \`content\` (ReactNode) - (Optional) Tab content to render in the container.
- \`disabled\` (boolean) - (Optional) Specifies if this tab is disabled.
- \`disabledReason\` (string) - (Optional) Displays tooltip near the tab when disabled. Use to provide additional context.
- \`dismissible\` (boolean) - (Optional) Determines whether the tab includes a dismiss icon button. By default, the dismiss button is not included.
- \`dismissLabel\` (boolean) - (Optional) Specifies an aria-label for the dismiss icon button.
- \`dismissDisabled\` (boolean) - (Optional) Determines whether the dismiss button is disabled.
- \`action\` (ReactNode) - (Optional) Action for the tab, rendered next to its corresponding label.
   Although it is technically possible to insert any content, our UX guidelines only allow you to add
   an icon button or icon button dropdown.
- \`onDismiss\` (ButtonProps['onClick']) - (Optional) Called when a user clicks on the dismiss button.
- \`href\` (string) - (Optional) You can use this parameter to change the default \`href\` of the internal tab anchor. The
   \`click\` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,
   ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,
   if your application routing can handle such deep links. You can manually update routing on the current page
   using the \`activeTabHref\` property of the \`change\` event's detail.
",
      "name": "tabs",
      "optional": false,
      "type": "ReadonlyArray<TabsProps.Tab>",
    },
    {
      "defaultValue": ""default"",
      "description": "The possible visual variants of tabs are the following:
* \`default\` - Use in any context.
* \`container\` - Use this variant to have the tabs displayed within a container header.
* \`stacked\` - Use this variant directly adjacent to other stacked containers (such as a container, table).",
      "inlineType": {
        "name": "TabsProps.Variant",
        "type": "union",
        "values": [
          "default",
          "container",
          "stacked",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
      "visualRefreshTag": "\`stacked\` variant",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for tag-editor matches the snapshot: tag-editor 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when any tag operation occurs.
The event \`detail\` object contains the full updated state of \`tags\`,
and whether the component is in a \`valid\` state.",
      "detailInlineType": {
        "name": "TagEditorProps.ChangeDetail",
        "properties": [
          {
            "name": "tags",
            "optional": false,
            "type": "ReadonlyArray<TagEditorProps.Tag>",
          },
          {
            "name": "valid",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "TagEditorProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Focuses the first error within the component.
If no error is present, no element is focused.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "TagEditor",
  "properties": [
    {
      "description": "Specifies a regular expression string that overrides the default acceptable
character validation. You should use this property only when absolutely necessary.",
      "name": "allowedCharacterPattern",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "TagEditorProps.I18nStrings",
        "properties": [
          {
            "name": "addButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "awsPrefixError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "clearAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "duplicateKeyError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "emptyKeyError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "emptyTags",
            "optional": true,
            "type": "string",
          },
          {
            "name": "enteredKeyLabel",
            "optional": true,
            "type": "(enteredText: string) => string",
          },
          {
            "name": "enteredValueLabel",
            "optional": true,
            "type": "(enteredText: string) => string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "invalidKeyError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "invalidValueError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "itemRemovedAriaLive",
            "optional": true,
            "type": "string",
          },
          {
            "name": "keyHeader",
            "optional": true,
            "type": "string",
          },
          {
            "name": "keyPlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "keySuggestion",
            "optional": true,
            "type": "string",
          },
          {
            "name": "keysSuggestionError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "keysSuggestionLoading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "loading",
            "optional": true,
            "type": "string",
          },
          {
            "name": "maxKeyCharLengthError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "maxValueCharLengthError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "optional",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "removeButtonAriaLabel",
            "optional": true,
            "type": "(item: TagEditorProps.Tag) => string",
          },
          {
            "name": "tagLimit",
            "optional": true,
            "type": "(availableTags: number, tagLimit: number) => string",
          },
          {
            "name": "tagLimitExceeded",
            "optional": true,
            "type": "(tagLimit: number) => string",
          },
          {
            "name": "tagLimitReached",
            "optional": true,
            "type": "(tagLimit: number) => string",
          },
          {
            "name": "tooManyKeysSuggestion",
            "optional": true,
            "type": "string",
          },
          {
            "name": "tooManyValuesSuggestion",
            "optional": true,
            "type": "string",
          },
          {
            "name": "undoButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "undoPrompt",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valueHeader",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valuePlaceholder",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valueSuggestion",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valuesSuggestionError",
            "optional": true,
            "type": "string",
          },
          {
            "name": "valuesSuggestionLoading",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "TagEditorProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies a function that returns all the keys for a resource.
The expected return type of the function should be a promise that
resolves to a list of strings of all the keys (for example, \`['key1', 'key2']\`).",
      "name": "keysRequest",
      "optional": true,
      "type": "(key: string) => Promise<ReadonlyArray<string>>",
    },
    {
      "description": "Renders the component in a loading state.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the maximum number of tags that a customer can add.",
      "name": "tagLimit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies an array of tags that are displayed to the user. Each tag item has the following properties:
- \`key\` (string) - The key of the tag that's displayed in the corresponding key field.
- \`value\` (string) - The value of the tag that's displayed in the corresponding value field.
- \`existing\` (boolean) - Specifies if this is an existing tag for the resource.
     When set to \`true\`, if the tag is deleted its \`markedForRemoval\` property is to \`true\`.
     When set to \`false\`, deletion of the tag removes the tag from the \`tags\` list.
- \`markedForRemoval\` (boolean) - Specifies if this tag has been marked for removal.
     This property is set to \`true\` by the component when a user removes an existing tag.
     The item will remain in the \`tags\` list. When set to \`true\`, the user is presented with the option to undo the removal operation.
- \`valueSuggestionOptions\` (Array<AutosuggestProps.Option>) - An array of autosuggest suggestion options associated with the specified tag key.",
      "name": "tags",
      "optional": true,
      "type": "ReadonlyArray<TagEditorProps.Tag>",
    },
    {
      "description": "Specifies a function that returns all the values for a specified key
of a resource. The expected return type of the function should be a promise
that resolves to a list of strings of all the values (for example, \`['value1', 'value2']\`).
You should return a rejected promise when the \`key\` parameter is an empty string.
",
      "name": "valuesRequest",
      "optional": true,
      "type": "(key: string, value: string) => Promise<ReadonlyArray<string>>",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for text-content matches the snapshot: text-content 1`] = `
{
  "events": [],
  "functions": [],
  "name": "TextContent",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Content of the component.",
      "displayName": "content",
      "isDefault": true,
      "name": "children",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for text-filter matches the snapshot: text-filter 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when a change in filtering is caused by a user interaction. The event \`detail\` contains the current \`filteringText\`.",
      "detailInlineType": {
        "name": "TextFilterProps.ChangeDetail",
        "properties": [
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "TextFilterProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called after the user changes the value of the filtering input field and stops typing for a certain
period of time. If you want a delayed handler to invoke a filtering API call, you can use this event in addition to \`onChange\`.",
      "detailInlineType": {
        "name": "TextFilterProps.ChangeDetail",
        "properties": [
          {
            "name": "filteringText",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "TextFilterProps.ChangeDetail",
      "name": "onDelayedChange",
    },
  ],
  "functions": [
    {
      "description": "Sets focus on the underlying input control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "TextFilter",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Accepts a human-readable, localized string that indicates the number of results. For example, "1 match" or "165 matches."
If the total number of results is unknown, also include an indication that there may be more results than
the number listed. For example, "25+ matches."
The count text is only displayed when \`filteringText\` isn't empty.
When the \`countText\` or \`filteringText\` changes, it will be announced to assistive technologies.
",
      "name": "countText",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the filtering input is disabled.
For example, you can use it if you are fetching new items upon filtering change
in order to prevent the user from changing the filtering text.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Adds an \`aria-label\` on the filtering input.",
      "name": "filteringAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Label for the filtering input clear button.",
      "name": "filteringClearAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Placeholder for the filtering input.",
      "name": "filteringPlaceholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The current value of the filtering input.",
      "name": "filteringText",
      "optional": false,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Set to \`true\` while the related collection is loading (e.g. during an async filtering action).
If set to \`true\`, the live announcement of countText by assistive technologies will be paused until it changes back to \`false\`.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for textarea matches the snapshot: textarea 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keydown\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyDown",
    },
    {
      "cancelable": true,
      "description": "Called when the underlying native textarea emits a \`keyup\` event.
The event \`detail\` contains the \`keyCode\` and information
about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
      "detailInlineType": {
        "name": "InputProps.KeyDetail",
        "properties": [
          {
            "name": "altKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "ctrlKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "isComposing",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "key",
            "optional": false,
            "type": "string",
          },
          {
            "name": "keyCode",
            "optional": false,
            "type": "number",
          },
          {
            "name": "metaKey",
            "optional": false,
            "type": "boolean",
          },
          {
            "name": "shiftKey",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.KeyDetail",
      "name": "onKeyUp",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus on the textarea control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Textarea",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "true",
      "description": "Specifies whether to enable a browser's autocomplete functionality for this input.
In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields).
To use it correctly, set the \`name\` property.
You can either provide a boolean value to set the property to "on" or "off", or specify a string value
for the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
",
      "name": "autoComplete",
      "optional": true,
      "type": "boolean | string",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Use the \`spellcheck\` property instead.",
      "description": "Specifies whether to disable browser spellcheck feature.
If you set this to \`true\`, it disables native browser capability
that checks for spelling/grammar errors.
If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserSpellcheck",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the number of lines of text to set the height to.",
      "name": "rows",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the value of the \`spellcheck\` attribute on the native control.
This value controls the native browser capability to check for spelling/grammar errors.
If not set, the browser default behavior is to perform spellchecking.
For more details, check the [spellcheck MDN article](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
Enhanced spellchecking features of your browser and/or operating system may send input values to external parties.
Make sure it’s deactivated for fields with sensitive information to prevent
inadvertently sending data (such as user passwords) to third parties.
",
      "name": "spellcheck",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text entered into the form element.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for tiles matches the snapshot: tiles 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user selects a different tile.",
      "detailInlineType": {
        "name": "TilesProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "TilesProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Tiles",
  "properties": [
    {
      "description": "Adds \`aria-controls\` attribute to the component.
If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` on the group. Don't set this property if you are using this form element within a form field
because the form field component automatically sets the correct labels to make the component accessible.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-required\` on the group.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.
If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.
It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.",
      "name": "columns",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "List of tile definitions. Each tile has the following properties:
- \`value\` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.
- \`label\` [ReactNode] - A short description for the option the tile represents.
- \`description\` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the \`label\`.
- \`image\` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the \`description\`.
- \`disabled\` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.
- \`controlId\` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's \`for\` attribute to this control.
           We recommend that you don't set this property because it's automatically set by the tiles component.
",
      "name": "items",
      "optional": true,
      "type": "ReadonlyArray<TilesProps.TilesDefinition>",
    },
    {
      "description": "Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value, but does not prevent the value from
being included in a form submission. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the value of the selected tile.
If you want to clear the selection, use \`null\`.",
      "name": "value",
      "optional": false,
      "type": "null | string",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for time-input matches the snapshot: time-input 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "detailType": "null",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "description": "Called whenever a user changes the input value (by typing or pasting).
The event \`detail\` contains the current value of the field.",
      "detailInlineType": {
        "name": "InputProps.ChangeDetail",
        "properties": [
          {
            "name": "value",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "detailType": "InputProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "detailType": "null",
      "name": "onFocus",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus on the input control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "TimeInput",
  "properties": [
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to add \`aria-required\` to the native control.",
      "name": "ariaRequired",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "true",
      "description": "Specifies whether to enable a browser's autocomplete functionality for this input.
In some cases it might be appropriate to disable autocomplete (for
example, for security-sensitive fields). To use it correctly, set the \`name\` property.",
      "name": "autoComplete",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Indicates whether the control should be focused as
soon as the page loads, which enables the user to
start typing without having to manually focus the control. Don't
use this option on pages where the control may be
scrolled out of the viewport.",
      "name": "autoFocus",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. You can use it to relate
a label element's \`for\` attribute to this control.
It defaults to an automatically generated ID that
is provided by its parent form field component.
",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies whether to disable browser autocorrect and related features.
If you set this to \`true\`, it disables any native browser capabilities
that automatically correct user input, such as \`autocorrect\` and
\`autocapitalize\`. If you don't set it, the behavior follows the default behavior
of the user's browser.",
      "name": "disableBrowserAutocorrect",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "'hh:mm:ss'",
      "description": "Specifies the format of the time input.
Use it to restrict the granularity of time that the user can enter.
",
      "inlineType": {
        "name": "TimeInputProps.Format",
        "type": "union",
        "values": [
          "hh",
          "hh:mm",
          "hh:mm:ss",
        ],
      },
      "name": "format",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Overrides the invalidation state. Usually the invalid state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.",
      "name": "invalid",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the placeholder text rendered when the value is an empty string.",
      "name": "placeholder",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value but includes it in a form
submission. A read-only control can receive focus.
Don't use read-only inputs outside a form.
",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
    {
      "defaultValue": "true",
      "description": "Specifies whether the component should use 12-hour or 24-hour format.
When using 12-hour format, there is no option for picking AM or PM.",
      "name": "use24Hour",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text entered into the form element.",
      "name": "value",
      "optional": false,
      "type": "string",
    },
    {
      "description": "Overrides the warning state. Usually the warning state
comes from the parent \`FormField\`component,
however sometimes you need to override its
state when you have more than one input within a
single form field.
When you use it, provide additional context with
information on the input state, and associate it
with the input using \`ariaDescribedby\`.",
      "name": "warning",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for toggle matches the snapshot: toggle 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when input focus is removed from the UI control.",
      "name": "onBlur",
    },
    {
      "cancelable": false,
      "detailInlineType": {
        "name": "ToggleProps.ChangeDetail",
        "properties": [
          {
            "name": "checked",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "ToggleProps.ChangeDetail",
      "name": "onChange",
    },
    {
      "cancelable": false,
      "description": "Called when input focus is moved to the UI control.",
      "name": "onFocus",
    },
  ],
  "functions": [
    {
      "description": "Sets input focus onto the UI control.",
      "name": "focus",
      "parameters": [],
      "returnType": "void",
    },
  ],
  "name": "Toggle",
  "properties": [
    {
      "description": "Adds \`aria-controls\` attribute to the component.
If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description
and set the property to a string of each ID separated by spaces (for example, \`"id1 id2 id3"\`).
",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the native control.
Use this if you don't have a visible label for this control.
",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-labelledby\` to the component. If you're using this component within a form field,
don't set this property because the form field component automatically sets it.
Use this property if the component isn't surrounded by a form field, or you want to override the value
automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.
",
      "name": "ariaLabelledby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the component is selected.",
      "name": "checked",
      "optional": false,
      "type": "boolean",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the ID of the native form element. By default, it uses an automatically generated ID.",
      "name": "controlId",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is disabled, which prevents the
user from modifying the value and prevents the value from
being included in a form submission. A disabled control can't
receive focus.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the name of the control used in HTML forms.",
      "name": "name",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value. Should be used only inside forms.
A read-only control is still focusable.
If both \`readOnly\` and \`disabled\` are set, \`disabled\` takes precedence.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "The control's label that's displayed next to the toggle. Clicking this will invoke a state change.",
      "displayName": "label",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Description that appears below the label.",
      "isDefault": false,
      "name": "description",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for toggle-button matches the snapshot: toggle-button 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when the user changes their selection.
The event \`detail\` contains the current value for the \`pressed\` property.",
      "detailInlineType": {
        "name": "ToggleButtonProps.ChangeDetail",
        "properties": [
          {
            "name": "pressed",
            "optional": false,
            "type": "boolean",
          },
        ],
        "type": "object",
      },
      "detailType": "ToggleButtonProps.ChangeDetail",
      "name": "onChange",
    },
  ],
  "functions": [
    {
      "description": "Focuses the underlying native button.",
      "name": "focus",
      "parameters": [
        {
          "name": "options",
          "type": "FocusOptions",
        },
      ],
      "returnType": "void",
    },
  ],
  "name": "ToggleButton",
  "properties": [
    {
      "description": "Adds \`aria-controls\` to the button. Use when the button controls the contents or presence of an element.",
      "name": "ariaControls",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-describedby\` to the button.",
      "name": "ariaDescribedby",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds \`aria-label\` to the button element. Use this to provide an accessible name for buttons
that don't have visible text, and to distinguish between multiple buttons with identical visible text.
The text will also be added to the \`title\` attribute of the button.",
      "name": "ariaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Renders the button as disabled and prevents clicks.",
      "name": "disabled",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Provides a reason why the button is disabled (only when \`disabled\` is \`true\`).
If provided, the button becomes focusable.
Applicable only for the normal variant.",
      "name": "disabledReason",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an external icon after the button label text.
If an href is provided, it opens the link in a new tab.",
      "name": "external",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component. The object should contain:
* \`externalIconAriaLabel\` - (optional) Specifies the aria-label for the external icon when \`external\` is set to \`true\`.",
      "i18nTag": true,
      "inlineType": {
        "name": "ButtonProps.I18nStrings",
        "properties": [
          {
            "name": "externalIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "ButtonProps.I18nStrings",
    },
    {
      "description": "Displays an icon next to the text.",
      "inlineType": {
        "name": "IconProps.Name",
        "type": "union",
        "values": [
          "add-plus",
          "anchor-link",
          "angle-left-double",
          "angle-left",
          "angle-right-double",
          "angle-right",
          "angle-up",
          "angle-down",
          "arrow-left",
          "arrow-right",
          "audio-full",
          "audio-half",
          "audio-off",
          "backward-10-seconds",
          "bug",
          "call",
          "calendar",
          "caret-down-filled",
          "caret-down",
          "caret-left-filled",
          "caret-right-filled",
          "caret-up-filled",
          "caret-up",
          "check",
          "contact",
          "close",
          "closed-caption",
          "closed-caption-unavailable",
          "copy",
          "command-prompt",
          "delete-marker",
          "download",
          "drag-indicator",
          "edit",
          "ellipsis",
          "envelope",
          "exit-full-screen",
          "expand",
          "external",
          "face-happy",
          "face-happy-filled",
          "face-neutral",
          "face-neutral-filled",
          "face-sad",
          "face-sad-filled",
          "file-open",
          "file",
          "filter",
          "flag",
          "folder-open",
          "folder",
          "forward-10-seconds",
          "full-screen",
          "gen-ai",
          "globe",
          "grid-view",
          "group-active",
          "group",
          "heart",
          "heart-filled",
          "insert-row",
          "key",
          "keyboard",
          "list-view",
          "location-pin",
          "lock-private",
          "map",
          "menu",
          "microphone",
          "microphone-off",
          "mini-player",
          "multiscreen",
          "notification",
          "pause",
          "play",
          "redo",
          "refresh",
          "remove",
          "resize-area",
          "script",
          "search",
          "security",
          "settings",
          "send",
          "share",
          "shrink",
          "star-filled",
          "star-half",
          "star",
          "status-in-progress",
          "status-info",
          "status-negative",
          "status-pending",
          "status-positive",
          "status-stopped",
          "status-warning",
          "subtract-minus",
          "suggestions",
          "support",
          "thumbs-down-filled",
          "thumbs-down",
          "thumbs-up-filled",
          "thumbs-up",
          "ticket",
          "transcript",
          "treeview-collapse",
          "treeview-expand",
          "undo",
          "unlocked",
          "upload-download",
          "upload",
          "user-profile-active",
          "user-profile",
          "video-off",
          "video-on",
          "video-unavailable",
          "video-camera-off",
          "video-camera-on",
          "video-camera-unavailable",
          "view-full",
          "view-horizontal",
          "view-vertical",
          "zoom-in",
          "zoom-out",
          "zoom-to-fit",
        ],
      },
      "name": "iconName",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.
",
      "name": "iconUrl",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Renders the button as being in a loading state. It takes precedence over the \`disabled\` if both are set to \`true\`.
It prevents users from clicking the button, but it can still be focused.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "Specifies the text that screen reader announces when the button is in a loading state.",
      "name": "loadingText",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Sets the toggle button to pressed state.",
      "name": "pressed",
      "optional": false,
      "type": "boolean",
    },
    {
      "description": "Displays an icon next to the text in pressed state.",
      "inlineType": {
        "name": "IconProps.Name",
        "type": "union",
        "values": [
          "add-plus",
          "anchor-link",
          "angle-left-double",
          "angle-left",
          "angle-right-double",
          "angle-right",
          "angle-up",
          "angle-down",
          "arrow-left",
          "arrow-right",
          "audio-full",
          "audio-half",
          "audio-off",
          "backward-10-seconds",
          "bug",
          "call",
          "calendar",
          "caret-down-filled",
          "caret-down",
          "caret-left-filled",
          "caret-right-filled",
          "caret-up-filled",
          "caret-up",
          "check",
          "contact",
          "close",
          "closed-caption",
          "closed-caption-unavailable",
          "copy",
          "command-prompt",
          "delete-marker",
          "download",
          "drag-indicator",
          "edit",
          "ellipsis",
          "envelope",
          "exit-full-screen",
          "expand",
          "external",
          "face-happy",
          "face-happy-filled",
          "face-neutral",
          "face-neutral-filled",
          "face-sad",
          "face-sad-filled",
          "file-open",
          "file",
          "filter",
          "flag",
          "folder-open",
          "folder",
          "forward-10-seconds",
          "full-screen",
          "gen-ai",
          "globe",
          "grid-view",
          "group-active",
          "group",
          "heart",
          "heart-filled",
          "insert-row",
          "key",
          "keyboard",
          "list-view",
          "location-pin",
          "lock-private",
          "map",
          "menu",
          "microphone",
          "microphone-off",
          "mini-player",
          "multiscreen",
          "notification",
          "pause",
          "play",
          "redo",
          "refresh",
          "remove",
          "resize-area",
          "script",
          "search",
          "security",
          "settings",
          "send",
          "share",
          "shrink",
          "star-filled",
          "star-half",
          "star",
          "status-in-progress",
          "status-info",
          "status-negative",
          "status-pending",
          "status-positive",
          "status-stopped",
          "status-warning",
          "subtract-minus",
          "suggestions",
          "support",
          "thumbs-down-filled",
          "thumbs-down",
          "thumbs-up-filled",
          "thumbs-up",
          "ticket",
          "transcript",
          "treeview-collapse",
          "treeview-expand",
          "undo",
          "unlocked",
          "upload-download",
          "upload",
          "user-profile-active",
          "user-profile",
          "video-off",
          "video-on",
          "video-unavailable",
          "video-camera-off",
          "video-camera-on",
          "video-camera-unavailable",
          "view-full",
          "view-horizontal",
          "view-vertical",
          "zoom-in",
          "zoom-out",
          "zoom-to-fit",
        ],
      },
      "name": "pressedIconName",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies the URL of a custom icon in pressed state. Use this property if the icon needed for your use case isn't available.
\`pressedIconSvg\` will take precedence if you set both \`pressedIconUrl\` and \`pressedIconSvg\`.
",
      "name": "pressedIconUrl",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "'normal'",
      "description": "Determines the general styling of the toggle button as follows:
* \`normal\` for secondary buttons.
* \`icon\` to display an icon only (no text).
Defaults to \`normal\` if not specified.
",
      "inlineType": {
        "name": "ToggleButtonProps.Variant",
        "type": "union",
        "values": [
          "normal",
          "icon",
        ],
      },
      "name": "variant",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "true",
      "description": "Specifies if the \`text\` content wraps. If you set it to \`false\`, it prevents the text from wrapping.",
      "name": "wrapText",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [
    {
      "description": "Text displayed in the button element.",
      "displayName": "text",
      "isDefault": true,
      "name": "children",
    },
    {
      "description": "Specifies the SVG of a custom icon.
Use this property if you want your custom icon to inherit colors dictated by variant or hover states.
When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element:
- has attribute \`focusable="false"\`.
- has \`viewBox="0 0 16 16"\`.

If you set the \`svg\` element as the root node of the slot, the component will automatically
- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`.
- set the stroke width based on the size of the icon.
- set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\`.
You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements.

If you set both \`iconUrl\` and \`iconSvg\`, \`iconSvg\` will take precedence.

*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software.
In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.
",
      "isDefault": false,
      "name": "iconSvg",
    },
    {
      "description": "Specifies the SVG of a custom icon in pressed state.
Use this property if you want your custom icon to inherit colors dictated by variant or hover states.
When this property is set, the component will be decorated with \`aria-hidden="true"\`. Ensure that the \`svg\` element:
- has attribute \`focusable="false"\`
- has \`viewBox="0 0 16 16"\`

If you set the \`svg\` element as the root node of the slot, the component will automatically:
- set \`stroke="currentColor"\`, \`fill="none"\`, and \`vertical-align="top"\`.
- set the stroke width based on the size of the icon.
- set the width and height of the SVG element based on the size of the icon.

If you don't want these styles to be automatically set, wrap the \`svg\` element into a \`span\`.
You can still set the stroke to \`currentColor\` to inherit the color of the surrounding elements.

If you set both \`pressedIconUrl\` and \`pressedIconSvg\`, \`pressedIconSvg\` will take precedence.

*Note:* Remember to remove any additional elements (for example: \`defs\`) and related CSS classes from SVG files exported from design software.
In most cases, they aren't needed, as the \`svg\` element inherits styles from the icon component.
",
      "isDefault": false,
      "name": "pressedIconSvg",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for token-group matches the snapshot: token-group 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": " Called when the user clicks on the dismiss button. The token won't be automatically removed.
 Make sure that you add a listener to this event to update your application state.",
      "detailInlineType": {
        "name": "TokenGroupProps.DismissDetail",
        "properties": [
          {
            "name": "itemIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "TokenGroupProps.DismissDetail",
      "name": "onDismiss",
    },
  ],
  "functions": [],
  "name": "TokenGroup",
  "properties": [
    {
      "defaultValue": ""horizontal"",
      "description": "Specifies the direction in which tokens are aligned (\`horizontal | vertical\`).",
      "inlineType": {
        "name": "TokenGroupProps.Alignment",
        "type": "union",
        "values": [
          "horizontal",
          "vertical",
        ],
      },
      "name": "alignment",
      "optional": true,
      "type": "string",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Removes any outer padding from the component.
We recommend to always enable this property.",
      "name": "disableOuterPadding",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "TokenGroupProps.I18nStrings",
        "properties": [
          {
            "name": "limitShowFewer",
            "optional": true,
            "type": "string",
          },
          {
            "name": "limitShowMore",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "TokenGroupProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "[]",
      "description": "An array of objects representing token items. Each token has the following properties:
- \`label\` (string) - Title text of the token.
- \`description\` (string) - (Optional) Further information about the token that appears below the label.
- \`disabled\` [boolean] - (Optional) Determines whether the token is disabled.
- \`labelTag\` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.
- \`tags\` [string[]] - (Optional) A list of tags giving further guidance about the token.
- \`dismissLabel\` (string) - (Optional) Adds an \`aria-label\` to the dismiss button.
- \`iconName\` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the token.
- \`iconAlt\` (string) - (Optional) Specifies alternate text for a custom icon, for use with \`iconUrl\`.
- \`iconUrl\` (string) - (Optional) URL of a custom icon.
- \`iconSvg\` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/).
",
      "name": "items",
      "optional": true,
      "type": "ReadonlyArray<TokenGroupProps.Item>",
    },
    {
      "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.",
      "name": "limit",
      "optional": true,
      "type": "number",
    },
    {
      "description": "Adds an \`aria-label\` to the "Show fewer" button.
Use to assign unique labels when there are multiple token groups with the same \`limitShowFewer\` label on one page.",
      "name": "limitShowFewerAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Adds an \`aria-label\` to the "Show more" button.
Use to assign unique labels when there are multiple token groups with the same \`limitShowMore\` label on one page.",
      "name": "limitShowMoreAriaLabel",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Specifies if the control is read-only, which prevents the
user from modifying the value. A read-only control is still focusable.",
      "name": "readOnly",
      "optional": true,
      "type": "boolean",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for top-navigation matches the snapshot: top-navigation 1`] = `
{
  "events": [],
  "functions": [],
  "name": "TopNavigation",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the localized strings required by the component.",
      "i18nTag": true,
      "inlineType": {
        "name": "TopNavigationProps.I18nStrings",
        "properties": [
          {
            "name": "overflowMenuBackIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "overflowMenuDismissIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "overflowMenuTitleText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "overflowMenuTriggerText",
            "optional": true,
            "type": "string",
          },
          {
            "name": "searchDismissIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "searchIconAriaLabel",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "TopNavigationProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Properties describing the product identity. They are as follows:
* \`title\` (string) - Specifies the title text.
* \`logo\` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.
* \`href\` (string) - Specifies the \`href\` that the header links to.
* \`onFollow\` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.
",
      "inlineType": {
        "name": "TopNavigationProps.Identity",
        "properties": [
          {
            "name": "href",
            "optional": false,
            "type": "string",
          },
          {
            "name": "logo",
            "optional": true,
            "type": "TopNavigationProps.Logo",
          },
          {
            "name": "onFollow",
            "optional": true,
            "type": "CancelableEventHandler",
          },
          {
            "name": "title",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "identity",
      "optional": false,
      "type": "TopNavigationProps.Identity",
    },
    {
      "defaultValue": "[]",
      "description": "A list of utility navigation elements.
The supported utility types are: \`button\` and \`menu-dropdown\`.
The following properties are supported across all utility types:

* \`type\` (string) - The type of the utility. Can be \`button\` or \`menu-dropdown\`.
* \`text\` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit \`title\` property is set.
* \`title\` (string) - The title displayed inside the dropdown.
* \`iconName\` (string) - The name of an existing icon to display next to the utility.
* \`iconUrl\` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
* \`iconAlt\` (string) - Specifies alternate text for a custom icon provided using \`iconUrl\`. We recommend that you provide this for accessibility.
* \`iconSvg\` (string) - Specifies the SVG of a custom icon.
* \`ariaLabel\` (string) - Adds \`aria-label\` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.
* \`badge\` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
* \`disableTextCollapse\` (boolean) - Prevents the utility text from being hidden on smaller screens.
* \`disableUtilityCollapse\` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.

### button

* \`variant\` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.
* \`href\` (string) - Specifies the \`href\` for a link styled as a button.
* \`target\` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use \`_blank\`). This property only applies when an \`href\` is provided.
* \`rel\` (string) - Adds a \`rel\` attribute to the link. By default, the component sets the \`rel\` attribute to "noopener noreferrer" when \`target\` is \`"_blank"\`. If the \`rel\` property is provided, it overrides the default behavior.
* \`external\` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.
* \`externalIconAriaLabel\` (string) - Adds an \`aria-label\` for the external icon.
* \`onClick\` (() => void) - Specifies the event handler called when the utility is clicked.
* \`onFollow\` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an \`href\` set.

### menu-dropdown

* \`description\` (string) - The description displayed inside the dropdown.
* \`items\` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the \`items\` property of the [button dropdown component](/components/button-dropdown), with the exception of the checkbox item type.
* \`onItemClick\` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
* \`onItemFollow\` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an \`href\` set.
* \`expandableGroups\` (boolean) - Controls expandability of the item groups.
",
      "name": "utilities",
      "optional": true,
      "type": "ReadonlyArray<TopNavigationProps.Utility>",
    },
  ],
  "regions": [
    {
      "description": "Use with an input or autosuggest control for a global search query.",
      "isDefault": false,
      "name": "search",
    },
  ],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for tutorial-panel matches the snapshot: tutorial-panel 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Fired when the user clicks on the feedback link at the end of a tutorial.",
      "detailInlineType": {
        "name": "TutorialPanelProps.TutorialDetail",
        "properties": [
          {
            "name": "tutorial",
            "optional": false,
            "type": "TutorialPanelProps.Tutorial",
          },
        ],
        "type": "object",
      },
      "detailType": "TutorialPanelProps.TutorialDetail",
      "name": "onFeedbackClick",
    },
  ],
  "functions": [],
  "name": "TutorialPanel",
  "properties": [
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "The link to a file documenting all tutorials (usually a PDF).",
      "name": "downloadUrl",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.",
      "inlineType": {
        "name": "TutorialPanelProps.I18nStrings",
        "properties": [
          {
            "name": "completionScreenTitle",
            "optional": false,
            "type": "string",
          },
          {
            "name": "dismissTutorialButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "feedbackLinkText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "labelExitTutorial",
            "optional": false,
            "type": "string",
          },
          {
            "name": "labelLearnMoreExternalIcon",
            "optional": false,
            "type": "string",
          },
          {
            "name": "labelLearnMoreLink",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelTotalSteps",
            "optional": false,
            "type": "(totalStepCount: number) => string",
          },
          {
            "name": "labelTutorialListDownloadLink",
            "optional": true,
            "type": "string",
          },
          {
            "name": "labelsTaskStatus",
            "optional": false,
            "type": "unknown",
          },
          {
            "name": "learnMoreLinkText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "loadingText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "restartTutorialButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "startTutorialButtonText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "stepTitle",
            "optional": false,
            "type": "(stepIndex: number, stepTitle: string) => string",
          },
          {
            "name": "taskTitle",
            "optional": false,
            "type": "(taskIndex: number, taskTitle: string) => string",
          },
          {
            "name": "tutorialCompletedText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "tutorialListDescription",
            "optional": false,
            "type": "React.ReactNode",
          },
          {
            "name": "tutorialListDownloadLinkText",
            "optional": false,
            "type": "string",
          },
          {
            "name": "tutorialListTitle",
            "optional": false,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": false,
      "type": "TutorialPanelProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "description": "Whether the content of the panel is currently loading. If this property
is set to \`true\`, the panel displays a spinner and the loadingText that is
specified in the \`i18nStrings\` property.",
      "name": "loading",
      "optional": true,
      "type": "boolean",
    },
    {
      "description": "List of all available tutorials. An array of objects with the following properties:
* \`title\` (string) - Name of the tutorial

* \`description\` (ReactNode) - Short description of the tutorial's content.

* \`tasks\` - Array of tasks (in intended order). Each Task has the following properties:
  * \`title\` (string) - Name of this task. This is shown in the task list overview of the tutorial's detail view.
  * \`steps\` - Array of steps in this task (in intended order). Each step has the following properties:
    * \`title\` (string) - Title of this step. This is shown in the step list in the tutorial's detail view.
    * \`content\` (ReactNode) - Content to be shown in the popover of this step. Can be JSX or plain text.
    * \`warningAlert\` (ReactNode) - (Optional) If this field is present, a warning alert will be displayed
       inside the step's popover, showing this field's content. Can be JSX or plain text.
    * \`hotspotId\` (string) - ID of the hotspot that this tutorial step points to.

       A hotspot with this ID needs to be added manually to the code of the application and represents a location
       in the application that a tutorial step can be attached to. It can be re-used by multiple tutorials. Hotspot
       IDs need to be unique in the scope of the whole application that uses this tutorial.

* \`completedScreenDescription\` (ReactNode) - Description to be shown on the last page of the tutorial, when the
   user has successfully completed the tutorial.

* \`prerequisitesAlert\` (ReactNode) - (Optional) If the application determines that the user cannot start the tutorial
   yet (by specifying the property \`prerequisitesNeeded\` on the tutorial object), the content of \`prerequisitesAlert\`
   will be shown in the tutorial list underneath the tutorial title.

   Example: \`<><Link>Create a bucket first</Link> to complete this tutorial.</>\`

* \`prerequisitesNeeded\` (boolean) - (Optional) If this property is set to \`true\`, the tutorial list will disable the
  \`Start tutorial\` button for this tutorial, and it will show the contents of the tutorial's \`prerequisitesAlert\` field
   in an alert underneath the tutorial title.

* \`learnMoreUrl\` (string | null) - (Optional) If present, the tutorial list will show a "Learn More" link pointing to
   this URL underneath the tutorial's description.

* \`completed\` (boolean) - Whether the user has already completed this tutorial.

  If this property is set to \`true\`, the tutorial list will show a status indicator underneath the tutorial title with
  a message that indicates that this tutorial has already been completed by the user (e.g. "Tutorial completed"), and
  the "Start tutorial" button will be replaced by a "Restart tutorial" button.
",
      "name": "tutorials",
      "optional": false,
      "type": "ReadonlyArray<TutorialPanelProps.Tutorial>",
    },
  ],
  "regions": [],
  "releaseStatus": "stable",
}
`;

exports[`Documenter definition for wizard matches the snapshot: wizard 1`] = `
{
  "events": [
    {
      "cancelable": false,
      "description": "Called when a user clicks the *cancel* button.
If a user has entered data in the form, you should prompt the user with a modal before exiting the wizard flow.",
      "name": "onCancel",
    },
    {
      "cancelable": false,
      "description": "Called when a user clicks the *next* button, the *previous* button, or an enabled step link in the navigation pane.
The event \`detail\` includes the following:
- \`requestedStepIndex\` - The index of the requested step.
- \`reason\` - The user action that triggered the navigation event. It can be \`next\` (when the user clicks the *next* button),
\`previous\` (when the user clicks the *previous* button), \`step\` (an enabled step link in the navigation pane),
or \`skip\` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).
",
      "detailInlineType": {
        "name": "WizardProps.NavigateDetail",
        "properties": [
          {
            "name": "reason",
            "optional": false,
            "type": "WizardProps.NavigationReason",
          },
          {
            "name": "requestedStepIndex",
            "optional": false,
            "type": "number",
          },
        ],
        "type": "object",
      },
      "detailType": "WizardProps.NavigateDetail",
      "name": "onNavigate",
    },
    {
      "cancelable": false,
      "description": "Called when a user clicks the *submit* button.",
      "name": "onSubmit",
    },
  ],
  "functions": [],
  "name": "Wizard",
  "properties": [
    {
      "description": "Index of the step that's currently displayed. The first step has an index of zero (0).
If you don't set this property, the component starts on the first step and switches step automatically
when a user navigates using the buttons or an enabled step link in the navigation pane (that is, uncontrolled behavior).

If you provide a value for this property, you must also set an \`onNavigate\` listener to update the property when
a user navigates (that is, controlled behavior).

If you set it to a value that exceeds the maximum value (that is, the number of steps minus 1), its value is ignored and the component uses the maximum value.
",
      "name": "activeStepIndex",
      "optional": true,
      "type": "number",
    },
    {
      "defaultValue": "false",
      "description": "When set to \`false\`, the *skip-to* button is never shown.
When set to \`true\`, the *skip-to* button may appear to offer faster navigation for the user.
The *skip-to* button only allows to skip optional steps. It is shown when there is one or more optional
steps ahead having no required steps in-between.

Note: the *skip-to* button requires the function i18nStrings.skipToButtonLabel to be defined.

Defaults to \`false\`.
",
      "name": "allowSkipTo",
      "optional": true,
      "type": "boolean",
    },
    {
      "analyticsTag": "",
      "description": "Specifies additional analytics-related metadata.
* \`instanceIdentifier\` - A unique string that identifies this component instance in your application.
* \`flowType\` - Identifies the type of flow represented by the component.
* \`resourceType\` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.",
      "inlineType": {
        "name": "WizardProps.AnalyticsMetadata",
        "properties": [
          {
            "name": "flowType",
            "optional": true,
            "type": "FlowType",
          },
          {
            "name": "instanceIdentifier",
            "optional": true,
            "type": "string",
          },
          {
            "name": "resourceType",
            "optional": true,
            "type": "string",
          },
        ],
        "type": "object",
      },
      "name": "analyticsMetadata",
      "optional": true,
      "type": "WizardProps.AnalyticsMetadata",
    },
    {
      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
      "description": "Adds the specified classes to the root element of the component.",
      "name": "className",
      "optional": true,
      "type": "string",
    },
    {
      "description": "An object containing all the necessary localized strings required by the component.
- \`stepNumberLabel\` ((stepNumber: number) => string) - A function that accepts a number (1-based indexing),
   and returns a human-readable, localized string displaying the step number in the navigation pane. For example, "Step 1" or "Step 2".
- \`collapsedStepsLabel\` ((stepNumber: number, stepsCount: number) => string) - A function that accepts two number parameters (1-based indexing),
   and returns a string responsible for the navigation summary on smaller screens. For example, "Step 1 of 3". The parameters are as follows:
   - \`stepNumber\` (number) - The step number that the user is currently on.
   - \`stepsCount\` (number) - The total number of steps in the wizard.
- \`skipToButtonLabel\`: ((targetStep: WizardProps.Step, targetStepNumber: number) => string) - An optional function that accepts the target step object
   and the target step number (1-based indexing), and returns a string to be used as the *skip-to* button label. For example, "Skip to Step 2" or "Skip to end".
- \`navigationAriaLabel\` (string) - The aria label for the navigation pane.
- \`cancelButton\` (string) - The text of the button that enables the user to exit the flow.
- \`previousButton\` (string) - The text of the button that enables the user to return to the previous step.
- \`nextButton\` (string) - The text of the button that enables the user to move to the next step.
- \`submitButton\` (string) - The text of the button that enables the user to submit the form. **Deprecated**, replaced by the \`submitButtonText\` component property. \`submitButton\` is not supported by the I18nProvider.
- \`optional\` (string) - The text displayed next to the step title and form header title when a step is declared optional.
- \`nextButtonLoadingAnnouncement\` (string) - The text that a screen reader announces when the *next* button is in a loading state.
- \`submitButtonLoadingAnnouncement\` (string) - The text that a screen reader announces when the *submit* button is in a loading state.",
      "i18nTag": true,
      "inlineType": {
        "name": "WizardProps.I18nStrings",
        "properties": [
          {
            "name": "cancelButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "errorIconAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "navigationAriaLabel",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "nextButtonLoadingAnnouncement",
            "optional": true,
            "type": "string",
          },
          {
            "name": "optional",
            "optional": true,
            "type": "string",
          },
          {
            "name": "previousButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "submitButton",
            "optional": true,
            "type": "string",
          },
          {
            "name": "submitButtonLoadingAnnouncement",
            "optional": true,
            "type": "string",
          },
          {
            "name": "collapsedStepsLabel",
            "optional": true,
            "type": "(stepNumber: number, stepsCount: number) => string",
          },
          {
            "name": "skipToButtonLabel",
            "optional": true,
            "type": "(targetStep: WizardProps.Step, targetStepNumber: number) => string",
          },
          {
            "name": "stepNumberLabel",
            "optional": true,
            "type": "(stepNumber: number) => string",
          },
        ],
        "type": "object",
      },
      "name": "i18nStrings",
      "optional": true,
      "type": "WizardProps.I18nStrings",
    },
    {
      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
use the \`id\` attribute, consider setting it on a parent element instead.",
      "description": "Adds the specified ID to the root element of the component.",
      "name": "id",
      "optional": true,
      "type": "string",
    },
    {
      "defaultValue": "false",
      "description": "Renders the *next* or *submit* button in a loading state.
Use this if you need to wait for a response from the server before the user can proceed to the next step, such as during server-side validation or retrieving the next step's information.
",
      "name": "isLoadingNextStep",
      "optional": true,
      "type": "boolean",
    },
    {
      "analyticsTag": "",
      "description": "Array of step objects. Each object represents a step in the wizard with the following properties:
- \`title\` (string) - Text that's displayed as the title in the navigation pane and form header.
- \`info\` (ReactNode) - (Optional) Area for a page level info link that's displayed in the form header.
   The page level info link should trigger the default help panel content for the step. Use the [link component](/components/link/) to display the link.
- \`description\` (ReactNode) - (Optional) Area below the form header for a page level description text to further explain the purpose, goal, or main actions of the step.
- \`content\` (ReactNode) - Main content area to display form sections, form fields, and controls.
- \`errorText\` (ReactNode) - (Optional) Error text that's displayed in a page level error alert.
   Use this for rendering actionable server-side validation failure messages.
- \`isOptional\` (boolean) - Specifies whether the step is optional or required. If set to \`true\`, the text from \`i18nStrings.optional\`
   is rendered next to the \`title\` in the navigation step label and the form header title.
- \`analyticsMetadata\` (WizardProps.StepAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.",
      "name": "steps",
      "optional": false,
      "type": "ReadonlyArray<WizardProps.Step>",
    },
    {
      "description": "The text of the button that enables the user to submit the form.",
      "name": "submitButtonText",
      "optional": true,
      "type": "string",
    },
  ],
  "regions": [
    {
      "description": "Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.",
      "isDefault": false,
      "name": "secondaryActions",
    },
  ],
  "releaseStatus": "stable",
}
`;