@tacc/core-styles 0.6.0-alpha.2 → 0.6.0-beta.2

package/src/lib/_imports/components/c-page.html

@@ -1,192 +1,203 @@
 <!-- Pagination with one page -->
 <div class="c-page-list">
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    " disabled
-    type="button">&lt; Previous</button>
-    <button class="
-      c-button c-button--secondary c-button--is-active c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">1</button>
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    " disabled
-    type="button">Next &gt;</button>
+  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    1
+  </button>
+  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+    Next &gt;
+  </button>
 </div>
 
 <!-- Pagination with fewer than 7 pages -->
 <div class="c-page-list">
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">&lt; Previous</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">1</button>
-    <button class="
-      c-button c-button--secondary c-button--is-active c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">2</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">3</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">4</button>
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">Next &gt;</button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    4
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
 </div>
 
 <!-- Pagination with current page near start -->
 <div class="c-page-list">
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">&lt; Previous</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">1</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">2</button>
-    <button class="
-      c-button c-button--secondary c-button--is-active c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">3</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">4</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">5</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">6</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">7</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">8</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">9</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">10</button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    4
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    5
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    6
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    7
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    8
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    9
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    10
+  </button>
   <span class="c-page-item--etcetera">...</span>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">20</button>
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">Next &gt;</button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
 </div>
 
 <!-- Pagination with current page near end -->
 <div class="c-page-list">
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">&lt; Previous</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">1</button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    1
+  </button>
   <span class="c-page-item--etcetera">...</span>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">11</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">12</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">13</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">14</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">15</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">16</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">17</button>
-    <button class="
-      c-button c-button--secondary c-button--is-active c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">18</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">19</button>
-    <button class="
-      c-button c-button--secondary c-button--size-small
-      c-page-item c-page-link c-page-link--always-click
-      "
-      type="button">20</button>
-  <button class="
-    c-button c-button--as-link
-    c-page-end
-    "
-    type="button">Next &gt;</button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    11
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    12
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    13
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    14
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    15
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    16
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    17
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    18
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    19
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
 </div>

package/src/lib/_imports/elements/tacc-search-bar.md

@@ -5,16 +5,22 @@ The search bar (as implemented in TACC/Core-CMS) _currently_ has a caveat (that
 Certain styles need to load **before** all search bar styles and markup:
 
 ```css
-:host { visibility: hidden; height: 0; }
+:host {
+  visibility: hidden;
+  height: 0;
+}
 ```
 
 Certain styles need to load **after** all search bar styles and markup:
 
 ```css
-:host { visibility: visible; height: auto; }
+:host {
+  visibility: visible;
+  height: auto;
+}
 ```
 
 This avoids [FOUC] by hiding the search bar _until_ all styles and markup are loaded.
 
-[TACC/Core-CMS#101]: https://github.com/TACC/Core-CMS/issues/101
-[FOUC]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
+[tacc/core-cms#101]: https://github.com/TACC/Core-CMS/issues/101
+[fouc]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

package/src/lib/_imports/generics/README.md

@@ -6,4 +6,4 @@ This directory is here to show and document all [ITCSS] directories.
 
 [^1]: Bootstrap also provides its own objects, components, elements, and trumps.
 
-[ITCSS]: https://confluence.tacc.utexas.edu/x/IAA9Cw
+[itcss]: https://confluence.tacc.utexas.edu/x/IAA9Cw

package/src/lib/_imports/objects/o-grid.html

@@ -3,10 +3,18 @@
 
   {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
   <div class="o-grid {{modifier_class}} {{ html }}">
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
-    <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png"
+    />
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg"
+    />
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png"
+    />
+    <img
+      src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+    />
   </div>
 </details>
 <details>
@@ -16,8 +24,22 @@
   <div class="o-grid {{modifier_class}} {{ html }}">
     <p>Lorem</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat iaculis tortor ipsum quis risus.</p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat iaculis tortor ipsum quis risus. Pellentesque quis faucibus nisl. Integer dapibus, nunc nec eleifend rhoncus, nibh est finibus purus, gravida elementum ipsum purus eu metus. Donec tincidunt metus ut pretium auctor. Nulla dignissim euismod tempor. Fusce pharetra arcu nisl, eu varius est fermentum eget. Vivamus dictum aliquet turpis.</p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo
+      vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut
+      vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat
+      iaculis tortor ipsum quis risus.
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus justo
+      vel pulvinar sagittis. Nulla sed bibendum mauris, vitae faucibus erat. Ut
+      vehicula, tellus eget sagittis vehicula, orci leo placerat est, feugiat
+      iaculis tortor ipsum quis risus. Pellentesque quis faucibus nisl. Integer
+      dapibus, nunc nec eleifend rhoncus, nibh est finibus purus, gravida
+      elementum ipsum purus eu metus. Donec tincidunt metus ut pretium auctor.
+      Nulla dignissim euismod tempor. Fusce pharetra arcu nisl, eu varius est
+      fermentum eget. Vivamus dictum aliquet turpis.
+    </p>
   </div>
 </details>
 <details>
@@ -25,17 +47,37 @@
 
   {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
   <div class="o-grid {{modifier_class}} {{ html }}">
-    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png" target="_blank">
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
+    <a
+      href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
+      target="_blank"
+    >
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png"
+      />
     </a>
-    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/0d/04/0d048909-c09c-4d87-93af-cc1afa81f762/spectrum-tall-320px.png" target="_blank">
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
+    <a
+      href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/0d/04/0d048909-c09c-4d87-93af-cc1afa81f762/spectrum-tall-320px.png"
+      target="_blank"
+    >
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg"
+      />
     </a>
-    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/93/8c/938c12d4-1784-4061-b701-d81d975ce04c/spectrum-wide-600px.png" target="_blank">
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
+    <a
+      href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/93/8c/938c12d4-1784-4061-b701-d81d975ce04c/spectrum-wide-600px.png"
+      target="_blank"
+    >
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png"
+      />
     </a>
-    <a href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/bd/fb/bdfbab1f-5275-42c1-8c3d-03e2a0385027/spectrum-wide-320px.png" target="_blank">
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+    <a
+      href="https://cep.tacc.utexas.eduhttps://cep.tacc.utexas.edu/media/filer_public/bd/fb/bdfbab1f-5275-42c1-8c3d-03e2a0385027/spectrum-wide-320px.png"
+      target="_blank"
+    >
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+      />
     </a>
   </div>
 </details>
@@ -45,20 +87,28 @@
   {# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
   <div class="o-grid {{modifier_class}} {{ html }}">
     <figure>
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png" />
-        <figcaption>Spectrum Square 240px</figcaption>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png__240x240_q85_subject_location-120%2C120_subsampling-2.png"
+      />
+      <figcaption>Spectrum Square 240px</figcaption>
     </figure>
     <figure>
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg" />
-        <figcaption>Spectrum Tall 320px</figcaption>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/c9/eb/c9ebd744-14d3-43ed-bc2e-86ed96eeef8a/spectrum-tall-320px.png__160x320_q85_subject_location-76%2C160_subsampling-2.jpg"
+      />
+      <figcaption>Spectrum Tall 320px</figcaption>
     </figure>
     <figure>
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png" />
-        <figcaption>Spectrum Wide 600px</figcaption>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/14/15/1415253c-940f-452d-968e-0a17bd158867/spectrum-wide-600px.png__600x300_q85_subject_location-289%2C146_subsampling-2.png"
+      />
+      <figcaption>Spectrum Wide 600px</figcaption>
     </figure>
     <figure>
-        <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
-        <figcaption>Spectrum Wide 320px</figcaption>
+      <img
+        src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
+      />
+      <figcaption>Spectrum Wide 320px</figcaption>
     </figure>
   </div>
 </details>

package/src/lib/_imports/objects/o-section.css

@@ -59,7 +59,6 @@ Styleguide Objects.Section
 
 
 
-
 /* Modifers */
 
 
@@ -255,16 +254,15 @@ Styleguide Objects.Section
 /* Tricks: /* Children: Banner Image */
 /* FP-1462: Extract to new banner component(s) */
 
-/* HACK: To hide vertical overflow by placing sibling sections atop */
-[class*="o-section--style"] { position: relative; }
+/* To hide section overflow with minimal side effects */
+/* FAQ: Use 'clip', not 'hidden' which can affect opposite 'overflow-' value */
 /* NOTE: This selector assumes only a banner section has vertical overflow */
-/* CAVEAT: Any banner pop-out el's can NOT overflow atop sibling sections */
-[class*="o-section--style"].o-section--banner { z-index: 0; }
-/* NOTE: A `z-index` > 0 is only necessary for sections before banner */
-/* CAVEAT: Any section pop-out el's can NOT overflow atop section after it */
-[class*="o-section--style"] { z-index: 1; }
-
-/* HACK: To hide `.o-section__banner-image` overflow */
+/* CAVEAT: Any banner pop-out el's would NOT overflow atop sibling sections */
+[class*="o-section--style"].o-section--banner {
+  /* To hide vert. overflow */
+  overflow-y: clip;
+}
 main {
-  overflow-x: clip; /* support position sticky on element in section */
+  /* To hide horz. overflow yet support any 'position: sticky' descendant */
+  overflow-x: clip;
 }