@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/banner/react

@@ -0,0 +1,23 @@
+## Examples
+
+### Basic
+
+Banners can be styled with one of 9 different colors using the `color` prop. A basic banner should only be used when the banner color does not represent status or severity.
+
+
+import BannerBasic from "./BannerBasic.tsx?raw"
+
+<LiveExample src={BannerBasic} />
+
+### Status
+
+When a banner is used to convey status it should be styled using the `status` prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.
+
+The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
+
+In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.
+
+
+import BannerStatus from "./BannerStatus.tsx?raw"
+
+<LiveExample src={BannerStatus} />

package/dist/docs/api/v6/components/brand/html

@@ -0,0 +1,38 @@
+import './Brand.css'
+
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Responsive
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+## Documentation
+
+### Overview
+
+Simple brand component.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `alt` | `.pf-v6-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
+| `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |

package/dist/docs/api/v6/components/brand/react

@@ -0,0 +1,23 @@
+import './Brand.css';
+
+## Examples
+
+The brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.
+
+These examples adjust styling when the PatternFly website is toggled between the light and dark theme.
+
+### Basic
+
+
+import BrandBasic from "./BrandBasic.tsx?raw"
+
+<LiveExample src={BrandBasic} />
+
+### Responsive
+
+Passing `<source>` elements as children to `Brand` will change the component from an `<img>` to a `<picture>` element. The `src` and `alt` properties should still be passed to populate the fallback `img` of the brand.
+
+
+import BrandResponsive from "./BrandResponsive.tsx?raw"
+
+<LiveExample src={BrandResponsive} />

package/dist/docs/api/v6/components/breadcrumb/html

@@ -0,0 +1,66 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Without home link
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### With heading
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### With menu dropdown
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### With buttons
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+## Documentation
+
+### Overview
+
+A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
+
+* `.pf-v6-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+
+In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[landmark description]"` | `.pf-v6-c-breadcrumb` |  Describes `<nav>` landmark. |
+| `aria-label="[link name]"` | `.pf-v6-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
+| `aria-current="page"` | `.pf-v6-c-breadcrumb__item`, `.pf-v6-c-breadcrumb__link` |  Indicates the current page within a set of pages. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
+| `.pf-v6-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
+| `.pf-v6-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
+| `.pf-v6-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
+| `.pf-v6-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
+| `.pf-v6-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
+| `.pf-m-current` | `.pf-v6-c-breadcrumb__link` | Modifies to display the list item as the current item. |

package/dist/docs/api/v6/components/breadcrumb/react

@@ -0,0 +1,29 @@
+## Examples
+
+### Basic
+
+
+import BreadcrumbBasic from "./BreadcrumbBasic.tsx?raw"
+
+<LiveExample src={BreadcrumbBasic} />
+
+### Without home link
+
+
+import BreadcrumbWithoutHomeLink from "./BreadcrumbWithoutHomeLink.tsx?raw"
+
+<LiveExample src={BreadcrumbWithoutHomeLink} />
+
+### With heading
+
+
+import BreadcrumbWithHeading from "./BreadcrumbWithHeading.tsx?raw"
+
+<LiveExample src={BreadcrumbWithHeading} />
+
+### With dropdown
+
+
+import BreadcrumbDropdown from "./BreadcrumbDropdown.tsx?raw"
+
+<LiveExample src={BreadcrumbDropdown} />

package/dist/docs/api/v6/components/button/html

@@ -0,0 +1,167 @@
+import './Button.css'
+
+## Examples
+
+### Variations
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Clicked buttons
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Small buttons
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Disabled
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Aria-disabled
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Links as buttons
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+### Inline link as span
+
+
+import Example7 from './Example7.html?raw'
+
+<LiveExample html={Example7} />
+
+### Block level
+
+
+import Example8 from './Example8.html?raw'
+
+<LiveExample html={Example8} />
+
+### Types
+
+
+import Example9 from './Example9.html?raw'
+
+<LiveExample html={Example9} />
+
+### Call to action
+
+
+import Example10 from './Example10.html?raw'
+
+<LiveExample html={Example10} />
+
+### Progress
+
+
+import Example11 from './Example11.html?raw'
+
+<LiveExample html={Example11} />
+
+### Counts
+
+
+import Example12 from './Example12.html?raw'
+
+<LiveExample html={Example12} />
+
+### Plain with no padding
+
+
+import Example13 from './Example13.html?raw'
+
+<LiveExample html={Example13} />
+
+### Stateful
+
+
+import Example14 from './Example14.html?raw'
+
+<LiveExample html={Example14} />
+
+### Favorite
+
+A favorite button should use a plain button with the star icon. Applying `.pf-m-favorited` to the button initiates a microanimation and indicates that the item is favorited.
+
+
+import Example15 from './Example15.html?raw'
+
+<LiveExample html={Example15} />
+
+## Documentation
+
+### Overview
+
+Always add a modifier class to add color to the button.
+
+### Button vs link
+
+Semantic buttons and links are important for usability as well as accessibility. Using an `a` instead of a `button` element to perform user initiated actions should be avoided, unless absolutely necessary.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-pressed="true or false"` | `.pf-v6-c-button` | Indicates that the button is a toggle. When set to true, `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
+| `aria-label="[button label text]"` | `.pf-v6-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `aria-label="[descriptive text]"` | `a.pf-v6-c-button`, `span.pf-v6-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
+| `disabled` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
+| `aria-disabled=true` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
+| `aria-disabled=true` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
+| `aria-expanded=true` | `.pf-v6-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
+| `tabindex="-1"` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
+| `tabindex="0"` | `span.pf-v6-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
+| `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
+| `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
+| `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
+| `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
+| `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
+| `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
+| `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
+| `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
+| `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
+| `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |
+| `.pf-m-control` | `.pf-v6-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies a control button for the expanded state. |
+| `.pf-m-start` | `.pf-v6-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
+| `.pf-m-end` | `.pf-v6-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
+| `.pf-m-active` | `.pf-v6-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
+| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button for small/compact styles. |
+| `.pf-m-aria-disabled` | `.pf-v6-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
+| `.pf-m-display-lg` | `.pf-v6-c-button`, `pf-v6-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
+| `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
+| `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
+| `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
+| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |

package/dist/docs/api/v6/components/button/html-demos

@@ -0,0 +1,22 @@
+## Examples
+
+### Progress button - initial
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Progress button - loading
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Progress button - complete
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />

package/dist/docs/api/v6/components/button/react

@@ -0,0 +1,144 @@
+## Examples
+
+### Variant examples
+
+PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property.
+
+
+import ButtonVariations from "./ButtonVariations.tsx?raw"
+
+<LiveExample src={ButtonVariations} />
+
+| Variant | Description|
+| --- | ---|
+| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
+| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
+| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.  |
+| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. |
+| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
+| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.|
+| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
+| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
+| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.
+
+### Disabled buttons
+
+To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
+
+
+import ButtonDisabled from "./ButtonDisabled.tsx?raw"
+
+<LiveExample src={ButtonDisabled} />
+
+### Small buttons
+
+To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `"sm"` value for the `size` property.
+
+
+import ButtonSmall from "./ButtonSmall.tsx?raw"
+
+<LiveExample src={ButtonSmall} />
+
+### Call to action (CTA) buttons
+
+CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property. 
+
+
+import ButtonCallToAction from "./ButtonCallToAction.tsx?raw"
+
+<LiveExample src={ButtonCallToAction} />
+
+### Block level buttons
+
+Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
+
+
+import ButtonBlock from "./ButtonBlock.tsx?raw"
+
+<LiveExample src={ButtonBlock} />
+
+### Progress indicators
+
+Progress indicators can be added to buttons to identify that an action is in progress after a click. 
+
+
+import ButtonProgress from "./ButtonProgress.tsx?raw"
+
+<LiveExample src={ButtonProgress} />
+
+### Links as buttons
+
+Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link.
+
+
+import ButtonLinks from "./ButtonLinks.tsx?raw"
+
+<LiveExample src={ButtonLinks} />
+
+### Inline link as span
+
+Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
+
+
+import ButtonInlineSpanLink from "./ButtonInlineSpanLink.tsx?raw"
+
+<LiveExample src={ButtonInlineSpanLink} />
+
+### Custom component
+
+In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
+
+
+import ButtonCustomComponent from "./ButtonCustomComponent.tsx?raw"
+
+<LiveExample src={ButtonCustomComponent} />
+
+### Aria-disabled examples
+
+[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
+
+Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property.
+
+Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.
+
+
+import ButtonAriaDisabled from "./ButtonAriaDisabled.tsx?raw"
+
+<LiveExample src={ButtonAriaDisabled} />
+
+### Button with count
+
+Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
+
+
+import ButtonWithCount from "./ButtonWithCount.tsx?raw"
+
+<LiveExample src={ButtonWithCount} />
+
+### Plain with no padding
+
+To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
+
+
+import ButtonPlainHasNoPadding from "./ButtonPlainHasNoPadding.tsx?raw"
+
+<LiveExample src={ButtonPlainHasNoPadding} />
+
+### Stateful
+
+Stateful buttons are ideal for displaying the state of notifications. Use `variant="stateful"` alongside with the `state` property, which can have these 3 values: `read`, `unread` (used as default) and `attention` (which means unread and requires attention).
+
+
+import ButtonStateful from "./ButtonStateful.tsx?raw"
+
+<LiveExample src={ButtonStateful} />
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
+
+```
+<Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
+  Router link
+</Button>
+```

package/dist/docs/api/v6/components/calendar-month/html

@@ -0,0 +1,69 @@
+## Examples
+
+### Date selected
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Range start date selected, end date hovered
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Range end date selected, start date focused
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Range start and end dates selected
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-v6-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
+| `aria-hidden="true"` | `.pf-v6-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
+| `.pf-v6-screen-reader` | `.pf-v6-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `aria-label="[Prev/Next] month"` | `.pf-v6-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
+| `disabled` | `.pf-v6-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v6-c-calendar-month__dates-cell.pf-m-disabled`** |
+| `aria-label="[date] [month] [year]"` | `.pf-v6-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
+| `.pf-v6-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
+| `.pf-v6-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
+| `.pf-v6-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
+| `.pf-v6-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
+| `.pf-v6-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
+| `.pf-v6-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
+| `.pf-v6-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
+| `.pf-v6-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
+| `.pf-v6-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
+| `.pf-v6-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
+| `.pf-v6-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
+| `.pf-v6-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
+| `.pf-m-prev-month` | `.pf-v6-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
+| `.pf-m-next-month` | `.pf-v6-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
+| `.pf-m-current` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
+| `.pf-m-selected` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is selected. |
+| `.pf-m-start-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
+| `.pf-m-in-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is in a range. |
+| `.pf-m-end-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
+| `.pf-m-adjacent-month` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
+| `.pf-m-disabled` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |

package/dist/docs/api/v6/components/calendar-month/react

@@ -0,0 +1,19 @@
+## Examples
+
+### Selectable date
+
+
+import CalendarMonthSelectableDate from "./CalendarMonthSelectableDate.tsx?raw"
+
+<LiveExample src={CalendarMonthSelectableDate} />
+
+### Date range
+
+In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.
+
+For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos).
+
+
+import CalendarMonthDateRange from "./CalendarMonthDateRange.tsx?raw"
+
+<LiveExample src={CalendarMonthDateRange} />