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

package/components/counter/demo/customize.md

@@ -0,0 +1,650 @@
+<auro-header level="1" id="overview">Counter - Customize</auro-header>
+<div class="contentWrapper">
+<nav>
+<auro-nav anchorNavContent=".scrollWrapper">
+<span slot="mobileToggleCollapsed">View More</span>
+<span slot="mobileToggleExpanded">View Less</span>
+<auro-anchorlink fluid href="#appearance">Appearance</auro-anchorlink>
+<auro-anchorlink fluid href="#background" class="level2 body-xs">Light vs. Dark Background</auro-anchorlink>
+<auro-anchorlink fluid href="#cssTokens" class="level2 body-xs">Tokens</auro-anchorlink>
+<auro-anchorlink fluid href="#cssParts" class="level2 body-xs">CSS Shadow Parts</auro-anchorlink>
+<auro-anchorlink fluid href="#dropdownPosition" class="level2 body-xs">Bib Position</auro-anchorlink>
+<auro-anchorlink fluid href="#dropdownFullscreen" class="level2 body-xs">Fullscreen Breakpoint</auro-anchorlink>
+<auro-anchorlink fluid href="#customBehavior">Behavior</auro-anchorlink>
+<auro-anchorlink fluid href="#disabled" class="level2 body-xs">Disabled</auro-anchorlink>
+<auro-anchorlink fluid href="#disabledIndividual" class="level2 body-xs">Disabled Individual</auro-anchorlink>
+<auro-anchorlink fluid href="#minmax" class="level2 body-xs">Min/Max</auro-anchorlink>
+<auro-anchorlink fluid href="#groupMinMax" class="level2 body-xs">Group Min/Max</auro-anchorlink>
+<auro-anchorlink fluid href="#error" class="level2 body-xs">Error</auro-anchorlink>
+<auro-anchorlink fluid href="#dropdownErrors" class="level2 body-xs">Dropdown Errors</auro-anchorlink>
+</auro-nav>
+</nav>
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<auro-header level="2" id="appearance">Appearance</auro-header>
+<auro-header level="3" id="background">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-standalone.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
+<auro-counter>
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper--ondark" aria-hidden>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-counter appearance="inverse">
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse"&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="cssTokens">Tokens</auro-header>
+<p>The component may be restyled by overriding the following CSS custom properties (design tokens).</p>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
+<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+​
+:host(:not([ondark])),
+:host(:not([appearance="inverse"])) {
+  /* Snowflake Dropdown Tokens */
+  --ds-auro-counter-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
+  --ds-auro-counter-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
+  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
+  --ds-auro-counter-outline-color: transparent;
+​
+  /* Classic Tokens */
+  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, #{v.$ds-advanced-color-button-tertiary-background});
+  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #{v.$ds-advanced-color-state-focused});
+  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #{v.$ds-advanced-color-button-tertiary-text});
+  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
+}
+​
+:host([ondark]),
+:host([appearance="inverse"]) {
+  /* Snowflake Dropdown Tokens */
+  --ds-auro-counter-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
+  --ds-auro-counter-background-color: var(--ds-advanced-color-shared-background-inverse, #{v.$ds-advanced-color-shared-background-inverse});
+  --ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
+  --ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-counter-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-counter-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
+  --ds-auro-counter-outline-color: transparent;
+​
+  /* Classic Tokens */
+  --ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, #{v.$ds-advanced-color-button-tertiary-background-inverse});
+  --ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #{v.$ds-advanced-color-state-focused-inverse});
+  --ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
+  --ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #{v.$ds-advanced-color-button-tertiary-text-inverse});
+  --ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+  --ds-auro-counter-divider-color: var(--ds-basic-color-border-divider-inverse, #{v.$ds-basic-color-border-divider-inverse});
+}</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-tokens.html) -->
+<!-- The below content is automatically added from ./../apiExamples/custom-tokens.html -->
+<style>
+#customTokensCounter {
+--ds-auro-counter-control-background-color: #e8d5f5;
+--ds-auro-counter-control-border-color: #7b2d8e;
+--ds-auro-counter-icon-color: #7b2d8e;
+--ds-auro-counter-quantity-text-color: #7b2d8e;
+--ds-auro-counter-divider-color: #c9a4db;
+}
+</style>
+<auro-counter-group id="customTokensCounter">
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-tokens.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom-tokens.html -->
+<pre class="language-html"><code class="language-html">&lt;style&gt;
+  #customTokensCounter {
+    --ds-auro-counter-control-background-color: #e8d5f5;
+    --ds-auro-counter-control-border-color: #7b2d8e;
+    --ds-auro-counter-icon-color: #7b2d8e;
+    --ds-auro-counter-quantity-text-color: #7b2d8e;
+    --ds-auro-counter-divider-color: #c9a4db;
+  }
+&lt;/style&gt;
+&lt;auro-counter-group id="customTokensCounter"&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="cssParts">CSS Shadow Parts</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customize/css-parts.md) -->
+<!-- The below content is automatically added from ./../docs/partials/customize/css-parts.md -->
+<p>The following CSS shadow parts are available for styling:</p>
+<p><strong>auro-counter-group</strong></p>
+<table>
+<thead>
+<tr>
+<th>Part</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>dropdown</code></td>
+<td>Apply CSS to the dropdown element in the shadow DOM</td>
+</tr>
+<tr>
+<td><code>helpText</code></td>
+<td>Apply CSS to the group help text element</td>
+</tr>
+</tbody>
+</table>
+<p><strong>auro-counter</strong></p>
+<table>
+<thead>
+<tr>
+<th>Part</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>counterControl</code></td>
+<td>Apply CSS to the counter control container</td>
+</tr>
+<tr>
+<td><code>controlMinus</code></td>
+<td>Apply CSS to the decrement button</td>
+</tr>
+<tr>
+<td><code>controlPlus</code></td>
+<td>Apply CSS to the increment button</td>
+</tr>
+<tr>
+<td><code>helpText</code></td>
+<td>Apply CSS to the counter help text element</td>
+</tr>
+</tbody>
+</table>
+<!-- AURO-GENERATED-CONTENT:END -->
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/css-parts.html) -->
+<!-- The below content is automatically added from ./../apiExamples/css-parts.html -->
+<style>
+#cssPartsCounter auro-counter::part(counterControl) {
+border: 2px dashed purple;
+border-radius: 8px;
+padding: 0.5rem;
+}
+
+#cssPartsCounter auro-counter::part(controlMinus),
+#cssPartsCounter auro-counter::part(controlPlus) {
+background-color: #e8d5f5;
+}
+</style>
+<auro-counter-group id="cssPartsCounter">
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/css-parts.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/css-parts.html -->
+<pre class="language-html"><code class="language-html">&lt;style&gt;
+  #cssPartsCounter auro-counter::part(counterControl) {
+    border: 2px dashed purple;
+    border-radius: 8px;
+    padding: 0.5rem;
+  }
+​
+  #cssPartsCounter auro-counter::part(controlMinus),
+  #cssPartsCounter auro-counter::part(controlPlus) {
+    background-color: #e8d5f5;
+  }
+&lt;/style&gt;
+&lt;auro-counter-group id="cssPartsCounter"&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="dropdownPosition">Bib Position</auro-header>
+<p>Customize bib position with <code>placement</code>, <code>offset</code>, <code>noFlip</code>, <code>autoPlacement</code>, and <code>shift</code> attributes.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
+<!-- The below content is automatically added from ./../apiExamples/floaterConfig.html -->
+<div style="width: 350px">
+<auro-counter-group isDropdown offset="20" placement="bottom-end">
+<div slot="bib.fullscreen.headline">Passengers</div>
+<span slot="label">Label</span>
+<span slot="helpText">bottom-end bib with 20px offset</span>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<span slot="label">Label</span>
+<span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<span slot="label">Label</span>
+<span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<auro-counter-group width="350px" isDropdown offset="20" placement="bottom-start" shift noFlip>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<span slot="label">Label</span>
+<span slot="helpText">bottom-start with 20px offset, noFlip and shift enabled</span>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floaterConfig.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/floaterConfig.html -->
+<pre class="language-html"><code class="language-html">&lt;div style="width: 350px"&gt;
+  &lt;auro-counter-group isDropdown offset="20" placement="bottom-end"&gt;
+    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+    &lt;span slot="label"&gt;Label&lt;/span&gt;
+    &lt;span slot="helpText"&gt;bottom-end bib with 20px offset&lt;/span&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+  &lt;auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip&gt;
+    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+    &lt;span slot="label"&gt;Label&lt;/span&gt;
+    &lt;span slot="helpText"&gt;bottom-end bib with 20px offset and noFlip&lt;/span&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+  &lt;auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement&gt;
+    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+    &lt;span slot="label"&gt;Label&lt;/span&gt;
+    &lt;span slot="helpText"&gt;right bib with 20px offset, noFlip and autoPlacement&lt;/span&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+  &lt;auro-counter-group width="350px" isDropdown offset="20" placement="bottom-start" shift noFlip&gt;
+    &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+    &lt;span slot="label"&gt;Label&lt;/span&gt;
+    &lt;span slot="helpText"&gt;bottom-start with 20px offset, noFlip and shift enabled&lt;/span&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+&lt;/div&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="dropdownFullscreen">Fullscreen Breakpoint</auro-header>
+<p>Customize the breakpoint at which the dropdown switches to fullscreen mode with <code>fullscreenBreakpoint</code>. The <code>bib.fullscreen.headline</code> slot is required. Use <code>bib.fullscreen.footer</code> to add footer content.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+<div style="max-width: 350px;">
+<auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="label">Passengers</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="helpText">This is help text</div>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+</auro-counter>
+<auro-counter>
+Lap Infants
+<span slot="description">Under 2 years</span>
+</auro-counter>
+<div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+<auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+<auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+</div>
+</auro-counter-group>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+<pre class="language-html"><code class="language-html">&lt;div style="max-width: 350px;"&gt;
+  &lt;auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg"&gt;
+    &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+    &lt;span slot="label"&gt;Passengers&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+    &lt;div slot="helpText"&gt;This is help text&lt;/div&gt;
+    &lt;auro-counter&gt;
+      Adults
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Children
+      &lt;span slot="description"&gt;Under 17 years old. Restrictions apply if traveling without an adult.&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
+      Lap Infants
+      &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem"&gt;
+      &lt;auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%"&gt;Reset&lt;/auro-button&gt;
+      &lt;auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%"&gt;Save&lt;/auro-button&gt;
+    &lt;/div&gt;
+  &lt;/auro-counter-group&gt;
+&lt;/div&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+<section>
+<auro-header level="2" id="customBehavior">Behavior</auro-header>
+<auro-header level="3" id="disabled">Disabled</auro-header>
+<p>Use the <code>disabled</code> attribute on the <code>&lt;auro-counter-group&gt;</code> to disable the entire group.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
+<!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
+<auro-counter-group disabled>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter>
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group disabled&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="disabledIndividual">Disabled Individual</auro-header>
+<p>Use the <code>disabled</code> attribute on individual <code>&lt;auro-counter&gt;</code> elements to disable specific counters while leaving the rest interactive.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-disabled.html -->
+<auro-counter disabled value="0">
+Disabled counter
+<span slot="description">This counter cannot be modified</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-disabled.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter disabled value="0"&gt;
+  Disabled counter
+  &lt;span slot="description"&gt;This counter cannot be modified&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="minmax">Min/Max</auro-header>
+<p>Use the <code>min</code>, <code>max</code>, and <code>value</code> attributes to constrain the counter's range and set an initial value.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-minmax.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-minmax.html -->
+<auro-counter min="2" max="5" value="2">
+Adults
+<span slot="description">Min: 2, Max: 5</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-minmax.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-minmax.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter min="2" max="5" value="2"&gt;
+  Adults
+  &lt;span slot="description"&gt;Min: 2, Max: 5&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="groupMinMax">Group Min/Max</auro-header>
+<p>The group <code>max</code> and <code>min</code> attributes set bounds for the total across all counters. Individual counter <code>max</code> values can also be set within a group.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-counter-max.html) -->
+<!-- The below content is automatically added from ./../apiExamples/group-counter-max.html -->
+<auro-counter-group max="12" min="0">
+<auro-counter max="5">
+This counter has a max value of 5
+</auro-counter>
+<auro-counter max="8">
+This counter has a max value of 8
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-counter-max.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/group-counter-max.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group max="12" min="0"&gt;
+  &lt;auro-counter max="5"&gt;
+    This counter has a max value of 5
+  &lt;/auro-counter&gt;
+  &lt;auro-counter max="8"&gt;
+    This counter has a max value of 8
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="error">Error</auro-header>
+<p>Use the <code>error</code> attribute to apply a persistent custom error message on the counter or counter group.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
+<auro-counter error="There is an error with the counter">
+Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter error="There is an error with the counter"&gt;
+  Adults
+&lt;/auro-counter&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<auro-header level="3" id="dropdownErrors">Dropdown Errors</auro-header>
+<p>Individual counters within a dropdown can display their own error messages. The group <code>error</code> attribute overrides individual errors.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-error.html -->
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<div slot="label">Passengers</div>
+<auro-counter>
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter error="Custom error on Children counter">
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group isDropdown&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;auro-counter&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter error="Custom error on Children counter"&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-group.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-error-group.html -->
+<auro-counter-group error="Custom error on counter group" isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Passengers</div>
+<div slot="label">Passengers</div>
+<auro-counter error="Custom error on Adults counter">
+Adults
+<span slot="description">18 years or older</span>
+</auro-counter>
+<auro-counter error="Custom error on Children counter">
+Children
+<span slot="description">2-17 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-group.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-group.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group error="Custom error on counter group" isDropdown&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;auro-counter error="Custom error on Adults counter"&gt;
+    Adults
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter error="Custom error on Children counter"&gt;
+    Children
+    &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+</section>
+</div>
+</div>
+</div>