@ebay/skin 18.1.0 → 18.2.0

package/src/modules/toggle-button-group.marko

@@ -0,0 +1,2408 @@
+<div id="toggle-button-group">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        The Toggle Button Group is a group of single or multi-select toggle buttons providing a visual emphasis on the available selectable choices.
+    </p>
+
+    <section
+        class="section-notice section-notice--attention"
+        role="region"
+        aria-label="Information"
+    >
+        <div class="section-notice__header">
+            <svg
+                class="icon icon--attention-filled-16"
+                height="16"
+                width="16"
+                role="img"
+                aria-label="Attention"
+            >
+                <icon-symbol name="attention-filled-16"/>
+            </svg>
+        </div>
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">
+                Intended Use of Toggle Button Group
+            </h3>
+            <p>
+                Toggle Buttons inside Toggle Button Group are intended to be input controls. They are ment to be used for users to make selection(s) that can be used for additional actions. For example, they can be used to storing the selection(s) and using${" "}
+                <span class="highlight">
+                    JavaScript
+                </span>
+                 to include the information in a form submission.
+            </p>
+
+            <p>
+                Toggle Buttons are NOT to be used for the purposes of navigation.
+            </p>
+        </div>
+    </section>
+
+    <p>
+        The component allows for single or multiple selections based on need. However, when using Skin by itself you will need to have your own${" "}
+        <span class="highlight">
+            JavaScript
+        </span>
+        ${" "}to establish those rules based on the specific needs for each implementation context.
+    </p>
+
+    <p>
+        Effort was taken in these docs to provide a good amount of helpful information. Since this component has an atomic piece (
+        <a href="#toggle-button">
+            Toggle Button
+        </a>
+        ), there may be some information crossover. Though efforts were taken to isolate the documentation for this parent component, at various touchpoints between the two components, there may be some redundancy. In other portions, where immediate information appears to be missing here, that information may reside in its child component. Please refer to${" "}
+        <a href="#toggle-button">
+            Toggle Button
+        </a>
+         docs in these situations.
+    </p>
+
+    <h3>Accessibility</h3>
+
+    <p>
+        The preferred implementation for accessibility includes an on-screen heading and the list associated with the heading (a). The second option is an off-screen heading with the same association (b). The third is to use the label directly on the list element (c).
+    </p>
+
+    <h4>On-screen Heading with Associated List (a - preferred)</h4>
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-a">
+                Select Shoe Size
+            </h5>
+            <div class="toggle-button-group">
+                <ul aria-labelledby="toggle-button-group-a">
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    8
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    8.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-a">Select Shoe Size</h5>
+<div class="toggle-button-group">
+    <ul aria-labelledby="toggle-button-group-a">
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">8</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">8.5</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+</highlight-code>
+
+    <h4>Off-screen Heading with Associated List (b)</h4>
+    <p>
+        This implementation is identical to option (a), except the heading is off-screen using the${" "}
+        <span class="highlight">
+            clipped
+        </span>
+         class.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-b" class="clipped">
+                Select Shoe Size
+            </h5>
+            <div class="toggle-button-group">
+                <ul aria-labelledby="toggle-button-group-b">
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    8
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    8.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-b" class="clipped">Select Shoe Size</h5>
+<div class="toggle-button-group">
+    <ul aria-labelledby="toggle-button-group-b">
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">8</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">8.5</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+</highlight-code>
+
+    <h3>Interaction Variations of Toggle Button Groups</h3>
+
+    <p>
+        There are three different types of toggle button groups that may be utilized based on interaction need.
+    </p>
+
+    <ol>
+        <li>
+            Multi-select: this is a freeform implementations in which the user can toggle and untoggle any button.
+        </li>
+        <li>
+            Single-select Optional: only one button can be toggled on at any given time and the user CAN untoggle that one button.
+        </li>
+        <li>
+            Single-select Required: only one button can be toggled on at any given time and the user CANNOT untoggle that one button.
+        </li>
+    </ol>
+
+    <p>
+        If you're using Skin outside of a
+        <span class="highlight">
+            JavaScript
+        </span>
+         framework, you will need to write your own
+        <span class="highlight">
+            js
+        </span>
+         code to accomplish these interactivity cases.
+    </p>
+
+    <p>
+        It's generally good practice to use delegated event handlers that allow you to set up a a single event handler for the group of buttons instead of on every button.
+    </p>
+    ${" "}The following examples use an HTML attribute to disitnguish the interaction variations. Using${" "}
+    <span class="highlight">
+        data-selection-type
+    </span>
+    . For the associated
+    <span class="highlight">
+        js
+    </span>
+     please see
+    <span class="highlight">
+        /docs/src/js/main.js
+    </span>
+    ${" "}(TOGGLE-BUTTON-GROUP section) for an example on how the implementation may be accomplished.${" "}
+
+    <h4>Multi-select</h4>
+    <p>
+        The Multi-select variation is the default so nothing additional needs to be specified in the markup.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-x1">
+                Select Multiple Sizes
+            </h5>
+            <div class="toggle-button-group">
+                <ul aria-labelledby="toggle-button-group-x1">
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    4.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-x1">Select Multiple Sizes</h5>
+<div class="toggle-button-group">
+    <ul aria-labelledby="toggle-button-group-x1">
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">4.5</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">5</span>
+                </span>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="toggle-button" aria-pressed="false">
+                <span class="toggle-button__content">
+                    <span class="toggle-button__title">5.5</span>
+                </span>
+            </button>
+        </li>
+    </ul>
+</div>
+</highlight-code>
+
+    <h4>Single-select Optional</h4>
+    <p>
+        In this example of the Single-select Optional variation,
+        <span class="highlight">
+            data-selection-type="single-optional"
+        </span>
+        ${" "}is used to split off the variation interactivity. This option allows for only one selection, so toggling additional buttons will simply switch the toggled button and retain only one toggled button.
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-x2">
+                Select Sizes
+            </h5>
+            <div
+                class="toggle-button-group"
+                data-selection-type="single-optional"
+            >
+                <ul aria-labelledby="toggle-button-group-x2">
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    4.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+    <h5 id="toggle-button-group-x2">Select Sizes</h5>
+    <div class="toggle-button-group" data-selection-type="single-optional">
+        <ul aria-labelledby="toggle-button-group-x2">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+    </highlight-code>
+
+    <h4>Single-select Required</h4>
+    <p>
+        In this example of the Single-select Optional variation,
+        <span class="highlight">
+            data-selection-type="single-required"
+        </span>
+        ${" "}is used to split off the variation interactivity. This option allows for only one selection. However, unlike the single-select optional variation, this variation enforces the required single selection so the toggled button cannot be untoggled.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-x3">
+                Select Sizes
+            </h5>
+            <div
+                class="toggle-button-group"
+                data-selection-type="single-required"
+            >
+                <ul aria-labelledby="toggle-button-group-x3">
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    4.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            class="toggle-button"
+                            aria-pressed="false"
+                        >
+                            <span class="toggle-button__content">
+                                <span class="toggle-button__title">
+                                    5.5
+                                </span>
+                            </span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+    <h5 id="toggle-button-group-x3">Select a size</h5>
+    <div class="toggle-button-group" data-selection-type="single-required">
+        <ul aria-labelledby="toggle-button-group-x3">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+    </highlight-code>
+
+    <h3>Responsive Out of the Box</h3>
+
+    <p>
+        Toggle Button Group is responsive out of the box. The buttons will responsively shrink and stretch the specific type of buttons inside and attempt to fit the buttons nicely within the container at any and all screen sizes.
+    </p>
+
+    <p>
+        We use
+        <span class="highlight">
+            display: grid
+        </span>
+        ${" "}to create a predefined allotted number of button slots per breakpoint. We also use container queries to modify how many slots should be available per breakpoint. This allows buttons to shrink/stretch the predefined number of buttons at each breakpoint with a fallback to media queries for unsupported browsers.
+    </p>
+
+    <p>
+        The responsive rules around how many toggle buttons appear on a single line before wrapping into a new line have all been predefined and baked into the component, so developers don't need to provide anything else to have an optimal responsive toggle button layout at various screen sizes.
+    </p>
+
+    <p>
+        In the demo below, drag the range to see the responsive rules in action and how the fluid Toggle Buttons work.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner toggle-button-group-responsive-demo">
+            <p>
+                <label
+                    for="toggle-button-group-breakpoints-range-1"
+                    style="font-weight: bold;"
+                >
+                    Modify Container Width
+                </label>
+                <div style="display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--color-stroke-default); padding: 8px; border-radius: 8px;">
+                    <input
+                        id="toggle-button-group-breakpoints-range-1"
+                        class="toggle-button-group-breakpoints-range"
+                        type="range"
+                        name="breakpoints"
+                        min="320"
+                        max="1280"
+                        value="320"
+                    >
+                    <output
+                        id="toggle-button-group-breakpoints-display-1"
+                        class="toggle-button-group-breakpoints-output"
+                        style="font-weight: bold;"
+                    >
+                        320
+                    </output>
+                </div>
+            </p>
+            <h5 id="toggle-button-group-c">
+                Select Sizes
+            </h5>
+            <div
+                id="toggle-button-group-breakpoints-container-1"
+                class="toggle-button-group-breakpoints-container"
+                style="width: 320px; border: 1px dashed orange;"
+            >
+                <div class="toggle-button-group">
+                    <ul aria-labelledby="toggle-button-group-c">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        4.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        7
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        7.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        8
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        8.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-c1">Select Sizes</h5>
+<div style="width: 500px; border: 1px dashed orange;">
+    <div class="toggle-button-group">
+        <ul aria-labelledby="toggle-button-group-c1">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3>Exception Cases for Preferred Number of Toggle Buttons Per Line</h3>
+
+    <p>
+        The buttons inside the Toggle Button Group are automatically responsive and have predefined rules around how many Toggle Buttons will display on a line before wrapping to the next line. However, on some rare occasions, developers may need to revise those rules based on how a Toggle Button Group works in their specific use case. For example, when the number of buttons is deterministic and known. In those instances, using various attributes mapped to each breakpoint will allow the rules to be honored by the component. At those specific breakpoints, the number of buttons specificed will be displayed.
+    </p>
+
+    <p>
+        Here's a specific example. Suppose we know we're going to have 6 buttons total and we'd like to have perfect visual balance in the UI. We may add the following html attributes/modifiers to${" "}
+        <span class="highlight">
+            .toggle-button-group
+        </span>
+         to achieve that:
+    </p>
+
+    <ul>
+        <li>
+            <span class="highlight">
+                data-columns-xs="2"
+            </span>
+            ${" "}to force 2 toggle buttons on the same line so we'd have 3 balanced lines of buttons at the${" "}
+            <span class="highlight">
+                XS
+            </span>
+             breakpoint or at
+            <span class="highlight">
+                320px
+            </span>
+            + width.
+        </li>
+        <li>
+            <span class="highlight">
+                data-columns-sm="3"
+            </span>
+            ${" "}to force 3 toggle buttons on the same line so we'd have 2 balanced lines of buttons at the${" "}
+            <span class="highlight">
+                SM
+            </span>
+             breakpoint or at
+            <span class="highlight">
+                512px
+            </span>
+            + width.
+        </li>
+        <li>
+            <span class="highlight">
+                data-columns-md="6"
+            </span>
+             to force all 6 toggle buttons on the same line at the
+            <span class="highlight">
+                MD
+            </span>
+             breakpoint or at
+            <span class="highlight">
+                768px
+            </span>
+            + width.
+        </li>
+        <li>
+            <span class="highlight">
+                data-columns-xl="8"
+            </span>
+             to force all 8 toggle buttons on the same line at the
+            <span class="highlight">
+                XL
+            </span>
+             breakpoint or at
+            <span class="highlight">
+                1280px
+            </span>
+            + width.
+        </li>
+    </ul>
+
+    <p>
+        Here's that use case in action. Drag the range to see the effects of the attribute settings at various container widths.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner toggle-button-group-responsive-demo">
+            <p>
+                <label
+                    for="toggle-button-group-breakpoints-range-2"
+                    style="font-weight: bold;"
+                >
+                    Modify Container Width
+                </label>
+                <div style="display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--color-stroke-default); padding: 8px; border-radius: 8px;">
+                    <input
+                        id="toggle-button-group-breakpoints-range-2"
+                        class="toggle-button-group-breakpoints-range"
+                        type="range"
+                        name="breakpoints2"
+                        min="320"
+                        max="1280"
+                        value="320"
+                    >
+                    <output
+                        id="toggle-button-group-breakpoints-display-2"
+                        class="toggle-button-group-breakpoints-output"
+                        style="font-weight: bold;"
+                    >
+                        320
+                    </output>
+                </div>
+            </p>
+            <h5 id="toggle-button-group-c">
+                Select Sizes
+            </h5>
+            <div
+                id="toggle-button-group-breakpoints-container-2"
+                class="toggle-button-group-breakpoints-container"
+                style="width: 320px; border: 1px dashed orange;"
+            >
+                <div
+                    class="toggle-button-group"
+                    data-columns-xs="2"
+                    data-columns-sm="3"
+                    data-columns-md="6"
+                    data-columns-xl="8"
+                >
+                    <ul aria-labelledby="toggle-button-group-c">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        4.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        7
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-c">Select Sizes</h5>
+<div style="width: 500px; border: 1px dashed orange;">
+    <div class="toggle-button-group" data-columns-xs="2" data-columns-sm="3" data-columns-md="6" data-columns-xl="8">
+        <ul aria-labelledby="toggle-button-group-c">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3>Layouts</h3>
+
+    <p>
+        There are various layouts that can be used based on the specific needs at implementation. The implied theme (needs no modifier), is the minimal layout. For more information about types of layouts, refer to the${" "}
+        <a href="#toggle-button">
+            Toggle Button
+        </a>
+         component. The examples below will highlight various layouts.
+    </p>
+
+    <p>
+        A toggle button group can have one of three different layouts: minimal (default), list or gallery.
+    </p>
+
+    <section
+        class="section-notice section-notice--information"
+        role="region"
+        aria-label="Information"
+    >
+        <div class="section-notice__header">
+            <svg
+                class="icon icon--16"
+                height="16"
+                width="16"
+                role="img"
+                aria-label="Information"
+            >
+                <icon-symbol name="information-filled-16"/>
+            </svg>
+        </div>
+        <div class="section-notice__main">
+            <h3 class="section-notice__title">
+                Layout Modifiers
+            </h3>
+            <p>
+                Toggle Button Group has top-level modifiers that will apply to the Toggle Buttons inside. When using Toggle Buttons inside Toggle Button Group make sure you do NOT specify each Toggle Button layout modifier. Instead, top-level layout modifiers will be sufficient to create the layout you want.
+            </p>
+        </div>
+    </section>
+
+    <h3>Minimal Layout (default)</h3>
+
+    <p>
+        The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.
+    </p>
+
+    <p>
+        <strong>NOTE:</strong>
+         All toggle button examples utilize JavaScript to toggle the
+        <span class="highlight">
+            aria-pressed
+        </span>
+         state of the button.
+    </p>
+
+    <p>
+        In this example, the container housing the Toggle Button Group is artificially limited to${" "}
+        <span class="highlight">
+            500px
+        </span>
+        ${" "}to demonstrate how the buttons will wrap after the specific columns (in this case, 3). Feel free to reduce/expand the container width in dev console to see how the columns will react.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-e">
+                Select Sizes
+            </h5>
+            <div style="width: 500px; border: 1px dashed orange;">
+                <div class="toggle-button-group">
+                    <ul aria-labelledby="toggle-button-group-e">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        4.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        5.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        6.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        7
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        7.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        8
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        8.5
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-e">Select Sizes</h5>
+<div style="width: 500px; border: 1px dashed orange;">
+    <div class="toggle-button-group">
+        <ul aria-labelledby="toggle-button-group-e">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">4.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">5.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">6.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">7.5</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">8.5</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3>List Layout</h3>
+
+    <p>
+        List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.
+    </p>
+
+    <p>
+        You may use this layout by adding the
+        <span class="highlight">
+            toggle-button-group--list-layout
+        </span>
+         modifier to the toggle button group.
+    </p>
+
+    <h4>List Layout Toggle Button Group with Title</h4>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-f">
+                Text Options
+            </h5>
+            <div style="width: 750px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--list-layout">
+                    <ul aria-labelledby="toggle-button-group-f">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Button 1
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Button 2
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Button 3
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-f">Text Options</h5>
+<div style="width: 750px; border: 1px dashed orange;">
+    <div aria-labelledby="toggle-button-group-f" class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-labelledby="toggle-button-group-f">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Button 1</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Button 2</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Button 3</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>
+        List Layout Toggle Button Group with Subtitles (multiple buttons toggled on)
+    </h4>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-g">
+                Text Options
+            </h5>
+            <div style="width: 750px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--list-layout">
+                    <ul aria-labelledby="toggle-button-group-g">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Title 1
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Text Subtitle 1
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Title 2
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Text Subtitle 2
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Text Title 3
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Text Subtitle 3
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-g">Text Options</h5>
+<div style="width: 750px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-labelledby="toggle-button-group-g">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Title 1</span>
+                        <span class="toggle-button__subtitle">Text Subtitle 1</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Title 2</span>
+                        <span class="toggle-button__subtitle">Text Subtitle 2</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Text Title 3</span>
+                        <span class="toggle-button__subtitle">Text Subtitle 3</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>List Layout Toggle Button Group with Icons</h4>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-h">
+                Select Payment Option
+            </h5>
+            <div style="width: 800px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--list-layout">
+                    <ul aria-labelledby="toggle-button-group-h">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--visa-32-colored"
+                                        height="3"
+                                        width="3"
+                                    >
+                                        <icon-symbol
+                                            name="visa-32-colored"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Image Button Title 1
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Image Button Subtitle 1
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--paypal-32-colored"
+                                        height="3"
+                                        width="3"
+                                    >
+                                        <icon-symbol
+                                            name="paypal-32-colored"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Image Button Title 2
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Image Button Subtitle 2
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--mastercard-32-colored"
+                                        height="3"
+                                        width="3"
+                                    >
+                                        <icon-symbol
+                                            name="mastercard-32-colored"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Image Button Title 3
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Image Button Subtitle 3
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-h">Select Payment Option</h5>
+<div style="width: 800px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-labelledby="toggle-button-group-h">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--visa-32-colored" height="3" width="3">
+                            <use href="static/icons.svg#icon-visa-32-colored"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Image Button Title 1</span>
+                        <span class="toggle-button__subtitle">Image Button Subtitle 1</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--paypal-32-colored" height="3" width="3">
+                            <use href="static/icons.svg#icon-paypal-32-colored"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Image Button Title 2</span>
+                        <span class="toggle-button__subtitle">Image Button Subtitle 2</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="3" width="3">
+                            <use href="static/icons.svg#icon-mastercard-32-colored"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Image Button Title 3</span>
+                        <span class="toggle-button__subtitle">Image Button Subtitle 3</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>List Layout Toggle Button Group with Images</h4>
+
+    <p>
+        To add an image to a toggle button, you can use the
+        <span class="highlight">
+            toggle-button__image-container
+        </span>
+         block using an
+        <span class="highlight">
+            &lt;img&gt;
+        </span>
+         or as a
+        <span class="highlight">
+            css
+        </span>
+         background image.
+    </p>
+
+    <h5 id="toggle-button-group-i">
+        Select Payment Option
+    </h5>
+    <div style="width: 800px; border: 1px dashed orange;">
+        <div class="toggle-button-group toggle-button-group--list-layout">
+            <ul aria-labelledby="toggle-button-group-i">
+                <li>
+                    <button
+                        type="button toggle-button--list-layout"
+                        class="toggle-button"
+                        aria-pressed="false"
+                    >
+                        <span class="toggle-button__image-container">
+                            <span class="toggle-button__image">
+                                <img
+                                    src="src/routes/static/img/tb-profile-pic.jpg"
+                                    alt=""
+                                >
+                            </span>
+                        </span>
+                        <span class="toggle-button__content">
+                            <span class="toggle-button__title">
+                                Title
+                            </span>
+                            <span class="toggle-button__subtitle">
+                                Subtitle
+                            </span>
+                        </span>
+                    </button>
+                </li>
+
+                <li>
+                    <button
+                        type="button toggle-button--list-layout"
+                        class="toggle-button"
+                        aria-pressed="false"
+                    >
+                        <span class="toggle-button__image-container">
+                            <span class="toggle-button__image">
+                                <img
+                                    src="src/routes/static/img/tb-profile-pic.jpg"
+                                    alt=""
+                                >
+                            </span>
+                        </span>
+                        <span class="toggle-button__content">
+                            <span class="toggle-button__title">
+                                Title
+                            </span>
+                            <span class="toggle-button__subtitle">
+                                Subtitle
+                            </span>
+                        </span>
+                    </button>
+                </li>
+
+                <li>
+                    <button
+                        type="button toggle-button--list-layout"
+                        class="toggle-button"
+                        aria-pressed="false"
+                    >
+                        <span class="toggle-button__image-container">
+                            <span class="toggle-button__image">
+                                <img
+                                    src="src/routes/static/img/tb-profile-pic.jpg"
+                                    alt=""
+                                >
+                            </span>
+                        </span>
+                        <span class="toggle-button__content">
+                            <span class="toggle-button__title">
+                                Title
+                            </span>
+                            <span class="toggle-button__subtitle">
+                                Subtitle
+                            </span>
+                        </span>
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-i">Select Payment Option</h5>
+<div style="width: 800px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-labelledby="toggle-button-group-i">
+            <li>
+                <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+
+            <li>
+                <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+
+            <li>
+                <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>List Layout Toggle Button Group with CSS Images</h4>
+
+    <h5 id="toggle-button-group-j">
+        Select Payment Option
+    </h5>
+    <div style="width: 800px; border: 1px dashed orange;">
+        <div class="toggle-button-group toggle-button-group--list-layout">
+            <ul aria-labelledby="toggle-button-group-j">
+                <li>
+                    <button
+                        type="button toggle-button--list-layout"
+                        class="toggle-button"
+                        aria-pressed="false"
+                    >
+                        <span class="toggle-button__image-container">
+                            <span
+                                class="toggle-button__image"
+                                style={
+                                    'background-image': "url('src/routes/static/img/tb-profile-pic.jpg')",
+                                    'background-repeat': 'no-repeat',
+                                    'background-position': 'center',
+                                     'background-size': "contain"
+                                }
+                            />
+                        </span>
+                        <span class="toggle-button__content">
+                            <span class="toggle-button__title">
+                                CSS Image
+                            </span>
+                            <span class="toggle-button__subtitle">
+                                Background: Contain
+                            </span>
+                        </span>
+                    </button>
+                </li>
+
+                <li>
+                    <button
+                        type="button toggle-button--list-layout"
+                        class="toggle-button"
+                        aria-pressed="false"
+                    >
+                        <span class="toggle-button__image-container">
+                            <span
+                                class="toggle-button__image"
+                                style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;"
+                            />
+                        </span>
+                        <span class="toggle-button__content">
+                            <span class="toggle-button__title">
+                                CSS Image
+                            </span>
+                            <span class="toggle-button__subtitle">
+                                Background: Cover
+                            </span>
+                        </span>
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-j">Select Payment Option</h5>
+<div style="width: 800px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--list-layout">
+        <ul aria-labelledby="toggle-button-group-j">
+            <li>
+                <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">CSS Image</span>
+                        <span class="toggle-button__subtitle">Background: Contain</span>
+                    </span>
+                </button>
+            </li>
+
+            <li>
+                <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">CSS Image</span>
+                        <span class="toggle-button__subtitle">Background: Cover</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3>Gallery Layout</h3>
+
+    <p>
+        Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.
+    </p>
+
+    <p>
+        You may use this layout by adding the
+        <span class="highlight">
+            toggle-button-group--gallery-layout
+        </span>
+         modifier to the toggle button group.
+    </p>
+
+    <h4>Gallery Layout Toggle Button Group with Images</h4>
+
+    <p>
+        The image used in these buttons will shrink/grow responsively in width and height based on the overall button width being respectful of their boundary limitations. Where those boundaries are in danger of being crossed, the layout will wrap accordingly.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-k">
+                Selection Options
+            </h5>
+            <div style="width: 600px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--gallery-layout">
+                    <ul aria-labelledby="toggle-button-group-k">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span class="toggle-button__image">
+                                        <img
+                                            src="src/routes/static/img/tb-profile-pic.jpg"
+                                            alt=""
+                                        >
+                                    </span>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        <span>Image Button</span>
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Subtitle
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span class="toggle-button__image">
+                                        <img
+                                            src="src/routes/static/img/tb-profile-pic.jpg"
+                                            alt=""
+                                        >
+                                    </span>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        <span>Image Button</span>
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Subtitle
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span class="toggle-button__image">
+                                        <img
+                                            src="src/routes/static/img/tb-profile-pic.jpg"
+                                            alt=""
+                                        >
+                                    </span>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        <span>Image Button</span>
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Subtitle
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-k">Selection Options</h5>
+<div style="width: 600px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--gallery-layout">
+        <ul aria-labelledby="toggle-button-group-k">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">
+                            <span>Image Button</span>
+                        </span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">
+                            <span>Image Button</span>
+                        </span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image">
+                            <img src="src/routes/static/img/tb-profile-pic.jpg" alt="">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">
+                            <span>Image Button</span>
+                        </span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>Gallery Layout Toggle Button Group with CSS Images</h4>
+
+    <p>
+        Besides using an
+        <span class="highlight">
+            &lt;img&gt;
+        </span>
+        , you may also use CSS images that can provide more flexibility in filling more of the space reserved for images.
+    </p>
+
+    <p>
+        These images will change in size responsively both horizontally and vertically based on the size of the button itself, available space allowed by the container and their minimum and maximum size limitations.
+    </p>
+
+    <p>
+        The examples below have various different implementations of CSS images. The first is a CSS Profile Image button with background-size: contain that will display the image as is and fit the entire image in the container. The second is a CSS Profile Image button with${" "}
+        <span class="highlight">
+            background-size: cover
+        </span>
+        ${" "}that will display the image to fill as much of the space of the container as possible clipping out the remaining portions of the image that fall outside. With that method, you can also provide guidance for fine-tuning the image positioning to move the focal point into the center of the container. In that example,${" "}
+        <span class="highlight">
+            background-position: center 15%;
+        </span>
+        ${" "}is used to move the focal point (person with camera) into the center of the frame.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-l">
+                Selection Options
+            </h5>
+            <div style="width: 700px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--gallery-layout">
+                    <ul aria-labelledby="toggle-button-group-l">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span
+                                        class="toggle-button__image"
+                                        style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;"
+                                    />
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        CSS Profile Image
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Background: Contain
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span
+                                        class="toggle-button__image"
+                                        style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;"
+                                    />
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        CSS Profile Image
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Background: Cover
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__image-container">
+                                    <span
+                                        class="toggle-button__image"
+                                        style="background-image: url('src/routes/static/img/tb-landscape-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;"
+                                    />
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        CSS Landscape Image
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Background: Cover
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-l">Selection Options</h5>
+<div style="width: 700px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--gallery-layout">
+        <ul aria-labelledby="toggle-button-group-l">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">CSS Profile Image</span>
+                        <span class="toggle-button__subtitle">Background: Contain</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url('src/routes/static/img/tb-profile-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">CSS Profile Image</span>
+                        <span class="toggle-button__subtitle">Background: Cover</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url('src/routes/static/img/tb-landscape-pic.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">CSS Landscape Image</span>
+                        <span class="toggle-button__subtitle">Background: Cover</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+
+    <h4>Gallery Layout Toggle Button Group with Icons</h4>
+
+    <p>
+        Typically, one would use either all image buttons or all icon buttons in a Toggle Button Group.
+    </p>
+    <p>
+        To add an icon to a toggle button, you can use the
+        <span class="highlight">
+            toggle-button__icon
+        </span>
+         block.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <h5 id="toggle-button-group-m">
+                Selection Options
+            </h5>
+            <div style="width: 750px; border: 1px dashed orange;">
+                <div class="toggle-button-group toggle-button-group--gallery-layout">
+                    <ul aria-labelledby="toggle-button-group-m">
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--image-64"
+                                        height="64"
+                                        width="64"
+                                    >
+                                        <icon-symbol
+                                            name="image-64"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Gallery Title 1
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Gallery Subtitle 1
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="true"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--credit-card-64"
+                                        height="64"
+                                        width="64"
+                                    >
+                                        <icon-symbol
+                                            name="credit-card-64"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Gallery Title 2
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Gallery Subtitle 2
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                        <li>
+                            <button
+                                type="button"
+                                class="toggle-button"
+                                aria-pressed="false"
+                            >
+                                <span class="toggle-button__icon">
+                                    <svg
+                                        aria-hidden="true"
+                                        class="icon icon--bank-64"
+                                        height="64"
+                                        width="64"
+                                    >
+                                        <icon-symbol
+                                            name="bank-64"
+                                            prefix="icon"
+                                        />
+                                    </svg>
+                                </span>
+                                <span class="toggle-button__content">
+                                    <span class="toggle-button__title">
+                                        Gallery Title 3
+                                    </span>
+                                    <span class="toggle-button__subtitle">
+                                        Gallery Subtitle 3
+                                    </span>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <highlight-code
+        type="html"
+        >
+<h5 id="toggle-button-group-m">Selection Options</h5>
+<div style="width: 750px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--gallery-layout">
+        <ul aria-labelledby="toggle-button-group-m">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--image-64" height="64" width="64">
+                            <use href="static/icons.svg#icon-image-64"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Title 1</span>
+                        <span class="toggle-button__subtitle">Gallery Subtitle 1</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="true">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--credit-card-64" height="64" width="64">
+                            <use href="static/icons.svg#icon-credit-card-64"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Title 2</span>
+                        <span class="toggle-button__subtitle">Gallery Subtitle 2</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__icon">
+                        <svg aria-hidden="true" class="icon icon--bank-64" height="64" width="64">
+                            <use href="static/icons.svg#icon-bank-64"></use>
+                        </svg>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Title 3</span>
+                        <span class="toggle-button__subtitle">Gallery Subtitle 3</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "toggle-button-group",
+        version: 1,
+    },
+    submodules: ["toggle-button"],
+};