@excom/valence 0.1.0

package/.rush/temp/chunked-rush-logs/valence.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/valence.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 33.207047999999986
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 151.3585559999999
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,3 @@
+{
+  "../../packages/valence": "../../packages/valence:DpFAJ6l9NZ7PxsGv74etlzI4VS4IyRu5jGEhInb3gEw=:"
+}

package/basic-vars.css

@@ -0,0 +1,395 @@
+/* ============================================================
+ * Theme: basic. Pico-faithful default tokens.
+ *
+ *   - Global tokens (`:root`, `:host`)
+ *   - Responsive font-size breakpoints
+ *   - Element-level overrides (h1-h6, code, forms, ...)
+ *   - Light scheme (default + `[data-scheme="light"]`)
+ *   - Dark scheme (`prefers-color-scheme` or `[data-scheme="dark"]`)
+ *
+ * Values from Pico v2.1.1 compiled output; `--pico-*` renamed `--v-*`.
+ * ============================================================ */
+
+@import "./src/mixins.basic.css";
+
+@layer {
+  :host,
+  :root {
+    @mixin scheme-constants;
+  }
+
+  /* Responsive root font size */
+  @media (min-width: 576px) {
+    :host,
+    :root {
+      --v-font-size: 106.25%;
+    }
+  }
+  @media (min-width: 768px) {
+    :host,
+    :root {
+      --v-font-size: 112.5%;
+    }
+  }
+  @media (min-width: 1024px) {
+    :host,
+    :root {
+      --v-font-size: 118.75%;
+    }
+  }
+  @media (min-width: 1280px) {
+    :host,
+    :root {
+      --v-font-size: 125%;
+    }
+  }
+  @media (min-width: 1536px) {
+    :host,
+    :root {
+      --v-font-size: 131.25%;
+    }
+  }
+  /* Link */
+  :--link {
+    --v-text-decoration: underline;
+  }
+  :--link.contrast,
+  :--link.secondary {
+    --v-text-decoration: underline;
+  }
+  /* Typography */
+
+  :--button,
+  [type="submit"],
+  [type="reset"],
+  [type="file"]::file-selector-button {
+    --v-font-size: 1rem;
+  }
+
+  input,
+  optgroup,
+  select,
+  textarea {
+    --v-font-size: 1rem;
+  }
+
+  :--pre,
+  :--code,
+  :--kbd,
+  :--samp,
+  :--popover,
+  [role="tooltip"] {
+    --v-font-size: 0.75em;
+  }
+
+  :--sub,
+  :--sup {
+    --v-font-size: 0.75em;
+  }
+  :--small {
+    --v-font-size: 0.875em;
+  }
+  :--heading {
+    --v-font-weight: 700;
+  }
+  :--h1 {
+    --v-font-size: 2rem;
+    --v-line-height: 1.125;
+    --v-typography-spacing-top: 3rem;
+  }
+  :--h2 {
+    --v-font-size: 1.75rem;
+    --v-line-height: 1.15;
+    --v-typography-spacing-top: 2.625rem;
+  }
+  :--h3 {
+    --v-font-size: 1.5rem;
+    --v-line-height: 1.175;
+    --v-typography-spacing-top: 2.25rem;
+  }
+  :--h4 {
+    --v-font-size: 1.25rem;
+    --v-line-height: 1.2;
+    --v-typography-spacing-top: 1.874rem;
+  }
+  :--h5 {
+    --v-font-size: 1.125rem;
+    --v-line-height: 1.225;
+    --v-typography-spacing-top: 1.6875rem;
+  }
+  :--h6 {
+    --v-font-size: 1rem;
+    --v-line-height: 1.25;
+    --v-typography-spacing-top: 1.5rem;
+  }
+
+  /* Table */
+  :--tfoot :--td,
+  :--tfoot :--th,
+  :--thead :--td,
+  :--thead :--th {
+    --v-font-weight: 600;
+    --v-border-width: 0.1875rem;
+  }
+
+  /* Code */
+  :--code,
+  :--kbd,
+  :--pre,
+  :--samp {
+    --v-font-family: var(--v-font-family-monospace);
+  }
+  :--kbd {
+    --v-font-weight: bolder;
+  }
+
+  /* Inputs and Selects */
+  :where(select, textarea),
+  input:not(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ) {
+    --v-outline-width: 0.0625rem;
+  }
+  [type="search"] {
+    --v-border-radius: 5rem;
+  }
+
+  /* Checkboxes, Radios and Switches */
+  [type="checkbox"],
+  [type="radio"] {
+    --v-border-width: 0.125rem;
+  }
+  [type="checkbox"][role="switch"] {
+    --v-border-width: 0.1875rem;
+  }
+
+  /* Dropdown */
+  :--details.dropdown :--summary:not([role="button"]) {
+    --v-outline-width: 0.0625rem;
+  }
+  :--nav :--details.dropdown :--summary:focus-visible {
+    --v-outline-width: 0.125rem;
+  }
+
+  /* Group / search */
+  :--search {
+    --v-border-radius: 5rem;
+  }
+  :--group:has(:--button.secondary:focus, [type="submit"].secondary:focus),
+  :--search:has(:--button.secondary:focus, [type="submit"].secondary:focus) {
+    --v-group-box-shadow-focus-with-button: 0 0 0 var(--v-outline-width)
+      var(--v-secondary-focus);
+  }
+  :--group:has(:--button.contrast:focus, [type="submit"].contrast:focus),
+  :--search:has(:--button.contrast:focus, [type="submit"].contrast:focus) {
+    --v-group-box-shadow-focus-with-button: 0 0 0 var(--v-outline-width)
+      var(--v-contrast-focus);
+  }
+  :--group :--button,
+  :--group [type="submit"],
+  :--search :--button,
+  :--search [type="submit"] {
+    --v-form-element-spacing-horizontal: 2rem;
+  }
+
+  /* White chevron on accordion / dropdown buttons */
+  :--details :--summary[role="button"]:not(.outline)::after {
+    filter: brightness(0) invert(1);
+  }
+
+  /* White loading icon on filled buttons */
+  [aria-busy="true"]:not(input, select, textarea):is(
+      :--button,
+      [type="submit"],
+      [type="reset"]
+    ):not(.outline)::before {
+    filter: brightness(0) invert(1);
+  }
+
+  /* Light scheme (default; force with `[data-scheme="light"]`) */
+  :host(:not([data-scheme="dark"])),
+  :root:not([data-scheme="dark"]),
+  [data-scheme="light"] {
+    @mixin scheme-light;
+  }
+  :host(:not([data-scheme="dark"]))
+    input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  :root:not([data-scheme="dark"])
+    input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  [data-scheme="light"]
+    input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ) {
+    --v-form-element-focus-color: var(--v-primary-focus);
+  }
+
+  /* Dark scheme (auto via `prefers-color-scheme: dark`) */
+  @media only screen and (prefers-color-scheme: dark) {
+    :host(:not([data-scheme])),
+    :root:not([data-scheme]) {
+      @mixin scheme-dark;
+    }
+    :host(:not([data-scheme]))
+      input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ),
+    :root:not([data-scheme])
+      input:is(
+        [type="submit"],
+        [type="button"],
+        [type="reset"],
+        [type="checkbox"],
+        [type="radio"],
+        [type="file"]
+      ) {
+      --v-form-element-focus-color: var(--v-primary-focus);
+    }
+    :host(:not([data-scheme]))
+      :--details
+      :--summary[role="button"].contrast:not(.outline)::after,
+    :root:not([data-scheme])
+      :--details
+      :--summary[role="button"].contrast:not(.outline)::after {
+      filter: brightness(0);
+    }
+    :host(:not([data-scheme]))
+      [aria-busy="true"]:not(input, select, textarea).contrast:is(
+        :--button,
+        [type="submit"],
+        [type="reset"]
+      ):not(.outline)::before,
+    :root:not([data-scheme])
+      [aria-busy="true"]:not(input, select, textarea).contrast:is(
+        :--button,
+        [type="submit"],
+        [type="reset"]
+      ):not(.outline)::before {
+      filter: brightness(0);
+    }
+  }
+
+  /* Dark scheme (force with `[data-scheme="dark"]`) */
+  [data-scheme="dark"] {
+    @mixin scheme-dark;
+  }
+  [data-scheme="dark"]
+    input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ) {
+    --v-form-element-focus-color: var(--v-primary-focus);
+  }
+  [data-scheme="dark"]
+    :--details
+    :--summary[role="button"].contrast:not(.outline)::after {
+    filter: brightness(0);
+  }
+  [data-scheme="dark"]
+    [aria-busy="true"]:not(input, select, textarea).contrast:is(
+      :--button,
+      [type="submit"],
+      [type="reset"]
+    ):not(.outline)::before {
+    filter: brightness(0);
+  }
+
+  /* Native accent color (from schemes.scss) */
+  [type="checkbox"],
+  [type="radio"],
+  [type="range"],
+  :--progress {
+    accent-color: var(--v-primary);
+  }
+
+  /* Responsive spacing: landmarks / sections + cards */
+  @define-mixin section-spacing {
+    /* sm */
+    @media (min-width: 576px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.25);
+    }
+    /* md */
+    @media (min-width: 768px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.5);
+    }
+    /* lg */
+    @media (min-width: 1024px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.75);
+    }
+    /* xl */
+    @media (min-width: 1280px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 2);
+    }
+    /* xxl */
+    @media (min-width: 1536px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 2.25);
+    }
+  }
+  :--section {
+    @mixin section-spacing;
+  }
+  body {
+    @mixin abstract-wrapper {
+      > :--header,
+      > :--main,
+      > :--footer {
+        @mixin section-spacing;
+      }
+    }
+  }
+
+  :--article {
+    @media (min-width: 576px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.25);
+      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.25);
+    }
+    @media (min-width: 768px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.5);
+      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.5);
+    }
+    @media (min-width: 1024px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 1.75);
+      --v-block-spacing-horizontal: calc(var(--v-spacing) * 1.75);
+    }
+    @media (min-width: 1280px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 2);
+      --v-block-spacing-horizontal: calc(var(--v-spacing) * 2);
+    }
+    @media (min-width: 1536px) {
+      --v-block-spacing-vertical: calc(var(--v-spacing) * 2.25);
+      --v-block-spacing-horizontal: calc(var(--v-spacing) * 2.25);
+    }
+  }
+}

package/basic.css

@@ -0,0 +1,3 @@
+@import "./src/mixins.basic.css";
+@import "./basic-vars.css";
+@import "./src/apply.css";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@excom/valence",
+  "version": "0.1.0",
+  "description": "Semantic CSS with class / ARIA aliases for native HTML and custom elements",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {},
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/valence"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/valence/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "valence"
+  ],
+  "excom": {
+    "packageType": "library"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs"
+  }
+}

package/rush-logs/valence.apply-exports.cache.log

@@ -0,0 +1 @@
+Project does not have a rush-project.json configuration file, or one provided by a rig, so it does not support caching.

package/rush-logs/valence.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/valence.build_package-metas.cache.log

@@ -0,0 +1 @@
+Project does not have a rush-project.json configuration file, or one provided by a rig, so it does not support caching.

package/rush-logs/valence.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/src/aliases.css

@@ -0,0 +1,125 @@
+/* ============================================================
+ * Element aliases. Each tag alias is a `@custom-selector` that expands to:
+ *   1. native tag (`article`)
+ *   2. role alias (`[role="article"]`)
+ *   3. class alias (`.tag-article`)
+ *
+ * Only for elements that can be styled/behaved generically. `input`
+ * cannot; `dialog` can (`[open]` ≡ `[aria-expanded="true"]`).
+ *
+ * - No aliases for inimitable natives (input, textarea, …).
+ * - State like `[open]` must also use `:is(dialog)` so it hits the
+ *   right element. Same for `:not()`.
+ * - No `>` / `+`: these aliases get used inside `:not()`.
+ * - State aliases: `:--{el}--{name}`. No class aliases for states
+ *   (aria / data only). Nested under the element alias
+ *   (`:--details { &:--details--open { } }`). Assert against the
+ *   right element (`:not([aria-valuenow])` breaks native `progress`).
+ * - No pseudo-elements: `postcss-custom-selectors` wraps in `:is()`,
+ *   which breaks them. See `modal.css` backdrop.
+ * - This file is tag synonyms only, exclusive to the `@custom-selector`.
+ *   Mixin-style aliases (no clear element) live elsewhere.
+ * ============================================================ */
+
+/* No ARIA role: HTML AAM maps <details> to no corresponding role. ARIA 1.3 mentions "group" but adoption is inconsistent and would collide with :--group. */
+@custom-selector :--details details, .tag-details;
+
+@custom-selector :--details--open [open], [aria-expanded="true"];
+/* No ARIA role: <summary>'s implicit role is "button" per HTML AAM, but exposing that here would collide with :--button. The disclosure state belongs on the parent <details>, not on summary. */
+@custom-selector :--summary summary, .tag-summary;
+
+@custom-selector :--dialog dialog, [role="dialog"], .tag-dialog;
+@custom-selector :--dialog--open :is(dialog)[open], [aria-expanded="true"];
+/* No native tag. Child of `:--dialog`, or next sibling of `content-drawer`. */
+@custom-selector :--dialog-backdrop-aliases [role="presentation"], .tag-backdrop;
+
+/* Popover is a global HTML attribute (Popover API), not a tag. */
+@custom-selector :--popover [popover], .tag-popover;
+@custom-selector :--popover--open :popover-open, [aria-expanded="true"];
+
+@custom-selector :--header header, [role="header"], .tag-header;
+@custom-selector :--footer footer, [role="footer"], .tag-footer;
+
+@custom-selector :--nav nav, [role="navigation"], .tag-nav;
+@custom-selector :--main main, [role="main"], .tag-main;
+@custom-selector :--section section, [role="section"], .tag-section;
+@custom-selector :--article article, [role="article"], .tag-article;
+@custom-selector :--aside aside, [role="complementary"], .tag-aside;
+
+@custom-selector :--link a, [role="link"], .tag-link;
+
+@custom-selector :--button button, [role="button"], [type="button"], .tag-button;
+@custom-selector :--button--disabled [disabled], [aria-disabled="true"];
+
+@custom-selector :--list ul, ol, [role="list"], .tag-list;
+@custom-selector :--li li, [role="listitem"], .tag-li;
+@custom-selector :--tree [role="tree"], .tag-tree;
+/* No ARIA role: <label> maps to no corresponding role per HTML AAM. */
+@custom-selector :--label label, [role="label"], .tag-label;
+@custom-selector :--group [role="group"], .tag-group;
+@custom-selector :--search [role="search"], .tag-search;
+
+@custom-selector :--progress progress, [role="progressbar"], .tag-progress;
+@custom-selector :--progress-aliases [role="progressbar"], .tag-progress;
+@custom-selector :--progress--value [value], [aria-valuenow];
+@custom-selector :--progress--indeterminate :is(progress):indeterminate, :is([role="progressbar"], .tag-progress):not(:--progress--value);
+
+/* No ARIA role: <pre> maps to no corresponding role per HTML AAM. */
+@custom-selector :--pre pre, .tag-pre;
+@custom-selector :--code code, [role="code"], .tag-code;
+/* No ARIA role: <kbd> maps to no corresponding role per HTML AAM. */
+@custom-selector :--kbd kbd, .tag-kbd;
+/* No ARIA role: <samp> maps to no corresponding role per HTML AAM. */
+@custom-selector :--samp samp, .tag-samp;
+
+@custom-selector :--img img, [role="img"], .tag-img;
+
+@custom-selector :--figure figure, [role="figure"], .tag-figure;
+@custom-selector :--figcaption figcaption, [role="caption"]:is(figure *, [role="figure"] *), .tag-figcaption;
+
+@custom-selector :--hr hr, [role="separator"], .tag-hr;
+
+@custom-selector :--table table, [role="table"], .tag-table;
+@custom-selector :--tr tr, [role="row"], .tag-tr;
+@custom-selector :--th th, [role="columnheader"], [role="rowheader"], [scope="col"], [scope="row"], .tag-th;
+@custom-selector :--th--sort [aria-sort];
+@custom-selector :--th--sort-asc [aria-sort="ascending"];
+@custom-selector :--th--sort-desc [aria-sort="descending"];
+@custom-selector :--td td, [role="cell"], [role="gridcell"], .tag-td;
+@custom-selector :--thead-th th:not([scope="row"]), [role="columnheader"], [scope="col"], .tag-th-col;
+@custom-selector :--thead thead, [role="rowgroup"]:has(:--thead-th), .tag-thead;
+@custom-selector :--tbody-th th:not([scope="col"]), [role="rowheader"], [scope="row"], .tag-th-row;
+@custom-selector :--tbody tbody, [role="rowgroup"]:has(:--tbody-th, :--td), .tag-tbody;
+/* No ARIA role: <tfoot> shares [role="rowgroup"] with thead/tbody and there is no positional/structural cue to disambiguate it (no equivalent of :--thead-th / :--tbody-th for footer cells). */
+@custom-selector :--tfoot tfoot, .tag-tfoot;
+
+@custom-selector :--p p, [role="paragraph"], .tag-p;
+/* No ARIA role: <address> maps to no corresponding role per HTML AAM. */
+@custom-selector :--address address, .tag-address;
+@custom-selector :--blockquote blockquote, [role="blockquote"], .tag-blockquote;
+/* No ARIA role: <dl> maps to no corresponding role per HTML AAM (the legacy "definitionlist" role was removed; "list" is in :--list and would lose dl-specific semantics). */
+@custom-selector :--dl dl, .tag-dl;
+@custom-selector :--form form, [role="form"], .tag-form;
+/* No ARIA role: <hgroup> maps to no corresponding role per HTML AAM. */
+@custom-selector :--hgroup hgroup, .tag-hgroup;
+/* No ARIA role on the ul-/ol-specific aliases: their implicit role is "list", which is already exposed via :--list. Adding [role="list"] here would make any role="list" element match :--ul AND :--ol simultaneously, defeating the tag-specific intent (e.g. ul-only square markers). */
+@custom-selector :--ul ul, .tag-ul;
+@custom-selector :--ol ol, .tag-ol;
+@custom-selector :--small small, .tag-small;
+@custom-selector :--note [role="note"], .tag-note;
+@custom-selector :--b b, .tag-b;
+@custom-selector :--strong strong, .tag-strong;
+@custom-selector :--sub sub, .tag-sub;
+@custom-selector :--sup sup, .tag-sup;
+@custom-selector :--h1 h1, [role="heading"][aria-level="1"], .tag-h1;
+@custom-selector :--h2 h2, [role="heading"][aria-level="2"], .tag-h2;
+@custom-selector :--h3 h3, [role="heading"][aria-level="3"], .tag-h3;
+@custom-selector :--h4 h4, [role="heading"][aria-level="4"], .tag-h4;
+@custom-selector :--h5 h5, [role="heading"][aria-level="5"], .tag-h5;
+@custom-selector :--h6 h6, [role="heading"][aria-level="6"], .tag-h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6, [role="heading"], .tag-heading;
+@custom-selector :--mark mark, [role="mark"], .tag-mark;
+@custom-selector :--ins ins, [role="insertion"], .tag-ins;
+@custom-selector :--del del, [role="deletion"], .tag-del;
+/* No ARIA role: <abbr> maps to no corresponding role per HTML AAM (the legacy "acronym" role was deprecated). */
+@custom-selector :--abbr abbr, .tag-abbr;

package/src/apply.css

@@ -0,0 +1,54 @@
+/* ============================================================
+ * Apply every framework mixin.
+ *
+ * Mixins: `mixins.default.css`. Theme tokens: `<theme>-vars.css`.
+ *
+ * Element / alias styles sit in an anonymous `@layer` so consumer
+ * and custom-element sheets can override them. Class-only utilities
+ * stay unlayered: unlayered beats every `@layer` (including later
+ * anonymous `@layer { }` from custom elements imported after Valence.css),
+ * so `.grid` / `.abstract` still win at equal specificity.
+ * ============================================================ */
+
+@layer {
+  @mixin module-document;
+  @mixin module-landmarks;
+  @mixin module-section;
+
+  @mixin module-typography;
+  @mixin module-link;
+  @mixin module-button;
+  @mixin module-table;
+  @mixin module-embedded;
+  @mixin module-code;
+  @mixin module-figure;
+  @mixin module-misc;
+
+  @mixin module-basics;
+  @mixin module-checkbox-radio-switch;
+  @mixin module-input-color;
+  @mixin module-input-date;
+  @mixin module-input-file;
+  @mixin module-input-range;
+  @mixin module-input-search;
+
+  @mixin module-accordion;
+  @mixin module-card;
+  @mixin module-dropdown;
+  @mixin module-group;
+  @mixin module-loading;
+  @mixin module-modal;
+  @mixin module-nav;
+  @mixin module-popover;
+  @mixin module-progress;
+  @mixin module-tooltip;
+
+  @mixin module-accessibility;
+}
+
+/* Class-only utilities. Unlayered, so they beat layered CE styles. */
+@mixin module-abstract;
+@mixin module-container;
+@mixin module-grid;
+@mixin module-overflow-auto;
+@mixin module-opt-outs;