From 16c794ef4968783ed30f13529c25bac285e43a39 Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Wed, 29 Jan 2020 16:41:53 -0500
Subject: [PATCH 01/17] Update pfe content set to accept custom container
 queries

---
 elements/pfe-content-set/demo/index.html        | 16 ++++++++--------
 elements/pfe-content-set/src/pfe-content-set.js | 14 +++++++++++---
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index 15a6d6ab4f..ec72af490b 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
-    
+
     <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
     <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
     <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
@@ -80,7 +80,7 @@ <h1>&lt;pfe-content-set&gt;</h1>
       <h2>On desktop, example below should render as accordion on a light theme:</h2>
       <h3>Container max: 500px</h3>
       <div style="max-width: 500px">
-        <pfe-content-set pfe-variant="wind">
+        <pfe-content-set pfe-variant="wind" pfe-breakpoint="600px">
           <h2 pfe-content-set--header>Heading 1</h2>
           <div pfe-content-set--panel>
             <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -100,7 +100,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
       <h2>On desktop, example below should render as accordion on a dark theme:</h2>
       <h3>Container max: 500px</h3>
       <div style="max-width: 500px">
-        <pfe-content-set pfe-variant="earth" on="dark">
+        <pfe-content-set pfe-variant="earth" on="dark" pfe-breakpoint="400">
           <h2 pfe-content-set--header>Heading 1</h2>
           <div pfe-content-set--panel>
             <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -118,7 +118,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
 
     <section class="dark-background on-dark border-bottom">
       <h2>On desktop, example below should render as tabs (wind style) on a dark background:</h2>
-      <pfe-content-set pfe-variant="wind" on="dark">
+      <pfe-content-set pfe-variant="wind" on="dark" pfe-breakpoint="1010">
         <h2 pfe-content-set--header>Heading 1</h2>
         <div pfe-content-set--panel>
           <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -136,7 +136,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
     <section class="border-bottom">
       <h2>On desktop, example below should render as tabs (wind style):</h2>
       <div>
-        <pfe-content-set pfe-variant="wind">
+        <pfe-content-set pfe-variant="wind" pfe-breakpoint="800">
           <h2 pfe-content-set--header>Heading 1</h2>
           <div pfe-content-set--panel>
             <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -154,7 +154,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
 
     <section class="border-bottom">
       <h2>On desktop, example below should render as tabs (earth style):</h2>
-      <pfe-content-set pfe-variant="earth">
+      <pfe-content-set pfe-variant="earth" pfe-breakpoint="1010">
         <h2 pfe-content-set--header>Heading 1</h2>
         <div pfe-content-set--panel>
           <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -171,7 +171,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
 
     <section class="dark-background on-dark border-bottom">
       <h2>On desktop, example below should render as tabs on a dark theme:</h2>
-      <pfe-content-set pfe-variant="earth" on="dark">
+      <pfe-content-set pfe-variant="earth" on="dark" pfe-breakpoint="910">
         <h2 pfe-content-set--header>Heading 1</h2>
         <div pfe-content-set--panel>
           <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
@@ -188,7 +188,7 @@ <h2 pfe-content-set--header>Heading 3</h2>
 
     <section class="border-bottom">
       <h2>On desktop, example below should render as vertical tabs (wind style):</h2>
-      <pfe-content-set vertical pfe-variant="wind">
+      <pfe-content-set vertical pfe-variant="wind" pfe-breakpoint="100">
         <h2 pfe-content-set--header>Heading 1</h2>
         <div pfe-content-set--panel>
           <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
diff --git a/elements/pfe-content-set/src/pfe-content-set.js b/elements/pfe-content-set/src/pfe-content-set.js
index 0badee8a21..5ff3b5dff5 100644
--- a/elements/pfe-content-set/src/pfe-content-set.js
+++ b/elements/pfe-content-set/src/pfe-content-set.js
@@ -24,9 +24,17 @@ class PfeContentSet extends PFElement {
   }
 
   get isTab() {
-    return this.parentNode
-      ? this.parentNode.offsetWidth > 768
-      : window.outerWidth > 768;
+    if (this.hasAttribute('pfe-breakpoint')) {
+      var breakpointValue = this.getAttributeNode('pfe-breakpoint').value;
+      breakpointValue = breakpointValue.replace(/\D/g,'');
+      return this.parentNode
+        ? this.parentNode.offsetWidth > breakpointValue
+        : window.outerWidth > breakpointValue;
+    } else {
+      return this.parentNode
+        ? this.parentNode.offsetWidth > 768
+        : window.outerWidth > 768;
+    }
   }
 
   constructor() {

From 4f795c8b8ef6665f1dddb2322a7bf7df9235cc1c Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Thu, 30 Jan 2020 10:17:09 -0500
Subject: [PATCH 02/17] cleanup JS

---
 elements/pfe-content-set/src/pfe-content-set.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/elements/pfe-content-set/src/pfe-content-set.js b/elements/pfe-content-set/src/pfe-content-set.js
index 5ff3b5dff5..525e53224d 100644
--- a/elements/pfe-content-set/src/pfe-content-set.js
+++ b/elements/pfe-content-set/src/pfe-content-set.js
@@ -24,17 +24,16 @@ class PfeContentSet extends PFElement {
   }
 
   get isTab() {
+    var breakpointValue;
     if (this.hasAttribute('pfe-breakpoint')) {
-      var breakpointValue = this.getAttributeNode('pfe-breakpoint').value;
+      breakpointValue = this.getAttributeNode('pfe-breakpoint').value;
       breakpointValue = breakpointValue.replace(/\D/g,'');
-      return this.parentNode
-        ? this.parentNode.offsetWidth > breakpointValue
-        : window.outerWidth > breakpointValue;
     } else {
-      return this.parentNode
-        ? this.parentNode.offsetWidth > 768
-        : window.outerWidth > 768;
+      breakpointValue = 768;
     }
+    return this.parentNode
+      ? this.parentNode.offsetWidth > breakpointValue
+      : window.outerWidth > breakpointValue;
   }
 
   constructor() {

From e33e3a419e071fcd16f9b4fdf6abe8915fb13322 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 13:30:14 -0500
Subject: [PATCH 03/17] Update default breakpoint

Per allotted content area within pfe-band on tablets, which is 704px
---
 elements/pfe-content-set/src/pfe-content-set.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pfe-content-set/src/pfe-content-set.js b/elements/pfe-content-set/src/pfe-content-set.js
index 525e53224d..231a9959df 100644
--- a/elements/pfe-content-set/src/pfe-content-set.js
+++ b/elements/pfe-content-set/src/pfe-content-set.js
@@ -29,7 +29,7 @@ class PfeContentSet extends PFElement {
       breakpointValue = this.getAttributeNode('pfe-breakpoint').value;
       breakpointValue = breakpointValue.replace(/\D/g,'');
     } else {
-      breakpointValue = 768;
+      breakpointValue = 700;
     }
     return this.parentNode
       ? this.parentNode.offsetWidth > breakpointValue

From 0c8f88f87e21764073fdae32cebf69904926d3c6 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 14:57:08 -0500
Subject: [PATCH 04/17] Tidy up the demo file

---
 elements/pfe-content-set/demo/index.html | 643 ++++++++++++-----------
 1 file changed, 344 insertions(+), 299 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index ec72af490b..0179a382e9 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -1,328 +1,373 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>PatternFly Element | pfe-content-set Demo</title>
-    <link rel="stylesheet" href="https://overpass-30e2.kxcdn.com/overpass.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
-    <title>PatternFly Element | pfe-content-set Demo</title>
-
-    <!-- Stylesheets for testing light DOM styles.
+
+<head>
+  <meta charset="utf-8">
+  <title>PatternFly Element | pfe-content-set Demo</title>
+  <link rel="stylesheet" href="https://overpass-30e2.kxcdn.com/overpass.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+  <title>PatternFly Element | pfe-content-set Demo</title>
+
+  <!-- Stylesheets for testing light DOM styles.
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
 
-    <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
-    <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
-    <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
-
-    <noscript>
-      <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-    </noscript>
-
-    <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
-
-    <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
-    <script>
-      require([
-        "../dist/pfe-content-set.umd.js",
-        "../../pfe-cta/dist/pfe-cta.umd.js"
-      ])
-    </script>
-
-    <noscript>
-      <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-    </noscript>
-    <style>
-      .faux-container {
-        border: 1px dashed #ccc;
-        padding: 30px;
-      }
-      h2 {
-        font-size: 1.2em;
-        color: var(--pfe-broadcasted--text);
-      }
-      h3 {
-        font-size: 1.4em;
-        color: var(--pfe-broadcasted--text);
-      }
-      hr {
-        margin: 40px 10px;
-        border-color: transparent;
-        border-bottom-color: #ccc;
-      }
-
-      section {
-        padding: 2rem;
-      }
-
-      .dark-background {
-        background-color: #000;
-      }
-
-      .border-bottom {
-        border-bottom: 1px solid var(--pfe-broadcasted--text);
-      }
-    </style>
-  </head>
-  <body unresolved>
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
+
+  <noscript>
+    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
+  </noscript>
+
+  <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
+
+  <!-- uncomment the es5-adapter if you're using the umd version -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+  <script>
+    require([
+      "../dist/pfe-content-set.umd.js",
+      "../../pfe-cta/dist/pfe-cta.umd.js",
+      "../../pfe-band/dist/pfe-band.umd.js"
+    ])
+
+  </script>
+
+  <noscript>
+    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
+    <link href="https://static.redhat.com/libs/redhat/redhat-theme/latest/advanced-theme.css" rel="stylesheet">
+  </noscript>
+  <style>
+    .faux-container {
+      border: 1px dashed #ccc;
+      padding: 30px;
+      margin: 0 0 30px 30px;
+    }
+
+    hr {
+      margin: 40px 10px;
+      border-color: transparent;
+      border-bottom-color: #ccc;
+    }
+
+    code {
+      color: #d75511;
+      font-weight: 100;
+      text-transform: lowercase;
+    }
+
+    section {
+      padding: 2rem;
+    }
+
+    .dark-background {
+      background-color: #000;
+    }
+
+    .border-bottom {
+      border-bottom: 1px solid var(--pfe-broadcasted--text);
+    }
+
+    .intro {
+      margin: 30px;
+      max-width: 1000px;
+    }
+
+    .label {
+      font-size: 16px;
+      margin-bottom: 30px;
+      color: slategray;
+      font-family: Arial;
+    }
+
+    .build-a-panel button {
+      font-size: 16px;
+      padding: 10px 20px;
+      margin: 0 0 30px 60px;
+      height: 40px;
+      background: #d75511;
+      border: 0;
+      color: white;
+      float: right;
+    }
+
+  </style>
+</head>
+
+<body unresolved>
+  <div class="intro">
     <h1>&lt;pfe-content-set&gt;</h1>
+    <h3>This combo component will render the contents as either an <a href="#accordions">accordion</a> or a <a
+        href="#tabs">tab set</a> depending on the available space. The default breakpoint is 700px. If the size of the
+      pfe-content-set container is larger than 700px it will upgrade to <code>pfe-tabs</code>. If not, it will upgrade
+      to <code>pfe-accordion</code>.</h3>
+    <h3>It will also pass variants on to the upgraded component, such as <code>pfe-variant</code>.</h3>
+  </div>
+
+  <section class="faux-container" style="width: 600px">
+    <h4 class="label">Default pfe-content-set in a 600px container</h4>
 
-    <p>This component will render your content in either an <a href="#accordions">accordion</a> or a <a href="#tabs">tabset</a> depending on the available space.</p>
-    <p>Note: <em>On mobile ( &lt;768px ), all examples should render as an Accordion.</em></p>
-
-    <br>
-
-    <section>
-      <h2>On desktop, example below should render as accordion on a light theme:</h2>
-      <h3>Container max: 500px</h3>
-      <div style="max-width: 500px">
-        <pfe-content-set pfe-variant="wind" pfe-breakpoint="600px">
-          <h2 pfe-content-set--header>Heading 1</h2>
-          <div pfe-content-set--panel>
-            <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-            <pfe-cta>
-              <a href="https://redhat.com">Primary CTA</a>
-            </pfe-cta>
-          </div>
-          <h2 pfe-content-set--header>Heading 2</h2>
-          <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-          <h2 pfe-content-set--header>Heading 3</h2>
-          <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-        </pfe-content-set>
+    <pfe-content-set>
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
-    </section>
-
-    <section class="dark-background on-dark border-bottom">
-      <h2>On desktop, example below should render as accordion on a dark theme:</h2>
-      <h3>Container max: 500px</h3>
-      <div style="max-width: 500px">
-        <pfe-content-set pfe-variant="earth" on="dark" pfe-breakpoint="400">
-          <h2 pfe-content-set--header>Heading 1</h2>
-          <div pfe-content-set--panel>
-            <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-            <pfe-cta>
-              <a href="https://redhat.com">Primary CTA</a>
-            </pfe-cta>
-          </div>
-          <h2 pfe-content-set--header>Heading 2</h2>
-          <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-          <h2 pfe-content-set--header>Heading 3</h2>
-          <div pfe-content-set--panel>Content for heading 3. </div>
-        </pfe-content-set>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
+    </pfe-content-set>
+  </section>
+
+
+  <section class="faux-container" style="width: 800px">
+    <h4 class="label">Default pfe-content-set in a 800px container</h4>
+
+    <pfe-content-set>
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
-    </section>
-
-    <section class="dark-background on-dark border-bottom">
-      <h2>On desktop, example below should render as tabs (wind style) on a dark background:</h2>
-      <pfe-content-set pfe-variant="wind" on="dark" pfe-breakpoint="1010">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="border-bottom">
-      <h2>On desktop, example below should render as tabs (wind style):</h2>
-      <div>
-        <pfe-content-set pfe-variant="wind" pfe-breakpoint="800">
-          <h2 pfe-content-set--header>Heading 1</h2>
-          <div pfe-content-set--panel>
-            <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-            <pfe-cta>
-              <a href="https://redhat.com">Primary CTA</a>
-            </pfe-cta>
-          </div>
-          <h2 pfe-content-set--header>Heading 2</h2>
-          <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-          <h2 pfe-content-set--header>Heading 3</h2>
-          <div pfe-content-set--panel>Content for heading 3. </div>
-        </pfe-content-set>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
+    </pfe-content-set>
+  </section>
+
+  <section>
+    <h3>These next pfe-content-set examples have a custom attribute <code>pfe-breakpoint="500"</code>. The containers
+      are the same sizes as
+      above, 600px and 800px. However the pfe-content set should now upgrade to pfe-tabs in both instances.
+    </h3>
+  </section>
+  <section class="faux-container" style="width: 600px">
+    <h4 class="label">Default pfe-content-set in a 600px container</h4>
+
+    <pfe-content-set pfe-breakpoint="500">
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget
+          risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
-    </section>
-
-    <section class="border-bottom">
-      <h2>On desktop, example below should render as tabs (earth style):</h2>
-      <pfe-content-set pfe-variant="earth" pfe-breakpoint="1010">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="dark-background on-dark border-bottom">
-      <h2>On desktop, example below should render as tabs on a dark theme:</h2>
-      <pfe-content-set pfe-variant="earth" on="dark" pfe-breakpoint="910">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="border-bottom">
-      <h2>On desktop, example below should render as vertical tabs (wind style):</h2>
-      <pfe-content-set vertical pfe-variant="wind" pfe-breakpoint="100">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="dark-background on-dark border-bottom">
-      <h2>On desktop, example below should render as vertical tabs (wind style) on a dark background:</h2>
-      <pfe-content-set vertical pfe-variant="wind" on="dark">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="border-bottom">
-      <h2>On desktop, example below should render as vertical tabs (earth style):</h2>
-      <pfe-content-set vertical pfe-variant="earth">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section class="dark-background on-dark border-bottom">
-      <h2>On desktop, example below should render as vertical tabs (earth style):</h2>
-      <pfe-content-set vertical pfe-variant="earth" on="dark">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-        <h2 pfe-content-set--header>Heading 3</h2>
-        <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
-      </pfe-content-set>
-    </section>
-
-    <section>
-      <pfe-content-set pfe-variant="wind">
-        <h2 pfe-content-set--header>Heading 1</h2>
-        <div pfe-content-set--panel>
-          <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-          <pfe-cta>
-            <a href="https://redhat.com">Primary CTA</a>
-          </pfe-cta>
-        </div>
-        <h2 pfe-content-set--header>Heading 2</h2>
-        <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-      </pfe-content-set>
-    </section>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non
+        mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
+    </pfe-content-set>
+  </section>
 
-    <hr>
+  <section class="faux-container" style="width: 900px">
+    <h4 class="label">Default pfe-content-set in a 900px container</h4>
 
-    <h2>Align: center</h2>
-    <pfe-content-set pfe-align="center">
-      <h2 pfe-content-set--header>Heading 1</h2>
+    <pfe-content-set pfe-breakpoint="500">
+      <h4 pfe-content-set--header>Heading 1</h4>
       <div pfe-content-set--panel>
-        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
-        <div class="cta">
-          <a href="https://redhat.com">Primary CTA</a>
-        </div>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget
+          risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
       </div>
-      <h2 pfe-content-set--header>Heading 2</h2>
-      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</div>
-      <h2 pfe-content-set--header>Heading 3</h2>
-      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non
+        mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
     </pfe-content-set>
+  </section>
+
+
+  <section>
+    <h3>These pfe-content-set examples are inside a pfe-band. Notice that if you set the window to 768px wide, or
+      "tablet size", the
+      pfe-content-set will still become tabs, because of the default breakpoint.</h3>
+  </section>
 
-    <hr>
-    <h2>This content set's markup is incorrect.</h2>
+  <pfe-band pfe-color="light">
     <pfe-content-set>
-      <h2>Heading 1</h2>
-      <div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet
+          non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius
+          blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+        <pfe-cta>
+          <a href="https://redhat.com">Primary CTA</a>
+        </pfe-cta>
+      </div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam.
+        Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
       </div>
-      <h2>Heading 2</h2>
-      <div>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</div>
     </pfe-content-set>
+  </pfe-band>
+
+  <section>
+    <h3>Note: on a dark band, you must manually add the attribute <code>on=dark</code> to the pfe-content-set for now.</h3>
+  </section>
+  <pfe-band pfe-color="darkest">
 
-    <h2>Dynamically Add Headers and Panels</h2>
-    <pfe-content-set id="dynamic">
-      <h2 pfe-content-set--header>Heading 1</h2>
-      <div pfe-content-set--panel>Panel 1</div>
+    <pfe-content-set on="dark">
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+        <pfe-cta>
+          <a href="https://redhat.com">Primary CTA</a>
+        </pfe-cta>
+      </div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. </div>
+    </pfe-content-set>
+
+  </pfe-band>
+
+  <br />
+
+  <section>
+    <h3>Attributes: <code>vertical</code>, <code>pfe-variant</code> and <code>align</code></h3>
+  </section>
+  <section class="faux-container">
+    <h2 class="label">pfe-content set with attributes <code>vertical</code> and <code>pfe-variant="wind"</code></h2>
+    <pfe-content-set vertical pfe-variant="wind">
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+      </div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
     </pfe-content-set>
+  </section>
+
+
+  <section class="faux-container">
+    <h2 class="label">pfe-content set with attributes <code>vertical</code> and <code>pfe-variant="earth"</code></h2>
+    <pfe-content-set vertical pfe-variant="earth">
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+      </div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
+    </pfe-content-set>
+  </section>
+
+  <section class="faux-container">
+    <h2 class="label">pfe-content set with attribute <code>pfe-align="center"</code></h2>
+    <pfe-content-set pfe-align="center">
+      <h4 pfe-content-set--header>Heading 1</h4>
+      <div pfe-content-set--panel>
+        <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+        <div class="cta">
+          <a href="https://redhat.com">Primary CTA</a>
+        </div>
+      </div>
+      <h4 pfe-content-set--header>Heading 2</h4>
+      <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
+        porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+        mollis interdum.</div>
+      <h4 pfe-content-set--header>Heading 3</h4>
+      <div pfe-content-set--panel>Content for heading 3. Donec ullamcorper nulla non metus auctor fringilla. Donec
+        ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo
+        quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet
+        fermentum.</div>
+    </pfe-content-set>
+
+  </section>
+
+  <section>
+    <div class="build-a-panel">
+      <button id="addHeaderAndPanelBtn">Add Header &amp; Panel</button>
+      <h3>The pfe-content-set comes with a mutation observer so that you may dynamically add headers and panels.</h3>
+      <pfe-content-set id="dynamic">
+        <h4 pfe-content-set--header>Heading 1</h4>
+        <div pfe-content-set--panel>Panel 1</div>
+      </pfe-content-set>
+    </div>
+  </section>
+
+  <script>
+    var btn = document.querySelector("#addHeaderAndPanelBtn");
+    var pfeContentSet = document.querySelector("#dynamic");
 
-    <button id="addHeaderAndPanelBtn">Add Header &amp; Panel</button>
+    btn.addEventListener("click", function () {
+      var fragment = document.createDocumentFragment();
 
-    <script>
-      var btn = document.querySelector("#addHeaderAndPanelBtn");
-      var pfeContentSet = document.querySelector("#dynamic");
+      var header = document.createElement("h4");
+      header.setAttribute("pfe-content-set--header", true);
+      header.textContent = "New Heading";
 
-      btn.addEventListener("click", function () {
-        var fragment = document.createDocumentFragment();
+      var panel = document.createElement("div");
+      panel.setAttribute("pfe-content-set--panel", true);
+      panel.textContent = "New Panel";
 
-        var header = document.createElement("h2");
-        header.setAttribute("pfe-content-set--header", true);
-        header.textContent = "New Heading";
+      fragment.appendChild(header);
+      fragment.appendChild(panel);
+      pfeContentSet.appendChild(fragment);
+    });
 
-        var panel = document.createElement("div");
-        panel.setAttribute("pfe-content-set--panel", true);
-        panel.textContent = "New Panel";
+  </script>
+</body>
 
-        fragment.appendChild(header);
-        fragment.appendChild(panel);
-        pfeContentSet.appendChild(fragment);
-      });
-    </script>
-  </body>
 </html>

From 53f304da57c32cb574f7414dcd196f5080c2ebea Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 15:11:29 -0500
Subject: [PATCH 05/17] docs: tidy demo file

---
 elements/pfe-content-set/demo/index.html | 51 ++++++++++++++----------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index 0179a382e9..0239a00f10 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -41,12 +41,6 @@
     <link href="https://static.redhat.com/libs/redhat/redhat-theme/latest/advanced-theme.css" rel="stylesheet">
   </noscript>
   <style>
-    .faux-container {
-      border: 1px dashed #ccc;
-      padding: 30px;
-      margin: 0 0 30px 30px;
-    }
-
     hr {
       margin: 40px 10px;
       border-color: transparent;
@@ -63,17 +57,19 @@
       padding: 2rem;
     }
 
-    .dark-background {
-      background-color: #000;
+    section h1 {
+      font-size: 30px;
     }
-
-    .border-bottom {
-      border-bottom: 1px solid var(--pfe-broadcasted--text);
+    section h3 {
+      font-size: 20px;
+      max-width: 1000px;
     }
 
-    .intro {
-      margin: 30px;
-      max-width: 1000px;
+    .faux-container {
+      border: 1px dashed #ccc;
+      padding: 30px;
+      margin: 0 0 30px 30px;
+      max-width: 1200px;
     }
 
     .label {
@@ -98,14 +94,14 @@
 </head>
 
 <body unresolved>
-  <div class="intro">
+  <section>
     <h1>&lt;pfe-content-set&gt;</h1>
     <h3>This combo component will render the contents as either an <a href="#accordions">accordion</a> or a <a
         href="#tabs">tab set</a> depending on the available space. The default breakpoint is 700px. If the size of the
       pfe-content-set container is larger than 700px it will upgrade to <code>pfe-tabs</code>. If not, it will upgrade
       to <code>pfe-accordion</code>.</h3>
     <h3>It will also pass variants on to the upgraded component, such as <code>pfe-variant</code>.</h3>
-  </div>
+  </section>
 
   <section class="faux-container" style="width: 600px">
     <h4 class="label">Default pfe-content-set in a 600px container</h4>
@@ -153,8 +149,8 @@ <h4 pfe-content-set--header>Heading 3</h4>
   </section>
 
   <section>
-    <h3>These next pfe-content-set examples have a custom attribute <code>pfe-breakpoint="500"</code>. The containers
-      are the same sizes as
+    <h3>These next pfe-content-set examples have a custom attribute <code>pfe-breakpoint="500"</code>.
+      You can set the value with or without the <code>px</code> suffix.The containers are the same sizes as
       above, 600px and 800px. However the pfe-content set should now upgrade to pfe-tabs in both instances.
     </h3>
   </section>
@@ -239,7 +235,8 @@ <h4 pfe-content-set--header>Heading 3</h4>
   </pfe-band>
 
   <section>
-    <h3>Note: on a dark band, you must manually add the attribute <code>on=dark</code> to the pfe-content-set for now.</h3>
+    <h3>Note: on a dark band, you must manually add the attribute <code>on=dark</code> to the pfe-content-set for now.
+    </h3>
   </section>
   <pfe-band pfe-color="darkest">
 
@@ -297,7 +294,9 @@ <h4 pfe-content-set--header>Heading 1</h4>
       <div pfe-content-set--panel>
         <p>Content for heading 1. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit
           amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus
-          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod.</p>
+          varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Faucibus mollis
+          interdum. Maecenas sed diam eget risus varius blandit sit
+          amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
       </div>
       <h4 pfe-content-set--header>Heading 2</h4>
       <div pfe-content-set--panel>Content for heading 2. Sed posuere consectetur est at lobortis. Donec id elit non mi
@@ -336,13 +335,21 @@ <h4 pfe-content-set--header>Heading 3</h4>
 
   </section>
 
+
   <section>
+    <h3>The pfe-content-set comes with a mutation observer so that you may dynamically add headers and panels.</h3>
+  </section>
+
+  <section class="faux-container">
     <div class="build-a-panel">
       <button id="addHeaderAndPanelBtn">Add Header &amp; Panel</button>
-      <h3>The pfe-content-set comes with a mutation observer so that you may dynamically add headers and panels.</h3>
+      <h2 class="label">Click the button to see it in action!</code></h2>
+
       <pfe-content-set id="dynamic">
         <h4 pfe-content-set--header>Heading 1</h4>
-        <div pfe-content-set--panel>Panel 1</div>
+        <div pfe-content-set--panel>Panel 1. Donec id elit non mi
+          porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus
+          mollis interdum.</div>
       </pfe-content-set>
     </div>
   </section>

From 44130da8256f2fbd8e26eaa635849583d543aba6 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 15:26:17 -0500
Subject: [PATCH 06/17] chore! update content set schema and docs

---
 elements/pfe-content-set/README.md                | 6 ++++--
 elements/pfe-content-set/src/pfe-content-set.json | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/elements/pfe-content-set/README.md b/elements/pfe-content-set/README.md
index 52f415553f..f2d9501b8c 100644
--- a/elements/pfe-content-set/README.md
+++ b/elements/pfe-content-set/README.md
@@ -5,7 +5,7 @@
 
 `pfe-content-set` is a combo component, which brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information.
 
-Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width is less than 768px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered inside the `<pfe-tabs>` component.
+Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width is less than 700px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered within the `<pfe-tabs>` component.
 
 ## Dependencies
 
@@ -46,7 +46,9 @@ Each header must have an attribute of `pfe-content-set--header` and each panel m
 - `pfe-align="center"`
     - Accordion: No effect.
     - Tabs: Tabs are centered.
-
+- `pfe-breakpoint="500px`
+    - You may set a custom breakpoint at which the content set upgrade to tabs above that number and accordions below.
+    - The value can contain the `px` suffix or not
 
 
 ## Styling
diff --git a/elements/pfe-content-set/src/pfe-content-set.json b/elements/pfe-content-set/src/pfe-content-set.json
index 77dd626771..f2ab850e53 100644
--- a/elements/pfe-content-set/src/pfe-content-set.json
+++ b/elements/pfe-content-set/src/pfe-content-set.json
@@ -48,7 +48,7 @@
           "prefixed": true
         },
         "on": {
-          "title": "Context",
+          "title": "Context foo",
           "type": "string",
           "enum": [
             "light",
@@ -56,6 +56,11 @@
           ],
           "default": "light",
           "prefixed": false
+        },
+        "breakpoint": {
+          "title": "Custom breakpoint",
+          "type": "string",
+          "prefixed": true
         }
       },
       "required": ["orientation", "variant", "on"]

From 3300d803b489b2de2e9e35af77f38d1e0cda0d19 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 15:26:44 -0500
Subject: [PATCH 07/17] chore: remove test data

---
 elements/pfe-content-set/src/pfe-content-set.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pfe-content-set/src/pfe-content-set.json b/elements/pfe-content-set/src/pfe-content-set.json
index f2ab850e53..f270f82c55 100644
--- a/elements/pfe-content-set/src/pfe-content-set.json
+++ b/elements/pfe-content-set/src/pfe-content-set.json
@@ -48,7 +48,7 @@
           "prefixed": true
         },
         "on": {
-          "title": "Context foo",
+          "title": "Context",
           "type": "string",
           "enum": [
             "light",

From 4a513093e212fb5bbe95c9930d9b7be64b43ba98 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 5 Feb 2020 15:33:25 -0500
Subject: [PATCH 08/17] correct documentation

---
 elements/pfe-content-set/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pfe-content-set/README.md b/elements/pfe-content-set/README.md
index f2d9501b8c..eb0e05664c 100644
--- a/elements/pfe-content-set/README.md
+++ b/elements/pfe-content-set/README.md
@@ -5,7 +5,7 @@
 
 `pfe-content-set` is a combo component, which brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information.
 
-Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width is less than 700px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered within the `<pfe-tabs>` component.
+Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width of pfe-content-set is less than or equal to 700px, the component will render the content within the `<pfe-accordion>` component. If it is larger than this value, the content will be rendered within the `<pfe-tabs>` component.
 
 ## Dependencies
 

From f5c049d964af0e8b6b32bf3cf6cb3a476ab076a3 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Thu, 6 Feb 2020 11:14:12 -0500
Subject: [PATCH 09/17] update viewport tag and mobile margins on containers

---
 elements/pfe-content-set/demo/index.html | 9 +++++++--
 examples/index.html                      | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index 0239a00f10..24665b43f4 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>PatternFly Element | pfe-content-set Demo</title>
   <link rel="stylesheet" href="https://overpass-30e2.kxcdn.com/overpass.css" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
   <title>PatternFly Element | pfe-content-set Demo</title>
 
   <!-- Stylesheets for testing light DOM styles.
@@ -68,9 +68,14 @@
     .faux-container {
       border: 1px dashed #ccc;
       padding: 30px;
-      margin: 0 0 30px 30px;
+      margin: 0 10px 30px 10px;
       max-width: 1200px;
     }
+    @media (min-width: 768px) {
+        .faux-container {
+            margin: 0 30px 30px 30px;
+        }
+    }
 
     .label {
       font-size: 16px;
diff --git a/examples/index.html b/examples/index.html
index 35d4cb9eaf..78b8cdb3c1 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -59,6 +59,7 @@ <h1>Demo pages</h1>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-health-index/demo">pfe-health-index</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon/demo">pfe-icon</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></pfe-cta>
+				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-layouts/demo">pfe-layouts</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-markdown/demo">pfe-markdown</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-modal/demo">pfe-modal</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-navigation/demo">pfe-navigation</a></pfe-cta>

From 6528de8a0708815a1e86905eb68c3685fe5adc4e Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Fri, 7 Feb 2020 15:59:04 -0500
Subject: [PATCH 10/17] add Automated tests and update /demo/index.html so
 faux-container has a max-width not fixed width. This broke testing when you
 shrunk the window.

---
 elements/pfe-content-set/demo/index.html      |  8 ++---
 .../test/pfe-content-set_test.html            | 31 +++++++++++++++++++
 examples/index.html                           |  1 -
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index 24665b43f4..0fc84b5f2a 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -108,7 +108,7 @@ <h3>This combo component will render the contents as either an <a href="#accordi
     <h3>It will also pass variants on to the upgraded component, such as <code>pfe-variant</code>.</h3>
   </section>
 
-  <section class="faux-container" style="width: 600px">
+  <section class="faux-container" style="max-width: 600px">
     <h4 class="label">Default pfe-content-set in a 600px container</h4>
 
     <pfe-content-set>
@@ -131,7 +131,7 @@ <h4 pfe-content-set--header>Heading 3</h4>
   </section>
 
 
-  <section class="faux-container" style="width: 800px">
+  <section class="faux-container" style="max-width: 800px">
     <h4 class="label">Default pfe-content-set in a 800px container</h4>
 
     <pfe-content-set>
@@ -159,7 +159,7 @@ <h3>These next pfe-content-set examples have a custom attribute <code>pfe-breakp
       above, 600px and 800px. However the pfe-content set should now upgrade to pfe-tabs in both instances.
     </h3>
   </section>
-  <section class="faux-container" style="width: 600px">
+  <section class="faux-container" style="max-width: 600px">
     <h4 class="label">Default pfe-content-set in a 600px container</h4>
 
     <pfe-content-set pfe-breakpoint="500">
@@ -183,7 +183,7 @@ <h4 pfe-content-set--header>Heading 3</h4>
     </pfe-content-set>
   </section>
 
-  <section class="faux-container" style="width: 900px">
+  <section class="faux-container" style="max-width: 900px">
     <h4 class="label">Default pfe-content-set in a 900px container</h4>
 
     <pfe-content-set pfe-breakpoint="500">
diff --git a/elements/pfe-content-set/test/pfe-content-set_test.html b/elements/pfe-content-set/test/pfe-content-set_test.html
index ef6749e511..6b44c4d6f8 100644
--- a/elements/pfe-content-set/test/pfe-content-set_test.html
+++ b/elements/pfe-content-set/test/pfe-content-set_test.html
@@ -75,6 +75,21 @@ <h2 pfe-content-set--header>Heading 1</h2>
       <p pfe-content-set--panel>Panel 1</p>
     </pfe-content-set>
 
+    <div style="width: 500px">
+      <pfe-content-set id="accordionBreakpoint" pfe-breakpoint="550">
+        <h2 pfe-content-set--header>Heading 1</h2>
+        <p pfe-content-set--panel>Panel 1</p>
+      </pfe-content-set>
+    </div>
+
+
+    <div style="width: 600px">
+      <pfe-content-set id="tabsBreakpoint" pfe-breakpoint="550">
+        <h2 pfe-content-set--header>Heading 1</h2>
+        <p pfe-content-set--panel>Panel 1</p>
+      </pfe-content-set>
+    </div>
+
     <script>
       suite('<pfe-content-set>', () => {
         test('it should have the proper attributes for tabs', () => {
@@ -177,6 +192,22 @@ <h2 pfe-content-set--header>Heading 1</h2>
 
           assert.equal(alignValue, pfeTabAlignValue);
         });
+
+        test("it should put content into an accordion if the pfe-breakpoint attribute is present and greater than the width of pfe-content-set parent", () => {
+          const pfeContentSet = document.querySelector('#accordionBreakpoint');
+          const pfeAccordion = pfeContentSet.querySelector("pfe-accordion");
+
+          assert.isTrue(pfeContentSet.hasAttribute('pfe-breakpoint'));
+          assert.isNotNull(pfeAccordion);
+        });
+
+        test("it should put content into tabs if the pfe-breakpoint attribute is present and less than the width of pfe-content-set parent", () => {
+          const pfeContentSet = document.querySelector('#tabsBreakpoint');
+          const pfeTabs = pfeContentSet.querySelector("pfe-tabs");
+
+          assert.isTrue(pfeContentSet.hasAttribute('pfe-breakpoint'));
+          assert.isNotNull(pfeTabs);
+        });
       });
     </script>
   </body>
diff --git a/examples/index.html b/examples/index.html
index 78b8cdb3c1..35d4cb9eaf 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -59,7 +59,6 @@ <h1>Demo pages</h1>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-health-index/demo">pfe-health-index</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon/demo">pfe-icon</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></pfe-cta>
-				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-layouts/demo">pfe-layouts</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-markdown/demo">pfe-markdown</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-modal/demo">pfe-modal</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-navigation/demo">pfe-navigation</a></pfe-cta>

From b2c800b7d2dcdd0cb61d1867b50752399c3c643c Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Mon, 10 Feb 2020 09:26:43 -0500
Subject: [PATCH 11/17] change single quotes to double for consistency

---
 elements/pfe-content-set/src/pfe-content-set.js         | 6 +++---
 elements/pfe-content-set/test/pfe-content-set_test.html | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/elements/pfe-content-set/src/pfe-content-set.js b/elements/pfe-content-set/src/pfe-content-set.js
index 231a9959df..789cf999db 100644
--- a/elements/pfe-content-set/src/pfe-content-set.js
+++ b/elements/pfe-content-set/src/pfe-content-set.js
@@ -25,9 +25,9 @@ class PfeContentSet extends PFElement {
 
   get isTab() {
     var breakpointValue;
-    if (this.hasAttribute('pfe-breakpoint')) {
-      breakpointValue = this.getAttributeNode('pfe-breakpoint').value;
-      breakpointValue = breakpointValue.replace(/\D/g,'');
+    if (this.hasAttribute("pfe-breakpoint")) {
+      breakpointValue = this.getAttributeNode("pfe-breakpoint").value;
+      breakpointValue = breakpointValue.replace(/\D/g,"");
     } else {
       breakpointValue = 700;
     }
diff --git a/elements/pfe-content-set/test/pfe-content-set_test.html b/elements/pfe-content-set/test/pfe-content-set_test.html
index 6b44c4d6f8..1b0733a0d7 100644
--- a/elements/pfe-content-set/test/pfe-content-set_test.html
+++ b/elements/pfe-content-set/test/pfe-content-set_test.html
@@ -194,18 +194,18 @@ <h2 pfe-content-set--header>Heading 1</h2>
         });
 
         test("it should put content into an accordion if the pfe-breakpoint attribute is present and greater than the width of pfe-content-set parent", () => {
-          const pfeContentSet = document.querySelector('#accordionBreakpoint');
+          const pfeContentSet = document.querySelector("#accordionBreakpoint");
           const pfeAccordion = pfeContentSet.querySelector("pfe-accordion");
 
-          assert.isTrue(pfeContentSet.hasAttribute('pfe-breakpoint'));
+          assert.isTrue(pfeContentSet.hasAttribute("pfe-breakpoint"));
           assert.isNotNull(pfeAccordion);
         });
 
         test("it should put content into tabs if the pfe-breakpoint attribute is present and less than the width of pfe-content-set parent", () => {
-          const pfeContentSet = document.querySelector('#tabsBreakpoint');
+          const pfeContentSet = document.querySelector("#tabsBreakpoint");
           const pfeTabs = pfeContentSet.querySelector("pfe-tabs");
 
-          assert.isTrue(pfeContentSet.hasAttribute('pfe-breakpoint'));
+          assert.isTrue(pfeContentSet.hasAttribute("pfe-breakpoint"));
           assert.isNotNull(pfeTabs);
         });
       });

From f4f3928bc0d14d7127101c943a3ee50f751dde2a Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Mon, 10 Feb 2020 09:54:59 -0500
Subject: [PATCH 12/17] add changelog

---
 CHANGELOG-prerelease.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG-prerelease.md b/CHANGELOG-prerelease.md
index 5bfdd2e353..49d6fe6f6c 100644
--- a/CHANGELOG-prerelease.md
+++ b/CHANGELOG-prerelease.md
@@ -2,9 +2,9 @@
 
 Tag: [v1.0.0-prerelease.37](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.37)
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) Update pfe-content-set to accept custom container queries
 - [6a41811](https://github.com/patternfly/patternfly-elements/commit/6a418112668ba580918ac4a8b4b54e8df05c1155) fix: reference error when slot is missing in pfe-navigation
-- [ff859a5](https://github.com/patternfly/patternfly-elements/commit/ff859a5c2b62ae24225f0031f69b5bc050c59470) fix: accordion accessibility improvements; aria-roles corrected
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-nav & pfe-cta hotfixes
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: accordion accessibility improvements; aria-roles corrected
 
 ## Prerelease 36 ( 2020-01-20 )
 

From 3820359282e7971817f36d9fb62b9c01ee51a2df Mon Sep 17 00:00:00 2001
From: Adam <alazzara@redhat.com>
Date: Mon, 10 Feb 2020 10:03:54 -0500
Subject: [PATCH 13/17] fix changelog

---
 CHANGELOG-prerelease.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG-prerelease.md b/CHANGELOG-prerelease.md
index 49d6fe6f6c..6a2617f807 100644
--- a/CHANGELOG-prerelease.md
+++ b/CHANGELOG-prerelease.md
@@ -4,7 +4,8 @@ Tag: [v1.0.0-prerelease.37](https://github.com/patternfly/patternfly-elements/re
 
 - [](https://github.com/patternfly/patternfly-elements/commit/) Update pfe-content-set to accept custom container queries
 - [6a41811](https://github.com/patternfly/patternfly-elements/commit/6a418112668ba580918ac4a8b4b54e8df05c1155) fix: reference error when slot is missing in pfe-navigation
-- [](https://github.com/patternfly/patternfly-elements/commit/) fix: accordion accessibility improvements; aria-roles corrected
+- [ff859a5](https://github.com/patternfly/patternfly-elements/commit/ff859a5c2b62ae24225f0031f69b5bc050c59470) fix: accordion accessibility improvements; aria-roles corrected
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfe-nav & pfe-cta hotfixes aria-roles corrected
 
 ## Prerelease 36 ( 2020-01-20 )
 

From abfb979df3021036bd650a858b3730cdbf96fc62 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Mon, 10 Feb 2020 11:24:10 -0500
Subject: [PATCH 14/17] clean up demo file JS & CSS references

---
 elements/pfe-content-set/demo/index.html | 13 ++++---------
 examples/index.html                      |  1 +
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index 0fc84b5f2a..b2018e00f6 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -12,15 +12,14 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
     -->
-
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
-  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
-
   <noscript>
     <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
   </noscript>
 
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-base.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-context.css" />
+  <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
+  <link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/latest/advanced-theme.css">
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
@@ -36,10 +35,6 @@
 
   </script>
 
-  <noscript>
-    <link href="../../pfelement/dist/pfelement--noscript.min.css" rel="stylesheet">
-    <link href="https://static.redhat.com/libs/redhat/redhat-theme/latest/advanced-theme.css" rel="stylesheet">
-  </noscript>
   <style>
     hr {
       margin: 40px 10px;
diff --git a/examples/index.html b/examples/index.html
index 35d4cb9eaf..78b8cdb3c1 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -59,6 +59,7 @@ <h1>Demo pages</h1>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-health-index/demo">pfe-health-index</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon/demo">pfe-icon</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></pfe-cta>
+				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-layouts/demo">pfe-layouts</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-markdown/demo">pfe-markdown</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-modal/demo">pfe-modal</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-navigation/demo">pfe-navigation</a></pfe-cta>

From 44fb0eba8a5d5fb66d562e7e5b10e76bb7d2865b Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Mon, 10 Feb 2020 11:33:27 -0500
Subject: [PATCH 15/17] use redhatfont instead of overpass

---
 elements/pfe-content-set/demo/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html
index b2018e00f6..4547cb5eca 100644
--- a/elements/pfe-content-set/demo/index.html
+++ b/elements/pfe-content-set/demo/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>PatternFly Element | pfe-content-set Demo</title>
-  <link rel="stylesheet" href="https://overpass-30e2.kxcdn.com/overpass.css" />
+   <link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/2/webfonts/red-hat-font.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
   <title>PatternFly Element | pfe-content-set Demo</title>
 

From a1506e8239f5268aebbfc8da9665b6373f66233b Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 12 Feb 2020 12:26:02 -0500
Subject: [PATCH 16/17] remove errant line from index

---
 examples/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index 78b8cdb3c1..35d4cb9eaf 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -59,7 +59,6 @@ <h1>Demo pages</h1>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-health-index/demo">pfe-health-index</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon/demo">pfe-icon</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></pfe-cta>
-				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-layouts/demo">pfe-layouts</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-markdown/demo">pfe-markdown</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-modal/demo">pfe-modal</a></pfe-cta>
 				<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-navigation/demo">pfe-navigation</a></pfe-cta>

From c0f2035d69eb1af972700882ab3f953b20dcec93 Mon Sep 17 00:00:00 2001
From: Kendall Totten <ktotten@redhat.com>
Date: Wed, 12 Feb 2020 12:52:20 -0500
Subject: [PATCH 17/17] fix tests for content-set, closing brackets

---
 elements/pfe-content-set/test/pfe-content-set_test.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/elements/pfe-content-set/test/pfe-content-set_test.html b/elements/pfe-content-set/test/pfe-content-set_test.html
index 3ec1ad7684..8306622145 100644
--- a/elements/pfe-content-set/test/pfe-content-set_test.html
+++ b/elements/pfe-content-set/test/pfe-content-set_test.html
@@ -265,6 +265,7 @@ <h2 pfe-content-set--header>Heading 1</h2>
 
             done();
           });
+        });
       });
     </script>
   </body>