@tacc/core-styles 1.0.0 → 2.0.1

package/src/lib/_imports/settings/space.css

@@ -34,8 +34,10 @@ Styleguide Settings.CustomProperties.Space
 
   /* Miscellaneous */
   --global-space--list-indent: 40px;   /* browser default (Firefox, Edge) */
-  --global-space--section-gap: 45px;   /* recurring design doc spacing */
-  --global-space--grid-gap: 15px;      /* Bootstrap `.container` & `.row` */
+  --global-space--section-gap: 60px;   /* recurring design doc spacing */
+  --global-space--grid-gap: 30px;      /* Bootstrap `.container` & `.row` */
+  --global-space--above-breadcrumbs: 45px;
+  --global-space--under-breadcrumbs: 40px;
 
   /* Applications */
   --global-space--section-top: 12px;
@@ -51,4 +53,6 @@ Styleguide Settings.CustomProperties.Space
   /* CMS Pages */
   --global-space--hr-buffer-above: 10px;
   --global-space--hr-buffer-below: 30px;
+  --global-space--p-buffer-above: 0; /* origin: Bootstrap _reboot.css */
+  --global-space--p-buffer-below: 2rem; /* origin: html-elements.cms.css */
 }

package/src/lib/_imports/tools/selectors.common.css

@@ -0,0 +1,13 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/*
+Multiple Elements
+
+These are global selectors to target common elements.
+
+Styleguide Tools.CustomSelectors.MultipleElements
+*/
+@custom-selector :--action   button, a;
+@custom-selector :--main-content   [role="main"], main;
+@custom-selector :--portal-content   #root;
+@custom-selector :--modal   .modal;

package/src/lib/_imports/tools/selectors.css

@@ -0,0 +1,20 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/* NOTE: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally). */
+
+/*
+Custom Selectors
+
+These are global selectors to target specific elements.
+
+Usage: `:is(:--action) { … }`
+Usage: `:--main-content .some-class { … }`
+Usage: `:--monospace--block { … }`
+
+Reference:
+- https://drafts.csswg.org/css-extensions/#custom-selectors
+
+Styleguide Tools.CustomSelectors
+*/
+@import url("../tools/selectors.common.css");
+@import url("../tools/selectors.monospace.css");

package/src/lib/_imports/tools/selectors.monospace.css

@@ -0,0 +1,64 @@
+/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */
+
+/*
+Monospace Elements & Components
+
+These are global selectors to target markup for monospace patterns.
+
+Styleguide Tools.CustomSelectors.Monospace
+*/
+
+
+
+/* Base */
+
+@custom-selector :--monospace
+  :--monospace-elements,
+  :--monospace-components;
+
+@custom-selector :--monospace-elements
+  /* elements used in a specific manner */
+  code, kbd, pre, samp, var;
+
+@custom-selector :--monospace-components
+  /* tacc-docs components */
+  .cmd-line,
+  .job-script;
+
+
+
+/* Modifiers */
+
+@custom-selector :--monospace--inline
+  code:not(pre > *) /* inline code */,
+  kbd;
+
+@custom-selector :--monospace--block
+  pre > code /* code block with mostly input data */,
+  pre > samp /* code block with only output data */;
+
+
+
+@custom-selector :--monospace--boxed
+  code /* any code */,
+  pre > samp /* code block with only output data */;
+
+/* For output data e.g. command output in CLI demo */
+@custom-selector :--monospace--output
+  samp /* code block with only output data */;
+
+
+
+@custom-selector :--monospace--kbd
+  kbd;
+
+
+
+/* Elements */
+
+@custom-selector :--monospace__kbd
+  code kbd;
+
+/* For data that is neither input nor output e.g. command prompt in CLI demo */
+@custom-selector :--monospace__prompt
+  pre code u /* command prompts */;

package/src/lib/_imports/tools/x-link/readme.md

@@ -3,6 +3,7 @@ UI states of [`<a>` anchor element](https://developer.mozilla.org/en-US/docs/Web
 | Mixin | Description
 | - | -
 | `.x-link`         | default state
+| `.x-link--disabled`| "disabled" state (e.g. no `href` attribute)
 | `.x-link--hover`  | `:hover` state
 | `.x-link--active` | `:active` (click) state
 

package/src/lib/_imports/tools/x-link/x-link.hbs

@@ -3,11 +3,13 @@
 <dl>
   <dt>Standard</dt>
   <dd><span class="x-link">default</span></dd>
+  <dd><span class="x-link x-link--disabled">"disabled"</span></dd>
   <dd><span class="x-link x-link--hover">:hover</span></dd>
   <dd><span class="x-link x-link--active">:active</span></dd>
   <dd><span class="x-link x-link--hover x-link--active">:hover and :active</span></dd>
   <dt>Irregular</dt>
   <dd><span class="x-link--irregular">default</span></dd>
+  <dd><span class="x-link x-link--irregular--disabled">"disabled"</span></dd>
   <dd><span class="x-link x-link--irregular--hover">:hover</span></dd>
   <dd><span class="x-link x-link--irregular--active">:active</span></dd>
   <dd><span class="x-link x-link--irregular--hover x-link--irregular--active">:hover and :active</span></dd>

package/src/lib/_imports/tools/x-link.css

@@ -5,6 +5,10 @@
   text-underline-offset: 0.2em;
   text-decoration-thickness: var(--global-border-width--normal);
 }
+.x-link--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 .x-link--hover {
   text-decoration-line: underline;
   text-decoration-style: solid;
@@ -23,6 +27,9 @@
 
   text-decoration-line: underline;
 }
+.x-link--irregular--disabled {
+  @extend .x-link--disabled;
+}
 .x-link--irregular--hover {
   @extend .x-link--hover;
 

package/src/lib/_imports/{tools/x-link → trumps}/demo.css

@@ -1,6 +1,7 @@
-/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+/* Scopes */
 
-p {
+/* To make all paragraph children narrow */
+.demo-narrow-paragraphs p {
   margin: 10px;
   max-width: 40ch; /* to wrap text so link is in middle of middle sentence */
 }

package/src/lib/_imports/trumps/s-affixed-input-wrapper/config.yml

@@ -1,3 +1,4 @@
+label: (CMS) S Affixed Input Wrapper
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadCMS: true
+  📝 shouldLoadBootstrap: temporary dependence, until proven to work on Portal

package/src/lib/_imports/trumps/s-blockquote/readme.md

@@ -0,0 +1,12 @@
+A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) within a [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure).
+
+> **☝ Idea**
+>
+> Should this be implemented as `figure.has-blockquote` (fallback) `figure:has(blockquote)` (actual)? We can retain legacy support for `figure.s-blockquote` as an alternate class name.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/trumps/s-blockquote/s-blockquote.hbs

@@ -0,0 +1,4 @@
+<figure class="s-blockquote {{#if class}}{{ class }}{{/if}}">
+  {{> @blockquote noCite=true class=false}}
+  <figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
+</figure>

package/src/lib/_imports/trumps/s-blockquote.css

@@ -1,29 +1,9 @@
-/*
-Blockquote
-
-A [`<blockquote>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote).
-
-Markup:
-<figure class="s-blockquote">
-  <blockquote cite="https://www.huxley.net/bnw/four.html">
-    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
-  </blockquote>
-  <figcaption>Aldous Huxley, <cite>Brave New World</cite></figcaption>
-</figure>
-
-Styleguide Trumps.Scopes.Blockquote
-*/
-
-.s-blockquote {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
 .s-blockquote blockquote {
-  margin-bottom: 0; /* overwrite Bootstrap */
+  margin: unset; /* undo browser */
 
-  font-size: 1.125em;
   font-style: italic;
 }
+
 .s-blockquote blockquote p {
   margin: 0;
   white-space: pre-wrap;
@@ -33,13 +13,11 @@ Styleguide Trumps.Scopes.Blockquote
 
 .s-blockquote figcaption {
   margin-top: 0.3em;
-
-  font-size: 1em;
 }
 .s-blockquote figcaption::before {
   content: "— ";
 }
 
 .s-blockquote cite {
-  font-style: normal; /* overwrite browser */
+  font-style: unset; /* undo browser */
 }

package/src/lib/_imports/trumps/s-breadcrumbs.css

@@ -3,6 +3,9 @@ Breadcrumbs
 
 A list of links to ancestor navigation (pages or sections that are a parent, grandparent, et cetera of the current page or section) and the current page or section itself.
 
+- `.s-breadcrumbs`: root class for <nav>, <... [role="nav"]>, or <ol>
+- `.s-breadcrumbs-via-ul`: alternate root class for <ul> (not recommended)
+
 Notice: A scope class is used to enforce appropriate semantic HTML.
 
 Markup:
@@ -25,6 +28,7 @@ Markup:
 
 Styleguide Trumps.Scopes.Breadcrumbs
 */
+@import url("../tools/selectors.css");
 @import url("../tools/x-truncate.css");
 
 
@@ -33,12 +37,12 @@ Styleguide Trumps.Scopes.Breadcrumbs
 
 /* Base i.e. Container */
 
-nav.s-breadcrumbs {
-  padding-top: 15px;
+.s-breadcrumbs:is(nav),
+.s-breadcrumbs-via-ul {
+  padding-top: var(--global-space--above-breadcrumbs);
+  margin-bottom: var(--global-space--under-breadcrumbs);
 
   font-size: var(--global-font-size--x-small);
-
-  text-transform: uppercase;
 }
 
 
@@ -46,7 +50,8 @@ nav.s-breadcrumbs {
 /* Elements i.e. Content */
 
 /* To undo default list styles */
-nav.s-breadcrumbs ol {
+.s-breadcrumbs:is(nav) ol,
+.s-breadcrumbs-via-ul ul {
   list-style: none; /* overwrite browser styles */
   padding-left: unset; /* undo html-elements.css */
   margin-bottom: unset; /* undo html-elements.css */
@@ -54,16 +59,19 @@ nav.s-breadcrumbs ol {
   font-weight: var(--global-font-weight--medium);
 }
 
-ol.s-breadcrumbs li,
-nav.s-breadcrumbs ol li {
+.s-breadcrumbs:is(ol) li,
+.s-breadcrumbs:is(nav) ol li,
+.s-breadcrumbs-via-ul ul li {
   display: inline-block;
 }
 
-ol.s-breadcrumbs li + li::before,
-nav.s-breadcrumbs ol li + li::before {
+.s-breadcrumbs:is(ol) li + li::before,
+.s-breadcrumbs:is(nav) ol li + li::before,
+.s-breadcrumbs-via-ul ul li + li::before {
   content: ' > ';
 }
 
-nav.s-breadcrumbs ol li:last-child span {
+.s-breadcrumbs:is(nav) ol li:last-child,
+.s-breadcrumbs-via-ul ul li:last-child {
   font-weight: var(--bold);
 }

package/src/lib/_imports/trumps/s-guide-doc.css

@@ -12,45 +12,6 @@ Styleguide Trumps.Scopes.GuideDoc
 
 /* ELEMENTS */
 
-
-/* ELEMENTS: Content Sectioning */
-
-/* Fake <hr> above <h2> */
-.s-guide-doc h2:not(hr + h2)::before {
-  display: block;
-  content: '';
-
-  /* To mirror hr (site.css) */
-  margin-top: var(--global-space--hr-buffer-above);
-  border-top: 1px solid var(--global-color-primary--light);
-  margin-bottom: var(--global-space--hr-buffer-below);
-}
-
-
-/* ELEMENTS: Text Content */
-
-.s-guide-doc blockquote {
-  opacity: 0.75;
-  border: var(--global-border--normal);
-
-  padding: 1em;
-}
-.s-guide-doc blockquote > *:last-child { margin-bottom: 0; }
-
-@media only screen and (min-width: 768px) {
-  blockquote { width: 600px; }
-}
-
-.s-guide-doc figure {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.s-guide-doc figcaption {
-  font-weight: bold;
-}
-
-
 /* ELEMENTS: Table Content */
 
 .s-guide-doc table {

package/src/lib/_imports/trumps/s-header.css

@@ -84,7 +84,7 @@ Styleguide Trumps.Scopes.Header
   --line-height: 24px;
   --border-width: 4px;
   --border-offset: calc(var(--nav-padding-vert) - var(--border-width));
-  --border-color: rgb(213, 181, 124);
+  --border-color: var(--global-color-secondary--light);
 
   /* The nav vertical padding does not match the link border, so the alignment
      of the link border with the bottom of the header is off by small amount */

package/src/lib/_imports/trumps/s-irregular-links/config.yml

@@ -1,4 +1 @@
-context:
-  supportStyles:
-    - /assets/tools/x-link/demo.css
 label: Links (Irregular)

package/src/lib/_imports/trumps/s-irregular-links/s-irregular-links.hbs

@@ -1,10 +1,22 @@
-<dl>
+<dl class="demo-narrow-paragraphs s-irregular-links">
   <dt>Links</dt>
-  <dd class="s-irregular-links">
+  <dd>
     {{> @text-and-link }}
   </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
+  <dd>
+    {{> @text-and-button-as-link }}
+  </dd>
   <dt>Buttons as Links</dt>
-  <dd class="s-irregular-links">
+  <dd>
+    {{> @text-and-link }}
+  </dd>
+  <dd>
+    {{> @text-and-link-no-href }}
+  </dd>
+  <dd>
     {{> @text-and-button-as-link }}
   </dd>
 </dl>

package/src/lib/_imports/trumps/s-paragraph-table/config.yml

@@ -0,0 +1,7 @@
+context:
+  data:
+    rows:
+      - paragraph: true
+      - paragraph: true
+      - paragraph: true
+      - paragraph: true

package/src/lib/_imports/trumps/s-paragraph-table/readme.md

@@ -0,0 +1,17 @@
+A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) instead of cells.
+
+> **ⓘ Notice**
+>
+> - Text will not truncate. It will wrap.
+> - Only a single column is supported.
+
+> **⁉ Help**
+>
+> Should text truncate? Ask designers.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/trumps/s-paragraph-table/s-paragraph-table.hbs

@@ -0,0 +1,7 @@
+<div class="{{#if class }}{{ class }}{{else}}s-paragraph-table{{/if}}">
+{{#each data.rows}}
+  {{#if paragraph}}
+  <p>{{> @text-of-one-paragraph-short }}</p>
+  {{/if}}
+{{/each}}
+</div>

package/src/lib/_imports/trumps/s-paragraph-table.css

@@ -0,0 +1,3 @@
+/* FAQ: Using @custom-selector within elements/table */
+/* SEE: src/lib/_imports/elements/table--basic.css */
+/* SEE: src/lib/_imports/elements/table.selectors.css */

package/src/main.js

@@ -13,7 +13,8 @@ const version = require('./bin/version.js');
  * @param {string} input - Parse CSS files from which directory
  * @param {string} output - Output CSS files to which directory
  * @param {object} [opts={}] - Options
- * @param {string} [opts.baseMirrorDir] - Do not add this path when mirroring
+ * @param {string} [opts.baseMirrorDir] - Path to NOT add when mirroring
+ * @param {string} [opts.fileExt] - Custom file extension for output files
  * @param {array.string} [opts.customConfigs] - List of YAML config file paths
  * (The first file is merged on top of the base config.)
  * (Each successive file overwrites the file before it.)
@@ -24,6 +25,7 @@ function buildStylesheets(input, output, opts = {}) {
   const buildOpts = {
     verbose: opts.verbose || null,
     baseMirrorDir: opts.baseMirrorDir || null,
+    fileExt: opts.fileExt || null,
   };
 
   const inputResolved = resolve(input);

package/dist/elements/links/demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles v0.11.0-30-g66400cb+ | MIT | github.com/TACC/Core-Styles */p{margin:10px;max-width:40ch}

package/dist/objects/o-table-wrap/extra.overflow-hidden.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.o-table-wrap--overflow-hidden table{white-space:nowrap}

package/dist/objects/o-table-wrap/extra.overflow-scroll.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 1.0.0+ | MIT | github.com/TACC/Core-Styles */.o-table-wrap--overflow-scroll table{white-space:nowrap}

package/dist/trumps/s-affixed-input-wrapper/demo.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.11.0-7-g34c8c4c+ | MIT | github.com/TACC/Core-Styles */p{margin:10px;max-width:40ch}

package/src/lib/_imports/_partials/loremipsum.hbs

@@ -1,18 +0,0 @@
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
-<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

package/src/lib/_imports/_partials/text-of-one-paragraph.hbs

@@ -1 +0,0 @@
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

package/src/lib/_imports/components/c-data-list.html

@@ -1,131 +0,0 @@
-<!-- D. Lists -->
-<article>
-  <h4>Horizontal &amp; Wide &amp; Truncate Values</h4>
-  <dl
-    class="c-data-list c-data-list--is-horz c-data-list--is-wide c-data-list--should-truncate-values"
-  >
-    <dt class="c-data-list__key">Name</dt>
-    <dd class="c-data-list__value">King</dd>
-    <dt class="c-data-list__key">Surname</dt>
-    <dd class="c-data-list__value">Kong</dd>
-    <dt class="c-data-list__key">Favorite Fruit</dt>
-    <dd class="c-data-list__value">Banana</dd>
-  </dl>
-</article>
-<article>
-  <h4>Horizontal &amp; Narrow</h4>
-  <dl class="c-data-list c-data-list--is-horz c-data-list--is-narrow">
-    <dt class="c-data-list__key">Name</dt>
-    <dd class="c-data-list__value">King</dd>
-    <dt class="c-data-list__key">Surname</dt>
-    <dd class="c-data-list__value">Kong</dd>
-    <dt class="c-data-list__key">Favorite Fruit</dt>
-    <dd class="c-data-list__value">Banana</dd>
-  </dl>
-</article>
-<article>
-  <h4>Vertical &amp; Wide</h4>
-  <dl class="c-data-list c-data-list--is-vert c-data-list--is-wide">
-    <dt class="c-data-list__key">Name</dt>
-    <dd class="c-data-list__value">King</dd>
-    <dt class="c-data-list__key">Surname</dt>
-    <dd class="c-data-list__value">Kong</dd>
-    <dt class="c-data-list__key">Favorite Fruit</dt>
-    <dd class="c-data-list__value">Banana</dd>
-  </dl>
-</article>
-<article>
-  <h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
-  <dl
-    class="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values"
-  >
-    <dt class="c-data-list__key">Name</dt>
-    <dd class="c-data-list__value">King</dd>
-    <dt class="c-data-list__key">Surname</dt>
-    <dd class="c-data-list__value">Kong</dd>
-    <dt class="c-data-list__key">Favorite Fruit</dt>
-    <dd class="c-data-list__value">Banana</dd>
-  </dl>
-</article>
-
-<!-- Tables -->
-<article>
-  <h4>Horizontal &amp; Wide</h4>
-  <table class="c-data-list c-data-list--is-horz c-data-list--is-wide">
-    <tbody>
-      <tr>
-        <th class="c-data-list__key">Name</th>
-        <td class="c-data-list__value">King</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Surname</th>
-        <td class="c-data-list__value">Kong</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Favorite Fruit</th>
-        <td class="c-data-list__value">Banana</td>
-      </tr>
-    </tbody>
-  </table>
-</article>
-<article>
-  <h4>Horizontal &amp; Narrow</h4>
-  <table class="c-data-list c-data-list--is-horz c-data-list--is-narrow">
-    <tbody>
-      <tr>
-        <th class="c-data-list__key">Name</th>
-        <td class="c-data-list__value">King</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Surname</th>
-        <td class="c-data-list__value">Kong</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Favorite Fruit</th>
-        <td class="c-data-list__value">Banana</td>
-      </tr>
-    </tbody>
-  </table>
-</article>
-<article>
-  <h4>Vertical &amp; Wide &amp; Truncate Values</h4>
-  <table
-    class="c-data-list c-data-list--is-vert c-data-list--is-wide c-data-list--should-truncate-values"
-  >
-    <tbody>
-      <tr>
-        <th class="c-data-list__key">Name</th>
-        <td class="c-data-list__value">King</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Surname</th>
-        <td class="c-data-list__value">Kong</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Favorite Fruit</th>
-        <td class="c-data-list__value">Banana</td>
-      </tr>
-    </tbody>
-  </table>
-</article>
-<article>
-  <h4>Vertical &amp; Narrow &amp; Truncate Values</h4>
-  <table
-    class="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values"
-  >
-    <tbody>
-      <tr>
-        <th class="c-data-list__key">Name</th>
-        <td class="c-data-list__value">King</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Surname</th>
-        <td class="c-data-list__value">Kong</td>
-      </tr>
-      <tr>
-        <th class="c-data-list__key">Favorite Fruit</th>
-        <td class="c-data-list__value">Banana</td>
-      </tr>
-    </tbody>
-  </table>
-</article>

package/src/lib/_imports/elements/links/config.yml

@@ -1,3 +0,0 @@
-context:
-  supportStyles:
-    - /assets/tools/x-link/demo.css