fix(components): c-nav support buttons

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

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

@@ -1,5 +1,6 @@
 @import url("../tools/media-queries.css");
 
+@import url("./c-button.selectors.css");
 
 
 
@@ -89,6 +90,12 @@ 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 */
 
@@ -123,12 +130,18 @@ nav.c-nav--piped {
   border-right: var(--pipe-style);
   right: calc( -0.5 * var(--link-padding));
 }
+.c-nav--piped--after button: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: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;
@@ -153,7 +166,7 @@ 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);
 }
@@ -162,8 +175,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);
 }
@@ -182,6 +199,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;

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

@@ -10,6 +10,14 @@
     <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>
@@ -25,6 +33,14 @@
     <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>

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

@@ -12,6 +12,16 @@
     <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>

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

@@ -18,6 +18,7 @@ variants:
     status: wip
   - name: no-list
     context:
+      show_buttons: true
       modifiers:
         - []
         - [boxed]

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

@@ -5,6 +5,11 @@ main {
   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: '';