@tacc/core-styles 2.11.0 → 2.13.0

package/dist/trumps/s-article-preview.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,[class*=s-article-list--] .s-article-preview p:not(:first-child):not(:last-child){--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line,[class*=s-article-list--] .s-article-preview h3{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.s-article-preview p:last-child>a,.x-article-link-stretch{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.s-article-list--layout-gapless .s-article-preview p:last-child>a,.x-article-link-stretch--gapless{left:-15px;width:calc(100% + 30px)}.s-article-preview p:last-child>a:hover,.x-article-link-hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.s-article-list--layout-gapless .s-article-preview p:last-child>a:hover,.x-article-link-hover--gapless{--outline-offset:0}.s-article-preview{display:flex;flex-direction:column;position:relative}.s-article-preview p:first-child{margin-bottom:.8rem;order:1;overflow:hidden}.s-article-preview p:first-child>img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.s-article-preview p:first-child>img.img-fluid{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.s-article-list--news .s-article-preview p:first-child{height:180px}.s-article-list--allocations .s-article-preview p:first-child{height:10rem}.s-article-list--events .s-article-preview p:first-child{display:none}.s-article-preview h3{font-size:1.8rem;font-weight:var(--bold);line-height:2.4rem;margin-bottom:.8rem;margin-top:0;order:3}.s-article-list--allocations .s-article-preview h3{color:inherit;font-size:1.6rem;font-weight:var(--bold)}.s-article-list--events .s-article-preview h3{font-size:1.4rem}.s-article-preview p:not(:first-child):not(:last-child){font-size:1.6rem;line-height:2.4rem;margin-bottom:0;order:4}[class*=s-article-list--] .s-article-preview p:not(:first-child):not(:last-child){--lines:3}.s-article-list--allocations .s-article-preview p:not(:first-child):not(:last-child){display:none}.s-article-list--events .s-article-preview p:not(:first-child):not(:last-child){color:var(--global-color-primary--xx-dark);font-size:1.4rem}.s-article-preview ul{display:flex;flex-direction:column;list-style:none;margin-bottom:.8rem;order:2;padding-left:0}.s-article-list--allocations .s-article-preview ul{order:5}.s-article-preview ul>li:first-child{display:flex;flex-direction:row;flex-wrap:wrap;font-weight:var(--medium);order:2}.s-article-list--news .s-article-preview ul>li:first-child{font-size:1rem;margin-bottom:.8rem}.s-article-list--news .s-article-preview ul>li:first-child:before{content:"Published: ";white-space:pre}.s-article-list--events .s-article-preview ul>li:first-child{color:var(--global-color-accent--normal);font-size:1.4rem}.s-article-list--allocations .s-article-preview ul>li:first-child{font-size:1.6rem}.s-article-list--allocations .s-article-preview ul>li:first-child:before{content:"Submission Deadlines: ";white-space:pre}.s-article-preview ul>li:nth-child(2){font-size:1.2rem;font-weight:var(--bold);order:1;text-transform:uppercase}.s-article-list--allocations .s-article-preview ul>li:nth-child(2),.s-article-list--events .s-article-preview ul>li:nth-child(2){display:none}.s-article-preview ul>li:nth-child(3){order:3}.s-article-list--allocations .s-article-preview ul>li:nth-child(3),.s-article-list--events .s-article-preview ul>li:nth-child(3),.s-article-list--news .s-article-preview ul>li:nth-child(3){display:none}.s-article-preview p:last-child{margin-bottom:0}.s-article-preview p:last-child{z-index:1}.s-article-preview p:last-child>a{color:transparent}.s-article-list--layout-compact .s-article-preview>*{margin-bottom:0}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines,[class*=s-article-list--] .s-article-preview p:not(:first-child):not(:last-child){--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line,[class*=s-article-list--] .s-article-preview h3{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.s-article-preview p:last-child>a,.x-article-link-stretch{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.s-article-list--layout-gapless .s-article-preview p:last-child>a,.x-article-link-stretch--gapless{left:-15px;width:calc(100% + 30px)}.s-article-preview p:last-child>a:hover,.x-article-link-hover{--outline-offset:1em;outline:1px solid var(--global-color-accent--normal);outline-offset:var(--outline-offset)}.s-article-list--layout-gapless .s-article-preview p:last-child>a:hover,.x-article-link-hover--gapless{--outline-offset:0}.s-article-preview{display:flex;flex-direction:column;position:relative}.s-article-preview p:first-child{margin-bottom:.8rem;order:1;overflow:hidden}.s-article-preview p:first-child>img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.s-article-preview p:first-child>img.img-fluid{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.s-article-list--news .s-article-preview p:first-child{height:180px}.s-article-list--allocations .s-article-preview p:first-child{height:10rem}.s-article-list--events .s-article-preview p:first-child{display:none}.s-article-preview h3{font-size:1.8rem;font-weight:var(--bold);line-height:2.4rem;margin-bottom:.8rem;margin-top:0;order:3}.s-article-list--allocations .s-article-preview h3{color:inherit;font-size:1.6rem;font-weight:var(--bold)}.s-article-list--events .s-article-preview h3{font-size:1.4rem}.s-article-preview p:not(:first-child):not(:last-child){font-size:1.6rem;line-height:2.4rem;margin-bottom:0;order:4}[class*=s-article-list--] .s-article-preview p:not(:first-child):not(:last-child){--lines:3}.s-article-list--allocations .s-article-preview p:not(:first-child):not(:last-child){display:none}.s-article-list--events .s-article-preview p:not(:first-child):not(:last-child){color:var(--global-color-primary--xx-dark);font-size:1.4rem}.s-article-preview ul{display:flex;flex-direction:column;list-style:none;margin-bottom:.8rem;order:2;padding-left:0}.s-article-list--allocations .s-article-preview ul{order:5}.s-article-preview ul>li:first-child{display:flex;flex-direction:row;flex-wrap:wrap;font-weight:var(--medium);order:2}.s-article-list--news .s-article-preview ul>li:first-child{font-size:1rem;margin-bottom:.8rem}.s-article-list--news .s-article-preview ul>li:first-child:before{content:"Published: ";white-space:pre}.s-article-list--events .s-article-preview ul>li:first-child{color:var(--global-color-accent--normal);font-size:1.4rem}.s-article-list--allocations .s-article-preview ul>li:first-child{font-size:1.6rem}.s-article-list--allocations .s-article-preview ul>li:first-child:before{content:"Submission Deadlines: ";white-space:pre}.s-article-preview ul>li:nth-child(2){font-size:1.2rem;font-weight:var(--bold);order:1;text-transform:uppercase}.s-article-list--allocations .s-article-preview ul>li:nth-child(2),.s-article-list--events .s-article-preview ul>li:nth-child(2){display:none}.s-article-preview ul>li:nth-child(3){order:3}.s-article-list--allocations .s-article-preview ul>li:nth-child(3),.s-article-list--events .s-article-preview ul>li:nth-child(3),.s-article-list--news .s-article-preview ul>li:nth-child(3){display:none}.s-article-preview p:last-child{margin-bottom:0}.s-article-preview p:last-child{z-index:1}.s-article-preview p:last-child>a{color:transparent}.s-article-list--layout-compact .s-article-preview>*{margin-bottom:0}

package/dist/trumps/s-blockquote.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-blockquote blockquote{font-style:italic;margin:unset}.s-blockquote blockquote p{margin:0;white-space:pre-wrap}.s-blockquote blockquote p:before{content:"“"}.s-blockquote blockquote p:after{content:"”"}.s-blockquote figcaption{margin-top:.3em}.s-blockquote figcaption:before{content:"— "}.s-blockquote cite{font-style:unset}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-blockquote blockquote{font-style:italic;margin:unset}.s-blockquote blockquote p{margin:0;white-space:pre-wrap}.s-blockquote blockquote p:before{content:"“"}.s-blockquote blockquote p:after{content:"”"}.s-blockquote figcaption{margin-top:.3em}.s-blockquote figcaption:before{content:"— "}.s-blockquote cite{font-style:unset}

package/dist/trumps/s-breadcrumbs.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.s-breadcrumbs-via-ul,.s-breadcrumbs:is(nav){font-size:var(--global-font-size--x-small);margin-bottom:var(--global-space--under-breadcrumbs);padding-top:var(--global-space--above-breadcrumbs)}.s-breadcrumbs-via-ul ul,.s-breadcrumbs:is(nav) ol{font-weight:var(--global-font-weight--medium);list-style:none;margin-bottom:unset;padding-left:unset}.s-breadcrumbs-via-ul ul li,.s-breadcrumbs:is(nav) ol li,.s-breadcrumbs:is(ol) li{display:inline-block}.s-breadcrumbs-via-ul ul li+li:before,.s-breadcrumbs:is(nav) ol li+li:before,.s-breadcrumbs:is(ol) li+li:before{content:" > "}.s-breadcrumbs-via-ul ul li:last-child,.s-breadcrumbs:is(nav) ol li:last-child{font-weight:var(--bold)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.x-truncate--many-lines{--lines:2;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);display:-webkit-box;overflow:hidden}.x-untruncate--many-lines{-webkit-line-clamp:inherit;overflow:visible}.x-truncate--one-line{overflow:hidden;text-overflow:var(--text-overflow,ellipsis);white-space:nowrap}.x-untruncate--one-line{overflow:visible;white-space:normal}.s-breadcrumbs-via-ul,.s-breadcrumbs:is(nav){font-size:var(--global-font-size--x-small);margin-bottom:var(--global-space--under-breadcrumbs);padding-top:var(--global-space--above-breadcrumbs)}.s-breadcrumbs-via-ul ul,.s-breadcrumbs:is(nav) ol{font-weight:var(--global-font-weight--medium);list-style:none;margin-bottom:unset;padding-left:unset}.s-breadcrumbs-via-ul ul li,.s-breadcrumbs:is(nav) ol li,.s-breadcrumbs:is(ol) li{display:inline-block}.s-breadcrumbs-via-ul ul li+li:before,.s-breadcrumbs:is(nav) ol li+li:before,.s-breadcrumbs:is(ol) li+li:before{content:" > "}.s-breadcrumbs-via-ul ul li:last-child,.s-breadcrumbs:is(nav) ol li:last-child{font-weight:var(--bold)}

package/dist/trumps/s-cms-nav.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */ul.s-cms-nav{margin-bottom:0;padding-left:0}.s-cms-nav a:hover{text-decoration:none}

package/dist/trumps/s-document.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-document{margin-bottom:var(--global-space--large)}.s-document blockquote{border:var(--global-border--normal);opacity:.75;padding:1em}.s-document blockquote>:last-child{margin-bottom:0}@media only screen and (min-width:768px){blockquote{width:600px}}p+dl.small{padding-left:var(--global-space--list-indent)}.s-document p+details,.s-document p+dl.small,.s-document p+img,.s-document p+ol.small,.s-document p+pre,.s-document p+ul.small{margin-bottom:1rem;margin-top:-.75rem}code,pre>samp{background-color:var(--global-color-primary--x-light);border-color:var(--global-color-primary--light);border-style:solid;border-width:var(--global-border-width--normal)}.s-document img{border:var(--global-border--normal);display:block;max-width:800px;width:100%}.s-document i.icon--as-image{border:var(--global-border--normal);display:inline-block;font-size:2.8em;padding:.25em}.s-document table{max-width:500px;text-align:center;width:100%}.s-document details{--buffer-horz:1em;padding-left:var(--buffer-horz)}.s-document summary{margin-left:calc(var(--buffer-horz)*-1)}.s-document details[open]>summary{margin-bottom:.5em}.s-document summary:after{display:inline-block;margin-left:.2rem;opacity:.75}.s-document details[open]>summary:after{content:"(hide)"}.s-document details:not([open])>summary:after{content:"(show)"}.s-document .row>.col>:last-child{margin-bottom:0}.s-document .row .row{padding:var(--global-space--normal) 0}.s-document .row .row:nth-child(2n){background-color:var(--global-color-primary--x-light)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-document{margin-bottom:var(--global-space--large)}.s-document blockquote{border:var(--global-border--normal);opacity:.75;padding:1em}.s-document blockquote>:last-child{margin-bottom:0}@media only screen and (min-width:768px){blockquote{width:600px}}p+dl.small{padding-left:var(--global-space--list-indent)}.s-document p+details,.s-document p+dl.small,.s-document p+img,.s-document p+ol.small,.s-document p+pre,.s-document p+ul.small{margin-bottom:1rem;margin-top:-.75rem}code,pre>samp{background-color:var(--global-color-primary--x-light);border-color:var(--global-color-primary--light);border-style:solid;border-width:var(--global-border-width--normal)}.s-document img{border:var(--global-border--normal);display:block;max-width:800px;width:100%}.s-document i.icon--as-image{border:var(--global-border--normal);display:inline-block;font-size:2.8em;padding:.25em}.s-document table{max-width:500px;text-align:center;width:100%}.s-document details{--buffer-horz:1em;padding-left:var(--buffer-horz)}.s-document summary{margin-left:calc(var(--buffer-horz)*-1)}.s-document details[open]>summary{margin-bottom:.5em}.s-document summary:after{display:inline-block;margin-left:.2rem;opacity:.75}.s-document details[open]>summary:after{content:"(hide)"}.s-document details:not([open])>summary:after{content:"(show)"}.s-document .row>.col>:last-child{margin-bottom:0}.s-document .row .row{padding:var(--global-space--normal) 0}.s-document .row .row:nth-child(2n){background-color:var(--global-color-primary--x-light)}

package/dist/trumps/s-footer.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-footer>p:last-of-type{margin:0}.s-footer a{color:var(--global-color-primary--light)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-footer>p:last-of-type{margin:0}.s-footer a{color:var(--global-color-primary--light)}

package/dist/trumps/s-guide-doc.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-guide-doc table{max-width:500px;text-align:center;width:100%}.s-guide-doc .row>.col>:last-child{margin-bottom:0}.s-guide-doc .row .row{padding:var(--global-space--normal) 0}.s-guide-doc .row .row:nth-child(2n){background-color:var(--global-color-primary--x-light)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-guide-doc table{max-width:500px;text-align:center;width:100%}.s-guide-doc .row>.col>:last-child{margin-bottom:0}.s-guide-doc .row .row{padding:var(--global-space--normal) 0}.s-guide-doc .row .row:nth-child(2n){background-color:var(--global-color-primary--x-light)}

package/dist/trumps/s-header.bootstrap.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}

package/dist/trumps/s-header.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:16px;line-height:1.4}.s-header .navbar-brand{color:var(--header-text-color);margin-right:16px;min-width:176px;padding:0}@media only screen and (min-width:1201px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding:8px 14px}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-header .dropdown-item{color:#212529}.s-header .dropdown-item:focus,.s-header .dropdown-item:hover{background-color:#f8f9fa;color:#16181b;text-decoration:none}.s-header .dropdown-item.active,.s-header .dropdown-item:active{background-color:#007bff;color:#fff;text-decoration:none}.s-header input{font-family:inherit}.s-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-bottom:1px solid var(--header-major-border-color);font-family:var(--global-font-family);font-size:16px;line-height:1.4}.s-header .navbar-brand{color:var(--header-text-color);margin-right:16px;min-width:176px;padding:0}@media only screen and (min-width:1201px){.s-header.navbar{height:50px}}.s-header.navbar{--nav-padding-vert:5px;--nav-padding-horz:36px;background-color:var(--header-bkgd-color);padding:var(--nav-padding-vert) var(--nav-padding-horz)}.s-header .nav-link{--line-height:24px;--border-width:4px;--border-offset:calc(var(--nav-padding-vert) - var(--border-width));--border-color:var(--global-color-secondary--light);line-height:var(--line-height);position:relative;top:var(--border-offset);white-space:nowrap}.s-header .nav-item.active .nav-link,.s-header .nav-link:active,.s-header .nav-link:focus,.s-header .nav-link:hover{border-color:var(--border-color);border-style:solid;border-width:0 0 var(--border-width);margin-bottom:calc(var(--border-width)*-1)}#s-header .nav-link,#s-header .nav-link>a{color:var(--header-text-color)}.s-header[class*=navbar-expand-] .navbar-nav .nav-link{padding:8px 14px}.s-header .s-search-bar~.s-portal-nav{border-left:1px solid var(--header-minor-border-color);margin-left:12px}.dropdown-menu{font-size:16px}.s-header [class*=fa-]{text-align:center;width:27px}.navbar-toggler-icon{filter:var(--menu-toggle-icon)}

package/dist/trumps/s-image-grid.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.x-grid--layout-cols-equal-set-count{grid-template-columns:repeat(var(--count),auto)}.x-grid--layout-cols-equal-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.s-image-grid,.x-grid--layout-cols-equal-min-width-max-count{--gap:var(--global-space--grid-gap);--max-cols:7;--min-width:250px;--row-height:auto;--gap-count:calc(var(--max-cols) - 1);--total-gap-width:calc(var(--gap-count)*var(--gap));--max-width:calc((100% - var(--total-gap-width))/var(--max-cols));display:grid;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(auto-fill,minmax(max(var(--min-width),var(--max-width)),1fr))}.x-grid--layout-rows-equal-max-height{grid-auto-rows:1fr}.x-grid--layout-rows-equal-set-height{grid-auto-rows:var(--height)}.x-grid--content-align-center{align-items:center;justify-items:center}.s-image-grid *{max-height:100%;max-width:100%}ul.s-image-grid{-webkit-padding-start:unset;margin-bottom:unset;padding-inline-start:unset}ul.s-image-grid>li{list-style:none}.s-image-grid>a,.s-image-grid>li,.s-image-grid>li>a{align-items:center;display:flex;justify-content:center}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.x-grid--layout-cols-equal-set-count{grid-template-columns:repeat(var(--count),auto)}.x-grid--layout-cols-equal-min-width{grid-template-columns:repeat(auto-fit,minmax(var(--width),1fr))}.s-image-grid,.x-grid--layout-cols-equal-min-width-max-count{--gap:var(--global-space--grid-gap);--max-cols:7;--min-width:250px;--row-height:auto;--gap-count:calc(var(--max-cols) - 1);--total-gap-width:calc(var(--gap-count)*var(--gap));--max-width:calc((100% - var(--total-gap-width))/var(--max-cols));display:grid;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(auto-fill,minmax(max(var(--min-width),var(--max-width)),1fr))}.x-grid--layout-rows-equal-max-height{grid-auto-rows:1fr}.x-grid--layout-rows-equal-set-height{grid-auto-rows:var(--height)}.x-grid--content-align-center{align-items:center;justify-items:center}.s-image-grid *{max-height:100%;max-width:100%}ul.s-image-grid{-webkit-padding-start:unset;margin-bottom:unset;padding-inline-start:unset}ul.s-image-grid>li{list-style:none}.s-image-grid>a,.s-image-grid>li,.s-image-grid>li>a{align-items:center;display:flex;justify-content:center}

package/dist/trumps/s-inline-dl.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */dl.s-inline-dl dt{display:block;float:left;font-weight:var(--bold);margin-bottom:0}dl.s-inline-dl dd{clear:right;margin-bottom:0}dl.s-inline-dl dt:after{-webkit-margin-end:.25em;content:":";margin-inline-end:.25em}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */dl.s-inline-dl dt{display:block;float:left;font-weight:var(--bold);margin-bottom:0}dl.s-inline-dl dd{clear:right;margin-bottom:0}dl.s-inline-dl dt:after{-webkit-margin-end:.25em;content:":";margin-inline-end:.25em}

package/dist/trumps/s-irregular-links.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link,.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled,.x-link--irregular--disabled{opacity:.5;pointer-events:none}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted}.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link--irregular{text-decoration-line:underline}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--irregular--hover{text-decoration-style:dashed}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--irregular--active{text-decoration-style:dotted}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link,.x-link--irregular{color:var(--global-color-accent--normal);text-decoration:none;text-decoration-thickness:var(--global-border-width--normal);text-underline-offset:.2em}.x-link--disabled,.x-link--irregular--disabled{opacity:.5;pointer-events:none}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--hover,.x-link--irregular--hover{color:var(--global-color-accent--normal);text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:var(--global-border-width--normal)}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--active,.x-link--irregular--active{text-decoration-line:underline;text-decoration-style:dotted}.s-irregular-links [class*=button--as-link],.s-irregular-links a,.x-link--irregular{text-decoration-line:underline}.s-irregular-links [class*=button--as-link]:hover,.s-irregular-links a:hover,.x-link--irregular--hover{text-decoration-style:dashed}.s-irregular-links [class*=button--as-link]:active,.s-irregular-links a:active,.x-link--irregular--active{text-decoration-style:dotted}

package/dist/trumps/s-paragraph-table.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/s-portal-nav.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-portal-nav{text-transform:none}ul.s-portal-nav{margin-bottom:0;padding-left:0}.s-portal-nav a:hover{text-decoration:none}

package/dist/trumps/s-style-guide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}

package/dist/trumps/s-system-specs.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}

package/dist/trumps/tacc-search-bar.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--header-text-color);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/trumps/u-mailto-text-replace.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}

package/dist/trumps/u-nested-text-content.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.11.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
+/*! @tacc/core-styles 2.13.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/docs/contributing.md

@@ -0,0 +1,54 @@
+
+## Linting and Formatting
+
+Not standardized. Read [(internal) Formatting & Linting](https://confluence.tacc.utexas.edu/x/HoBGCw).
+
+## Best Practices
+
+- [Sign your commits.](https://help.github.com/en/github/authenticating-to-github/managing-commit-signature-verification)
+- [Learn Markdown.](https://bitbucket.org/tutorials/markdowndemo)
+
+## Development Workflow
+
+We use a modifed version of [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html).
+
+- "feature branches" have a specific prefix:
+  - `feat/` for features and updates
+  - `fix/` for bugfixes and hotfixes
+  - `refactor/` for large internal changes
+  - `style/` for code style changes (white-space, formatting, etc.)
+  - `chore/` for no-op changes
+  - `docs/` for documentation
+  - `perf/` for performance improvements
+  - `test/` for test case updates
+  - or other "types" from [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
+- "develop" branch is usually `main`,\
+    <sup>but can exist as a long-lived multi-feature branch prefixed with `dev/`</sup>
+- "release branches" (as needed) are prefixed with `release/`
+- "hotfix branches" are prefixed `fix/`
+- "master branch" is always `main`
+
+## Release Workflow
+
+Only appointed team members may release versions.
+
+1. (one time) Login to npm via:\
+    `npm login`
+1. Create new branch for version bump.
+1. Update `CHANGELOG.md`.
+1. Update version via:\
+   `npm version N.N.N`
+1. Commit, push, PR, review.\
+    <sup>Do **not** merge yet.</sup>
+1. Publish to NPM via `npm publish --access public`.\
+    <sup>Project build will automatically occur before publish.[^1]</sup>
+1. Commit NPM build output.
+1. Merge pull request.
+1. Create release and tag on GitHub.
+1. Replace Github's unannotated tag with an annotated one:
+   - `git pull`
+   - `git checkout vN.N.N`
+   - `git tag -d vN.N.N`
+   - `git tag -a vN.N.N -m "____: vN.N.N"`
+   - `git push --tags --force`
+

package/fractal.config.js

@@ -90,5 +90,14 @@ fractal.web.set('builder.dest', __dirname + '/demo');
 // Customize theme
 fractal.web.theme(theme);
 
+// Add template helpers
+const engine = fractal.components.engine();
+engine.handlebars.registerHelper('eq', function(a, b) {
+  return a == b;
+});
+engine.handlebars.registerHelper('has', function(array, item) {
+  return array.includes(item);
+});
+
 // Export
 module.exports = fractal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@frctl/fractal": "^1.5.13",
+    "@frctl/handlebars": "^1.2.15",
     "@frctl/mandelbrot": "^1.10.1",
     "minimist": "^1.2.7",
     "npm-watch": "^0.11.0"

package/src/lib/_imports/_partials/button-list.hbs

@@ -0,0 +1,9 @@
+{{#each buttons as | button |}}{{#if ../is-list}}<li>{{/if}}{{!
+
+  }}<button
+      {{#if ../as-links}}class="c-button c-button--as-link"{{/if}}
+      {{#if button.id}}id="{{button.id}}"{{/if}}>{{!
+      }}{{button.name}}{{!
+  }}</button>{{!
+
+}}{{#if ../is-list}}</li>{{/if}}{{/each}}

package/src/lib/_imports/_partials/link-list.hbs

@@ -0,0 +1,9 @@
+{{#each links as | link |}}{{#if ../is-list}}<li>{{/if}}{{!
+
+  }}<a
+      {{#if link.href}}href="{{#if is-anchor-href}}#{{/if}}{{link.href}}"{{/if}}
+      {{#if link.id}}id="{{link.id}}"{{/if}}>{{!
+      }}{{link.name}}{{!
+  }}</a>{{!
+
+}}{{#if ../is-list}}</li>{{/if}}{{/each}}

package/src/lib/_imports/components/c-nav/c-nav--is-list.hbs

@@ -0,0 +1,46 @@
+<dl>
+  {{#each modifiers}}
+  <dt>
+    Unordered List<br />
+    <small>
+      <code>c-nav</code>{{#each this}} <code>c-nav--{{.}}</code>{{/each}}
+    </small>
+  </dt>
+  <dd>
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ul>{{> @link-list links=../links is-list=true }}</ul>
+    </nav>
+    {{#if ../show_buttons }}
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ul>{{> @button-list buttons=../links is-list=true }}</ul>
+    </nav>
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ul>{{> @button-list buttons=../links is-list=true as-links=true }}</ul>
+    </nav>
+    {{/if}}
+  </dt>
+  {{/each}}
+</dl>
+<dl>
+  {{#each modifiers}}
+  <dt>
+    Ordered List<br />
+    <small>
+      <code>c-nav</code>{{#each this}} <code>c-nav--{{.}}</code>{{/each}}
+    </small>
+  </dt>
+  <dd>
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ol>{{> @link-list links=../links is-list=true }}</ol>
+    </nav>
+    {{#if ../show_buttons }}
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ol>{{> @button-list buttons=../links is-list=true }}</ol>
+    </nav>
+    <nav class="c-nav{{#each this}} c-nav--{{.}}{{/each}}">
+      <ol>{{> @button-list buttons=../links is-list=true as-links=true }}</ol>
+    </nav>
+    {{/if}}
+  </dt>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-nav/c-nav--no-list.hbs

@@ -0,0 +1,27 @@
+<dl>
+  {{#each modifiers}}
+  <dt>
+    No List<br />
+    <small>
+      <code>c-nav</code>
+      <code>c-nav--no-list</code>
+      {{#each this}}<code>c-nav--{{.}}</code>{{/each}}
+    </small>
+  </dt>
+  <dd>
+    <nav class="c-nav c-nav--no-list{{#each this}} c-nav--{{.}}{{/each}}">
+    {{> @link-list links=../links }}
+    </nav>
+    {{#if ../show_buttons }}
+    {{#unless (has this "boxed")}}
+    <nav class="c-nav c-nav--no-list{{#each this}} c-nav--{{.}}{{/each}}">
+    {{> @button-list buttons=../links }}
+    </nav>
+    <nav class="c-nav c-nav--no-list{{#each this}} c-nav--{{.}}{{/each}}">
+    {{> @button-list buttons=../links as-links=true }}
+    </nav>
+    {{/unless}}
+    {{/if}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/components/c-nav/c-nav.hbs

@@ -0,0 +1,2 @@
+{{> @c-nav--is-list }}
+{{> @c-nav--no-list }}

package/src/lib/_imports/components/c-nav/config.yml

@@ -0,0 +1,56 @@
+status: ready
+variants:
+  - name: default
+    context:
+      modifiers:
+        - []
+  - name: boxed
+    context:
+      modifiers:
+        - [boxed]
+  - name: piped
+    view: 'c-nav--no-list.hbs'
+    context:
+      modifiers:
+        - [piped]
+        - [piped, piped--before]
+        - [piped, piped--after]
+    status: wip
+  - name: no-list
+    context:
+      show_buttons: true
+      modifiers:
+        - []
+        - [boxed]
+        - [piped]
+  - name: is-list
+    hidden: true
+context:
+  links:
+    - name:   Alabama
+      href: '#alabama'
+      id:     alabama
+    - name:   Alaska
+      href: '#alaska'
+      id:     alaska
+    - name:   Arizona
+      href: '#arizona'
+      id:     arizona
+    - name:   Arkansas
+      href: '#arkansas'
+      id:     arkansas
+    - name:   California
+      href: '#california'
+      id:     california
+    - name:   Colorado
+      href: '#colorado'
+      id:     colorado
+    - name:   Connecticut
+      href: '#connecticut'
+      id:     connecticut
+    - name:   Delware
+      href: '#deleware'
+      id:     deleware
+    - name:   Florida
+      href: '#florida'
+      id:     florida

package/src/lib/_imports/components/c-nav/demo.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--global-space--grid-gap);
+}
+dd {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc( var(--global-space--grid-gap) / 2);
+}
+
+small > code:not(:last-child)::after {
+  content: '';
+  padding-inline: 0.5em;
+  display: inline;
+}

package/src/lib/_imports/components/c-nav/readme.md

@@ -0,0 +1,29 @@
+Navigation links that flow inline on narrow screens.
+
+> **ⓘ Notice**
+>
+> To enforce appropriate semantic HTML, a `<nav>` is required.
+
+> **⚠️ Important**
+>
+> - For __list__ navigation, use `<ul>` or `<ol>` (with `<li>` children).\
+> _Inside this kind of nav, whitespace in client client will __not__ render._
+> - For __non__-list navigation, i.e. direct `<a>` children (no `<li>`), add class `c-nav--no-list`.\
+> _Inside this kind of nav, whitespace in client client __will__ render.*_
+>
+> <small>* To remove whitespace with CSS would break or complicate font-size cascade.</small>
+
+| Class                   | Description
+| - | - |
+| `.c-nav`                | changes from list to cloud on narrow screens
+| `.c-nav--boxed`         | adds box around nav
+| `.c-nav--piped`         | adds pipes (" \| ") between links
+| `.c-nav--no-list`       | shows as cloud of links on all screen sizes
+
+Variants:
+
+| Class                   | Description
+| - | - |
+| __`.c-nav--piped`__     |
+| `.c-nav--piped--after`  | adds pipes (" \| ") _after_ links __(default)__
+| `.c-nav--plain--before` | adds pipes (" \| ") _before_ links

package/src/lib/_imports/components/c-nav.css

@@ -1,24 +1,6 @@
-/*
-Nav
-
-Navigation links that flows inline on narrow screens.
-
-To enforce appropriate semantic HTML, a `<nav>` is required.
-
-For list-like navigation, use `<ul>` or `<ol>` (with children `<li>`). Inside this kind of nav, markup whitespace is __not__ rendered.
-
-To support a navigation not as a list and with direct `<a>` children, add class `c-nav--no-list`. Inside this kind of nav, markup whitespace __is__ rendered.﹡
-
-﹡ To remove whitespace with CSS would break or complicate font-size cascade.
-
-- c-nav--boxed - Surrounded by a box
-
-Markup: c-nav.html
-
-Styleguide Components.Nav
-*/
 @import url("../tools/media-queries.css");
 
+@import url("./c-button.selectors.css");
 
 
 
@@ -26,6 +8,7 @@ Styleguide Components.Nav
 /* Block */
 
 nav.c-nav {
+  /* NOTE: Client is expected to overwrite these */
   --link-padding: 0.5em;
 }
 
@@ -40,6 +23,7 @@ nav.c-nav {
 /* Modifiers: Boxed */
 
 nav.c-nav--boxed {
+  /* NOTE: Client is expected to overwrite these */
   --indent-small: calc(var(--global-space--list-indent) / 4);
   --indent-medium: calc(var(--global-space--list-indent) / 2);
   --indent-large: var(--global-space--list-indent);
@@ -100,6 +84,77 @@ nav.c-nav--boxed.c-nav--no-list {
 
 
 
+/* Modifiers: Pipes */
+
+nav.c-nav--piped {
+  --pipe-style: var(--global-border--normal);
+}
+
+/* To ensure pipe is visible */
+/* CAVEAT: Truncation will NOT work */
+nav[class*="c-nav--piped"] button:--c-button--as-link {
+  overflow: visible;
+}
+
+
+/* Modifiers: Pipes: Methods */
+
+@custom-selector :--child-no-list
+  > :not(ul,ol);
+@custom-selector :--child-of-list
+  :is(ul,ol) > *;
+
+.c-nav--piped--after :--child-of-list,
+.c-nav--piped--after :--child-no-list,
+.c-nav--piped--before :--child-of-list,
+.c-nav--piped--before :--child-no-list {
+  position: relative;
+}
+.c-nav--piped--after :--child-of-list::after,
+.c-nav--piped--after :--child-no-list::after,
+.c-nav--piped--before :--child-of-list::before,
+.c-nav--piped--before :--child-no-list::before {
+  content: '';
+  display: block;
+  height: 1em;
+
+  /* To vertically center (because height ≠ 100%) */
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* via "after" pseduo-element */
+.c-nav--piped--after :--child-no-list:not(:last-child)::after,
+.c-nav--piped--after :--child-of-list:not(:last-child)::after {
+  border-right: var(--pipe-style);
+  right: calc( -0.5 * var(--link-padding));
+}
+.c-nav--piped--after button:--c-button--as-link:not(:last-child)::after {
+  margin-right: calc( -1 * var(--global-border-width--normal));
+}
+.c-nav--piped--after button:not(:--c-button--as-link):not(:last-child)::after {
+  margin-right: calc( -2 * var(--global-border-width--normal));
+}
+/* via "before" pseduo-element */
+.c-nav--piped--before :--child-no-list:not(:first-child)::before,
+.c-nav--piped--before :--child-of-list:not(:first-child)::before {
+  border-left: var(--pipe-style);
+  left: calc( -0.5 * var(--link-padding));
+}
+.c-nav--piped--before button:--c-button--as-link:not(:first-child)::before {
+  margin-left: calc( -2 * var(--global-border-width--normal));
+}
+.c-nav--piped--before button:not(:--c-button--as-link):not(:first-child)::before {
+  margin-left: calc( -2 * var(--global-border-width--normal));
+}
+/* default */
+nav.c-nav--piped:not([class*="c-nav--piped--"]) {
+  @extend .c-nav--piped--after;
+}
+
+
+
 /* Modifiers: No List */
 
 /* This is not a true modifier. It is required to support certain markup. */
@@ -114,9 +169,10 @@ nav.c-nav--boxed.c-nav--no-list {
 
 
 nav.c-nav {
+  /* NOTE: Client is expected to overwrite these */
   --space-between-inline-items: 0.5em;
 }
-nav.c-nav a {
+nav.c-nav :is(a, :--c-button--as-link) {
   display: inline-block; /* to let line-height define clickable area */
   padding-inline: var(--link-padding);
 }
@@ -125,8 +181,12 @@ nav.c-nav a {
 nav.c-nav--no-list {
   display: flex; /* to remove whitespace between items */
   flex-wrap: wrap;
+  align-items: center; /* for diff-height items e.g. links with buttons */
+}
+nav.c-nav--no-list:has(button) {
+  row-gap: var(--space-between-inline-items);
 }
-nav.c-nav--no-list > a {
+nav.c-nav--no-list > :is(a, button) {
   /* To space items via margin (use `-right` to not increase left indent) */
   margin-right: var(--space-between-inline-items);
 }
@@ -145,6 +205,7 @@ nav.c-nav--no-list > a {
   nav.c-nav :is(ul,ol) {
     display: flex;
     flex-wrap: wrap;
+    align-items: center; /* for diff-height items e.g. links with buttons */
 
     /* To prevent overlap of any lists' decorators (when items are inline) */
     list-style-position: inside;