@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.0

package/components/counter/demo/api.md

@@ -8,39 +8,39 @@ The `auro-counter-group` element provides a flexible interface for grouping mult
 ## Properties
 
 | Property                  | Attribute                 | Type                                             | Default          | Description                                      |
-|---------------------------|---------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
-| [appearance](#appearance)              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
-| [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                                        | "false"          | If declared, bib's position will be automatically calculated where to appear. |
-| [error](#error)                   | `error`                   | `string`                                         |                  | The current error message to display when the component is invalid. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean`                                        | false            | If true, the counter group is displayed as a dropdown. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean`                                        | false            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| [layout](#layout)                  | `layout`                  | `'classic' \| 'snowflake'`                       | "'classic'"      | Determines the layout style of the counter group when it is a dropdown. |
-| [matchWidth](#matchWidth)              | `matchWidth`              | `boolean`                                        | false            | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
-| [max](#max)                     | `max`                     | `number`                                         | "undefined"      | The maximum value allowed for the whole group of counters. |
-| [min](#min)                     | `min`                     | `number`                                         | "undefined"      | The minimum value allowed for the whole group of counters. |
-| [noFlip](#noFlip)                  | `noFlip`                  | `boolean`                                        | false            | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [offset](#offset)                  | `offset`                  | `number`                                         | "0"              | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                  | `onDark`                  | `boolean`                                        | false            | DEPRECATED - use `appearance` instead.           |
-| [placement](#placement)               | `placement`               | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
-| [shift](#shift)                   | `shift`                   | `boolean`                                        | false            | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
-| [total](#total)                   | `total`                   | `number`                                         | "undefined"      | The total value of the counters.                 |
-| [validity](#validity)                | `validity`                | `string`                                         | "undefined"      | Reflects the validity state.                     |
-| [value](#value)                   | `value`                   | `object`                                         | "undefined"      | The current individual values of the nested counters. |
+|---------------------------|---------------------------|--------------------------------------------------|------------------|--------------------------------------------------|
+| `appearance`              | `appearance`              | `'default' \| 'inverse'`                         | "'default'"      | Defines whether the component will be on lighter or darker backgrounds. |
+| `autoPlacement`           | `autoPlacement`           | `boolean`                                        | "false"          | If declared, bib's position will be automatically calculated where to appear. |
+| `error`                   | `error`                   | `string`                                         |                  | The current error message to display when the component is invalid. |
+| `fullscreenBreakpoint`    | `fullscreenBreakpoint`    | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'"           | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| `isDropdown`              | `isDropdown`              | `boolean`                                        | false            | If true, the counter group is displayed as a dropdown. |
+| `largeFullscreenHeadline` | `largeFullscreenHeadline` | `boolean`                                        | false            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| `layout`                  | `layout`                  | `'classic' \| 'snowflake'`                       | "'classic'"      | Determines the layout style of the counter group when it is a dropdown. |
+| `matchWidth`              | `matchWidth`              | `boolean`                                        | false            | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
+| `max`                     | `max`                     | `number`                                         | "undefined"      | The maximum value allowed for the whole group of counters. |
+| `min`                     | `min`                     | `number`                                         | "undefined"      | The minimum value allowed for the whole group of counters. |
+| `noFlip`                  | `noFlip`                  | `boolean`                                        | false            | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| `offset`                  | `offset`                  | `number`                                         | "0"              | Gap between the trigger element and bib.         |
+| `onDark`                  | `onDark`                  | `boolean`                                        | false            | DEPRECATED - use `appearance` instead.           |
+| `placement`               | `placement`               | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
+| `shift`                   | `shift`                   | `boolean`                                        | false            | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
+| `total`                   | `total`                   | `number`                                         | "undefined"      | The total value of the counters.                 |
+| `validity`                | `validity`                | `string`                                         | "undefined"      | Reflects the validity state.                     |
+| `value`                   | `value`                   | `object`                                         | "undefined"      | The current individual values of the nested counters. |
 
 ## Methods
 
 | Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
-| [showBib](#showBib)  | `(): void`                             | Shows the dropdown bib if there are options to show. |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+|------------|----------------------------------------|--------------------------------------------------|
+| `hideBib`  | `(): void`                             | Hides the dropdown bib if its open.              |
+| `showBib`  | `(): void`                             | Shows the dropdown bib if there are options to show. |
+| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
 | Event   | Type                                             |
-|---------|--------------------------------------------------|
-| [input](#input) | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` |
+|---------|--------------------------------------------------|
+| `input` | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` |
 
 ## Slots
 
@@ -48,11 +48,11 @@ The `auro-counter-group` element provides a flexible interface for grouping mult
 |---------------------------|--------------------------------------------------|
 | `ariaLabel.bib.close`     | Sets aria-label on close button in fullscreen bib |
 | `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true. |
-| `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
-| [default](#default)                 | Slot for counter elements.                       |
-| [helpText](#helpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
-| [label](#label)                   | Dropdown label content. Only used when `isDropdown` is true. |
-| [valueText](#valueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
+| `default`                 | Slot for counter elements.                       |
+| `helpText`                | Dropdown help text content. Only used when `isDropdown` is true. |
+| `label`                   | Dropdown label content. Only used when `isDropdown` is true. |
+| `valueText`               | Dropdown value text display. Only used when `isDropdown` is true. |
 
 # auro-counter
 
@@ -61,100 +61,96 @@ The `auro-counter` element provides a flexible counter interface with increment
 ## Properties
 
 | Property     | Attribute    | Type                     | Default     | Description                                      |
-|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
-| [appearance](#appearance) | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
-| [disabled](#disabled)   | `disabled`   | `boolean`                |             | Indicates if the counter is disabled.            |
-| [error](#error)      | `error`      | `string`                 |             | Error state and message.<br />True if set, value is the error message. |
-| [max](#max)        | `max`        | `number`                 |             | The maximum value for the counter.               |
-| [min](#min)        | `min`        | `number`                 |             | The minimum value for the counter.               |
-| [onDark](#onDark)     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
-| [validity](#validity)   | `validity`   | `string`                 |             | The validity state of the counter.               |
-| [value](#value)      | `value`      | `number \| undefined`    |             | Gets the current value of the counter.           |
+|--------------|--------------|--------------------------|-------------|--------------------------------------------------|
+| `appearance` | `appearance` | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
+| `disabled`   | `disabled`   | `boolean`                |             | Indicates if the counter is disabled.            |
+| `error`      | `error`      | `string`                 |             | Error state and message.<br />True if set, value is the error message. |
+| `max`        | `max`        | `number`                 |             | The maximum value for the counter.               |
+| `min`        | `min`        | `number`                 |             | The minimum value for the counter.               |
+| `onDark`     | `onDark`     | `boolean`                |             | DEPRECATED - use `appearance="inverse"` instead. |
+| `validity`   | `validity`   | `string`                 |             | The validity state of the counter.               |
+| `value`      | `value`      | `number \| undefined`    |             | Gets the current value of the counter.           |
 
 ## Methods
 
 | Method      | Type                                   | Description                                      |
-|-------------|----------------------------------------|--------------------------------------------------|
-| [decrement](#decrement) | `(value?: number \| undefined): void`  | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
-| [increment](#increment) | `(value?: number \| undefined): void`  | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
-| [validate](#validate)  | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+|-------------|----------------------------------------|--------------------------------------------------|
+| `decrement` | `(value?: number \| undefined): void`  | Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.<br /><br />**value**: The amount to decrement by. |
+| `increment` | `(value?: number \| undefined): void`  | Increments the counter value by 1. If a value is provided, it increments by that amount.<br /><br />**value**: The amount to increment by. |
+| `validate`  | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
 | Event   | Type                                           |
-|---------|------------------------------------------------|
-| [input](#input) | `CustomEvent<{ value: number \| undefined; }>` |
+|---------|------------------------------------------------|
+| `input` | `CustomEvent<{ value: number \| undefined; }>` |
 
 ## Slots
 
 | Name              | Description                                |
 |-------------------|--------------------------------------------|
 | `ariaLabel.minus` | Accessible label for the decrement button. |
-| `ariaLabel.plus`  | Accessible label for the increment button. |
-| [default](#default)         | Main label content for the counter.        |
-| [description](#description)     | Descriptive content for the counter.       |
-| [helpText](#helpText)        | Help text content for the counter.         |
+| `ariaLabel.plus`  | Accessible label for the increment button. |
+| `default`         | Main label content for the counter.        |
+| `description`     | Descriptive content for the counter.       |
+| `helpText`        | Help text content for the counter.         |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Basic Counter
 
 <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>
+<!-- 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 -->
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
   Adults
-</auro-counter>
-```
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ## Basic Counter Group
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-counter-group>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-counter-group>
+<auro-counter>
       Short label
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Another short label
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       This is an example of the wrapping behavior for a long label
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter-group>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group&gt;
+  &lt;auro-counter&gt;
     Short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Another short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -165,23 +161,21 @@ The `auro-counter` element provides a flexible counter interface with increment
 Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
 
 <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">
+<!-- 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 -->
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter appearance="inverse">
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse"&gt;
   Adults
-</auro-counter>
-```
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -190,44 +184,40 @@ Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
 A counter can be disabled by adding the `disabled` attribute.
 
 <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">
+<!-- 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 -->
+<span slot="description">This counter cannot be modified</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
-  <auro-counter appearance="inverse" disabled value="0">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
+<auro-counter appearance="inverse" disabled value="0">
     Disabled counter
-    <span slot="description">This counter cannot be modified</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<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>
+<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 -->
 
-```html
-<auro-counter disabled value="0">
+<pre class="language-html"><code class="language-html">&lt;auro-counter disabled value="0"&gt;
   Disabled counter
-  <span slot="description">This counter cannot be modified</span>
-</auro-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-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-disabled.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
 
-```html
-<auro-counter appearance="inverse" disabled value="0">
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse" disabled value="0"&gt;
   Disabled counter
-  <span slot="description">This counter cannot be modified</span>
-</auro-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>
 
@@ -236,40 +226,36 @@ A counter can be disabled by adding the `disabled` attribute.
 A custom error can be set on the counter by adding the `error` attribute the desired message.
 
 <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">
+<!-- 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 -->
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
-  <auro-counter appearance="inverse" error="There is an error with the counter">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-error.html -->
+<auro-counter appearance="inverse" error="There is an error with the counter">
     Adults
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter error="There is an error with the counter">
+<pre class="language-html"><code class="language-html">&lt;auro-counter error="There is an error with the counter"&gt;
   Adults
-</auro-counter>
-```
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-error.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-error.html -->
 
-```html
-<auro-counter appearance="inverse" error="There is an error with the counter">
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse" error="There is an error with the counter"&gt;
   Adults
-</auro-counter>
-```
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -278,25 +264,23 @@ A custom error can be set on the counter by adding the `error` attribute the des
 Use the `min`, `max`, and `value` attributes to set the minimum and maximum allowable values for the counter, as well as its initial value.
 
 <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="1" max="5" value="2">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-minmax.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-minmax.html -->
+<auro-counter min="1" max="5" value="2">
     Adults
-    <span slot="description">Min: 1, Max: 5</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="description">Min: 1, Max: 5</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter min="1" max="5" value="2">
+<pre class="language-html"><code class="language-html">&lt;auro-counter min="1" max="5" value="2"&gt;
   Adults
-  <span slot="description">Min: 1, Max: 5</span>
-</auro-counter>
-```
+  &lt;span slot="description"&gt;Min: 1, Max: 5&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -307,44 +291,40 @@ Use the `min`, `max`, and `value` attributes to set the minimum and maximum allo
 A description can be added with the `description` slot. The description appears below the main label and is useful for displaying important information or requirements.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/description.html -->
-  <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
+<!-- The below content is automatically added from ./../apiExamples/description.html -->
+<auro-counter>
     Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="description">18 years or older</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-description.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-description.html -->
-  <auro-counter appearance="inverse">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-description.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-description.html -->
+<auro-counter appearance="inverse">
     Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="description">18 years or older</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/description.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/description.html -->
 
-```html
-<auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
   Adults
-  <span slot="description">18 years or older</span>
-</auro-counter>
-```
+  &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-description.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-description.html -->
 
-```html
-<auro-counter appearance="inverse">
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse"&gt;
   Adults
-  <span slot="description">18 years or older</span>
-</auro-counter>
-```
+  &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -353,44 +333,40 @@ A description can be added with the `description` slot. The description appears
 Help text is supported with counters, and can be added by targetting the `helptext` slot.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
-  <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
+<!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
+<auro-counter>
     Adults
-    <span slot="helpText">This is help text for the counter</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="helpText">This is help text for the counter</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-helptext.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-helptext.html -->
-  <auro-counter appearance="inverse">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-helptext.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-helptext.html -->
+<auro-counter appearance="inverse">
     Adults
-    <span slot="helpText">This is help text for the counter</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="helpText">This is help text for the counter</span>
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-helptext.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
 
-```html
-<auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter&gt;
   Adults
-  <span slot="helpText">This is help text for the counter</span>
-</auro-counter>
-```
+  &lt;span slot="helpText"&gt;This is help text for the counter&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-helptext.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-helptext.html -->
 
-```html
-<auro-counter appearance="inverse">
+<pre class="language-html"><code class="language-html">&lt;auro-counter appearance="inverse"&gt;
   Adults
-  <span slot="helpText">This is help text for the counter</span>
-</auro-counter>
-```
+  &lt;span slot="helpText"&gt;This is help text for the counter&lt;/span&gt;
+&lt;/auro-counter&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -401,39 +377,37 @@ Help text is supported with counters, and can be added by targetting the `helpte
 Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
 
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
-  <auro-counter-group appearance="inverse">
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-group.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-group.html -->
+<auro-counter-group appearance="inverse">
+<auro-counter>
       Short label
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Another short label
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       This is an example of the wrapping behavior for a long label
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-group.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-group.html -->
 
-```html
-<auro-counter-group appearance="inverse">
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group appearance="inverse"&gt;
+  &lt;auro-counter&gt;
     Short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Another short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -442,86 +416,82 @@ Use `appearance="inverse"` to ensure proper contrast on dark backgrounds.
 Use the `isDropdown` attribute to place a counter group into the dropdown menu. The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
-  <auro-counter-group isDropdown>
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <span slot="bib.fullscreen.headline">Passengers</span>
-    <div slot="label">Passengers</div>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="label">Passengers</div>
+<auro-counter>
       Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+<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>
+<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>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="description">Under 2 years</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-dropdown.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-dropdown.html -->
-  <auro-counter-group appearance="inverse" isDropdown>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-dropdown.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-dropdown.html -->
+<auro-counter-group appearance="inverse" isDropdown>
+<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>
+<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 -->
+<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>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
 
-```html
-<auro-counter-group isDropdown>
-  <span slot="ariaLabel.bib.close">Close Popup</span>
-  <span slot="bib.fullscreen.headline">Passengers</span>
-  <div slot="label">Passengers</div>
-  <auro-counter>
+<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;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+  &lt;div slot="label"&gt;Passengers&lt;/div&gt;
+  &lt;auro-counter&gt;
     Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <auro-counter>
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Children
-    <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-  </auro-counter>
-  <auro-counter>
+    &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
-    <span slot="description">Under 2 years</span>
-  </auro-counter>
-</auro-counter-group>
-```
+    &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-dropdown.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-dropdown.html -->
 
-```html
-<auro-counter-group appearance="inverse" isDropdown>
-  <div slot="bib.fullscreen.headline">Passengers</div>
-  <div slot="label">Passengers</div>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group appearance="inverse" isDropdown&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
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <auro-counter>
+    &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Children
-    <span slot="description">2-17 years</span>
-  </auro-counter>
-</auro-counter-group>
-```
+    &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>
 
@@ -530,84 +500,80 @@ Use the `isDropdown` attribute to place a counter group into the dropdown menu.
 Counter dropdowns support an alternate "snowflake" layout, using `layout="snowflake"`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown layout="snowflake">
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+<div slot="label">Snowflake Dropdown Group</div>
+<div slot="helpText">Total must be between 2-10</div>
+<auro-counter>
       Counter 1
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-snowflake.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-snowflake.html -->
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
+<div slot="label">Snowflake Dropdown Group</div>
+<div slot="helpText">Total must be between 2-10</div>
+<auro-counter>
       Counter 1
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-snowflake.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-snowflake.html -->
 
-```html
-<!-- Example of counter-group properties -->
-<auro-counter-group max="10" min="2" isDropdown layout="snowflake">
-  <span slot="ariaLabel.bib.close">Close Popup</span>
-  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-  <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-  <div slot="label">Snowflake Dropdown Group</div>
-  <div slot="helpText">Total must be between 2-10</div>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;!-- Example of counter-group properties --&gt;
+&lt;auro-counter-group max="10" min="2" isDropdown layout="snowflake"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Group fullscreen label&lt;/div&gt;
+  &lt;auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor&gt;&lt;/auro-icon&gt;
+  &lt;div slot="label"&gt;Snowflake Dropdown Group&lt;/div&gt;
+  &lt;div slot="helpText"&gt;Total must be between 2-10&lt;/div&gt;
+  &lt;auro-counter&gt;
     Counter 1
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Counter 2
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-snowflake.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-snowflake.html -->
 
-```html
-<!-- Example of counter-group properties -->
-<auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
-  <span slot="ariaLabel.bib.close">Close Popup</span>
-  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-  <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-  <div slot="label">Snowflake Dropdown Group</div>
-  <div slot="helpText">Total must be between 2-10</div>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;!-- Example of counter-group properties --&gt;
+&lt;auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Group fullscreen label&lt;/div&gt;
+  &lt;auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor&gt;&lt;/auro-icon&gt;
+  &lt;div slot="label"&gt;Snowflake Dropdown Group&lt;/div&gt;
+  &lt;div slot="helpText"&gt;Total must be between 2-10&lt;/div&gt;
+  &lt;auro-counter&gt;
     Counter 1
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Counter 2
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -616,43 +582,41 @@ Counter dropdowns support an alternate "snowflake" layout, using `layout="snowfl
 A counter dropdown with individual counters in an errored state will display the errors for each errored counter by default.
 
 <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 error="Custom error on Adults counter">
+<!-- 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 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">
+<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 -->
+<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>
+<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 -->
 
-```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 error="Custom error on Adults counter">
+<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 error="Custom error on Adults counter"&gt;
     Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <auro-counter error="Custom error on Children counter">
+    &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
-    <span slot="description">2-17 years</span>
-  </auro-counter>
-</auro-counter-group>
-```
+    &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>
 
@@ -661,43 +625,41 @@ A counter dropdown with individual counters in an errored state will display the
 The `error` attribute can also be used on the counter group to set a custom error message. This will override any individual counter error messages.
 
 <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">
+<!-- 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">
+<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 -->
+<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>
+<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 -->
 
-```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">
+<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
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <auro-counter error="Custom error on Children counter">
+    &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
-    <span slot="description">2-17 years</span>
-  </auro-counter>
-</auro-counter-group>
-```
+    &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>
 
@@ -708,33 +670,31 @@ The group counter `max` or `min` property sets the property for all counters in
 **Example has group max set to 12**
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-max.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/group-max.html -->
-  <auro-counter-group max="12" min="0">
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-max.html) -->
+<!-- The below content is automatically added from ./../apiExamples/group-max.html -->
+<auro-counter-group max="12" min="0">
+<auro-counter>
       Short label
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       This is an example of the wrapping behavior for a long label
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-max.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/group-max.html -->
 
-```html
-<auro-counter-group max="12" min="0">
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group max="12" min="0"&gt;
+  &lt;auro-counter&gt;
     Short label
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     This is an example of the wrapping behavior for a long label
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -745,33 +705,31 @@ You can also individually set the `max` or `min` value for each counter in a gro
 **Example has group max set to 12**
 
 <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">
+<!-- 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">
+</auro-counter>
+<auro-counter max="8">
       This counter has a max value of 8
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<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 -->
 
-```html
-<auro-counter-group max="12" min="0">
-  <auro-counter max="5">
+<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
-  </auro-counter>
-  <auro-counter max="8">
+  &lt;/auro-counter&gt;
+  &lt;auro-counter max="8"&gt;
     This counter has a max value of 8
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -786,125 +744,123 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 - `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
 
 <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>
+<!-- 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>
+<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>
+<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>
+<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>
+<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>
+<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>
+<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>
+<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 -->
+<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>
+<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 -->
 
-```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>
+<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
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       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>
+      &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
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       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>
+      &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
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       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>
+      &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
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       Children
-      <span slot="description">2-17 years</span>
-    </auro-counter>
-  </auro-counter-group>
-</div>
-```
+      &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>
 
@@ -920,65 +876,63 @@ To support fullscreen bib, setting the `bib.fullscreen.headline` slot is **REQUI
 You can also set `bib.fullscreen.footer` slot to add any additional options on fullscreen view.
 
 <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>
+<!-- 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>
+<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>
+<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 -->
+<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>
+<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 -->
 
-```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>
+<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
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       Children
-      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-    </auro-counter>
-    <auro-counter>
+      &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
-      <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>
-```
+      &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>
 
@@ -989,57 +943,55 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
 Use the `valueText` slot to customize the value display in the dropdown trigger.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
-  <div style="max-width: 350px;">
-    <auro-counter-group isDropdown>
-      <span slot="ariaLabel.bib.close">Close Popup</span>
-      <span slot="bib.fullscreen.headline">Passengers</span>
-      <div slot="valueText">Custom value text</div>
-      <div slot="label"></div>
-      <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
+<div style="max-width: 350px;">
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<span slot="bib.fullscreen.headline">Passengers</span>
+<div slot="valueText">Custom value text</div>
+<div slot="label"></div>
+<auro-counter>
         Adults
-        <span slot="description">18 years or older</span>
-      </auro-counter>
-      <auro-counter>
+<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>
+<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>
-    </auro-counter-group>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="description">Under 2 years</span>
+</auro-counter>
+</auro-counter-group>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-value-text.html -->
 
-```html
-<div style="max-width: 350px;">
-  <auro-counter-group isDropdown>
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <span slot="bib.fullscreen.headline">Passengers</span>
-    <div slot="valueText">Custom value text</div>
-    <div slot="label"></div>
-    <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;div style="max-width: 350px;"&gt;
+  &lt;auro-counter-group isDropdown&gt;
+    &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
+    &lt;div slot="valueText"&gt;Custom value text&lt;/div&gt;
+    &lt;div slot="label"&gt;&lt;/div&gt;
+    &lt;auro-counter&gt;
       Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
+      &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
+    &lt;/auro-counter&gt;
+    &lt;auro-counter&gt;
       Children
-      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
-    </auro-counter>
-    <auro-counter>
+      &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
-      <span slot="description">Under 2 years</span>
-    </auro-counter>
-  </auro-counter-group>
-</div>
-```
+      &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
+    &lt;/auro-counter&gt;
+  &lt;/auro-counter-group&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1052,46 +1004,42 @@ Listen for `input` events to react to user interactions. Open the browser consol
 This event fires both on individual counter changes and when the counter group value changes. The event detail contains the current values of all counters in the group.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/events.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/events.html -->
-  <auro-counter-group id="eventExample">
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/events.html) -->
+<!-- The below content is automatically added from ./../apiExamples/events.html -->
+<auro-counter-group id="eventExample">
+<auro-counter>
       Adults
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Children
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/events.html -->
 
-```html
-<auro-counter-group id="eventExample">
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;auro-counter-group id="eventExample"&gt;
+  &lt;auro-counter&gt;
     Adults
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Children
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/events.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/events.js -->
 
-```js
-export function eventCounterExample() {
+<pre class="language-js"><code class="language-js">export function eventCounterExample() {
   const counter = document.getElementById('eventExample');
-
-  counter.addEventListener('input', (event) => {
+​
+  counter.addEventListener('input', (event) =&gt; {
     console.log(`Values updated: ${JSON.stringify(event.detail)}`);
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1102,39 +1050,37 @@ export function eventCounterExample() {
 This example demonstrates the use of all available counter properties.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-properties.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/api-properties.html -->
-  <!-- Example of all counter properties -->
-  <auro-counter-group>
-    <!-- Basic counter with min/max -->
-    <auro-counter min="1" max="5" value="2">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-properties.html) -->
+<!-- The below content is automatically added from ./../apiExamples/api-properties.html -->
+<!-- Example of all counter properties -->
+<auro-counter-group>
+<!-- Basic counter with min/max -->
+<auro-counter min="1" max="5" value="2">
       Min 1, Max 5
-    </auro-counter>
-    <!-- Disabled counter -->
-    <auro-counter disabled value="0">
+</auro-counter>
+<!-- Disabled counter -->
+<auro-counter disabled value="0">
       Disabled counter
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/api-properties.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/api-properties.html -->
 
-```html
-<!-- Example of all counter properties -->
-<auro-counter-group>
-  <!-- Basic counter with min/max -->
-  <auro-counter min="1" max="5" value="2">
+<pre class="language-html"><code class="language-html">&lt;!-- Example of all counter properties --&gt;
+&lt;auro-counter-group&gt;
+  &lt;!-- Basic counter with min/max --&gt;
+  &lt;auro-counter min="1" max="5" value="2"&gt;
     Min 1, Max 5
-  </auro-counter>
-  <!-- Disabled counter -->
-  <auro-counter disabled value="0">
+  &lt;/auro-counter&gt;
+  &lt;!-- Disabled counter --&gt;
+  &lt;auro-counter disabled value="0"&gt;
     Disabled counter
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1143,43 +1089,41 @@ This example demonstrates the use of all available counter properties.
 This example demonstrates the use of all available counter group properties.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-group-properties.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/api-group-properties.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <div slot="label">Group with all properties</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <div slot="valueText">Custom total display</div>
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-group-properties.html) -->
+<!-- The below content is automatically added from ./../apiExamples/api-group-properties.html -->
+<!-- Example of counter-group properties -->
+<auro-counter-group max="10" min="2" isDropdown>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<div slot="label">Group with all properties</div>
+<div slot="helpText">Total must be between 2-10</div>
+<div slot="valueText">Custom total display</div>
+<auro-counter>
       Counter 1
-    </auro-counter>
-    <auro-counter>
+</auro-counter>
+<auro-counter>
       Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/api-group-properties.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/api-group-properties.html -->
 
-```html
-<!-- Example of counter-group properties -->
-<auro-counter-group max="10" min="2" isDropdown>
-  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-  <div slot="label">Group with all properties</div>
-  <div slot="helpText">Total must be between 2-10</div>
-  <div slot="valueText">Custom total display</div>
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;!-- Example of counter-group properties --&gt;
+&lt;auro-counter-group max="10" min="2" isDropdown&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Group fullscreen label&lt;/div&gt;
+  &lt;div slot="label"&gt;Group with all properties&lt;/div&gt;
+  &lt;div slot="helpText"&gt;Total must be between 2-10&lt;/div&gt;
+  &lt;div slot="valueText"&gt;Custom total display&lt;/div&gt;
+  &lt;auro-counter&gt;
     Counter 1
-  </auro-counter>
-  <auro-counter>
+  &lt;/auro-counter&gt;
+  &lt;auro-counter&gt;
     Counter 2
-  </auro-counter>
-</auro-counter-group>
-```
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1188,47 +1132,45 @@ This example demonstrates the use of all available counter group properties.
 All available slots for both components.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-slots.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/api-slots.html -->
-  <!-- Example of all available slots -->
-  <auro-counter-group isDropdown>
-    <!-- Group slots -->
-    <div slot="label">Group with all slots</div>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <div slot="helpText">Help text appears below the group</div>
-    <div slot="valueText">Custom value display</div>
-    <!-- Counter with all slots -->
-    <auro-counter>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/api-slots.html) -->
+<!-- The below content is automatically added from ./../apiExamples/api-slots.html -->
+<!-- Example of all available slots -->
+<auro-counter-group isDropdown>
+<!-- Group slots -->
+<div slot="label">Group with all slots</div>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<div slot="helpText">Help text appears below the group</div>
+<div slot="valueText">Custom value display</div>
+<!-- Counter with all slots -->
+<auro-counter>
       Default slot content
-      <span slot="ariaLabel.minus">Custom Minus Button Label</span>
-      <span slot="ariaLabel.plus">Custom Plus Button Label</span>
-      <span slot="description">Description slot content</span>
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<span slot="ariaLabel.minus">Custom Minus Button Label</span>
+<span slot="ariaLabel.plus">Custom Plus Button Label</span>
+<span slot="description">Description slot content</span>
+</auro-counter>
+</auro-counter-group>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/api-slots.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/api-slots.html -->
 
-```html
-<!-- Example of all available slots -->
-<auro-counter-group isDropdown>
-  <!-- Group slots -->
-  <div slot="label">Group with all slots</div>
-  <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-  <div slot="helpText">Help text appears below the group</div>
-  <div slot="valueText">Custom value display</div>
-  <!-- Counter with all slots -->
-  <auro-counter>
+<pre class="language-html"><code class="language-html">&lt;!-- Example of all available slots --&gt;
+&lt;auro-counter-group isDropdown&gt;
+  &lt;!-- Group slots --&gt;
+  &lt;div slot="label"&gt;Group with all slots&lt;/div&gt;
+  &lt;div slot="bib.fullscreen.headline"&gt;Group fullscreen label&lt;/div&gt;
+  &lt;div slot="helpText"&gt;Help text appears below the group&lt;/div&gt;
+  &lt;div slot="valueText"&gt;Custom value display&lt;/div&gt;
+  &lt;!-- Counter with all slots --&gt;
+  &lt;auro-counter&gt;
     Default slot content
-    <span slot="ariaLabel.minus">Custom Minus Button Label</span>
-    <span slot="ariaLabel.plus">Custom Plus Button Label</span>
-    <span slot="description">Description slot content</span>
-  </auro-counter>
-</auro-counter-group>
-```
+    &lt;span slot="ariaLabel.minus"&gt;Custom Minus Button Label&lt;/span&gt;
+    &lt;span slot="ariaLabel.plus"&gt;Custom Plus Button Label&lt;/span&gt;
+    &lt;span slot="description"&gt;Description slot content&lt;/span&gt;
+  &lt;/auro-counter&gt;
+&lt;/auro-counter-group&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1237,61 +1179,57 @@ All available slots for both components.
 The element used within an `auro-dialog`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
-  <div>
-    <auro-button id="counter-dialog-opener">Counter Group in Dialog</auro-button>
-    <auro-dialog id="counter-dialog">
-      <span slot="header">Counter Group in Dialog</span>
-      <div slot="content">
-        <auro-counter-group isDropdown>
-          <span slot="ariaLabel.bib.close">Close Popup</span>
-          <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-          <div slot="label">Counter Group</div>
-          <div slot="helpText">Select a value</div>
-          <auro-counter>Counter 1</auro-counter>
-          <auro-counter>Counter 2</auro-counter>
-        </auro-counter-group>
-      </div>
-    </auro-dialog>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
+<!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
+<div>
+<auro-button id="counter-dialog-opener">Counter Group in Dialog</auro-button>
+<auro-dialog id="counter-dialog">
+<span slot="header">Counter Group in Dialog</span>
+<div slot="content">
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<div slot="label">Counter Group</div>
+<div slot="helpText">Select a value</div>
+<auro-counter>Counter 1</auro-counter>
+<auro-counter>Counter 2</auro-counter>
+</auro-counter-group>
+</div>
+</auro-dialog>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
 
-```html
-<div>
-  <auro-button id="counter-dialog-opener">Counter Group in Dialog</auro-button>
-  <auro-dialog id="counter-dialog">
-    <span slot="header">Counter Group in Dialog</span>
-    <div slot="content">
-      <auro-counter-group isDropdown>
-        <span slot="ariaLabel.bib.close">Close Popup</span>
-        <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-        <div slot="label">Counter Group</div>
-        <div slot="helpText">Select a value</div>
-        <auro-counter>Counter 1</auro-counter>
-        <auro-counter>Counter 2</auro-counter>
-      </auro-counter-group>
-    </div>
-  </auro-dialog>
-</div>
-```
+<pre class="language-html"><code class="language-html">&lt;div&gt;
+  &lt;auro-button id="counter-dialog-opener"&gt;Counter Group in Dialog&lt;/auro-button&gt;
+  &lt;auro-dialog id="counter-dialog"&gt;
+    &lt;span slot="header"&gt;Counter Group in Dialog&lt;/span&gt;
+    &lt;div slot="content"&gt;
+      &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;Group fullscreen label&lt;/div&gt;
+        &lt;div slot="label"&gt;Counter Group&lt;/div&gt;
+        &lt;div slot="helpText"&gt;Select a value&lt;/div&gt;
+        &lt;auro-counter&gt;Counter 1&lt;/auro-counter&gt;
+        &lt;auro-counter&gt;Counter 2&lt;/auro-counter&gt;
+      &lt;/auro-counter-group&gt;
+    &lt;/div&gt;
+  &lt;/auro-dialog&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
 
-```js
-export function inDialogExample() {
-  document.querySelector("#counter-dialog-opener").addEventListener("click", () => {
+<pre class="language-js"><code class="language-js">export function inDialogExample() {
+  document.querySelector("#counter-dialog-opener").addEventListener("click", () =&gt; {
     const dialog = document.querySelector("#counter-dialog");
     dialog.open = true;
   });
-};
-```
+};</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1300,56 +1238,53 @@ export function inDialogExample() {
 The element used within an `auro-drawer`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
-  <div>
-    <auro-button id="counter-drawer-opener">Counter Group in Drawer</auro-button>
-    <auro-drawer id="counter-drawer">
-      <span slot="header">Counter Group in Drawer</span>
-      <div slot="content">
-        <auro-counter-group isDropdown>
-          <span slot="ariaLabel.bib.close">Close Popup</span>
-          <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-          <div slot="label">Counter Group</div>
-          <div slot="helpText">Select a value</div>
-          <auro-counter>Counter 1</auro-counter>
-          <auro-counter>Counter 2</auro-counter>
-        </auro-counter-group>
-      </div>
-    </auro-drawer>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+<div>
+<auro-button id="counter-drawer-opener">Counter Group in Drawer</auro-button>
+<auro-drawer id="counter-drawer">
+<span slot="header">Counter Group in Drawer</span>
+<div slot="content">
+<auro-counter-group isDropdown>
+<span slot="ariaLabel.bib.close">Close Popup</span>
+<div slot="bib.fullscreen.headline">Group fullscreen label</div>
+<div slot="label">Counter Group</div>
+<div slot="helpText">Select a value</div>
+<auro-counter>Counter 1</auro-counter>
+<auro-counter>Counter 2</auro-counter>
+</auro-counter-group>
+</div>
+</auro-drawer>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
 
-```html
-<div>
-  <auro-button id="counter-drawer-opener">Counter Group in Drawer</auro-button>
-  <auro-drawer id="counter-drawer">
-    <span slot="header">Counter Group in Drawer</span>
-    <div slot="content">
-      <auro-counter-group isDropdown>
-        <span slot="ariaLabel.bib.close">Close Popup</span>
-        <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-        <div slot="label">Counter Group</div>
-        <div slot="helpText">Select a value</div>
-        <auro-counter>Counter 1</auro-counter>
-        <auro-counter>Counter 2</auro-counter>
-      </auro-counter-group>
-    </div>
-  </auro-drawer>
-</div>
-```
+<pre class="language-html"><code class="language-html">&lt;div&gt;
+  &lt;auro-button id="counter-drawer-opener"&gt;Counter Group in Drawer&lt;/auro-button&gt;
+  &lt;auro-drawer id="counter-drawer"&gt;
+    &lt;span slot="header"&gt;Counter Group in Drawer&lt;/span&gt;
+    &lt;div slot="content"&gt;
+      &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;Group fullscreen label&lt;/div&gt;
+        &lt;div slot="label"&gt;Counter Group&lt;/div&gt;
+        &lt;div slot="helpText"&gt;Select a value&lt;/div&gt;
+        &lt;auro-counter&gt;Counter 1&lt;/auro-counter&gt;
+        &lt;auro-counter&gt;Counter 2&lt;/auro-counter&gt;
+      &lt;/auro-counter-group&gt;
+    &lt;/div&gt;
+  &lt;/auro-drawer&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
 
-```js
-export function inDrawerExample() {
-  document.querySelector("#counter-drawer-opener").addEventListener("click", () => {
+<pre class="language-js"><code class="language-js">export function inDrawerExample() {
+  document.querySelector("#counter-drawer-opener").addEventListener("click", () =&gt; {
     const drawer = document.querySelector("#counter-drawer");
     if (drawer.hasAttribute('open')) {
       drawer.removeAttribute('open');
@@ -1357,8 +1292,7 @@ export function inDrawerExample() {
       drawer.setAttribute('open', true);
     }
   });
-};
-```
+};</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1369,9 +1303,8 @@ The component may be restyled by changing the values of the following token(s).
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
-```scss
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
+<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 */
@@ -1382,7 +1315,7 @@ The component may be restyled by changing the values of the following token(s).
   --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});
@@ -1391,7 +1324,7 @@ The component may be restyled by changing the values of the following token(s).
   --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 */
@@ -1402,7 +1335,7 @@ The component may be restyled by changing the values of the following token(s).
   --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});
@@ -1410,6 +1343,5 @@ The component may be restyled by changing the values of the following token(s).
   --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 -->