@vrembem/content 4.0.0-next.44

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Sebastian Nitu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# Content
+
+A content wrapper that provides typographic styles for common HTML elements.
+
+[Documentation](https://vrembem.com/packages/content)
+
+## Installation
+
+```sh
+npm install @vrembem/content
+```
+
+### Styles
+
+```scss
+@use "@vrembem/content";
+```

package/dev/index.css

@@ -0,0 +1,174 @@
+@layer base {
+  .content {
+    font-family: var(--vb-content-font-family, inherit);
+    font-size: var(--vb-content-font-size, inherit);
+    line-height: var(--vb-content-line-height, inherit);
+    color: var(--vb-content-foreground, var(--vb-foreground));
+  }
+  .content > * + * {
+    margin-top: var(--vb-content-spacing);
+  }
+  .h1, .content > h1, .h2, .content > h2, .h3, .content > h3, .h4, .content > h4, .h5, .content > h5, .h6, .content > h6 {
+    font-family: var(--vb-headings-font-family, inherit);
+    font-size: var(--vb-headings-font-size, 1em);
+    font-weight: var(--vb-headings-font-weight, var(--vb-font-weight-semi-bold));
+    line-height: var(--vb-headings-line-height, inherit);
+    color: var(--vb-headings-foreground, var(--vb-foreground-strong));
+  }
+  .h1, .content > h1 {
+    --vb-headings-font-size: 2.75em;
+  }
+  .h2, .content > h2 {
+    --vb-headings-font-size: 2em;
+  }
+  .h3, .content > h3 {
+    --vb-headings-font-size: 1.75em;
+  }
+  .h4, .content > h4 {
+    --vb-headings-font-size: 1.5em;
+  }
+  .h5, .content > h5 {
+    --vb-headings-font-size: 1.25em;
+  }
+  .h6, .content > h6 {
+    --vb-headings-font-size: 1em;
+  }
+  .link, .content :not(div) > a {
+    color: var(--vb-link-foreground, var(--vb-foreground-accent));
+    text-decoration: var(--vb-link-decoration, underline);
+    text-decoration-thickness: var(--vb-link-decoration-thickness, 1px);
+    text-underline-offset: var(--vb-link-underline-offset, 2px);
+  }
+  .link code, .content :not(div) > a code {
+    color: var(--vb-link-foreground, var(--vb-foreground-accent));
+    background-color: var(--vb-background-alt);
+  }
+  .link:hover, .link:focus, .content :not(div) > a:hover, .content :not(div) > a:focus {
+    color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
+    text-decoration: var(--vb-link-decoration-hover, none);
+  }
+  .link:hover code, .link:focus code, .content :not(div) > a:hover code, .content :not(div) > a:focus code {
+    color: var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));
+  }
+  .link:focus, .content :not(div) > a:focus {
+    outline: var(--vb-link-focus-ring, currentcolor dotted 1px);
+    outline-offset: var(--vb-link-focus-ring-offset, 0.125rem);
+  }
+  .list, .content > ul, .content > ol {
+    margin-left: var(--vb-list-indent, var(--vb-spacing-lg));
+  }
+  .list ul,
+  .list ol, .content > ul ul,
+  .content > ul ol, .content > ol ul,
+  .content > ol ol {
+    margin-left: var(--vb-list-indent, var(--vb-spacing-lg));
+  }
+  .list li li,
+  .list li + li, .content > ul li li,
+  .content > ul li + li, .content > ol li li,
+  .content > ol li + li {
+    margin-top: var(--vb-list-spacing, var(--vb-spacing-sm));
+  }
+  .list-style-none {
+    list-style: none !important;
+  }
+  .code, .content :not(pre) > code {
+    padding: var(--vb-code-padding, 0.125rem 0.375rem);
+    border: var(--vb-code-border);
+    border-radius: var(--vb-code-border-radius, var(--vb-border-radius));
+    font-family: var(--vb-font-family-mono);
+    font-size: var(--vb-code-font-size, var(--vb-font-size-sm));
+    color: var(--vb-code-foreground, var(--vb-foreground-accent-alt));
+    overflow-wrap: break-word;
+    background: var(--vb-code-background, var(--vb-background-alt));
+  }
+  .pre, .content > pre {
+    overflow: auto;
+    padding: var(--vb-pre-padding, var(--vb-spacing-md));
+    border: var(--vb-pre-border, none);
+    border-radius: var(--vb-pre-border-radius, var(--vb-border-radius));
+    font-family: var(--vb-font-family-mono);
+    color: var(--vb-pre-foreground, var(--vb-foreground-strong));
+    background: var(--vb-pre-background, var(--vb-background-alt));
+  }
+  .pre code, .content > pre code {
+    padding: 0;
+    border: none;
+    font-size: var(--vb-pre-font-size, var(--vb-font-size-sm));
+    color: inherit;
+    background: none;
+  }
+  .blockquote, .content > blockquote {
+    position: relative;
+    padding: var(--vb-blockquote-padding, var(--vb-spacing-md));
+    border: var(--vb-blockquote-border, var(--vb-border));
+    border-radius: var(--vb-blockquote-border-radius, var(--vb-border-radius));
+    color: var(--vb-blockquote-foreground, currentcolor);
+    background: var(--vb-blockquote-background, transparent);
+  }
+  .blockquote > * + *, .content > blockquote > * + * {
+    margin-top: var(--vb-blockquote-spacing, var(--vb-spacing-md));
+  }
+  .sep, .content > hr {
+    display: block;
+    height: 0;
+    border: none;
+    border-top: var(--vb-separator-border-width, var(--vb-border-width)) var(--vb-separator-border-style, var(--vb-border-style)) var(--vb-separator-border-color, var(--vb-border-color));
+  }
+  .arrow,
+  .arrow-up,
+  .arrow-down,
+  .arrow-left,
+  .arrow-right {
+    pointer-events: none;
+    transform-origin: center;
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-color: var(--vb-arrow-color, currentcolor) transparent transparent;
+    border-style: solid;
+    border-width: var(--vb-arrow-size, 6px 4px);
+    border-bottom-width: 0;
+    border-radius: var(--vb-arrow-radius, 2px);
+  }
+  .arrow-up {
+    transform: rotate(180deg);
+  }
+  .arrow-left {
+    transform: rotate(90deg);
+  }
+  .arrow-right {
+    transform: rotate(-90deg);
+  }
+  .loading-spinner {
+    width: var(--vb-loading-size, 1em);
+    height: var(--vb-loading-size, 1em);
+    position: relative;
+    display: inline-block;
+    border: var(--vb-loading-border, 2px solid);
+    border-color: var(--vb-loading-color, currentcolor) var(--vb-loading-color, currentcolor) transparent transparent;
+    border-radius: var(--vb-border-radius-circle);
+    animation: spin var(--vb-loading-duration, 0.6s) infinite linear;
+  }
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    clip-path: inset(50%);
+  }
+}
+
+/*# sourceMappingURL=index.css.map */

package/dev/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../index.scss","../src/modules/_content.scss","../src/modules/_headings.scss","../../../node_modules/@vrembem/core/src/scss/modules/_tokens.scss","../src/modules/_link.scss","../src/modules/_list.scss","../src/modules/_code.scss","../src/modules/_pre.scss","../src/modules/_blockquote.scss","../src/modules/_separator.scss","../src/modules/_arrow.scss","../../../node_modules/@vrembem/core/src/scss/library/_arrow.scss","../src/modules/_loading-spinner.scss","../../../node_modules/@vrembem/core/src/scss/library/_size.scss","../../../node_modules/@vrembem/core/src/scss/library/_loading-spinner.scss","../src/modules/_sr-only.scss","../../../node_modules/@vrembem/core/src/scss/library/_sr-only.scss"],"names":[],"mappings":"AAIA;ECGE;IACE;IACA;IACA;IACA;;EAEA;IACE;;ECLJ;IACE;IACA;IACA;IACA;IACA;;EAYA;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;ED1JF;IC0JE;;EC7KJ;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAIF;IAEE;IAIA;;EAEA;IACE;;EAOJ;IACE;IACA;;EC/BJ;IACE;;EAEA;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;AAAA;AAAA;IAEE;;EAIJ;IACE;;ECfF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ECRF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;ECdJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;ECTJ;IACE;IACA;IACA;IACA;;ECNF;AAAA;AAAA;AAAA;AAAA;ICMA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDTA;IACE;;EAGF;IACE;;EAGF;IACE;;EEjBF;ICUE,OCCY;IDAZ;ICOF,UFjBgC;IEkBhC;IACA;IACA;IACA;IACA;;EAME;IACE;MACE;;IAGF;MACE;;;ECnCN;ICFA;IACA;IACA;IACA;IACA;IACA;IACA","file":"index.css"}

package/dist/index.css

@@ -0,0 +1 @@
+@layer base{.content{font-family:var(--vb-content-font-family, inherit);font-size:var(--vb-content-font-size, inherit);line-height:var(--vb-content-line-height, inherit);color:var(--vb-content-foreground, var(--vb-foreground))}.content>*+*{margin-top:var(--vb-content-spacing)}.h1,.content>h1,.h2,.content>h2,.h3,.content>h3,.h4,.content>h4,.h5,.content>h5,.h6,.content>h6{font-family:var(--vb-headings-font-family, inherit);font-size:var(--vb-headings-font-size, 1em);font-weight:var(--vb-headings-font-weight, var(--vb-font-weight-semi-bold));line-height:var(--vb-headings-line-height, inherit);color:var(--vb-headings-foreground, var(--vb-foreground-strong))}.h1,.content>h1{--vb-headings-font-size:2.75em}.h2,.content>h2{--vb-headings-font-size:2em}.h3,.content>h3{--vb-headings-font-size:1.75em}.h4,.content>h4{--vb-headings-font-size:1.5em}.h5,.content>h5{--vb-headings-font-size:1.25em}.h6,.content>h6{--vb-headings-font-size:1em}.link,.content :not(div)>a{color:var(--vb-link-foreground, var(--vb-foreground-accent));text-decoration:var(--vb-link-decoration, underline);text-decoration-thickness:var(--vb-link-decoration-thickness, 1px);text-underline-offset:var(--vb-link-underline-offset, 2px)}.link code,.content :not(div)>a code{color:var(--vb-link-foreground, var(--vb-foreground-accent));background-color:var(--vb-background-alt)}.link:hover,.link:focus,.content :not(div)>a:hover,.content :not(div)>a:focus{color:var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)));text-decoration:var(--vb-link-decoration-hover, none)}.link:hover code,.link:focus code,.content :not(div)>a:hover code,.content :not(div)>a:focus code{color:var(--vb-link-foreground-hover, light-dark(oklch(from var(--vb-foreground-accent) calc(l - 0.1) c h), oklch(from var(--vb-foreground-accent) calc(l + 0.1) c h)))}.link:focus,.content :not(div)>a:focus{outline:var(--vb-link-focus-ring, currentcolor dotted 1px);outline-offset:var(--vb-link-focus-ring-offset, 0.125rem)}.list,.content>ul,.content>ol{margin-left:var(--vb-list-indent, var(--vb-spacing-lg))}.list ul,.list ol,.content>ul ul,.content>ul ol,.content>ol ul,.content>ol ol{margin-left:var(--vb-list-indent, var(--vb-spacing-lg))}.list li li,.list li+li,.content>ul li li,.content>ul li+li,.content>ol li li,.content>ol li+li{margin-top:var(--vb-list-spacing, var(--vb-spacing-sm))}.list-style-none{list-style:none !important}.code,.content :not(pre)>code{padding:var(--vb-code-padding, 0.125rem 0.375rem);border:var(--vb-code-border);border-radius:var(--vb-code-border-radius, var(--vb-border-radius));font-family:var(--vb-font-family-mono);font-size:var(--vb-code-font-size, var(--vb-font-size-sm));color:var(--vb-code-foreground, var(--vb-foreground-accent-alt));overflow-wrap:break-word;background:var(--vb-code-background, var(--vb-background-alt))}.pre,.content>pre{overflow:auto;padding:var(--vb-pre-padding, var(--vb-spacing-md));border:var(--vb-pre-border, none);border-radius:var(--vb-pre-border-radius, var(--vb-border-radius));font-family:var(--vb-font-family-mono);color:var(--vb-pre-foreground, var(--vb-foreground-strong));background:var(--vb-pre-background, var(--vb-background-alt))}.pre code,.content>pre code{padding:0;border:none;font-size:var(--vb-pre-font-size, var(--vb-font-size-sm));color:inherit;background:none}.blockquote,.content>blockquote{position:relative;padding:var(--vb-blockquote-padding, var(--vb-spacing-md));border:var(--vb-blockquote-border, var(--vb-border));border-radius:var(--vb-blockquote-border-radius, var(--vb-border-radius));color:var(--vb-blockquote-foreground, currentcolor);background:var(--vb-blockquote-background, transparent)}.blockquote>*+*,.content>blockquote>*+*{margin-top:var(--vb-blockquote-spacing, var(--vb-spacing-md))}.sep,.content>hr{display:block;height:0;border:none;border-top:var(--vb-separator-border-width, var(--vb-border-width)) var(--vb-separator-border-style, var(--vb-border-style)) var(--vb-separator-border-color, var(--vb-border-color))}.arrow,.arrow-up,.arrow-down,.arrow-left,.arrow-right{pointer-events:none;transform-origin:center;display:inline-block;flex-grow:0;flex-shrink:0;width:0;height:0;border-color:var(--vb-arrow-color, currentcolor) rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:var(--vb-arrow-size, 6px 4px);border-bottom-width:0;border-radius:var(--vb-arrow-radius, 2px)}.arrow-up{transform:rotate(180deg)}.arrow-left{transform:rotate(90deg)}.arrow-right{transform:rotate(-90deg)}.loading-spinner{width:var(--vb-loading-size, 1em);height:var(--vb-loading-size, 1em);position:relative;display:inline-block;border:var(--vb-loading-border, 2px solid);border-color:var(--vb-loading-color, currentcolor) var(--vb-loading-color, currentcolor) rgba(0,0,0,0) rgba(0,0,0,0);border-radius:var(--vb-border-radius-circle);animation:spin var(--vb-loading-duration, 0.6s) infinite linear}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.sr-only{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%)}}/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../index.scss","../src/modules/_content.scss","../src/modules/_headings.scss","../../../node_modules/@vrembem/core/src/scss/modules/_tokens.scss","../src/modules/_link.scss","../src/modules/_list.scss","../src/modules/_code.scss","../src/modules/_pre.scss","../src/modules/_blockquote.scss","../src/modules/_separator.scss","../src/modules/_arrow.scss","../../../node_modules/@vrembem/core/src/scss/library/_arrow.scss","../src/modules/_loading-spinner.scss","../../../node_modules/@vrembem/core/src/scss/library/_size.scss","../../../node_modules/@vrembem/core/src/scss/library/_loading-spinner.scss","../src/modules/_sr-only.scss","../../../node_modules/@vrembem/core/src/scss/library/_sr-only.scss"],"names":[],"mappings":"AAIA,YCGE,SACE,mDACA,+CACA,mDACA,yDAEA,aACE,qCCLJ,gGACE,oDACA,4CACA,4EACA,oDACA,iEAYA,gBC0JE,+BD1JF,gBC0JE,4BD1JF,gBC0JE,+BD1JF,gBC0JE,8BD1JF,gBC0JE,+BD1JF,gBC0JE,4BC7KJ,2BACE,6DACA,qDACA,mEACA,2DAEA,qCACE,6DACA,0CAIF,8EAEE,wKAIA,sDAEA,kGACE,wKAOJ,uCACE,2DACA,0DC/BJ,8BACE,wDAEA,8EAEE,wDAGF,gGAEE,wDAIJ,iBACE,2BCfF,8BACE,kDACA,6BACA,oEACA,uCACA,2DACA,iEACA,yBACA,+DCRF,kBACE,cACA,oDACA,kCACA,mEACA,uCACA,4DACA,8DAEA,4BACE,UACA,YACA,0DACA,cACA,gBCdJ,gCACE,kBACA,2DACA,qDACA,0EACA,oDACA,wDAEA,wCACE,8DCTJ,iBACE,cACA,SACA,YACA,sLCNF,sDCMA,oBACA,wBACA,qBACA,YACA,cACA,QACA,SACA,6EACA,mBACA,2CACA,sBACA,0CDTA,UACE,yBAGF,YACE,wBAGF,aACE,yBEjBF,iBCUE,MCCY,+DAOd,SFjBgC,SEkBhC,qBACA,2CACA,qHACA,6CACA,gEAME,gBACE,KACE,uBAGF,GACE,0BCnCN,SCFA,kBACA,gBACA,UACA,WACA,YACA,UACA","file":"index.css"}

package/index.scss

@@ -0,0 +1,17 @@
+@use "sass:meta";
+@forward "./src/config";
+@forward "./src/functions";
+
+@layer base {
+  @include meta.load-css("./src/modules/content");
+  @include meta.load-css("./src/modules/headings");
+  @include meta.load-css("./src/modules/link");
+  @include meta.load-css("./src/modules/list");
+  @include meta.load-css("./src/modules/code");
+  @include meta.load-css("./src/modules/pre");
+  @include meta.load-css("./src/modules/blockquote");
+  @include meta.load-css("./src/modules/separator");
+  @include meta.load-css("./src/modules/arrow");
+  @include meta.load-css("./src/modules/loading-spinner");
+  @include meta.load-css("./src/modules/sr-only");
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@vrembem/content",
+  "description": "A content wrapper that provides typographic styles for common HTML elements.",
+  "version": "4.0.0-next.44",
+  "license": "MIT",
+  "keywords": [
+    "BEM",
+    "front-end",
+    "component",
+    "content"
+  ],
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "sass": "./index.scss",
+      "style": "./dist/index.css"
+    },
+    "./dev/*": "./dev/*",
+    "./dist/*": "./dist/*",
+    "./*": "./src/*"
+  },
+  "files": [
+    "dev",
+    "dist",
+    "src",
+    "index.scss"
+  ],
+  "scripts": {
+    "serve": "vite",
+    "build": "npm-run-all clean styles",
+    "clean": "del dev && del dist",
+    "styles": "npm-run-all styles:dev styles:dist",
+    "styles:dev": "sass index.scss dev/index.css --load-path=../../node_modules",
+    "styles:dist": "sass index.scss dist/index.css --load-path=../../node_modules --style=compressed",
+    "watch": "npm run watch:styles",
+    "watch:styles": "concurrently 'npm run styles:dev -- --watch' 'npm run styles:dist -- --watch'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sebnitu/vrembem.git",
+    "directory": "packages/base"
+  },
+  "homepage": "https://github.com/sebnitu/vrembem/tree/main/packages/base#readme",
+  "dependencies": {
+    "@vrembem/core": "^4.0.0-next.44"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "db5caf39b87d0e20d9ff9ed1821166d3d28c6635"
+}

package/src/_config.scss

@@ -0,0 +1,59 @@
+@use "@vrembem/core";
+@use "@vrembem/core/config";
+
+$config: () !default;
+
+// prettier-ignore
+$default: (
+  // Controls whether module styles are output. This can be overridden on a per 
+  // module basis using the `content-output-exceptions` config option.
+  // @type boolean
+  "content-output": true,
+
+  // Modules to exclude from the output rule set in `content-output`
+  // @type list
+  "content-output-exceptions": (),
+
+  // A map containing module names as keys and their preferred class selectors
+  // @type map
+  "content-classes": (
+    "separator": "sep"
+  ),
+
+  // A prefix to apply to content class selectors. Provided value is automatically 
+  // suffixed with a "-" character when applied.
+  // @type string
+  "content-prefix": "",
+
+  // Used to output the heading styles and their font-size/line-height CSS 
+  // variables. Should contain a key of the heading level to output and the 
+  // value of a font-size and optional line-height (space separated).
+  // @type map
+  "content-headings": (
+    "h1": 2.75em,
+    "h2": 2em,
+    "h3": 1.75em,
+    "h4": 1.5em,
+    "h5": 1.25em,
+    "h6": 1em
+  ),
+
+  // Map modules to their preferred content selectors
+  // @type map
+  "content-selectors": (
+    "h1": "> h1",
+    "h2": "> h2",
+    "h3": "> h3",
+    "h4": "> h4",
+    "h5": "> h5",
+    "h6": "> h6",
+    "link": ":not(div) > a",
+    "list": "> ul, > ol",
+    "code": ":not(pre) > code",
+    "pre": "> pre",
+    "blockquote": "> blockquote",
+    "separator": "> hr"
+  )
+);
+
+@include config.apply($config, $default);

package/src/_functions.scss

@@ -0,0 +1,133 @@
+@use "sass:list";
+@use "sass:string";
+@use "sass:map";
+@use "sass:meta";
+@use "@vrembem/core/config";
+
+/// Conditional logic for when to output a content module.
+///
+/// @param {string} $module
+///   The module name to conditionally toggle output.
+///
+/// @return {boolean}
+///   The resolved condition boolean.
+///
+@function maybe-output($module) {
+  @if list.index(config.get("content-output-exceptions"), $module) {
+    @return not config.get("content-output");
+  } @else {
+    @return config.get("content-output");
+  }
+}
+
+/// Creates a content selector for a content module if configured in `$content-include`.
+///
+/// @param {string} $module
+///   The content module to check if content selector should be included.
+///
+/// @return {selector}
+///   A partial CSS selector starting with ", " meant to be appended to an
+///   existing selector. Will return an empty string if not configured.
+///
+/// @access private
+@function -get-content-selector($module) {
+  // Initialize the content selector as an empty string
+  $content-selector: "";
+
+  // Check if we should include this module in content styles
+  @if map.has-key(config.get("content-selectors"), $module) {
+    // Initialize the content class selector
+    $content: "content";
+
+    // Check if there's a shortname for the content module
+    @if map.has-key(config.get("content-classes"), "content") {
+      $content: map.get(config.get("content-classes"), "content");
+    }
+
+    // Apply the block prefix to the root content class
+    $content: '#{config.get("prefix-block")}#{$content}';
+
+    // Create the content selector using the content module selector
+    $list: string.split(map.get(config.get("content-selectors"), $module), ",");
+
+    @each $item in $list {
+      $content-selector: "#{$content-selector}, .#{$content} #{$item}";
+    }
+  }
+
+  // Return the content selector
+  @return $content-selector;
+}
+
+/// Generate a content module selector with a core prefix and optional modifiers.
+///
+/// @param {string} $module
+///   The content module name.
+/// @param {string} $args...
+///   Additional strings appended as modifiers to the class selector.
+///
+/// @return {selector}
+///   A valid content module CSS selector.
+///
+@function selector(
+  $module,
+  $args...
+) {
+  @if meta.type-of($module) == "map" or meta.type-of($module) == "list" {
+    // If $module is a map or list, build a selector for each item/key
+    $selectors: ();
+    $items: $module;
+
+    @if meta.type-of($module) == "map" {
+      $items: map.keys($module);
+    }
+
+    @each $item in $items {
+      $selectors: list.append(
+        $selectors,
+        selector(
+          $item,
+          $args...
+        ),
+        comma
+      );
+    }
+
+    @return list.join($selectors, ", ");
+  } @else {
+    // Setup name var since we use `$module` later
+    $name: $module;
+
+    // Check if there's a shortname for the provided module name
+    @if map.has-key(config.get("content-classes"), $name) {
+      $name: map.get(config.get("content-classes"), $name);
+    }
+
+    $prefix: config.get("content-prefix");
+
+    @if $prefix and $prefix != "" {
+      $prefix: "#{$prefix}-";
+    }
+
+    // Setup the content module class name with prefix
+    $class: "#{$prefix}#{$name}";
+
+    // Apply all the arguments to class
+    @each $arg in $args {
+      // Convert arg to a string
+      $arg: "" + $arg;
+
+      // Ensure that it's not an empty string
+      @if $arg != "" {
+        // Append $arg to $class with a dash delimiter
+        $class: "#{$class}-#{$arg}";
+      }
+    }
+
+    // Get the content selector if one is required
+    $content-selector: -get-content-selector($module);
+
+    // Return the class
+    @return ".#{$class}#{$content-selector}";
+  }
+}

package/src/modules/_arrow.scss

@@ -0,0 +1,24 @@
+@use "@vrembem/core";
+@use "../functions" as fun;
+
+@if fun.maybe-output("arrow") {
+  #{fun.selector("arrow")},
+  #{fun.selector("arrow", "up")},
+  #{fun.selector("arrow", "down")},
+  #{fun.selector("arrow", "left")},
+  #{fun.selector("arrow", "right")} {
+    @include core.arrow;
+  }
+
+  #{fun.selector("arrow", "up")} {
+    transform: rotate(180deg);
+  }
+
+  #{fun.selector("arrow", "left")} {
+    transform: rotate(90deg);
+  }
+
+  #{fun.selector("arrow", "right")} {
+    transform: rotate(-90deg);
+  }
+}

package/src/modules/_blockquote.scss

@@ -0,0 +1,19 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("blockquote") {
+  @include tokens.register("blockquote");
+
+  #{fun.selector("blockquote")} {
+    position: relative;
+    padding: tokens.get("blockquote", "padding", tokens.get("spacing-md"));
+    border: tokens.get("blockquote", "border", tokens.get("border"));
+    border-radius: tokens.get("blockquote", "border-radius", tokens.get("border-radius"));
+    color: tokens.get("blockquote", "foreground", currentcolor);
+    background: tokens.get("blockquote", "background", transparent);
+
+    > * + * {
+      margin-top: tokens.get("blockquote", "spacing", tokens.get("spacing-md"));
+    }
+  }
+}

package/src/modules/_code.scss

@@ -0,0 +1,17 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("code") {
+  @include tokens.register("code");
+
+  #{fun.selector("code")} {
+    padding: tokens.get("code", "padding", 0.125rem 0.375rem);
+    border: tokens.get("code", "border", null);
+    border-radius: tokens.get("code", "border-radius", tokens.get("border-radius"));
+    font-family: tokens.get("font-family-mono");
+    font-size: tokens.get("code", "font-size", tokens.get("font-size-sm"));
+    color: tokens.get("code", "foreground", tokens.get("foreground-accent-alt"));
+    overflow-wrap: break-word;
+    background: tokens.get("code", "background", tokens.get("background-alt"));
+  }
+}

package/src/modules/_content.scss

@@ -0,0 +1,18 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("content") {
+  @include tokens.register("content");
+  @include tokens.register("heading");
+
+  #{fun.selector("content")} {
+    font-family: tokens.get("content", "font-family", inherit);
+    font-size: tokens.get("content", "font-size", inherit);
+    line-height: tokens.get("content", "line-height", inherit);
+    color: tokens.get("content", "foreground", tokens.get("foreground"));
+
+    > * + * {
+      margin-top: tokens.get("content", "spacing", null);
+    }
+  }
+}

package/src/modules/_headings.scss

@@ -0,0 +1,32 @@
+@use "sass:list";
+@use "sass:meta";
+@use "@vrembem/core/tokens";
+@use "@vrembem/core/config";
+@use "../functions" as fun;
+
+@if fun.maybe-output("headings") {
+  @include tokens.register("headings");
+
+  #{fun.selector(config.get("content-headings"))} {
+    font-family: tokens.get("headings", "font-family", inherit);
+    font-size: tokens.get("headings", "font-size", 1em);
+    font-weight: tokens.get("headings", "font-weight", tokens.get("font-weight-semi-bold"));
+    line-height: tokens.get("headings", "line-height", inherit);
+    color: tokens.get("headings", "foreground", tokens.get("foreground-strong"));
+  }
+
+  @each $key, $value in config.get("content-headings") {
+    $font-size: $value;
+    $line-height: null;
+
+    @if meta.type-of($value) == list {
+      $font-size: list.nth($value, 1);
+      $line-height: list.nth($value, 2);
+    }
+
+    #{fun.selector($key)} {
+      @include tokens.override("headings", "font-size", $font-size);
+      @include tokens.override("headings", "line-height", $line-height);
+    }
+  }
+}

package/src/modules/_link.scss

@@ -0,0 +1,41 @@
+@use "@vrembem/core/tokens";
+@use "@vrembem/core/palette";
+@use "../functions" as fun;
+
+@if fun.maybe-output("link") {
+  @include tokens.register("link");
+
+  #{fun.selector("link")} {
+    color: tokens.get("link", "foreground", tokens.get("foreground-accent"));
+    text-decoration: tokens.get("link", "decoration", underline);
+    text-decoration-thickness: tokens.get("link", "decoration-thickness", 1px);
+    text-underline-offset: tokens.get("link", "underline-offset", 2px);
+
+    code {
+      color: tokens.get("link", "foreground", tokens.get("foreground-accent"));
+      background-color: tokens.get("background-alt");
+    }
+
+    // prettier-ignore
+    &:hover,
+    &:focus {
+      color: tokens.get("link", "foreground-hover", light-dark(
+        oklch(from tokens.get("foreground-accent") calc(l - 0.1) c h),
+        oklch(from tokens.get("foreground-accent") calc(l + 0.1) c h),
+      ));
+      text-decoration: tokens.get("link", "decoration-hover", none);
+
+      code {
+        color: tokens.get("link", "foreground-hover", light-dark(
+          oklch(from tokens.get("foreground-accent") calc(l - 0.1) c h),
+          oklch(from tokens.get("foreground-accent") calc(l + 0.1) c h)
+        ));
+      }
+    }
+
+    &:focus {
+      outline: tokens.get("link", "focus-ring", currentcolor dotted 1px);
+      outline-offset: tokens.get("link", "focus-ring-offset", 0.125rem);
+    }
+  }
+}

package/src/modules/_list.scss

@@ -0,0 +1,24 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("list") {
+  @include tokens.register("list");
+
+  #{fun.selector("list")} {
+    margin-left: tokens.get("list", "indent", tokens.get("spacing-lg"));
+
+    ul,
+    ol {
+      margin-left: tokens.get("list", "indent", tokens.get("spacing-lg"));
+    }
+
+    li li,
+    li + li {
+      margin-top: tokens.get("list", "spacing", tokens.get("spacing-sm"));
+    }
+  }
+
+  #{fun.selector("list-style-none")} {
+    list-style: none !important;
+  }
+}

package/src/modules/_loading-spinner.scss

@@ -0,0 +1,8 @@
+@use "@vrembem/core";
+@use "../functions" as fun;
+
+@if fun.maybe-output("loading-spinner") {
+  #{fun.selector("loading-spinner")} {
+    @include core.loading-spinner(relative);
+  }
+}

package/src/modules/_pre.scss

@@ -0,0 +1,24 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("pre") {
+  @include tokens.register("pre");
+
+  #{fun.selector("pre")} {
+    overflow: auto;
+    padding: tokens.get("pre", "padding", tokens.get("spacing-md"));
+    border: tokens.get("pre", "border", none);
+    border-radius: tokens.get("pre", "border-radius", tokens.get("border-radius"));
+    font-family: tokens.get("font-family-mono");
+    color: tokens.get("pre", "foreground", tokens.get("foreground-strong"));
+    background: tokens.get("pre", "background", tokens.get("background-alt"));
+
+    code {
+      padding: 0;
+      border: none;
+      font-size: tokens.get("pre", "font-size", tokens.get("font-size-sm"));
+      color: inherit;
+      background: none;
+    }
+  }
+}

package/src/modules/_separator.scss

@@ -0,0 +1,13 @@
+@use "@vrembem/core/tokens";
+@use "../functions" as fun;
+
+@if fun.maybe-output("separator") {
+  @include tokens.register("separator");
+
+  #{fun.selector("separator")} {
+    display: block;
+    height: 0;
+    border: none;
+    border-top: tokens.get("separator", "border-width", tokens.get("border-width")) tokens.get("separator", "border-style", tokens.get("border-style")) tokens.get("separator", "border-color", tokens.get("border-color"));
+  }
+}

package/src/modules/_sr-only.scss

@@ -0,0 +1,8 @@
+@use "@vrembem/core";
+@use "../functions" as fun;
+
+@if fun.maybe-output("sr-only") {
+  #{fun.selector("sr-only")} {
+    @include core.sr-only;
+  }
+}