feat(components): c-nav demo & "--piped" modifier

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}}

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

@@ -1,22 +1,3 @@
-/*
-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");
 
 
@@ -26,6 +7,7 @@ Styleguide Components.Nav
 /* Block */
 
 nav.c-nav {
+  /* NOTE: Client is expected to overwrite these */
   --link-padding: 0.5em;
 }
 
@@ -40,6 +22,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 +83,59 @@ nav.c-nav--boxed.c-nav--no-list {
 
 
 
+/* Modifiers: Pipes */
+
+nav.c-nav--piped {
+  --pipe-style: var(--global-border--normal);
+}
+
+
+/* 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%);
+}
+
+/* default */
+nav.c-nav--piped:not([class*="c-nav--piped--"]) {
+  @extend .c-nav--piped--after;
+}
+/* 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));
+}
+/* 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));
+}
+
+
+
 /* Modifiers: No List */
 
 /* This is not a true modifier. It is required to support certain markup. */
@@ -114,6 +150,7 @@ 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 {

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

@@ -0,0 +1,30 @@
+<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>
+  </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>
+  </dt>
+  {{/each}}
+</dl>

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

@@ -0,0 +1,17 @@
+<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>
+  </dd>
+  {{/each}}
+</dl>

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

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

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

@@ -0,0 +1,55 @@
+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:
+      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

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

@@ -0,0 +1,13 @@
+/* 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);
+}
+
+small > code:not(:last-child)::after {
+  content: '';
+  padding-inline: 0.5em;
+  display: inline;
+}

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