@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

package/dist/docs/api/v6/components/skip-to-content/html

@@ -0,0 +1,148 @@
+## Examples
+
+### Basic
+
+```html isFullscreen
+<div class="pf-v6-c-skip-to-content">
+  <a class="pf-v6-c-button pf-m-primary" href="#main-content">
+    <span class="pf-v6-c-button__text">Skip to content</span>
+  </a>
+</div>Press tab to skip to content at the bottom of the page.
+<div style="height:2000px"></div>
+<div class="pf-v6-c-content">
+  <h1 id="main-content">Main content</h1>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
+    lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
+    mattis neque. Sub works as well!
+  </p>
+  <h2>Second level</h2>
+  <p>
+    Curabitur accumsan turpis pharetra
+    <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
+    cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et
+    neque nisl.
+  </p>
+  <ul>
+    <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+    <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+    <li>
+      Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+      <ul>
+        <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+        <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+        <li>
+          Ut venenatis, nisl scelerisque.
+          <ol>
+            <li>Donec blandit a lorem id convallis.</li>
+            <li>Cras gravida arcu at diam gravida gravida.</li>
+            <li>Integer in volutpat libero.</li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li>Ut non enim metus.</li>
+  </ul>
+  <h3>Third level</h3>
+  <p>
+    Quisque ante lacus, malesuada ac auctor vitae, congue
+    <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+  </p>
+  <ol>
+    <li>Donec blandit a lorem id convallis.</li>
+    <li>Cras gravida arcu at diam gravida gravida.</li>
+    <li>Integer in volutpat libero.</li>
+    <li>Donec a diam tellus.</li>
+    <li>
+      Etiam auctor nisl et.
+      <ul>
+        <li>Donec blandit a lorem id convallis.</li>
+        <li>Cras gravida arcu at diam gravida gravida.</li>
+        <li>
+          Integer in volutpat libero.
+          <ol>
+            <li>Donec blandit a lorem id convallis.</li>
+            <li>Cras gravida arcu at diam gravida gravida.</li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li>Aenean nec tortor orci.</li>
+    <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+    <li>Vivamus maximus ultricies pulvinar.</li>
+  </ol>
+  <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
+  <p>
+    Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
+    <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
+  </p>
+  <hr />
+  <p>
+    Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum
+    commodo.
+  </p>
+  <dl>
+    <dt>Web</dt>
+    <dd>The part of the internet that contains websites and web pages</dd>
+    <dt>HTML</dt>
+    <dd>A markup language for creating web pages</dd>
+    <dt>CSS</dt>
+    <dd>A technology to make HTML look better</dd>
+  </dl>
+  <p>
+    Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
+    Nulla facilisi. Nullam ac erat ante.
+  </p>
+  <h4>Fourth level</h4>
+  <p>
+    Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum
+    ex efficitur.
+  </p>
+  <p>
+    Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris
+    eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
+  </p>
+  <small>Sometimes you need small text to display things like date created</small>
+  <p>
+    Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis
+    lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus,
+    mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex
+    sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum.
+    Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
+  </p>
+  <h5>Fifth level</h5>
+  <p>
+    Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet
+    ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend
+    justo. Nam et sollicitudin odio.
+  </p>
+  <h6>Sixth level</h6>
+  <p>
+    Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan.
+    Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis.
+    Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui,
+    sed varius sapien odio vitae est. Etiam at cursus metus.
+  </p>
+</div>
+
+```
+
+## Documentation
+
+### Overview
+
+Skip to content allows screen reader and keyboard users to bypass navigation rather than tabbing through it.
+
+When using `.pf-v6-c-skip-to-content` you must provide an `href` attribute whose value corresponds to the `id` attribute of the primary content container for your application. In most cases this is the `<main>` element. For a demo of this, navigate to a [page demo](/components/page/html-demos) and note the use of `tabindex="-1"`, which allows the element to receive focus programmatically.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `href="[id of main container]"` | `.pf-v6-c-skip-to-content` | Sends focus to the primary content container. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-skip-to-content` | `<a>` |  initiates the skip to content link. |

package/dist/docs/api/v6/components/skip-to-content/react

@@ -0,0 +1,4 @@
+## Examples
+### Basic
+```ts isFullscreen file="./SkipToContentBasic.tsx"
+```

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

@@ -0,0 +1,75 @@
+## Examples
+
+### Discrete
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Continuous
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Value input
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Thumb value input
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Actions
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+### Disabled
+
+
+import Example6 from './Example6.html?raw'
+
+<LiveExample html={Example6} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="slider"` | `.pf-v6-c-slider__thumb` | Identifies the element as a slider. **Required** |
+| `tabindex="0"` | `.pf-v6-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
+| `aria-disabled="true"` | `.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
+| `aria-valuemin="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
+| `aria-valuemax="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
+| `aria-valuenow="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the current value of the slider. **Required** |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-slider` | `<div>` | Initiates the slider component. **Required** |
+| `.pf-v6-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
+| `.pf-v6-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
+| `.pf-v6-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
+| `.pf-v6-c-slider__steps` | `<div>` | Initiates the slider steps. |
+| `.pf-v6-c-slider__step` | `<div>` | Initiates a slider step. |
+| `.pf-v6-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
+| `.pf-v6-c-slider__step-label` | `<div>` | Initiates a slider step label. |
+| `.pf-v6-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
+| `.pf-v6-c-slider__value` | `<div>` | Initiates the slider value. |
+| `.pf-v6-c-slider__actions` | `<div>` | Initiates the slider actions. |
+| `.pf-m-disabled` | `.pf-v6-c-slider` | Modifies the slider for the disabled state. |
+| `.pf-m-floating` | `.pf-v6-c-slider__thumb` | Modifies the slider value to float above the thumb. |
+| `--pf-v6-c-slider--value` | `.pf-v6-c-slider` | Applies appropriate slider styles based on the current value. **Required** |

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

@@ -0,0 +1,62 @@
+## Examples
+
+### Discrete
+
+
+import SliderDiscrete from "./SliderDiscrete.tsx?raw"
+
+<LiveExample src={SliderDiscrete} />
+
+### Continuous
+
+
+import SliderContinuous from "./SliderContinuous.tsx?raw"
+
+<LiveExample src={SliderContinuous} />
+
+### Value input
+
+
+import SliderValueInput from "./SliderValueInput.tsx?raw"
+
+<LiveExample src={SliderValueInput} />
+
+### Thumb value input
+
+
+import SliderThumbValueInput from "./SliderThumbValueInput.tsx?raw"
+
+<LiveExample src={SliderThumbValueInput} />
+
+### Actions
+
+
+import SliderActions from "./SliderActions.tsx?raw"
+
+<LiveExample src={SliderActions} />
+
+### Disabled
+
+
+import SliderDisabled from "./SliderDisabled.tsx?raw"
+
+<LiveExample src={SliderDisabled} />
+
+## Types
+
+### SliderOnChangeEvent
+
+The slider's `onChange` prop accepts an `event` parameter of the following types:
+
+- `React.MouseEvent`
+- `React.KeyboardEvent`
+- `React.FormEvent<HTMLInputElement>`
+- `React.TouchEvent`
+- `React.FocusEvent<HTMLInputElement>`
+
+The `SliderOnChangeEvent` type is a union of the above event types, and can be imported and used in your code like in the following code snippet:
+
+```
+
+<Slider onChange={(event: SliderOnChangeEvent) => {}} />
+```

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

@@ -0,0 +1,64 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Sizes
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Inline
+
+An inline spinner inherits its font-size, so its size will match the content around it.
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Custom size
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+## Documentation
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="progressbar"` | `.pf-v6-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
+| `aria-label="Loading..."` | `.pf-v6-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
+| `aria-labelledby="[id of spinner label]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
+| `aria-describedby="[id of spinner description]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |
+
+Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
+
+Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) must be present before changing its status in order for the change to be read.
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-spinner` | `<svg>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-v6-c-spinner__path` | `<circle>` |  Creates a spinner circle component. **Required**|
+| `--pf-v6-c-spinner--diameter` | `.pf-v6-c-spinner` | Modifies the value for `--pf-v6-c-spinner--diameter` declaration. |
+
+### Modifiers
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-sm` | `.pf-v6-c-spinner` |  Creates a small spinner. |
+| `.pf-m-md` | `.pf-v6-c-spinner` |  Creates a medium spinner. |
+| `.pf-m-lg` | `.pf-v6-c-spinner` |  Creates a large spinner. |
+| `.pf-m-xl` | `.pf-v6-c-spinner` |  Creates an extra-large spinner. |
+| `.pf-m-inline` | `.pf-v6-c-spinner` |  Creates an inline spinner. |

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

@@ -0,0 +1,24 @@
+## Examples
+### Basic
+
+import SpinnerBasic from "./SpinnerBasic.tsx?raw"
+
+<LiveExample src={SpinnerBasic} />
+
+### Size variations
+
+import SpinnerSizeVariations from "./SpinnerSizeVariations.tsx?raw"
+
+<LiveExample src={SpinnerSizeVariations} />
+
+### Custom size
+
+import SpinnerCustomSize from "./SpinnerCustomSize.tsx?raw"
+
+<LiveExample src={SpinnerCustomSize} />
+
+### Inline size
+
+import SpinnerInline from "./SpinnerInline.tsx?raw"
+
+<LiveExample src={SpinnerInline} />

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

@@ -0,0 +1,70 @@
+## Examples
+
+### Basic
+
+
+import Example1 from './Example1.html?raw'
+
+<LiveExample html={Example1} />
+
+### Reverse (toggle on right)
+
+
+import Example2 from './Example2.html?raw'
+
+<LiveExample html={Example2} />
+
+### Label and check icon
+
+
+import Example3 from './Example3.html?raw'
+
+<LiveExample html={Example3} />
+
+### Without visible text label
+
+
+import Example4 from './Example4.html?raw'
+
+<LiveExample html={Example4} />
+
+### Disabled
+
+
+import Example5 from './Example5.html?raw'
+
+<LiveExample html={Example5} />
+
+## Documentation
+
+### Overview
+
+A switch is an alternative to the checkbox component.
+
+Use a switch when your user needs to perform instantaneous actions without confirmation.
+
+Use checkbox if your user has to perform additional steps for changes to become effective.
+
+### Accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the behavior of the switch. This label should never dynamically change, and should always describe the behavior of the switch when its checked state is true. If an additional text label is included with the switch besides `.pf-v6-c-switch__label`, then `aria-labelledby` can reference the `id` of this text, but it must be in addition to the text of `.pf-v6-c-switch__label`. If there is no visible text label provided, then an `aria-label` must be provided. **Required** |
+| `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
+| `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
+| `role="switch"` | `<input type="checkbox">` | Exposes the element as a switch for assistive technologies. **Required** |
+| `id` | `.pf-v6-c-switch__label` | Each `.pf-v6-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v6-c-switch__input`. |
+| `checked` | `.pf-v6-c-switch__input` |  Indicates that the input is checked |
+| `disabled` | `.pf-v6-c-switch__input` |  Indicates that the input is disabled |
+| `aria-hidden="true"` | `.pf-v6-c-switch__label` | Hides the text from the screen reader. |
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-switch` | `<label>` |  Initiates a switch. **Required**  |
+| `.pf-v6-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
+| `.pf-v6-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
+| `.pf-v6-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
+| `.pf-v6-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
+| `.pf-m-reverse` | `.pf-v6-c-switch` | Positions the switch toggle to the right of the label. |

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

@@ -0,0 +1,45 @@
+## Examples
+
+To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via `aria-label`.
+
+### Basic
+
+
+import SwitchBasic from "./SwitchBasic.tsx?raw"
+
+<LiveExample src={SwitchBasic} />
+
+### Reversed Layout
+
+
+import SwitchReversed from "./SwitchReversed.tsx?raw"
+
+<LiveExample src={SwitchReversed} />
+
+### Without label
+
+
+import SwitchWithoutLabel from "./SwitchWithoutLabel.tsx?raw"
+
+<LiveExample src={SwitchWithoutLabel} />
+
+### Checked with label
+
+
+import SwitchCheckedWithLabel from "./SwitchCheckedWithLabel.tsx?raw"
+
+<LiveExample src={SwitchCheckedWithLabel} />
+
+### Disabled
+
+
+import SwitchDisabled from "./SwitchDisabled.tsx?raw"
+
+<LiveExample src={SwitchDisabled} />
+
+### Uncontrolled
+
+
+import SwitchUncontrolled from "./SwitchUncontrolled.tsx?raw"
+
+<LiveExample src={SwitchUncontrolled} />