@tacc/core-styles 0.11.0 → 2.0.0

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

@@ -0,0 +1,15 @@
+<figure {{#if class}}class="{{ class }}"{{/if}}>
+  <img
+    {{#if use-image-wide}}
+    src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
+    {{else if use-image-tall}}
+    src="https://cep.tacc.utexas.edu/media/filer_public/87/b2/87b24b37-7b66-4d4a-b305-47c2308892ea/spectrum-tall-1024px.png"
+    {{else}}
+    src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
+    {{/if}}
+    alt="(sample image)"
+  />
+  <figcaption>
+    I am a &lt;figcaption&gt; within a &lt;figure&gt;. <span class="c-message c-message--style-inline c-message--type-warning">I may be wider than image. If so, should I wrap?</span>
+  </figcaption>
+</figure>

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

@@ -0,0 +1,5 @@
+<img
+  {{#if class}}class="{{ class }}"{{/if}}
+  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"
+  alt="(sample image)"
+/>

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

@@ -0,0 +1,15 @@
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue. Nulla in ante id mi mattis elementum. Proin augue felis, feugiat eu nulla id, laoreet egestas nibh. Praesent pharetra at urna ut ullamcorper. Nam eleifend mauris ex, sit amet sollicitudin quam mollis sed.
+</p>
+<p>
+Maecenas faucibus ut neque hendrerit egestas. Pellentesque id sodales arcu, ac tempus nunc. Integer aliquam a urna vitae molestie. Ut commodo erat porta erat accumsan, et gravida tellus vehicula. Proin ac enim imperdiet, placerat odio sed, pharetra velit. Duis a nunc ut est tincidunt malesuada. Vivamus tristique augue nunc, at dictum ante luctus pretium. Donec ac suscipit lorem. Integer lacus arcu, cursus nec arcu ac, fermentum mollis leo. Praesent quis erat convallis, bibendum nibh eu, sagittis quam. Donec sodales est quis aliquet lacinia.
+</p>
+<p>
+Nunc condimentum pretium lorem, nec malesuada odio consectetur tristique. Morbi condimentum nec massa eu commodo. Praesent faucibus congue risus, auctor rhoncus augue faucibus eget. Cras faucibus et tortor a dignissim. Cras non nibh magna. Aenean quis ullamcorper risus. Mauris molestie, leo vel elementum bibendum, quam ex sodales felis, vulputate laoreet erat nibh at odio. Phasellus eget ante cursus, elementum magna vel, tristique elit. Aenean risus ipsum, ullamcorper tempor ante eu, laoreet venenatis lorem. Sed at vehicula sapien, a ultricies diam.
+</p>
+<p>
+Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
+</p>
+<p>
+Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.
+</p>

package/src/lib/_imports/_partials/text-and-link-no-href.hbs

@@ -0,0 +1 @@
+<p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <a>lazy dog</a> (with no <code>href</code> attribute). A waxy gent chuckled over my fab jazzy quips.</p>

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

@@ -0,0 +1 @@
+Donec sed viverra velit, pellentesque blandit mi. Duis accumsan efficitur sem sed dictum. Donec cursus nulla nec condimentum malesuada. Aliquam tincidunt finibus condimentum. Aliquam erat volutpat. Mauris porttitor nulla quam, id bibendum arcu lobortis id. Donec vestibulum, neque ac malesuada mollis, mauris dui tincidunt libero, a faucibus elit nisi sit amet dolor. Nunc aliquam vitae nunc eu varius. Duis malesuada est orci, et accumsan turpis suscipit vel. Nam eleifend arcu eu tortor ullamcorper, sed pellentesque libero vehicula. Aliquam pharetra eget sem in dictum. Suspendisse et enim vitae metus bibendum pellentesque sed in ligula. Duis a dui lacus. Nulla tempor nisl vel luctus consequat.

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

@@ -0,0 +1 @@
+Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.

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

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis odio elit, faucibus blandit tellus mollis ut. Donec vel nibh at nisl fermentum sodales nec quis risus. Nullam et magna in metus vulputate fermentum a a augue.

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

@@ -0,0 +1 @@
+Proin ac <strong>rhoncus diam (&lt;strong&gt;)</strong>, sit amet <b>congue nibh (&lt;b&gt;)</b>. Nullam consectetur pretium erat vitae ornare. <em>Quisque porta (&lt;em&gt;)</em> a dolor vel maximus. <i>Nullam dictum (&lt;i&gt;)</i> risus pellentesque <u>orci hendrerit (&lt;u&gt;)</u> commodo. Nunc et dolor sed turpis <s>accumsan feugiat (&lt;s&gt;)</s> quis sed mi. Aliquam venenatis <mark>scelerisque neque (&lt;mark&gt;)</mark> id lobortis.

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

@@ -0,0 +1 @@
+Veni, vidi, vici.

package/src/lib/_imports/_preview.hbs

@@ -2,58 +2,129 @@
 {{! FAQ: Any <link>s, and comments AFTER the first, are migrated to <head> }}
 <link rel='author' href='https://github.com/TACC/Core-Styles' />
 
-<!-- styles: support (the current component) -->
-{{#each _target.context.supportStyles}}
-  <link rel='stylesheet' href='{{path this}}' />
-{{/each}}
-<!-- styles: base (the current component) -->
-{{#unless styles.shouldSkipBase}}
-  <link
-    rel='stylesheet'
-    href='{{path "/assets/{{ _target.context.subdir }}/{{ _target.baseHandle }}.css"}}'
-  />
-{{/unless}}
 
 
-<!-- styles: global (for every component) -->
-<!-- (manually configured) -->
-{{#each styles.external.global}}
-  <link rel='stylesheet' href='{{this}}' />
+<!-- Styles: Layers -->
+{{!-- https://confluence.tacc.utexas.edu/x/b53tDg --}}
+<style>
+@layer foundation, base, project;
+</style>
+
+{{#if _target.context.shouldLoadBootstrap}}
+{{#unless _target.context.shouldSkipBootstrap }}
+<!-- Styles: Global (for current pattern): Bootstrap -->
+<style>
+  @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation);
+</style>
+{{/unless}}
+{{/if}}
+
+<!-- Styles: Global (for every pattern) -->
+<style>
+{{#each globalStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
 {{/each}}
-{{#each styles.internal.global}}
-  <link rel='stylesheet' href='{{path this}}' />
+</style>
+
+{{#if _target.context.shouldLoadCMS }}
+{{#unless _target.context.shouldSkipCMS }}
+<!-- Styles: Global (for current pattern): CMS -->
+<style>
+{{#each cmsStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
 {{/each}}
+</style>
+{{/unless}}
+{{/if}}
 
-<!-- styles: local (for current component) -->
-<!-- (automatically found) -->
-{{#each _target.resources.assets}}
-  {{#if isCSS}}
-    <link
-      rel='stylesheet'
-      href='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
-    />
+{{#if _target.context.shouldLoadDocs }}
+{{#unless _target.context.shouldSkipDocs }}
+<!-- Styles: Global (for current pattern): Docs -->
+<style>
+{{#each docsStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
   {{/if}}
 {{/each}}
-<!-- (manually configured) -->
-{{#each styles.external.local}}
-  <link rel='stylesheet' href='{{this}}' />
+</style>
+{{/unless}}
+{{/if}}
+
+{{#if _target.context.shouldLoadPortal }}
+{{#unless _target.context.shouldSkipPortal }}
+<!-- Styles: Global (for current pattern): Portal -->
+<style>
+{{#each portalStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
 {{/each}}
-{{#each styles.internal.local}}
-  <link rel='stylesheet' href='{{path this}}' />
+</style>
+{{/unless}}
+{{/if}}
+
+
+
+{{#if _target.context.supportStyles}}
+<!-- Styles: Local (for current pattern): Supporting Patterns -->
+<style>
+  {{#each _target.context.supportStyles}}
+  @import url('{{path this}}');
+  {{/each}}
+</style>
+{{/if}}
+
+{{#unless _target.context.shouldSkipPattern}}
+<!-- Styles: Local (for current pattern): Current Pattern -->
+<style>
+  @import url('{{path "/assets/{{ _target.context.subdir }}/{{ _target.baseHandle }}.css"}}');
+</style>
+{{/unless}}
+
+
+
+<!-- Styles: Demo (for current pattern) -->
+{{#each _target.resources.assets}}
+{{#if this.isCSS}}
+<style>
+  @import url('{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}');
+</style>
+{{/if}}
 {{/each}}
 
-{{! styles: specific to pattern library (so pattern library can override any) }}
-{{> @css }}
 
-<!-- scripts: local (for current component) -->
-<!-- (automatically found) -->
+
+{{#if _target.context.shouldLoadBootstrap}}
+<!-- Scripts: Global (for current pattern): Bootstrap -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+{{/if}}
+
+<!-- Scripts: Local (for current pattern) -->
 {{#each _target.resources.assets}}
-  {{#if isJS}}
-    <script
-      src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
-    ></script>
-  {{/if}}
+{{#if this.isJS}}
+<script
+  type="module"
+  src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+></script>
+{{/if}}
 {{/each}}
 
-<!-- markup (for current component) -->
+
+
+{{!-- Markup (for current pattern) --}}
+<main>
 {{{yield}}}
+</main>

package/src/lib/_imports/branding_logos.css

@@ -5,8 +5,6 @@
             `em` nor `rem` was not allowed because results were not consistent.
             UPDATE: As of PR #312, this has likely changed (untested). */
 
-/* Shared by All Templates */
-
 /* Branding Selectors  */
 
 .branding-header {

package/src/lib/_imports/components/admonition/admonition.hbs

@@ -0,0 +1,39 @@
+<div class="admonition tip">
+  <p class="admonition-title">Tip</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+<div class="admonition hint">
+  <p class="admonition-title">Hint</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+<div class="admonition important">
+  <p class="admonition-title">Important</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+
+<div class="admonition attention">
+  <p class="admonition-title">Attention</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+<div class="admonition note">
+  <p class="admonition-title">Note</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+
+<div class="admonition warning">
+  <p class="admonition-title">Warning</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+<div class="admonition caution">
+  <p class="admonition-title">Caution</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+
+<div class="admonition error">
+  <p class="admonition-title">Error</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>
+<div class="admonition danger">
+  <p class="admonition-title">Danger</p>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</div>

package/src/lib/_imports/components/admonition/config.yml

@@ -0,0 +1,2 @@
+context:
+  shouldLoadDocs: true

package/src/lib/_imports/components/admonition/demo.css

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.admonition {
+  margin-top: 1em;
+}

package/src/lib/_imports/components/admonition/readme.md

@@ -0,0 +1,14 @@
+To style ["Admonition" messages][rtd-admonition].
+
+> **ⓘ Notice**
+>
+> These styles merely extend the [TACC message component]({{path './c-message--type' }}) (the "section" scope).
+
+[rtd-admonition]: https://learning-readthedocs.readthedocs.io/en/latest/Options/admonition.html "ReadTheDocs: Admonition"
+
+<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/components/admonition.css

@@ -0,0 +1,35 @@
+@import url("../components/c-message.css");
+
+
+
+.admonition {
+  @extend .c-message;
+  @extend .c-message--scope-section;
+}
+.admonition-title {
+  font-weight: var(--bold);
+  margin-top: unset; /* undo Browser */
+  margin-bottom: unset; /* undo `html-elements.cms.css` */
+}
+
+.admonition.tip,
+.admonition.hint,
+.admonition.important {
+  @extend .c-message--type-success;
+  @extend .c-message--type-success.c-message--scope-section;
+}
+.admonition.attention,
+.admonition.note {
+  @extend .c-message--type-info;
+  @extend .c-message--type-info.c-message--scope-section;
+}
+.admonition.caution,
+.admonition.warning {
+  @extend .c-message--type-warning;
+  @extend .c-message--type-warning.c-message--scope-section;
+}
+.admonition.error,
+.admonition.danger {
+  @extend .c-message--type-error;
+  @extend .c-message--type-error.c-message--scope-section;
+}

package/src/lib/_imports/components/align/align.hbs

@@ -0,0 +1,51 @@
+<dl>
+
+  <dt>Images</dt>
+  <dd>
+    {{> @img class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @img class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @img class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Figures</dt>
+  <dd>
+    {{> @figure class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @figure class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @figure class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Figure Blockquotes<br />
+    <small>i.e. <code>&lt;figure class="s-blockquote"&gt;</code></small></dt>
+  <dd>
+    {{> @s-blockquote class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @s-blockquote class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @s-blockquote class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Blockquotes</dt>
+  <dd>
+    {{> @blockquote class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @blockquote class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @blockquote class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+</dl>

package/src/lib/_imports/components/align/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/components/align/demo.css

@@ -0,0 +1,7 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.align-right,
+.align-left,
+.align-center {
+  max-width: 50%; /* a default is sensible, but leave it to client */
+}

package/src/lib/_imports/components/align/readme.md

@@ -0,0 +1,31 @@
+Simple classes to align media or content within paragraphs:
+- `align-left`
+- `align-right`
+- `align-center`
+
+> **⚠️ Important**
+>
+> The alignment can **not** be seen on client without a width on the element. _The demo adds a width._
+
+> **☞ Remember**
+>
+> The benefit of these classes instead of other solutions (e.g. `style="float:right"`):
+>
+> 1. Spacing is consistent and aware of its own alignment.
+> 2. No need for [deprecated `<img align="…">` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#deprecated_attributes).
+> 3. No need for [deprecated `<center>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center).
+
+> **ⓘ Notice**
+>
+> These classes are from [Django CMS Picture] ([source]), but suitable for general usage, especially in [TACC-Docs], which does not use Django CMS.
+
+[Django CMS Picture]: https://github.com/django-cms/djangocms-picture#readme
+[source]: https://github.com/django-cms/djangocms-picture/blob/2.3.0/djangocms_picture/models.py#L24-L34
+[TACC-Docs]: https://github.com/TACC/TACC-Docs/
+
+<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/components/align.css

@@ -0,0 +1,33 @@
+/* Basic Structure */
+
+.align-right,
+.align-left {
+  margin-bottom: var(--global-space--grid-gap);
+}
+.align-right {
+  float: right;
+  margin-left: var(--global-space--grid-gap);
+}
+.align-left {
+  float: left;
+  margin-right: var(--global-space--grid-gap);
+}
+.align-center {
+  /* Client should manage display */
+  /* FAQ: Display is likely block-ish e.g. block, inline-block, table */
+  /* FAQ: We cannot assume which display is best for client */
+  /* display: ... */
+  margin-inline: auto;
+}
+
+
+
+/* Edge Cases */
+
+/* To arbitrarily force wrap to prevent taking up too much content */
+.align-right,
+.align-left,
+.align-center {
+  /* NOTE: Demo has been given the default */
+  /* max-width: 50%; /* a default is sensible, but leave it to client */
+}

package/src/lib/_imports/components/bootstrap/bootstrap--container.hbs

@@ -1,4 +1,4 @@
 <div class="container">
   <h1>Lorem Ipsum</h1>
-  {{> @loremipsum }}
+  {{> @loremipsum-paragraphs }}
 </div>

package/src/lib/_imports/components/bootstrap/bootstrap--modal.hbs

@@ -14,7 +14,7 @@
             </button>
           </div>
           <div class="modal-body">
-            {{> @loremipsum }}
+            {{> @loremipsum-paragraphs }}
           </div>
           <div class="modal-footer">
             <button type="button" class="c-button c-button--secondary" data-dismiss="modal">

package/src/lib/_imports/components/bootstrap/bootstrap--modal.readme.md

@@ -1,5 +1,9 @@
 To override and extend [Bootstrap Modals](https://getbootstrap.com/docs/4.3/components/modal/).
 
+> **⚠️ WARNING**
+>
+> The modal will not scroll unless using [Bootstrap 4.3](https://getbootstrap.com/docs/4.3/components/modal/). CMS uses [Bootstrap 4.0](https://getbootstrap.com/docs/4.0/components/modal/). The relevant class is `modal-dialog-scrollable`.
+
 <script>
 /* To open external links in new window */
 Array.from(document.links)

package/src/lib/_imports/components/bootstrap/config.yml

@@ -1,16 +1,12 @@
-preview: '@preview.bootstrap'
+context:
+  shouldLoadBootstrap: true
 variants:
   - name: default
     hidden: true
   - name: container
     status: ready
   - name: modal
-    context:
-      supportStyles:
-        - /assets/components/c-button.css
+    status: prototype
   - name: form
     label: (Portal) Form
     status: prototype
-    context:
-      supportStyles:
-        - /assets/components/c-button.css

package/src/lib/_imports/components/bootstrap/{docs.css → demo.css}

@@ -3,5 +3,5 @@
 /* All Bootstrap pattern library CSS loads for every component */
 /* FAQ: To support legacy client imports, Bootstrap file organization is odd */
 
-@import url("./bootstrap--form.docs.css");
-@import url("./bootstrap--modal.docs.css");
+@import url("./bootstrap--form.demo.css");
+@import url("./bootstrap--modal.demo.css");

package/src/lib/_imports/components/bootstrap.container.css

@@ -1,4 +1,3 @@
-@import url("../settings/max-width.css");
 @import url("../tools/media-queries.css");
 
 @media (--xx-wide-and-above) {

package/src/lib/_imports/components/bootstrap.form.css

@@ -1,4 +1,3 @@
-@import url('../settings/border.css');
 
 .form-control {
   border: var(--global-border--normal);

package/src/lib/_imports/components/bootstrap.modal.css

@@ -60,3 +60,6 @@
 .modal-header.has-MuiTabs .close {
   transform: translate(-25%, 25%);
 }
+.modal-header.has-MuiTabs .MuiTabs-indicator {
+  background-color: white;
+}

package/src/lib/_imports/components/c-button/{docs.css → demo.css}

@@ -1,10 +1,5 @@
 /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
 
-dd > * {
-  margin-right: 0.5em;
-  vertical-align: middle;
-}
-
 .c-button > i {
   font-style: normal;
 }

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

@@ -18,6 +18,9 @@
 
   display: inline-block;
 
+  /* To ensure identical <button> and <a> instances have same width */
+  box-sizing: border-box;
+
   border-width: var(--global-border-width--normal);
   border-style: solid;
 
@@ -33,6 +36,11 @@ a.c-button {
 a.c-button--is-busy {
   cursor: default;
 }
+.c-button:--disabled {
+  /* WARNING: Opinionated */
+  -webkit-user-select: none;
+  user-select: none;
+}
 
 .c-button:not(:--disabled) {
   cursor: pointer; /* WARNING: Opinionated */
@@ -236,7 +244,7 @@ a.c-button--is-busy {
 .c-button--as-link:where(:not(:--disabled)):hover {
   @extend .x-link--hover;
 }
-.c-button--as-link:active {
+.c-button--as-link:where(:not(:--disabled)):active {
   @extend .x-link--active;
 }