@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

package/components/select/demo/getting-started.md

@@ -11,31 +11,17 @@
 <auro-anchorlink fluid href="#setup">Frameworks</auro-anchorlink>
 <auro-anchorlink fluid href="#react" class="level2 body-xs" onclick="openAccordion('react')">React</auro-anchorlink>
 <auro-anchorlink fluid href="#svelte" class="level2 body-xs" onclick="openAccordion('svelte')">Svelte</auro-anchorlink>
-<auro-anchorlink fluid href="#customization">Customize Appearance</auro-anchorlink>
-<auro-anchorlink fluid href="#layout" class="level2 body-xs">Shape, Size & Layout</auro-anchorlink>
-<auro-anchorlink fluid href="#appearance" class="level2 body-xs">Light vs. Dark Background</auro-anchorlink>
-<auro-anchorlink fluid href="#displayValue" class="level2 body-xs">Custom Display Value</auro-anchorlink>
-<auro-anchorlink fluid href="#noCheckmark" class="level2 body-xs">No Checkmark</auro-anchorlink>
-<auro-anchorlink fluid href="#fluid" class="level2 body-xs">Fluid</auro-anchorlink>
-<auro-anchorlink fluid href="#flexMenuWidth" class="level2 body-xs">Flex Menu Width</auro-anchorlink>
-<auro-anchorlink fluid href="#matchWidth" class="level2 body-xs">Match Width</auro-anchorlink>
-<auro-anchorlink fluid href="#size" class="level2 body-xs">Size</auro-anchorlink>
-<auro-anchorlink fluid href="#placement" class="level2 body-xs">Placement</auro-anchorlink>
-<auro-anchorlink fluid href="#noFlip" class="level2 body-xs">No Flip</auro-anchorlink>
-<auro-anchorlink fluid href="#offset" class="level2 body-xs">Offset</auro-anchorlink>
-<auro-anchorlink fluid href="#shift" class="level2 body-xs">Shift</auro-anchorlink>
-<auro-anchorlink fluid href="#largeHeader" class="level2 body-xs">Large Fullscreen Header</auro-anchorlink>
-<auro-anchorlink fluid href="#breakpoint" class="level2 body-xs">Fullscreen Breakpoint</auro-anchorlink>
-<auro-anchorlink fluid href="#customization">Customize Behavior</auro-anchorlink>
-<auro-anchorlink fluid href="#autoComplete" class="level2 body-xs">Autocomplete</auro-anchorlink>
-<auro-anchorlink fluid href="#disableComponent" class="level2 body-xs">Disable Component</auro-anchorlink>
-<auro-anchorlink fluid href="#disableOptions" class="level2 body-xs">Disable Option(s)</auro-anchorlink>
-<auro-anchorlink fluid href="#requireSelection" class="level2 body-xs">Require Selection</auro-anchorlink>
-<auro-anchorlink fluid href="#forceError" class="level2 body-xs">Force Error State</auro-anchorlink>
-<auro-anchorlink fluid href="#customValidation" class="level2 body-xs">Custom Validation</auro-anchorlink>
-<auro-anchorlink fluid href="#noValidate" class="level2 body-xs">No Validation</auro-anchorlink>
-<auro-anchorlink fluid href="#placeholder" class="level2 body-xs">Placeholder</auro-anchorlink>
-<auro-anchorlink fluid href="#customization">State Management</auro-anchorlink>
+<auro-anchorlink fluid href="#minimalConfig">Minimal Config</auro-anchorlink>
+<auro-anchorlink fluid href="#slots">Slots</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-default" class="level2 body-xs">(default)</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-label" class="level2 body-xs">label</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-helpText" class="level2 body-xs">helpText</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-optionalLabel" class="level2 body-xs">optionalLabel</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-valueText" class="level2 body-xs">valueText</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-displayValue" class="level2 body-xs">displayValue</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-ariaLabel-bib-close" class="level2 body-xs">ariaLabel.bib.close</auro-anchorlink>
+<auro-anchorlink fluid href="#slot-bib-fullscreen-headline" class="level2 body-xs">bib.fullscreen.headline</auro-anchorlink>
+<auro-anchorlink fluid href="#stateManagement">State Management</auro-anchorlink>
 <auro-anchorlink fluid href="#hasFocus" class="level2 body-xs">hasFocus</auro-anchorlink>
 <auro-anchorlink fluid href="#isPopoverVisible" class="level2 body-xs">isPopoverVisible</auro-anchorlink>
 <auro-anchorlink fluid href="#name" class="level2 body-xs">Name</auro-anchorlink>
@@ -43,18 +29,19 @@
 <auro-anchorlink fluid href="#touched" class="level2 body-xs">Touched</auro-anchorlink>
 <auro-anchorlink fluid href="#validity" class="level2 body-xs">Validity</auro-anchorlink>
 <auro-anchorlink fluid href="#value" class="level2 body-xs">Value</auro-anchorlink>
-<auro-anchorlink fluid href="#functions">Functions</auro-anchorlink>
+<auro-anchorlink fluid href="#publicFunctions">Functions</auro-anchorlink>
 <auro-anchorlink fluid href="#reset" class="level2 body-xs">reset()</auro-anchorlink>
 <auro-anchorlink fluid href="#updateActiveOption" class="level2 body-xs">updateActiveOption()</auro-anchorlink>
 <auro-anchorlink fluid href="#hideBib" class="level2 body-xs">hideBib()</auro-anchorlink>
 <auro-anchorlink fluid href="#showBib" class="level2 body-xs">showBib()</auro-anchorlink>
+<auro-anchorlink fluid href="#validate" class="level2 body-xs">validate()</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
 <div class="scrollWrapper">
 <section>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/install.md) -->
-<!-- The below content is automatically added from ./../docs/partials/install.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/pages/install.md) -->
+<!-- The below content is automatically added from ./../docs/pages/install.md -->
 <auro-header level="2" id="setup">Setup</auro-header>
 <auro-accordion-group Emphasis>
 <auro-accordion expanded class="section" id="recommendedAccordion">
@@ -69,10 +56,13 @@
 <auro-header level="3">Implementation</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
+<!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
 <p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
 <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
 <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
-<p>To do this, import the component class directly and call its `register(name)` method with a unique name:</p>
+<p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
+<!-- AURO-GENERATED-CONTENT:END -->
 
 <pre class="language-js"><code class="language-js">// Import the classes
 import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
@@ -80,9 +70,9 @@ import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
 import { AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menuoption/class';
 ​
 // Register each component with a custom name
-AuroSelect.register('custom-select');
-AuroMenu.register('custom-menu');
-AuroMenuOption.register('custom-menuoption');</code></pre>
+AuroSelect.register('[custom]-select');
+AuroMenu.register('[custom]-menu');
+AuroMenuOption.register('[custom]-menuoption');</code></pre>
 
 The `<auro-menu>` and `<auro-menuoption>` components must also be custom registered when using a custom `<auro-select>` registration. All three components work together and need to be registered under the same custom naming convention.
 
@@ -114,8 +104,8 @@ This will create new custom elements that behave exactly like their standard cou
 <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="3">Implementation</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/defaultRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/defaultRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/defaultRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/defaultRegistration.md -->
 <p>Once installed, the component can be used in your project by importing the component's registered module:</p>
 
 <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-select';</code></pre>
@@ -136,8 +126,8 @@ This will create new custom elements that behave exactly like their standard cou
 <div class="accordion-content">
 <p class="warning"><strong>Warning:</strong> CDN install & registration can cause conflicts if another package registers the same tag name using a different version of the component, leading to unexpected behavior. Use custom registration to avoid this risk.</p>
 <auro-header level="3">Install & Implementation</auro-header>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/cdnRegistration.md) -->
-<!-- The below content is automatically added from ./../docs/partials/cdnRegistration.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/cdnRegistration.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/cdnRegistration.md -->
 <p>Add the following script tag to your HTML to load the component directly from a CDN:</p>
 
 <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"&gt;&lt;/script&gt;</code></pre>
@@ -157,15 +147,15 @@ This will create new custom elements that behave exactly like their standard cou
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/frameworks.md) -->
-<!-- The below content is automatically added from ./../docs/partials/frameworks.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/frameworks.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/frameworks.md -->
 <auro-header level="2" id="frameworks">Frameworks</auro-header>
 <auro-accordion-group Emphasis>
 <auro-accordion class="section" id="react">
 <span slot="trigger">React</span>
 <div class="accordion-content">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/react.md) -->
-<!-- The below content is automatically added from ./../docs/partials/react.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/react.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/react.md -->
 React 19 includes <a href="https://react.dev/blog/2024/12/05/react-19#support-for-custom-elements">native support for custom elements</a>, so <code>&lt;auro-select&gt;</code> works directly in JSX without any wrapper library.
 
 <auro-header level="3" id="reactImport">Import the Component</auro-header>
@@ -247,8 +237,8 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <auro-accordion class="section" id="svelte">
 <span slot="trigger">Svelte</span>
 <div class="accordion-content">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/svelte.md) -->
-<!-- The below content is automatically added from ./../docs/partials/svelte.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/svelte.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/svelte.md -->
 Svelte has <a href="https://svelte.dev/docs/svelte/custom-elements">native support for custom elements</a>, so <code>&lt;auro-select&gt;</code> works directly in Svelte templates without any wrapper or configuration.
 
 <auro-header level="3" id="svelteImport">Import the Component</auro-header>
@@ -280,7 +270,9 @@ Use `<auro-select>` directly in your Svelte template. Properties can be bound us
     ['duration', 'Duration'],
   ];
 ​
-  let selectValue = $state&lt;string&gt;('');
+  let selectValue = $state&lt;string&gt;(''); // this will work to preset the value but it will not be reactive - it's a one way binding
+​
+  // Need to add testing that oninput works in all our components
 &lt;/script&gt;
 &lt;custom-select value={selectValue}&gt;
   &lt;span slot="label"&gt;Filter by&lt;/span&gt;
@@ -308,29 +300,23 @@ declare namespace svelteHTML {
 This enables prop hinting for attributes like `value`, `placeholder`, `disabled`, and others directly in Svelte templates.
 
 <auro-header level="3" id="svelteEvents">Event Handling</auro-header>
-Auro components emit native `CustomEvent`s. Use `bind:this` to get a reference to the element and attach event listeners with `$effect`:
+Auro components emit native `CustomEvent`s. Use the `oninput` handler directly on the element:
 
 <pre class="language-html"><code class="language-html">&lt;script lang="ts"&gt;
-  let selectRef = $state&lt;HTMLElement | null&gt;(null);
+  let value = $state('');
 ​
-  $effect(() =&gt; {
-    if (!selectRef) return;
-​
-    const handleInput = () =&gt; {
-      console.log('Selected value:', (selectRef as any).value);
-    };
-​
-    selectRef.addEventListener('input', handleInput);
-    return () =&gt; selectRef?.removeEventListener('input', handleInput);
-  });
+  function handleInput(e: Event) {
+    value = (e.target as HTMLElement &amp; { value: string }).value;
+  }
 &lt;/script&gt;
-&lt;custom-select bind:this={selectRef}&gt;
+&lt;custom-select oninput={handleInput}&gt;
   &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
   &lt;custom-menu&gt;
     &lt;custom-menuoption value="option1"&gt;Option 1&lt;/custom-menuoption&gt;
     &lt;custom-menuoption value="option2"&gt;Option 2&lt;/custom-menuoption&gt;
   &lt;/custom-menu&gt;
-&lt;/custom-select&gt;</code></pre>
+&lt;/custom-select&gt;
+&lt;p&gt;Selected: {value}&lt;/p&gt;</code></pre>
 
 <auro-header level="3" id="svelteModuleResolution">Module Resolution</auro-header>
 Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript can resolve the component's package exports:
@@ -347,8 +333,8 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/minimal-config.md) -->
-<!-- The below content is automatically added from ./../docs/partials/minimal-config.md -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/minimal-config.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/minimal-config.md -->
 <auro-header level="3" id="minimalConfig">Minimal Configuration</auro-header>
 Every <code>&lt;auro-select&gt;</code> implementation requires three things:
 
@@ -367,654 +353,60 @@ Every <code>&lt;auro-select&gt;</code> implementation requires three things:
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customization.md) -->
-<!-- The below content is automatically added from ./../docs/partials/customization.md -->
-<auro-header level="2" id="appearance">Customize Appearance</auro-header>
-<auro-header level="3" id="appearance">Light vs. Dark Background</auro-header>
-<p>The <code>appearance</code> attribute defines whether the component renders on lighter or darker backgrounds. Supported values are <code>default</code> and <code>inverse</code>. The default value is <code>default</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basic.html -->
-<auro-select>
-<span slot="ariaLabel.bib.close">Close Popup</span>
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Select Example</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select&gt;
-  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Select Example&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<div class="exampleWrapper--ondark">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance.html) -->
-<!-- The below content is automatically added from ./../apiExamples/appearance.html -->
-<auro-select appearance="inverse" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Inverse Appearance</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/appearance.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select appearance="inverse" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Inverse Appearance&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="noCheckmark">Hide checkmark indicators</auro-header>
-<p>By default, the select component displays a checkmark next to the currently selected option. To hide the checkmark indicator, set the <code>nocheckmark</code> attribute on the <code>auro-menu</code> element.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-checkmark.html) -->
-<!-- The below content is automatically added from ./../apiExamples/no-checkmark.html -->
-<auro-select nocheckmark placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-checkmark.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/no-checkmark.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select nocheckmark placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-    &lt;auro-menu&gt;
-        &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-        &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-        &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-        &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-        &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-        &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-    &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="2" id="customBehavior">Customize Behavior</auro-header>
-<auro-header level="3" id="disableComponent">Disable Component</auro-header>
-<p>The entire component may be disabled. When disabled, the component will render to reflect the state, may not receive focus nor react to any key or pointer events.</p>
-<p>When the component is disabled and part of a form, the components value is still included in the form submission.</p>
-<p class="note">
-<strong>Note:</strong> If the component is marked as both <strong>invalid</strong> and <code>disabled</code>, the <strong>invalid</strong> state UI/UX and functional behavior are ignored. The <code>disabled</code> UI/UX and functional behavior works normally.
-</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-<auro-select disabled placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select disabled placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="disableOptions">Disable Option(s)</auro-header>
-<p>The component may be rendered with one or more <code>disabled</code> options. When navigating the list of options with the keyboard or assistive technology to mark the next or previous option as active, disabled options will be skipped, jumping to the next enabled option.</p>
-<p>While using the pointer to mark options as active, hovering over disabled options will be ignored and the previous active option will remain active.</p>
-<p class="note">
-<strong>Note:</strong> If the currently <code>selected</code> option is marked as <code>disabled</code>, the component value is reset to <code>undefined</code> and the component validation workflow is performed (e.g., if the component instance is <code>required</code> it will set <code>validity="valueMissing".</code>).
-</p>
-<p class="note">
-<strong>Note:</strong> marking all options as disabled is not supported. Disable the component instead.
-</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-options.html) -->
-<!-- The below content is automatically added from ./../apiExamples/disabled-options.html -->
-<auro-select placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price" disabled>Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure" disabled>Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-options.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled-options.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price" disabled&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure" disabled&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="requireSelection">Require selection of an option</auro-header>
-<p>Certain use cases may require the guest to make a selection from the component in order to continue the intended work flow (e.g. form submission).</p>
-<p>When the component is marked required:</p>
-<ol>
-<li>Move focus to the auro-select element</li>
-<li>Activate the trigger (e.g. mouse click, tap or keyboard event)</li>
-<li>Navigate the list of options</li>
-<li>
-Collapse the bib without making a selection
-<p class="note">
-This will re-render the component in a state reflecting the validation error. To resolve the error, the guest may continue to the following steps.
-</p>
-</li>
-<li>Activate the trigger</li>
-<li>Navigate the list of options marking any option as active</li>
-<li>
-Select the active option
-<p class="note">
-This will re-render the component and the validation error state will be removed.
-</p>
-</li>
-</ol>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
-<!-- The below content is automatically added from ./../apiExamples/required.html -->
-<auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="forceError">Force an error state</auro-header>
-<p>The <code>error</code> attribute can be set on the select to force the component into a <code>customError</code> validity state. When defined, the component will render in its error state regardless of the current selection.</p>
-<p>The value of the <code>error</code> attribute is used as the validation error message displayed below the trigger. If the <code>setCustomValidityCustomError</code> property is also defined, its value will be used as the error message instead.</p>
-<p>Removing the <code>error</code> attribute clears the forced error state and re-evaluates validation normally.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/error.html -->
-<auro-select error="Custom error message" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select error="Custom error message" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="customValidation">Custom validation messages</auro-header>
-<p>The select provides several properties to customize the error messages displayed for different validation states. When a validation error occurs, the component checks for a state-specific message first, then falls back to the general <code>setCustomValidity</code> message.</p>
-<ul>
-<li><strong><code>setCustomValidity</code></strong> — Sets a fallback error message displayed for any validation error. This message is used when no state-specific message is defined.</li>
-<li><strong><code>setCustomValidityCustomError</code></strong> — Displayed when the <code>error</code> attribute is set on the component, putting it into a <code>customError</code> validity state. If not defined, the value of the <code>error</code> attribute is used as the message.</li>
-<li><strong><code>setCustomValidityValueMissing</code></strong> — Displayed when the component is <code>required</code> and the user leaves it empty (<code>valueMissing</code> validity state).</li>
-</ul>
-<p>The priority order for error messages is: state-specific property &gt; <code>setCustomValidity</code> &gt; default browser message. Default messages are provided by the browser and are pre-localized to the language the browser is running in.</p>
-<auro-header level="3" id="placeholder">Placeholder</auro-header>
-<p>Use the <code>placeholder</code> attribute to define custom placeholder text that is displayed in the trigger before a value has been selected.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placeholder.html) -->
-<!-- The below content is automatically added from ./../apiExamples/placeholder.html -->
-<auro-select placeholder="Please select your preferred option">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placeholder.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/placeholder.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select placeholder="Please select your preferred option"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="fluid">Fluid</auro-header>
-<p>When the <code>fluid</code> attribute is present, the component will expand to 100% width of its container element. This is useful for form layouts where the select should fill the available space.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
-<!-- The below content is automatically added from ./../apiExamples/fluid.html -->
-<auro-select fluid placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/fluid.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select fluid placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="flexMenuWidth">Flex menu width</auro-header>
-<p>By default, the bib width matches the trigger width. Setting the <code>flexMenuWidth</code> attribute allows the bib to size itself based on its content, which is useful when menu option text is wider than the trigger.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/flex-menu-width.html) -->
-<!-- The below content is automatically added from ./../apiExamples/flex-menu-width.html -->
-<auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
-<auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
-<auro-menuoption value="mexico">Mexico has a country code of (+52)</auro-menuoption>
-<auro-menuoption value="afghanistan">Afghanistan has a country code of (+93)</auro-menuoption>
-<auro-menuoption value="albania">Albania has a country code of (+355)</auro-menuoption>
-</auro-menu>
-</auro-select>
-<style>
-#flexMenuWidthExample::part(dropdownTrigger) {
-width: 25%;
-}
-</style>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/flex-menu-width.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/flex-menu-width.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="united states"&gt;United States has a country code of (+1)&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="costa rica"&gt;Costa Rica has a country code of (+506)&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="mexico"&gt;Mexico has a country code of (+52)&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="afghanistan"&gt;Afghanistan has a country code of (+93)&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="albania"&gt;Albania has a country code of (+355)&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;
-​
-&lt;style&gt;
-  #flexMenuWidthExample::part(dropdownTrigger) {
-    width: 25%;
-  }
-&lt;/style&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="matchWidth">Match Width</auro-header>
-<p>When the <code>matchWidth</code> attribute is present, the popover bib and trigger will be set to the same width. This ensures the dropdown menu appears at exactly the same width as the trigger element.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/match-width.html) -->
-<!-- The below content is automatically added from ./../apiExamples/match-width.html -->
-<auro-select matchWidth placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/match-width.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/match-width.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select matchWidth placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="size">Size</auro-header>
-<p>The <code>size</code> attribute determines the size of the dropdown bib. Only the <code>emphasized</code> layout supports <code>size="xl"</code>, while all other layouts support <code>size="lg"</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/size.html) -->
-<!-- The below content is automatically added from ./../apiExamples/size.html -->
-<auro-select layout="emphasized" shape="pill" size="xl" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/size.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/size.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select layout="emphasized" shape="pill" size="xl" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="placement">Placement</auro-header>
-<p>The <code>placement</code> attribute defines the position where the dropdown bib should appear relative to the trigger. Supported values are <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>bottom-start</code>, <code>top-start</code>, <code>top-end</code>, <code>right-start</code>, <code>right-end</code>, <code>bottom-end</code>, <code>left-start</code>, and <code>left-end</code>. The default value is <code>bottom-start</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placement.html) -->
-<!-- The below content is automatically added from ./../apiExamples/placement.html -->
-<auro-select placement="top-start" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placement.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/placement.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select placement="top-start" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="noFlip">No Flip</auro-header>
-<p>When the <code>noFlip</code> attribute is present, the dropdown bib will not flip to an alternate position when there isn't enough space in the specified <code>placement</code>. By default, the bib will automatically reposition itself to remain visible within the viewport.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-flip.html) -->
-<!-- The below content is automatically added from ./../apiExamples/no-flip.html -->
-<auro-select noFlip placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-flip.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/no-flip.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select noFlip placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="offset">Offset</auro-header>
-<p>The <code>offset</code> attribute defines the gap (in pixels) between the trigger element and the dropdown bib. The default value is <code>0</code>.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/offset.html) -->
-<!-- The below content is automatically added from ./../apiExamples/offset.html -->
-<auro-select offset="16" placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/offset.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/offset.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select offset="16" placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-<auro-header level="3" id="shift">Shift</auro-header>
-<p>When the <code>shift</code> attribute is present, the dropdown bib will shift its position to avoid being cut off by the viewport. This is useful when the bib would otherwise extend beyond the edge of the screen.</p>
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/shift.html) -->
-<!-- The below content is automatically added from ./../apiExamples/shift.html -->
-<auro-select shift placeholder="Placeholder Text">
-<span slot="bib.fullscreen.headline">Bib Headline</span>
-<span slot="label">Label</span>
-<auro-menu>
-<auro-menuoption value="stops">Stops</auro-menuoption>
-<auro-menuoption value="price">Price</auro-menuoption>
-<auro-menuoption value="duration">Duration</auro-menuoption>
-<auro-menuoption value="departure">Departure</auro-menuoption>
-<auro-menuoption value="arrival">Arrival</auro-menuoption>
-<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
-</auro-menu>
-</auro-select>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/shift.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/shift.html -->
-<pre class="language-html"><code class="language-html">&lt;auro-select shift placeholder="Placeholder Text"&gt;
-  &lt;span slot="bib.fullscreen.headline"&gt;Bib Headline&lt;/span&gt;
-  &lt;span slot="label"&gt;Label&lt;/span&gt;
-  &lt;auro-menu&gt;
-    &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
-    &lt;auro-menuoption value="prefer alaska"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
-  &lt;/auro-menu&gt;
-&lt;/auro-select&gt;</code></pre>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/getting-started/slots.md) -->
+<!-- The below content is automatically added from ./../docs/partials/getting-started/slots.md -->
+<auro-header level="2" id="slots">Slots</auro-header>
+<p>The following slots are available on the <code>&lt;auro-select&gt;</code> element.</p>
+<auro-header level="3" id="slot-default">(default)</auro-header>
+<p>Default slot for the menu content. Place <code>&lt;auro-menuoption&gt;</code> elements here.</p>
+<auro-header level="3" id="slot-label">label</auro-header>
+<p>Defines the content of the label.</p>
+<auro-header level="3" id="slot-helpText">helpText</auro-header>
+<p>Defines the content of the help text displayed below the select.</p>
+<auro-header level="3" id="slot-optionalLabel">optionalLabel</auro-header>
+<p>Allows overriding the optional display text <code>"(optional)"</code>, which appears next to the label.</p>
+<auro-header level="3" id="slot-valueText">valueText</auro-header>
+<p>Dropdown value text display.</p>
+<auro-header level="3" id="slot-displayValue">displayValue</auro-header>
+<p>Allows custom HTML content to display the selected value when the select is not focused.</p>
+<auro-header level="3" id="slot-ariaLabel-bib-close">ariaLabel.bib.close</auro-header>
+<p>Sets <code>aria-label</code> on the close button in the fullscreen bib.</p>
+<auro-header level="3" id="slot-bib-fullscreen-headline">bib.fullscreen.headline</auro-header>
+<p>Defines the headline to display above menu options in the fullscreen bib.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
+<section>
+<auro-header level="2" id="stateManagement">State Management</auro-header>
+<p>The following properties reflect the current state of the component and can be accessed via JavaScript.</p>
+<auro-header level="3" id="hasFocus">hasFocus</auro-header>
+<p>Returns <code>true</code> when the select trigger currently has focus.</p>
+<auro-header level="3" id="isPopoverVisible">isPopoverVisible</auro-header>
+<p>Returns <code>true</code> when the dropdown bib is currently visible.</p>
+<auro-header level="3" id="name">name</auro-header>
+<p>Gets or sets the name for the select element. Used when submitting form data.</p>
+<auro-header level="3" id="optionSelected">optionSelected</auro-header>
+<p>Returns the currently selected <code>&lt;auro-menuoption&gt;</code> element, or <code>undefined</code> if no option is selected. When <code>multiSelect</code> is enabled, returns an <code>Array</code> of selected elements.</p>
+<auro-header level="3" id="touched">touched</auro-header>
+<p>Returns <code>true</code> after the user has interacted with the component (opened and closed the bib, or changed the value).</p>
+<auro-header level="3" id="validity">validity</auro-header>
+<p>Returns the current <code>validityState</code> of the component as a string. Possible values include <code>"valid"</code>, <code>"valueMissing"</code>, and <code>"customError"</code>.</p>
+<auro-header level="3" id="value">value</auro-header>
+<p>Gets or sets the selected value of the select. When set programmatically, the component will attempt to match and select the corresponding menu option.</p>
+</section>
+<section>
+<auro-header level="2" id="publicFunctions">Functions</auro-header>
+<p>The following public methods are available on the <code>&lt;auro-select&gt;</code> element.</p>
+<auro-header level="3" id="reset">reset()</auro-header>
+<p>Resets the component to its initial state, clearing the value and validation state.</p>
+<auro-header level="3" id="updateActiveOption">updateActiveOption()</auro-header>
+<p>Updates the active option in the menu by index. The active option receives visual focus when navigating with the keyboard.</p>
+<auro-header level="3" id="hideBib">hideBib()</auro-header>
+<p>Programmatically hides the dropdown bib if it is currently open.</p>
+<auro-header level="3" id="showBib">showBib()</auro-header>
+<p>Programmatically shows the dropdown bib if there are options to display.</p>
+<auro-header level="3" id="validate">validate()</auro-header>
+<p>Triggers validation on the component. Pass <code>true</code> to force validation even when <code>noValidate</code> is set.</p>
+</section>
 </div>
 </div>
 </div>